@nxgt/material 3.79.1 → 3.81.0

package/dist/{use-chat-composer-BFhRMHcX.js → use-chat-composer-BBF1BI_s.js}

@@ -4,28 +4,28 @@ import { t as n } from "./utils-BLfntITJ.js";
 import { n as r } from "./use-shape-morph-BKA_R5P5.js";
 import { n as i, o as a, t as o } from "./dist-DVRQkaTK.js";
 import { i as s, n as c, r as l, t as u } from "./dist-DWZXlCZR.js";
-import { _ as d, a as f, b as p, g as m, h, i as g, m as _, n as v, o as y, r as b, s as x, t as S, v as C, y as w } from "./spinner-C1QIewWv.js";
+import { _ as d, a as f, b as p, g as m, h, i as g, m as _, n as v, o as y, r as b, s as x, t as S, v as C, y as w } from "./spinner-DH1mm8hH.js";
 import { a as T, i as E, n as D, r as O, t as k } from "./dist-DHdUUM1w.js";
 import { a as A, i as ee } from "./dist-DOK3zo5C.js";
 import { i as j, n as M } from "./in-dialog-D61Yeaol.js";
-import { c as N, l as P, n as te, r as F, t as ne } from "./alert-dialog-653apk3f.js";
+import { c as N, l as P, n as te, r as F, t as ne } from "./alert-dialog-DOZ0SfQs.js";
 import { A as re, C as ie, D as ae, E as oe, O as se, S as I, T as ce, _ as le, a as ue, b as de, d as fe, f as pe, g as me, h as he, i as ge, k as _e, l as ve, m as ye, n as be, o as xe, p as Se, r as Ce, s as we, t as Te, u as Ee, v as De, w as Oe, x as ke, y as Ae } from "./floating-ui.dom-KkZSW8_E.js";
-import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re, k as ze, m as Be, n as Ve, o as He, p as Ue, t as We, u as Ge } from "./dropdown-menu-xlZ6NYUA.js";
+import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re, k as ze, m as Be, n as Ve, o as He, p as Ue, t as We, u as Ge } from "./dropdown-menu-C6rcYGB9.js";
 import { a as Ke, i as qe, n as Je } from "./field-blur-context-BLGgf_3z.js";
-import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-Cd7DkND4.js";
+import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-YmbzbKQG.js";
 import { a as $e, i as et, n as tt, o as nt, t as rt } from "./bubble-input-CQwVSoU3.js";
-import { n as it, r as at, t as ot, u as st } from "./tabs-KGKvve3y.js";
-import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-D310xDuM.js";
+import { n as it, r as at, t as ot, u as st } from "./tabs-Um0SFyf1.js";
+import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-BoEY5bkt.js";
 import { t as mt } from "./dist-DkQbkF9T.js";
-import { o as ht, s as gt, t as _t } from "./use-click-lock-BZYtTmVt.js";
+import { o as ht, s as gt, t as _t } from "./use-click-lock-Bwg_caHO.js";
 import { a as vt, r as yt } from "./icon-sprites-CaYXzOL4.js";
 import { t as bt } from "./warn-once-C_e47JM8.js";
-import { r as xt, t as St } from "./button-3op3rtZh.js";
-import { a as Ct } from "./translator-DJkf4J7t.js";
+import { r as xt, t as St } from "./button-CSKUtMI3.js";
+import { a as Ct } from "./translator-CcEgQ-H7.js";
 import { h as wt } from "./get-CTzJAwfc.js";
 import { t as Tt } from "./isEmpty-F_g3jLf8.js";
-import { t as L } from "./use-material-translation-CD6QoVal.js";
-import { t as R } from "./icon-button-Cogxy1cy.js";
+import { t as L } from "./use-material-translation-DYrfV_JJ.js";
+import { t as R } from "./icon-button-4PKlaI1g.js";
 import { t as Et } from "./use-ssr-media-query-C6M5m8sf.js";
 import { n as Dt, t as Ot } from "./typography-CYEquVeb.js";
 import { n as kt, t as At } from "./util-4heV2LPI.js";
@@ -36,14 +36,14 @@ import { a as Bt } from "./toggle-group-CVMxEpWi.js";
 import { n as Vt } from "./use-slice-reducer-BGkeGtML.js";
 import { t as Ht } from "./browser-only-DQ94lWF8.js";
 import { t as Ut } from "./compose-refs-G4J4kaUA.js";
-import { n as Wt, r as Gt, t as Kt } from "./chip-MuKDwtkG.js";
+import { n as Wt, r as Gt, t as Kt } from "./chip-BGn0V6Pt.js";
 import { a as qt, c as Jt, o as Yt, r as Xt, s as Zt, t as Qt } from "./input-CC2joTjB.js";
 import { t as $t } from "./text-field-BAdY-kpO.js";
 import { r as en } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as tn } from "./empty-state-C0kviQdW.js";
+import { t as tn } from "./empty-state-CSkghnD9.js";
 import { t as nn } from "./skeleton-DSdtr2qc.js";
-import { l as rn, n as an, o as on, r as sn, s as cn, t as ln, u as un } from "./dialog-Bm5LvVlB.js";
-import { t as dn } from "./icon-badge-BcW66bRk.js";
+import { l as rn, n as an, o as on, r as sn, s as cn, t as ln, u as un } from "./dialog-B-3s-oXt.js";
+import { t as dn } from "./icon-badge-3ThP6EOl.js";
 import { H as fn, V as pn, X as mn, bt as hn, it as gn, lt as _n, n as vn, t as yn, xt as bn, yt as xn } from "./dist-moutbfbd.js";
 import { t as Sn } from "./markdown-Dw_uH7j7.js";
 import { r as Cn, t as wn } from "./create-store-Dqp-PLLn.js";
