@treeui/vue 0.18.0 → 0.19.1

package/dist/components/TAppShell.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,20 @@
 import { useControllableOpen as e } from "../composables/useControllableOpen.js";
 import { treeSidebarInjectionKey as t } from "./sidebar.js";
-import { Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeProps as ee, nextTick as d, normalizeClass as f, normalizeProps as p, onBeforeUnmount as te, onMounted as ne, openBlock as m, provide as re, ref as h, renderSlot as g, resolveDynamicComponent as ie, toRef as _, unref as v, useAttrs as ae, watch as y, withCtx as b } from "vue";
-import { createId as oe, focusFirst as x, focusLast as se, getFocusableElements as ce, isEscapeKey as le } from "@treeui/utils";
-import { getTreeIcon as ue, treeIconDefaults as de } from "@treeui/icons";
+import { Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeProps as d, nextTick as f, normalizeClass as ee, normalizeProps as p, onBeforeUnmount as te, onMounted as ne, openBlock as m, provide as re, ref as h, renderSlot as g, resolveDynamicComponent as ie, toRef as _, unref as v, useAttrs as ae, watch as y, withCtx as b } from "vue";
+import { createId as oe, focusFirst as x, focusLast as se, getFocusableElements as S, isEscapeKey as ce } from "@treeui/utils";
+import { getTreeIcon as C, treeIconDefaults as w } from "@treeui/icons";
 //#region src/components/TAppShell.vue?vue&type=script&setup=true&lang.ts
