@vjdesigns/vjdesigns-ui 2.2.0 → 2.4.0

package/dist/components/data-display/Avatar/Avatar.mjs

@@ -73,27 +73,27 @@ var _ = {
 	md: r.spacingMd,
 	lg: r.spacingLg
 }, w = a(null);
-function T({ src: i, alt: a, name: o, size: d, shape: f, tone: p = "neutral", variant: h = "soft", colorFromName: C = !1, status: T, statusLabel: E, ring: D = !1, ringTone: O = "accent", decorative: k = !1, icon: A, imgProps: ee, onImageStatusChange: te, className: j, "aria-label": M, "aria-labelledby": N, ...P }) {
-	let F = e(), I = s(w), ne = I?.size ?? d ?? "md", re = f ?? I?.shape ?? "circle", [L, R] = c(null), z = i ? L?.src === i ? L.status : "loading" : void 0, B = (e) => {
+function T({ src: i, alt: a, name: o, size: d, shape: f, tone: p = "neutral", variant: h = "soft", colorFromName: C = !1, status: T, statusLabel: E, bordered: D = !1, ring: O = !1, ringTone: k = "accent", decorative: ee = !1, icon: te, imgProps: A, onImageStatusChange: j, className: M, "aria-label": N, "aria-labelledby": P, ...ne }) {
+	let F = e(), I = s(w), re = I?.size ?? d ?? "md", ie = f ?? I?.shape ?? "circle", [L, R] = c(null), z = i ? L?.src === i ? L.status : "loading" : void 0, B = (e) => {
 		!i || L?.src === i && L.status === e || (R({
 			src: i,
 			status: e
-		}), te?.(e));
-	}, { onLoad: V, onError: H, className: U, ref: W, ...G } = ee ?? {}, K = (e) => {
+		}), j?.(e));
+	}, { onLoad: V, onError: H, className: U, ref: W, ...G } = A ?? {}, K = (e) => {
 		e && e.complete && L?.src !== i && B(e.naturalWidth > 0 ? "loaded" : "error"), typeof W == "function" ? W(e) : W && (W.current = e);
 	}, q = (e) => {
 		B("loaded"), V?.(e);
 	}, J = (e) => {
 		B("error"), H?.(e);
-	}, Y = m(o), ie = C && o?.trim() ? g(o) : p, ae = !!i && z !== "error", X = k || a === "" && !o, Z = a || o?.trim() || F.avatar.fallbackName, Q = T ? E ?? F.avatar.status[T] : void 0, oe = Q ? `${Z} (${Q})` : Z, se = X && !Q ? { "aria-hidden": !0 } : X ? {
+	}, Y = m(o), ae = C && o?.trim() ? g(o) : p, oe = !!i && z !== "error", X = ee || a === "" && !o, Z = a || o?.trim() || F.avatar.fallbackName, Q = T ? E ?? F.avatar.status[T] : void 0, se = Q ? `${Z} (${Q})` : Z, ce = X && !Q ? { "aria-hidden": !0 } : X ? {
 		role: "img",
 		"aria-label": Q
 	} : {
 		role: "img",
-		"aria-label": N ? M : M === void 0 ? oe : ((e) => Q ? `${e} (${Q})` : e)(M),
-		"aria-labelledby": N
+		"aria-label": P ? N : N === void 0 ? se : ((e) => Q ? `${e} (${Q})` : e)(N),
+		"aria-labelledby": P
 	}, $;
