@treeui/vue 0.13.0 → 0.15.0

package/dist/components/TAppShell.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +1,36 @@
 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, normalizeProps as f, onBeforeUnmount as p, onMounted as m, openBlock as h, provide as te, ref as g, renderSlot as _, resolveDynamicComponent as v, toRef as y, unref as b, useAttrs as ne, watch as x, withCtx as S } from "vue";
-import { createId as C, focusFirst as w, focusLast as T, getFocusableElements as E, isEscapeKey as re } from "@treeui/utils";
-import { getTreeIcon as ie, treeIconDefaults as ae } 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 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";
 //#region src/components/TAppShell.vue?vue&type=script&setup=true&lang.ts
-var oe = { class: "t-app-shell__header" }, se = [
+var S = [
 	"aria-label",
 	"aria-expanded",
 	"aria-controls"
-], ce = { class: "t-app-shell__header-content" }, le = ["id", "aria-label"], ue = { class: "t-app-shell__main" }, de = {
+], C = {
+	key: 1,
+	class: "t-app-shell__header-start"
+}, fe = { class: "t-app-shell__header-content" }, pe = ["id", "aria-label"], me = {
+	key: 0,
+	class: "t-app-shell__sidebar-header"
+}, he = { class: "t-app-shell__sidebar-body" }, w = {
+	key: 1,
+	class: "t-app-shell__sidebar-footer"
+}, ge = [
+	"aria-label",
+	"aria-expanded",
+	"aria-controls"
+], _e = { class: "t-app-shell__main" }, ve = {
 	key: 0,
 	class: "t-app-shell__overlay"
-}, fe = ["id", "aria-label"], pe = { class: "t-app-shell__drawer-topbar" }, me = ["aria-label"], he = { class: "t-app-shell__drawer-body" }, D = /*@__PURE__*/ l({
+}, 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 = {
+	key: 1,
+	class: "t-app-shell__sidebar-footer"
+}, E = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "TAppShell",
 	props: {
@@ -56,9 +75,15 @@ var oe = { class: "t-app-shell__header" }, se = [
 			type: Boolean,
 			default: !0
 		},
+		showCollapseButton: {
+			type: Boolean,
+			default: !0
+		},
 		menuLabel: { default: "Open menu" },
 		closeLabel: { default: "Close menu" },
-		sidebarLabel: { default: "Sidebar" }
+		sidebarLabel: { default: "Sidebar" },
+		collapseLabel: { default: "Collapse sidebar" },
+		expandLabel: { default: "Expand sidebar" }
 	},
 	emits: [
 		"update:collapsed",
@@ -66,50 +91,50 @@ var oe = { class: "t-app-shell__header" }, se = [
 		"update:sidebarOpen",
 		"sidebar-open-change"
 	],
-	setup(l, { emit: D }) {
-		let ge = ie("x"), O = l, k = D, A = ne(), j = C("t-app-shell-sidebar"), { value: M, setValue: N } = e(y(O, "collapsed"), O.defaultCollapsed, (e) => {
+	setup(l, { emit: E }) {
+		let D = 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: P, setValue: F } = e(y(O, "sidebarOpen"), O.defaultSidebarOpen, (e) => {
+		}), { value: N, setValue: P } = e(_(O, "sidebarOpen"), O.defaultSidebarOpen, (e) => {
 			k("update:sidebarOpen", e), k("sidebar-open-change", e);
-		}), I = g(!1), L = null, R = (e) => {
-			I.value = e.matches;
+		}), 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));
 		}, z = () => {
-			typeof window > "u" || typeof window.matchMedia != "function" || (B(), L = window.matchMedia(`(max-width: ${O.breakpoint})`), I.value = L.matches, L.addEventListener?.("change", R));
-		}, B = () => {
-			L?.removeEventListener?.("change", R), L = null;
-		}, V = r(() => O.mobile ?? I.value), H = r(() => !V.value && M.value), U = g(null), W = g(null), G = "", K = !1, q = () => {
+			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 = () => {
 			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(() => {
-				U.value && (w(U.value) || U.value.focus());
+				U.value && (x(U.value) || U.value.focus());
 			});
-		}, _e = () => {
-			W.value = typeof document > "u" ? null : document.activeElement, F(!0);
+		}, Ee = () => {
+			W.value = typeof document > "u" ? null : document.activeElement, P(!0);
 		}, X = () => {
-			F(!1);
+			P(!1);
 		}, Z = () => {
-			P.value ? X() : _e();
+			N.value ? X() : Ee();
 		}, Q = () => {
-			O.collapsible && N(!M.value);
-		}, ve = () => {
+			O.collapsible && Te(!M.value);
+		}, De = () => {
 			O.closeOnOverlay && X();
-		}, ye = (e) => {
-			if (re(e) && O.closeOnEscape) {
+		}, Oe = (e) => {
+			if (le(e) && O.closeOnEscape) {
 				e.preventDefault(), X();
 				return;
 			}
 			if (e.key !== "Tab" || !U.value) return;
-			let t = E(U.value);
+			let t = ce(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(), T(U.value)), !e.shiftKey && i === r && (e.preventDefault(), w(U.value));
-		}, be = (e, t) => {
-			if (e && V.value) {
+			e.shiftKey && i === n && (e.preventDefault(), se(U.value)), !e.shiftKey && i === r && (e.preventDefault(), x(U.value));
+		}, ke = (e, t) => {
+			if (e && B.value) {
 				q(), Y();
 				return;
 			}
@@ -117,102 +142,135 @@ var oe = { class: "t-app-shell__header" }, se = [
 				W.value?.focus();
 			}));
 		};
-		x(P, (e, t) => {
-			be(e, !!t);
-		}), x(V, (e) => {
-			P.value && (e ? (q(), Y()) : J());
-		}), x(() => O.breakpoint, () => {
-			typeof window < "u" && z();
-		}), m(() => {
-			z();
-		}), p(() => {
-			B(), J();
-		}), te(t, { collapsed: H });
-		let xe = r(() => [
+		y(N, (e, t) => {
+			ke(e, !!t);
+		}), y(B, (e) => {
+			N.value && (e ? (q(), Y()) : J());
+		}), y(() => O.breakpoint, () => {
+			typeof window < "u" && R();
+		}), ne(() => {
+			R();
+		}), te(() => {
+			z(), J();
+		}), re(t, { collapsed: H });
+		let Ae = r(() => [
 			"t-app-shell",
 			`t-app-shell--${O.side}`,
 			{
-				"is-mobile": V.value,
-				"is-collapsed": !V.value && O.collapsible && M.value,
-				"is-sidebar-open": V.value && P.value
+				"is-mobile": B.value,
+				"is-collapsed": !B.value && O.collapsible && M.value,
+				"is-sidebar-open": B.value && N.value
 			},
 			A.class
-		]), Se = r(() => [{
+		]), je = r(() => [{
 			"--tree-app-shell-sidebar-width": O.sidebarWidth,
 			"--tree-app-shell-collapsed-width": O.collapsedWidth
-		}, A.style]), Ce = r(() => {
+		}, A.style]), Me = r(() => {
 			let { class: e, style: t, ...n } = A;
 			return n;
 		}), $ = r(() => ({
-			mobile: V.value,
+			mobile: B.value,
 			collapsed: H.value,
-			sidebarOpen: P.value,
+			sidebarOpen: N.value,
 			toggleSidebar: Z,
 			closeSidebar: X,
 			toggleCollapsed: Q
 		}));
-		return (e, t) => (h(), i(v(l.as), ee(Ce.value, {
-			class: xe.value,
-			style: Se.value,
-			"data-mobile": V.value ? "true" : "false"
+		return (e, t) => (m(), i(ie(l.as), ee(Me.value, {
+			class: Ae.value,
+			style: je.value,
+			"data-mobile": B.value ? "true" : "false"
 		}), {
-			default: S(() => [
-				s("header", oe, [V.value && l.showMenuButton ? (h(), o("button", {
-					key: 0,
-					type: "button",
-					class: "t-app-shell__menu-button",
-					"aria-label": l.menuLabel,
-					"aria-expanded": b(P),
-					"aria-controls": b(j),
-					onClick: Z
-				}, [_(e.$slots, "menu-icon", { sidebarOpen: b(P) }, () => [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",
-					"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, se)) : a("", !0), s("div", ce, [_(e.$slots, "header", f(u($.value)))])]),
-				V.value ? a("", !0) : (h(), o("aside", {
+			default: b(() => [
+				s("header", { class: f(["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),
+						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",
+						"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)))])
+				], 2),
+				B.value ? a("", !0) : (m(), o("aside", {
 					key: 0,
-					id: b(j),
+					id: v(j),
 					class: "t-app-shell__sidebar",
 					"aria-label": l.sidebarLabel
-				}, [_(e.$slots, "sidebar", f(u($.value)))], 8, le)),
-				s("main", ue, [_(e.$slots, "default", {
-					mobile: V.value,
+				}, [
+					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", {
+						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),
+						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)),
+				s("main", _e, [g(e.$slots, "default", {
+					mobile: B.value,
 					collapsed: H.value
 				})]),
 				c(n, { name: "t-app-shell-fade" }, {
-					default: S(() => [V.value && b(P) ? (h(), o("div", de, [s("div", {
+					default: b(() => [B.value && v(N) ? (m(), o("div", ve, [s("div", {
 						class: "t-app-shell__backdrop",
 						"aria-hidden": "true",
-						onClick: ve
+						onClick: De
 					}), s("aside", {
-						id: b(j),
+						id: v(j),
 						ref_key: "surfaceRef",
 						ref: U,
 						class: "t-app-shell__drawer",
@@ -220,13 +278,17 @@ var oe = { class: "t-app-shell__header" }, se = [
 						"aria-modal": "true",
 						"aria-label": l.sidebarLabel,
 						tabindex: "-1",
-						onKeydown: ye
-					}, [s("div", pe, [s("button", {
+						onKeydown: Oe
+					}, [s("div", be, [s("button", {
 						type: "button",
 						class: "t-app-shell__drawer-close",
 						"aria-label": l.closeLabel,
 						onClick: X
-					}, [c(b(ge), f(u(b(ae))), null, 16)], 8, me)]), s("div", he, [_(e.$slots, "sidebar", f(u($.value)))])], 40, fe)])) : a("", !0)]),
+					}, [c(v(D), p(u(v(de))), 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)
+					])], 40, ye)])) : a("", !0)]),
 					_: 3
 				})
 			]),
@@ -239,6 +301,6 @@ var oe = { class: "t-app-shell__header" }, se = [
 	}
 });
 //#endregion
-export { D as default };
+export { E 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":[],"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 = 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    menuLabel?: string;\n    closeLabel?: string;\n    sidebarLabel?: 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    menuLabel: 'Open menu',\n    closeLabel: 'Close menu',\n    sidebarLabel: '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  sidebar?: (props: AppShellSlotProps) => unknown;\n  default?: (props: Pick<AppShellSlotProps, 'mobile' | 'collapsed'>) => unknown;\n  'menu-icon'?: (props: { sidebarOpen: 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// 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 class=\"t-app-shell__header\">\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 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      <slot\n        name=\"sidebar\"\n        v-bind=\"slotProps\"\n      />\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            <slot\n              name=\"sidebar\"\n              v-bind=\"slotProps\"\n            />\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 = 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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"}

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;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    type?: 'button' | 'submit' | 'reset';\n  }>(),\n  {\n    as: 'button',\n    variant: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    type: 'button',\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    },\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    },\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    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":""}

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;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    type?: 'button' | 'submit' | 'reset';\n  }>(),\n  {\n    as: 'button',\n    variant: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    type: 'button',\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    },\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    },\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    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":""}

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

@@ -1,11 +1,15 @@
 import { TSize, TVariant } from '../types/contracts';
 type __VLS_Props = {
     as?: string;
-    variant?: TVariant;
+    variant?: TVariant | 'brand';
     size?: TSize;
     disabled?: boolean;
     loading?: boolean;
     type?: 'button' | 'submit' | 'reset';
+    /** Stretch to the full width of the container. */
+    block?: boolean;
+    /** Content alignment — only meaningful together with `block`. */
+    align?: 'start' | 'center' | 'end';
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -25,9 +29,11 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     type: "button" | "submit" | "reset";
     disabled: boolean;
     size: TSize;
-    variant: TVariant;
+    variant: TVariant | "brand";
     as: string;
     loading: boolean;
+    block: boolean;
+    align: "start" | "center" | "end";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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":"AA2GA,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,CAAC;IACnB,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;CACtC,CAAC;AAqEJ,iBAAS,cAAc;WA6ET,OAAO,IAA6B;;sBAXvB,GAAG;yBACA,GAAG;;;;EAehC;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;UAxKV,QAAQ,GAAG,QAAQ,GAAG,OAAO;cAFzB,OAAO;UADX,KAAK;aADF,QAAQ;QADb,MAAM;aAID,OAAO;6EAkLnB,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":"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"}

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`}},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`},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}})),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={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;
 //# 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;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    type?: 'button' | 'submit' | 'reset';\n  }>(),\n  {\n    as: 'button',\n    variant: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    type: 'button',\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    },\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    },\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":"icAMA,IAAM,EAAQ,EAmBR,EAAO,EAIP,GAAA,EAAA,EAAA,GAAA,CAAiB,CACrB,KAAM,WACN,SAAU,CACR,QAAS,CACP,MAAO,kBACP,QAAS,oBACT,MAAO,kBACP,KAAM,iBACN,OAAQ,kBACV,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,KAC5B,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    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"}

package/dist/components/TButton.vue_vue_type_script_setup_true_lang.js

@@ -23,7 +23,12 @@ var m = {
 			type: Boolean,
 			default: !1
 		},
-		type: { default: "button" }
+		type: { default: "button" },
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		align: { default: "center" }
 	},
 	emits: ["click"],
 	setup(s, { emit: _ }) {
@@ -35,7 +40,8 @@ var m = {
 					outline: "t-button--outline",
 					ghost: "t-button--ghost",
 					soft: "t-button--soft",
-					danger: "t-button--danger"
+					danger: "t-button--danger",
+					brand: "t-button--brand"
 				},
 				size: {
 					sm: "t-button--sm",
@@ -48,7 +54,10 @@ var m = {
 			size: v.size,
 			class: {
 				"is-loading": v.loading,
-				"is-disabled": S.value
+				"is-disabled": S.value,
+				"t-button--block": v.block,
+				"t-button--align-start": v.align === "start",
+				"t-button--align-end": v.align === "end"
 			}
 		})), w = (e) => {
 			if (S.value) {