@agentero/design-system 0.26.3 → 0.27.1

package/src/modal/modal.js

@@ -20,12 +20,12 @@ u.displayName = "Modal.Trigger";
 var d = o("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",

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/theme/base.css

@@ -325,6 +325,11 @@
 	--color-bg-button-brand-enable: var(--color-brand-600);
 	--color-bg-button-brand-hover: var(--color-brand-700);
 
+	--color-bg-checkbox-selected: var(--color-neutrals-900);
+	--color-bg-checkbox-disabled: var(--color-neutrals-200);
+	--color-bg-checkbox-invalid-disabled: var(--color-danger-200);
+	--color-border-checkbox-disabled: var(--color-neutrals-100);
+
 	/* Border Tokens */
 	--color-border-input-default: var(--color-slate-200);
 	--color-border-input-hover: var(--color-slate-400);
@@ -827,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