@@ -1474,7 +1474,7 @@ function Ul({ label: e, helperText: t, className: r, ...i }) {
 	let a = Hr(), o = Hr(), s = i["aria-invalid"] === !0 || i["aria-invalid"] === "true", c = [i["aria-describedby"], t ? o : void 0].filter(Boolean).join(" ") || void 0;
 	return e || t ? /* @__PURE__ */ K("div", {
 		"data-slot": "checkbox-field",
-		className: n("flex gap-1.5 w-full min-w-[280px] pointer-coarse:py-3", r),
+		className: n("flex gap-1.5 w-full min-w-[min(280px,100%)] pointer-coarse:py-3", r),
 		children: [/* @__PURE__ */ G(Wl, {
 			...i,
 			"aria-describedby": c,
@@ -7124,7 +7124,7 @@ function F_({ className: e, ...t }) {
 	return /* @__PURE__ */ G("textarea", {
 		"data-slot": "input-group-control",
 		"data-pw": t.name ?? "textarea",
-		className: n("field-sizing-content min-h-16 w-full min-w-[280px] flex-1 resize-none bg-transparent px-3 py-3 text-base outline-none md:text-sm", "placeholder:text-muted-foreground disabled:pointer-events-none", e),
+		className: n("field-sizing-content min-h-16 w-full min-w-[min(280px,100%)] flex-1 resize-none bg-transparent px-3 py-3 text-base outline-none md:text-sm", "placeholder:text-muted-foreground disabled:pointer-events-none", e),
 		...t,
 		placeholder: qt(t.placeholder, "text")
 	});
@@ -8781,7 +8781,7 @@ function eb({ className: e, ...t }) {
 	return /* @__PURE__ */ G("textarea", {
 		"data-slot": "textarea",
 		"data-pw": t.name ?? "textarea",
-		className: n(Yt, "placeholder:text-muted-foreground flex resize-none outline-none", "field-sizing-content min-h-16 w-full min-w-[280px] px-3 py-2 text-base md:text-sm", e),
+		className: n(Yt, "placeholder:text-muted-foreground flex resize-none outline-none", "field-sizing-content min-h-16 w-full min-w-[min(280px,100%)] px-3 py-2 text-base md:text-sm", e),
 		...t,
 		placeholder: t.placeholder || " "
 	});
@@ -11229,7 +11229,7 @@ var aS = (e = {}) => Cn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-CRQ0iyLb.js")
+			import("./rich-code-block-BuJLDoBu.js")
 		]);
 		return [r(t, {
 			lowlight: n,
@@ -14829,7 +14829,7 @@ function wE(e, t) {
 }
 //#endregion
 //#region lib/components/ui/media/media-player-mini/corner-classes.ts
-var TE = "top-[calc(1rem+env(safe-area-inset-top))]", EE = "bottom-[calc(1rem+max(var(--nxgt-media-dock,0px),env(safe-area-inset-bottom)))]", DE = "start-[max(1rem,env(safe-area-inset-left))] rtl:start-[max(1rem,env(safe-area-inset-right))]", OE = "end-[max(1rem,env(safe-area-inset-right))] rtl:end-[max(1rem,env(safe-area-inset-left))]", kE = {
+var TE = "top-[calc(1rem+env(safe-area-inset-top))]", EE = "bottom-[calc(1rem+max(var(--nxgt-bottom-chrome,calc(var(--nxgt-nav-bar,0px)+var(--nxgt-media-dock,0px))),env(safe-area-inset-bottom)))]", DE = "start-[max(1rem,env(safe-area-inset-left))] rtl:start-[max(1rem,env(safe-area-inset-right))]", OE = "end-[max(1rem,env(safe-area-inset-right))] rtl:end-[max(1rem,env(safe-area-inset-left))]", kE = {
 	"top-start": `${TE} ${DE}`,
 	"top-end": `${TE} ${OE}`,
 	"bottom-start": `${EE} ${DE}`,
@@ -20376,36 +20376,40 @@ function iP(e) {
 }
 //#endregion
 //#region lib/components/ui/media/galleries/gallery.tsx
-function aP({ className: e, ...t }) {
+function aP(e) {
+	let t = iP(e), { items: n, preset: r, layout: i, columns: a, aspect: o, loop: s, maxItems: c, lightbox: l, captions: u, shape: d, carousel: f, carouselAlign: p, carouselOrientation: m, defaultIndex: h, currentIndex: g, onIndexChange: _, open: v, defaultOpen: y, onOpenChange: b, onDelete: x, selectable: S, onSelectionChange: C, trigger: w, ...T } = e;
 	return /* @__PURE__ */ G(GC, {
-		value: iP(t),
-		children: /* @__PURE__ */ G(oP, { className: e })
+		value: t,
+		children: /* @__PURE__ */ G(oP, { ...T })
 	});
 }
-function oP({ className: e }) {
-	let { items: t, resolved: r, trigger: i, openAt: a, onKeyDown: o } = KC(), { t: s } = L(), c = r.layout, l = t.length === 0 && c !== "none";
+function oP({ className: e, onKeyDown: t, ...r }) {
+	let { items: i, resolved: a, trigger: o, openAt: s, onKeyDown: c } = KC(), { t: l } = L(), u = a.layout, d = i.length === 0 && u !== "none", f = r["aria-label"] ?? (r["aria-labelledby"] ? void 0 : l("material.gallery.label", "Gallery"));
 	return /* @__PURE__ */ K("div", {
-		"data-slot": "gallery",
-		"data-layout": c,
+		tabIndex: 0,
+		...r,
 		role: "application",
-		"aria-label": s("material.gallery.label", "Gallery"),
+		"data-slot": "gallery",
+		"data-layout": u,
+		"aria-label": f,
 		className: n("@container outline-none", e),
-		tabIndex: 0,
-		onKeyDown: o,
+		onKeyDown: (e) => {
+			t?.(e), e.defaultPrevented || c(e);
+		},
 		children: [
 			/* @__PURE__ */ G(IN, {}),
-			l && /* @__PURE__ */ G(NM, {}),
-			!l && c === "grid" && /* @__PURE__ */ G(IM, {}),
-			!l && c === "masonry" && /* @__PURE__ */ G(PN, {}),
-			!l && c === "justified" && /* @__PURE__ */ G(LM, {}),
-			!l && c === "featured" && /* @__PURE__ */ G(FM, {}),
-			!l && c === "carousel" && /* @__PURE__ */ G(jM, {}),
-			!l && c === "strip" && /* @__PURE__ */ G(LN, {}),
-			!l && c === "quilted" && /* @__PURE__ */ G(FN, {}),
-			!l && c === "woven" && /* @__PURE__ */ G(zN, {}),
-			c === "none" && i && /* @__PURE__ */ G(RN, {
-				trigger: i,
-				onOpen: () => a(0)
+			d && /* @__PURE__ */ G(NM, {}),
+			!d && u === "grid" && /* @__PURE__ */ G(IM, {}),
+			!d && u === "masonry" && /* @__PURE__ */ G(PN, {}),
+			!d && u === "justified" && /* @__PURE__ */ G(LM, {}),
+			!d && u === "featured" && /* @__PURE__ */ G(FM, {}),
+			!d && u === "carousel" && /* @__PURE__ */ G(jM, {}),
+			!d && u === "strip" && /* @__PURE__ */ G(LN, {}),
+			!d && u === "quilted" && /* @__PURE__ */ G(FN, {}),
+			!d && u === "woven" && /* @__PURE__ */ G(zN, {}),
+			u === "none" && o && /* @__PURE__ */ G(RN, {
+				trigger: o,
+				onOpen: () => s(0)
 			}),
 			/* @__PURE__ */ G(NN, {})
 		]
@@ -23881,4 +23885,4 @@ function IL({ value: e, onSend: t, placeholder: n, disabled: r, isLoading: i, se
 	};
 }
 //#endregion
-export { aP as $, xv as $n, zg as $r, zT as $t, VF as A, Yl as Ai, yb as An, w_ as Ar, hk as At, pF as B, yl as Bi, Ky as Bn, l_ as Br, TD as Bt, qI as C, Kd as Ci, ix as Cn, k_ as Cr, tA as Ct, aI as D, J as Di, xb as Dn, N_ as Dr, Mk as Dt, cI as E, Ju as Ei, Eb as En, P_ as Er, Ik as Et, SF as F, Bl as Fi, Yy as Fn, v_ as Fr, PD as Ft, NP as G, Ls as Gi, ry as Gn, e_ as Gr, FE as Gt, cF as H, Bs as Hi, Fy as Hn, o_ as Hr, HE as Ht, yF as I, Nl as Ii, Qy as In, b_ as Ir, AD as It, OP as J, hs as Ji, Av as Jn, Zg as Jr, gE as Jt, MP as K, xs as Ki, ey as Kn, $g as Kr, vE as Kt, _F as L, Ml as Li, Xy as Ln, g_ as Lr, jD as Lt, wF as M, Ul as Mi, nb as Mn, x_ as Mr, UO as Mt, TF as N, Hl as Ni, eb as Nn, C_ as Nr, ND as Nt, XF as O, q as Oi, vb as On, F_ as Or, kk as Ot, xF as P, Vl as Pi, $y as Pn, y_ as Pr, FD as Pt, fP as Q, Tv as Qn, Hg as Qr, BT as Qt, mF as R, jl as Ri, Zy as Rn, m_ as Rr, MD as Rt, YI as S, zf as Si, sx as Sn, I_ as Sr, nA as St, fI as T, sd as Ti, zb as Tn, M_ as Tr, Bk as Tt, uF as U, Ps as Ui, oy as Un, r_ as Ur, zE as Ut, dF as V, vl as Vi, Ly as Vn, s_ as Vr, CD as Vt, lF as W, Ms as Wi, dy as Wn, t_ as Wr, RE as Wt, CP as X, Pv as Xn, Kg as Xr, $ as Xt, wP as Y, Ov as Yn, Xg as Yr, hE as Yt, bP as Z, Dv as Zn, Ug as Zr, VT as Zt, vL as _, dh as _i, Zx as _n, V_ as _r, mA as _t, ML as a, fg as ai, HC as an, dv as ar, Nj as at, lL as b, X as bi, vx as bn, W_ as br, cA as bt, kL as c, sg as ci, FC as cn, ev as cr, bj as ct, EL as d, Qh as di, CC as dn, X_ as dr, dj as dt, Lg as ei, RT as en, Cv as er, eP as et, wL as f, qh as fi, xC as fn, Z_ as fr, aj as ft, SL as g, Z as gi, rS as gn, z_ as gr, yA as gt, CL as h, Ah as hi, aS as hn, B_ as hr, xA as ht, PL as i, gg as ii, JC as in, _v as ir, Pj as it, AF as j, ql as ji, db as jn, D_ as jr, rk as jt, qF as k, Ql as ki, bb as kn, O_ as kr, vk as kt, OL as l, rg as li, MC as ln, Q_ as lr, yj as lt, xL as m, Nh as mi, gC as mn, H_ as mr, zA as mt, IL as n, bg as ni, FT as nn, bv as nr, dM as nt, jL as o, ug as oi, LC as on, fv as or, Mj as ot, bL as p, Rh as pi, _C as pn, G_ as pr, tj as pt, kP as q, ms as qi, kv as qn, Qg as qr, _E as qt, NL as r, _g as ri, PT as rn, hv as rr, Wj as rt, AL as s, lg as si, IC as sn, uv as sr, jj as st, FL as t, Cg as ti, IT as tn, yv as tr, fM as tt, DL as u, eg as ui, kC as un, $_ as ur, gj as ut, yL as v, lh as vi, Dx as vn, U_ as vr, pA as vt, KI as w, Id as wi, Yb as wn, j_ as wr, Kk as wt, eL as x, Rf as xi, hx as xn, L_ as xr, aA as xt, _L as y, Xm as yi, Ex as yn, R_ as yr, fA as yt, fF as z, bl as zi, qy as zn, c_ as zr, kD as zt };
+export { aP as $, xv as $n, Hg as $r, zT as $t, VF as A, Ql as Ai, yb as An, O_ as Ar, hk as At, pF as B, bl as Bi, Ky as Bn, c_ as Br, TD as Bt, qI as C, zf as Ci, ix as Cn, I_ as Cr, tA as Ct, aI as D, Ju as Di, xb as Dn, P_ as Dr, Mk as Dt, cI as E, sd as Ei, Eb as En, M_ as Er, Ik as Et, SF as F, Vl as Fi, Yy as Fn, y_ as Fr, PD as Ft, NP as G, Ms as Gi, ry as Gn, t_ as Gr, FE as Gt, cF as H, vl as Hi, Fy as Hn, s_ as Hr, HE as Ht, yF as I, Bl as Ii, Qy as In, v_ as Ir, AD as It, OP as J, ms as Ji, Av as Jn, Qg as Jr, gE as Jt, MP as K, Ls as Ki, ey as Kn, e_ as Kr, vE as Kt, _F as L, Nl as Li, Xy as Ln, b_ as Lr, jD as Lt, wF as M, ql as Mi, nb as Mn, D_ as Mr, UO as Mt, TF as N, Ul as Ni, eb as Nn, x_ as Nr, ND as Nt, XF as O, J as Oi, vb as On, N_ as Or, kk as Ot, xF as P, Hl as Pi, $y as Pn, C_ as Pr, FD as Pt, fP as Q, Tv as Qn, Ug as Qr, BT as Qt, mF as R, Ml as Ri, Zy as Rn, g_ as Rr, MD as Rt, YI as S, Rf as Si, sx as Sn, L_ as Sr, nA as St, fI as T, Id as Ti, zb as Tn, j_ as Tr, Bk as Tt, uF as U, Bs as Ui, oy as Un, o_ as Ur, zE as Ut, dF as V, yl as Vi, Ly as Vn, l_ as Vr, CD as Vt, lF as W, Ps as Wi, dy as Wn, r_ as Wr, RE as Wt, CP as X, Pv as Xn, Xg as Xr, $ as Xt, wP as Y, hs as Yi, Ov as Yn, Zg as Yr, hE as Yt, bP as Z, Dv as Zn, Kg as Zr, VT as Zt, vL as _, Z as _i, Zx as _n, z_ as _r, mA as _t, ML as a, gg as ai, HC as an, _v as ar, Nj as at, lL as b, Xm as bi, vx as bn, R_ as br, cA as bt, kL as c, lg as ci, FC as cn, uv as cr, bj as ct, EL as d, eg as di, CC as dn, $_ as dr, dj as dt, zg as ei, RT as en, Cv as er, eP as et, wL as f, Qh as fi, xC as fn, X_ as fr, aj as ft, SL as g, Ah as gi, rS as gn, B_ as gr, yA as gt, CL as h, Nh as hi, aS as hn, H_ as hr, xA as ht, PL as i, _g as ii, JC as in, gv as ir, Pj as it, AF as j, Yl as ji, db as jn, w_ as jr, rk as jt, qF as k, q as ki, bb as kn, F_ as kr, vk as kt, OL as l, sg as li, MC as ln, ev as lr, yj as lt, xL as m, Rh as mi, gC as mn, G_ as mr, zA as mt, IL as n, Cg as ni, FT as nn, bv as nr, dM as nt, jL as o, fg as oi, LC as on, dv as or, Mj as ot, bL as p, qh as pi, _C as pn, Z_ as pr, tj as pt, kP as q, xs as qi, kv as qn, $g as qr, _E as qt, NL as r, bg as ri, PT as rn, hv as rr, Wj as rt, AL as s, ug as si, IC as sn, fv as sr, jj as st, FL as t, Lg as ti, IT as tn, yv as tr, fM as tt, DL as u, rg as ui, kC as un, Q_ as ur, gj as ut, yL as v, dh as vi, Dx as vn, V_ as vr, pA as vt, KI as w, Kd as wi, Yb as wn, k_ as wr, Kk as wt, eL as x, X as xi, hx as xn, W_ as xr, aA as xt, _L as y, lh as yi, Ex as yn, U_ as yr, fA as yt, fF as z, jl as zi, qy as zn, m_ as zr, kD as zt };

package/dist/{use-click-lock-BZYtTmVt.js → use-click-lock-Bwg_caHO.js}

@@ -16,35 +16,35 @@ function o(e, t, n) {
 //#region lib/components/ui/actions/button/button-tones.ts
 var s = {
 	primary: "text-primary-text",
-	secondary: "text-secondary",
-	success: "text-success dark:text-[color-mix(in_oklab,var(--color-success)_85%,white)]",
-	info: "text-info",
+	secondary: "text-[color-mix(in_oklab,var(--color-secondary)_90%,black)] dark:text-[color-mix(in_oklab,var(--color-secondary)_80%,white)]",
+	success: "text-[color-mix(in_oklab,var(--color-success)_90%,black)] dark:text-[color-mix(in_oklab,var(--color-success)_70%,white)]",
+	info: "text-[color-mix(in_oklab,var(--color-info)_90%,black)] dark:text-[color-mix(in_oklab,var(--color-info)_85%,white)]",
 	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)]",
+	error: "text-[color-mix(in_oklab,var(--color-error)_80%,black)] dark:text-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "text-foreground"
 }, c = {
 	primary: "[&_svg]:data-[slot=icon]:text-primary-text",
-	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)]",
-	info: "[&_svg]:data-[slot=icon]:text-info",
+	secondary: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-secondary)_90%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-secondary)_80%,white)]",
+	success: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-success)_90%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-success)_70%,white)]",
+	info: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-info)_90%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-info)_85%,white)]",
 	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)]",
+	error: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_80%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "[&_svg]:data-[slot=icon]:text-foreground"
 }, l = {
 	primary: "[&_svg]:stroke-primary-text",
-	secondary: "[&_svg]:stroke-secondary",
-	success: "[&_svg]:stroke-success dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_85%,white)]",
-	info: "[&_svg]:stroke-info",
+	secondary: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-secondary)_90%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-secondary)_80%,white)]",
+	success: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_90%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_70%,white)]",
+	info: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-info)_90%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-info)_85%,white)]",
 	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)]",