-	return $ = ae ? /* @__PURE__ */ l("img", {
+	return $ = oe ? /* @__PURE__ */ l("img", {
 		...G,
 		ref: K,
 		src: i,
@@ -104,12 +104,12 @@ function T({ src: i, alt: a, name: o, size: d, shape: f, tone: p = "neutral", va
 	}) : Y ? /* @__PURE__ */ l("span", {
 		className: r.initials,
 		children: Y
-	}) : A ?? /* @__PURE__ */ l(n, { className: r.icon }), /* @__PURE__ */ u("span", {
-		...P,
-		...se,
+	}) : te ?? /* @__PURE__ */ l(n, { className: r.icon }), /* @__PURE__ */ u("span", {
+		...ne,
+		...ce,
 		"data-status": T,
 		"data-image-status": z,
-		className: t(r.root, _[ne], v[re], y[h], b[ie], I && r.inGroup, D && r.ring, D && x[O], j),
+		className: t(r.root, _[re], v[ie], y[h], b[ae], I && r.inGroup, D && r.bordered, O && r.ring, O && x[k], M),
 		children: [/* @__PURE__ */ l("span", {
 			className: r.face,
 			children: $

package/dist/components/data-display/Avatar/Avatar.module.css.cjs.js

@@ -1 +1 @@
-var e=`_root_qebz0_25`,t=`_face_qebz0_61`,n=`_xs_qebz0_89`,r=`_sm_qebz0_97`,i=`_md_qebz0_105`,a=`_lg_qebz0_113`,o=`_xl_qebz0_121`,s=`_size2xl_qebz0_129`,c=`_circle_qebz0_141`,l=`_rounded_qebz0_147`,u=`_square_qebz0_153`,d=`_soft_qebz0_165`,f=`_toneNeutral_qebz0_165`,p=`_tonePrimary_qebz0_167`,m=`_toneAccent_qebz0_169`,h=`_toneSuccess_qebz0_171`,g=`_toneWarning_qebz0_173`,_=`_toneDanger_qebz0_175`,v=`_toneInfo_qebz0_177`,y=`_solid_qebz0_181`,b=`_image_qebz0_213`,x=`_imageLoaded_qebz0_233`,S=`_initials_qebz0_241`,C=`_surplus_qebz0_259`,w=`_icon_qebz0_269`,T=`_inGroup_qebz0_283`,E=`_ring_qebz0_291`,D=`_ringNeutral_qebz0_305`,O=`_ringPrimary_qebz0_307`,k=`_ringAccent_qebz0_309`,A=`_ringSuccess_qebz0_311`,j=`_ringWarning_qebz0_313`,M=`_ringDanger_qebz0_315`,N=`_ringInfo_qebz0_317`,P=`_status_qebz0_335`,F=`_statusOnline_qebz0_377`,I=`_statusAway_qebz0_385`,L=`_statusBusy_qebz0_417`,R=`_statusOffline_qebz0_447`,z=`_group_qebz0_467`,B=`_spacingSm_qebz0_495`,V=`_spacingMd_qebz0_501`,H=`_spacingLg_qebz0_507`,U={root:e,face:t,xs:n,sm:r,md:i,lg:a,xl:o,size2xl:s,circle:c,rounded:l,square:u,soft:d,toneNeutral:f,tonePrimary:p,toneAccent:m,toneSuccess:h,toneWarning:g,toneDanger:_,toneInfo:v,solid:y,image:b,imageLoaded:x,initials:S,surplus:C,icon:w,inGroup:T,ring:E,ringNeutral:D,ringPrimary:O,ringAccent:k,ringSuccess:A,ringWarning:j,ringDanger:M,ringInfo:N,status:P,statusOnline:F,statusAway:I,statusBusy:L,statusOffline:R,group:z,spacingSm:B,spacingMd:V,spacingLg:H};exports.circle=c,exports.default=U,exports.face=t,exports.group=z,exports.icon=w,exports.image=b,exports.imageLoaded=x,exports.inGroup=T,exports.initials=S,exports.lg=a,exports.md=i,exports.ring=E,exports.ringAccent=k,exports.ringDanger=M,exports.ringInfo=N,exports.ringNeutral=D,exports.ringPrimary=O,exports.ringSuccess=A,exports.ringWarning=j,exports.root=e,exports.rounded=l,exports.size2xl=s,exports.sm=r,exports.soft=d,exports.solid=y,exports.spacingLg=H,exports.spacingMd=V,exports.spacingSm=B,exports.square=u,exports.status=P,exports.statusAway=I,exports.statusBusy=L,exports.statusOffline=R,exports.statusOnline=F,exports.surplus=C,exports.toneAccent=m,exports.toneDanger=_,exports.toneInfo=v,exports.toneNeutral=f,exports.tonePrimary=p,exports.toneSuccess=h,exports.toneWarning=g,exports.xl=o,exports.xs=n;
+var e=`_root_1mppz_29`,t=`_face_1mppz_65`,n=`_xs_1mppz_93`,r=`_sm_1mppz_101`,i=`_md_1mppz_109`,a=`_lg_1mppz_117`,o=`_xl_1mppz_125`,s=`_size2xl_1mppz_133`,c=`_circle_1mppz_145`,l=`_rounded_1mppz_151`,u=`_square_1mppz_157`,d=`_soft_1mppz_169`,f=`_toneNeutral_1mppz_169`,p=`_tonePrimary_1mppz_171`,m=`_toneAccent_1mppz_173`,h=`_toneSuccess_1mppz_175`,g=`_toneWarning_1mppz_177`,_=`_toneDanger_1mppz_179`,v=`_toneInfo_1mppz_181`,y=`_solid_1mppz_185`,b=`_image_1mppz_217`,x=`_imageLoaded_1mppz_237`,S=`_initials_1mppz_245`,C=`_surplus_1mppz_263`,w=`_icon_1mppz_273`,T=`_inGroup_1mppz_287`,E=`_ring_1mppz_295`,D=`_bordered_1mppz_313`,O=`_ringNeutral_1mppz_349`,k=`_ringPrimary_1mppz_351`,A=`_ringAccent_1mppz_353`,j=`_ringSuccess_1mppz_355`,M=`_ringWarning_1mppz_357`,N=`_ringDanger_1mppz_359`,P=`_ringInfo_1mppz_361`,F=`_status_1mppz_379`,I=`_statusOnline_1mppz_421`,L=`_statusAway_1mppz_429`,R=`_statusBusy_1mppz_461`,z=`_statusOffline_1mppz_491`,B=`_group_1mppz_511`,V=`_spacingSm_1mppz_539`,H=`_spacingMd_1mppz_545`,U=`_spacingLg_1mppz_551`,W={root:e,face:t,xs:n,sm:r,md:i,lg:a,xl:o,size2xl:s,circle:c,rounded:l,square:u,soft:d,toneNeutral:f,tonePrimary:p,toneAccent:m,toneSuccess:h,toneWarning:g,toneDanger:_,toneInfo:v,solid:y,image:b,imageLoaded:x,initials:S,surplus:C,icon:w,inGroup:T,ring:E,bordered:D,ringNeutral:O,ringPrimary:k,ringAccent:A,ringSuccess:j,ringWarning:M,ringDanger:N,ringInfo:P,status:F,statusOnline:I,statusAway:L,statusBusy:R,statusOffline:z,group:B,spacingSm:V,spacingMd:H,spacingLg:U};exports.bordered=D,exports.circle=c,exports.default=W,exports.face=t,exports.group=B,exports.icon=w,exports.image=b,exports.imageLoaded=x,exports.inGroup=T,exports.initials=S,exports.lg=a,exports.md=i,exports.ring=E,exports.ringAccent=A,exports.ringDanger=N,exports.ringInfo=P,exports.ringNeutral=O,exports.ringPrimary=k,exports.ringSuccess=j,exports.ringWarning=M,exports.root=e,exports.rounded=l,exports.size2xl=s,exports.sm=r,exports.soft=d,exports.solid=y,exports.spacingLg=U,exports.spacingMd=H,exports.spacingSm=V,exports.square=u,exports.status=F,exports.statusAway=L,exports.statusBusy=R,exports.statusOffline=z,exports.statusOnline=I,exports.surplus=C,exports.toneAccent=m,exports.toneDanger=_,exports.toneInfo=v,exports.toneNeutral=f,exports.tonePrimary=p,exports.toneSuccess=h,exports.toneWarning=g,exports.xl=o,exports.xs=n;

package/dist/components/data-display/Avatar/Avatar.module.css.mjs

@@ -1,5 +1,5 @@
 //#region src/components/data-display/Avatar/Avatar.module.css
-var e = "_root_qebz0_25", t = "_face_qebz0_61", n = "_xs_qebz0_89", r = "_sm_qebz0_97", i = "_md_qebz0_105", a = "_lg_qebz0_113", o = "_xl_qebz0_121", s = "_size2xl_qebz0_129", c = "_circle_qebz0_141", l = "_rounded_qebz0_147", u = "_square_qebz0_153", d = "_soft_qebz0_165", f = "_toneNeutral_qebz0_165", p = "_tonePrimary_qebz0_167", m = "_toneAccent_qebz0_169", h = "_toneSuccess_qebz0_171", g = "_toneWarning_qebz0_173", _ = "_toneDanger_qebz0_175", v = "_toneInfo_qebz0_177", y = "_solid_qebz0_181", b = "_image_qebz0_213", x = "_imageLoaded_qebz0_233", S = "_initials_qebz0_241", C = "_surplus_qebz0_259", w = "_icon_qebz0_269", T = "_inGroup_qebz0_283", E = "_ring_qebz0_291", D = "_ringNeutral_qebz0_305", O = "_ringPrimary_qebz0_307", k = "_ringAccent_qebz0_309", A = "_ringSuccess_qebz0_311", j = "_ringWarning_qebz0_313", M = "_ringDanger_qebz0_315", N = "_ringInfo_qebz0_317", P = "_status_qebz0_335", F = "_statusOnline_qebz0_377", I = "_statusAway_qebz0_385", L = "_statusBusy_qebz0_417", R = "_statusOffline_qebz0_447", z = "_group_qebz0_467", B = "_spacingSm_qebz0_495", V = "_spacingMd_qebz0_501", H = "_spacingLg_qebz0_507", U = {
+var e = "_root_1mppz_29", t = "_face_1mppz_65", n = "_xs_1mppz_93", r = "_sm_1mppz_101", i = "_md_1mppz_109", a = "_lg_1mppz_117", o = "_xl_1mppz_125", s = "_size2xl_1mppz_133", c = "_circle_1mppz_145", l = "_rounded_1mppz_151", u = "_square_1mppz_157", d = "_soft_1mppz_169", f = "_toneNeutral_1mppz_169", p = "_tonePrimary_1mppz_171", m = "_toneAccent_1mppz_173", h = "_toneSuccess_1mppz_175", g = "_toneWarning_1mppz_177", _ = "_toneDanger_1mppz_179", v = "_toneInfo_1mppz_181", y = "_solid_1mppz_185", b = "_image_1mppz_217", x = "_imageLoaded_1mppz_237", S = "_initials_1mppz_245", C = "_surplus_1mppz_263", w = "_icon_1mppz_273", T = "_inGroup_1mppz_287", E = "_ring_1mppz_295", D = "_bordered_1mppz_313", O = "_ringNeutral_1mppz_349", k = "_ringPrimary_1mppz_351", A = "_ringAccent_1mppz_353", j = "_ringSuccess_1mppz_355", M = "_ringWarning_1mppz_357", N = "_ringDanger_1mppz_359", P = "_ringInfo_1mppz_361", F = "_status_1mppz_379", I = "_statusOnline_1mppz_421", L = "_statusAway_1mppz_429", R = "_statusBusy_1mppz_461", z = "_statusOffline_1mppz_491", B = "_group_1mppz_511", V = "_spacingSm_1mppz_539", H = "_spacingMd_1mppz_545", U = "_spacingLg_1mppz_551", W = {
 	root: e,
 	face: t,
 	xs: n,
@@ -27,22 +27,23 @@ var e = "_root_qebz0_25", t = "_face_qebz0_61", n = "_xs_qebz0_89", r = "_sm_qeb
 	icon: w,
 	inGroup: T,
 	ring: E,
-	ringNeutral: D,
-	ringPrimary: O,
-	ringAccent: k,
-	ringSuccess: A,
-	ringWarning: j,
-	ringDanger: M,
-	ringInfo: N,
-	status: P,
-	statusOnline: F,
-	statusAway: I,
-	statusBusy: L,
-	statusOffline: R,
-	group: z,
-	spacingSm: B,
-	spacingMd: V,
-	spacingLg: H
+	bordered: D,
+	ringNeutral: O,
+	ringPrimary: k,
+	ringAccent: A,
+	ringSuccess: j,
+	ringWarning: M,
+	ringDanger: N,
+	ringInfo: P,
+	status: F,
+	statusOnline: I,
+	statusAway: L,
+	statusBusy: R,
+	statusOffline: z,
+	group: B,
+	spacingSm: V,
+	spacingMd: H,
+	spacingLg: U
 };
 //#endregion
-export { c as circle, U as default, t as face, z as group, w as icon, b as image, x as imageLoaded, T as inGroup, S as initials, a as lg, i as md, E as ring, k as ringAccent, M as ringDanger, N as ringInfo, D as ringNeutral, O as ringPrimary, A as ringSuccess, j as ringWarning, e as root, l as rounded, s as size2xl, r as sm, d as soft, y as solid, H as spacingLg, V as spacingMd, B as spacingSm, u as square, P as status, I as statusAway, L as statusBusy, R as statusOffline, F as statusOnline, C as surplus, m as toneAccent, _ as toneDanger, v as toneInfo, f as toneNeutral, p as tonePrimary, h as toneSuccess, g as toneWarning, o as xl, n as xs };
+export { D as bordered, c as circle, W as default, t as face, B as group, w as icon, b as image, x as imageLoaded, T as inGroup, S as initials, a as lg, i as md, E as ring, A as ringAccent, N as ringDanger, P as ringInfo, O as ringNeutral, k as ringPrimary, j as ringSuccess, M as ringWarning, e as root, l as rounded, s as size2xl, r as sm, d as soft, y as solid, U as spacingLg, H as spacingMd, V as spacingSm, u as square, F as status, L as statusAway, R as statusBusy, z as statusOffline, I as statusOnline, C as surplus, m as toneAccent, _ as toneDanger, v as toneInfo, f as toneNeutral, p as tonePrimary, h as toneSuccess, g as toneWarning, o as xl, n as xs };

package/dist/components/data-display/Badge/Badge.cjs.js

@@ -1 +1 @@
-const e=require("../../../utils/cx.cjs.js"),t=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),n=require("./Badge.module.css.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=globalThis.process?.env?.NODE_ENV!==`production`,o={solid:n.default.solid,soft:n.default.soft,outline:n.default.outline},s={neutral:n.default.neutral,primary:n.default.primary,accent:n.default.accent,success:n.default.success,warning:n.default.warning,danger:n.default.danger,info:n.default.info},c={sm:n.default.sm,md:n.default.md,lg:n.default.lg},l={none:n.default.radiusNone,xs:n.default.radiusXs,sm:n.default.radiusSm,md:n.default.radiusMd,lg:n.default.radiusLg,xl:n.default.radiusXl,"2xl":n.default.radius2xl,pill:n.default.radiusPill},u={"top-end":n.default.topEnd,"top-start":n.default.topStart,"bottom-end":n.default.bottomEnd,"bottom-start":n.default.bottomStart},d={rectangle:n.default.overlapRectangle,circle:n.default.overlapCircle};function f(e,t=99){return e>t?`${t}+`:String(e)}var p=e=>typeof e==`number`?`${e}px`:e,m=({variant:r=`soft`,tone:a=`neutral`,size:u=`md`,radius:d=`pill`,count:p,max:m=99,showZero:h=!1,label:g,startIcon:_,dot:v=!1,caps:y=!1,className:b,children:x,...S})=>{let C=p!==void 0;if(C&&p===0&&!h)return null;let w=C?f(p,m):x,T=g!==void 0&&g!==``;return(0,i.jsxs)(`span`,{...S,className:e.cx(n.default.root,o[r],s[a],c[u],l[d],C&&n.default.count,y&&n.default.caps,b),children:[(0,i.jsxs)(`span`,{className:n.default.content,"aria-hidden":T?!0:void 0,children:[v&&(0,i.jsx)(`span`,{className:n.default.dot,"aria-hidden":`true`}),_!=null&&(0,i.jsx)(`span`,{className:n.default.icon,"aria-hidden":`true`,children:_}),w!=null&&w!==``&&(0,i.jsx)(`span`,{className:n.default.label,children:w})]}),T&&(0,i.jsx)(t.VisuallyHidden,{children:g})]})},h=({children:l,variant:m=`solid`,tone:h=`accent`,size:g=`md`,count:_,max:v=99,showZero:y=!1,label:b,dot:x=!1,content:S,placement:C=`top-end`,overlap:w=`rectangle`,offset:T,invisible:E=!1,badgeClassName:D,className:O,style:k,...A})=>{let j=!x&&_!==void 0,M=E||j&&_===0&&!y,N=x?null:j?f(_,v):S,P=b!==void 0&&b!==``&&!M,F=!M&&(x||N!=null)&&(b===void 0||b===``);(0,r.useEffect)(()=>{a&&F&&console.warn('[BadgeAnchor] Pass a `label` (e.g. "3 unread messages") so screen readers get the badge\'s meaning; the visual dot or count is hidden from them.')},[F]);let[I,L]=T===void 0?[void 0,void 0]:Array.isArray(T)?T:[T,T],R=T===void 0?k:{"--badge-offset-x":p(I),"--badge-offset-y":p(L),...k};return(0,i.jsxs)(`span`,{...A,className:e.cx(n.default.anchor,O),style:R,children:[l,(0,i.jsxs)(`span`,{className:e.cx(n.default.root,n.default.anchored,o[m],s[h],c[g],n.default.radiusPill,u[C],d[w],x?n.default.anchoredDot:n.default.count,M&&n.default.invisible,D),"data-state":M?`hidden`:`visible`,children:[!x&&(0,i.jsx)(`span`,{className:n.default.content,"aria-hidden":`true`,children:N!=null&&N!==``&&(0,i.jsx)(`span`,{className:n.default.label,children:N})}),P&&(0,i.jsx)(t.VisuallyHidden,{children:b})]})]})};exports.Badge=m,exports.BadgeAnchor=h,exports.formatBadgeCount=f;
+const e=require("../../../utils/cx.cjs.js"),t=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),n=require("./Badge.module.css.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=globalThis.process?.env?.NODE_ENV!==`production`,o={solid:n.default.solid,soft:n.default.soft,outline:n.default.outline,inverse:n.default.inverse},s={neutral:n.default.neutral,primary:n.default.primary,accent:n.default.accent,success:n.default.success,warning:n.default.warning,danger:n.default.danger,info:n.default.info},c={sm:n.default.sm,md:n.default.md,lg:n.default.lg},l={none:n.default.radiusNone,xs:n.default.radiusXs,sm:n.default.radiusSm,md:n.default.radiusMd,lg:n.default.radiusLg,xl:n.default.radiusXl,"2xl":n.default.radius2xl,pill:n.default.radiusPill},u={"top-end":n.default.topEnd,"top-start":n.default.topStart,"bottom-end":n.default.bottomEnd,"bottom-start":n.default.bottomStart},d={rectangle:n.default.overlapRectangle,circle:n.default.overlapCircle};function f(e,t=99){return e>t?`${t}+`:String(e)}var p=e=>typeof e==`number`?`${e}px`:e,m=({variant:r=`soft`,tone:a=`neutral`,size:u=`md`,radius:d=`pill`,count:p,max:m=99,showZero:h=!1,label:g,startIcon:_,dot:v=!1,caps:y=!1,className:b,children:x,...S})=>{let C=p!==void 0;if(C&&p===0&&!h)return null;let w=C?f(p,m):x,T=g!==void 0&&g!==``;return(0,i.jsxs)(`span`,{...S,className:e.cx(n.default.root,o[r],s[a],c[u],l[d],C&&n.default.count,y&&n.default.caps,b),children:[(0,i.jsxs)(`span`,{className:n.default.content,"aria-hidden":T?!0:void 0,children:[v&&(0,i.jsx)(`span`,{className:n.default.dot,"aria-hidden":`true`}),_!=null&&(0,i.jsx)(`span`,{className:n.default.icon,"aria-hidden":`true`,children:_}),w!=null&&w!==``&&(0,i.jsx)(`span`,{className:n.default.label,children:w})]}),T&&(0,i.jsx)(t.VisuallyHidden,{children:g})]})},h=({children:l,variant:m=`solid`,tone:h=`accent`,size:g=`md`,count:_,max:v=99,showZero:y=!1,label:b,dot:x=!1,content:S,placement:C=`top-end`,overlap:w=`rectangle`,offset:T,invisible:E=!1,badgeClassName:D,className:O,style:k,...A})=>{let j=!x&&_!==void 0,M=E||j&&_===0&&!y,N=x?null:j?f(_,v):S,P=b!==void 0&&b!==``&&!M,F=!M&&(x||N!=null)&&(b===void 0||b===``);(0,r.useEffect)(()=>{a&&F&&console.warn('[BadgeAnchor] Pass a `label` (e.g. "3 unread messages") so screen readers get the badge\'s meaning; the visual dot or count is hidden from them.')},[F]);let[I,L]=T===void 0?[void 0,void 0]:Array.isArray(T)?T:[T,T],R=T===void 0?k:{"--badge-offset-x":p(I),"--badge-offset-y":p(L),...k};return(0,i.jsxs)(`span`,{...A,className:e.cx(n.default.anchor,O),style:R,children:[l,(0,i.jsxs)(`span`,{className:e.cx(n.default.root,n.default.anchored,o[m],s[h],c[g],n.default.radiusPill,u[C],d[w],x?n.default.anchoredDot:n.default.count,M&&n.default.invisible,D),"data-state":M?`hidden`:`visible`,children:[!x&&(0,i.jsx)(`span`,{className:n.default.content,"aria-hidden":`true`,children:N!=null&&N!==``&&(0,i.jsx)(`span`,{className:n.default.label,children:N})}),P&&(0,i.jsx)(t.VisuallyHidden,{children:b})]})]})};exports.Badge=m,exports.BadgeAnchor=h,exports.formatBadgeCount=f;

package/dist/components/data-display/Badge/Badge.d.ts

@@ -1,7 +1,12 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { Radius, Size, Tone } from '../../../types/common';
-/** Visual style of a badge. Semantic color is set separately with `tone`. */
-export type BadgeVariant = "solid" | "soft" | "outline";
+/**
+ * Visual style of a badge. Semantic color is set separately with `tone`.
+ * `inverse` swaps the solid colors (a `--color-on-{tone}` fill with
+ * `--color-{tone}` text), for badges on a solid `tone` surface, such as a
+ * solid Navbar or a Banner strip.
+ */
+export type BadgeVariant = "solid" | "soft" | "outline" | "inverse";
 /** Corner of the anchor a `BadgeAnchor` badge sits on. Logical: `end` flips in RTL. */
 export type BadgePlacement = "top-end" | "top-start" | "bottom-end" | "bottom-start";
 /**

package/dist/components/data-display/Badge/Badge.mjs

@@ -7,7 +7,8 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 var o = globalThis.process?.env?.NODE_ENV !== "production", s = {
 	solid: n.solid,
 	soft: n.soft,
-	outline: n.outline
+	outline: n.outline,
+	inverse: n.inverse
 }, c = {
 	neutral: n.neutral,
 	primary: n.primary,

package/dist/components/data-display/Badge/Badge.module.css.cjs.js

@@ -1 +1 @@
-var e=`_root_fn6ui_21`,t=`_content_fn6ui_93`,n=`_label_fn6ui_105`,r=`_icon_fn6ui_113`,i=`_dot_fn6ui_139`,a=`_solid_fn6ui_161`,o=`_soft_fn6ui_171`,s=`_outline_fn6ui_181`,c=`_neutral_fn6ui_197`,l=`_primary_fn6ui_213`,u=`_accent_fn6ui_229`,d=`_success_fn6ui_245`,f=`_warning_fn6ui_261`,p=`_danger_fn6ui_277`,m=`_info_fn6ui_293`,h=`_sm_fn6ui_313`,g=`_md_fn6ui_331`,_=`_lg_fn6ui_349`,v=`_radiusNone_fn6ui_371`,y=`_radiusXs_fn6ui_377`,b=`_radiusSm_fn6ui_383`,x=`_radiusMd_fn6ui_389`,S=`_radiusLg_fn6ui_395`,C=`_radiusXl_fn6ui_401`,w=`_radius2xl_fn6ui_407`,T=`_radiusPill_fn6ui_413`,E=`_count_fn6ui_427`,D=`_caps_fn6ui_441`,O=`_anchor_fn6ui_461`,k=`_anchored_fn6ui_475`,A=`_anchoredDot_fn6ui_557`,j=`_overlapRectangle_fn6ui_623`,M=`_overlapCircle_fn6ui_629`,N=`_topEnd_fn6ui_637`,P=`_topStart_fn6ui_649`,F=`_bottomEnd_fn6ui_661`,I=`_bottomStart_fn6ui_673`,L=`_invisible_fn6ui_709`,R={root:e,content:t,label:n,icon:r,dot:i,solid:a,soft:o,outline:s,neutral:c,primary:l,accent:u,success:d,warning:f,danger:p,info:m,sm:h,md:g,lg:_,radiusNone:v,radiusXs:y,radiusSm:b,radiusMd:x,radiusLg:S,radiusXl:C,radius2xl:w,radiusPill:T,count:E,caps:D,anchor:O,anchored:k,anchoredDot:A,overlapRectangle:j,overlapCircle:M,topEnd:N,topStart:P,bottomEnd:F,bottomStart:I,invisible:L};exports.accent=u,exports.anchor=O,exports.anchored=k,exports.anchoredDot=A,exports.bottomEnd=F,exports.bottomStart=I,exports.caps=D,exports.content=t,exports.count=E,exports.danger=p,exports.default=R,exports.dot=i,exports.icon=r,exports.info=m,exports.invisible=L,exports.label=n,exports.lg=_,exports.md=g,exports.neutral=c,exports.outline=s,exports.overlapCircle=M,exports.overlapRectangle=j,exports.primary=l,exports.radius2xl=w,exports.radiusLg=S,exports.radiusMd=x,exports.radiusNone=v,exports.radiusPill=T,exports.radiusSm=b,exports.radiusXl=C,exports.radiusXs=y,exports.root=e,exports.sm=h,exports.soft=o,exports.solid=a,exports.success=d,exports.topEnd=N,exports.topStart=P,exports.warning=f;
+var e=`_root_54g55_23`,t=`_content_54g55_95`,n=`_label_54g55_107`,r=`_icon_54g55_115`,i=`_dot_54g55_141`,a=`_solid_54g55_163`,o=`_soft_54g55_173`,s=`_outline_54g55_183`,c=`_inverse_54g55_199`,l=`_neutral_54g55_213`,u=`_primary_54g55_229`,d=`_accent_54g55_245`,f=`_success_54g55_261`,p=`_warning_54g55_277`,m=`_danger_54g55_293`,h=`_info_54g55_309`,g=`_sm_54g55_329`,_=`_md_54g55_347`,v=`_lg_54g55_365`,y=`_radiusNone_54g55_387`,b=`_radiusXs_54g55_393`,x=`_radiusSm_54g55_399`,S=`_radiusMd_54g55_405`,C=`_radiusLg_54g55_411`,w=`_radiusXl_54g55_417`,T=`_radius2xl_54g55_423`,E=`_radiusPill_54g55_429`,D=`_count_54g55_443`,O=`_caps_54g55_457`,k=`_anchor_54g55_477`,A=`_anchored_54g55_491`,j=`_anchoredDot_54g55_573`,M=`_overlapRectangle_54g55_647`,N=`_overlapCircle_54g55_653`,P=`_topEnd_54g55_661`,F=`_topStart_54g55_673`,I=`_bottomEnd_54g55_685`,L=`_bottomStart_54g55_697`,R=`_invisible_54g55_733`,z={root:e,content:t,label:n,icon:r,dot:i,solid:a,soft:o,outline:s,inverse:c,neutral:l,primary:u,accent:d,success:f,warning:p,danger:m,info:h,sm:g,md:_,lg:v,radiusNone:y,radiusXs:b,radiusSm:x,radiusMd:S,radiusLg:C,radiusXl:w,radius2xl:T,radiusPill:E,count:D,caps:O,anchor:k,anchored:A,anchoredDot:j,overlapRectangle:M,overlapCircle:N,topEnd:P,topStart:F,bottomEnd:I,bottomStart:L,invisible:R};exports.accent=d,exports.anchor=k,exports.anchored=A,exports.anchoredDot=j,exports.bottomEnd=I,exports.bottomStart=L,exports.caps=O,exports.content=t,exports.count=D,exports.danger=m,exports.default=z,exports.dot=i,exports.icon=r,exports.info=h,exports.inverse=c,exports.invisible=R,exports.label=n,exports.lg=v,exports.md=_,exports.neutral=l,exports.outline=s,exports.overlapCircle=N,exports.overlapRectangle=M,exports.primary=u,exports.radius2xl=T,exports.radiusLg=C,exports.radiusMd=S,exports.radiusNone=y,exports.radiusPill=E,exports.radiusSm=x,exports.radiusXl=w,exports.radiusXs=b,exports.root=e,exports.sm=g,exports.soft=o,exports.solid=a,exports.success=f,exports.topEnd=P,exports.topStart=F,exports.warning=p;

package/dist/components/data-display/Badge/Badge.module.css.mjs

@@ -1,5 +1,5 @@
 //#region src/components/data-display/Badge/Badge.module.css
-var e = "_root_fn6ui_21", t = "_content_fn6ui_93", n = "_label_fn6ui_105", r = "_icon_fn6ui_113", i = "_dot_fn6ui_139", a = "_solid_fn6ui_161", o = "_soft_fn6ui_171", s = "_outline_fn6ui_181", c = "_neutral_fn6ui_197", l = "_primary_fn6ui_213", u = "_accent_fn6ui_229", d = "_success_fn6ui_245", f = "_warning_fn6ui_261", p = "_danger_fn6ui_277", m = "_info_fn6ui_293", h = "_sm_fn6ui_313", g = "_md_fn6ui_331", _ = "_lg_fn6ui_349", v = "_radiusNone_fn6ui_371", y = "_radiusXs_fn6ui_377", b = "_radiusSm_fn6ui_383", x = "_radiusMd_fn6ui_389", S = "_radiusLg_fn6ui_395", C = "_radiusXl_fn6ui_401", w = "_radius2xl_fn6ui_407", T = "_radiusPill_fn6ui_413", E = "_count_fn6ui_427", D = "_caps_fn6ui_441", O = "_anchor_fn6ui_461", k = "_anchored_fn6ui_475", A = "_anchoredDot_fn6ui_557", j = "_overlapRectangle_fn6ui_623", M = "_overlapCircle_fn6ui_629", N = "_topEnd_fn6ui_637", P = "_topStart_fn6ui_649", F = "_bottomEnd_fn6ui_661", I = "_bottomStart_fn6ui_673", L = "_invisible_fn6ui_709", R = {
+var e = "_root_54g55_23", t = "_content_54g55_95", n = "_label_54g55_107", r = "_icon_54g55_115", i = "_dot_54g55_141", a = "_solid_54g55_163", o = "_soft_54g55_173", s = "_outline_54g55_183", c = "_inverse_54g55_199", l = "_neutral_54g55_213", u = "_primary_54g55_229", d = "_accent_54g55_245", f = "_success_54g55_261", p = "_warning_54g55_277", m = "_danger_54g55_293", h = "_info_54g55_309", g = "_sm_54g55_329", _ = "_md_54g55_347", v = "_lg_54g55_365", y = "_radiusNone_54g55_387", b = "_radiusXs_54g55_393", x = "_radiusSm_54g55_399", S = "_radiusMd_54g55_405", C = "_radiusLg_54g55_411", w = "_radiusXl_54g55_417", T = "_radius2xl_54g55_423", E = "_radiusPill_54g55_429", D = "_count_54g55_443", O = "_caps_54g55_457", k = "_anchor_54g55_477", A = "_anchored_54g55_491", j = "_anchoredDot_54g55_573", M = "_overlapRectangle_54g55_647", N = "_overlapCircle_54g55_653", P = "_topEnd_54g55_661", F = "_topStart_54g55_673", I = "_bottomEnd_54g55_685", L = "_bottomStart_54g55_697", R = "_invisible_54g55_733", z = {
 	root: e,
 	content: t,
 	label: n,
@@ -8,36 +8,37 @@ var e = "_root_fn6ui_21", t = "_content_fn6ui_93", n = "_label_fn6ui_105", r = "
 	solid: a,
 	soft: o,
 	outline: s,
-	neutral: c,
-	primary: l,
-	accent: u,
-	success: d,
-	warning: f,
-	danger: p,
-	info: m,
-	sm: h,
-	md: g,
-	lg: _,
-	radiusNone: v,
-	radiusXs: y,
-	radiusSm: b,
-	radiusMd: x,
-	radiusLg: S,
-	radiusXl: C,
-	radius2xl: w,
-	radiusPill: T,
-	count: E,
-	caps: D,
-	anchor: O,
-	anchored: k,
-	anchoredDot: A,
-	overlapRectangle: j,
-	overlapCircle: M,
-	topEnd: N,
-	topStart: P,
-	bottomEnd: F,
-	bottomStart: I,
-	invisible: L
+	inverse: c,
+	neutral: l,
+	primary: u,
+	accent: d,
+	success: f,
+	warning: p,
+	danger: m,
+	info: h,
+	sm: g,
+	md: _,
+	lg: v,
+	radiusNone: y,
+	radiusXs: b,
+	radiusSm: x,
+	radiusMd: S,
+	radiusLg: C,
+	radiusXl: w,
+	radius2xl: T,
+	radiusPill: E,
+	count: D,
+	caps: O,
+	anchor: k,
+	anchored: A,
+	anchoredDot: j,
+	overlapRectangle: M,
+	overlapCircle: N,
+	topEnd: P,
+	topStart: F,
+	bottomEnd: I,
+	bottomStart: L,
+	invisible: R
 };
 //#endregion
-export { u as accent, O as anchor, k as anchored, A as anchoredDot, F as bottomEnd, I as bottomStart, D as caps, t as content, E as count, p as danger, R as default, i as dot, r as icon, m as info, L as invisible, n as label, _ as lg, g as md, c as neutral, s as outline, M as overlapCircle, j as overlapRectangle, l as primary, w as radius2xl, S as radiusLg, x as radiusMd, v as radiusNone, T as radiusPill, b as radiusSm, C as radiusXl, y as radiusXs, e as root, h as sm, o as soft, a as solid, d as success, N as topEnd, P as topStart, f as warning };
+export { d as accent, k as anchor, A as anchored, j as anchoredDot, I as bottomEnd, L as bottomStart, O as caps, t as content, D as count, m as danger, z as default, i as dot, r as icon, h as info, c as inverse, R as invisible, n as label, v as lg, _ as md, l as neutral, s as outline, N as overlapCircle, M as overlapRectangle, u as primary, T as radius2xl, C as radiusLg, S as radiusMd, y as radiusNone, E as radiusPill, x as radiusSm, w as radiusXl, b as radiusXs, e as root, g as sm, o as soft, a as solid, f as success, P as topEnd, F as topStart, p as warning };

package/dist/components/navigation/Navbar/Navbar.cjs.js

@@ -1 +1 @@
-const e=require("../../../types/common.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../hooks/useMergedRef.cjs.js"),i=require("../../../utils/responsive.cjs.js"),a=require("../../../utils/cx.cjs.js"),o=require("../../primitives/Button/Button.cjs.js"),s=require("../../primitives/Icon/icons.cjs.js"),c=require("../../layout/Container/Container.cjs.js"),l=require("../../overlays/Drawer/Drawer.cjs.js"),u=require("./Navbar.module.css.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var p={accent:u.default.activeAccent,primary:u.default.activePrimary,neutral:u.default.activeNeutral},m={surface:u.default.surface,transparent:u.default.transparent,solid:u.default.solid},h={sm:u.default.sm,md:u.default.md,lg:u.default.lg},g={static:u.default.static,sticky:u.default.sticky,fixed:u.default.fixed},_={sm:u.default.collapseSm,md:u.default.collapseMd,lg:u.default.collapseLg},v=(0,d.createContext)(null);function y(e){let t=(0,d.useContext)(v);if(!t)throw Error(`${e} must be used inside <Navbar>.`);return t}var b=(0,d.createContext)(`bar`),x=(0,d.createContext)(!1);function S(e){for(let t=e.parentElement;t&&t!==document.body;t=t.parentElement){let{overflowY:e}=getComputedStyle(t);if(e===`auto`||e===`scroll`||e===`overlay`)return t}return document.documentElement}var C=({children:i,variant:l=`surface`,size:p=`md`,position:y=`sticky`,reserveScrollPadding:b=!0,bordered:x=!1,elevated:C=!1,elevateOnScroll:w=!1,contained:T=!0,maxWidth:E=`xl`,collapseBelow:D=`md`,open:O,defaultOpen:k=!1,onOpenChange:A,menuLabel:j,menuTitle:ee,menuSide:M=`end`,activeTone:N=`accent`,className:P,ref:F,...I})=>{let L=n.useMessages(),R=j??L.navbar.openMenu,z=ee??L.navbar.menu,B=(0,d.useRef)(null),V=r.useMergedRef(B,F);(0,d.useEffect)(()=>{let e=B.current;if(!e||y===`static`||!b)return;let t=y===`fixed`?document.documentElement:S(e),n=t.style.scrollPaddingTop,r=()=>{t.style.scrollPaddingTop=`${e.offsetHeight}px`};r();let i=typeof ResizeObserver>`u`?null:new ResizeObserver(r);return i?.observe(e),()=>{i?.disconnect(),t.style.scrollPaddingTop=n}},[y,b]);let[H,U]=t.useControllableState({value:O,defaultValue:k,onChange:A}),W=`${(0,d.useId)()}-menu`,G=(0,d.useRef)(null),[K,q]=(0,d.useState)(0),[J,Y]=(0,d.useState)(!1),X=(0,d.useCallback)(()=>(q(e=>e+1),()=>q(e=>e-1)),[]),Z=(0,d.useCallback)(e=>U(e),[U]),Q=(0,d.useRef)(!1);(0,d.useEffect)(()=>{if(!H||typeof window>`u`||!window.matchMedia)return;let t=window.matchMedia(`(min-width: ${e.breakpoints[D]}px)`),n=()=>{t.matches&&(Q.current=!0,Z(!1))};return n(),t.addEventListener(`change`,n),()=>t.removeEventListener(`change`,n)},[H,D,Z]),(0,d.useEffect)(()=>{if(H||!Q.current)return;Q.current=!1;let e=document.activeElement;(!e||e===document.body||document.getElementById(W)?.contains(e))&&G.current?.closest(`header`)?.querySelector(`nav a[href], nav button:not([disabled])`)?.focus()},[H,W]),(0,d.useEffect)(()=>{if(!w||typeof window>`u`)return;let e=0,t=()=>{e=0,Y(window.scrollY>0)},n=()=>{e||=window.requestAnimationFrame(t)};return t(),window.addEventListener(`scroll`,n,{passive:!0}),()=>{window.removeEventListener(`scroll`,n),e&&window.cancelAnimationFrame(e)}},[w]);let te=(0,d.useMemo)(()=>({open:H,setOpen:Z,menuId:W,menuTitle:z,menuSide:M,toggleRef:G,registerNav:X,activeTone:N}),[H,Z,W,z,M,X,N]),$=w&&J,ne=K>0;return(0,f.jsx)(v.Provider,{value:te,children:(0,f.jsx)(`header`,{"data-variant":l,...I,ref:V,className:a.cx(u.default.root,m[l],h[p],g[y],_[D],x&&u.default.bordered,(C||$)&&u.default.elevated,$&&u.default.scrolled,P),children:(0,f.jsxs)(c.Container,{size:E,fluid:!T,gutter:`responsive`,className:u.default.inner,children:[i,ne&&(0,f.jsx)(o.IconButton,{ref:G,"aria-label":R,"aria-haspopup":`dialog`,"aria-expanded":H,"aria-controls":H?W:void 0,variant:l===`solid`?`solid`:`ghost`,tone:l===`solid`?`primary`:`neutral`,size:p,className:u.default.toggle,onClick:()=>Z(!H),children:(0,f.jsx)(s.MenuIcon,{})})]})})})};C.displayName=`Navbar`;function w(e){let{as:t,className:n,children:r,...i}=e,o=t!==void 0||i.href!==void 0;return(0,f.jsx)(t??(o?`a`:`div`),{...i,className:a.cx(u.default.brand,o&&u.default.brandLink,n),children:r})}w.displayName=`Navbar.Brand`;var T={start:u.default.alignStart,center:u.default.alignCenter,end:u.default.alignEnd},E=i.responsiveClasses(u.default,`navGap`),D=({children:e,align:t=`start`,gap:r,className:o,style:s,"aria-label":c,"aria-labelledby":p,...m})=>{let h=n.useMessages(),g=c??h.navbar.nav,{open:_,setOpen:v,menuId:x,menuTitle:S,menuSide:C,toggleRef:w,registerNav:D}=y(`Navbar.Nav`);(0,d.useLayoutEffect)(()=>D(),[D]);let O={},k=[];return i.responsiveVars(`navbar-nav-gap`,r,e=>`var(--space-${e})`,E,O,k),(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(`nav`,{"aria-label":p?void 0:g,"aria-labelledby":p,...m,className:a.cx(u.default.nav,T[t],...k,o),style:{...O,...s},children:(0,f.jsx)(b.Provider,{value:`bar`,children:(0,f.jsx)(`ul`,{className:u.default.list,children:e})})}),(0,f.jsx)(l.Drawer,{open:_,onOpenChange:v,side:C,size:`sm`,finalFocusRef:w,children:(0,f.jsxs)(l.Drawer.Content,{id:x,children:[(0,f.jsx)(l.Drawer.Header,{children:(0,f.jsx)(l.Drawer.Title,{children:S})}),(0,f.jsx)(l.Drawer.Body,{children:(0,f.jsx)(`nav`,{"aria-label":p?void 0:g,"aria-labelledby":p,children:(0,f.jsx)(b.Provider,{value:`drawer`,children:(0,f.jsx)(`ul`,{className:u.default.drawerList,children:e})})})})]})})]})};D.displayName=`Navbar.Nav`;var O=({className:e,children:t,showIn:n=`both`,ref:r,...i})=>{let o=(0,d.useContext)(b);return n!==`both`&&n!==o?null:(0,f.jsx)(`li`,{...i,ref:o===`drawer`?void 0:r,className:a.cx(u.default.item,o===`drawer`&&u.default.itemDrawer,e),children:(0,f.jsx)(x.Provider,{value:!0,children:t})})};O.displayName=`Navbar.Item`;function k(e){let{as:t,active:n=!1,icon:r,className:i,children:o,onClick:s,"aria-current":c,ref:l,...m}=e,h=(0,d.useContext)(b),g=(0,d.useContext)(x),_=(0,d.useContext)(v),y=t??`a`,S=e=>{s?.(e),h===`drawer`&&_?.setOpen(!1)},C=(0,f.jsxs)(y,{...m,ref:h===`drawer`?void 0:l,"aria-current":n?`page`:c,onClick:S,className:a.cx(u.default.link,h===`drawer`?u.default.linkDrawer:u.default.linkBar,n&&u.default.active,n&&p[_?.activeTone??`accent`],i),children:[r!=null&&(0,f.jsx)(`span`,{className:u.default.linkIcon,"aria-hidden":`true`,children:r}),(0,f.jsx)(`span`,{className:u.default.linkLabel,children:o})]});return g?C:(0,f.jsx)(`li`,{className:a.cx(u.default.item,h===`drawer`&&u.default.itemDrawer),children:C})}k.displayName=`Navbar.Link`;var A=({className:e,children:t,...n})=>(0,f.jsx)(`div`,{...n,className:a.cx(u.default.actions,e),children:t});A.displayName=`Navbar.Actions`;var j=Object.assign(C,{Brand:w,Nav:D,Item:O,Link:k,Actions:A});exports.Navbar=j,exports.NavbarActions=A,exports.NavbarBrand=w,exports.NavbarItem=O,exports.NavbarLink=k,exports.NavbarNav=D;
+const e=require("../../../types/common.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../../hooks/useDismiss.cjs.js"),r=require("../../../hooks/useFloatingPosition.cjs.js"),i=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),a=require("../../../hooks/useMergedRef.cjs.js"),o=require("../../../utils/responsive.cjs.js"),s=require("../../../utils/cx.cjs.js"),c=require("../../primitives/Button/Button.cjs.js"),l=require("../../primitives/Icon/icons.cjs.js"),u=require("../../layout/Container/Container.cjs.js"),d=require("../../data-display/Badge/Badge.cjs.js"),f=require("../../overlays/Drawer/Drawer.cjs.js"),p=require("./Navbar.module.css.cjs.js");let m=require("react"),h=require("react/jsx-runtime");var g={accent:p.default.activeAccent,primary:p.default.activePrimary,neutral:p.default.activeNeutral},_={surface:p.default.surface,transparent:p.default.transparent,solid:p.default.solid},v={sm:p.default.sm,md:p.default.md,lg:p.default.lg},y={static:p.default.static,sticky:p.default.sticky,fixed:p.default.fixed},b={sm:p.default.collapseSm,md:p.default.collapseMd,lg:p.default.collapseLg},x=(0,m.createContext)(null);function S(e){let t=(0,m.useContext)(x);if(!t)throw Error(`${e} must be used inside <Navbar>.`);return t}var C=(0,m.createContext)(`bar`),w=(0,m.createContext)(null),T=(0,m.createContext)(!1);function E(e){for(let t=e.parentElement;t&&t!==document.body;t=t.parentElement){let{overflowY:e}=getComputedStyle(t);if(e===`auto`||e===`scroll`||e===`overlay`)return t}return document.documentElement}var D=({children:n,variant:r=`surface`,size:o=`md`,position:d=`sticky`,reserveScrollPadding:f=!0,bordered:g=!1,elevated:S=!1,elevateOnScroll:C=!1,contained:w=!0,maxWidth:T=`xl`,collapseBelow:D=`md`,open:O,defaultOpen:k=!1,onOpenChange:A,menuLabel:j,menuTitle:M,menuSide:N=`end`,activeTone:P=`accent`,className:F,ref:I,...L})=>{let R=i.useMessages(),z=j??R.navbar.openMenu,B=M??R.navbar.menu,V=(0,m.useRef)(null),H=a.useMergedRef(V,I);(0,m.useEffect)(()=>{let e=V.current;if(!e||d===`static`||!f)return;let t=d===`fixed`?document.documentElement:E(e),n=t.style.scrollPaddingTop,r=()=>{t.style.scrollPaddingTop=`${e.offsetHeight}px`};r();let i=typeof ResizeObserver>`u`?null:new ResizeObserver(r);return i?.observe(e),()=>{i?.disconnect(),t.style.scrollPaddingTop=n}},[d,f]);let[U,W]=t.useControllableState({value:O,defaultValue:k,onChange:A}),G=`${(0,m.useId)()}-menu`,K=(0,m.useRef)(null),[q,J]=(0,m.useState)(0),[ee,te]=(0,m.useState)(!1),[Y,ne]=(0,m.useState)(null),X=(0,m.useCallback)(()=>(J(e=>e+1),()=>J(e=>e-1)),[]),Z=(0,m.useCallback)(e=>W(e),[W]),Q=(0,m.useRef)(!1);(0,m.useEffect)(()=>{if(!U||typeof window>`u`||!window.matchMedia)return;let t=window.matchMedia(`(min-width: ${e.breakpoints[D]}px)`),n=()=>{t.matches&&(Q.current=!0,Z(!1))};return n(),t.addEventListener(`change`,n),()=>t.removeEventListener(`change`,n)},[U,D,Z]),(0,m.useEffect)(()=>{if(U||!Q.current)return;Q.current=!1;let e=document.activeElement;(!e||e===document.body||document.getElementById(G)?.contains(e))&&K.current?.closest(`header`)?.querySelector(`nav a[href], nav button:not([disabled])`)?.focus()},[U,G]),(0,m.useEffect)(()=>{if(!C||typeof window>`u`)return;let e=0,t=()=>{e=0,te(window.scrollY>0)},n=()=>{e||=window.requestAnimationFrame(t)};return t(),window.addEventListener(`scroll`,n,{passive:!0}),()=>{window.removeEventListener(`scroll`,n),e&&window.cancelAnimationFrame(e)}},[C]);let re=(0,m.useMemo)(()=>({open:U,setOpen:Z,menuId:G,menuTitle:B,menuSide:N,toggleRef:K,registerNav:X,activeTone:P,variant:r,openGroup:Y,setOpenGroup:ne}),[U,Z,G,B,N,X,P,r,Y]),$=C&&ee,ie=q>0;return(0,h.jsx)(x.Provider,{value:re,children:(0,h.jsx)(`header`,{"data-variant":r,...L,ref:H,className:s.cx(p.default.root,_[r],v[o],y[d],b[D],g&&p.default.bordered,(S||$)&&p.default.elevated,$&&p.default.scrolled,F),children:(0,h.jsxs)(u.Container,{size:T,fluid:!w,gutter:`responsive`,className:p.default.inner,children:[n,ie&&(0,h.jsx)(c.IconButton,{ref:K,"aria-label":z,"aria-haspopup":`dialog`,"aria-expanded":U,"aria-controls":U?G:void 0,variant:r===`solid`?`solid`:`ghost`,tone:r===`solid`?`primary`:`neutral`,size:o,className:p.default.toggle,onClick:()=>Z(!U),children:(0,h.jsx)(l.MenuIcon,{})})]})})})};D.displayName=`Navbar`;function O(e){let{as:t,className:n,children:r,...i}=e,a=t!==void 0||i.href!==void 0;return(0,h.jsx)(t??(a?`a`:`div`),{...i,className:s.cx(p.default.brand,a&&p.default.brandLink,n),children:r})}O.displayName=`Navbar.Brand`;var k={start:p.default.alignStart,center:p.default.alignCenter,end:p.default.alignEnd},A=o.responsiveClasses(p.default,`navGap`),j=({children:e,align:t=`start`,gap:n,className:r,style:a,"aria-label":c,"aria-labelledby":l,...u})=>{let d=i.useMessages(),g=c??d.navbar.nav,{open:_,setOpen:v,menuId:y,menuTitle:b,menuSide:x,toggleRef:w,registerNav:T}=S(`Navbar.Nav`);(0,m.useLayoutEffect)(()=>T(),[T]);let E={},D=[];return o.responsiveVars(`navbar-nav-gap`,n,e=>`var(--space-${e})`,A,E,D),(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(`nav`,{"aria-label":l?void 0:g,"aria-labelledby":l,...u,className:s.cx(p.default.nav,k[t],...D,r),style:{...E,...a},children:(0,h.jsx)(C.Provider,{value:`bar`,children:(0,h.jsx)(`ul`,{className:p.default.list,children:e})})}),(0,h.jsx)(f.Drawer,{open:_,onOpenChange:v,side:x,size:`sm`,finalFocusRef:w,children:(0,h.jsxs)(f.Drawer.Content,{id:y,children:[(0,h.jsx)(f.Drawer.Header,{children:(0,h.jsx)(f.Drawer.Title,{children:b})}),(0,h.jsx)(f.Drawer.Body,{children:(0,h.jsx)(`nav`,{"aria-label":l?void 0:g,"aria-labelledby":l,children:(0,h.jsx)(C.Provider,{value:`drawer`,children:(0,h.jsx)(`ul`,{className:p.default.drawerList,children:e})})})})]})})]})};j.displayName=`Navbar.Nav`;var M=({className:e,children:t,showIn:n=`both`,ref:r,...i})=>{let a=(0,m.useContext)(C);return n!==`both`&&n!==a?null:(0,h.jsx)(`li`,{...i,ref:a===`drawer`?void 0:r,className:s.cx(p.default.item,a===`drawer`&&p.default.itemDrawer,e),children:(0,h.jsx)(T.Provider,{value:!0,children:t})})};M.displayName=`Navbar.Item`;var N=e=>e!==void 0&&e!==``&&e!==0;function P(e,t,n,r){if(!N(e))return null;let i=r&&n===void 0,a={variant:i?`inverse`:`solid`,tone:i?`primary`:n??`accent`,size:`sm`,label:t};return(0,h.jsxs)(h.Fragment,{children:[` `,(0,h.jsx)(`span`,{className:p.default.linkBadge,children:typeof e==`number`?(0,h.jsx)(d.Badge,{...a,count:e}):(0,h.jsx)(d.Badge,{...a,children:e})})]})}var F={bar:p.default.linkBar,drawer:p.default.linkDrawer,panel:p.default.linkPanel};function I(e){let{as:t,active:n=!1,icon:r,badge:i,badgeLabel:a,badgeTone:o,className:c,children:l,onClick:u,"aria-current":d,ref:f,..._}=e,v=(0,m.useContext)(C),y=(0,m.useContext)(T),b=(0,m.useContext)(x),S=(0,m.useContext)(w),E=t??`a`,D=e=>{u?.(e),v===`drawer`&&b?.setOpen(!1),v===`panel`&&S?.()},O=(0,h.jsxs)(E,{..._,ref:v===`drawer`?void 0:f,"aria-current":n?`page`:d,onClick:D,className:s.cx(p.default.link,F[v],n&&p.default.active,n&&g[b?.activeTone??`accent`],c),children:[r!=null&&(0,h.jsx)(`span`,{className:p.default.linkIcon,"aria-hidden":`true`,children:r}),(0,h.jsx)(`span`,{className:p.default.linkLabel,children:l}),P(i,a,o,v===`bar`&&b?.variant===`solid`)]});return y?O:(0,h.jsx)(`li`,{className:s.cx(p.default.item,v!==`bar`&&p.default.itemDrawer),children:O})}I.displayName=`Navbar.Link`;var L=e=>e?`bottom-end`:`bottom-start`,R=({label:e,icon:i,children:a,active:o=!1,badge:c,badgeLabel:u,badgeTone:d,open:f,defaultOpen:_=!1,onOpenChange:v,disabled:y=!1,className:b,ref:x,...T})=>{let E=(0,m.useContext)(C),D=S(`Navbar.Group`),O=E===`bar`,k=(0,m.useId)(),A=`${k}-list`,j=(0,m.useRef)(null),M=(0,m.useRef)(null),N=(0,m.useRef)(!1),[F,I]=t.useControllableState({value:O?f:void 0,defaultValue:O?_:_||o,onChange:O?v:void 0}),{openGroup:R,setOpenGroup:z}=D;(0,m.useEffect)(()=>{O&&F&&z(k)},[O,F,k,z]),(0,m.useEffect)(()=>{O&&R!==null&&R!==k&&I(!1)},[O,R,k,I]);let B=(0,m.useCallback)(e=>{I(!1),e&&j.current?.focus()},[I]);n.useDismiss([j,M],{active:O&&F,onDismiss:e=>B(e.type===`keydown`)});let[V,H]=(0,m.useState)(!1);(0,m.useLayoutEffect)(()=>{O&&F&&j.current&&H(getComputedStyle(j.current).direction===`rtl`)},[O,F]);let U=r.useFloatingPosition(j,M,{open:O&&F,placement:L(V),offset:4}),W=(0,h.jsxs)(`button`,{ref:j,type:`button`,disabled:y,"aria-expanded":F,"aria-controls":F?A:void 0,onClick:()=>I(!F),className:s.cx(p.default.link,p.default.groupButton,O?p.default.linkBar:p.default.linkDrawer,F&&p.default.groupOpen,o&&p.default.active,o&&g[D.activeTone]),children:[i!=null&&(0,h.jsx)(`span`,{className:p.default.linkIcon,"aria-hidden":`true`,children:i}),(0,h.jsx)(`span`,{className:p.default.linkLabel,children:e}),P(c,u,d,O&&D.variant===`solid`),(0,h.jsx)(`span`,{className:p.default.chevron,"aria-hidden":`true`,children:(0,h.jsx)(l.ChevronDownIcon,{})})]});return O?(0,h.jsxs)(`li`,{...T,ref:x,className:s.cx(p.default.item,b),onPointerDown:()=>{N.current=!0,window.setTimeout(()=>{N.current=!1},0)},onBlur:e=>{let t=e.relatedTarget,n=N.current;N.current=!1,F&&(t?!e.currentTarget.contains(t):!n)&&I(!1)},children:[W,F&&(0,h.jsx)(`div`,{ref:M,className:p.default.panelPositioner,style:U.style,children:(0,h.jsx)(C.Provider,{value:`panel`,children:(0,h.jsx)(w.Provider,{value:()=>B(!1),children:(0,h.jsx)(`ul`,{id:A,className:p.default.panel,children:a})})})})]}):(0,h.jsxs)(`li`,{...T,className:s.cx(p.default.item,p.default.itemDrawer,b),children:[W,F&&(0,h.jsx)(`ul`,{id:A,className:p.default.drawerSubList,children:a})]})};R.displayName=`Navbar.Group`;var z=({className:e,children:t,...n})=>(0,h.jsx)(`div`,{...n,className:s.cx(p.default.actions,e),children:t});z.displayName=`Navbar.Actions`;var B=Object.assign(D,{Brand:O,Nav:j,Item:M,Link:I,Group:R,Actions:z});exports.Navbar=B,exports.NavbarActions=z,exports.NavbarBrand=O,exports.NavbarGroup=R,exports.NavbarItem=M,exports.NavbarLink=I,exports.NavbarNav=j;

package/dist/components/navigation/Navbar/Navbar.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
-import { Responsive, Size, Space } from '../../../types/common';
+import { Responsive, Size, Space, Tone } from '../../../types/common';
 import { ContainerSize } from '../../layout/Container';
 /**
  * Visual style of the bar.
@@ -178,9 +178,26 @@ interface NavbarLinkOwnProps<C extends ElementType> {
     active?: boolean;
     /** Decorative icon before the label. Hidden from assistive technology. */
     icon?: ReactNode;
+    /**
+     * A count (rendered with `Badge` `count`, capped at 99+, hidden at 0) or a
+     * short text such as "New", after the label. It's part of the link's name
+     * ("Messages 3"), in the bar and the mobile menu.
+     */
+    badge?: NavbarBadgeValue;
+    /** Screen-reader text for the badge, e.g. "3 unread messages". Replaces the visible badge text in the accessible name. */
+    badgeLabel?: string;
+    /**
+     * Badge color. By default `accent`, except in the `solid` bar, where the
+     * badge takes the bar's own colors swapped (a `Badge` `variant="inverse"`)
+     * so it stands out from the bar in both themes. Setting it always gives a
+     * solid badge in that tone.
+     */
+    badgeTone?: Tone;
     /** The visible label. */
     children?: ReactNode;
 }
+/** A count or short text shown in a link's badge. */
+export type NavbarBadgeValue = number | string;
 /** Props for `Navbar.Link`, typed for the component chosen with `as`. */
 export type NavbarLinkProps<C extends ElementType = "a"> = NavbarLinkOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof NavbarLinkOwnProps<C>>;
 /**
@@ -195,6 +212,48 @@ declare function NavbarLink<C extends ElementType = "a">(props: NavbarLinkProps<
 declare namespace NavbarLink {
     var displayName: string;
 }
+export interface NavbarGroupProps extends Omit<ComponentPropsWithRef<"li">, "children"> {
+    /** The group button's visible label, and its accessible name. */
+    label: ReactNode;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+    /** The group's `Navbar.Link`s. */
+    children?: ReactNode;
+    /**
+     * One of the group's links is the current page. The button then shows the
+     * active look (it doesn't set `aria-current`; the link does), and the
+     * group starts open in the mobile menu. @default false
+     */
+    active?: boolean;
+    /** A count or short text on the group button, like `Navbar.Link`'s `badge`. */
+    badge?: NavbarBadgeValue;
+    /** Screen-reader text for the badge. */
+    badgeLabel?: string;
+    /** Badge color. Same default as `Navbar.Link`'s `badgeTone` (inverse on the solid bar). */
+    badgeTone?: Tone;
+    /** Controlled open state of the dropdown in the bar. */
+    open?: boolean;
+    /** Initial open state of the dropdown when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state of the dropdown in the bar. */
+    onOpenChange?: (open: boolean) => void;
+    /** Disables the group button. @default false */
+    disabled?: boolean;
+}
+/**
+ * A group of links under one button, following the WAI-ARIA disclosure
+ * navigation pattern (not a `menu`): the button has `aria-expanded`, and the
+ * links stay ordinary links in the Tab order.
+ *
+ * - In the bar: the button opens a dropdown below it. Escape closes it and
+ *   returns focus to the button; so do a press outside, Tab moving focus out
+ *   of the group, and activating a link. Opening one group closes the others.
+ * - In the mobile menu: an expandable section with the links indented below.
+ */
+declare const NavbarGroup: {
+    ({ label, icon, children, active, badge, badgeLabel, badgeTone, open: openProp, defaultOpen, onOpenChange, disabled, className, ref, ...rest }: NavbarGroupProps): import("react").JSX.Element;
+    displayName: string;
+};
 export interface NavbarActionsProps extends ComponentPropsWithRef<"div"> {
     /** Buttons, an avatar, a theme toggle, a search field. Stays visible at every width, so keep it short on phones. */
     children?: ReactNode;
@@ -237,9 +296,13 @@ export declare const Navbar: {
         displayName: string;
     };
     Link: typeof NavbarLink;
+    Group: {
+        ({ label, icon, children, active, badge, badgeLabel, badgeTone, open: openProp, defaultOpen, onOpenChange, disabled, className, ref, ...rest }: NavbarGroupProps): import("react").JSX.Element;
+        displayName: string;
+    };
     Actions: {
         ({ className, children, ...rest }: NavbarActionsProps): import("react").JSX.Element;
         displayName: string;
     };
 };
-export { NavbarActions, NavbarBrand, NavbarItem, NavbarLink, NavbarNav };
+export { NavbarActions, NavbarBrand, NavbarGroup, NavbarItem, NavbarLink, NavbarNav };