@nxgt/material-vue 0.40.1 → 0.41.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @nxgt/material-vue
 
+## 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

@@ -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
 

package/dist/{Button-teS2p_af.js → Button-BG3oDkrl.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-Du3Wvsk1.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-Dh1ar_W4.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-Du3Wvsk1.js";
+import { t as n } from "./Button-BG3oDkrl.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";

package/dist/{camera-1QRTmpnM.js → camera-DV9jcl_3.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { _r as t, hr as n, mr as r } from "./components-XJ95qxB1.js";
-import { t as i } from "./use-material-translation-DxU51--g.js";
-import { t as a } from "./Button-teS2p_af.js";
-import { t as o } from "./icon-button-Vz4NECf1.js";
+import { _r as t, hr as n, mr as r } from "./components-C1JYYoQ4.js";
+import { t as i } from "./use-material-translation-Du3Wvsk1.js";
+import { t as a } from "./Button-BG3oDkrl.js";
+import { t as o } from "./icon-button-DXrmfs6e.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";
 //#region lib/components/ui/media/camera/camera-content.vue?vue&type=script&setup=true&lang.ts

package/dist/components/base-content.css

@@ -139,13 +139,23 @@
 				[contenteditable]
 			) {
 			scroll-margin-bottom: calc(
-				var(--form-actions-clearance, 6rem) +
-				var(--form-actions-fill, 0px)
+				var(
+					--form-actions-clearance,
+					var(--form-actions-clearance-default, 6rem)
+				) +
+				var(--form-actions-fill, 0px) +
+				max(0px, calc(env(safe-area-inset-bottom, 0px) - 1rem))
 			);
 		}
-		/* Sticky at the bottom of whatever scrolls the form: in reach. */
+		/* A phone's actions wrap their labels over two lines and a field has an
+		   error line: 8rem covers both (`--form-actions-clearance` still wins). */
+		@variant max-sm {
+			--form-actions-clearance-default: 8rem;
+		}
+		/* Sticky at the bottom of whatever scrolls the form: in reach. Padded
+		   for the safe area (`viewport-fit=cover`: the home indicator). */
 		[data-slot="form-actions"] {
-			@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/90 p-4 backdrop-blur-sm max-sm:*:flex-1;
+			@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/90 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] backdrop-blur-sm max-sm:*:flex-1;
 		}
 	}