@agentero/design-system 0.27.0 → 0.28.0

package/src/label/label.d.ts

@@ -49,6 +49,11 @@ export type LabelProps = ComponentPropsWithRef<typeof LabelPrimitive.Root> & Lab
  * button) inside a `<label>` gives that element the label's accessible name and
  * makes a click focus the control — render it as a sibling instead.
  *
+ * When a container provides `LabelContext`, the label takes `htmlFor` and
+ * `required` from it and associates itself with the control without an explicit
+ * `htmlFor`; `Field.Root` is one such container. Standalone it behaves as a
+ * plain label. Its own props always win over the context.
+ *
  * @summary Accessible caption for a form control
  *
  * @example
@@ -56,6 +61,6 @@ export type LabelProps = ComponentPropsWithRef<typeof LabelPrimitive.Root> & Lab
  * <Input id="phone" type="tel" />
  */
 export declare const Label: {
-    ({ className, children, optional, required, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    (props: LabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/src/label/label.js

@@ -1,32 +1,34 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
-import { tv as t } from "tailwind-variants";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import * as i from "@radix-ui/react-label";
+import { useLabelContext as t } from "./context.js";
+import { tv as n } from "tailwind-variants";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-label";
 //#region src/label/label.tsx
-var a = t({
+var o = n({
 	slots: {
 		root: "flex flex-wrap gap-1 py-0.25 text-sm font-semibold text-text-input-normal",
 		text: "align-middle",
-		required: "ms-1 align-middle text-text-input-destructive"
+		required: "align-middle text-text-input-destructive"
 	},
 	variants: { optional: { true: { text: "after:font-normal after:text-text-input-placeholder after:content-[\"_(optional)\"]" } } },
 	defaultVariants: { optional: !1 }
-}), o = ({ className: t, children: o, optional: s = !1, required: c = !1, ...l }) => {
-	let u = a({ optional: s && !c });
-	return /* @__PURE__ */ r(i.Root, {
+}), s = (n) => {
+	let { className: s, children: c, optional: l = !1, required: u = !1, ...d } = t(n), f = o({ optional: l && !u });
+	return /* @__PURE__ */ i(a.Root, {
 		"data-slot": "label",
-		className: e(u.root(), t),
-		...l,
-		children: [/* @__PURE__ */ n("span", {
-			className: u.text(),
-			children: o
-		}), c && /* @__PURE__ */ n("span", {
+		className: e(f.root(), s),
+		...d,
+		children: [/* @__PURE__ */ r("span", {
+			className: f.text(),
+			children: c
+		}), u && /* @__PURE__ */ r("span", {
 			"aria-hidden": !0,
-			className: u.required(),
+			className: f.required(),
 			children: "*"
 		})]
 	});
 };
-o.displayName = "Label";
+s.displayName = "Label";
 //#endregion
-export { o as Label, a as labelRecipe };
+export { s as Label, o as labelRecipe };

package/src/modal/modal.js

@@ -3,29 +3,29 @@ import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "../button/button.js";
 import { IconClose as n } from "./icons.js";
 import { tv as r } from "tailwind-variants";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { createContext as o, useContext as s } from "react";
+import { createContext as i, useContext as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import * as c from "@radix-ui/react-dialog";
 //#region src/modal/modal.tsx
-var l = (e) => /* @__PURE__ */ i(c.Root, {
+var l = (e) => /* @__PURE__ */ o(c.Root, {
 	"data-slot": "modal-root",
 	...e
 });
 l.displayName = "Modal.Root";
-var u = (e) => /* @__PURE__ */ i(c.Trigger, {
+var u = (e) => /* @__PURE__ */ o(c.Trigger, {
 	"data-slot": "modal-trigger",
 	...e
 });
 u.displayName = "Modal.Trigger";
-var d = o("dialog"), f = r({
+var d = i("dialog"), f = r({
 	slots: {
 		overlay: [
-			"fixed inset-0 z-(--z-index-overlay) bg-overlay-dark-300",
+			"fixed inset-0 z-(--z-index-top-layer) bg-overlay-dark-300",
 			"data-[state=open]:animate-modal-overlay-in data-[state=closed]:animate-modal-overlay-out",
 			"motion-reduce:animate-none!"
 		],
 		content: [
-			"fixed top-1/2 left-1/2 z-(--z-index-modal) -translate-x-1/2 -translate-y-1/2",
+			"fixed top-1/2 left-1/2 z-(--z-index-top-layer) -translate-x-1/2 -translate-y-1/2",
 			"flex max-h-[calc(100dvh-4rem)] w-[calc(100vw-2rem)] flex-col gap-6",
 			"rounded-lg bg-bg-default-base-primary py-10 shadow-sm outline-none",
 			"data-[state=open]:animate-modal-content-in data-[state=closed]:animate-modal-content-out",
@@ -41,70 +41,70 @@ var d = o("dialog"), f = r({
 		lg: { content: "max-w-[45rem]" }
 	} },
 	defaultVariants: { size: "md" }
-}), p = f(), m = ({ className: t, size: n, variant: r = "dialog", children: o, onEscapeKeyDown: s, onPointerDownOutside: l, ...u }) => {
+}), p = f(), m = ({ className: t, size: n, variant: r = "dialog", children: i, onEscapeKeyDown: a, onPointerDownOutside: l, ...u }) => {
 	let p = f({ size: n }), m = r === "alert";
-	return /* @__PURE__ */ i(d.Provider, {
+	return /* @__PURE__ */ o(d.Provider, {
 		value: r,
-		children: /* @__PURE__ */ a(c.Portal, { children: [/* @__PURE__ */ i(c.Overlay, {
+		children: /* @__PURE__ */ s(c.Portal, { children: [/* @__PURE__ */ o(c.Overlay, {
 			"data-slot": "modal-overlay",
 			className: p.overlay()
-		}), /* @__PURE__ */ i(c.Content, {
+		}), /* @__PURE__ */ o(c.Content, {
 			"data-slot": "modal-content",
 			role: m ? "alertdialog" : "dialog",
 			className: e(p.content(), t),
 			onEscapeKeyDown: (e) => {
-				s?.(e), m && e.preventDefault();
+				a?.(e), m && e.preventDefault();
 			},
 			onPointerDownOutside: (e) => {
 				l?.(e), m && e.preventDefault();
 			},
 			...u,
-			children: o
+			children: i
 		})] })
 	});
 };
 m.displayName = "Modal.Content";
-var h = ({ className: e, children: r, ...o }) => {
-	let l = s(d);
-	return /* @__PURE__ */ a("div", {
+var h = ({ className: e, children: r, ...i }) => {
+	let l = a(d);
+	return /* @__PURE__ */ s("div", {
 		"data-slot": "modal-title",
 		className: p.title({ className: e }),
-		children: [/* @__PURE__ */ i(c.Title, {
-			...o,
+		children: [/* @__PURE__ */ o(c.Title, {
+			...i,
 			children: r
-		}), l === "dialog" && /* @__PURE__ */ i(c.Close, {
+		}), l === "dialog" && /* @__PURE__ */ o(c.Close, {
 			asChild: !0,
-			children: /* @__PURE__ */ i(t, {
+			children: /* @__PURE__ */ o(t, {
 				variant: "ghost",
 				size: "sm",
 				"aria-label": "Close",
 				className: "shrink-0",
-				children: /* @__PURE__ */ i(n, {})
+				children: /* @__PURE__ */ o(n, {})
 			})
 		})]
 	});
 };
 h.displayName = "Modal.Title";
-var g = ({ className: e, ...t }) => /* @__PURE__ */ i(c.Description, {
+var g = ({ className: e, ...t }) => /* @__PURE__ */ o(c.Description, {
 	"data-slot": "modal-description",
 	className: p.description({ className: e }),
 	...t
 });
 g.displayName = "Modal.Description";
-var _ = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
+var _ = ({ className: e, ...t }) => /* @__PURE__ */ o("div", {
 	"data-slot": "modal-body",
 	tabIndex: 0,
 	className: p.body({ className: e }),
 	...t
 });
 _.displayName = "Modal.Body";
-var v = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
+var v = ({ className: e, ...t }) => /* @__PURE__ */ o("div", {
 	"data-slot": "modal-footer",
 	className: p.footer({ className: e }),
 	...t
 });
 v.displayName = "Modal.Footer";
-var y = (e) => /* @__PURE__ */ i(c.Close, {
+var y = (e) => /* @__PURE__ */ o(c.Close, {
 	"data-slot": "modal-close",
 	...e
 });

package/src/popover/popover.js

@@ -23,7 +23,7 @@ var o = (e) => /* @__PURE__ */ t(n.Close, {
 });
 o.displayName = "Popover.Close";
 var s = n.Portal, c = e({ base: [
-	"z-(--z-index-flyover) rounded-md bg-bg-default-base-primary px-2 py-3 shadow-md",
+	"z-(--z-index-top-layer) rounded-md bg-bg-default-base-primary px-2 py-3 shadow-md",
 	"border border-border-default-base-primary",
 	"will-change-[transform,opacity]",
 	"origin-(--radix-popover-content-transform-origin)",

package/src/progress/progress.js

@@ -1,7 +1,7 @@
 "use client";
 import { tv as e } from "tailwind-variants";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useId as r } from "react";
+import { useId as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-progress";
 //#region src/progress/progress.tsx
 var a = e({ slots: {
@@ -12,28 +12,28 @@ var a = e({ slots: {
 	label: "text-sm text-text-default-base-primary",
 	value: "text-base text-text-default-base-primary"
 } }), o = ({ percentage: e, label: o, "aria-label": s, className: c }) => {
-	let l = r(), u = a(), d = Math.min(100, Math.max(0, e));
-	return /* @__PURE__ */ n("div", {
+	let l = t(), u = a(), d = Math.min(100, Math.max(0, e));
+	return /* @__PURE__ */ r("div", {
 		"data-slot": "progress",
 		className: u.root(),
-		children: [o && /* @__PURE__ */ n("div", {
+		children: [o && /* @__PURE__ */ r("div", {
 			"data-slot": "progress-label",
 			className: u.labelRow(),
-			children: [/* @__PURE__ */ t("span", {
+			children: [/* @__PURE__ */ n("span", {
 				id: l,
 				className: u.label(),
 				children: o
-			}), /* @__PURE__ */ n("span", {
+			}), /* @__PURE__ */ r("span", {
 				className: u.value(),
 				children: [d, "%"]
 			})]
-		}), /* @__PURE__ */ t(i.Root, {
+		}), /* @__PURE__ */ n(i.Root, {
 			"data-slot": "progress-track",
 			value: d,
 			"aria-labelledby": o ? l : void 0,
 			"aria-label": o ? void 0 : s ?? "Progress",
 			className: u.track({ className: c }),
-			children: /* @__PURE__ */ t(i.Indicator, {
+			children: /* @__PURE__ */ n(i.Indicator, {
 				"data-slot": "progress-indicator",
 				className: u.indicator(),
 				style: { transform: `translateX(-${100 - d}%)` }

package/src/switch/switch.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useId as i } from "react";
+import { useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-switch";
 //#region src/switch/switch.tsx
 var o = t({
@@ -32,24 +32,24 @@ var o = t({
 	},
 	defaultVariants: { size: "md" }
 }), s = ({ className: t, size: s, reverse: c, label: l, id: u, ref: d, ...f }) => {
-	let p = i(), m = u ?? (l ? p : void 0), h = o({
+	let p = n(), m = u ?? (l ? p : void 0), h = o({
 		size: s,
 		reverse: c
-	}), g = /* @__PURE__ */ n(a.Root, {
+	}), g = /* @__PURE__ */ r(a.Root, {
 		ref: d,
 		id: m,
 		"data-slot": "switch",
 		className: e(h.root(), t),
 		...f,
-		children: /* @__PURE__ */ n(a.Thumb, {
+		children: /* @__PURE__ */ r(a.Thumb, {
 			"data-slot": "switch-thumb",
 			className: h.thumb()
 		})
 	});
-	return l ? /* @__PURE__ */ r("span", {
+	return l ? /* @__PURE__ */ i("span", {
 		"data-slot": "switch-wrapper",
 		className: h.wrapper(),
-		children: [g, /* @__PURE__ */ n("label", {
+		children: [g, /* @__PURE__ */ r("label", {
 			htmlFor: m,
 			"data-slot": "switch-label",
 			className: h.label(),

package/src/table/table.js

@@ -3,8 +3,8 @@ import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "../button/button.js";
 import { IconKeyboardArrowDown as n } from "./icons.js";
 import { tv as r } from "tailwind-variants";
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as a, use as o } from "react";
+import { createContext as i, use as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/table/table.tsx
 var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inline)] first:ps-[var(--table-cell-padding-inline-ends)] last:pe-[var(--table-cell-padding-inline-ends)] has-[[type=checkbox]]:w-0 has-[[type=checkbox]]:pe-0", c = r({
 	slots: {
@@ -26,32 +26,32 @@ var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inli
 		}
 	},
 	defaultVariants: { size: "md" }
-}), l = a(null), u = () => {
-	let e = o(l);
+}), l = i(null), u = () => {
+	let e = a(l);
 	if (!e) throw Error("Table parts must be used within Table.Root");
 	return e;
-}, d = a("body"), f = (e) => e === "header" || e === "headerAndFooter", p = (e) => e === "headerAndFooter", m = ({ children: e, ref: t, ...n }) => {
-	let { size: r, sticky: a, embed: o } = n, s = c(n);
-	return /* @__PURE__ */ i(l, {
+}, d = i("body"), f = (e) => e === "header" || e === "headerAndFooter", p = (e) => e === "headerAndFooter", m = ({ children: e, ref: t, ...n }) => {
+	let { size: r, sticky: i, embed: a } = n, s = c(n);
+	return /* @__PURE__ */ o(l, {
 		value: {
-			header: y({ sticky: f(a) }),
+			header: y({ sticky: f(i) }),
 			cell: x({ size: r }),
 			headRow: _({ body: !1 }),
 			bodyRow: _({
 				body: !0,
-				divider: !o,
-				stickyFooter: p(a)
+				divider: !a,
+				stickyFooter: p(i)
 			})
 		},
-		children: /* @__PURE__ */ i("div", {
+		children: /* @__PURE__ */ o("div", {
 			"data-slot": "table-root",
 			className: s.root(),
-			children: /* @__PURE__ */ i("div", {
+			children: /* @__PURE__ */ o("div", {
 				"data-slot": "table-scroll",
 				ref: t,
 				tabIndex: 0,
 				className: s.scroll(),
-				children: /* @__PURE__ */ i("table", {
+				children: /* @__PURE__ */ o("table", {
 					"data-slot": "table",
 					className: s.table(),
 					children: e
@@ -61,18 +61,18 @@ var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inli
 	});
 };
 m.displayName = "Table.Root";
-var h = ({ children: e, ...t }) => /* @__PURE__ */ i(d, {
+var h = ({ children: e, ...t }) => /* @__PURE__ */ o(d, {
 	value: "head",
-	children: /* @__PURE__ */ i("thead", {
+	children: /* @__PURE__ */ o("thead", {
 		"data-slot": "table-head",
 		...t,
 		children: e
 	})
 });
 h.displayName = "Table.Head";
-var g = ({ children: e, ...t }) => /* @__PURE__ */ i(d, {
+var g = ({ children: e, ...t }) => /* @__PURE__ */ o(d, {
 	value: "body",
-	children: /* @__PURE__ */ i("tbody", {
+	children: /* @__PURE__ */ o("tbody", {
 		"data-slot": "table-body",
 		...t,
 		children: e
@@ -100,10 +100,10 @@ var _ = r({
 		}
 	}
 }), v = ({ className: t, ...n }) => {
-	let { headRow: r, bodyRow: a } = u();
-	return /* @__PURE__ */ i("tr", {
+	let { headRow: r, bodyRow: i } = u();
+	return /* @__PURE__ */ o("tr", {
 		"data-slot": "table-row",
-		className: e(o(d) === "body" ? a : r, t),
+		className: e(a(d) === "body" ? i : r, t),
 		...n
 	});
 };
@@ -116,7 +116,7 @@ var y = r({
 	} }
 }), b = ({ className: t, ...n }) => {
 	let { header: r } = u();
-	return /* @__PURE__ */ i("th", {
+	return /* @__PURE__ */ o("th", {
 		"data-slot": "table-header",
 		className: e(r, t),
 		...n
@@ -133,24 +133,24 @@ var x = r({
 	defaultVariants: { size: "md" }
 }), S = ({ className: t, ...n }) => {
 	let { cell: r } = u();
-	return /* @__PURE__ */ i("td", {
+	return /* @__PURE__ */ o("td", {
 		"data-slot": "table-cell",
 		className: e(r, t),
 		...n
 	});
 };
 S.displayName = "Table.Cell";
-var C = r({ base: "relative z-[1] [&>svg]:shrink-0 [&>svg]:transition-transform [&>svg]:duration-200 data-[state=open]:[&>svg]:rotate-180" }), w = ({ toggleExpanded: r, isExpanded: a, className: o, ...s }) => /* @__PURE__ */ i(t, {
+var C = r({ base: "relative z-[1] [&>svg]:shrink-0 [&>svg]:transition-transform [&>svg]:duration-200 data-[state=open]:[&>svg]:rotate-180" }), w = ({ toggleExpanded: r, isExpanded: i, className: a, ...s }) => /* @__PURE__ */ o(t, {
 	variant: "ghost",
 	onClick: r,
-	className: e(C(), o),
-	"data-state": a ? "open" : "default",
+	className: e(C(), a),
+	"data-state": i ? "open" : "default",
 	"data-slot": "table-expand-button",
 	...s,
-	children: /* @__PURE__ */ i(n, {})
+	children: /* @__PURE__ */ o(n, {})
 });
 w.displayName = "Table.ExpandButton";
-var T = ({ className: t, ...n }) => /* @__PURE__ */ i("tr", {
+var T = ({ className: t, ...n }) => /* @__PURE__ */ o("tr", {
 	"data-slot": "table-expanded-row",
 	className: e("border-t border-border-default-base-primary", t),
 	...n
@@ -162,7 +162,7 @@ var E = r({ base: [
 	"after:[background:linear-gradient(to_right,transparent_0,var(--color-bg-default-base-secondary)_var(--table-cell-padding-inline))]",
 	"[&>*]:relative [&>*]:z-[1] [&>*]:opacity-0",
 	"[@media(hover:none)_and_(pointer:coarse)]:[&>*]:opacity-100"
-] }), D = ({ children: e }) => /* @__PURE__ */ i("div", {
+] }), D = ({ children: e }) => /* @__PURE__ */ o("div", {
 	"data-slot": "table-row-actions",
 	className: E(),
 	children: e

package/src/tabs/tabs.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as r, use as i } from "react";
+import { createContext as n, use as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-tabs";
 //#region src/tabs/tabs.tsx
 var o = t({
@@ -57,18 +57,18 @@ var o = t({
 		variant: "line",
 		position: "start"
 	}
-}), s = r(null), c = () => {
-	let e = i(s);
+}), s = n(null), c = () => {
+	let e = r(s);
 	if (!e) throw Error("Tabs.List, Tabs.Trigger and Tabs.Content must be used within Tabs.Root");
 	return e;
-}, l = ({ className: t, variant: r, position: i, ...c }) => {
+}, l = ({ className: t, variant: n, position: r, ...c }) => {
 	let l = o({
-		variant: r,
-		position: i
+		variant: n,
+		position: r
 	});
-	return /* @__PURE__ */ n(s, {
+	return /* @__PURE__ */ i(s, {
 		value: l,
-		children: /* @__PURE__ */ n(a.Root, {
+		children: /* @__PURE__ */ i(a.Root, {
 			"data-slot": "tabs-root",
 			className: e(l.root(), t),
 			...c
@@ -76,36 +76,36 @@ var o = t({
 	});
 };
 l.displayName = "Tabs.Root";
-var u = ({ className: t, ...r }) => {
-	let i = c();
-	return /* @__PURE__ */ n(a.List, {
+var u = ({ className: t, ...n }) => {
+	let r = c();
+	return /* @__PURE__ */ i(a.List, {
 		"data-slot": "tabs-list",
-		className: e(i.list(), t),
-		...r
+		className: e(r.list(), t),
+		...n
 	});
 };
 u.displayName = "Tabs.List";
-var d = ({ className: t, ...r }) => {
-	let i = c();
-	return /* @__PURE__ */ n(a.Trigger, {
+var d = ({ className: t, ...n }) => {
+	let r = c();
+	return /* @__PURE__ */ i(a.Trigger, {
 		"data-slot": "tabs-trigger",
-		className: e(i.trigger(), t),
-		...r
+		className: e(r.trigger(), t),
+		...n
 	});
 };
 d.displayName = "Tabs.Trigger";
-var f = ({ className: t, ...r }) => {
-	let i = c();
-	return /* @__PURE__ */ n(a.Content, {
+var f = ({ className: t, ...n }) => {
+	let r = c();
+	return /* @__PURE__ */ i(a.Content, {
 		"data-slot": "tabs-content",
-		className: e(i.content(), t),
-		...r
+		className: e(r.content(), t),
+		...n
 	});
 };
 f.displayName = "Tabs.Content";
-var p = ({ className: t, variant: r, ...a }) => /* @__PURE__ */ n("span", {
+var p = ({ className: t, variant: n, ...a }) => /* @__PURE__ */ i("span", {
 	"data-slot": "tabs-label",
-	className: e((i(s) ?? o({ variant: r })).trigger(), "pointer-events-none", t),
+	className: e((r(s) ?? o({ variant: n })).trigger(), "pointer-events-none", t),
 	...a
 });
 p.displayName = "Tabs.Label";

package/src/tag/tag.js

@@ -1,7 +1,7 @@
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
-import { jsx as n } from "react/jsx-runtime";
-import { Children as r, isValidElement as i } from "react";
+import { Children as n, isValidElement as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 import { Slot as a, Slottable as o } from "@radix-ui/react-slot";
 //#region src/tag/tag.tsx
 var s = t({
@@ -106,25 +106,25 @@ var s = t({
 		variant: "tertiary",
 		size: "sm"
 	}
-}), c = (e) => r.map(e, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ n("span", {
+}), c = (e) => n.map(e, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ i("span", {
 	className: "min-w-0 truncate",
 	children: e
 }) : e), l = ({ children: t, asChild: l, color: u, variant: d, size: f, pill: p, truncate: m, className: h, ref: g, ..._ }) => {
-	let v = l ? a : "span", y = r.toArray(l && i(t) ? t.props.children : t), b = e(s({
+	let v = l ? a : "span", y = n.toArray(l && r(t) ? t.props.children : t), b = e(s({
 		color: u,
 		variant: d,
 		size: f,
 		pill: p,
 		truncate: m,
 		interactive: l,
-		hasOnlyIcon: y.length > 0 && y.every(i)
+		hasOnlyIcon: y.length > 0 && y.every(r)
 	}), h), x = m && !l ? c(t) : t;
-	return /* @__PURE__ */ n(v, {
+	return /* @__PURE__ */ i(v, {
 		"data-slot": "tag",
 		..._,
 		className: b,
 		ref: g,
-		children: l ? /* @__PURE__ */ n(o, { children: t }) : x
+		children: l ? /* @__PURE__ */ i(o, { children: t }) : x
 	});
 };
 //#endregion

package/theme/base.css

@@ -832,12 +832,25 @@
 	--z-index-floating: 1000;
 	--z-index-sticky: 1100;
 	--z-index-banner: 1200;
-	--z-index-overlay: 1300;
-	--z-index-modal: 1400;
-	--z-index-flyover: 1500;
-	--z-index-skip-nav: 1600;
-	--z-index-toast: 1700;
-	--z-index-tooltip: 1800;
+	/*
+	 * One tier for every surface that portals to the body and is mounted when it
+	 * opens. Sharing a z-index makes them paint in DOM order, and a portal is
+	 * appended to the body as it mounts, so they paint in the order they were
+	 * opened in and the last one opened wins. That holds whichever way the
+	 * surfaces are nested, which a tier per component cannot do: any fixed order
+	 * between two tiers is the wrong one for one of the two nesting directions.
+	 *
+	 * A surface leaves the rule when its position in the DOM stops matching when
+	 * it opened: content that is mounted before it opens, and content portalled
+	 * into a container other than the body, which stacks inside that container's
+	 * ancestors instead. Both then need a z-index of their own.
+	 */
+	--z-index-top-layer: 1300;
+	/* Deprecated alias of --z-index-top-layer; drop once @agentero/ui Combobox stops using it. */
+	--z-index-flyover: 1300;
+	--z-index-skip-nav: 1400;
+	--z-index-toast: 1500;
+	--z-index-tooltip: 1600;
 
 	/* ========================================
     * BREAKPOINTS