@filipgutica/ui 1.1.0 → 1.2.0

package/README.md

@@ -1,7 +1,11 @@
 # @filipgutica/ui
 
-A compact Vue 3.5+ design system built on [Reka UI](https://reka-ui.com), with
-Tailwind CSS 4 tokens and safe VS Code/Open VSX color-theme normalization.
+Compact Vue 3.5+ components built on [Reka UI](https://reka-ui.com), with
+Tailwind CSS 4 and VS Code theme support.
+
+[Docs and playground](https://filipgutica.github.io/ui/) ·
+[GitHub](https://github.com/filipgutica/ui) ·
+[npm](https://www.npmjs.com/package/@filipgutica/ui)
 
 ## Install
 
@@ -9,7 +13,7 @@ Tailwind CSS 4 tokens and safe VS Code/Open VSX color-theme normalization.
 pnpm add @filipgutica/ui
 ```
 
-Import Tailwind and the shared theme files from your application stylesheet:
+Import the styles from your application stylesheet:
 
 ```css
 @import "tailwindcss";
@@ -17,193 +21,76 @@ Import Tailwind and the shared theme files from your application stylesheet:
 @import "@filipgutica/ui/components.css";
 ```
 
-The theme exposes Tailwind utilities such as `bg-ui-bg`, `bg-ui-surface`,
-`text-ui-text`, `text-ui-muted`, `border-ui-border`, and `text-ui-error`.
-
-## Vue components
-
-The first application-focused set includes:
-
-- `UiButton` with primary, secondary, ghost, danger, and text variants
-- `UiInput`, `UiSelect`, and `UiField` for consistent form controls
-- `UiCheckbox`, `UiSlider`, `UiRadioCard`, and `UiRadioCardGroup` for user input
-- `UiBadge`, `UiAlert`, and `UiProgress` for state and feedback
-- `UiCard` for structured content, actions, and footer metadata
-- `UiCodeBlock` for copyable, theme-aware source snippets
-- `UiDialog`, built on Reka UI, for accessible modal interaction
-
-Place `UiInput` or `UiSelect` inside `UiField`. The field supplies the control ID
-and automatically connects its description or error through the corresponding
-ARIA relationship.
+## Use
 
 ```vue
+<script setup lang="ts">
+import { UiButton } from '@filipgutica/ui'
+</script>
+
 <template>
   <UiButton variant="secondary" size="sm">
-    Inspect evidence
+    Save changes
   </UiButton>
 </template>
-
-<script setup lang="ts">
-import { UiButton } from '@filipgutica/ui'
-</script>
 ```
 
-`UiSelect` retains native form and keyboard behavior. Browsers with
-`appearance: base-select` support show a themed menu; other browsers use their
-native menu.
+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.
 
-`UiButton`, `UiInput`, `UiSelect`, `UiCheckbox`, and `UiSlider` share
-`size="sm | md | lg"`
-and default to the tighter `md` density. Existing `UiButton` values remain
-compatible: `compact` retains its former compact treatment and `default` maps
-to `lg`.
+## Page navigation
 
-`UiCodeBlock` accepts source text through `code`, shows a copy action by default,
-and highlights the selected language using the active theme. It can display a
-title, line numbers, or wrapped lines; unknown languages stay readable as plain text:
+`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.
 
-```vue
-<UiCodeBlock
-  title="Example.vue"
-  language="vue"
-  :code="snippet"
-  :line-numbers="true"
-/>
-```
+`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.
 
-Highlighting supports Vue, JavaScript (`js`), TypeScript (`ts`), HTML, CSS,
-JSON, and Bash (`sh`/`shell`). Imported TextMate `tokenColors` are normalized
-into a shared syntax palette; language-specific overrides and font styles are
-not reproduced exactly. Themes saved before syntax support should be re-imported
-to recover their syntax colors. Existing saved themes remain usable with themed fallbacks.
-
-`UiSurface` remains exported for compatibility. New structured containers
-should use `UiCard`.
-
-## Design conventions
-
-Use a compact system-font hierarchy: 14px for UI body text, 13px for
-secondary text, and 18px for dialog titles. Treat Open VSX/VS Code themes as
-the color authority, and use semantic tokens and package components instead of
-hard-coded provider color keys.
-Typography is package-owned through `--font-ui` and `--font-mono`; override
-these once at the application root rather than restyling each component.
-
-- Use shared control sizes `sm`, `md`, and `lg` (32px, 36px, and 44px); the
-  default is `md`. Keep layout on a 4px rhythm, with 12px, 16px, and 24px as
-  common gaps and insets.
-- Choose `UiCard` for structured content and optional actions or footer data.
-  Choose `UiRadioCardGroup` with `UiRadioCard` for one-of-many rich options;
-  choose `UiDialog` for modal tasks that need focus management.
-- Use one primary action per task, secondary buttons for supporting actions,
-  and danger styling only for destructive actions. Use `UiBadge` for a short
-  status, `UiAlert` for feedback, and `UiCodeBlock` for source code.
-- Put `UiInput` and `UiSelect` in `UiField` with a visible label. Supply help
-  text or an error when needed so the field exposes the matching ARIA relationship.
-- Select menus use the same surface, type, radius, and spacing tokens as other
-  controls. Keep option rows compact, show a checkmark for the selected value, and
-  use quiet hover fills with visible keyboard focus.
-- Use raised surfaces and subtle borders for standalone cards. Align title, content,
-  and footer insets; use a quiet divider for footer metadata and avoid card shadows.
-- Keep borders quiet and skip decorative grids. Preserve visible
-  `:focus-visible` states, use 44px targets for touch-oriented actions, and provide
-  an accessible name for every interactive control.
-
-## VS Code themes
-
-The browser-safe theme entry point parses VS Code JSON/JSONC and maps supported
-workbench colors into the package's finite semantic token contract:
+Track page sections from a component's setup function:
 
 ```ts
-import { applySemanticTheme, parseVsCodeTheme } from '@filipgutica/ui/theme'
+import { useActiveSection } from '@filipgutica/ui'
 
-const theme = parseVsCodeTheme({ source, fileName })
-applySemanticTheme({ root: document.documentElement, theme })
+const activeSection = useActiveSection({
+  targetIds: ['overview', 'install', 'commands'],
+})
 ```
 
-The Node-only Open VSX entry point searches and imports theme extensions without
-executing extension code:
-
-```ts
-import { createOpenVsxThemeService } from '@filipgutica/ui/open-vsx'
-
-const themes = await createOpenVsxThemeService().search('Catppuccin')
-```
+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.
 
-Open VSX packages are untrusted input. The importer restricts origins, validates
-identifiers and archive paths, caps downloaded and expanded sizes, checks the
-advertised SHA-256 checksum, and retains only normalized colors. Consumers that
-redistribute theme assets remain responsible for their licenses.
+## Themes
 
-## Boundaries
+Import a VS Code JSON or JSONC theme in the browser:
 
-- Open VSX themes control color and light/dark/high-contrast appearance only.
-- Typography, spacing, radius, motion, and component structure remain owned by
-  this package so applications keep a consistent design language.
-- `@filipgutica/ui/open-vsx` is Node-only. Do not import it into browser bundles.
-
-## Docs and sandbox
-
-Start the component docs and sandbox:
-
-```sh
-pnpm docs:dev
-```
-
-Build the provider-neutral static assets:
-
-```sh
-pnpm docs:build
-```
-
-The docs use hash routes and relative asset paths, so the static assets work
-under a repository path without rewrite rules.
-The local Vite server also provides the same-origin `/api/open-vsx` endpoint.
-The theme picker uses this endpoint to search and import Open VSX themes.
-
-### GitHub Pages
-
-The GitHub Pages site URL is [filipgutica.github.io/ui](https://filipgutica.github.io/ui/).
-The `docs.yml` workflow builds and deploys `docs-dist` on every push to `main`.
-It can also be started manually from the Actions tab. In the repository's
-**Settings → Pages**, select **GitHub Actions** as the build and deployment source.
-
-GitHub Pages serves static files and cannot run the Open VSX API. The workflow
-sets `VITE_STATIC_HOST=true` to disable live Open VSX search and imports;
-built-in themes and local theme-file imports remain available. To build the
-same static configuration locally:
+```ts
+import { applySemanticTheme, parseVsCodeTheme } from '@filipgutica/ui/theme'
 
-```sh
-VITE_STATIC_HOST=true pnpm docs:build
+const theme = parseVsCodeTheme({ source, fileName })
+applySemanticTheme({ root: document.documentElement, theme })
 ```
 
-Other production hosts must provide `/api/open-vsx` for live Open VSX imports.
-Netlify and Amplify can use a serverless adapter.
+Themes supply colors; the library keeps typography, spacing, and component
+structure consistent. Open VSX search and imports are available through
+`@filipgutica/ui/open-vsx`, which must run on a Node server.
 
 ## Development
 
 ```sh
 pnpm install
+pnpm docs:dev
 pnpm verify
 ```
-
-Commits follow the Conventional Commits format. Releases run from `main`:
-
-- `fix:` publishes a patch release
-- `feat:` publishes a minor release
-- `feat!:` publishes a major release
-- `BREAKING CHANGE:` or `[BREAKING CHANGE]` anywhere in a commit body publishes
-  a major release
-- the same markers anywhere in an associated merged PR body publish a major
-  release
-
-The `release.yml` workflow runs on every push to `main`. When semantic-release
-finds qualifying commits, it publishes the next version to npm, creates the
-matching `v<version>` tag, and creates a GitHub Release. Configure an `NPM_TOKEN`
-Actions secret with permission to publish `@filipgutica/ui`; contributors do not
-publish locally or add a token to the repository.
-
-Before the first token-backed release, remove the package's existing trusted
-publisher in npm. The workflow retains `id-token: write` only for the provenance
-attestations enabled in `package.json`; npm registry authentication comes from
-the `NPM_TOKEN` secret.

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.0",
+  "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;