-var S = [
+var le = [
 	"aria-label",
 	"aria-expanded",
 	"aria-controls"
-], C = {
+], ue = {
 	key: 1,
 	class: "t-app-shell__header-start"
-}, fe = { class: "t-app-shell__header-content" }, pe = ["id", "aria-label"], me = {
+}, de = { class: "t-app-shell__header-content" }, fe = ["id", "aria-label"], pe = {
 	key: 0,
 	class: "t-app-shell__sidebar-header"
-}, he = { class: "t-app-shell__sidebar-body" }, w = {
+}, me = { class: "t-app-shell__sidebar-body" }, he = {
 	key: 1,
 	class: "t-app-shell__sidebar-footer"
 }, ge = [
@@ -27,10 +27,10 @@ var S = [
 }, ye = ["id", "aria-label"], be = { class: "t-app-shell__drawer-topbar" }, xe = ["aria-label"], Se = { class: "t-app-shell__drawer-body" }, Ce = {
 	key: 0,
 	class: "t-app-shell__sidebar-header"
-}, we = { class: "t-app-shell__sidebar-body" }, T = {
+}, we = { class: "t-app-shell__sidebar-body" }, Te = {
 	key: 1,
 	class: "t-app-shell__sidebar-footer"
-}, E = /*@__PURE__*/ l({
+}, T = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "TAppShell",
 	props: {
@@ -63,6 +63,14 @@ var S = [
 			type: Boolean,
 			default: !1
 		},
+		immersive: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultImmersive: {
+			type: Boolean,
+			default: !1
+		},
 		closeOnEscape: {
 			type: Boolean,
 			default: !0
@@ -89,188 +97,159 @@ var S = [
 		"update:collapsed",
 		"collapse-change",
 		"update:sidebarOpen",
-		"sidebar-open-change"
+		"sidebar-open-change",
+		"update:immersive",
+		"immersive-change"
 	],
-	setup(l, { emit: E }) {
-		let D = r(() => ue("x")), O = l, k = E, A = ae(), j = oe("t-app-shell-sidebar"), { value: M, setValue: Te } = e(_(O, "collapsed"), O.defaultCollapsed, (e) => {
-			k("update:collapsed", e), k("collapse-change", e);
-		}), { value: N, setValue: P } = e(_(O, "sidebarOpen"), O.defaultSidebarOpen, (e) => {
-			k("update:sidebarOpen", e), k("sidebar-open-change", e);
-		}), F = h(!1), I = null, L = (e) => {
+	setup(l, { emit: T }) {
+		let Ee = r(() => C("x")), De = r(() => C("menu")), E = l, D = T, O = ae(), k = oe("t-app-shell-sidebar"), { value: A, setValue: Oe } = e(_(E, "collapsed"), E.defaultCollapsed, (e) => {
+			D("update:collapsed", e), D("collapse-change", e);
+		}), { value: j, setValue: M } = e(_(E, "sidebarOpen"), E.defaultSidebarOpen, (e) => {
+			D("update:sidebarOpen", e), D("sidebar-open-change", e);
+		}), { value: N, setValue: ke } = e(_(E, "immersive"), E.defaultImmersive, (e) => {
+			D("update:immersive", e), D("immersive-change", e);
+		}), P = () => {
+			ke(!N.value);
+		}, F = h(!1), I = null, L = (e) => {
 			F.value = e.matches;
 		}, R = () => {
-			typeof window > "u" || typeof window.matchMedia != "function" || (z(), I = window.matchMedia(`(max-width: ${O.breakpoint})`), F.value = I.matches, I.addEventListener?.("change", L));
+			typeof window > "u" || typeof window.matchMedia != "function" || (z(), I = window.matchMedia(`(max-width: ${E.breakpoint})`), F.value = I.matches, I.addEventListener?.("change", L));
 		}, z = () => {
 			I?.removeEventListener?.("change", L), I = null;
-		}, B = r(() => O.mobile ?? F.value), V = r(() => !B.value && O.collapsible && O.showCollapseButton), H = r(() => !B.value && M.value), U = h(null), W = h(null), G = "", K = !1, q = () => {
+		}, B = r(() => E.mobile ?? F.value), V = r(() => !B.value && E.collapsible && E.showCollapseButton), H = r(() => !B.value && A.value), Ae = r(() => C((E.side === "right" ? H.value : !H.value) ? "panel-left" : "panel-right")), U = h(null), W = h(null), G = "", K = !1, q = () => {
 			typeof document > "u" || K || (G = document.body.style.overflow, document.body.style.overflow = "hidden", K = !0);
 		}, J = () => {
 			typeof document > "u" || !K || (document.body.style.overflow = G, K = !1);
 		}, Y = () => {
-			d(() => {
+			f(() => {
 				U.value && (x(U.value) || U.value.focus());
 			});
-		}, Ee = () => {
-			W.value = typeof document > "u" ? null : document.activeElement, P(!0);
+		}, je = () => {
+			W.value = typeof document > "u" ? null : document.activeElement, M(!0);
 		}, X = () => {
-			P(!1);
+			M(!1);
 		}, Z = () => {
-			N.value ? X() : Ee();
+			j.value ? X() : je();
 		}, Q = () => {
-			O.collapsible && Te(!M.value);
-		}, De = () => {
-			O.closeOnOverlay && X();
-		}, Oe = (e) => {
-			if (le(e) && O.closeOnEscape) {
+			E.collapsible && Oe(!A.value);
+		}, Me = () => {
+			E.closeOnOverlay && X();
+		}, Ne = (e) => {
+			if (ce(e) && E.closeOnEscape) {
 				e.preventDefault(), X();
 				return;
 			}
 			if (e.key !== "Tab" || !U.value) return;
-			let t = ce(U.value);
+			let t = S(U.value);
 			if (!t.length) {
 				e.preventDefault(), U.value.focus();
 				return;
 			}
 			let n = t[0], r = t[t.length - 1], i = document.activeElement;
 			e.shiftKey && i === n && (e.preventDefault(), se(U.value)), !e.shiftKey && i === r && (e.preventDefault(), x(U.value));
-		}, ke = (e, t) => {
+		}, Pe = (e, t) => {
 			if (e && B.value) {
 				q(), Y();
 				return;
 			}
-			t && (J(), d(() => {
+			t && (J(), f(() => {
 				W.value?.focus();
 			}));
 		};
-		y(N, (e, t) => {
-			ke(e, !!t);
+		y(j, (e, t) => {
+			Pe(e, !!t);
+		}), y(N, (e) => {
+			!j.value || !B.value || (e ? (J(), f(() => {
+				W.value?.focus();
+			})) : (q(), Y()));
 		}), y(B, (e) => {
-			N.value && (e ? (q(), Y()) : J());
-		}), y(() => O.breakpoint, () => {
+			j.value && (e ? (q(), Y()) : J());
+		}), y(() => E.breakpoint, () => {
 			typeof window < "u" && R();
 		}), ne(() => {
 			R();
 		}), te(() => {
 			z(), J();
 		}), re(t, { collapsed: H });
-		let Ae = r(() => [
+		let Fe = r(() => [
 			"t-app-shell",
-			`t-app-shell--${O.side}`,
+			`t-app-shell--${E.side}`,
 			{
 				"is-mobile": B.value,
-				"is-collapsed": !B.value && O.collapsible && M.value,
-				"is-sidebar-open": B.value && N.value
+				"is-collapsed": !B.value && E.collapsible && A.value,
+				"is-sidebar-open": B.value && j.value,
+				"is-immersive": N.value
 			},
-			A.class
-		]), je = r(() => [{
-			"--tree-app-shell-sidebar-width": O.sidebarWidth,
-			"--tree-app-shell-collapsed-width": O.collapsedWidth
-		}, A.style]), Me = r(() => {
-			let { class: e, style: t, ...n } = A;
+			O.class
+		]), Ie = r(() => [{
+			"--tree-app-shell-sidebar-width": E.sidebarWidth,
+			"--tree-app-shell-collapsed-width": E.collapsedWidth
+		}, O.style]), Le = r(() => {
+			let { class: e, style: t, ...n } = O;
 			return n;
 		}), $ = r(() => ({
 			mobile: B.value,
 			collapsed: H.value,
-			sidebarOpen: N.value,
+			sidebarOpen: j.value,
+			immersive: N.value,
 			toggleSidebar: Z,
 			closeSidebar: X,
-			toggleCollapsed: Q
+			toggleCollapsed: Q,
+			toggleImmersive: P
 		}));
-		return (e, t) => (m(), i(ie(l.as), ee(Me.value, {
-			class: Ae.value,
-			style: je.value,
+		return (e, t) => (m(), i(ie(l.as), d(Le.value, {
+			class: Fe.value,
+			style: Ie.value,
 			"data-mobile": B.value ? "true" : "false"
 		}), {
 			default: b(() => [
-				s("header", { class: f(["t-app-shell__header", { "has-start": !!e.$slots["header-start"] }]) }, [
+				s("header", { class: ee(["t-app-shell__header", { "has-start": !!e.$slots["header-start"] }]) }, [
 					B.value && l.showMenuButton ? (m(), o("button", {
 						key: 0,
 						type: "button",
 						class: "t-app-shell__menu-button",
 						"aria-label": l.menuLabel,
-						"aria-expanded": v(N),
-						"aria-controls": v(j),
+						"aria-expanded": v(j),
+						"aria-controls": v(k),
 						onClick: Z
-					}, [g(e.$slots, "menu-icon", { sidebarOpen: v(N) }, () => [t[0] ||= s("svg", {
-						xmlns: "http://www.w3.org/2000/svg",
-						width: "24",
-						height: "24",
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"stroke-linecap": "round",
-						"stroke-linejoin": "round",
+					}, [g(e.$slots, "menu-icon", { sidebarOpen: v(j) }, () => [c(v(De), d(v(w), {
+						size: 24,
 						"aria-hidden": "true"
-					}, [
-						s("line", {
-							x1: "4",
-							x2: "20",
-							y1: "6",
-							y2: "6"
-						}),
-						s("line", {
-							x1: "4",
-							x2: "20",
-							y1: "12",
-							y2: "12"
-						}),
-						s("line", {
-							x1: "4",
-							x2: "20",
-							y1: "18",
-							y2: "18"
-						})
-					], -1)])], 8, S)) : a("", !0),
-					e.$slots["header-start"] ? (m(), o("div", C, [g(e.$slots, "header-start", p(u($.value)))])) : a("", !0),
-					s("div", fe, [g(e.$slots, "header", p(u($.value)))])
+					}), null, 16)])], 8, le)) : a("", !0),
+					e.$slots["header-start"] ? (m(), o("div", ue, [g(e.$slots, "header-start", p(u($.value)))])) : a("", !0),
+					s("div", de, [g(e.$slots, "header", p(u($.value)))])
 				], 2),
 				B.value ? a("", !0) : (m(), o("aside", {
 					key: 0,
-					id: v(j),
+					id: v(k),
 					class: "t-app-shell__sidebar",
 					"aria-label": l.sidebarLabel
 				}, [
-					e.$slots["sidebar-header"] ? (m(), o("div", me, [g(e.$slots, "sidebar-header", p(u($.value)))])) : a("", !0),
-					s("div", he, [g(e.$slots, "sidebar", p(u($.value)))]),
-					e.$slots["sidebar-footer"] || V.value ? (m(), o("div", w, [g(e.$slots, "sidebar-footer", p(u($.value))), V.value ? (m(), o("button", {
+					e.$slots["sidebar-header"] ? (m(), o("div", pe, [g(e.$slots, "sidebar-header", p(u($.value)))])) : a("", !0),
+					s("div", me, [g(e.$slots, "sidebar", p(u($.value)))]),
+					e.$slots["sidebar-footer"] || V.value ? (m(), o("div", he, [g(e.$slots, "sidebar-footer", p(u($.value))), V.value ? (m(), o("button", {
 						key: 0,
 						type: "button",
 						class: "t-app-shell__collapse-button",
-						"aria-label": v(M) ? l.expandLabel : l.collapseLabel,
-						"aria-expanded": !v(M),
-						"aria-controls": v(j),
+						"aria-label": v(A) ? l.expandLabel : l.collapseLabel,
+						"aria-expanded": !v(A),
+						"aria-controls": v(k),
 						onClick: Q
-					}, [g(e.$slots, "collapse-icon", { collapsed: H.value }, () => [t[1] ||= s("svg", {
-						xmlns: "http://www.w3.org/2000/svg",
-						width: "20",
-						height: "20",
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"stroke-linecap": "round",
-						"stroke-linejoin": "round",
-						"aria-hidden": "true"
-					}, [s("rect", {
-						x: "3",
-						y: "3",
-						width: "18",
-						height: "18",
-						rx: "2"
-					}), s("path", { d: "M9 3v18" })], -1)])], 8, ge)) : a("", !0)])) : a("", !0)
-				], 8, pe)),
+					}, [g(e.$slots, "collapse-icon", { collapsed: H.value }, () => [c(v(Ae), d(v(w), { "aria-hidden": "true" }), null, 16)])], 8, ge)) : a("", !0)])) : a("", !0)
+				], 8, fe)),
 				s("main", _e, [g(e.$slots, "default", {
 					mobile: B.value,
-					collapsed: H.value
+					collapsed: H.value,
+					immersive: v(N),
+					toggleImmersive: P
 				})]),
 				c(n, { name: "t-app-shell-fade" }, {
-					default: b(() => [B.value && v(N) ? (m(), o("div", ve, [s("div", {
+					default: b(() => [B.value && v(j) && !v(N) ? (m(), o("div", ve, [s("div", {
 						class: "t-app-shell__backdrop",
 						"aria-hidden": "true",
-						onClick: De
+						onClick: Me
 					}), s("aside", {
-						id: v(j),
+						id: v(k),
 						ref_key: "surfaceRef",
 						ref: U,
 						class: "t-app-shell__drawer",
@@ -278,16 +257,16 @@ var S = [
 						"aria-modal": "true",
 						"aria-label": l.sidebarLabel,
 						tabindex: "-1",
-						onKeydown: Oe
+						onKeydown: Ne
 					}, [s("div", be, [s("button", {
 						type: "button",
 						class: "t-app-shell__drawer-close",
 						"aria-label": l.closeLabel,
 						onClick: X
-					}, [c(v(D), p(u(v(de))), null, 16)], 8, xe)]), s("div", Se, [
+					}, [c(v(Ee), p(u(v(w))), null, 16)], 8, xe)]), s("div", Se, [
 						e.$slots["sidebar-header"] ? (m(), o("div", Ce, [g(e.$slots, "sidebar-header", p(u($.value)))])) : a("", !0),
 						s("div", we, [g(e.$slots, "sidebar", p(u($.value)))]),
-						e.$slots["sidebar-footer"] ? (m(), o("div", T, [g(e.$slots, "sidebar-footer", p(u($.value)))])) : a("", !0)
+						e.$slots["sidebar-footer"] ? (m(), o("div", Te, [g(e.$slots, "sidebar-footer", p(u($.value)))])) : a("", !0)
 					])], 40, ye)])) : a("", !0)]),
 					_: 3
 				})
@@ -301,6 +280,6 @@ var S = [
 	}
 });
 //#endregion
-export { E as default };
+export { T as default };
 
 //# sourceMappingURL=TAppShell.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/TAppShell.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TAppShell.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TAppShell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSidebarSide } from './TSidebar.vue';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    side?: TSidebarSide;\n    sidebarWidth?: string;\n    collapsedWidth?: string;\n    collapsible?: boolean;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    mobile?: boolean;\n    breakpoint?: string;\n    sidebarOpen?: boolean;\n    defaultSidebarOpen?: boolean;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showMenuButton?: boolean;\n    /** Render the built-in collapse toggle in the sidebar footer (desktop). */\n    showCollapseButton?: boolean;\n    menuLabel?: string;\n    closeLabel?: string;\n    sidebarLabel?: string;\n    collapseLabel?: string;\n    expandLabel?: string;\n  }>(),\n  {\n    as: 'div',\n    side: 'left',\n    sidebarWidth: '17.5rem',\n    collapsedWidth: '4.75rem',\n    collapsible: false,\n    collapsed: undefined,\n    defaultCollapsed: false,\n    mobile: undefined,\n    breakpoint: '768px',\n    sidebarOpen: undefined,\n    defaultSidebarOpen: false,\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showMenuButton: true,\n    showCollapseButton: true,\n    menuLabel: 'Open menu',\n    closeLabel: 'Close menu',\n    sidebarLabel: 'Sidebar',\n    collapseLabel: 'Collapse sidebar',\n    expandLabel: 'Expand sidebar',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:collapsed': [value: boolean];\n  'collapse-change': [value: boolean];\n  'update:sidebarOpen': [value: boolean];\n  'sidebar-open-change': [value: boolean];\n}>();\n\nexport interface AppShellSlotProps {\n  mobile: boolean;\n  collapsed: boolean;\n  sidebarOpen: boolean;\n  toggleSidebar: () => void;\n  closeSidebar: () => void;\n  toggleCollapsed: () => void;\n}\n\ndefineSlots<{\n  header?: (props: AppShellSlotProps) => unknown;\n  /** Header region over the sidebar rail; the `header` slot then aligns with the content panel. */\n  'header-start'?: (props: AppShellSlotProps) => unknown;\n  /** Pinned above the sidebar body, inset to line up with nav item icons. */\n  'sidebar-header'?: (props: AppShellSlotProps) => unknown;\n  sidebar?: (props: AppShellSlotProps) => unknown;\n  /** Pinned to the bottom of the sidebar, inset to line up with nav item icons. */\n  'sidebar-footer'?: (props: AppShellSlotProps) => unknown;\n  default?: (props: Pick<AppShellSlotProps, 'mobile' | 'collapsed'>) => unknown;\n  'menu-icon'?: (props: { sidebarOpen: boolean }) => unknown;\n  'collapse-icon'?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebarId = createId('t-app-shell-sidebar');\n\nconst { value: isCollapsed, setValue: setCollapsed } = useControllableOpen(\n  toRef(props, 'collapsed'),\n  props.defaultCollapsed,\n  (value) => {\n    emit('update:collapsed', value);\n    emit('collapse-change', value);\n  },\n);\n\nconst { value: isSidebarOpen, setValue: setSidebarOpen } = useControllableOpen(\n  toRef(props, 'sidebarOpen'),\n  props.defaultSidebarOpen,\n  (value) => {\n    emit('update:sidebarOpen', value);\n    emit('sidebar-open-change', value);\n  },\n);\n\n// Auto responsive detection when `mobile` is not explicitly controlled.\nconst autoMobile = ref(false);\nlet mediaQuery: MediaQueryList | null = null;\n\nconst onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {\n  autoMobile.value = event.matches;\n};\n\nconst setupMediaQuery = () => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return;\n  }\n\n  teardownMediaQuery();\n  mediaQuery = window.matchMedia(`(max-width: ${props.breakpoint})`);\n  autoMobile.value = mediaQuery.matches;\n  mediaQuery.addEventListener?.('change', onMediaChange);\n};\n\nconst teardownMediaQuery = () => {\n  mediaQuery?.removeEventListener?.('change', onMediaChange);\n  mediaQuery = null;\n};\n\nconst isMobile = computed(() => props.mobile ?? autoMobile.value);\n\n// Collapsing is desktop-only, so the built-in toggle follows the same rule.\nconst showCollapseToggle = computed(\n  () => !isMobile.value && props.collapsible && props.showCollapseButton,\n);\n\n// Collapse is a desktop-only concept; the mobile drawer always shows the\n// expanded sidebar, so descendants and slots see `collapsed: false` there.\nconst effectiveCollapsed = computed(() =>\n  isMobile.value ? false : isCollapsed.value,\n);\n\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nlet previousBodyOverflow = '';\nlet bodyLocked = false;\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined' || bodyLocked) {\n    return;\n  }\n\n  previousBodyOverflow = document.body.style.overflow;\n  document.body.style.overflow = 'hidden';\n  bodyLocked = true;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || !bodyLocked) {\n    return;\n  }\n\n  document.body.style.overflow = previousBodyOverflow;\n  bodyLocked = false;\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openSidebar = () => {\n  previousFocusedElement.value =\n    typeof document === 'undefined'\n      ? null\n      : (document.activeElement as HTMLElement | null);\n  setSidebarOpen(true);\n};\n\nconst closeSidebar = () => {\n  setSidebarOpen(false);\n};\n\nconst toggleSidebar = () => {\n  if (isSidebarOpen.value) {\n    closeSidebar();\n  } else {\n    openSidebar();\n  }\n};\n\nconst toggleCollapsed = () => {\n  if (!props.collapsible) {\n    return;\n  }\n\n  setCollapsed(!isCollapsed.value);\n};\n\nconst onOverlayClick = () => {\n  if (props.closeOnOverlay) {\n    closeSidebar();\n  }\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeSidebar();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\n// The off-canvas drawer only exists in mobile mode; keep body-scroll lock and\n// focus handling in sync with both the open flag and the responsive mode.\nconst syncOverlayState = (open: boolean, wasOpen: boolean) => {\n  if (open && isMobile.value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (wasOpen) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n};\n\nwatch(isSidebarOpen, (value, previousValue) => {\n  syncOverlayState(value, Boolean(previousValue));\n});\n\nwatch(isMobile, (mobile) => {\n  if (!isSidebarOpen.value) {\n    return;\n  }\n\n  // Leaving mobile removes the drawer from the DOM, so release the lock and\n  // restore focus; re-entering mobile while \"open\" re-arms the overlay.\n  if (mobile) {\n    lockBodyScroll();\n    focusSurface();\n  } else {\n    unlockBodyScroll();\n  }\n});\n\nwatch(\n  () => props.breakpoint,\n  () => {\n    if (typeof window !== 'undefined') {\n      setupMediaQuery();\n    }\n  },\n);\n\nonMounted(() => {\n  setupMediaQuery();\n});\n\nonBeforeUnmount(() => {\n  teardownMediaQuery();\n  unlockBodyScroll();\n});\n\nprovide(treeSidebarInjectionKey, {\n  collapsed: effectiveCollapsed,\n});\n\nconst rootClasses = computed(() => [\n  't-app-shell',\n  `t-app-shell--${props.side}`,\n  {\n    'is-mobile': isMobile.value,\n    'is-collapsed':\n      !isMobile.value && props.collapsible && isCollapsed.value,\n    'is-sidebar-open': isMobile.value && isSidebarOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    '--tree-app-shell-sidebar-width': props.sidebarWidth,\n    '--tree-app-shell-collapsed-width': props.collapsedWidth,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst slotProps = computed<AppShellSlotProps>(() => ({\n  mobile: isMobile.value,\n  collapsed: effectiveCollapsed.value,\n  sidebarOpen: isSidebarOpen.value,\n  toggleSidebar,\n  closeSidebar,\n  toggleCollapsed,\n}));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-mobile=\"isMobile ? 'true' : 'false'\"\n  >\n    <header\n      class=\"t-app-shell__header\"\n      :class=\"{ 'has-start': Boolean($slots['header-start']) }\"\n    >\n      <button\n        v-if=\"isMobile && showMenuButton\"\n        type=\"button\"\n        class=\"t-app-shell__menu-button\"\n        :aria-label=\"menuLabel\"\n        :aria-expanded=\"isSidebarOpen\"\n        :aria-controls=\"sidebarId\"\n        @click=\"toggleSidebar\"\n      >\n        <slot\n          name=\"menu-icon\"\n          :sidebar-open=\"isSidebarOpen\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"6\"\n              y2=\"6\"\n            />\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"12\"\n              y2=\"12\"\n            />\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"18\"\n              y2=\"18\"\n            />\n          </svg>\n        </slot>\n      </button>\n\n      <div\n        v-if=\"$slots['header-start']\"\n        class=\"t-app-shell__header-start\"\n      >\n        <slot\n          name=\"header-start\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__header-content\">\n        <slot\n          name=\"header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n    </header>\n\n    <aside\n      v-if=\"!isMobile\"\n      :id=\"sidebarId\"\n      class=\"t-app-shell__sidebar\"\n      :aria-label=\"sidebarLabel\"\n    >\n      <div\n        v-if=\"$slots['sidebar-header']\"\n        class=\"t-app-shell__sidebar-header\"\n      >\n        <slot\n          name=\"sidebar-header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__sidebar-body\">\n        <slot\n          name=\"sidebar\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div\n        v-if=\"$slots['sidebar-footer'] || showCollapseToggle\"\n        class=\"t-app-shell__sidebar-footer\"\n      >\n        <slot\n          name=\"sidebar-footer\"\n          v-bind=\"slotProps\"\n        />\n\n        <button\n          v-if=\"showCollapseToggle\"\n          type=\"button\"\n          class=\"t-app-shell__collapse-button\"\n          :aria-label=\"isCollapsed ? expandLabel : collapseLabel\"\n          :aria-expanded=\"!isCollapsed\"\n          :aria-controls=\"sidebarId\"\n          @click=\"toggleCollapsed\"\n        >\n          <slot\n            name=\"collapse-icon\"\n            :collapsed=\"effectiveCollapsed\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <rect\n                x=\"3\"\n                y=\"3\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n              />\n              <path d=\"M9 3v18\" />\n            </svg>\n          </slot>\n        </button>\n      </div>\n    </aside>\n\n    <main class=\"t-app-shell__main\">\n      <slot\n        :mobile=\"isMobile\"\n        :collapsed=\"effectiveCollapsed\"\n      />\n    </main>\n\n    <transition name=\"t-app-shell-fade\">\n      <div\n        v-if=\"isMobile && isSidebarOpen\"\n        class=\"t-app-shell__overlay\"\n      >\n        <div\n          class=\"t-app-shell__backdrop\"\n          aria-hidden=\"true\"\n          @click=\"onOverlayClick\"\n        />\n        <aside\n          :id=\"sidebarId\"\n          ref=\"surfaceRef\"\n          class=\"t-app-shell__drawer\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"sidebarLabel\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <div class=\"t-app-shell__drawer-topbar\">\n            <button\n              type=\"button\"\n              class=\"t-app-shell__drawer-close\"\n              :aria-label=\"closeLabel\"\n              @click=\"closeSidebar\"\n            >\n              <CloseIcon v-bind=\"treeIconDefaults\" />\n            </button>\n          </div>\n          <div class=\"t-app-shell__drawer-body\">\n            <div\n              v-if=\"$slots['sidebar-header']\"\n              class=\"t-app-shell__sidebar-header\"\n            >\n              <slot\n                name=\"sidebar-header\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div class=\"t-app-shell__sidebar-body\">\n              <slot\n                name=\"sidebar\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div\n              v-if=\"$slots['sidebar-footer']\"\n              class=\"t-app-shell__sidebar-footer\"\n            >\n              <slot\n                name=\"sidebar-footer\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n          </div>\n        </aside>\n      </div>\n    </transition>\n  </component>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TAppShell.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TAppShell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSidebarSide } from './TSidebar.vue';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = computed(() => getTreeIcon('x'));\nconst MenuIcon = computed(() => getTreeIcon('menu'));\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    side?: TSidebarSide;\n    sidebarWidth?: string;\n    collapsedWidth?: string;\n    collapsible?: boolean;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    mobile?: boolean;\n    breakpoint?: string;\n    sidebarOpen?: boolean;\n    defaultSidebarOpen?: boolean;\n    /**\n     * Hide the shell chrome (header and sidebar) so the content fills the\n     * viewport. The default slot stays mounted across the toggle.\n     */\n    immersive?: boolean;\n    defaultImmersive?: boolean;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showMenuButton?: boolean;\n    /** Render the built-in collapse toggle in the sidebar footer (desktop). */\n    showCollapseButton?: boolean;\n    menuLabel?: string;\n    closeLabel?: string;\n    sidebarLabel?: string;\n    collapseLabel?: string;\n    expandLabel?: string;\n  }>(),\n  {\n    as: 'div',\n    side: 'left',\n    sidebarWidth: '17.5rem',\n    collapsedWidth: '4.75rem',\n    collapsible: false,\n    collapsed: undefined,\n    defaultCollapsed: false,\n    mobile: undefined,\n    breakpoint: '768px',\n    sidebarOpen: undefined,\n    defaultSidebarOpen: false,\n    immersive: undefined,\n    defaultImmersive: false,\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showMenuButton: true,\n    showCollapseButton: true,\n    menuLabel: 'Open menu',\n    closeLabel: 'Close menu',\n    sidebarLabel: 'Sidebar',\n    collapseLabel: 'Collapse sidebar',\n    expandLabel: 'Expand sidebar',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:collapsed': [value: boolean];\n  'collapse-change': [value: boolean];\n  'update:sidebarOpen': [value: boolean];\n  'sidebar-open-change': [value: boolean];\n  'update:immersive': [value: boolean];\n  'immersive-change': [value: boolean];\n}>();\n\nexport interface AppShellSlotProps {\n  mobile: boolean;\n  collapsed: boolean;\n  sidebarOpen: boolean;\n  immersive: boolean;\n  toggleSidebar: () => void;\n  closeSidebar: () => void;\n  toggleCollapsed: () => void;\n  toggleImmersive: () => void;\n}\n\ndefineSlots<{\n  header?: (props: AppShellSlotProps) => unknown;\n  /** Header region over the sidebar rail; the `header` slot then aligns with the content panel. */\n  'header-start'?: (props: AppShellSlotProps) => unknown;\n  /** Pinned above the sidebar body, inset to line up with nav item icons. */\n  'sidebar-header'?: (props: AppShellSlotProps) => unknown;\n  sidebar?: (props: AppShellSlotProps) => unknown;\n  /** Pinned to the bottom of the sidebar, inset to line up with nav item icons. */\n  'sidebar-footer'?: (props: AppShellSlotProps) => unknown;\n  /**\n   * Immersive hides the chrome, so the content is the only place an exit\n   * control can live — `immersive` and `toggleImmersive` are passed through.\n   */\n  default?: (\n    props: Pick<AppShellSlotProps, 'mobile' | 'collapsed' | 'immersive' | 'toggleImmersive'>,\n  ) => unknown;\n  'menu-icon'?: (props: { sidebarOpen: boolean }) => unknown;\n  'collapse-icon'?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebarId = createId('t-app-shell-sidebar');\n\nconst { value: isCollapsed, setValue: setCollapsed } = useControllableOpen(\n  toRef(props, 'collapsed'),\n  props.defaultCollapsed,\n  (value) => {\n    emit('update:collapsed', value);\n    emit('collapse-change', value);\n  },\n);\n\nconst { value: isSidebarOpen, setValue: setSidebarOpen } = useControllableOpen(\n  toRef(props, 'sidebarOpen'),\n  props.defaultSidebarOpen,\n  (value) => {\n    emit('update:sidebarOpen', value);\n    emit('sidebar-open-change', value);\n  },\n);\n\nconst { value: isImmersive, setValue: setImmersive } = useControllableOpen(\n  toRef(props, 'immersive'),\n  props.defaultImmersive,\n  (value) => {\n    emit('update:immersive', value);\n    emit('immersive-change', value);\n  },\n);\n\nconst toggleImmersive = () => {\n  setImmersive(!isImmersive.value);\n};\n\n// Auto responsive detection when `mobile` is not explicitly controlled.\nconst autoMobile = ref(false);\nlet mediaQuery: MediaQueryList | null = null;\n\nconst onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {\n  autoMobile.value = event.matches;\n};\n\nconst setupMediaQuery = () => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return;\n  }\n\n  teardownMediaQuery();\n  mediaQuery = window.matchMedia(`(max-width: ${props.breakpoint})`);\n  autoMobile.value = mediaQuery.matches;\n  mediaQuery.addEventListener?.('change', onMediaChange);\n};\n\nconst teardownMediaQuery = () => {\n  mediaQuery?.removeEventListener?.('change', onMediaChange);\n  mediaQuery = null;\n};\n\nconst isMobile = computed(() => props.mobile ?? autoMobile.value);\n\n// Collapsing is desktop-only, so the built-in toggle follows the same rule.\nconst showCollapseToggle = computed(\n  () => !isMobile.value && props.collapsible && props.showCollapseButton,\n);\n\n// Collapse is a desktop-only concept; the mobile drawer always shows the\n// expanded sidebar, so descendants and slots see `collapsed: false` there.\nconst effectiveCollapsed = computed(() =>\n  isMobile.value ? false : isCollapsed.value,\n);\n\n// The glyph points the way the rail will move: collapsing a left sidebar folds\n// it left, expanding it pushes right (mirrored for a right-anchored sidebar).\nconst CollapseIcon = computed(() => {\n  const pointsStart = props.side === 'right' ? effectiveCollapsed.value : !effectiveCollapsed.value;\n  return getTreeIcon(pointsStart ? 'panel-left' : 'panel-right');\n});\n\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nlet previousBodyOverflow = '';\nlet bodyLocked = false;\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined' || bodyLocked) {\n    return;\n  }\n\n  previousBodyOverflow = document.body.style.overflow;\n  document.body.style.overflow = 'hidden';\n  bodyLocked = true;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || !bodyLocked) {\n    return;\n  }\n\n  document.body.style.overflow = previousBodyOverflow;\n  bodyLocked = false;\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openSidebar = () => {\n  previousFocusedElement.value =\n    typeof document === 'undefined'\n      ? null\n      : (document.activeElement as HTMLElement | null);\n  setSidebarOpen(true);\n};\n\nconst closeSidebar = () => {\n  setSidebarOpen(false);\n};\n\nconst toggleSidebar = () => {\n  if (isSidebarOpen.value) {\n    closeSidebar();\n  } else {\n    openSidebar();\n  }\n};\n\nconst toggleCollapsed = () => {\n  if (!props.collapsible) {\n    return;\n  }\n\n  setCollapsed(!isCollapsed.value);\n};\n\nconst onOverlayClick = () => {\n  if (props.closeOnOverlay) {\n    closeSidebar();\n  }\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeSidebar();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\n// The off-canvas drawer only exists in mobile mode; keep body-scroll lock and\n// focus handling in sync with both the open flag and the responsive mode.\nconst syncOverlayState = (open: boolean, wasOpen: boolean) => {\n  if (open && isMobile.value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (wasOpen) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n};\n\nwatch(isSidebarOpen, (value, previousValue) => {\n  syncOverlayState(value, Boolean(previousValue));\n});\n\n// Entering immersive removes the drawer from the DOM without changing\n// `sidebarOpen`, so the sidebarOpen watcher never fires and would leave the\n// body scroll-locked with focus stranded on an unmounted surface. Release and\n// re-arm here, mirroring the responsive-mode watcher below.\nwatch(isImmersive, (immersive) => {\n  if (!isSidebarOpen.value || !isMobile.value) {\n    return;\n  }\n\n  if (immersive) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  } else {\n    lockBodyScroll();\n    focusSurface();\n  }\n});\n\nwatch(isMobile, (mobile) => {\n  if (!isSidebarOpen.value) {\n    return;\n  }\n\n  // Leaving mobile removes the drawer from the DOM, so release the lock and\n  // restore focus; re-entering mobile while \"open\" re-arms the overlay.\n  if (mobile) {\n    lockBodyScroll();\n    focusSurface();\n  } else {\n    unlockBodyScroll();\n  }\n});\n\nwatch(\n  () => props.breakpoint,\n  () => {\n    if (typeof window !== 'undefined') {\n      setupMediaQuery();\n    }\n  },\n);\n\nonMounted(() => {\n  setupMediaQuery();\n});\n\nonBeforeUnmount(() => {\n  teardownMediaQuery();\n  unlockBodyScroll();\n});\n\nprovide(treeSidebarInjectionKey, {\n  collapsed: effectiveCollapsed,\n});\n\nconst rootClasses = computed(() => [\n  't-app-shell',\n  `t-app-shell--${props.side}`,\n  {\n    'is-mobile': isMobile.value,\n    'is-collapsed':\n      !isMobile.value && props.collapsible && isCollapsed.value,\n    'is-sidebar-open': isMobile.value && isSidebarOpen.value,\n    'is-immersive': isImmersive.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    '--tree-app-shell-sidebar-width': props.sidebarWidth,\n    '--tree-app-shell-collapsed-width': props.collapsedWidth,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst slotProps = computed<AppShellSlotProps>(() => ({\n  mobile: isMobile.value,\n  collapsed: effectiveCollapsed.value,\n  sidebarOpen: isSidebarOpen.value,\n  immersive: isImmersive.value,\n  toggleSidebar,\n  closeSidebar,\n  toggleCollapsed,\n  toggleImmersive,\n}));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-mobile=\"isMobile ? 'true' : 'false'\"\n  >\n    <header\n      class=\"t-app-shell__header\"\n      :class=\"{ 'has-start': Boolean($slots['header-start']) }\"\n    >\n      <button\n        v-if=\"isMobile && showMenuButton\"\n        type=\"button\"\n        class=\"t-app-shell__menu-button\"\n        :aria-label=\"menuLabel\"\n        :aria-expanded=\"isSidebarOpen\"\n        :aria-controls=\"sidebarId\"\n        @click=\"toggleSidebar\"\n      >\n        <slot\n          name=\"menu-icon\"\n          :sidebar-open=\"isSidebarOpen\"\n        >\n          <MenuIcon\n            v-bind=\"treeIconDefaults\"\n            :size=\"24\"\n            aria-hidden=\"true\"\n          />\n        </slot>\n      </button>\n\n      <div\n        v-if=\"$slots['header-start']\"\n        class=\"t-app-shell__header-start\"\n      >\n        <slot\n          name=\"header-start\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__header-content\">\n        <slot\n          name=\"header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n    </header>\n\n    <aside\n      v-if=\"!isMobile\"\n      :id=\"sidebarId\"\n      class=\"t-app-shell__sidebar\"\n      :aria-label=\"sidebarLabel\"\n    >\n      <div\n        v-if=\"$slots['sidebar-header']\"\n        class=\"t-app-shell__sidebar-header\"\n      >\n        <slot\n          name=\"sidebar-header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__sidebar-body\">\n        <slot\n          name=\"sidebar\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div\n        v-if=\"$slots['sidebar-footer'] || showCollapseToggle\"\n        class=\"t-app-shell__sidebar-footer\"\n      >\n        <slot\n          name=\"sidebar-footer\"\n          v-bind=\"slotProps\"\n        />\n\n        <button\n          v-if=\"showCollapseToggle\"\n          type=\"button\"\n          class=\"t-app-shell__collapse-button\"\n          :aria-label=\"isCollapsed ? expandLabel : collapseLabel\"\n          :aria-expanded=\"!isCollapsed\"\n          :aria-controls=\"sidebarId\"\n          @click=\"toggleCollapsed\"\n        >\n          <slot\n            name=\"collapse-icon\"\n            :collapsed=\"effectiveCollapsed\"\n          >\n            <CollapseIcon\n              v-bind=\"treeIconDefaults\"\n              aria-hidden=\"true\"\n            />\n          </slot>\n        </button>\n      </div>\n    </aside>\n\n    <main class=\"t-app-shell__main\">\n      <slot\n        :mobile=\"isMobile\"\n        :collapsed=\"effectiveCollapsed\"\n        :immersive=\"isImmersive\"\n        :toggle-immersive=\"toggleImmersive\"\n      />\n    </main>\n\n    <transition name=\"t-app-shell-fade\">\n      <div\n        v-if=\"isMobile && isSidebarOpen && !isImmersive\"\n        class=\"t-app-shell__overlay\"\n      >\n        <div\n          class=\"t-app-shell__backdrop\"\n          aria-hidden=\"true\"\n          @click=\"onOverlayClick\"\n        />\n        <aside\n          :id=\"sidebarId\"\n          ref=\"surfaceRef\"\n          class=\"t-app-shell__drawer\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"sidebarLabel\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <div class=\"t-app-shell__drawer-topbar\">\n            <button\n              type=\"button\"\n              class=\"t-app-shell__drawer-close\"\n              :aria-label=\"closeLabel\"\n              @click=\"closeSidebar\"\n            >\n              <CloseIcon v-bind=\"treeIconDefaults\" />\n            </button>\n          </div>\n          <div class=\"t-app-shell__drawer-body\">\n            <div\n              v-if=\"$slots['sidebar-header']\"\n              class=\"t-app-shell__sidebar-header\"\n            >\n              <slot\n                name=\"sidebar-header\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div class=\"t-app-shell__sidebar-body\">\n              <slot\n                name=\"sidebar\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div\n              v-if=\"$slots['sidebar-footer']\"\n              class=\"t-app-shell__sidebar-footer\"\n            >\n              <slot\n                name=\"sidebar-footer\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n          </div>\n        </aside>\n      </div>\n    </transition>\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/components/TButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TButton.cjs","names":[],"sources":["../../src/components/TButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { tv } from '@treeui/utils';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    variant?: TVariant | 'brand';\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    type?: 'button' | 'submit' | 'reset';\n    /** Stretch to the full width of the container. */\n    block?: boolean;\n    /** Content alignment — only meaningful together with `block`. */\n    align?: 'start' | 'center' | 'end';\n  }>(),\n  {\n    as: 'button',\n    variant: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    type: 'button',\n    block: false,\n    align: 'center',\n  },\n);\n\nconst emit = defineEmits<{\n  click: [event: MouseEvent];\n}>();\n\nconst buttonClass = tv({\n  base: 't-button',\n  variants: {\n    variant: {\n      solid: 't-button--solid',\n      outline: 't-button--outline',\n      ghost: 't-button--ghost',\n      soft: 't-button--soft',\n      danger: 't-button--danger',\n      brand: 't-button--brand',\n    },\n    size: {\n      sm: 't-button--sm',\n      md: 't-button--md',\n      lg: 't-button--lg',\n    },\n  },\n});\n\nconst isNativeButton = computed(() => props.as === 'button');\nconst isDisabled = computed(() => props.disabled || props.loading);\nconst classes = computed(() =>\n  buttonClass({\n    variant: props.variant,\n    size: props.size,\n    class: {\n      'is-loading': props.loading,\n      'is-disabled': isDisabled.value,\n      't-button--block': props.block,\n      't-button--align-start': props.align === 'start',\n      't-button--align-end': props.align === 'end',\n    },\n  }),\n);\n\nconst onClick = (event: MouseEvent) => {\n  if (isDisabled.value) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  emit('click', event);\n};\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :type=\"isNativeButton ? type : undefined\"\n    :class=\"classes\"\n    :disabled=\"isNativeButton ? isDisabled : undefined\"\n    :aria-disabled=\"!isNativeButton && isDisabled ? 'true' : undefined\"\n    :aria-busy=\"loading || undefined\"\n    :tabindex=\"!isNativeButton && isDisabled ? -1 : undefined\"\n    @click=\"onClick\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"t-button__spinner\"\n    >\n      <TSpinner\n        size=\"sm\"\n        label=\"Loading\"\n      />\n    </span>\n    <span\n      v-if=\"$slots.icon\"\n      class=\"t-button__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </span>\n    <span class=\"t-button__label\">\n      <slot />\n    </span>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TButton.cjs","names":[],"sources":["../../src/components/TButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { tv } from '@treeui/utils';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    variant?: TVariant | 'brand';\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    /**\n     * Accessible announcement while `loading`, forwarded to the spinner.\n     * The default is English; pass the active locale's string to localize it.\n     */\n    loadingLabel?: string;\n    /**\n     * While `loading`, hide the `icon` slot so the spinner replaces the icon\n     * instead of rendering beside it. Set to `false` to keep both visible.\n     */\n    hideIconWhileLoading?: boolean;\n    /**\n     * Square, icon-only button. The visible label is dropped, so an accessible\n     * name is required — pass `label` (or `aria-label`).\n     */\n    iconOnly?: boolean;\n    /** Accessible name, rendered as `aria-label`. Required when `iconOnly`. */\n    label?: string;\n    type?: 'button' | 'submit' | 'reset';\n    /** Stretch to the full width of the container. */\n    block?: boolean;\n    /** Content alignment — only meaningful together with `block`. */\n    align?: 'start' | 'center' | 'end';\n  }>(),\n  {\n    as: 'button',\n    variant: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    loadingLabel: 'Loading',\n    hideIconWhileLoading: true,\n    iconOnly: false,\n    label: undefined,\n    type: 'button',\n    block: false,\n    align: 'center',\n  },\n);\n\nconst emit = defineEmits<{\n  click: [event: MouseEvent];\n}>();\n\nconst buttonClass = tv({\n  base: 't-button',\n  variants: {\n    variant: {\n      solid: 't-button--solid',\n      outline: 't-button--outline',\n      ghost: 't-button--ghost',\n      soft: 't-button--soft',\n      danger: 't-button--danger',\n      brand: 't-button--brand',\n    },\n    size: {\n      sm: 't-button--sm',\n      md: 't-button--md',\n      lg: 't-button--lg',\n    },\n  },\n});\n\nconst isNativeButton = computed(() => props.as === 'button');\nconst isDisabled = computed(() => props.disabled || props.loading);\n\n// The spinner takes the icon's leading position, so rendering both would show\n// two glyphs and widen the button mid-action.\nconst isIconHidden = computed(() => props.loading && props.hideIconWhileLoading);\n\nconst classes = computed(() =>\n  buttonClass({\n    variant: props.variant,\n    size: props.size,\n    class: {\n      'is-loading': props.loading,\n      'is-disabled': isDisabled.value,\n      't-button--block': props.block,\n      't-button--icon': props.iconOnly,\n      't-button--align-start': props.align === 'start',\n      't-button--align-end': props.align === 'end',\n    },\n  }),\n);\n\nconst onClick = (event: MouseEvent) => {\n  if (isDisabled.value) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  emit('click', event);\n};\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :type=\"isNativeButton ? type : undefined\"\n    :class=\"classes\"\n    :disabled=\"isNativeButton ? isDisabled : undefined\"\n    :aria-disabled=\"!isNativeButton && isDisabled ? 'true' : undefined\"\n    :aria-busy=\"loading || undefined\"\n    :aria-label=\"label\"\n    :tabindex=\"!isNativeButton && isDisabled ? -1 : undefined\"\n    @click=\"onClick\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"t-button__spinner\"\n    >\n      <TSpinner\n        size=\"sm\"\n        :label=\"loadingLabel\"\n      />\n    </span>\n    <span\n      v-if=\"$slots.icon && !isIconHidden\"\n      class=\"t-button__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </span>\n    <span\n      v-if=\"!iconOnly\"\n      class=\"t-button__label\"\n    >\n      <slot />\n    </span>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TButton.js","names":[],"sources":["../../src/components/TButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { tv } from '@treeui/utils';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    variant?: TVariant | 'brand';\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    type?: 'button' | 'submit' | 'reset';\n    /** Stretch to the full width of the container. */\n    block?: boolean;\n    /** Content alignment — only meaningful together with `block`. */\n    align?: 'start' | 'center' | 'end';\n  }>(),\n  {\n    as: 'button',\n    variant: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    type: 'button',\n    block: false,\n    align: 'center',\n  },\n);\n\nconst emit = defineEmits<{\n  click: [event: MouseEvent];\n}>();\n\nconst buttonClass = tv({\n  base: 't-button',\n  variants: {\n    variant: {\n      solid: 't-button--solid',\n      outline: 't-button--outline',\n      ghost: 't-button--ghost',\n      soft: 't-button--soft',\n      danger: 't-button--danger',\n      brand: 't-button--brand',\n    },\n    size: {\n      sm: 't-button--sm',\n      md: 't-button--md',\n      lg: 't-button--lg',\n    },\n  },\n});\n\nconst isNativeButton = computed(() => props.as === 'button');\nconst isDisabled = computed(() => props.disabled || props.loading);\nconst classes = computed(() =>\n  buttonClass({\n    variant: props.variant,\n    size: props.size,\n    class: {\n      'is-loading': props.loading,\n      'is-disabled': isDisabled.value,\n      't-button--block': props.block,\n      't-button--align-start': props.align === 'start',\n      't-button--align-end': props.align === 'end',\n    },\n  }),\n);\n\nconst onClick = (event: MouseEvent) => {\n  if (isDisabled.value) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  emit('click', event);\n};\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :type=\"isNativeButton ? type : undefined\"\n    :class=\"classes\"\n    :disabled=\"isNativeButton ? isDisabled : undefined\"\n    :aria-disabled=\"!isNativeButton && isDisabled ? 'true' : undefined\"\n    :aria-busy=\"loading || undefined\"\n    :tabindex=\"!isNativeButton && isDisabled ? -1 : undefined\"\n    @click=\"onClick\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"t-button__spinner\"\n    >\n      <TSpinner\n        size=\"sm\"\n        label=\"Loading\"\n      />\n    </span>\n    <span\n      v-if=\"$slots.icon\"\n      class=\"t-button__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </span>\n    <span class=\"t-button__label\">\n      <slot />\n    </span>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TButton.js","names":[],"sources":["../../src/components/TButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { tv } from '@treeui/utils';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    variant?: TVariant | 'brand';\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    /**\n     * Accessible announcement while `loading`, forwarded to the spinner.\n     * The default is English; pass the active locale's string to localize it.\n     */\n    loadingLabel?: string;\n    /**\n     * While `loading`, hide the `icon` slot so the spinner replaces the icon\n     * instead of rendering beside it. Set to `false` to keep both visible.\n     */\n    hideIconWhileLoading?: boolean;\n    /**\n     * Square, icon-only button. The visible label is dropped, so an accessible\n     * name is required — pass `label` (or `aria-label`).\n     */\n    iconOnly?: boolean;\n    /** Accessible name, rendered as `aria-label`. Required when `iconOnly`. */\n    label?: string;\n    type?: 'button' | 'submit' | 'reset';\n    /** Stretch to the full width of the container. */\n    block?: boolean;\n    /** Content alignment — only meaningful together with `block`. */\n    align?: 'start' | 'center' | 'end';\n  }>(),\n  {\n    as: 'button',\n    variant: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    loadingLabel: 'Loading',\n    hideIconWhileLoading: true,\n    iconOnly: false,\n    label: undefined,\n    type: 'button',\n    block: false,\n    align: 'center',\n  },\n);\n\nconst emit = defineEmits<{\n  click: [event: MouseEvent];\n}>();\n\nconst buttonClass = tv({\n  base: 't-button',\n  variants: {\n    variant: {\n      solid: 't-button--solid',\n      outline: 't-button--outline',\n      ghost: 't-button--ghost',\n      soft: 't-button--soft',\n      danger: 't-button--danger',\n      brand: 't-button--brand',\n    },\n    size: {\n      sm: 't-button--sm',\n      md: 't-button--md',\n      lg: 't-button--lg',\n    },\n  },\n});\n\nconst isNativeButton = computed(() => props.as === 'button');\nconst isDisabled = computed(() => props.disabled || props.loading);\n\n// The spinner takes the icon's leading position, so rendering both would show\n// two glyphs and widen the button mid-action.\nconst isIconHidden = computed(() => props.loading && props.hideIconWhileLoading);\n\nconst classes = computed(() =>\n  buttonClass({\n    variant: props.variant,\n    size: props.size,\n    class: {\n      'is-loading': props.loading,\n      'is-disabled': isDisabled.value,\n      't-button--block': props.block,\n      't-button--icon': props.iconOnly,\n      't-button--align-start': props.align === 'start',\n      't-button--align-end': props.align === 'end',\n    },\n  }),\n);\n\nconst onClick = (event: MouseEvent) => {\n  if (isDisabled.value) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  emit('click', event);\n};\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :type=\"isNativeButton ? type : undefined\"\n    :class=\"classes\"\n    :disabled=\"isNativeButton ? isDisabled : undefined\"\n    :aria-disabled=\"!isNativeButton && isDisabled ? 'true' : undefined\"\n    :aria-busy=\"loading || undefined\"\n    :aria-label=\"label\"\n    :tabindex=\"!isNativeButton && isDisabled ? -1 : undefined\"\n    @click=\"onClick\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"t-button__spinner\"\n    >\n      <TSpinner\n        size=\"sm\"\n        :label=\"loadingLabel\"\n      />\n    </span>\n    <span\n      v-if=\"$slots.icon && !isIconHidden\"\n      class=\"t-button__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </span>\n    <span\n      v-if=\"!iconOnly\"\n      class=\"t-button__label\"\n    >\n      <slot />\n    </span>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TButton.vue.d.ts

@@ -5,6 +5,23 @@ type __VLS_Props = {
     size?: TSize;
     disabled?: boolean;
     loading?: boolean;
+    /**
+     * Accessible announcement while `loading`, forwarded to the spinner.
+     * The default is English; pass the active locale's string to localize it.
+     */
+    loadingLabel?: string;
+    /**
+     * While `loading`, hide the `icon` slot so the spinner replaces the icon
+     * instead of rendering beside it. Set to `false` to keep both visible.
+     */
+    hideIconWhileLoading?: boolean;
+    /**
+     * Square, icon-only button. The visible label is dropped, so an accessible
+     * name is required — pass `label` (or `aria-label`).
+     */
+    iconOnly?: boolean;
+    /** Accessible name, rendered as `aria-label`. Required when `iconOnly`. */
+    label?: string;
     type?: 'button' | 'submit' | 'reset';
     /** Stretch to the full width of the container. */
     block?: boolean;
@@ -29,9 +46,13 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     type: "button" | "submit" | "reset";
     disabled: boolean;
     size: TSize;
+    label: string;
     variant: TVariant | "brand";
     as: string;
     loading: boolean;
+    loadingLabel: string;
+    hideIconWhileLoading: boolean;
+    iconOnly: boolean;
     block: boolean;
     align: "start" | "center" | "end";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/TButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/TButton.vue"],"names":[],"mappings":"AAqHA,OAAO,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG1D,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,CAAC;AA6EJ,iBAAS,cAAc;WA6ET,OAAO,IAA6B;;sBAXvB,GAAG;yBACA,GAAG;;;;EAehC;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;UApLV,QAAQ,GAAG,QAAQ,GAAG,OAAO;cAFzB,OAAO;UADX,KAAK;aADF,QAAQ,GAAG,OAAO;QADvB,MAAM;aAID,OAAO;WAGT,OAAO;WAEP,OAAO,GAAG,QAAQ,GAAG,KAAK;6EAyLpC,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"TButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/TButton.vue"],"names":[],"mappings":"AAoJA,OAAO,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG1D,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,CAAC;AA2FJ,iBAAS,cAAc;WAiFT,OAAO,IAA6B;;sBAXvB,GAAG;yBACA,GAAG;;;;EAehC;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;UAvMV,QAAQ,GAAG,QAAQ,GAAG,OAAO;cAnBzB,OAAO;UADX,KAAK;WAmBJ,MAAM;aApBJ,QAAQ,GAAG,OAAO;QADvB,MAAM;aAID,OAAO;kBAKF,MAAM;0BAKE,OAAO;cAKnB,OAAO;WAKV,OAAO;WAEP,OAAO,GAAG,QAAQ,GAAG,KAAK;6EA4MpC,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TButton.vue_vue_type_script_setup_true_lang.cjs

@@ -1,2 +1,2 @@
-const e=require("./TSpinner.cjs");let t=require("vue"),n=require("@treeui/utils");var r={key:0,class:`t-button__spinner`},i={key:1,class:`t-button__icon`,"aria-hidden":`true`},a={class:`t-button__label`},o=(0,t.defineComponent)({__name:`TButton`,props:{as:{default:`button`},variant:{default:`solid`},size:{default:`md`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},type:{default:`button`},block:{type:Boolean,default:!1},align:{default:`center`}},emits:[`click`],setup(o,{emit:s}){let c=o,l=s,u=(0,n.tv)({base:`t-button`,variants:{variant:{solid:`t-button--solid`,outline:`t-button--outline`,ghost:`t-button--ghost`,soft:`t-button--soft`,danger:`t-button--danger`,brand:`t-button--brand`},size:{sm:`t-button--sm`,md:`t-button--md`,lg:`t-button--lg`}}}),d=(0,t.computed)(()=>c.as===`button`),f=(0,t.computed)(()=>c.disabled||c.loading),p=(0,t.computed)(()=>u({variant:c.variant,size:c.size,class:{"is-loading":c.loading,"is-disabled":f.value,"t-button--block":c.block,"t-button--align-start":c.align===`start`,"t-button--align-end":c.align===`end`}})),m=e=>{if(f.value){e.preventDefault(),e.stopPropagation();return}l(`click`,e)};return(n,s)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(o.as),{type:d.value?o.type:void 0,class:(0,t.normalizeClass)(p.value),disabled:d.value?f.value:void 0,"aria-disabled":!d.value&&f.value?`true`:void 0,"aria-busy":o.loading||void 0,tabindex:!d.value&&f.value?-1:void 0,onClick:m},{default:(0,t.withCtx)(()=>[o.loading?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,r,[(0,t.createVNode)(e.default,{size:`sm`,label:`Loading`})])):(0,t.createCommentVNode)(``,!0),n.$slots.icon?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,i,[(0,t.renderSlot)(n.$slots,`icon`)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,a,[(0,t.renderSlot)(n.$slots,`default`)])]),_:3},8,[`type`,`class`,`disabled`,`aria-disabled`,`aria-busy`,`tabindex`]))}});exports.default=o;
+const e=require("./TSpinner.cjs");let t=require("vue"),n=require("@treeui/utils");var r={key:0,class:`t-button__spinner`},i={key:1,class:`t-button__icon`,"aria-hidden":`true`},a={key:2,class:`t-button__label`},o=(0,t.defineComponent)({__name:`TButton`,props:{as:{default:`button`},variant:{default:`solid`},size:{default:`md`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingLabel:{default:`Loading`},hideIconWhileLoading:{type:Boolean,default:!0},iconOnly:{type:Boolean,default:!1},label:{default:void 0},type:{default:`button`},block:{type:Boolean,default:!1},align:{default:`center`}},emits:[`click`],setup(o,{emit:s}){let c=o,l=s,u=(0,n.tv)({base:`t-button`,variants:{variant:{solid:`t-button--solid`,outline:`t-button--outline`,ghost:`t-button--ghost`,soft:`t-button--soft`,danger:`t-button--danger`,brand:`t-button--brand`},size:{sm:`t-button--sm`,md:`t-button--md`,lg:`t-button--lg`}}}),d=(0,t.computed)(()=>c.as===`button`),f=(0,t.computed)(()=>c.disabled||c.loading),p=(0,t.computed)(()=>c.loading&&c.hideIconWhileLoading),m=(0,t.computed)(()=>u({variant:c.variant,size:c.size,class:{"is-loading":c.loading,"is-disabled":f.value,"t-button--block":c.block,"t-button--icon":c.iconOnly,"t-button--align-start":c.align===`start`,"t-button--align-end":c.align===`end`}})),h=e=>{if(f.value){e.preventDefault(),e.stopPropagation();return}l(`click`,e)};return(n,s)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(o.as),{type:d.value?o.type:void 0,class:(0,t.normalizeClass)(m.value),disabled:d.value?f.value:void 0,"aria-disabled":!d.value&&f.value?`true`:void 0,"aria-busy":o.loading||void 0,"aria-label":o.label,tabindex:!d.value&&f.value?-1:void 0,onClick:h},{default:(0,t.withCtx)(()=>[o.loading?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,r,[(0,t.createVNode)(e.default,{size:`sm`,label:o.loadingLabel},null,8,[`label`])])):(0,t.createCommentVNode)(``,!0),n.$slots.icon&&!p.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,i,[(0,t.renderSlot)(n.$slots,`icon`)])):(0,t.createCommentVNode)(``,!0),o.iconOnly?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,a,[(0,t.renderSlot)(n.$slots,`default`)]))]),_:3},8,[`type`,`class`,`disabled`,`aria-disabled`,`aria-busy`,`aria-label`,`tabindex`]))}});exports.default=o;
 //# sourceMappingURL=TButton.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TButton.vue_vue_type_script_setup_true_lang.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TButton.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { tv } from '@treeui/utils';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    variant?: TVariant | 'brand';\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    type?: 'button' | 'submit' | 'reset';\n    /** Stretch to the full width of the container. */\n    block?: boolean;\n    /** Content alignment — only meaningful together with `block`. */\n    align?: 'start' | 'center' | 'end';\n  }>(),\n  {\n    as: 'button',\n    variant: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    type: 'button',\n    block: false,\n    align: 'center',\n  },\n);\n\nconst emit = defineEmits<{\n  click: [event: MouseEvent];\n}>();\n\nconst buttonClass = tv({\n  base: 't-button',\n  variants: {\n    variant: {\n      solid: 't-button--solid',\n      outline: 't-button--outline',\n      ghost: 't-button--ghost',\n      soft: 't-button--soft',\n      danger: 't-button--danger',\n      brand: 't-button--brand',\n    },\n    size: {\n      sm: 't-button--sm',\n      md: 't-button--md',\n      lg: 't-button--lg',\n    },\n  },\n});\n\nconst isNativeButton = computed(() => props.as === 'button');\nconst isDisabled = computed(() => props.disabled || props.loading);\nconst classes = computed(() =>\n  buttonClass({\n    variant: props.variant,\n    size: props.size,\n    class: {\n      'is-loading': props.loading,\n      'is-disabled': isDisabled.value,\n      't-button--block': props.block,\n      't-button--align-start': props.align === 'start',\n      't-button--align-end': props.align === 'end',\n    },\n  }),\n);\n\nconst onClick = (event: MouseEvent) => {\n  if (isDisabled.value) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  emit('click', event);\n};\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :type=\"isNativeButton ? type : undefined\"\n    :class=\"classes\"\n    :disabled=\"isNativeButton ? isDisabled : undefined\"\n    :aria-disabled=\"!isNativeButton && isDisabled ? 'true' : undefined\"\n    :aria-busy=\"loading || undefined\"\n    :tabindex=\"!isNativeButton && isDisabled ? -1 : undefined\"\n    @click=\"onClick\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"t-button__spinner\"\n    >\n      <TSpinner\n        size=\"sm\"\n        label=\"Loading\"\n      />\n    </span>\n    <span\n      v-if=\"$slots.icon\"\n      class=\"t-button__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </span>\n    <span class=\"t-button__label\">\n      <slot />\n    </span>\n  </component>\n</template>\n"],"mappings":"0fAMA,IAAM,EAAQ,EAyBR,EAAO,EAIP,GAAA,EAAA,EAAA,GAAA,CAAiB,CACrB,KAAM,WACN,SAAU,CACR,QAAS,CACP,MAAO,kBACP,QAAS,oBACT,MAAO,kBACP,KAAM,iBACN,OAAQ,mBACR,MAAO,iBACT,EACA,KAAM,CACJ,GAAI,eACJ,GAAI,eACJ,GAAI,cACN,CACF,CACF,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAAgC,EAAM,KAAO,QAAQ,EACrD,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAM,UAAY,EAAM,OAAO,EAC3D,GAAA,EAAA,EAAA,SAAA,KACJ,EAAY,CACV,QAAS,EAAM,QACf,KAAM,EAAM,KACZ,MAAO,CACL,aAAc,EAAM,QACpB,cAAe,EAAW,MAC1B,kBAAmB,EAAM,MACzB,wBAAyB,EAAM,QAAU,QACzC,sBAAuB,EAAM,QAAU,KACzC,CACF,CAAC,CACH,EAEM,EAAW,GAAsB,CACrC,GAAI,EAAW,MAAO,CACpB,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,MACF,CAEA,EAAK,QAAS,CAAK,CACrB,kFAKS,EAAA,EAAE,EAAA,CACN,KAAM,EAAA,MAAiB,EAAA,KAAO,IAAA,GAC9B,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAO,EACd,SAAU,EAAA,MAAiB,EAAA,MAAa,IAAA,GACxC,gBAAa,CAAG,EAAA,OAAkB,EAAA,MAAU,OAAY,IAAA,GACxD,YAAW,EAAA,SAAW,IAAA,GACtB,SAAQ,CAAG,EAAA,OAAkB,EAAA,MAAU,GAAQ,IAAA,GACxC,sCAUD,CAPC,EAAA,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAOD,OARP,EAQO,EAAA,EAAA,EAAA,YAAA,CADH,EAAA,QAAA,CAFA,KAAK,KACL,MAAM,+CAIFA,EAAAA,OAAO,OAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAKR,OANP,EAMO,EAAA,EAAA,EAAA,WAAA,CADe,EAAA,OAAA,MAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,2BAIf,OAFP,EAEO,EAAA,EAAA,EAAA,WAAA,CADG,EAAA,OAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"TButton.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { tv } from '@treeui/utils';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    variant?: TVariant | 'brand';\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    /**\n     * Accessible announcement while `loading`, forwarded to the spinner.\n     * The default is English; pass the active locale's string to localize it.\n     */\n    loadingLabel?: string;\n    /**\n     * While `loading`, hide the `icon` slot so the spinner replaces the icon\n     * instead of rendering beside it. Set to `false` to keep both visible.\n     */\n    hideIconWhileLoading?: boolean;\n    /**\n     * Square, icon-only button. The visible label is dropped, so an accessible\n     * name is required — pass `label` (or `aria-label`).\n     */\n    iconOnly?: boolean;\n    /** Accessible name, rendered as `aria-label`. Required when `iconOnly`. */\n    label?: string;\n    type?: 'button' | 'submit' | 'reset';\n    /** Stretch to the full width of the container. */\n    block?: boolean;\n    /** Content alignment — only meaningful together with `block`. */\n    align?: 'start' | 'center' | 'end';\n  }>(),\n  {\n    as: 'button',\n    variant: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    loadingLabel: 'Loading',\n    hideIconWhileLoading: true,\n    iconOnly: false,\n    label: undefined,\n    type: 'button',\n    block: false,\n    align: 'center',\n  },\n);\n\nconst emit = defineEmits<{\n  click: [event: MouseEvent];\n}>();\n\nconst buttonClass = tv({\n  base: 't-button',\n  variants: {\n    variant: {\n      solid: 't-button--solid',\n      outline: 't-button--outline',\n      ghost: 't-button--ghost',\n      soft: 't-button--soft',\n      danger: 't-button--danger',\n      brand: 't-button--brand',\n    },\n    size: {\n      sm: 't-button--sm',\n      md: 't-button--md',\n      lg: 't-button--lg',\n    },\n  },\n});\n\nconst isNativeButton = computed(() => props.as === 'button');\nconst isDisabled = computed(() => props.disabled || props.loading);\n\n// The spinner takes the icon's leading position, so rendering both would show\n// two glyphs and widen the button mid-action.\nconst isIconHidden = computed(() => props.loading && props.hideIconWhileLoading);\n\nconst classes = computed(() =>\n  buttonClass({\n    variant: props.variant,\n    size: props.size,\n    class: {\n      'is-loading': props.loading,\n      'is-disabled': isDisabled.value,\n      't-button--block': props.block,\n      't-button--icon': props.iconOnly,\n      't-button--align-start': props.align === 'start',\n      't-button--align-end': props.align === 'end',\n    },\n  }),\n);\n\nconst onClick = (event: MouseEvent) => {\n  if (isDisabled.value) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  emit('click', event);\n};\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :type=\"isNativeButton ? type : undefined\"\n    :class=\"classes\"\n    :disabled=\"isNativeButton ? isDisabled : undefined\"\n    :aria-disabled=\"!isNativeButton && isDisabled ? 'true' : undefined\"\n    :aria-busy=\"loading || undefined\"\n    :aria-label=\"label\"\n    :tabindex=\"!isNativeButton && isDisabled ? -1 : undefined\"\n    @click=\"onClick\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"t-button__spinner\"\n    >\n      <TSpinner\n        size=\"sm\"\n        :label=\"loadingLabel\"\n      />\n    </span>\n    <span\n      v-if=\"$slots.icon && !isIconHidden\"\n      class=\"t-button__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </span>\n    <span\n      v-if=\"!iconOnly\"\n      class=\"t-button__label\"\n    >\n      <slot />\n    </span>\n  </component>\n</template>\n"],"mappings":"0oBAMA,IAAM,EAAQ,EA8CR,EAAO,EAIP,GAAA,EAAA,EAAA,GAAA,CAAiB,CACrB,KAAM,WACN,SAAU,CACR,QAAS,CACP,MAAO,kBACP,QAAS,oBACT,MAAO,kBACP,KAAM,iBACN,OAAQ,mBACR,MAAO,iBACT,EACA,KAAM,CACJ,GAAI,eACJ,GAAI,eACJ,GAAI,cACN,CACF,CACF,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAAgC,EAAM,KAAO,QAAQ,EACrD,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAM,UAAY,EAAM,OAAO,EAI3D,GAAA,EAAA,EAAA,SAAA,KAA8B,EAAM,SAAW,EAAM,oBAAoB,EAEzE,GAAA,EAAA,EAAA,SAAA,KACJ,EAAY,CACV,QAAS,EAAM,QACf,KAAM,EAAM,KACZ,MAAO,CACL,aAAc,EAAM,QACpB,cAAe,EAAW,MAC1B,kBAAmB,EAAM,MACzB,iBAAkB,EAAM,SACxB,wBAAyB,EAAM,QAAU,QACzC,sBAAuB,EAAM,QAAU,KACzC,CACF,CAAC,CACH,EAEM,EAAW,GAAsB,CACrC,GAAI,EAAW,MAAO,CACpB,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,MACF,CAEA,EAAK,QAAS,CAAK,CACrB,kFAKS,EAAA,EAAE,EAAA,CACN,KAAM,EAAA,MAAiB,EAAA,KAAO,IAAA,GAC9B,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAO,EACd,SAAU,EAAA,MAAiB,EAAA,MAAa,IAAA,GACxC,gBAAa,CAAG,EAAA,OAAkB,EAAA,MAAU,OAAY,IAAA,GACxD,YAAW,EAAA,SAAW,IAAA,GACtB,aAAY,EAAA,MACZ,SAAQ,CAAG,EAAA,OAAkB,EAAA,MAAU,GAAQ,IAAA,GACxC,sCAUD,CAPC,EAAA,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAOD,OARP,EAQO,EAAA,EAAA,EAAA,YAAA,CADH,EAAA,QAAA,CAFA,KAAK,KACJ,MAAO,EAAA,mEAIJA,EAAAA,OAAO,MAAI,CAAK,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAKjB,OANP,EAMO,EAAA,EAAA,EAAA,WAAA,CADe,EAAA,OAAA,MAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,EAGb,EAAA,UAGC,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,IAHD,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIF,OALP,EAKO,EAAA,EAAA,EAAA,WAAA,CADG,EAAA,OAAA,SAAA,CAAA,CAAA"}