@nxgt/material 3.10.2 → 3.11.0

package/dist/icon-button-DJcWpIhu.js

@@ -1,319 +0,0 @@
-import { t as e } from "./utils-Bcd2Z3ea.js";
-import { n as t } from "./use-shape-morph-BKA_R5P5.js";
-import { n, t as r } from "./dist-DVRQkaTK.js";
-import { o as i, t as a } from "./tooltip-rhbqNmr3.js";
-import { i as o, n as s, r as c, t as l } from "./button-tones-BgZJ1tkD.js";
-import { shapeOutline as u, toSvgPath as d } from "@nxgt/material-core/shapes";
-import { useRef as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-//#endregion
-//#region lib/components/ui/actions/icon-button/icon-button.variants.ts
-var h = i("inline-flex size-9 center gap-2 cursor-pointer whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:bg-transparent [&_svg]:text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error has-[[data-slot=icon]]:p-1.5 aspect-square rounded-full", {
-	variants: {
-		variant: {
-			filled: "shadow-xs bg-primary text-primary-foreground [&_svg]:data-[slot=icon]:text-primary-foreground [&_svg]:stroke-primary-foreground hover:bg-[color-mix(in_oklab,var(--color-primary)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-primary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-primary)_85%,black)]",
-			tonal: "shadow-xs bg-primary/15 [&_svg]:data-[slot=icon]:text-primary-text [&_svg]:stroke-primary-text text-primary-text hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10",
-			ghost: "",
-			outlined: "border shadow-xs text-primary-text [&_svg]:data-[slot=icon]:text-primary-text [&_svg]:stroke-primary-text border-primary/50 focus:bg-primary/10 hover:bg-primary/10",
-			link: "text-primary-text [&_svg]:data-[slot=icon]:text-primary-text [&_svg]:stroke-primary-text underline-offset-4 hover:underline hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10 focus:underline"
-		},
-		color: {
-			primary: null,
-			secondary: null,
-			info: null,
-			warning: null,
-			default: null,
-			error: null,
-			success: null
-		}
-	},
-	defaultVariants: {
-		variant: "filled",
-		color: "primary"
-	},
-	compoundVariants: [
-		{
-			variant: "filled",
-			color: "primary",
-			class: "bg-primary text-primary-foreground [&_svg]:data-[slot=icon]:text-primary-foreground [&_svg]:stroke-primary-foreground hover:bg-[color-mix(in_oklab,var(--color-primary)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-primary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-primary)_85%,black)]"
-		},
-		{
-			variant: "filled",
-			color: "secondary",
-			class: "bg-secondary text-secondary-foreground [&_svg]:data-[slot=icon]:text-secondary-foreground [&_svg]:stroke-secondary-foreground hover:bg-[color-mix(in_oklab,var(--color-secondary)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-secondary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-secondary)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-secondary)_60%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-secondary)_50%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-secondary)_60%,var(--color-background))]"
-		},
-		{
-			variant: "filled",
-			color: "success",
-			class: "bg-success text-success-foreground [&_svg]:data-[slot=icon]:text-success-foreground [&_svg]:stroke-success-foreground hover:bg-[color-mix(in_oklab,var(--color-success)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-success)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-success)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-success)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-success)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-success)_50%,var(--color-background))]"
-		},
-		{
-			variant: "filled",
-			color: "info",
-			class: "bg-info text-info-foreground [&_svg]:data-[slot=icon]:text-info-foreground [&_svg]:stroke-info-foreground hover:bg-[color-mix(in_oklab,var(--color-info)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-info)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-info)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-info)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-info)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-info)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-info)_50%,var(--color-background))]"
-		},
-		{
-			variant: "filled",
-			color: "warning",
-			class: "bg-warning text-warning-foreground [&_svg]:data-[slot=icon]:text-warning-foreground [&_svg]:stroke-warning-foreground hover:bg-[color-mix(in_oklab,var(--color-warning)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-warning)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-warning)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-warning)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-background))]"
-		},
-		{
-			variant: "filled",
-			color: "error",
-			class: "bg-error text-error-foreground [&_svg]:data-[slot=icon]:text-error-foreground [&_svg]:stroke-error-foreground hover:bg-[color-mix(in_oklab,var(--color-error)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-error)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-error)_85%,black)]"
-		},
-		{
-			variant: "filled",
-			color: "default",
-			class: "bg-foreground text-background [&_svg]:data-[slot=icon]:text-background [&_svg]:stroke-background hover:bg-[color-mix(in_oklab,var(--color-foreground)_90%,var(--color-background))] active:bg-[color-mix(in_oklab,var(--color-foreground)_70%,var(--color-background))] focus:bg-[color-mix(in_oklab,var(--color-foreground)_80%,var(--color-background))]"
-		},
-		{
-			variant: "tonal",
-			color: "primary",
-			class: `${c.primary} ${l.primary} ${s.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
-		},
-		{
-			variant: "tonal",
-			color: "secondary",
-			class: `${c.secondary} ${l.secondary} ${s.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
-		},
-		{
-			variant: "tonal",
-			color: "success",
-			class: `${c.success} ${l.success} ${s.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
-		},
-		{
-			variant: "tonal",
-			color: "info",
-			class: `${c.info} ${l.info} ${s.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
-		},
-		{
-			variant: "tonal",
-			color: "warning",
-			class: `${c.warning} ${l.warning} ${s.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
-		},
-		{
-			variant: "tonal",
-			color: "error",
-			class: `${c.error} ${l.error} ${s.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
-		},
-		{
-			variant: "tonal",
-			color: "default",
-			class: `${c.default} ${l.default} ${s.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
-		},
-		{
-			variant: "ghost",
-			color: "primary",
-			class: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
-		},
-		{
-			variant: "ghost",
-			color: "default",
-			class: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
-		},
-		{
-			variant: "ghost",
-			color: "secondary",
-			class: `${c.secondary} ${l.secondary} ${s.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
-		},
-		{
-			variant: "ghost",
-			color: "success",
-			class: `${c.success} ${l.success} ${s.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
-		},
-		{
-			variant: "ghost",
-			color: "info",
-			class: `${c.info} ${l.info} ${s.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
-		},
-		{
-			variant: "ghost",
-			color: "warning",
-			class: `${c.warning} ${l.warning} ${s.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
-		},
-		{
-			variant: "ghost",
-			color: "error",
-			class: `${c.error} ${l.error} ${s.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
-		},
-		{
-			variant: "outlined",
-			color: "primary",
-			class: `${c.primary} ${l.primary} ${s.primary} border-primary/50 focus:bg-primary/10 hover:bg-primary/10`
-		},
-		{
-			variant: "outlined",
-			color: "secondary",
-			class: `${c.secondary} ${l.secondary} ${s.secondary} border-secondary/50 focus:bg-secondary/10 hover:bg-secondary/10`
-		},
-		{
-			variant: "outlined",
-			color: "success",
-			class: `${c.success} ${l.success} ${s.success} border-success/50 focus:bg-success/10 hover:bg-success/10`
-		},
-		{
-			variant: "outlined",
-			color: "info",
-			class: `${c.info} ${l.info} ${s.info} border-info/50 focus:bg-info/10 hover:bg-info/10`
-		},
-		{
-			variant: "outlined",
-			color: "warning",
-			class: `${c.warning} ${l.warning} ${s.warning} border-warning/50 focus:bg-warning/10 hover:bg-warning/10`
-		},
-		{
-			variant: "outlined",
-			color: "error",
-			class: `${c.error} ${l.error} ${s.error} border-error/50 focus:bg-error/10 hover:bg-error/10`
-		},
-		{
-			variant: "outlined",
-			color: "default",
-			class: `${c.default} ${l.default} ${s.default} border-foreground/50 focus:bg-foreground/10 hover:bg-foreground/10`
-		},
-		{
-			variant: "link",
-			color: "primary",
-			class: `${c.primary} ${l.primary} ${s.primary} underline-offset-4 hover:underline hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
-		},
-		{
-			variant: "link",
-			color: "secondary",
-			class: `${c.secondary} ${l.secondary} ${s.secondary} underline-offset-4 hover:underline hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
-		},
-		{
-			variant: "link",
-			color: "success",
-			class: `${c.success} ${l.success} ${s.success} underline-offset-4 hover:underline hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
-		},
-		{
-			variant: "link",
-			color: "info",
-			class: `${c.info} ${l.info} ${s.info} underline-offset-4 hover:underline hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
-		},
-		{
-			variant: "link",
-			color: "warning",
-			class: `${c.warning} ${l.warning} ${s.warning} underline-offset-4 hover:underline hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
-		},
-		{
-			variant: "link",
-			color: "error",
-			class: `${c.error} ${l.error} ${s.error} underline-offset-4 hover:underline hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
-		},
-		{
-			variant: "link",
-			color: "default",
-			class: `${c.default} ${l.default} ${s.default} underline-offset-4 hover:underline hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
-		}
-	]
-}), g = ((e) => h(e?.variant === "ghost" && e.color === null ? {
-	...e,
-	color: void 0
-} : e)), _ = {
-	filled: {
-		primary: "fill-primary",
-		secondary: "fill-secondary dark:fill-[color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))]",
-		success: "fill-success dark:fill-[color-mix(in_oklab,var(--color-success)_60%,var(--color-background))]",
-		info: "fill-info dark:fill-[color-mix(in_oklab,var(--color-info)_60%,var(--color-background))]",
-		warning: "fill-warning dark:fill-[color-mix(in_oklab,var(--color-warning)_60%,var(--color-background))]",
-		error: "fill-error",
-		default: "fill-foreground"
-	},
-	tonal: {
-		primary: "fill-primary/15 group-hover/icon-button:fill-primary/10 group-active/icon-button:fill-primary/5",
-		secondary: "fill-secondary/15 group-hover/icon-button:fill-secondary/10 group-active/icon-button:fill-secondary/5",
-		success: "fill-success/15 group-hover/icon-button:fill-success/10 group-active/icon-button:fill-success/5",
-		info: "fill-info/15 group-hover/icon-button:fill-info/10 group-active/icon-button:fill-info/5",
-		warning: "fill-warning/15 group-hover/icon-button:fill-warning/10 group-active/icon-button:fill-warning/5",
-		error: "fill-error/15 group-hover/icon-button:fill-error/10 group-active/icon-button:fill-error/5",
-		default: "fill-foreground/15 group-hover/icon-button:fill-foreground/10 group-active/icon-button:fill-foreground/5"
-	},
-	outlined: {
-		primary: "fill-transparent stroke-primary/50 group-hover/icon-button:fill-primary/10 group-active/icon-button:fill-primary/5",
-		secondary: "fill-transparent stroke-secondary/50 group-hover/icon-button:fill-secondary/10 group-active/icon-button:fill-secondary/5",
-		success: "fill-transparent stroke-success/50 group-hover/icon-button:fill-success/10 group-active/icon-button:fill-success/5",
-		info: "fill-transparent stroke-info/50 group-hover/icon-button:fill-info/10 group-active/icon-button:fill-info/5",
-		warning: "fill-transparent stroke-warning/50 group-hover/icon-button:fill-warning/10 group-active/icon-button:fill-warning/5",
-		error: "fill-transparent stroke-error/50 group-hover/icon-button:fill-error/10 group-active/icon-button:fill-error/5",
-		default: "fill-transparent stroke-foreground/50 group-hover/icon-button:fill-foreground/10 group-active/icon-button:fill-foreground/5"
-	},
-	ghost: {
-		primary: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50",
-		secondary: "fill-transparent group-hover/icon-button:fill-secondary/10 group-active/icon-button:fill-secondary/5",
-		success: "fill-transparent group-hover/icon-button:fill-success/10 group-active/icon-button:fill-success/5",
-		info: "fill-transparent group-hover/icon-button:fill-info/10 group-active/icon-button:fill-info/5",
-		warning: "fill-transparent group-hover/icon-button:fill-warning/10 group-active/icon-button:fill-warning/5",
-		error: "fill-transparent group-hover/icon-button:fill-error/10 group-active/icon-button:fill-error/5",
-		default: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50"
-	},
-	link: {
-		primary: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50",
-		secondary: "fill-transparent group-hover/icon-button:fill-secondary/10 group-active/icon-button:fill-secondary/5",
-		success: "fill-transparent group-hover/icon-button:fill-success/10 group-active/icon-button:fill-success/5",
-		info: "fill-transparent group-hover/icon-button:fill-info/10 group-active/icon-button:fill-info/5",
-		warning: "fill-transparent group-hover/icon-button:fill-warning/10 group-active/icon-button:fill-warning/5",
-		error: "fill-transparent group-hover/icon-button:fill-error/10 group-active/icon-button:fill-error/5",
-		default: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50"
-	}
-};
-function v({ shape: n, variant: r, color: i }) {
-	let a = u(n), o = f(null);
-	return t(o, a, !0), /* @__PURE__ */ p("svg", {
-		"data-slot": "icon-button-shape",
-		viewBox: "0 0 100 100",
-		"aria-hidden": "true",
-		focusable: "false",
-		className: e("-z-10 pointer-events-none absolute inset-0 size-full overflow-visible transition-[filter]", r === "filled" && "group-hover/icon-button:brightness-90 group-active/icon-button:brightness-80"),
-		children: /* @__PURE__ */ p("path", {
-			ref: o,
-			d: d(a),
-			vectorEffect: "non-scaling-stroke",
-			paintOrder: "stroke",
-			className: e("stroke-transparent stroke-1 transition-[fill]", _[r][i], "group-focus-visible/icon-button:stroke-ring/50 group-focus-visible/icon-button:stroke-[6px]", "forced-colors:fill-none forced-colors:stroke-[ButtonText] forced-colors:group-focus-visible/icon-button:stroke-[Highlight]")
-		})
-	});
-}
-//#endregion
-//#region lib/components/ui/actions/icon-button/icon-button.tsx
-function y({ variant: t, color: i, className: a, asChild: s, type: c = "button", shape: l, morph: u = "pill", children: d, ...f }) {
-	let h = s ? r : "button";
-	return /* @__PURE__ */ p(o, {
-		value: !!(f["aria-label"] || f["aria-labelledby"]),
-		children: /* @__PURE__ */ m(h, {
-			"data-slot": "icon-button",
-			"data-icon-button": "",
-			"data-variant": t,
-			"data-color": i,
-			type: s ? void 0 : c,
-			"data-shape": l,
-			"data-morph": !l && u !== "none" && f["aria-pressed"] !== void 0 ? u : void 0,
-			className: e(g({
-				variant: t,
-				color: i
-			}), l && "group/icon-button relative isolate bg-transparent! border-0! shadow-none! ring-0! focus-visible:ring-0! aria-invalid:ring-0! forced-colors:[&_svg]:stroke-[ButtonText] forced-colors:[&_svg]:text-[ButtonText]", a),
-			...f,
-			children: [l ? /* @__PURE__ */ p(v, {
-				shape: l,
-				variant: t ?? "filled",
-				color: i ?? (t === "ghost" ? "default" : "primary")
-			}) : null, /* @__PURE__ */ p(n, { children: d })]
-		})
-	});
-}
-function b({ tooltip: e, "aria-label": t, ...n }) {
-	let r = t ?? (typeof e == "string" ? e : void 0);
-	return e ? /* @__PURE__ */ p(a, {
-		content: e,
-		children: /* @__PURE__ */ p(y, {
-			"aria-label": r,
-			...n
-		})
-	}) : /* @__PURE__ */ p(y, {
-		"aria-label": r,
-		...n
-	});
-}
-//#endregion
-export { g as n, b as t };

package/lib/components/ui/actions/icon-button/icon-button-morph-media.css

@@ -1,65 +0,0 @@
-/* A morph `IconButton` toggle (icon-button-morph.css) by medium: the 14px
- * widening from 600px wide, the colour change only under reduced motion,
- * `SelectedItem` in forced colours. */
-@layer utilities {
-	@media (min-width: 600px) {
-		[data-icon-button][data-morph]:not(
-				[data-shape],
-				.nxgt-toolbar-item,
-				[data-toolbar-item]
-			) {
-			--ib-morph: 14px;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		[data-icon-button][data-morph]:not(
-				[data-shape],
-				.nxgt-toolbar-item,
-				[data-toolbar-item]
-			),
-		[data-icon-button][data-morph]:not(
-				[data-shape],
-				.nxgt-toolbar-item,
-				[data-toolbar-item]
-			)::before {
-			transition:
-				background-color 180ms var(--nxgt-ease-effects),
-				color 180ms var(--nxgt-ease-effects);
-		}
-	}
-	@media (forced-colors: active) {
-		[data-icon-button][data-morph][aria-pressed="true"]:not(
-				[data-shape],
-				.nxgt-toolbar-item,
-				[data-toolbar-item]
-			) {
-			color: SelectedItemText;
-			forced-color-adjust: none;
-		}
-		[data-icon-button][data-morph][aria-pressed="true"]:not(
-				[data-shape],
-				.nxgt-toolbar-item,
-				[data-toolbar-item]
-			)::before {
-			background: SelectedItem;
-		}
-		[data-icon-button][data-morph][aria-pressed="true"]:not(
-				[data-shape],
-				.nxgt-toolbar-item,
-				[data-toolbar-item]
-			)
-			svg {
-			color: SelectedItemText;
-			stroke: SelectedItemText;
-		}
-		[data-icon-button][data-morph][aria-pressed="true"]:not(
-				[data-shape],
-				.nxgt-toolbar-item,
-				[data-toolbar-item]
-			):focus-visible::before {
-			box-shadow: none;
-			outline: 2px solid Highlight;
-			outline-offset: 2px;
-		}
-	}
-}

package/lib/components/ui/actions/icon-button/icon-button-morph.css

@@ -1,152 +0,0 @@
-/* A toggle `IconButton` (`aria-pressed`, no `shape`): pressed, it is filled
- * with its colour. `data-morph="pill"` also widens it by `--ib-morph` (14px;
- * 0 below 600px, where only the colour changes), `round` stays a circle. The
- * pill is the button's `::before`, `--ib-morph` / 2 wider on each side, and the
- * same amount of margin makes room for it, so any size class works. The
- * motion and the tokens are Toolbar morph's (`--nxgt-spring-fast`).
- * Toolbar items keep the Toolbar's own look. */
-@layer utilities {
-	[data-icon-button][data-morph]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	) {
-		--ib-morph: 0px;
-		--ib-on: var(--color-primary);
-		--ib-on-fg: var(--color-primary-foreground);
-		isolation: isolate;
-		transition:
-			margin var(--nxgt-spring-fast-duration) var(--nxgt-spring-fast),
-			color 180ms var(--nxgt-ease-effects),
-			border-color 180ms var(--nxgt-ease-effects),
-			box-shadow 180ms var(--nxgt-ease-effects),
-			background-color 180ms var(--nxgt-ease-effects),
-			opacity 180ms var(--nxgt-ease-effects);
-	}
-	[data-icon-button][data-morph]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	)::before {
-		content: "";
-		position: absolute;
-		inset-block: calc(-1 * var(--ib-bw, 0px));
-		inset-inline: calc(
-			var(--ib-morph) /
-			-2 *
-			var(--ib-grow, 0) -
-			var(--ib-bw, 0px)
-		);
-		z-index: -1;
-		border-radius: 999px;
-		background: transparent;
-		transition:
-			inset var(--nxgt-spring-fast-duration) var(--nxgt-spring-fast),
-			border-radius var(--nxgt-spring-fast-duration) var(--nxgt-spring-fast),
-			background-color 180ms var(--nxgt-ease-effects);
-	}
-	/* `position` has no specificity, so a utility (PasswordField's `absolute`) wins. */
-	:where(
-		[data-icon-button][data-morph]:not(
-			[data-shape],
-			.nxgt-toolbar-item,
-			[data-toolbar-item]
-		)
-	) {
-		position: relative;
-	}
-	/* The outlined variant's 1px border sits outside the padding box the pill is placed in. */
-	[data-icon-button][data-morph][data-variant="outlined"] {
-		--ib-bw: 1px;
-	}
-	[data-icon-button][data-morph][data-color="secondary"] {
-		--ib-on: var(--color-secondary);
-		--ib-on-fg: var(--color-secondary-foreground);
-	}
-	[data-icon-button][data-morph][data-color="success"] {
-		--ib-on: var(--color-success);
-		--ib-on-fg: var(--color-success-foreground);
-	}
-	[data-icon-button][data-morph][data-color="info"] {
-		--ib-on: var(--color-info);
-		--ib-on-fg: var(--color-info-foreground);
-	}
-	[data-icon-button][data-morph][data-color="warning"] {
-		--ib-on: var(--color-warning);
-		--ib-on-fg: var(--color-warning-foreground);
-	}
-	[data-icon-button][data-morph][data-color="error"] {
-		--ib-on: var(--color-error);
-		--ib-on-fg: var(--color-error-foreground);
-	}
-	[data-icon-button][data-morph][data-color="default"] {
-		--ib-on: var(--color-foreground);
-		--ib-on-fg: var(--color-background);
-	}
-	/* Pressed: the button's own surface gives way to the pill. */
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	) {
-		background: transparent;
-		border-color: transparent;
-		box-shadow: none;
-		color: var(--ib-on-fg);
-	}
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-			[data-shape],
-			.nxgt-toolbar-item,
-			[data-toolbar-item]
-		)
-		svg {
-		color: var(--ib-on-fg);
-		stroke: var(--ib-on-fg);
-	}
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	)::before {
-		background: var(--ib-on);
-	}
-	[data-icon-button][data-morph="pill"][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	) {
-		--ib-grow: 1;
-		margin-inline: calc(var(--ib-morph) / 2);
-	}
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	):hover:not(:disabled)::before {
-		background: color-mix(in oklab, var(--ib-on-fg) 10%, var(--ib-on));
-	}
-	/* Pointer down: the corners squeeze. */
-	[data-icon-button][data-morph]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	):active:not(:disabled)::before {
-		border-radius: 30%;
-	}
-	/* The ring follows the pill. */
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	):focus-visible {
-		box-shadow: none;
-	}
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	):focus-visible::before {
-		box-shadow: 0 0 0 3px
-			color-mix(in oklab, var(--color-ring) 50%, transparent);
-	}
-}