@filipgutica/ui 1.1.1 → 1.2.0

package/README.md

@@ -39,6 +39,39 @@ The [component docs](https://filipgutica.github.io/ui/#/components/button)
 cover examples, props, slots, and events. Place inputs and selects inside
 `UiField` to connect labels, descriptions, and errors automatically.
 
+## Page navigation
+
+`UiDrawer` provides modal focus containment, Escape dismissal, and trigger focus
+restoration. Keep native navigation in the server-rendered page until hydration;
+the application decides when to replace it and when to close the drawer at a
+desktop breakpoint. To focus a link destination after closing, prevent the
+cancelable `closeAutoFocus` event and focus that heading.
+
+`UiTabs` renders every labelled panel during SSR and initial hydration. After
+mounting, it adds keyboard-accessible tabs and hides inactive panels without
+unmounting them. Use unique item values and keep page anchor headings outside
+the panels. Re-align an initial hash after layout settles if enhancement changes
+the page height.
+
+Track page sections from a component's setup function:
+
+```ts
+import { useActiveSection } from '@filipgutica/ui'
+
+const activeSection = useActiveSection({
+  targetIds: ['overview', 'install', 'commands'],
+})
+```
+
+The returned readonly ref contains the last supplied heading above the root's
+CSS `scroll-padding-top` inset, or the final section at the document bottom.
+IDs must remain stable and in page order; missing elements are ignored after
+mounting. Bind matching links to `aria-current="location"`. Scrolling, resizing,
+layout changes, completed transitions, and restored pages update the value.
+The composable does not change focus, the URL, or browser history, and removes
+its listeners and observer when the component unmounts. During SSR it returns
+the first supplied ID without accessing browser globals.
+
 ## Themes
 
 Import a VS Code JSON or JSONC theme in the browser:

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

@@ -0,0 +1,23 @@
+export interface UiDrawerProps {
+    open: boolean;
+    title: string;
+}
+type __VLS_Slots = {
+    default(): unknown;
+    trigger?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:open": (value: boolean) => any;
+    closeAutoFocus: (value: Event) => any;
+}, string, import("vue").PublicProps, Readonly<UiDrawerProps> & Readonly<{
+    "onUpdate:open"?: (value: boolean) => any;
+    onCloseAutoFocus?: (value: Event) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,27 @@
+export interface UiTabItem {
+    value: string;
+    label: string;
+}
+export interface UiTabsProps {
+    items: readonly UiTabItem[];
+    label: string;
+    modelValue: string;
+}
+type __VLS_Slots = {
+    panel(props: {
+        value: string;
+    }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiTabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<UiTabsProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { default as UiCheckbox } from './components/UiCheckbox.vue';
 export type { UiCheckboxProps } from './components/UiCheckbox.vue';
 export { default as UiDialog } from './components/UiDialog.vue';
 export type { UiDialogProps } from './components/UiDialog.vue';
+export { default as UiDrawer } from './components/UiDrawer.vue';
+export type { UiDrawerProps } from './components/UiDrawer.vue';
 export { default as UiField } from './components/UiField.vue';
 export type { UiFieldProps } from './components/UiField.vue';
 export { default as UiInput } from './components/UiInput.vue';
@@ -26,7 +28,11 @@ export { default as UiSelect } from './components/UiSelect.vue';
 export type { UiSelectProps } from './components/UiSelect.vue';
 export { default as UiSlider } from './components/UiSlider.vue';
 export type { UiSliderProps } from './components/UiSlider.vue';
+export { default as UiTabs } from './components/UiTabs.vue';
+export type { UiTabItem, UiTabsProps } from './components/UiTabs.vue';
 /** @deprecated Use UiCard for structured content. */
 export { default as UiSurface } from './components/UiSurface.vue';
 export type { UiSurfaceProps } from './components/UiSurface.vue';
 export type { UiControlSize } from './control.js';
+export { useActiveSection } from './use-active-section.js';
+export type { ActiveSectionOptions } from './use-active-section.js';

package/dist/index.js

@@ -1,9 +1,9 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, mergeProps as d, normalizeStyle as f, openBlock as p, provide as m, ref as h, renderList as g, renderSlot as _, resolveDynamicComponent as v, shallowRef as ee, toDisplayString as y, unref as b, useModel as x, useSlots as S, watch as te, withCtx as C } from "vue";
-import { CheckboxIndicator as w, CheckboxRoot as T, DialogClose as E, DialogContent as D, DialogDescription as O, DialogOverlay as k, DialogPortal as A, DialogRoot as j, DialogTitle as M, Primitive as N, ProgressIndicator as P, ProgressRoot as F, RadioGroupItem as I, RadioGroupRoot as L, SliderRange as R, SliderRoot as z, SliderThumb as B, SliderTrack as V } from "reka-ui";
-import { useTimeoutFn as H } from "@vueuse/core";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, mergeProps as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, provide as g, readonly as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, shallowRef as ee, toDisplayString as S, unref as C, useId as te, useModel as w, useSlots as T, watch as E, withCtx as D } from "vue";
+import { CheckboxIndicator as O, CheckboxRoot as ne, DialogClose as k, DialogContent as A, DialogDescription as j, DialogOverlay as M, DialogPortal as N, DialogRoot as P, DialogTitle as F, DialogTrigger as I, Primitive as L, ProgressIndicator as R, ProgressRoot as z, RadioGroupItem as B, RadioGroupRoot as V, SliderRange as H, SliderRoot as U, SliderThumb as W, SliderTrack as G } from "reka-ui";
+import { useTimeoutFn as K } from "@vueuse/core";
 //#endregion
 //#region src/components/UiButton.vue
-var U = /* @__PURE__ */ c({
+var q = /* @__PURE__ */ c({
 	__name: "UiButton",
 	props: {
 		disabled: {
@@ -19,7 +19,7 @@ var U = /* @__PURE__ */ c({
 		variant: { default: "primary" }
 	},
 	setup(e) {
-		return (t, r) => (p(), n(b(N), {
+		return (t, r) => (h(), n(C(L), {
 			as: "button",
 			class: "fg-button",
 			"data-size": e.size,
@@ -28,7 +28,7 @@ var U = /* @__PURE__ */ c({
 			disabled: e.disabled || e.loading,
 			type: e.type
 		}, {
-			default: C(() => [_(t.$slots, "default")]),
+			default: D(() => [b(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"data-size",
@@ -38,49 +38,49 @@ var U = /* @__PURE__ */ c({
 			"type"
 		]));
 	}
-}), W = { class: "fg-card" }, G = {
+}), J = { class: "fg-card" }, Y = {
 	key: 0,
 	class: "fg-card__header"
-}, K = {
+}, X = {
 	key: 1,
 	class: "fg-card__actions"
-}, q = {
+}, Z = {
 	key: 1,
 	class: "fg-card__body"
-}, J = {
+}, re = {
 	key: 2,
 	class: "fg-card__footer"
-}, Y = /* @__PURE__ */ c({
+}, ie = /* @__PURE__ */ c({
 	__name: "UiCard",
 	props: {
 		title: { default: () => void 0 },
 		titleTag: { default: "h3" }
 	},
 	setup(e) {
-		let t = S();
-		return (a, s) => (p(), i("div", W, [
-			e.title || t.title || t.actions ? (p(), i("header", G, [e.title || t.title ? (p(), n(v(e.titleTag), {
+		let t = T();
+		return (a, s) => (h(), i("div", J, [
+			e.title || t.title || t.actions ? (h(), i("header", Y, [e.title || t.title ? (h(), n(x(e.titleTag), {
 				key: 0,
 				class: "fg-card__title"
 			}, {
-				default: C(() => [_(a.$slots, "title", {}, () => [o(y(e.title), 1)])]),
+				default: D(() => [b(a.$slots, "title", {}, () => [o(S(e.title), 1)])]),
 				_: 3
-			})) : r("", !0), t.actions ? (p(), i("div", K, [_(a.$slots, "actions")])) : r("", !0)])) : r("", !0),
-			t.default ? (p(), i("div", q, [_(a.$slots, "default")])) : r("", !0),
-			t.footer ? (p(), i("footer", J, [_(a.$slots, "footer")])) : r("", !0)
+			})) : r("", !0), t.actions ? (h(), i("div", X, [b(a.$slots, "actions")])) : r("", !0)])) : r("", !0),
+			t.default ? (h(), i("div", Z, [b(a.$slots, "default")])) : r("", !0),
+			t.footer ? (h(), i("footer", re, [b(a.$slots, "footer")])) : r("", !0)
 		]));
 	}
-}), X = ["data-wrap", "data-line-numbers"], Z = { class: "fg-code-block__header" }, ne = { class: "fg-code-block__title" }, re = {
+}), ae = ["data-wrap", "data-line-numbers"], oe = { class: "fg-code-block__header" }, se = { class: "fg-code-block__title" }, ce = {
 	key: 0,
 	class: "fg-code-block__language"
-}, ie = { class: "fg-code-block__actions" }, ae = ["disabled"], oe = ["aria-label"], se = {
+}, le = { class: "fg-code-block__actions" }, ue = ["disabled"], de = ["aria-label"], fe = {
 	key: 0,
 	class: "fg-code-block__number",
 	"aria-hidden": "true"
-}, ce = { class: "fg-code-block__text" }, le = {
+}, pe = { class: "fg-code-block__text" }, me = {
 	class: "fg-code-block__status",
 	role: "status"
-}, ue = /* @__PURE__ */ c({
+}, he = /* @__PURE__ */ c({
 	__name: "UiCodeBlock",
 	props: {
 		code: {},
@@ -100,7 +100,7 @@ var U = /* @__PURE__ */ c({
 		}
 	},
 	setup(n) {
-		let s = ee(), c = h(""), l = t(() => s.value ?? n.code.split("\n").map((e) => [{ content: e }])), u = {
+		let s = ee(), c = v(""), l = t(() => s.value ?? n.code.split("\n").map((e) => [{ content: e }])), u = {
 			vue: "vue",
 			ts: "typescript",
 			typescript: "typescript",
@@ -113,7 +113,7 @@ var U = /* @__PURE__ */ c({
 			sh: "bash",
 			shell: "bash"
 		};
-		te(() => [n.code, n.language], async ([e, t], n, r) => {
+		E(() => [n.code, n.language], async ([e, t], n, r) => {
 			let i = !1;
 			r(() => {
 				i = !0;
@@ -136,37 +136,37 @@ var U = /* @__PURE__ */ c({
 				i || (c.value = "Syntax highlighting unavailable. Showing plain text.");
 			}
 		}, { immediate: !0 });
-		let d = h(!1), { start: m } = H(() => {
+		let d = v(!1), { start: p } = K(() => {
 			d.value = !1;
-		}, 1500, { immediate: !1 }), v = h(!1), b = h(""), x = async () => {
-			if (b.value = "", d.value = !1, typeof navigator > "u" || !navigator.clipboard?.writeText) {
-				b.value = "Clipboard unavailable. Select the code to copy it.";
+		}, 1500, { immediate: !1 }), m = v(!1), g = v(""), _ = async () => {
+			if (g.value = "", d.value = !1, typeof navigator > "u" || !navigator.clipboard?.writeText) {
+				g.value = "Clipboard unavailable. Select the code to copy it.";
 				return;
 			}
-			v.value = !0;
+			m.value = !0;
 			try {
-				await navigator.clipboard.writeText(n.code), d.value = !0, m();
+				await navigator.clipboard.writeText(n.code), d.value = !0, p();
 			} catch {
-				b.value = "Could not copy. Select the code to copy it.";
+				g.value = "Could not copy. Select the code to copy it.";
 			} finally {
-				v.value = !1;
+				m.value = !1;
 			}
 		};
-		return (t, s) => (p(), i("div", {
+		return (t, s) => (h(), i("div", {
 			class: "fg-code-block",
 			"data-wrap": n.wrap,
 			"data-line-numbers": n.lineNumbers
 		}, [
-			a("div", Z, [
-				a("span", ne, y(n.title || n.language), 1),
-				n.title ? (p(), i("span", re, y(n.language), 1)) : r("", !0),
-				a("div", ie, [_(t.$slots, "actions"), n.copyable ? (p(), i("button", {
+			a("div", oe, [
+				a("span", se, S(n.title || n.language), 1),
+				n.title ? (h(), i("span", ce, S(n.language), 1)) : r("", !0),
+				a("div", le, [b(t.$slots, "actions"), n.copyable ? (h(), i("button", {
 					key: 0,
 					type: "button",
 					class: "fg-code-block__copy",
-					disabled: v.value,
+					disabled: m.value,
 					"aria-label": "Copy code",
-					onClick: x
+					onClick: _
 				}, [s[0] ||= a("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
@@ -179,50 +179,50 @@ var U = /* @__PURE__ */ c({
 					width: "12",
 					height: "13",
 					rx: "2"
-				}), a("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" })], -1), o(" " + y(d.value && !b.value ? "Copied" : "Copy"), 1)], 8, ae)) : r("", !0)])
+				}), a("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" })], -1), o(" " + S(d.value && !g.value ? "Copied" : "Copy"), 1)], 8, ue)) : r("", !0)])
 			]),
 			a("pre", {
 				class: "fg-code-block__pre",
 				tabindex: "0",
 				"aria-label": n.title || `${n.language} code`
-			}, [a("code", null, [(p(!0), i(e, null, g(l.value, (t, s) => (p(), i("span", {
+			}, [a("code", null, [(h(!0), i(e, null, y(l.value, (t, s) => (h(), i("span", {
 				key: s,
 				class: "fg-code-block__line"
-			}, [n.lineNumbers ? (p(), i("span", se, y(s + 1), 1)) : r("", !0), a("span", ce, [(p(!0), i(e, null, g(t, (e, t) => (p(), i("span", {
+			}, [n.lineNumbers ? (h(), i("span", fe, S(s + 1), 1)) : r("", !0), a("span", pe, [(h(!0), i(e, null, y(t, (e, t) => (h(), i("span", {
 				key: t,
 				style: f({ color: e.color })
-			}, y(e.content), 5))), 128)), o(y(s < l.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, oe),
-			a("span", le, y(b.value || (d.value ? "Code copied to clipboard." : c.value)), 1)
-		], 8, X));
+			}, S(e.content), 5))), 128)), o(S(s < l.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, de),
+			a("span", me, S(g.value || (d.value ? "Code copied to clipboard." : c.value)), 1)
+		], 8, ae));
 	}
-}), de = /* @__PURE__ */ c({
+}), ge = /* @__PURE__ */ c({
 	__name: "UiAlert",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, r) => (p(), n(b(N), {
+		return (t, r) => (h(), n(C(L), {
 			as: "div",
 			class: "fg-alert",
 			"data-tone": e.tone,
 			role: e.tone === "danger" || e.tone === "error" ? "alert" : "status"
 		}, {
-			default: C(() => [_(t.$slots, "default")]),
+			default: D(() => [b(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone", "role"]));
 	}
-}), fe = /* @__PURE__ */ c({
+}), _e = /* @__PURE__ */ c({
 	__name: "UiBadge",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, r) => (p(), n(b(N), {
+		return (t, r) => (h(), n(C(L), {
 			as: "span",
 			class: "fg-badge",
 			"data-tone": e.tone
 		}, {
-			default: C(() => [_(t.$slots, "default")]),
+			default: D(() => [b(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone"]));
 	}
-}), pe = ["data-size", "data-disabled"], me = { class: "fg-checkbox__label" }, he = /* @__PURE__ */ c({
+}), ve = ["data-size", "data-disabled"], ye = { class: "fg-checkbox__label" }, be = /* @__PURE__ */ c({
 	__name: "UiCheckbox",
 	props: {
 		disabled: {
@@ -240,27 +240,28 @@ var U = /* @__PURE__ */ c({
 		let n = t, r = (e) => {
 			n("update:modelValue", e === !0);
 		};
-		return (t, n) => (p(), i("label", {
+		return (t, n) => (h(), i("label", {
 			class: "fg-checkbox",
 			"data-size": e.size,
 			"data-disabled": e.disabled ? "true" : void 0
-		}, [s(b(T), {
+		}, [s(C(ne), {
 			class: "fg-checkbox__control",
 			disabled: e.disabled,
 			"model-value": e.modelValue,
 			"onUpdate:modelValue": r
 		}, {
-			default: C(() => [s(b(w), { class: "fg-checkbox__indicator" }, {
-				default: C(() => [...n[0] ||= [o("✓", -1)]]),
+			default: D(() => [s(C(O), { class: "fg-checkbox__indicator" }, {
+				default: D(() => [...n[0] ||= [o("✓", -1)]]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["disabled", "model-value"]), a("span", me, [_(t.$slots, "default")])], 8, pe));
+		}, 8, ["disabled", "model-value"]), a("span", ye, [b(t.$slots, "default")])], 8, ve));
 	}
-}), ge = { class: "fg-dialog__header" }, _e = { class: "fg-dialog__body" }, ve = {
+}), xe = { class: "fg-dialog__header" }, Se = { class: "fg-dialog__body" }, Ce = {
 	key: 0,
 	class: "fg-dialog__footer"
-}, ye = /* @__PURE__ */ c({
+}, we = /* @__PURE__ */ c({
+	inheritAttrs: !1,
 	__name: "UiDialog",
 	props: {
 		description: { default: () => void 0 },
@@ -270,43 +271,86 @@ var U = /* @__PURE__ */ c({
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
 		let c = t;
-		return (t, l) => (p(), n(b(j), {
+		return (t, l) => (h(), n(C(P), {
 			open: e.open,
 			"onUpdate:open": l[0] ||= (e) => c("update:open", e)
 		}, {
-			default: C(() => [s(b(A), null, {
-				default: C(() => [s(b(k), { class: "fg-dialog__overlay" }), s(b(D), {
+			default: D(() => [s(C(N), null, {
+				default: D(() => [s(C(M), { class: "fg-dialog__overlay" }), s(C(A), d({
 					class: "fg-dialog__content",
 					"aria-modal": "true"
-				}, {
-					default: C(() => [
-						a("div", ge, [a("div", null, [s(b(M), { class: "fg-dialog__title" }, {
-							default: C(() => [o(y(e.title), 1)]),
+				}, t.$attrs), {
+					default: D(() => [
+						a("div", xe, [a("div", null, [s(C(F), { class: "fg-dialog__title" }, {
+							default: D(() => [o(S(e.title), 1)]),
 							_: 1
-						}), e.description ? (p(), n(b(O), {
+						}), e.description ? (h(), n(C(j), {
 							key: 0,
 							class: "fg-dialog__description"
 						}, {
-							default: C(() => [o(y(e.description), 1)]),
+							default: D(() => [o(S(e.description), 1)]),
 							_: 1
-						})) : r("", !0)]), s(b(E), {
+						})) : r("", !0)]), s(C(k), {
 							class: "fg-dialog__close",
 							"aria-label": "Close dialog"
 						}, {
-							default: C(() => [...l[1] ||= [o(" × ", -1)]]),
+							default: D(() => [...l[1] ||= [o(" × ", -1)]]),
 							_: 1
 						})]),
-						a("div", _e, [_(t.$slots, "default")]),
-						t.$slots.footer ? (p(), i("div", ve, [_(t.$slots, "footer")])) : r("", !0)
+						a("div", Se, [b(t.$slots, "default")]),
+						t.$slots.footer ? (h(), i("div", Ce, [b(t.$slots, "footer")])) : r("", !0)
 					]),
 					_: 3
-				})]),
+				}, 16)]),
 				_: 3
 			})]),
 			_: 3
 		}, 8, ["open"]));
 	}
-}), Q = Symbol("UiFieldContext"), be = ["data-invalid"], $ = ["for"], xe = ["id"], Se = ["id"], Ce = /* @__PURE__ */ c({
+}), Te = { class: "fg-drawer__header" }, Ee = { class: "fg-drawer__body" }, De = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "UiDrawer",
+	props: {
+		open: { type: Boolean },
+		title: {}
+	},
+	emits: ["update:open", "closeAutoFocus"],
+	setup(e, { emit: t }) {
+		let i = t;
+		return (t, c) => (h(), n(C(P), {
+			open: e.open,
+			"onUpdate:open": c[1] ||= (e) => i("update:open", e)
+		}, {
+			default: D(() => [t.$slots.trigger ? (h(), n(C(I), {
+				key: 0,
+				"as-child": ""
+			}, {
+				default: D(() => [b(t.$slots, "trigger")]),
+				_: 3
+			})) : r("", !0), s(C(N), null, {
+				default: D(() => [s(C(M), { class: "fg-drawer__overlay" }), s(C(A), d({
+					class: "fg-drawer__content",
+					"aria-modal": "true",
+					"aria-describedby": void 0
+				}, t.$attrs, { onCloseAutoFocus: c[0] ||= (e) => i("closeAutoFocus", e) }), {
+					default: D(() => [a("div", Te, [s(C(F), { class: "fg-drawer__title" }, {
+						default: D(() => [o(S(e.title), 1)]),
+						_: 1
+					}), s(C(k), {
+						class: "fg-drawer__close",
+						"aria-label": "Close drawer"
+					}, {
+						default: D(() => [...c[2] ||= [o(" × ", -1)]]),
+						_: 1
+					})]), a("div", Ee, [b(t.$slots, "default")])]),
+					_: 3
+				}, 16)]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open"]));
+	}
+}), Q = Symbol("UiFieldContext"), Oe = ["data-invalid"], ke = ["for"], Ae = ["id"], je = ["id"], Me = /* @__PURE__ */ c({
 	__name: "UiField",
 	props: {
 		controlId: {},
@@ -316,38 +360,38 @@ var U = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let n = t(() => e.description && !e.error ? `${e.controlId}-description` : void 0), o = t(() => e.error ? `${e.controlId}-error` : void 0), s = t(() => !!e.error);
-		return m(Q, {
+		return g(Q, {
 			controlId: t(() => e.controlId),
 			descriptionId: n,
 			errorId: o,
 			invalid: s
-		}), (t, s) => (p(), i("div", {
+		}), (t, s) => (h(), i("div", {
 			class: "fg-field",
 			"data-invalid": e.error ? "true" : void 0
 		}, [
 			a("label", {
 				class: "fg-field__label",
 				for: e.controlId
-			}, y(e.label), 9, $),
-			_(t.$slots, "default", {
+			}, S(e.label), 9, ke),
+			b(t.$slots, "default", {
 				descriptionId: n.value,
 				errorId: o.value
 			}),
-			e.description && !e.error ? (p(), i("p", {
+			e.description && !e.error ? (h(), i("p", {
 				key: 0,
 				id: n.value,
 				class: "fg-field__description",
 				"data-field-description": ""
-			}, y(e.description), 9, xe)) : r("", !0),
-			e.error ? (p(), i("p", {
+			}, S(e.description), 9, Ae)) : r("", !0),
+			e.error ? (h(), i("p", {
 				key: 1,
 				id: o.value,
 				class: "fg-field__error",
 				"data-field-error": ""
-			}, y(e.error), 9, Se)) : r("", !0)
-		], 8, be));
+			}, S(e.error), 9, je)) : r("", !0)
+		], 8, Oe));
 	}
-}), we = /* @__PURE__ */ c({
+}), Ne = /* @__PURE__ */ c({
 	__name: "UiInput",
 	props: {
 		disabled: {
@@ -368,13 +412,13 @@ var U = /* @__PURE__ */ c({
 		let r = l(Q, void 0), i = t, a = (e) => {
 			e.currentTarget instanceof HTMLInputElement && i("update:modelValue", e.currentTarget.value);
 		};
-		return (t, i) => (p(), n(b(N), {
-			id: b(r)?.controlId.value ?? e.id,
+		return (t, i) => (h(), n(C(L), {
+			id: C(r)?.controlId.value ?? e.id,
 			as: "input",
 			class: "fg-input",
-			"aria-describedby": b(r)?.descriptionId.value,
-			"aria-errormessage": b(r)?.errorId.value,
-			"aria-invalid": e.invalid || b(r)?.invalid.value ? "true" : void 0,
+			"aria-describedby": C(r)?.descriptionId.value,
+			"aria-errormessage": C(r)?.errorId.value,
+			"aria-invalid": e.invalid || C(r)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			type: e.type,
@@ -391,7 +435,7 @@ var U = /* @__PURE__ */ c({
 			"value"
 		]));
 	}
-}), Te = 100, Ee = /* @__PURE__ */ c({
+}), Pe = 100, $ = /* @__PURE__ */ c({
 	__name: "UiProgress",
 	props: {
 		label: {},
@@ -400,19 +444,19 @@ var U = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let r = t(() => {
-			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Te;
+			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Pe;
 			return {
 				max: t,
 				value: e.value === null || !Number.isFinite(e.value) ? null : Math.min(t, Math.max(0, e.value))
 			};
 		}), i = t(() => r.value.value === null ? 0 : r.value.value / r.value.max * 100);
-		return (t, a) => (p(), n(b(F), {
+		return (t, a) => (h(), n(C(z), {
 			class: "fg-progress",
 			"aria-label": e.label,
 			max: r.value.max,
 			"model-value": r.value.value
 		}, {
-			default: C(() => [s(b(P), {
+			default: D(() => [s(C(R), {
 				class: "fg-progress__indicator",
 				style: f({ transform: `translateX(-${100 - i.value}%)` })
 			}, null, 8, ["style"])]),
@@ -423,7 +467,7 @@ var U = /* @__PURE__ */ c({
 			"model-value"
 		]));
 	}
-}), De = { class: "fg-radio-card__content" }, Oe = /* @__PURE__ */ c({
+}), Fe = { class: "fg-radio-card__content" }, Ie = /* @__PURE__ */ c({
 	__name: "UiRadioCard",
 	props: {
 		disabled: {
@@ -433,19 +477,19 @@ var U = /* @__PURE__ */ c({
 		value: {}
 	},
 	setup(e) {
-		return (t, r) => (p(), n(b(I), {
+		return (t, r) => (h(), n(C(B), {
 			class: "fg-radio-card",
 			disabled: e.disabled,
 			value: e.value
 		}, {
-			default: C(() => [r[0] ||= a("span", {
+			default: D(() => [r[0] ||= a("span", {
 				class: "fg-radio-card__indicator",
 				"aria-hidden": "true"
-			}, null, -1), a("span", De, [_(t.$slots, "default")])]),
+			}, null, -1), a("span", Fe, [b(t.$slots, "default")])]),
 			_: 3
 		}, 8, ["disabled", "value"]));
 	}
-}), ke = /* @__PURE__ */ c({
+}), Le = /* @__PURE__ */ c({
 	__name: "UiRadioCardGroup",
 	props: /*@__PURE__*/ u({
 		disabled: {
@@ -463,7 +507,7 @@ var U = /* @__PURE__ */ c({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = x(e, "modelValue"), r = (t) => {
+		let t = w(e, "modelValue"), r = (t) => {
 			if (t.altKey || t.ctrlKey || t.metaKey || t.shiftKey) return;
 			let n = t.currentTarget, r = t.target;
 			if (!(n instanceof HTMLElement) || !(r instanceof HTMLElement)) return;
@@ -479,14 +523,14 @@ var U = /* @__PURE__ */ c({
 			let d = o[u];
 			!d || d === r || (t.preventDefault(), d.focus(), d.click());
 		};
-		return (i, a) => (p(), n(b(L), d({
+		return (i, a) => (h(), n(C(V), d({
 			modelValue: t.value,
 			"onUpdate:modelValue": a[0] ||= (e) => t.value = e,
 			class: "fg-radio-card-group",
 			disabled: e.disabled,
 			loop: e.loop
 		}, e.orientation === void 0 ? {} : { orientation: e.orientation }, { onKeydown: r }), {
-			default: C(() => [_(i.$slots, "default")]),
+			default: D(() => [b(i.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"modelValue",
@@ -494,7 +538,7 @@ var U = /* @__PURE__ */ c({
 			"loop"
 		]));
 	}
-}), Ae = /* @__PURE__ */ c({
+}), Re = /* @__PURE__ */ c({
 	__name: "UiSelect",
 	props: {
 		disabled: {
@@ -514,19 +558,19 @@ var U = /* @__PURE__ */ c({
 		let r = l(Q, void 0), i = t, a = (e) => {
 			e.currentTarget instanceof HTMLSelectElement && i("update:modelValue", e.currentTarget.value);
 		};
-		return (t, i) => (p(), n(b(N), {
-			id: b(r)?.controlId.value ?? e.id,
+		return (t, i) => (h(), n(C(L), {
+			id: C(r)?.controlId.value ?? e.id,
 			as: "select",
 			class: "fg-select",
-			"aria-describedby": b(r)?.descriptionId.value,
-			"aria-errormessage": b(r)?.errorId.value,
-			"aria-invalid": e.invalid || b(r)?.invalid.value ? "true" : void 0,
+			"aria-describedby": C(r)?.descriptionId.value,
+			"aria-errormessage": C(r)?.errorId.value,
+			"aria-invalid": e.invalid || C(r)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			value: e.modelValue,
 			onChange: a
 		}, {
-			default: C(() => [_(t.$slots, "default")]),
+			default: D(() => [b(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
@@ -538,7 +582,7 @@ var U = /* @__PURE__ */ c({
 			"value"
 		]));
 	}
-}), je = /* @__PURE__ */ c({
+}), ze = /* @__PURE__ */ c({
 	__name: "UiSlider",
 	props: {
 		disabled: {
@@ -571,7 +615,7 @@ var U = /* @__PURE__ */ c({
 				e !== void 0 && o("update:modelValue", e);
 			}
 		});
-		return (t, r) => (p(), n(b(z), {
+		return (t, r) => (h(), n(C(U), {
 			modelValue: c.value,
 			"onUpdate:modelValue": r[0] ||= (e) => c.value = e,
 			class: "fg-slider",
@@ -581,15 +625,15 @@ var U = /* @__PURE__ */ c({
 			min: a.value.min,
 			step: a.value.step
 		}, {
-			default: C(() => [s(b(V), { class: "fg-slider__track" }, {
-				default: C(() => [s(b(R), { class: "fg-slider__range" })]),
+			default: D(() => [s(C(G), { class: "fg-slider__track" }, {
+				default: D(() => [s(C(H), { class: "fg-slider__range" })]),
 				_: 1
-			}), s(b(B), {
-				id: b(i)?.controlId.value ?? e.id,
+			}), s(C(W), {
+				id: C(i)?.controlId.value ?? e.id,
 				class: "fg-slider__thumb",
-				"aria-describedby": b(i)?.descriptionId.value,
-				"aria-errormessage": b(i)?.errorId.value,
-				"aria-invalid": b(i)?.invalid.value ? "true" : void 0,
+				"aria-describedby": C(i)?.descriptionId.value,
+				"aria-errormessage": C(i)?.errorId.value,
+				"aria-invalid": C(i)?.invalid.value ? "true" : void 0,
 				"aria-label": e.label
 			}, null, 8, [
 				"id",
@@ -608,22 +652,118 @@ var U = /* @__PURE__ */ c({
 			"step"
 		]));
 	}
-}), Me = /* @__PURE__ */ c({
+}), Be = { class: "fg-tabs" }, Ve = ["aria-label"], He = [
+	"id",
+	"aria-controls",
+	"aria-selected",
+	"tabindex",
+	"onClick",
+	"onFocus"
+], Ue = [
+	"id",
+	"role",
+	"aria-labelledby",
+	"hidden",
+	"tabindex"
+], We = ["id", "hidden"], Ge = /* @__PURE__ */ c({
+	__name: "UiTabs",
+	props: {
+		items: {},
+		label: {},
+		modelValue: {}
+	},
+	emits: ["update:modelValue"],
+	setup(n, { emit: o }) {
+		let s = o, c = te(), l = v(!1), u = t(() => n.items.some((e) => e.value === n.modelValue) ? n.modelValue : n.items[0]?.value), d = (e) => `${c}-tab-${encodeURIComponent(e)}`, f = (e) => `${c}-panel-${encodeURIComponent(e)}`, m = (e) => `${c}-heading-${encodeURIComponent(e)}`;
+		p(() => {
+			l.value = !0;
+		});
+		let g = (e) => {
+			e !== u.value && s("update:modelValue", e);
+		}, _ = (e) => {
+			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || ![
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End"
+			].includes(e.key)) return;
+			let t = e.currentTarget, n = e.target;
+			if (!(t instanceof HTMLElement) || !(n instanceof HTMLButtonElement)) return;
+			let r = [...t.querySelectorAll("[role=\"tab\"]")], i = r.indexOf(n);
+			if (i < 0 || r.length === 0) return;
+			let a = getComputedStyle(t).direction === "rtl", o = e.key === (a ? "ArrowRight" : "ArrowLeft"), s = r[e.key === "Home" ? 0 : e.key === "End" ? r.length - 1 : (i + (o ? -1 : 1) + r.length) % r.length];
+			s && (e.preventDefault(), s.focus());
+		};
+		return (t, o) => (h(), i("div", Be, [l.value ? (h(), i("div", {
+			key: 0,
+			class: "fg-tabs__list",
+			role: "tablist",
+			"aria-label": n.label,
+			onKeydown: _
+		}, [(h(!0), i(e, null, y(n.items, (e) => (h(), i("button", {
+			id: d(e.value),
+			key: e.value,
+			type: "button",
+			class: "fg-tabs__tab",
+			role: "tab",
+			"aria-controls": f(e.value),
+			"aria-selected": e.value === u.value,
+			tabindex: e.value === u.value ? 0 : -1,
+			onClick: (t) => g(e.value),
+			onFocus: (t) => g(e.value)
+		}, S(e.label), 41, He))), 128))], 40, Ve)) : r("", !0), (h(!0), i(e, null, y(n.items, (e) => (h(), i("section", {
+			id: f(e.value),
+			key: e.value,
+			class: "fg-tabs__panel",
+			role: l.value ? "tabpanel" : void 0,
+			"aria-labelledby": l.value ? d(e.value) : m(e.value),
+			hidden: l.value && e.value !== u.value,
+			tabindex: l.value ? 0 : void 0
+		}, [a("h3", {
+			id: m(e.value),
+			class: "fg-tabs__heading",
+			hidden: l.value
+		}, S(e.label), 9, We), b(t.$slots, "panel", { value: e.value })], 8, Ue))), 128))]));
+	}
+}), Ke = /* @__PURE__ */ c({
 	__name: "UiSurface",
 	props: {
 		as: { default: "section" },
 		padding: { default: "default" }
 	},
 	setup(e) {
-		return (t, r) => (p(), n(b(N), {
+		return (t, r) => (h(), n(C(L), {
 			as: e.as,
 			class: "fg-surface",
 			"data-padding": e.padding
 		}, {
-			default: C(() => [_(t.$slots, "default")]),
+			default: D(() => [b(t.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "data-padding"]));
 	}
-});
+}), qe = ({ targetIds: e }) => {
+	let t = v(e[0]), n, r, i;
+	return p(() => {
+		let a = e.flatMap((e) => {
+			let t = document.getElementById(e);
+			return t ? [{
+				id: e,
+				element: t
+			}] : [];
+		}), o = () => {
+			n = void 0;
+			let e = document.documentElement, r = Number.parseFloat(getComputedStyle(e).scrollPaddingTop) || 0, i = a[0]?.id;
+			for (let e of a) e.element.getBoundingClientRect().top <= r + 1 && (i = e.id);
+			window.scrollY > 0 && window.scrollY + window.innerHeight >= e.scrollHeight - 2 && (i = a.at(-1)?.id), t.value = i;
+		}, s = () => {
+			n === void 0 && (n = requestAnimationFrame(o));
+		};
+		window.addEventListener("scroll", s, { passive: !0 }), window.addEventListener("resize", s), window.addEventListener("pageshow", s), document.body.addEventListener("transitionend", s), typeof ResizeObserver < "u" && (r = new ResizeObserver(s), r.observe(document.body)), i = () => {
+			window.removeEventListener("scroll", s), window.removeEventListener("resize", s), window.removeEventListener("pageshow", s), document.body.removeEventListener("transitionend", s);
+		}, o();
+	}), m(() => {
+		i?.(), r?.disconnect(), n !== void 0 && cancelAnimationFrame(n);
+	}), _(t);
+};
 //#endregion
-export { de as UiAlert, fe as UiBadge, U as UiButton, Y as UiCard, he as UiCheckbox, ue as UiCodeBlock, ye as UiDialog, Ce as UiField, we as UiInput, Ee as UiProgress, Oe as UiRadioCard, ke as UiRadioCardGroup, Ae as UiSelect, je as UiSlider, Me as UiSurface };
+export { ge as UiAlert, _e as UiBadge, q as UiButton, ie as UiCard, be as UiCheckbox, he as UiCodeBlock, we as UiDialog, De as UiDrawer, Me as UiField, Ne as UiInput, $ as UiProgress, Ie as UiRadioCard, Le as UiRadioCardGroup, Re as UiSelect, ze as UiSlider, Ke as UiSurface, Ge as UiTabs, qe as useActiveSection };

package/dist/use-active-section.d.ts

@@ -0,0 +1,7 @@
+import type { Ref } from 'vue';
+export interface ActiveSectionOptions {
+    /** Section IDs in page order. Missing elements are ignored after mounting. */
+    targetIds: readonly string[];
+}
+/** Tracks the last section heading above the document's scroll-padding inset. */
+export declare const useActiveSection: ({ targetIds }: ActiveSectionOptions) => Readonly<Ref<string | undefined>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [
@@ -10,6 +10,7 @@
     "dist",
     "src/theme.css",
     "src/components.css",
+    "src/components/*.css",
     "README.md",
     "LICENSE"
   ],

package/src/components/drawer.css

@@ -0,0 +1,100 @@
+@layer components {
+  .fg-drawer__overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    background: var(--color-overlay);
+  }
+
+  .fg-drawer__content {
+    position: fixed;
+    inset-block: 0;
+    left: 0;
+    z-index: 51;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    width: min(calc(var(--sidebar) + var(--space-12)), calc(100vw - var(--space-12)));
+    height: 100vh;
+    height: 100dvh;
+    overflow: hidden;
+    border-right: 1px solid var(--color-border-subtle);
+    color: var(--color-text);
+    background: var(--color-surface-raised);
+    box-shadow: var(--shadow-dialog);
+    font-family: var(--font-ui);
+    font-size: var(--text-md);
+    font-weight: var(--weight-regular);
+    line-height: var(--leading);
+  }
+
+  .fg-drawer__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--color-border-subtle);
+  }
+
+  .fg-drawer__title {
+    min-width: 0;
+    margin: 0;
+    font-size: var(--text-md);
+    font-weight: var(--weight-medium);
+    overflow-wrap: anywhere;
+  }
+
+  .fg-drawer__close {
+    display: inline-grid;
+    flex: none;
+    min-width: var(--control-lg);
+    min-height: var(--control-lg);
+    padding: 0;
+    place-items: center;
+    border: 0;
+    border-radius: var(--radius-control);
+    color: var(--color-muted);
+    background: transparent;
+    font: inherit;
+    font-size: var(--text-xl);
+    cursor: pointer;
+  }
+
+  .fg-drawer__close:hover {
+    color: var(--color-text);
+    background: var(--color-row-hover);
+  }
+
+  .fg-drawer__body {
+    min-height: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+    padding: var(--space-4);
+  }
+
+  .fg-drawer__close:focus-visible,
+  .fg-drawer__content:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .fg-drawer__overlay[data-state="open"] { animation: fg-drawer-fade-in var(--duration) var(--ease-out); }
+  .fg-drawer__overlay[data-state="closed"] { animation: fg-drawer-fade-out var(--duration-fast) var(--ease-out); }
+  .fg-drawer__content[data-state="open"] { animation: fg-drawer-slide-in var(--duration) var(--ease-out); }
+  .fg-drawer__content[data-state="closed"] { animation: fg-drawer-slide-out var(--duration-fast) var(--ease-out); }
+
+  @keyframes fg-drawer-fade-in { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes fg-drawer-fade-out { from { opacity: 1; } to { opacity: 0; } }
+  @keyframes fg-drawer-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+  @keyframes fg-drawer-slide-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+
+  :root.high-contrast .fg-drawer__content {
+    border-width: 2px;
+    border-color: var(--color-border);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fg-drawer__overlay,
+    .fg-drawer__content { animation: none; }
+  }
+}

package/src/components/tabs.css

@@ -0,0 +1,52 @@
+@layer components {
+  .fg-tabs {
+    min-width: 0;
+    font-family: var(--font-ui);
+    font-size: var(--text-md);
+    line-height: var(--leading);
+  }
+
+  .fg-tabs__list {
+    display: flex;
+    max-width: 100%;
+    overflow-x: auto;
+    border-bottom: 1px solid var(--color-border-subtle);
+  }
+
+  .fg-tabs__tab {
+    flex: none;
+    min-height: var(--control-md);
+    padding: var(--space-2) var(--space-3);
+    border: 0;
+    border-bottom: 2px solid transparent;
+    color: var(--color-muted);
+    background: transparent;
+    font: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .fg-tabs__tab:hover { color: var(--color-text); }
+  .fg-tabs__tab[aria-selected="true"] {
+    border-bottom-color: var(--color-link);
+    color: var(--color-text);
+    font-weight: var(--weight-medium);
+  }
+
+  .fg-tabs__panel { min-width: 0; }
+  .fg-tabs__panel[hidden], .fg-tabs__heading[hidden] { display: none; }
+  .fg-tabs__heading {
+    margin-block: var(--space-4) var(--space-2);
+    font-size: var(--text-md);
+    font-weight: var(--weight-medium);
+  }
+
+  .fg-tabs__tab:focus-visible, .fg-tabs__panel:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: -2px;
+  }
+
+  @media (max-width: 640px) {
+    .fg-tabs__tab { min-height: var(--control-lg); }
+  }
+}

package/src/components.css

@@ -1,3 +1,6 @@
+@import './components/drawer.css';
+@import './components/tabs.css';
+
 @layer components {
   /* Package-owned typography keeps controls consistent across consuming apps. */
   .fg-button, .fg-input, .fg-select, .fg-checkbox, .fg-field,
@@ -34,7 +37,10 @@
   .fg-code-block__copy {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 0.4rem;
+    min-width: var(--control-lg);
+    min-height: var(--control-lg);
     padding: 0.25rem 0.4rem;
     border: 0;
     border-radius: 0.25rem;