@nxgt/material-vue 0.40.1 → 0.42.0

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @nxgt/material-vue
 
+## 0.42.0
+
+### Minor Changes
+
+- [#624](https://github.com/softistx/nxgt-material/pull/624) [`94a77a7`](https://github.com/softistx/nxgt-material/commit/94a77a76b54834bda18d1e2acc494d5a089d245d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The app bar gets a leading title and a reusable account menu ([#585](https://github.com/softistx/nxgt-material/issues/585)). `ActivityLayout` takes `headerTitle` (the `#header-title` slot in Vue): the context the app is in, an organisation's name say, right after the phone's menu button and truncated with an ellipsis when long, so the avatar stays on screen. `AccountMenu` is new, for `ActivityLayout`'s `avatar` (`#avatar`): an avatar button named "Account menu, <name>" (the picture, else the initials on `bg-primary`) that opens a menu aligned to its end, headed by the avatar, the name and `secondary` (the e-mail), then the app's `items` (links) and a destructive Sign out with a busy state (`signingOut`; `onSignOut` in React, the `sign-out` event in Vue). New strings: `material.account-menu.trigger` and `material.account-menu.sign-out`, in English and French. `AppHeader`'s default slot no longer stops its content from shrinking (`min-w-0`), which is what lets a long title truncate. To adopt: replace a hand-rolled user menu in `avatar` with `<AccountMenu name={user.name} secondary={user.email} src={user.picture} items={…} onSignOut={signOut} />`, and move a title placed in `headerActions` to `headerTitle`.
+
+- [#624](https://github.com/softistx/nxgt-material/pull/624) [`d8addd6`](https://github.com/softistx/nxgt-material/commit/d8addd6e12a58aad08b321321bb6aac2fa50646b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The app shell shows the app's logo and name ([#581](https://github.com/softistx/nxgt-material/issues/581)). `ActivityLayout`, `AppSidebar` and `AppHeader` take `logo` (an image URL, `{ src, alt }`, or a node; in Vue a node goes in the `#logo` slot) and `name` (already translated). The collapsed rail shows the logo alone, named by `name`, which also shows as a tooltip; the expanded sidebar and the phone's menu sheet show the logo and the name side by side. The phone's menu sheet now honours `brand` (the `#brand` slot in Vue) too: it used to show the default atom badge whatever the app passed. `brand` is unchanged otherwise, still the full override, and wins over `logo` and `name`. To adopt: replace `brand={<img src="/logo.svg" alt="Acme" />}` (`<template #brand>` in Vue) with `logo="/logo.svg" name="Acme"`. Two things follow from `brand` reaching the sheet: a link inside `brand` (a home link around the logo) is now the sheet's first focusable element and takes the focus when it opens, and `brand` is rendered twice (the rail stays in the page, hidden, on a phone), so an `id` inside it appears twice while the sheet is open: drop ids from `brand`.
+
+### Patch Changes
+
+- Updated dependencies [[`94a77a7`](https://github.com/softistx/nxgt-material/commit/94a77a76b54834bda18d1e2acc494d5a089d245d)]:
+  - @nxgt/material-core@0.12.0
+
+## 0.41.0
+
+### Minor Changes
+
+- [#623](https://github.com/softistx/nxgt-material/pull/623) [`619cc13`](https://github.com/softistx/nxgt-material/commit/619cc13af84048938718a4c3a3bbca2b15ed6650) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Placeholders now read as placeholders ([#587](https://github.com/softistx/nxgt-material/issues/587)). `Select`/`SelectField`, `DateField`, `TimeField`, `DateRangeField` and `TreeSelectField` draw their empty state in the muted foreground, as a text input does, instead of the value's colour (still at least 4.5:1 in light and dark); Vue's `Autocomplete` input too. `OtpField` takes a `placeholder`: a format hint such as `"123456"`, one character per slot, drawn muted in the empty slots until the first character is typed (`InputOTP` takes it as well, and `InputOTPSlot` shows it).
+
+- [#619](https://github.com/softistx/nxgt-material/pull/619) [`d281bc2`](https://github.com/softistx/nxgt-material/commit/d281bc26437dcd6902458523ff73a8db68aca5dd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `RecoveryCodes` and `EnrolmentSecret` get the feedback, icons and QR margin a
+  sighted user and a themed app need:
+  
+  - **Copy result visible** ([#558](https://github.com/softistx/nxgt-material/issues/558)): `RecoveryCodes` writes "Codes copied" or
+    "Copy failed. Download or print the codes instead." beside the buttons (it
+    stays a polite status region; a refusal stays until the next copy or action), and the copy button's icon turns into a check
+    or a cross for a moment. New `onCopy(result)` prop (Vue: `@copy`) with
+    `'copied' | 'failed'`, so the app can toast it. New label `copyFailedHint`
+    (English and French built in).
+  - **Replaceable icons** ([#559](https://github.com/softistx/nxgt-material/issues/559)): React `RecoveryCodes` takes `icons={{ copy,
+    download, print }}` and `EnrolmentSecret` takes `copyIcon`; Vue has the slots
+    `copy-icon`, `download-icon`, `print-icon` and, on `EnrolmentSecret`,
+    `copy-icon`. An app on Font Awesome through `<Icon>` no longer mixes in
+    Lucide.
+  - **QR quiet zone** ([#560](https://github.com/softistx/nxgt-material/issues/560)): `QRCode` takes `quietZone` (in modules) and
+    `EnrolmentSecret` takes `qrQuietZone`, default `4` as the QR spec asks, so
+    the margin follows the size and the density instead of a fixed `p-4`. It is
+    drawn inside the SVG (no inline `style`, so a strict CSP is untouched). The
+    QR tile of `EnrolmentSecret` is therefore a little wider or narrower than
+    before; `QRCode` alone is unchanged unless `quietZone` is set. React adds
+    `qrcode-generator` (already installed through `react-qr-code`) as a direct
+    dependency to draw the code with a quiet zone.
+
+- [#617](https://github.com/softistx/nxgt-material/pull/617) [`9140735`](https://github.com/softistx/nxgt-material/commit/91407355cb9b5d95aed906c4a9f34f9072702aea) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Stepper` takes `orientation="responsive"` ([#517](https://github.com/softistx/nxgt-material/issues/517)): below `sm` (640px) every step is listed in a column, with the current one marked `aria-current="step"`, instead of the compact single-step bar; from `sm` the steps sit in a row. `'horizontal'` stays the default and renders as before.
+
+### Patch Changes
+
+- [#616](https://github.com/softistx/nxgt-material/pull/616) [`5a0b2d4`](https://github.com/softistx/nxgt-material/commit/5a0b2d48c28f70aa9825d70b98f8ceab0b95a42c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - On a phone, a Banner action that is a `ghost` or `link` button (a `LinkButton` too) now starts at the text's edge ([#613](https://github.com/softistx/nxgt-material/issues/613)). It used to sit one button padding (about 16px) to the inline end of the text, because it has no fill or border to show its box. From `sm` up nothing changes. The React `Button` also renders `data-size`, as the Vue one already did.
+
+- [#620](https://github.com/softistx/nxgt-material/pull/620) [`a693a0c`](https://github.com/softistx/nxgt-material/commit/a693a0c75b67491659f93e4cb70e40edb601605c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The sticky `[data-slot="form-actions"]` of a `.form-grid-layout` pads its bottom for the safe area (`max(1rem, env(safe-area-inset-bottom))`), so in an installed app with `viewport-fit=cover` it no longer sits under the home indicator ([#609](https://github.com/softistx/nxgt-material/issues/609)). The default clearance that keeps a tabbed-to field above the actions is now 8rem on a phone (6rem elsewhere), which covers actions whose label wraps over two lines plus a field's error line, and it grows with the safe-area inset. `--form-actions-clearance` still overrides it; an app that set 8rem for this can drop it.
+
+- [#622](https://github.com/softistx/nxgt-material/pull/622) [`cb9b6c8`](https://github.com/softistx/nxgt-material/commit/cb9b6c859f2700be0303dd153ea750e87b69ffcb) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Button` and `IconButton` with `variant="ghost"` now honour `color` ([#610](https://github.com/softistx/nxgt-material/issues/610)): in `secondary`, `success`, `info`, `warning` or `error` the text (and icon) takes that colour, with a tint of it on hover, focus and press, at 4.5:1 on the page and on a card in both themes, as `link` does. In `primary` (the default), `default`, or with `color={null}`, a ghost button looks as before. What is drawn with the Button's classes follows: a ghost `Chip`, and an `AlertDialogAction` or `AlertDialogCancel` given `variant="ghost"` and a colour, now show it. So do the library's own ghost buttons that name a colour: `InlineEdit`'s save (success), and the remove or retry buttons of `FilterPresets`, `FileList` and the rich-text editor's repeating blocks (error).
+  
+  In `@nxgt/material`, a `ConfirmDialog` (or any `AlertDialog`, `Dialog`, `Sheet` or `Drawer`) opened from a `DropdownMenuItem`, a submenu's included, now hands the focus back to the menu's trigger when it closes, instead of losing it to the page; `@nxgt/material-vue` already did, and now has stories that prove it.
+
+- [#622](https://github.com/softistx/nxgt-material/pull/622) [`deb9af0`](https://github.com/softistx/nxgt-material/commit/deb9af08d4dcee4f03247a4687d8a4a80a180f73) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A sorted `DataTable` column now says so ([#612](https://github.com/softistx/nxgt-material/issues/612)): its header cell carries `aria-sort="ascending"` or `"descending"` (none while unsorted, nor on a grouped header's placeholder), as the WAI-ARIA sortable table pattern has it. The `DataTableColumnHeader` button keeps its name, the column's title. In French the sort menu reads "Croissant" / "Décroissant" instead of "Asc" / "Desc"; a French test that clicked "Asc" needs "Croissant".
+  
+  The troubleshooting guide explains axe's `target-size` on a control half under a form's sticky actions, and how to scan with the actions in the flow.
+
+- [#620](https://github.com/softistx/nxgt-material/pull/620) [`505349a`](https://github.com/softistx/nxgt-material/commit/505349a572afedcc174c7956baf69ab9ee371c5e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A toast with an action no longer breaks its message in the middle of a word on desktop ([#515](https://github.com/softistx/nxgt-material/issues/515)). The title and description used `overflow-wrap: anywhere`, which let the text column shrink to a single character beside the action and the X; they now use `overflow-wrap: break-word`, so the column keeps the room of its longest word and the text wraps between words.
+
 ## 0.40.1
 
 ### Patch Changes

package/README.md

@@ -323,7 +323,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | --- | --- |
 | [Forms](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/forms.md) | wiring fields to vee-validate and Zod, composite values (contacts, opening hours), config-driven `Field`, server errors, what each field emits |
 | [i18n](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/i18n.md) | adding your strings next to the package's, switching language, translated Zod messages, SSR without a text mismatch |
-| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/app-shell.md) | laying out an app with `ActivityLayout`, its `items` (rendered as links; `link-component` to pass your own), the active entry and breadcrumbs (vue-router), the `<main>` landmark, the `h1` title and document scrolling |
+| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/app-shell.md) | laying out an app with `ActivityLayout`, its `items` (rendered as links; `link-component` to pass your own), the brand (`logo`, `name`), the header's title and `AccountMenu`, the active entry and breadcrumbs (vue-router), the `<main>` landmark, the `h1` title and document scrolling |
 | [Theming](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/theming.md) | changing colours, radius or fonts, dark mode, using the compiled CSS without Tailwind |
 | [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/printing.md) | printable documents built from the `Print*` components |
 | [PDF documents](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/pdf.md) | PDF files from data with `@nxgt/material-vue/pdf`: builders, `usePdf`, `PdfDownloadButton`, a Nitro route with `pdfResponse`, fonts on an inlined server |
@@ -490,7 +490,7 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-qrcode.webp" width="120" alt="QRCode"> | [`QRCode`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#qrcode) | QR code on a padded tile, with an optional centred logo in its `#logo` slot. | `QRCode` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-barecode.webp" width="120" alt="Barecode"> | [`Barecode`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#barecode) | 1D barcode. | `Barecode` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-enrolmentsecret.webp" width="120" alt="EnrolmentSecret"> | [`EnrolmentSecret`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#enrolmentsecret), `groupSecret` | A TOTP enrolment: the `otpauth://` QR code, the URI as a link to the authenticator app, and the key grouped by four, copyable, wrapping on a phone. | `EnrolmentSecret` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-recoverycodes.webp" width="120" alt="RecoveryCodes"> | [`RecoveryCodes`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#recoverycodes), `recoveryCodesText`, `downloadText` | One-time recovery codes: a list, copy (announced), download, print of the card alone, and an "I have saved these codes" confirmation before Done. | `RecoveryCodes` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-recoverycodes.webp" width="120" alt="RecoveryCodes"> | [`RecoveryCodes`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#recoverycodes), `recoveryCodesText`, `downloadText` | One-time recovery codes: a list, copy (its result shown and announced), download, print of the card alone, and an "I have saved these codes" confirmation before Done. | `RecoveryCodes` |
 
 ### Data table, filter & lists
 
@@ -509,6 +509,7 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | Preview | Component | What it does | @nxgt/material |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `link-component` swaps the link. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-accountmenu.webp" width="120" alt="AccountMenu"> | [`AccountMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#accountmenu) | The app bar's avatar menu: named after the account, the name and e-mail, the app's links, then a destructive Sign out with a busy state. | `AccountMenu` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-authcard.webp" width="120" alt="AuthCard"> | [`AuthCard`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#authcard) | The frame of a signed-out page: one `main`, a centred card whose title is the `h1` (focusable on an end state), a status or alert notice, a brand and toolbar row, safe-area padding. | `AuthCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-sidebar.webp" width="120" alt="Sidebar"> | [`Sidebar`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#sidebar), `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenuItem`, `SidebarMenuLabel` | Collapsible navigation sidebar with icons, tooltips and active items. | `Sidebar` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-topappbar.webp" width="120" alt="TopAppBar"> | [`TopAppBar`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#topappbar), `BottomAppBar` | Top bar surface, and a bottom bar of icon actions with an active state. | `TopAppBar`, `BottomAppBar` |

package/dist/{Button-teS2p_af.js → Button-CWmzvv9p.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-DxU51--g.js";
-import { Comment as n, Fragment as r, Text as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, h as p, inject as ee, isVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, onBeforeUnmount as v, openBlock as y, provide as b, ref as x, renderSlot as S, shallowRef as C, unref as w, useAttrs as te, useSlots as ne, watch as T, withCtx as E } from "vue";
-import { Primitive as D, TooltipArrow as O, TooltipContent as k, TooltipPortal as A, TooltipProvider as re, TooltipRoot as j, TooltipTrigger as M, useForwardPropsEmits as N } from "reka-ui";
+import { t } from "./use-material-translation-COoBTGpB.js";
+import { Comment as n, Fragment as r, Text as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, h as p, inject as ee, isVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, onBeforeUnmount as v, openBlock as y, provide as te, ref as b, renderSlot as x, shallowRef as S, unref as C, useAttrs as ne, useSlots as w, watch as T, withCtx as E } from "vue";
+import { Primitive as re, TooltipArrow as D, TooltipContent as O, TooltipPortal as k, TooltipProvider as A, TooltipRoot as j, TooltipTrigger as M, useForwardPropsEmits as N } from "reka-ui";
 import { cva as P } from "class-variance-authority";
-import { createSharedComposable as F, defaultDocument as I, reactiveOmit as ie, useEventListener as ae } from "@vueuse/core";
+import { createSharedComposable as ie, defaultDocument as F, reactiveOmit as ae, useEventListener as oe } from "@vueuse/core";
 //#endregion
 //#region lib/components/ui/feedback/spinner/spinner.variants.ts
-var L = P("transition-all duration-500", {
+var I = P("transition-all duration-500", {
 	variants: {
 		variant: {
 			1: "",
@@ -191,11 +191,11 @@ var L = P("transition-all duration-500", {
 			class: "stroke-white"
 		}
 	]
-}), oe = [
+}), se = [
 	"data-variant",
 	"data-color",
 	"aria-label"
-], se = ["data-variant", "data-color"], R = /* @__PURE__ */ d({
+], ce = ["data-variant", "data-color"], L = /* @__PURE__ */ d({
 	__name: "spinner",
 	props: {
 		variant: { default: "1" },
@@ -218,10 +218,10 @@ var L = P("transition-all duration-500", {
 			"data-color": n.color,
 			xmlns: "http://www.w3.org/2000/svg",
 			role: "img",
-			"aria-label": w(i)("material.spinner.loading", "Loading..."),
-			class: g(w(e)("size-14", r.class))
+			"aria-label": C(i)("material.spinner.loading", "Loading..."),
+			class: g(C(e)("size-14", r.class))
 		}, [c("circle", {
-			class: g(["spin2", w(L)({
+			class: g(["spin2", C(I)({
 				variant: n.variant,
 				color: n.color
 			})]),
@@ -232,18 +232,18 @@ var L = P("transition-all duration-500", {
 			"stroke-width": "50",
 			"stroke-dasharray": "700 1400",
 			"stroke-linecap": "round"
-		}, null, 2)], 10, oe)) : (y(), s("div", {
+		}, null, 2)], 10, se)) : (y(), s("div", {
 			key: 1,
 			"data-slot": "spinner",
 			"data-variant": n.variant,
 			"data-color": n.color,
-			class: g(w(e)("size-12 border-[2px] rounded-full animate-spin", w(L)({
+			class: g(C(e)("size-12 border-[2px] rounded-full animate-spin", C(I)({
 				variant: n.variant,
 				color: n.color
 			}), r.class))
-		}, null, 10, se));
+		}, null, 10, ce));
 	}
-}), z = /* @__PURE__ */ d({
+}), R = /* @__PURE__ */ d({
 	__name: "Tooltip",
 	props: {
 		defaultOpen: { type: Boolean },
@@ -257,28 +257,28 @@ var L = P("transition-all duration-500", {
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
 		let n = N(e, t);
-		return (e, t) => (y(), o(w(j), h({ "data-slot": "tooltip" }, w(n)), {
-			default: E((t) => [S(e.$slots, "default", _(f(t)))]),
+		return (e, t) => (y(), o(C(j), h({ "data-slot": "tooltip" }, C(n)), {
+			default: E((t) => [x(e.$slots, "default", _(f(t)))]),
 			_: 3
 		}, 16));
 	}
-}), B = /* @__PURE__ */ new Set([
+}), z = /* @__PURE__ */ new Set([
 	"VIDEO",
 	"IFRAME",
 	"CANVAS",
 	"IMG",
 	"EMBED"
 ]);
-function V(e) {
+function B(e) {
 	let t = e?.fullscreenElement;
-	return !t || typeof HTMLElement > "u" || !(t instanceof HTMLElement) || B.has(t.tagName) ? null : t;
+	return !t || typeof HTMLElement > "u" || !(t instanceof HTMLElement) || z.has(t.tagName) ? null : t;
 }
-var H = F(() => {
-	let e = C(V(I));
-	return ae(I, "fullscreenchange", () => {
-		e.value = V(I);
+var V = ie(() => {
+	let e = S(B(F));
+	return oe(F, "fullscreenchange", () => {
+		e.value = B(F);
 	}), e;
-}), U = /* @__PURE__ */ d({
+}), H = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "TooltipContent",
 	props: {
@@ -309,19 +309,19 @@ var H = F(() => {
 	},
 	emits: ["escapeKeyDown", "pointerDownOutside"],
 	setup(t, { emit: n }) {
-		let r = t, i = n, a = H(), s = N(ie(r, "class", "to"), i);
-		return (n, i) => (y(), o(w(A), { to: t.to ?? w(a) ?? void 0 }, {
-			default: E(() => [u(w(k), h({ "data-slot": "tooltip-content" }, {
-				...w(s),
+		let r = t, i = n, a = V(), s = N(ae(r, "class", "to"), i);
+		return (n, i) => (y(), o(C(k), { to: t.to ?? C(a) ?? void 0 }, {
+			default: E(() => [u(C(O), h({ "data-slot": "tooltip-content" }, {
+				...C(s),
 				...n.$attrs
-			}, { class: w(e)("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance", r.class) }), {
-				default: E(() => [S(n.$slots, "default"), u(w(O), { class: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs" })]),
+			}, { class: C(e)("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance", r.class) }), {
+				default: E(() => [x(n.$slots, "default"), u(C(D), { class: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs" })]),
 				_: 3
 			}, 16, ["class"])]),
 			_: 3
 		}, 8, ["to"]));
 	}
-}), W = /* @__PURE__ */ d({
+}), U = /* @__PURE__ */ d({
 	__name: "TooltipProvider",
 	props: {
 		delayDuration: { default: 0 },
@@ -334,12 +334,12 @@ var H = F(() => {
 	},
 	setup(e) {
 		let t = e;
-		return (e, n) => (y(), o(w(re), _(f(t)), {
-			default: E(() => [S(e.$slots, "default")]),
+		return (e, n) => (y(), o(C(A), _(f(t)), {
+			default: E(() => [x(e.$slots, "default")]),
 			_: 3
 		}, 16));
 	}
-}), G = /* @__PURE__ */ d({
+}), W = /* @__PURE__ */ d({
 	__name: "TooltipTrigger",
 	props: {
 		reference: {},
@@ -348,12 +348,12 @@ var H = F(() => {
 	},
 	setup(e) {
 		let t = e;
-		return (e, n) => (y(), o(w(M), h({ "data-slot": "tooltip-trigger" }, t), {
-			default: E(() => [S(e.$slots, "default")]),
+		return (e, n) => (y(), o(C(M), h({ "data-slot": "tooltip-trigger" }, t), {
+			default: E(() => [x(e.$slots, "default")]),
 			_: 3
 		}, 16));
 	}
-}), K = Symbol("named-control"), q = {
+}), G = Symbol("named-control"), K = {
 	primary: "text-primary dark:text-[color-mix(in_oklab,var(--color-primary)_40%,white)]",
 	secondary: "text-secondary",
 	success: "text-success dark:text-[color-mix(in_oklab,var(--color-success)_85%,white)]",
@@ -361,7 +361,7 @@ var H = F(() => {
 	warning: "text-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:text-[color-mix(in_oklab,var(--color-warning)_85%,white)]",
 	error: "text-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:text-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "text-foreground"
-}, J = {
+}, q = {
 	primary: "[&_svg]:data-[slot=icon]:text-primary dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-primary)_40%,white)]",
 	secondary: "[&_svg]:data-[slot=icon]:text-secondary",
 	success: "[&_svg]:data-[slot=icon]:text-success dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-success)_85%,white)]",
@@ -369,7 +369,7 @@ var H = F(() => {
 	warning: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-warning)_85%,white)]",
 	error: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "[&_svg]:data-[slot=icon]:text-foreground"
-}, ce = {
+}, le = {
 	primary: "[&_svg]:stroke-primary dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-primary)_40%,white)]",
 	secondary: "[&_svg]:stroke-secondary",
 	success: "[&_svg]:stroke-success dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_85%,white)]",
@@ -377,12 +377,12 @@ var H = F(() => {
 	warning: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-warning)_85%,white)]",
 	error: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "[&_svg]:stroke-foreground"
-}, Y = P("inline-flex center truncate **:truncate gap-2 h-min cursor-pointer whitespace-nowrap rounded-full text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error px-4 py-2 has-[>svg]:px-3", {
+}, ue = P("inline-flex center truncate **:truncate gap-2 h-min cursor-pointer whitespace-nowrap rounded-full text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error px-4 py-2 has-[>svg]:px-3", {
 	variants: {
 		variant: {
 			filled: "shadow-xs",
 			tonal: "shadow-xs",
-			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+			ghost: "",
 			outlined: "border shadow-xs",
 			link: "focus:underline underline-offset-4 hover:underline"
 		},
@@ -449,134 +449,172 @@ var H = F(() => {
 		{
 			variant: "tonal",
 			color: "primary",
-			class: `${q.primary} ${J.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+			class: `${K.primary} ${q.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 		},
 		{
 			variant: "tonal",
 			color: "secondary",
-			class: `${q.secondary} ${J.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+			class: `${K.secondary} ${q.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 		},
 		{
 			variant: "tonal",
 			color: "info",
-			class: `${q.info} ${J.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+			class: `${K.info} ${q.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 		},
 		{
 			variant: "tonal",
 			color: "success",
-			class: `${q.success} ${J.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+			class: `${K.success} ${q.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 		},
 		{
 			variant: "tonal",
 			color: "warning",
-			class: `${q.warning} ${J.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+			class: `${K.warning} ${q.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 		},
 		{
 			variant: "tonal",
 			color: "error",
-			class: `${q.error} ${J.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+			class: `${K.error} ${q.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 		},
 		{
 			variant: "tonal",
 			color: "default",
-			class: `${q.default} ${J.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
+			class: `${K.default} ${q.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
+		},
+		{
+			variant: "ghost",
+			color: "primary",
+			class: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+		},
+		{
+			variant: "ghost",
+			color: "default",
+			class: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+		},
+		{
+			variant: "ghost",
+			color: "secondary",
+			class: `${K.secondary} ${q.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/15`
+		},
+		{
+			variant: "ghost",
+			color: "success",
+			class: `${K.success} ${q.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/15`
+		},
+		{
+			variant: "ghost",
+			color: "info",
+			class: `${K.info} ${q.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/15`
+		},
+		{
+			variant: "ghost",
+			color: "warning",
+			class: `${K.warning} ${q.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/15`
+		},
+		{
+			variant: "ghost",
+			color: "error",
+			class: `${K.error} ${q.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/15`
 		},
 		{
 			variant: "outlined",
 			color: "primary",
-			class: `${q.primary} ${J.primary} border-primary/50 focus:bg-primary/15 hover:bg-primary/10`
+			class: `${K.primary} ${q.primary} border-primary/50 focus:bg-primary/15 hover:bg-primary/10`
 		},
 		{
 			variant: "outlined",
 			color: "secondary",
-			class: `${q.secondary} ${J.secondary} border-secondary/50 focus:bg-secondary/15 hover:bg-secondary/10`
+			class: `${K.secondary} ${q.secondary} border-secondary/50 focus:bg-secondary/15 hover:bg-secondary/10`
 		},
 		{
 			variant: "outlined",
 			color: "info",
-			class: `${q.info} ${J.info} border-info/50 focus:bg-info/15 hover:bg-info/10`
+			class: `${K.info} ${q.info} border-info/50 focus:bg-info/15 hover:bg-info/10`
 		},
 		{
 			variant: "outlined",
 			color: "success",
-			class: `${q.success} ${J.success} border-success/50 focus:bg-success/15 hover:bg-success/10`
+			class: `${K.success} ${q.success} border-success/50 focus:bg-success/15 hover:bg-success/10`
 		},
 		{
 			variant: "outlined",
 			color: "warning",
-			class: `${q.warning} ${J.warning} border-warning/50 focus:bg-warning/15 hover:bg-warning/10`
+			class: `${K.warning} ${q.warning} border-warning/50 focus:bg-warning/15 hover:bg-warning/10`
 		},
 		{
 			variant: "outlined",
 			color: "error",
-			class: `${q.error} ${J.error} border-error/50 focus:bg-error/15 hover:bg-error/10`
+			class: `${K.error} ${q.error} border-error/50 focus:bg-error/15 hover:bg-error/10`
 		},
 		{
 			variant: "outlined",
 			color: "default",
-			class: `${q.default} ${J.default} border-foreground/50 focus:bg-foreground/15 hover:bg-foreground/10`
+			class: `${K.default} ${q.default} border-foreground/50 focus:bg-foreground/15 hover:bg-foreground/10`
 		},
 		{
 			variant: "link",
 			color: "primary",
-			class: `${q.primary} ${J.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/15`
+			class: `${K.primary} ${q.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/15`
 		},
 		{
 			variant: "link",
 			color: "secondary",
-			class: `${q.secondary} ${J.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/15`
+			class: `${K.secondary} ${q.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/15`
 		},
 		{
 			variant: "link",
 			color: "success",
-			class: `${q.success} ${J.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/15`
+			class: `${K.success} ${q.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/15`
 		},
 		{
 			variant: "link",
 			color: "info",
-			class: `${q.info} ${J.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/15`
+			class: `${K.info} ${q.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/15`
 		},
 		{
 			variant: "link",
 			color: "warning",
-			class: `${q.warning} ${J.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/15`
+			class: `${K.warning} ${q.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/15`
 		},
 		{
 			variant: "link",
 			color: "error",
-			class: `${q.error} ${J.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/15`
+			class: `${K.error} ${q.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/15`
 		},
 		{
 			variant: "link",
 			color: "default",
-			class: `${q.default} ${J.default} hover:bg-foreground/10 active:bg-muted focus:bg-foreground/15`
+			class: `${K.default} ${q.default} hover:bg-foreground/10 active:bg-muted focus:bg-foreground/15`
 		}
 	]
-}), le = {
+}), J = ((e) => ue(e?.variant === "ghost" && e.color === null ? {
+	...e,
+	color: void 0
+} : e)), de = {
 	xs: "min-h-6",
 	sm: "min-h-8",
 	default: "min-h-9",
 	lg: "min-h-10"
 };
-function ue(e, t) {
-	return !e || t?.startsWith("icon") ? !1 : `h-auto ${t ? le[t] : ""} whitespace-normal **:whitespace-normal text-center`;
+function fe(e, t) {
+	return !e || t?.startsWith("icon") ? !1 : `h-auto ${t ? de[t] : ""} whitespace-normal **:whitespace-normal text-center`;
 }
 //#endregion
 //#region lib/components/ui/actions/button/has-text-content.ts
-function X(e) {
+function Y(e) {
 	if (e == null || typeof e == "boolean") return !1;
 	if (typeof e == "string" || typeof e == "number") return String(e).trim() !== "";
-	if (Array.isArray(e)) return e.some(X);
+	if (Array.isArray(e)) return e.some(Y);
 	if (!m(e) || e.type === n) return !1;
 	if (e.type === i) return String(e.children ?? "").trim() !== "";
-	if (de(e.props?.["aria-hidden"] ?? e.props?.ariaHidden)) return !1;
+	if (X(e.props?.["aria-hidden"] ?? e.props?.ariaHidden)) return !1;
 	let { children: t } = e;
 	if (typeof t == "string") return t.trim() !== "";
-	if (Array.isArray(t)) return X(t);
+	if (Array.isArray(t)) return Y(t);
 	let r = t?.default;
-	return typeof r == "function" && X(r());
+	return typeof r == "function" && Y(r());
 }
-function de(e) {
+function X(e) {
 	return e === "" || !!e && e !== "false";
 }
 //#endregion
@@ -595,7 +633,7 @@ function Z(e) {
 	}
 	return a(), t;
 }
-var fe = (e, { slots: t }) => Z(t.default?.() ?? []), Q = (e) => e.flatMap((e) => e.type === r && Array.isArray(e.children) ? Q(e.children) : [e]), $ = (e, { attrs: t, slots: r }) => {
+var pe = (e, { slots: t }) => Z(t.default?.() ?? []), Q = (e) => e.flatMap((e) => e.type === r && Array.isArray(e.children) ? Q(e.children) : [e]), $ = (e, { attrs: t, slots: r }) => {
 	let i = Q(r.default?.() ?? []), a = i.find((e) => e.type !== n);
 	if (!a) return i;
 	let o = h(t, a.props ?? {});
@@ -616,16 +654,16 @@ var fe = (e, { slots: t }) => Z(t.default?.() ?? []), Q = (e) => e.flatMap((e) =
 $.props = ["leading"], $.inheritAttrs = !1;
 //#endregion
 //#region lib/components/ui/actions/button/use-click-lock.ts
-var pe = 1e3;
-function me(e, t) {
-	let n = x(!1), r = !1, i;
+var me = 1e3;
+function he(e, t) {
+	let n = b(!1), r = !1, i;
 	function a() {
 		n.value = !1, r = !1, clearTimeout(i);
 	}
 	function o() {
 		e() && (n.value = !0, clearTimeout(i), i = setTimeout(() => {
 			r || a();
-		}, pe));
+		}, me));
 	}
 	return T(t, (e) => {
 		n.value && (e ? r = !0 : r && a());
@@ -636,7 +674,7 @@ function me(e, t) {
 }
 //#endregion
 //#region lib/components/ui/actions/button/Button.vue
-var he = /* @__PURE__ */ d({
+var ge = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "Button",
 	props: {
@@ -660,9 +698,9 @@ var he = /* @__PURE__ */ d({
 		tooltip: {}
 	},
 	setup(t) {
-		let n = t, i = te(), c = ne(), l = ee(K, void 0);
-		b(K, a(() => !!l?.value || !!(i["aria-label"] || i["aria-labelledby"]) || X(c.default?.())));
-		let d = me(() => n.lockOnClick, () => !!n.loading), f = a(() => !!(n.loading || d.locked.value)), m = (e) => f.value || i[e];
+		let n = t, i = ne(), c = w(), l = ee(G, void 0);
+		te(G, a(() => !!l?.value || !!(i["aria-label"] || i["aria-labelledby"]) || Y(c.default?.())));
+		let d = he(() => n.lockOnClick, () => !!n.loading), f = a(() => !!(n.loading || d.locked.value)), m = (e) => f.value || i[e];
 		function g(e) {
 			if (f.value) {
 				e.preventDefault(), e.stopImmediatePropagation();
@@ -670,19 +708,19 @@ var he = /* @__PURE__ */ d({
 			}
 			d.lock();
 		}
-		let _ = () => p(R, {
+		let _ = () => p(L, {
 			variant: n.spinnerVariant,
 			color: n.variant === "filled" ? "light" : n.color,
 			class: e("starting:scale-0 duration-500", n.spinnerVariant === "4" ? "size-7.5" : "size-4.5")
-		}), v = () => f.value ? _() : null, x = (e, { slots: t }) => e.text ? p(W, () => p(z, () => [p(G, { asChild: !0 }, t.default), p(U, () => e.text)])) : t.default?.()[0];
-		x.props = ["text"];
-		let C = a(() => n.as !== "button" || n.asChild ? i.type : i.type ?? "button"), T = a(() => !!n.size?.startsWith("icon")), O = a(() => e("justify-center duration-500", !T.value && "w-fit max-w-full truncate line-clamp-1 text-ellipsis", Y({
+		}), v = () => f.value ? _() : null, b = (e, { slots: t }) => e.text ? p(U, () => p(R, () => [p(W, { asChild: !0 }, t.default), p(H, () => e.text)])) : t.default?.()[0];
+		b.props = ["text"];
+		let S = a(() => n.as !== "button" || n.asChild ? i.type : i.type ?? "button"), T = a(() => !!n.size?.startsWith("icon")), D = a(() => e("justify-center duration-500", !T.value && "w-fit max-w-full truncate line-clamp-1 text-ellipsis", J({
 			variant: n.variant,
 			color: n.color,
 			size: n.size
-		}), ue(n.wrap, n.size), n.class));
-		return (e, n) => (y(), o(x, { text: t.tooltip }, {
-			default: E(() => [u(w(D), h(e.$attrs, {
+		}), fe(n.wrap, n.size), n.class));
+		return (e, n) => (y(), o(b, { text: t.tooltip }, {
+			default: E(() => [u(C(re), h(e.$attrs, {
 				onClickCapture: g,
 				"data-slot": e.$attrs["data-slot"] ?? "button",
 				"data-variant": t.variant,
@@ -690,20 +728,20 @@ var he = /* @__PURE__ */ d({
 				"data-size": t.size,
 				as: t.as,
 				"as-child": t.asChild,
-				type: C.value,
+				type: S.value,
 				disabled: t.disabled,
 				"aria-disabled": m("aria-disabled"),
 				"aria-busy": m("aria-busy"),
-				class: O.value
+				class: D.value
 			}), {
-				default: E(() => [t.asChild ? (y(), o(w($), {
+				default: E(() => [t.asChild ? (y(), o(C($), {
 					key: 0,
 					leading: f.value ? _() : null
 				}, {
-					default: E(() => [S(e.$slots, "default")]),
+					default: E(() => [x(e.$slots, "default")]),
 					_: 3
-				}, 8, ["leading"])) : (y(), s(r, { key: 1 }, [u(v), u(w(fe), null, {
-					default: E(() => [S(e.$slots, "default")]),
+				}, 8, ["leading"])) : (y(), s(r, { key: 1 }, [u(v), u(C(pe), null, {
+					default: E(() => [x(e.$slots, "default")]),
 					_: 3
 				})], 64))]),
 				_: 3
@@ -725,4 +763,4 @@ var he = /* @__PURE__ */ d({
 	}
 });
 //#endregion
-export { J as a, K as c, U as d, H as f, L as h, Y as i, G as l, R as m, $ as n, ce as o, z as p, X as r, q as s, he as t, W as u };
+export { q as a, G as c, H as d, V as f, I as h, J as i, W as l, L as m, $ as n, le as o, R as p, Y as r, K as s, ge as t, U as u };

package/dist/{HoverCardTrigger-BEzEsgBo.js → HoverCardTrigger-C5AbAyHE.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-DxU51--g.js";
-import { t as n } from "./Button-teS2p_af.js";
+import { t } from "./use-material-translation-COoBTGpB.js";
+import { t as n } from "./Button-CWmzvv9p.js";
 import { r, t as i } from "./in-dialog-Blhwwbyb.js";
 import { t as a } from "./field-name-attribute-Bl7LSVK0.js";
 import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, guardReactiveProps as h, isRef as g, mergeProps as _, normalizeClass as v, normalizeProps as y, onMounted as ee, onUpdated as b, openBlock as x, renderSlot as S, toDisplayString as C, unref as w, useAttrs as T, useId as E, useTemplateRef as D, vModelText as O, withCtx as k, withDirectives as A } from "vue";