+	error: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_80%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "[&_svg]:stroke-foreground"
 }, u = {
 	primary: "[--morph-on:var(--color-primary)] [--morph-on-fg:var(--color-primary-foreground)] [--btn-focus:var(--color-primary-text)] [--btn-line:var(--color-primary)]",
 	secondary: "[--morph-on:var(--color-secondary)] dark:[--morph-on:color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))] [--morph-on-fg:var(--color-secondary-foreground)] [--btn-focus:var(--color-secondary)] [--btn-line:var(--color-secondary)]",
-	success: "[--morph-on:var(--color-success)] dark:[--morph-on:color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] [--morph-on-fg:var(--color-success-foreground)] [--btn-focus:var(--color-success)] dark:[--btn-focus:color-mix(in_oklab,var(--color-success)_85%,white)] [--btn-line:var(--color-success)]",
+	success: "[--morph-on:var(--color-success)] dark:[--morph-on:color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] [--morph-on-fg:var(--color-success-foreground)] [--btn-focus:var(--color-success)] dark:[--btn-focus:color-mix(in_oklab,var(--color-success)_70%,white)] [--btn-line:var(--color-success)]",
 	info: "[--morph-on:var(--color-info)] dark:[--morph-on:color-mix(in_oklab,var(--color-info)_60%,var(--color-background))] [--morph-on-fg:var(--color-info-foreground)] [--btn-focus:var(--color-info)] [--btn-line:var(--color-info)]",
 	warning: "[--morph-on:var(--color-warning)] dark:[--morph-on:color-mix(in_oklab,var(--color-warning)_60%,var(--color-background))] [--morph-on-fg:var(--color-warning-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-warning)_85%,white)] [--btn-line:var(--color-warning)]",
-	error: "[--morph-on:var(--color-error)] [--morph-on-fg:var(--color-error-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-error)_85%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-error)_70%,white)] [--btn-line:var(--color-error)]",
+	error: "[--morph-on:var(--color-error)] [--morph-on-fg:var(--color-error-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-error)_80%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-error)_70%,white)] [--btn-line:var(--color-error)]",
 	default: "[--morph-on:var(--color-foreground)] [--morph-on-fg:var(--color-background)] [--btn-focus:var(--color-foreground)] [--btn-line:var(--color-foreground)]"
 }, d = 1e3;
 function f(e, a) {

package/dist/{use-heading-spy-DJR8YYm6.js → use-heading-spy-BgyA6SJl.js}

@@ -1,9 +1,9 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-653apk3f.js";
-import { a as l } from "./button-3op3rtZh.js";
-import { i as u } from "./translate-material-BypJJ1l5.js";
-import { t as d } from "./use-material-translation-CD6QoVal.js";
-import { _ as f, g as p, h as m, m as h, t as g, v as _ } from "./date.utils-DUvqcjan.js";
+import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-DOZ0SfQs.js";
+import { a as l } from "./button-CSKUtMI3.js";
+import { i as u } from "./translate-material-D4rn5UaQ.js";
+import { t as d } from "./use-material-translation-DYrfV_JJ.js";
+import { _ as f, g as p, h as m, t as h, v as g, y as _ } from "./date.utils-JTEIo3mM.js";
 import { useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 import { busySettler as E, busySettler as D, createSubmitGuard as O, createSubmitGuard as k } from "@nxgt/material-core/submit-guard";
@@ -254,7 +254,7 @@ var A = {
 	], a;
 	return a = n === 1 ? r && i.includes(r) ? "ère" : "er" : "ème", n + a;
 }, z = ["MMM", "MMMM"], B = {
-	en: h,
+	en: m,
 	fr: {
 		code: "fr",
 		formatDistance: j,
@@ -266,35 +266,35 @@ var A = {
 				value: "d"
 			} : e),
 			ordinalNumber: R,
-			era: f({
+			era: g({
 				values: ee,
 				defaultWidth: "wide"
 			}),
-			quarter: f({
+			quarter: g({
 				values: te,
 				defaultWidth: "wide",
 				argumentCallback: (e) => e - 1
 			}),
-			month: f({
+			month: g({
 				values: F,
 				defaultWidth: "wide"
 			}),
-			day: f({
+			day: g({
 				values: I,
 				defaultWidth: "wide"
 			}),
-			dayPeriod: f({
+			dayPeriod: g({
 				values: L,
 				defaultWidth: "wide"
 			})
 		},
 		match: {
-			ordinalNumber: m({
+			ordinalNumber: p({
 				matchPattern: /^(\d+)(ième|ère|ème|er|e)?/i,
 				parsePattern: /\d+/i,
 				valueCallback: (e) => parseInt(e)
 			}),
-			era: p({
+			era: f({
 				matchPatterns: {
 					narrow: /^(av\.J\.C|ap\.J\.C|ap\.J\.-C)/i,
 					abbreviated: /^(av\.J\.-C|av\.J-C|apr\.J\.-C|apr\.J-C|ap\.J-C)/i,
@@ -304,7 +304,7 @@ var A = {
 				parsePatterns: { any: [/^av/i, /^ap/i] },
 				defaultParseWidth: "any"
 			}),
-			quarter: p({
+			quarter: f({
 				matchPatterns: {
 					narrow: /^T?[1234]/i,
 					abbreviated: /^[1234](er|ème|e)? trim\.?/i,
@@ -320,7 +320,7 @@ var A = {
 				defaultParseWidth: "any",
 				valueCallback: (e) => e + 1
 			}),
-			month: p({
+			month: f({
 				matchPatterns: {
 					narrow: /^[jfmasond]/i,
 					abbreviated: /^(janv|févr|mars|avr|mai|juin|juill|juil|août|sept|oct|nov|déc)\.?/i,
@@ -359,7 +359,7 @@ var A = {
 				},
 				defaultParseWidth: "any"
 			}),
-			day: p({
+			day: f({
 				matchPatterns: {
 					narrow: /^[lmjvsd]/i,
 					short: /^(di|lu|ma|me|je|ve|sa)/i,
@@ -389,7 +389,7 @@ var A = {
 				},
 				defaultParseWidth: "any"
 			}),
-			dayPeriod: p({
+			dayPeriod: f({
 				matchPatterns: {
 					narrow: /^(a|p|minuit|midi|mat\.?|ap\.?m\.?|soir|nuit)/i,
 					any: /^([ap]\.?\s?m\.?|du matin|de l'après[-\s]midi|du soir|de la nuit)/i
@@ -415,11 +415,11 @@ var A = {
 	}
 };
 function V() {
-	let e = u()?.language ?? "en", t = b(() => B[e] ?? h, [e]);
+	let e = u()?.language ?? "en", t = b(() => B[e] ?? m, [e]);
 	return {
 		language: e,
 		locale: t,
-		format: v((e, n) => g.format(e, n, t), [t])
+		format: v((e, n) => h.format(e, n, t), [t])
 	};
 }
 //#endregion

package/dist/{use-material-translation-CD6QoVal.js → use-material-translation-DYrfV_JJ.js}

@@ -1,4 +1,4 @@
-import { i as e, t } from "./translate-material-BypJJ1l5.js";
+import { i as e, t } from "./translate-material-D4rn5UaQ.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/dist/{use-return-focus-Cevw_6yq.js → use-return-focus-C_Qz_yTk.js}

@@ -1,6 +1,6 @@
 import { o as e, r as t } from "./dist-DVRQkaTK.js";
 import { i as n, n as r, r as i, t as a } from "./dist-DWZXlCZR.js";
-import { C as o, S as s, x as c } from "./spinner-C1QIewWv.js";
+import { C as o, S as s, x as c } from "./spinner-DH1mm8hH.js";
 import { a as l, i as u, r as d } from "./dist-DHdUUM1w.js";
 import { c as f, i as p, l as m, o as h, r as g, s as ee } from "./in-dialog-D61Yeaol.js";
 import { r as te } from "./escape-owner-DpaP0lm1.js";

package/docs/README.md

@@ -17,6 +17,7 @@ detail: every option, the second example, and the traps.
 | [Code editor](guides/code-editor.md) | You want `CodeEditor` or `CodeDiff` in a theme preset or your own (`defineCodeTheme`), several themes on one page, Monaco bundled instead of the CDN, or the new `@nxgt/material/code-editor` import (the reader look, the view props, the `ref` handle and the file tabs are in the component's own page) |
 | [i18n](guides/i18n.md) | You want the components in French, your own strings typed, or translated Zod messages |
 | [App shell](guides/app-shell.md) | You are mounting the sidebar, header and breadcrumbs (`ActivityLayout`) around your routes |
+| [Layouts](guides/layouts.md) | You are choosing a navigation preset, an app bar variant or a page layout, and want one working example of each |
 | [Animations](guides/animations.md) | You animate with `animate-*` classes: setup next to `tw-animate-css`, every animation with its defaults, the modifiers, stagger, text splitting, scroll-driven animation, appear/disappear, reduced motion, recipes and browser support |
 | [Theming](guides/theming.md) | You want to change colours or radius, use a shipped theme (`@nxgt/material/themes/<name>.css`) or a themed zone, add dark mode without a flash, use tones (the `data-tone` channel and app tones), or use the compiled CSS without Tailwind |
 | [Printing](guides/printing.md) | You render PDF documents with `@nxgt/material/print`, turn them into a download, a new tab or a server response, write them as plain data, or bundle them into an SSR server |

package/docs/components/data-display.md

@@ -21,6 +21,7 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-metric-cards.webp" width="96" alt=""> | [Metric cards](#metric-cards) | Sixteen dashboard tiles |
 | <img src="../previews/data-display-card-presets.webp" width="96" alt=""> | [Card presets](#card-presets) | Twenty-seven ready-made cards |
 | <img src="../previews/data-display-statusindicator.webp" width="96" alt=""> | [StatusIndicator](#statusindicator) | Coloured status dot with a label |
+| <img src="../previews/data-display-tubecap.webp" width="96" alt=""> | [TubeCap](#tubecap) | A specimen tube's chip: a cap in its fixed convention colour, the container's name beside it, optional volume, accession and action |
 | <img src="../previews/data-display-summarydata.webp" width="96" alt=""> | [SummaryData](#summarydata) | Label / value pairs as a grid or inline |
 | <img src="../previews/data-display-description.webp" width="96" alt=""> | [Description](#description) | One read-only label / value pair |
 | <img src="../previews/data-display-descriptionlist.webp" width="96" alt=""> | [DescriptionList](#descriptionlist) | A dense auto-fill grid of label / value pairs in a `dl`, with a panels variant |
@@ -193,7 +194,7 @@ no `style` attribute and a strict CSP is fine.
 - Seat changes are not animated beyond a colour fade, which stops under
   `prefers-reduced-motion`.
 
-**Storybook:** `Data display/SeatRing` · **Vue:** not yet (#1931)
+**Storybook:** `Data display/SeatRing` · **Vue:** not yet (#2470) (#1931)
 
 ---
 
@@ -268,7 +269,7 @@ const [open, setOpen] = useState(false);
   the layout follows `dir` (RTL) and dark mode.
 - Keep `front` and `description` free of the secret: they are always in the page.
 
-**Storybook:** `Data display/SecretCard` · **Vue:** not yet (#1938)
+**Storybook:** `Data display/SecretCard` · **Vue:** not yet (#2470) (#1938)
 
 ---
 
@@ -425,7 +426,7 @@ import { CountBadge, IconButton } from '@nxgt/material/components';
 
 ![HighlightedText](../previews/data-display-highlightedtext.webp)
 
-A string with the words of a search query in a themed `<mark>`. Case, accents and ligatures are folded (`œ` is `oe`, `æ` is `ae`, `ß` is `ss`), and a query word matches at the start of a word, as a search engine's normaliser does.
+A string with the words of a search query in a themed `<mark>`. Case, accents and ligatures are folded (`œ` is `oe`, `æ` is `ae`, `ß` is `ss`), and a query word matches at the start of a word, as a search engine's normaliser does. The `Guides/Recipes/Search dialog and results page` story marks the matches in command rows and result cards with it.
 
 ```tsx
 import { HighlightedText, highlightRanges } from '@nxgt/material/components';
@@ -709,6 +710,10 @@ its shape needs (`series`, `items`, `values`, `percent`, `current` /
 `previous`…) and the props of `Card`. Every tile lays itself out from its own
 width, not the window's, so the same card works in a sidebar and a wide grid.
 
+To let users rearrange the cards, put each in a `DashboardTile` (`plain`) inside a
+[`DashboardGrid`](./navigation-and-layout.md#dashboardgrid); to span columns in a
+plain grid, use `ResponsiveGrid.Item`.
+
 **`tone`.** Every card takes a `tone`: a named tone, or one the app declared in
 `AppTones`. It sets `data-tone` on the card and draws its accent in the tone's
 text colour (4.5:1 on the card; the full heatmap step and every solid mark
@@ -786,6 +791,33 @@ import { StatusIndicator } from '@nxgt/material/components';
 
 ---
 
+## TubeCap
+
+![TubeCap](../previews/data-display-tubecap.webp)
+
+A chip for a specimen tube. The cap colour comes from the international tube convention, so it is a fixed value: it does not follow the theme and is the same in light and dark. The container's name is written beside the cap (`label` is required), so colour never carries the meaning alone; the text uses the theme's foreground, which keeps the theme's 4.5:1 contrast.
+
+```tsx
+import { TubeCap } from '@nxgt/material/components';
+
+<TubeCap kind="edta" label="EDTA" volume="4 mL" accession="L00000042-1" />
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `kind` | `'edta' \| 'heparin' \| 'citrate' \| 'esr' \| 'serum' \| 'gel' \| 'fluoride' \| 'trace' \| 'other'` | required | the cap colour: lavender, green, light blue, black, red, gold, grey, royal blue, plain |
+| `label` | `ReactNode` | required | the container's name beside the cap; it also names the chip (`role="group"`) |
+| `volume` | `ReactNode` | none | the volume, as text |
+| `accession` | `ReactNode` | none | the tube's accession label |
+| `action` | `ReactNode` | none | trailing slot, such as an `IconButton` |
+| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` | cap of 20, 28 or 40px |
+
+`TUBE_CAP_KINDS` lists the kinds. The look is CSS on `data-kind`, with no inline style (strict CSP). The cap is `aria-hidden`.
+
+**Storybook:** `Data display/TubeCap` · **Vue:** not yet (#2470)
+
+---
+
 ## SummaryData
 
 ![SummaryData](../previews/data-display-summarydata.webp)
@@ -1335,7 +1367,7 @@ and the user's zone) and both sides agree:
 <ChangeHistory entries={entries} now={loaderData.now} timeZone={loaderData.timeZone} />
 ```
 
-**Storybook:** `Data display/ChangeHistory` · **Vue:** not yet (tracked as a `vue` issue)
+**Storybook:** `Data display/ChangeHistory` · **Vue:** not yet (#2470) (tracked as a `vue` issue)
 
 ---
 
@@ -1372,7 +1404,7 @@ The offset follows the instant (`Europe/Paris` is `UTC+1` in winter and
 `UTC+2` in summer). `ChangeHistory` takes a `timeZone` and `RelativeTime` a `now`
 the same way; pass the app's zone from the server so every screen agrees.
 
-**Storybook:** `Data display/ZonedTime` · **Vue:** not yet (tracked as a `vue` issue)
+**Storybook:** `Data display/ZonedTime` · **Vue:** not yet (#2470) (tracked as a `vue` issue)
 
 ---
 
@@ -1441,7 +1473,7 @@ own, so they add up to less.
 - Bar widths are SVG attributes, so server markup has no `style` attribute and
   a strict CSP is fine.
 
-**Storybook:** `Data display/VoteTally` · **Vue:** not yet (#1940)
+**Storybook:** `Data display/VoteTally` · **Vue:** not yet (#2470) (#1940)
 
 ---
 
@@ -1774,7 +1806,7 @@ lock set by another code form disables its field and leaves Cancel usable.
 button by `getByRole('button', { name: 'Activate' })` and the lock by
 `getByRole('alert')`.
 
-**Storybook:** `Data display/EnrolmentCard`, `…/Shared lock`, `Guides/Accessibility/Touch targets/Verification code` · **Vue:** not yet
+**Storybook:** `Data display/EnrolmentCard`, `…/Shared lock`, `Guides/Accessibility/Touch targets/Verification code` · **Vue:** not yet (#2470)
 
 ---
 
@@ -1917,4 +1949,4 @@ import { RecoveryCodesStatus, VerificationLockProvider } from '@nxgt/material/co
 
 It reads the page-wide lock like [EnrolmentCard](#enrolmentcard) does. With `requireCode={false}` there is no code form, so `error` and `attemptsLeft` are not shown: the plain button follows `pending`, and is disabled by `locked` and by the page-wide lock; then the lock's text (the message of the answer that locked, or "Too many wrong codes. Try again later.") shows above it as a muted line that describes the button.
 
-**Storybook:** `Data display/RecoveryCodesStatus`, `Data display/EnrolmentCard/Shared lock` · **Vue:** not yet
+**Storybook:** `Data display/RecoveryCodesStatus`, `Data display/EnrolmentCard/Shared lock` · **Vue:** not yet (#2470)

package/docs/components/data-table-filter-and-lists.md

@@ -864,8 +864,9 @@ export default function Students() {
   search. When rows come back while the focus was on the empty page, it
   goes to the search; rows that come back on their own leave the focus
   alone. The empty page stays while the next answer loads (`data-busy`).
-- **A failed fetch.** Pass `error` (`{ title?, description?, cause?, kind? }`,
-  `null` when there is none; `kind` takes `ErrorState`'s kinds, `generic`
+- **A failed fetch.** Pass `error` (`{ title?, description?, cause?, kind?, illustration? }`,
+  `null` when there is none; `illustration` is a scene id, a node, `true` or
+  `false`, as on `ListEmptyPage`, and replaces the scene `kind` picks; `kind` takes `ErrorState`'s kinds, `generic`
   (default), `offline` or `maintenance`; `title` and `description` default to
   the two strings below, `cause` to none) and `onRetry`: the failure replaces the rows,
   the header, the footer and the empty page, with a Retry (a returned promise,
@@ -1667,6 +1668,7 @@ import { DayGroupedList } from '@nxgt/material/components';
 | `labels` | `Partial<Record<DayGroupKey, ReactNode>>` | — | replaces a heading |
 | `sticky` | `boolean` | `true` | headings stick while their items scroll |
 | `showCount` | `boolean` | `false` | the count beside each heading |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | the level of each heading (`<h2>`…`<h6>`), to follow the heading above the list |
 | `headerClassName` / `listClassName` | `string` | — | a heading's background on a tinted parent, the `<ul>`'s dividers |
 
 **Storybook:** `Data table, filter & lists/DayGroupedList` · **Vue:** — (later)
@@ -2992,7 +2994,9 @@ import { Avatar, ListPane, ListPaneItem } from '@nxgt/material/components';
 `trailing`, `selected`, `focused` (a ring while its `group/listbox` parent has
 visible focus), `disabled`, `density` (`comfortable` or `compact`, one line),
 `appearance` (`plain` or `card`) and `lifted` (raised, as under a drag). It is
-purely visual: give it the role and the events of the list it sits in. The
+purely visual: give it the role and the events of the list it sits in. A
+`title` or `description` cut by the ellipsis keeps its full text in a `title`
+attribute (when it is a string). The
 badge steps aside when the pane is narrower than 20rem.
 
 The height reaches the body as a CSS custom property set from script, never

package/docs/components/form-fields.md

@@ -245,6 +245,7 @@ export function PlanForm({ onSave }: { onSave: (values: Values) => void }) {
 | `reorderable` | `boolean` | `false` | move up / move down buttons on each row |
 | `max` | `number` | — | at this many rows, Add is disabled and says why |
 | `min` | `number` | — | at this many rows, Remove is disabled |
+| `removeAtMin` | `'disable' \| 'hide'` | `'disable'` | at `min` rows, `'hide'` does not render Remove instead of disabling it |
 | `removable` | `(row, index) => boolean` | every row | a row it refuses keeps its Remove button `aria-disabled` (focusable; activating it does nothing). `row` is the `useFieldArray` field (`RepeatableGroupFormField`) or your item |
 | `removeDisabledReason` | `(row, index) => string \| undefined` | — | why a row cannot be removed: its Remove button's tooltip (on hover, focus, tap and click) and `aria-describedby` description |
 | `emptyTitle`, `emptyDescription` | `ReactNode` | — | an `EmptyState` when there is no row |

package/docs/components/media-and-files.md

@@ -624,6 +624,7 @@ with a `+N` tile).
 | `selectable` | `boolean` | — | checkboxes on tiles; `onSelectionChange(ids)` |
 | `open` / `defaultOpen` / `onOpenChange` | `boolean` | — | control the lightbox |
 | `onDelete` | `(item) => void` | — | adds a delete button on each tile |
+| `aria-label` / `aria-labelledby` | `string` | `'Gallery'` label | names the gallery (the root has `role="application"`); a given `aria-labelledby` replaces the default label. `MiniGallery` and `LightboxGallery` take both. Other `div` props (`id`, `data-*`, `onKeyDown`) reach the root element |
 
 **States.** Tiles use the `md` corner and round to `lg-plus` on hover (an
 effects easing, so the radius never overshoots) with a spring press scale. A