@nxgt/material-vue 0.3.2 → 0.4.0

package/README.md

@@ -10,9 +10,10 @@ the [catalogue](#components) lists the React equivalent for each entry.
 
 ## At a glance
 
-- **380+ exported components in 162 catalogue entries**, grouped in 12
+- **380+ exported components in 169 catalogue entries**, grouped in 12
   categories in the [catalogue](#components): from shadcn-vue primitives to
-  kanban, event calendar, charts, rich-text editor, PDF reader and media player.
+  kanban, event calendar, charts, documentation pages, rich-text editor, PDF
+  reader and media player.
 - **Form fields, standalone or vee-validate.** Each field works with `v-model`,
   and most have a `*FormField` wrapper that binds to a vee-validate form by `name`.
   See [Form fields](#form-fields).
@@ -56,7 +57,7 @@ stores silently split between two instances.
 | `vue-router` | `^4.5 \|\| ^5` | app shell, `LinkButton`, `useSearchParam`, `useNavigationHandler` |
 | `vee-validate` | `^4.15` | every `*FormField` and the built-in forms (attributes, contacts, …) |
 | `@tanstack/vue-table` | `^9` | `DataTable` |
-| `@vueuse/core` | `^13 \|\| ^14` | `useIsMobile`, `useTheme`, prop forwarding in primitives |
+| `@vueuse/core` | `^13 \|\| ^14` | `useIsMobile`, `useTheme`, `ScrollProgress` (`useScroll` / `useWindowScroll`), `CopyButton` (`useClipboard`), prop forwarding in primitives |
 | `nuxt` | `>=3.13` | optional: only for `@nxgt/material-vue/nuxt` |
 
 The tarball ships `dist/`, plus `lib/styles.css` and `lib/nuxt`. There is no
@@ -369,6 +370,7 @@ Thin shadcn-vue / Reka UI building blocks, styled with the library tokens.
 | `Toggle`, `ToggleGroup`, `ToggleGroupItem` | Pressable toggle and single/multiple toggle groups. | `Toggle`, `ToggleGroup` |
 | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` | Split panes resized by dragging a handle. | `ResizableGroup`, `ResizablePanel`, `ResizableSeparator` |
 | `Typography` | Text on the type scale (`headline-large`, `title-medium`, `body-small`, …). | `Typography` |
+| `AnchorHeading` | Heading with a hover copy-link (always visible on the phone). | `AnchorHeading` |
 | `Kbd`, `KbdShortcut` | Keyboard key; `KbdShortcut` renders `['mod', 'k']` as ⌘/Ctrl glyphs. | `Kbd`, `KbdShortcut` |
 
 ### Buttons & actions
@@ -382,6 +384,7 @@ Thin shadcn-vue / Reka UI building blocks, styled with the library tokens.
 | `LinkButton`, `IconLinkButton`, `ResponsiveLinkButton` | Buttons that navigate with vue-router (`to`, `replace`, `target`). | `LinkButton`, `IconLinkButton`, `ResponsiveLinkButton` |
 | `SplitButton` | Main action plus a chevron menu filled by the `menu` slot. | `SplitButton` |
 | `CopyButton` | Copies `value` to the clipboard and flips its tooltip to "Copied". | `CopyButton` |
+| `HighlightText` | Marks case-insensitive matches of a query inside a string (`splitMatch`). | `HighlightText` |
 | `LoadMoreButton` | Responsive "Load more" button with a refresh icon. | `LoadMoreButton` |
 | `ScrollToTop` | Floating button shown past `threshold` px that scrolls back up. | `ScrollToTop` |
 | `ActionCard` | Card with title, description and an active indicator. | `ActionCard` |
@@ -457,6 +460,8 @@ Every field takes `label`, `helperText`, `error`, `required`, `disabled` and
 | `SummaryData` | Label/value rows, stacked or `inline`. | `SummaryData` |
 | `EntityHeader` | Title with a row of metadata. | `EntityHeader` |
 | `StatCard` | KPI tile: label, value, hint and a coloured delta. | `StatCard` |
+| `TrendCard`, `GoalCard`, `BreakdownCard`, `RankCard` | Dashboard tiles: trend + sparkline, goal vs target, share breakdown, ranked list. Container queries. | `TrendCard`, `GoalCard`, `BreakdownCard`, `RankCard` |
+| `FeatureCard`, `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard` | Card presets: product, media, pricing, profile, quote, cinematic overlay, bento spotlight, crew with avatars. Container queries. | `FeatureCard`, `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard` |
 | `ExtendedLabel` | Section heading with an accent bar and a `trailing` slot. | `ExtendedLabel` |
 | `Timeline`, `TimelineItem` | Vertical event list with tones and timestamps. | `Timeline`, `TimelineItem` |
 | `QRCode` | QR code for `value` (`size`, colours, error `level`). | `QRCode` |
@@ -474,7 +479,7 @@ Every field takes `label`, `helperText`, `error`, `required`, `disabled` and
 | `TransferList` · `TransferListFormField` | Available/selected panes with search, move buttons and drag-and-drop. | `TransferList` · `TransferListFormField` |
 | `SortableList`, `SortableHandle` · `SortableListFormField` | Searchable list you reorder by dragging; `v-model` is the ordered values. | `SortableList`, `SortableHandle` · `SortableListFormField` |
 | `Tree`, `TreeItem` | Expandable tree with none, single or multiple selection. | `Tree`, `TreeItem` |
-| `ListTile` | Row with title, subtitle and leading/trailing slots; a link or a button. | `ListTile` |
+| `ListTile` | Row with title, subtitle and leading/trailing slots; a link or a button. `size="sm"` is the dense row. | `ListTile` |
 | `DndProvider`, `Draggable`, `Droppable`, `DraggableDroppable`, `SortableProvider`, `Sortable`, `DragHandle`, `DndOverlay` | Drag-and-drop primitives with a dnd-kit-style API, also on `/dnd`. | `DndProvider`, `Draggable`, `Droppable`, `DraggableDroppable`, `SortableProvider`, `Sortable`, `DragHandle`, `DndOverlay` |
 
 ### Navigation & layout
@@ -488,7 +493,15 @@ Every field takes `label`, `helperText`, `error`, `required`, `disabled` and
 | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage` + parts | Breadcrumb trail. | `Breadcrumb` |
 | `Pagination`, `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast` + parts | Page navigation links. | `Pagination`, `PaginationBar` |
 | `Tabs` | See Primitives. | `Tabs` |
+| `SkipLink` | Skip-to-content control, visible on focus. `DocSkipLink` composes it with `#doc-content`. | `SkipLink` |
+| `Pager` | Previous / next cards for a sequence of pages. `DocPager` composes it. | `Pager` |
+| `SeeAlso` | Related-link list with outbound icons. `DocSeeAlso` composes it. | `SeeAlso` |
+| `Toc` | On-this-page outline with a per-item active bar. Rail from `xl`, collapsible panel below. `DocToc` composes it. | `Toc` |
 | `Stepper` | Horizontal or vertical steps with per-step status. | `Stepper` |
+| `Steps`, `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
+| `Hero` | Landing band with eyebrow, title, supporting copy and actions. | `Hero` |
+| `Figure` | Framed media with an optional caption. | `Figure` |
+| `Doc`, `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc`, `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` |
 | `ListDetailsLayout` (`.List`, `.Details`, `.Trigger`) | List and details panes with a switchable active view. | `ListDetailsLayout` |
 | `PaneLayout` (`.Pane`, `.Content`, `.Trigger`) | Content with a toggleable side pane that becomes a sheet on mobile. | `PaneLayout` |
 | `ThreadLayout` | Centred page frame with `header` and `stepper` slots. | `ThreadLayout` |
@@ -527,9 +540,10 @@ Every field takes `label`, `helperText`, `error`, `required`, `disabled` and
 | `Banner` | Full-width notice (`info`, `success`, `warning`, `error`), optionally dismissible. | `Banner` |
 | `Toaster`, `Toast`, `toast`, `toasts` | vue-sonner toasts; `toasts.success` / `error` / `info` / `warning` / `loading` / `dismiss`. | `Toaster`, `Toast`, `toast`, `toasts` |
 | `Progress`, `ProgressField`, `CircularProgress` | Linear bar, labelled bar, and ring with a label. | `Progress`, `ProgressField`, `CircularProgress` |
+| `ScrollProgress` | Hairline that tracks window or a scrollable `target` (`@vueuse/core` `useWindowScroll` / `useScroll`). `DocProgress` composes it. | `ScrollProgress` |
 | `Spinner` | Loading spinner in several styles and colours. | `Spinner` |
 | `Skeleton`, `SkeletonText`, `SkeletonAvatar`, `SkeletonCard`, `SkeletonTable` | Loading placeholders. | `Skeleton`, `SkeletonText`, `SkeletonAvatar`, `SkeletonCard`, `SkeletonTable` |
-| `EmptyState` | Empty, not-found, unauthorized or generic placeholder. | `EmptyState` |
+| `EmptyState` | Icon in a tinted well, title, description and action; not-found, unauthorized, generic and empty presets. | `EmptyState` |
 | `StatusIndicator` | Status dot with a tone, optionally pulsing. | `StatusIndicator` |
 | `Badge` | Pill label in the semantic tones. | `Badge` |
 | `CountBadge` | Numeric badge capped at `max` ("99+"). | `CountBadge` |
@@ -562,7 +576,9 @@ Every field takes `label`, `helperText`, `error`, `required`, `disabled` and
 | `BarChart`, `LineChart`, `AreaChart`, `PieChart`, `RadarChart`, `ScatterChart`, `HeatmapChart`, `FunnelChart`, `ChartContainer` | ECharts wrappers themed from the CSS tokens, with loading and empty states. | `BarChart`, `LineChart`, `AreaChart`, `PieChart`, `RadarChart`, `ScatterChart`, `HeatmapChart`, `FunnelChart`, `ChartContainer` |
 | `RichTextEditor` · `RichTextEditorFormField` | Tiptap editor: toolbar, tables, images, mentions, callouts, character limit. | `RichTextEditor` · `RichTextEditorFormField` |
 | `CodeEditor` | Monaco editor with a language picker and word wrap (client-only). | `CodeEditor` · `CodeEditorFormField` |
-| `CodeBlock`, `CodeDiff`, `JsonViewer` | Highlighted code, side-by-side diff, collapsible JSON tree. | `CodeBlock`, `CodeDiff`, `JsonViewer` |
+| `CodeBlock`, `CodeDiff`, `JsonViewer`, `CodeGroup` | Highlighted code, side-by-side diff, collapsible JSON tree, and tabbed samples. | `CodeBlock`, `CodeDiff`, `JsonViewer`, `CodeGroup` |
+| `ApiEndpoint`, `ApiOperation` | HTTP method badge, path and copy; `ApiOperation` adds a param table and example `CodeGroup`. | `ApiEndpoint`, `ApiOperation` |
+| `ParamTable` | Name / type / default / description table; stacked cards below `sm`. | `ParamTable` |
 | `StxPlayer`, `StxPlayerProvider`, `StxPlayerViewport`, `StxPlayerControls`, `StxPlayerQueue`, `StxPlayerMini`, `StxPlayerExtras` | Audio/video player with a queue, captions and a `full` or `mini` layout (client-only). `VideoPlayer` is a deprecated alias. | `StxPlayer`, `StxPlayerProvider`, `StxPlayerViewport`, `StxPlayerControls`, `StxPlayerQueue`, `StxPlayerMini`, `StxPlayerExtras` |
 | `Quiz`, `QuestionCard` | Quiz with choice, multi, boolean and text questions, plus scoring. | `Quiz`, `QuestionCard` |
 | `PrintHeader`, `PrintSection`, `PrintCard`, `PrintCardField`, `PrintInfoRow`, `PrintBadge` | Inline-styled blocks for printable documents. | `PrintHeader`, `PrintSection`, `PrintCard`, `PrintCardField`, `PrintInfoRow`, `PrintBadge` |
@@ -583,7 +599,7 @@ optional argument.
 | `DATE_UTILS.parseFromTimestring('HH:mm')`, `DATE_UTILS.parseFromISOString(iso?)` | Parses a time string or an ISO string into a `Date`. |
 | `formatDateRangeFilter({ from, to })` | Converts a date range to ISO start/end of day, or `undefined`. |
 | `formatNumber(value, { language?, ...Intl.NumberFormatOptions })` | `Intl.NumberFormat` with the language per call; returns `''` for NaN. |
-| `STRING_UTILS`, `enumToKebabCase(value?)`, `joinTruthyParts(parts, separator?)` | `FOO_BAR` → `foo-bar`; joins the non-empty parts (`', '` by default). |
+| `STRING_UTILS`, `enumToKebabCase(value?)`, `joinTruthyParts(parts, separator?)`, `splitMatch(text, query)` | `FOO_BAR` → `foo-bar`; joins the non-empty parts; splits a string around case-insensitive matches. |
 | `STYLES_UTILS.colorFromVariable(name, alpha?)`, `STYLES_UTILS.cssSize(value)` | CSS variable to `rgb(from var(--x) …)`; number to `px`. |
 | `safeGetItem(key, default)`, `safeSetItem(key, value)`, `safeRemoveItem(key)`, `LOCALE_STORE_UTILS` | `localStorage` access that never throws, with JSON for non-strings. |
 | `uniqueArray(array)`, `findByKey(array, key, value)`, `findByKeyIn(array, key, values)` | De-duplicates; finds one or many items by a key. |
@@ -593,6 +609,7 @@ optional argument.
 | `ifEmptyString(value, fallback)`, `ifEmptyList(value, fallback)` | Returns `fallback` for an empty string or list. |
 | `objectToFormData(obj)`, `formDataToObject(formData)`, `convertToFormData(files, fieldName?)` | `FormData` conversions; files go under `files` by default. |
 | `searchParams(request)`, `searchParam(request, key)` | Reads query parameters from a `Request` (server handlers). |
+| `isExternalHref(href)` | True for `http(s):` and `mailto:` — new tab, not in-app. |
 | `delay(ms)` | Promise that resolves after `ms`. |
 | `renderSlot(slot, context)`, `ContentSlot<T>` | Resolves a prop that is either a VNode or a function of `context`. |
 | `zodLocaleError()`, `parsedType(data)` | Zod v4 error map translated through `material.zod.*`: `z.config({ customError: zodLocaleError() })`. |
@@ -621,6 +638,7 @@ These are the React library's `@nxgt/material/hooks`, with the same names.
 | `resolveTheme(stored, prefersDark)`, `applyResolvedTheme(theme)` | The pure logic behind `useTheme`, safe on the server. |
 | `useIsClient()` | `Ref<boolean>` that turns `true` after mount; use it for hydration-safe branches. |
 | `useIsMobile()` | `Ref<boolean>`, `true` below 768 px. |
+| `useHeadingSpy(ids, onActive, options?)` | IntersectionObserver over heading ids (`useIntersectionObserver`); reports the topmost visible one. |
 | `useLocalizedDate()` | `{ format, locale, language }`: `DATE_UTILS.format` in the `I18nProvider` language. |
 | `useNumberFormatter()` | `{ formatNumber, formatCurrency }` in the current language. |
 | `useOptions(items, { value, label, filter?, expanded? })`, `buildOptions(items, config)` | Maps records to `{ value, label }` options, as a computed or a plain array. |

package/dist/{camera-0FF92_uw.js → camera-CdG1ORQy.js}

@@ -1,7 +1,7 @@
-import { Dl as e, Tl as t, wl as n } from "./components-CIZI-QTh.js";
+import { iu as e, ou as t, ru as n } from "./components-CIfTQ-I3.js";
 import { t as r } from "./utils-Cy-ByIEo.js";
 import { r as i, t as a } from "./icon-button-Ghucx7Ah.js";
-import { n as o } from "./i18n-DXZMN9FA.js";
+import { n as o } from "./i18n-GAjGs1da.js";
 import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 import { Pause as S, Play as C } from "lucide-vue-next";
 //#region lib/components/ui/camera/camera-content.vue?vue&type=script&setup=true&lang.ts
@@ -57,8 +57,8 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 }), O = /* @__PURE__ */ p({
 	__name: "camera-provider",
 	setup(n) {
-		let r = g(null), i = g(null), a = v(null), o = e();
-		return t({
+		let r = g(null), i = g(null), a = v(null), o = t();
+		return e({
 			videoRef: r,
 			canvasRef: i,
 			streamRef: a,