@ngrok/mantle 0.82.1 → 0.83.1

package/dist/mantle.css

@@ -262,10 +262,11 @@ MARK: THEME
 	--ring-color-focus-success: var(--ring-color-focus-success);
 
 	/* Chart series tokens — an ordered categorical palette for data visualization.
-	   Each theme file picks the ramp step that passes the palette validation gates
-	   (CVD-safe adjacency, normal-vision floor, >= 3:1 contrast on the card surface)
-	   for that theme. Assign slots to series in order and never re-assign a series'
-	   slot when others are filtered out; series beyond 8 use --color-chart-other. */
+	   Each theme file authors its own eight oklch() literals, measured so every
+	   pair of slots stays apart for full-color readers and for dichromats, and so
+	   every slot clears 3:1 on that theme's card surface. Assign slots to series in
+	   order and never re-assign a series' slot when others are filtered out; series
+	   beyond 8 use --color-chart-other. */
 	--color-chart-1: var(--color-chart-1);
 	--color-chart-2: var(--color-chart-2);
 	--color-chart-3: var(--color-chart-3);
@@ -279,14 +280,27 @@ MARK: THEME
 
 /**
 MARK: LIGHT DEFS
+
+Light's own definitions: the stops that intentionally diverge from Tailwind's
+defaults, and every semantic token built on them. Tailwind's unmodified default
+ramps are NOT restated here — they live in MARK: LIGHT PALETTE RESTORE below,
+scoped to islands, because restating them at `:root` would override a consumer's
+`@theme` palette customization.
+
+The last selector applies this entire block to `.invert-theme` subtrees on
+dark pages: an inverted island is just the opposite theme's own definitions
+re-declared on the island element, where they win over the values inherited
+from `:root` (see MARK: INVERT THEME below).
 */
 :root,
 :root.light,
-:root[data-theme="light"],
-:root[data-applied-theme="light"] {
+:root[data-theme="light"]:not([data-applied-theme]),
+:root[data-applied-theme="light"],
+:root:is(.dark, [data-theme="dark"]:not([data-applied-theme]), [data-applied-theme="dark"])
+	.invert-theme {
 	color-scheme: light;
 
-	/* neutral-50 through neutral-900 match Tailwind v4 defaults exactly — only -950 is custom */
+	/* custom stops that intentionally diverge from the Tailwind defaults */
 	--color-neutral-950: oklch(18.2% 0 0); /* TW4 default is 14.5% — intentionally lighter */
 	--color-sky-600: oklch(55% 0.158 241.966);
 
@@ -315,8 +329,6 @@ MARK: LIGHT DEFS
 	--color-blue-900: oklch(35.3% 0.1525 269.7);
 	--color-blue-950: oklch(26.6% 0.0958 273.2);
 
-	/* red matches Tailwind v4 defaults exactly — no override needed in light mode */
-
 	--background-color-base: var(--color-neutral-50);
 	--background-color-card: var(--color-white);
 	--background-color-popover: var(--color-white);
@@ -363,18 +375,20 @@ MARK: LIGHT DEFS
 	--color-selected-menu-item: --alpha(var(--color-accent-500) / 0.1);
 	--color-active-selected-menu-item: --alpha(var(--color-accent-500) / 0.15);
 
-	/* Chart series tokens — light picks validated against the white card surface:
-	   worst adjacent CVD ΔE 14.0 (target ≥ 8), normal-vision floor 15.7 (≥ 15),
-	   all slots ≥ 3:1 contrast. Semantic ramps (sky/emerald/rose/amber/purple) are
-	   deliberately excluded so a series never reads as a status color. */
-	--color-chart-1: var(--color-blue-500);
-	--color-chart-2: var(--color-green-700);
-	--color-chart-3: var(--color-pink-500);
-	--color-chart-4: var(--color-red-600);
-	--color-chart-5: var(--color-teal-600);
-	--color-chart-6: var(--color-orange-600);
-	--color-chart-7: var(--color-violet-500);
-	--color-chart-8: var(--color-yellow-700);
+	/* Chart series tokens — light's eight marks, in slot order: blue, green, pink,
+	   red-orange, teal, magenta, violet, amber. Each is a bespoke oklch() literal,
+	   tuned so all 28 pairs clear the gates; the ramp steps this replaced held only
+	   the adjacent ones. Measured on the white card surface: worst pair ΔE 15.47 for
+	   full-color vision, 9.58 under simulated protanopia or deuteranopia, 3.61:1
+	   lowest contrast. chart/tokens.test.ts re-measures every number here. */
+	--color-chart-1: oklch(0.622 0.203 259); /* #2d81fe */
+	--color-chart-2: oklch(0.478 0.106 159.7); /* #086f47 */
+	--color-chart-3: oklch(0.644 0.258 1.2); /* #fd0983 */
+	--color-chart-4: oklch(0.519 0.192 31.8); /* #be2409 */
+	--color-chart-5: oklch(0.611 0.103 204.6); /* #0895a0 */
+	--color-chart-6: oklch(0.501 0.208 334.3); /* #a31992 */
+	--color-chart-7: oklch(0.473 0.227 290.6); /* #632bce */
+	--color-chart-8: oklch(0.621 0.125 80.1); /* #ad7d0f */
 	--color-chart-other: var(--color-neutral-500);
 
 	--text-color-strong: var(--color-neutral-950);
@@ -412,6 +426,270 @@ MARK: LIGHT DEFS
 	--bg-indeterminate-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M4 8c0-.55228.44772-1 1-1h6c.5523 0 1 .44772 1 1s-.4477 1-1 1H5c-.55228 0-1-.44772-1-1Z'/%3e%3c/svg%3e");
 }
 
+/**
+MARK: LIGHT PALETTE RESTORE (islands only)
+
+Tailwind's default light palette, materialized so `.invert-theme` islands on
+dark pages restore it — mantle-dark.css never encodes light values. Every value
+is verbatim from the pinned tailwindcss/theme.css (the invert-theme test suite
+pins them against it).
+
+Scoped to the island selector on purpose: `@theme` variables are emitted into
+`@layer theme`, and unlayered author CSS beats every layer, so declaring these
+at `:root` would silently override a consumer's own
+`@theme { --color-<ramp>-<stop>: … }` for all 22 ramps — and ship ~17 KB of
+dead weight to every page that renders no island. At page level Tailwind's own
+defaults already supply these values, so the page needs nothing here.
+
+Limitation: an island restores *mantle's* pinned defaults, so a consumer who
+rebrands a ramp sees it on the page but not inside an island. Closing that gap
+needs a shadow copy of every ramp under a second name (a generated mirror), a
+cost the inversion feature does not justify.
+*/
+:root:is(.dark, [data-theme="dark"]:not([data-applied-theme]), [data-applied-theme="dark"])
+	.invert-theme {
+	--color-white: oklch(100% 0 0);
+	--color-black: oklch(0% 0 0);
+
+	--color-neutral-50: oklch(98.5% 0 none);
+	--color-neutral-100: oklch(97% 0 none);
+	--color-neutral-200: oklch(92.2% 0 none);
+	--color-neutral-300: oklch(87% 0 none);
+	--color-neutral-400: oklch(70.8% 0 none);
+	--color-neutral-500: oklch(55.6% 0 none);
+	--color-neutral-600: oklch(43.9% 0 none);
+	--color-neutral-700: oklch(37.1% 0 none);
+	--color-neutral-800: oklch(26.9% 0 none);
+	--color-neutral-900: oklch(20.5% 0 none);
+
+	--color-red-50: oklch(97.1% 0.013 17.38);
+	--color-red-100: oklch(93.6% 0.032 17.717);
+	--color-red-200: oklch(88.5% 0.062 18.334);
+	--color-red-300: oklch(80.8% 0.114 19.571);
+	--color-red-400: oklch(70.4% 0.191 22.216);
+	--color-red-500: oklch(63.7% 0.237 25.331);
+	--color-red-600: oklch(57.7% 0.245 27.325);
+	--color-red-700: oklch(50.5% 0.213 27.518);
+	--color-red-800: oklch(44.4% 0.177 26.899);
+	--color-red-900: oklch(39.6% 0.141 25.723);
+	--color-red-950: oklch(25.8% 0.092 26.042);
+
+	--color-orange-50: oklch(98% 0.016 73.684);
+	--color-orange-100: oklch(95.4% 0.038 75.164);
+	--color-orange-200: oklch(90.1% 0.076 70.697);
+	--color-orange-300: oklch(83.7% 0.128 66.29);
+	--color-orange-400: oklch(75% 0.183 55.934);
+	--color-orange-500: oklch(70.5% 0.213 47.604);
+	--color-orange-600: oklch(64.6% 0.222 41.116);
+	--color-orange-700: oklch(55.3% 0.195 38.402);
+	--color-orange-800: oklch(47% 0.157 37.304);
+	--color-orange-900: oklch(40.8% 0.123 38.172);
+	--color-orange-950: oklch(26.6% 0.079 36.259);
+
+	--color-amber-50: oklch(98.7% 0.022 95.277);
+	--color-amber-100: oklch(96.2% 0.059 95.617);
+	--color-amber-200: oklch(92.4% 0.12 95.746);
+	--color-amber-300: oklch(87.9% 0.169 91.605);
+	--color-amber-400: oklch(82.8% 0.189 84.429);
+	--color-amber-500: oklch(76.9% 0.188 70.08);
+	--color-amber-600: oklch(66.6% 0.179 58.318);
+	--color-amber-700: oklch(55.5% 0.163 48.998);
+	--color-amber-800: oklch(47.3% 0.137 46.201);
+	--color-amber-900: oklch(41.4% 0.112 45.904);
+	--color-amber-950: oklch(27.9% 0.077 45.635);
+
+	--color-yellow-50: oklch(98.7% 0.026 102.212);
+	--color-yellow-100: oklch(97.3% 0.071 103.193);
+	--color-yellow-200: oklch(94.5% 0.129 101.54);
+	--color-yellow-300: oklch(90.5% 0.182 98.111);
+	--color-yellow-400: oklch(85.2% 0.199 91.936);
+	--color-yellow-500: oklch(79.5% 0.184 86.047);
+	--color-yellow-600: oklch(68.1% 0.162 75.834);
+	--color-yellow-700: oklch(55.4% 0.135 66.442);
+	--color-yellow-800: oklch(47.6% 0.114 61.907);
+	--color-yellow-900: oklch(42.1% 0.095 57.708);
+	--color-yellow-950: oklch(28.6% 0.066 53.813);
+
+	--color-lime-50: oklch(98.6% 0.031 120.757);
+	--color-lime-100: oklch(96.7% 0.067 122.328);
+	--color-lime-200: oklch(93.8% 0.127 124.321);
+	--color-lime-300: oklch(89.7% 0.196 126.665);
+	--color-lime-400: oklch(84.1% 0.238 128.85);
+	--color-lime-500: oklch(76.8% 0.233 130.85);
+	--color-lime-600: oklch(64.8% 0.2 131.684);
+	--color-lime-700: oklch(53.2% 0.157 131.589);
+	--color-lime-800: oklch(45.3% 0.124 130.933);
+	--color-lime-900: oklch(40.5% 0.101 131.063);
+	--color-lime-950: oklch(27.4% 0.072 132.109);
+
+	--color-green-50: oklch(98.2% 0.018 155.826);
+	--color-green-100: oklch(96.2% 0.044 156.743);
+	--color-green-200: oklch(92.5% 0.084 155.995);
+	--color-green-300: oklch(87.1% 0.15 154.449);
+	--color-green-400: oklch(79.2% 0.209 151.711);
+	--color-green-500: oklch(72.3% 0.219 149.579);
+	--color-green-600: oklch(62.7% 0.194 149.214);
+	--color-green-700: oklch(52.7% 0.154 150.069);
+	--color-green-800: oklch(44.8% 0.119 151.328);
+	--color-green-900: oklch(39.3% 0.095 152.535);
+	--color-green-950: oklch(26.6% 0.065 152.934);
+
+	--color-emerald-50: oklch(97.9% 0.021 166.113);
+	--color-emerald-100: oklch(95% 0.052 163.051);
+	--color-emerald-200: oklch(90.5% 0.093 164.15);
+	--color-emerald-300: oklch(84.5% 0.143 164.978);
+	--color-emerald-400: oklch(76.5% 0.177 163.223);
+	--color-emerald-500: oklch(69.6% 0.17 162.48);
+	--color-emerald-600: oklch(59.6% 0.145 163.225);
+	--color-emerald-700: oklch(50.8% 0.118 165.612);
+	--color-emerald-800: oklch(43.2% 0.095 166.913);
+	--color-emerald-900: oklch(37.8% 0.077 168.94);
+	--color-emerald-950: oklch(26.2% 0.051 172.552);
+
+	--color-teal-50: oklch(98.4% 0.014 180.72);
+	--color-teal-100: oklch(95.3% 0.051 180.801);
+	--color-teal-200: oklch(91% 0.096 180.426);
+	--color-teal-300: oklch(85.5% 0.138 181.071);
+	--color-teal-400: oklch(77.7% 0.152 181.912);
+	--color-teal-500: oklch(70.4% 0.14 182.503);
+	--color-teal-600: oklch(60% 0.118 184.704);
+	--color-teal-700: oklch(51.1% 0.096 186.391);
+	--color-teal-800: oklch(43.7% 0.078 188.216);
+	--color-teal-900: oklch(38.6% 0.063 188.416);
+	--color-teal-950: oklch(27.7% 0.046 192.524);
+
+	--color-cyan-50: oklch(98.4% 0.019 200.873);
+	--color-cyan-100: oklch(95.6% 0.045 203.388);
+	--color-cyan-200: oklch(91.7% 0.08 205.041);
+	--color-cyan-300: oklch(86.5% 0.127 207.078);
+	--color-cyan-400: oklch(78.9% 0.154 211.53);
+	--color-cyan-500: oklch(71.5% 0.143 215.221);
+	--color-cyan-600: oklch(60.9% 0.126 221.723);
+	--color-cyan-700: oklch(52% 0.105 223.128);
+	--color-cyan-800: oklch(45% 0.085 224.283);
+	--color-cyan-900: oklch(39.8% 0.07 227.392);
+	--color-cyan-950: oklch(30.2% 0.056 229.695);
+
+	--color-sky-50: oklch(97.7% 0.013 236.62);
+	--color-sky-100: oklch(95.1% 0.026 236.824);
+	--color-sky-200: oklch(90.1% 0.058 230.902);
+	--color-sky-300: oklch(82.8% 0.111 230.318);
+	--color-sky-400: oklch(74.6% 0.16 232.661);
+	--color-sky-500: oklch(68.5% 0.169 237.323);
+	--color-sky-700: oklch(50% 0.134 242.749);
+	--color-sky-800: oklch(44.3% 0.11 240.79);
+	--color-sky-900: oklch(39.1% 0.09 240.876);
+	--color-sky-950: oklch(29.3% 0.066 243.157);
+
+	--color-indigo-50: oklch(96.2% 0.018 272.314);
+	--color-indigo-100: oklch(93% 0.034 272.788);
+	--color-indigo-200: oklch(87% 0.065 274.039);
+	--color-indigo-300: oklch(78.5% 0.115 274.713);
+	--color-indigo-400: oklch(67.3% 0.182 276.935);
+	--color-indigo-500: oklch(58.5% 0.233 277.117);
+	--color-indigo-600: oklch(51.1% 0.262 276.966);
+	--color-indigo-700: oklch(45.7% 0.24 277.023);
+	--color-indigo-800: oklch(39.8% 0.195 277.366);
+	--color-indigo-900: oklch(35.9% 0.144 278.697);
+	--color-indigo-950: oklch(25.7% 0.09 281.288);
+
+	--color-violet-50: oklch(96.9% 0.016 293.756);
+	--color-violet-100: oklch(94.3% 0.029 294.588);
+	--color-violet-200: oklch(89.4% 0.057 293.283);
+	--color-violet-300: oklch(81.1% 0.111 293.571);
+	--color-violet-400: oklch(70.2% 0.183 293.541);
+	--color-violet-500: oklch(60.6% 0.25 292.717);
+	--color-violet-600: oklch(54.1% 0.281 293.009);
+	--color-violet-700: oklch(49.1% 0.27 292.581);
+	--color-violet-800: oklch(43.2% 0.232 292.759);
+	--color-violet-900: oklch(38% 0.189 293.745);
+	--color-violet-950: oklch(28.3% 0.141 291.089);
+
+	--color-purple-50: oklch(97.7% 0.014 308.299);
+	--color-purple-100: oklch(94.6% 0.033 307.174);
+	--color-purple-200: oklch(90.2% 0.063 306.703);
+	--color-purple-300: oklch(82.7% 0.119 306.383);
+	--color-purple-400: oklch(71.4% 0.203 305.504);
+	--color-purple-500: oklch(62.7% 0.265 303.9);
+	--color-purple-600: oklch(55.8% 0.288 302.321);
+	--color-purple-700: oklch(49.6% 0.265 301.924);
+	--color-purple-800: oklch(43.8% 0.218 303.724);
+	--color-purple-900: oklch(38.1% 0.176 304.987);
+	--color-purple-950: oklch(29.1% 0.149 302.717);
+
+	--color-fuchsia-50: oklch(97.7% 0.017 320.058);
+	--color-fuchsia-100: oklch(95.2% 0.037 318.852);
+	--color-fuchsia-200: oklch(90.3% 0.076 319.62);
+	--color-fuchsia-300: oklch(83.3% 0.145 321.434);
+	--color-fuchsia-400: oklch(74% 0.238 322.16);
+	--color-fuchsia-500: oklch(66.7% 0.295 322.15);
+	--color-fuchsia-600: oklch(59.1% 0.293 322.896);
+	--color-fuchsia-700: oklch(51.8% 0.253 323.949);
+	--color-fuchsia-800: oklch(45.2% 0.211 324.591);
+	--color-fuchsia-900: oklch(40.1% 0.17 325.612);
+	--color-fuchsia-950: oklch(29.3% 0.136 325.661);
+
+	--color-pink-50: oklch(97.1% 0.014 343.198);
+	--color-pink-100: oklch(94.8% 0.028 342.258);
+	--color-pink-200: oklch(89.9% 0.061 343.231);
+	--color-pink-300: oklch(82.3% 0.12 346.018);
+	--color-pink-400: oklch(71.8% 0.202 349.761);
+	--color-pink-500: oklch(65.6% 0.241 354.308);
+	--color-pink-600: oklch(59.2% 0.249 0.584);
+	--color-pink-700: oklch(52.5% 0.223 3.958);
+	--color-pink-800: oklch(45.9% 0.187 3.815);
+	--color-pink-900: oklch(40.8% 0.153 2.432);
+	--color-pink-950: oklch(28.4% 0.109 3.907);
+
+	--color-rose-50: oklch(96.9% 0.015 12.422);
+	--color-rose-100: oklch(94.1% 0.03 12.58);
+	--color-rose-200: oklch(89.2% 0.058 10.001);
+	--color-rose-300: oklch(81% 0.117 11.638);
+	--color-rose-400: oklch(71.2% 0.194 13.428);
+	--color-rose-500: oklch(64.5% 0.246 16.439);
+	--color-rose-600: oklch(58.6% 0.253 17.585);
+	--color-rose-700: oklch(51.4% 0.222 16.935);
+	--color-rose-800: oklch(45.5% 0.188 13.697);
+	--color-rose-900: oklch(41% 0.159 10.272);
+	--color-rose-950: oklch(27.1% 0.105 12.094);
+
+	--color-slate-50: oklch(98.4% 0.003 247.858);
+	--color-slate-100: oklch(96.8% 0.007 247.896);
+	--color-slate-200: oklch(92.9% 0.013 255.508);
+	--color-slate-300: oklch(86.9% 0.022 252.894);
+	--color-slate-400: oklch(70.4% 0.04 256.788);
+	--color-slate-500: oklch(55.4% 0.046 257.417);
+	--color-slate-600: oklch(44.6% 0.043 257.281);
+	--color-slate-700: oklch(37.2% 0.044 257.287);
+	--color-slate-800: oklch(27.9% 0.041 260.031);
+	--color-slate-900: oklch(20.8% 0.042 265.755);
+	--color-slate-950: oklch(12.9% 0.042 264.695);
+
+	--color-zinc-50: oklch(98.5% 0 none);
+	--color-zinc-100: oklch(96.7% 0.001 286.375);
+	--color-zinc-200: oklch(92% 0.004 286.32);
+	--color-zinc-300: oklch(87.1% 0.006 286.286);
+	--color-zinc-400: oklch(70.5% 0.015 286.067);
+	--color-zinc-500: oklch(55.2% 0.016 285.938);
+	--color-zinc-600: oklch(44.2% 0.017 285.786);
+	--color-zinc-700: oklch(37% 0.013 285.805);
+	--color-zinc-800: oklch(27.4% 0.006 286.033);
+	--color-zinc-900: oklch(21% 0.006 285.885);
+	--color-zinc-950: oklch(14.1% 0.005 285.823);
+
+	--color-stone-50: oklch(98.5% 0.001 106.423);
+	--color-stone-100: oklch(97% 0.001 106.424);
+	--color-stone-200: oklch(92.3% 0.003 48.717);
+	--color-stone-300: oklch(86.9% 0.005 56.366);
+	--color-stone-400: oklch(70.9% 0.01 56.259);
+	--color-stone-500: oklch(55.3% 0.013 58.071);
+	--color-stone-600: oklch(44.4% 0.011 73.639);
+	--color-stone-700: oklch(37.4% 0.01 67.558);
+	--color-stone-800: oklch(26.8% 0.007 34.298);
+	--color-stone-900: oklch(21.6% 0.006 56.043);
+	--color-stone-950: oklch(14.7% 0.004 49.25);
+}
+
 /**
 MARK: COMPONENT GEOMETRY
 */
@@ -432,13 +710,138 @@ MARK: COMPONENT GEOMETRY
 	--sidebar-row-width: calc(var(--sidebar-width, 16rem) - 1rem);
 }
 
+/**
+MARK: INVERT THEME
+
+The `invert-theme` class renders a DOM subtree in the opposite theme of the
+page: light ⇄ dark and light-high-contrast ⇄ dark-high-contrast.
+
+Mechanism: every mantle color utility resolves a CSS custom property at the
+element that uses it, and custom properties inherit — so re-declaring the
+theme variables on one element re-themes its entire subtree. Each theme
+block's selector list therefore also matches `.invert-theme` subtrees on its
+pair partner's pages (see the LIGHT DEFS selector above and the equivalent
+extensions in the three theme stylesheets); the island is styled by the
+opposite theme's own single-source-of-truth declarations, never by a copy.
+
+Requirements and limitations:
+- The opposite theme's stylesheet must be applied. `MantleStyleSheets` loads
+  theme pairs together (the active theme's partner also gets `media="all"`),
+  so this holds automatically for apps using mantle's theme infrastructure.
+- Portaled floating content (dropdown menus, tooltips, dialogs, …) escapes
+  the island's DOM subtree and renders in the page theme. Pass `invert-theme`
+  in the floating part's `className` to invert it too.
+- Theme variant utilities (`dark:*`, `light:*`, `high-contrast:*`,
+  `dark-high-contrast:*`) key off the page theme classes on `:root`, not the
+  inversion scope, so they do not flip inside an island. This includes the six
+  mantle internals that still carry variant-gated tweaks — Progress Bar,
+  Progress Donut, RadioGroup, Skeleton, Table, and Toast — so composing those
+  inside an island mixes page-variant selection with island-resolved variables
+  until they migrate to theme-declared tokens. Redefining the variants cannot
+  fix this: they are already scope-relative (`&:where(.dark, .dark *, …)`), and
+  "nearest theme scope wins" is not expressible for a light island under a dark
+  root, so consumer `dark:*` usage inside an island has no remedy either.
+- Semantic tokens are re-declared ON the island (see the palette-alias rule
+  below), and a declaration on the element beats a value inherited from an
+  ancestor. So a consumer who rebrands at the alias level
+  (`:root { --color-accent-600: … }`) does not see it inside islands — rebrand
+  at the ramp level (`--color-sky-600`) instead, which the aliases resolve
+  through.
+- Nesting `invert-theme` inside an inverted subtree is idempotent: the inner
+  island stays inverted relative to the page (it does not revert).
+- Box shadows flip with the island: shadow utilities inline
+  `var(--shadow-color)` / `var(--shadow-*-opacity)` at the consuming element,
+  and the theme blocks re-declare those tokens on islands — so content inside
+  a light island gets light-theme shadows, which keeps the island's interior
+  coherent.
+
+The rule below re-declares the palette aliases from the `@theme` block so
+they re-resolve against the island's inverted ramps: `@theme` variables are
+emitted at `:root`, where e.g. `--color-accent-500` computes to the page
+theme's sky-500 before the island can flip it. Keep it in sync with the
+`@theme` aliases — the invert-theme test suite enforces the pairing.
+*/
+.invert-theme {
+	--color-accent-50: var(--color-sky-50);
+	--color-accent-100: var(--color-sky-100);
+	--color-accent-200: var(--color-sky-200);
+	--color-accent-300: var(--color-sky-300);
+	--color-accent-400: var(--color-sky-400);
+	--color-accent-500: var(--color-sky-500);
+	--color-accent-600: var(--color-sky-600);
+	--color-accent-700: var(--color-sky-700);
+	--color-accent-800: var(--color-sky-800);
+	--color-accent-900: var(--color-sky-900);
+	--color-accent-950: var(--color-sky-950);
+
+	--color-info-50: var(--color-accent-50);
+	--color-info-100: var(--color-accent-100);
+	--color-info-200: var(--color-accent-200);
+	--color-info-300: var(--color-accent-300);
+	--color-info-400: var(--color-accent-400);
+	--color-info-500: var(--color-accent-500);
+	--color-info-600: var(--color-accent-600);
+	--color-info-700: var(--color-accent-700);
+	--color-info-800: var(--color-accent-800);
+	--color-info-900: var(--color-accent-900);
+	--color-info-950: var(--color-accent-950);
+
+	--color-danger-50: var(--color-rose-50);
+	--color-danger-100: var(--color-rose-100);
+	--color-danger-200: var(--color-rose-200);
+	--color-danger-300: var(--color-rose-300);
+	--color-danger-400: var(--color-rose-400);
+	--color-danger-500: var(--color-rose-500);
+	--color-danger-600: var(--color-rose-600);
+	--color-danger-700: var(--color-rose-700);
+	--color-danger-800: var(--color-rose-800);
+	--color-danger-900: var(--color-rose-900);
+	--color-danger-950: var(--color-rose-950);
+
+	--color-warning-50: var(--color-amber-50);
+	--color-warning-100: var(--color-amber-100);
+	--color-warning-200: var(--color-amber-200);
+	--color-warning-300: var(--color-amber-300);
+	--color-warning-400: var(--color-amber-400);
+	--color-warning-500: var(--color-amber-500);
+	--color-warning-600: var(--color-amber-600);
+	--color-warning-700: var(--color-amber-700);
+	--color-warning-800: var(--color-amber-800);
+	--color-warning-900: var(--color-amber-900);
+	--color-warning-950: var(--color-amber-950);
+
+	--color-success-50: var(--color-emerald-50);
+	--color-success-100: var(--color-emerald-100);
+	--color-success-200: var(--color-emerald-200);
+	--color-success-300: var(--color-emerald-300);
+	--color-success-400: var(--color-emerald-400);
+	--color-success-500: var(--color-emerald-500);
+	--color-success-600: var(--color-emerald-600);
+	--color-success-700: var(--color-emerald-700);
+	--color-success-800: var(--color-emerald-800);
+	--color-success-900: var(--color-emerald-900);
+	--color-success-950: var(--color-emerald-950);
+
+	--color-important-50: var(--color-purple-50);
+	--color-important-100: var(--color-purple-100);
+	--color-important-200: var(--color-purple-200);
+	--color-important-300: var(--color-purple-300);
+	--color-important-400: var(--color-purple-400);
+	--color-important-500: var(--color-purple-500);
+	--color-important-600: var(--color-purple-600);
+	--color-important-700: var(--color-purple-700);
+	--color-important-800: var(--color-purple-800);
+	--color-important-900: var(--color-purple-900);
+	--color-important-950: var(--color-purple-950);
+}
+
 /**
 MARK: CUSTOM VARIANTS
 */
-@custom-variant light (&:where(.light, .light *, [data-theme="light"], [data-applied-theme="light"]));
-@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-applied-theme="dark"]));
-@custom-variant high-contrast (&:where(.light-high-contrast, .light-high-contrast *, [data-theme="light-high-contrast"], [data-applied-theme="light-high-contrast"]));
-@custom-variant dark-high-contrast (&:where(.dark-high-contrast, .dark-high-contrast *, [data-theme="dark-high-contrast"], [data-applied-theme="dark-high-contrast"]));
+@custom-variant light (&:where(.light, .light *, [data-theme="light"]:not([data-applied-theme]), [data-applied-theme="light"]));
+@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"]:not([data-applied-theme]), [data-applied-theme="dark"]));
+@custom-variant high-contrast (&:where(.light-high-contrast, .light-high-contrast *, [data-theme="light-high-contrast"]:not([data-applied-theme]), [data-applied-theme="light-high-contrast"]));
+@custom-variant dark-high-contrast (&:where(.dark-high-contrast, .dark-high-contrast *, [data-theme="dark-high-contrast"]:not([data-applied-theme]), [data-applied-theme="dark-high-contrast"]));
 
 @custom-variant aria-collapsed (&[aria-expanded="false"]);
 @custom-variant aria-invalid (&[aria-invalid="true"]);
@@ -825,8 +1228,15 @@ MARK: UTILITIES
 
 /*
 MARK: SHIKI SYNTAX HIGHLIGHT
+
+Also declared on `.invert-theme` islands: these tokens reference theme-dependent
+variables, and their `var()` references substitute at the element that declares
+them — re-declaring them on the island makes them re-resolve against the
+island's inverted ramps instead of inheriting the page-theme values computed
+at `:root` (same reason as the palette-alias rule in MARK: INVERT THEME).
 */
-:root {
+:root,
+.invert-theme {
 	--shiki-foreground: var(--text-color-strong);
 	--shiki-background: transparent;
 	--shiki-color-text: var(--shiki-foreground);

package/dist/media-object.d.ts

@@ -96,11 +96,15 @@ declare const Content: ({ asChild, className, children, style, ref }: Props) =>
  *
  * @example
  * ```tsx
+ * import { Avatar } from "@ngrok/mantle/avatar";
  * import { MediaObject } from "@ngrok/mantle/media-object";
  *
  * <MediaObject.Root>
  *   <MediaObject.Media>
- *     <Avatar src={user.avatarUrl} alt="" />
+ *     <Avatar.Root>
+ *       <Avatar.Image src={user.avatarUrl} alt="" />
+ *       <Avatar.Fallback name={user.name} />
+ *     </Avatar.Root>
  *   </MediaObject.Media>
  *   <MediaObject.Content>
  *     <p className="font-medium">{user.name}</p>

package/dist/multi-select.d.ts

@@ -1,13 +1,13 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { o as WithValidation } from "./field-7QeiTFwl.js";
-import { n as Separator } from "./separator-B5UmkVRL.js";
+import { n as Separator } from "./separator-CNDs98Dv.js";
 import { ComponentProps, ReactNode } from "react";
 import * as Primitive from "@ariakit/react";
 //#region src/components/multi-select/multi-select.d.ts
 type MultiSelectProps = Primitive.ComboboxProviderProps<string[]>;
 /**
- * Root component for a multi-select combobox. Provides state management for
- * selecting multiple values with typeahead filtering.
+ * Root component for a multi-select combobox. Owns the selected values and the
+ * typeahead query.
  *
  * Use MultiSelect when the user can choose multiple values from a list, with selected
  * items rendered as removable tags/chips. For single selection, use Combobox (with search)
@@ -111,7 +111,7 @@ declare const Tag: ({ className, value, onRemove, locked, onKeyDown, ref, ...pro
  *
  * Pre-wired handlers included:
  * - `onKeyDown` — arrow-key nav between tags, Backspace/Delete to remove
- * - `onClick` — focuses the tag and ensures the popover opens/stays open
+ * - `onClick` — focuses the tag and opens the popover, or keeps it open
  */
 type TagRenderProps = TagProps & {
   /** Ref callback — forward this to the tag element to enable keyboard navigation between tags. */
@@ -304,7 +304,7 @@ declare const GroupLabel: ({ asChild, children, className, ref, ...props }: Mult
 type MultiSelectGroupDescriptionProps = ComponentProps<"p">;
 /**
  * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.
- * Provides context about the group's purpose or constraints.
+ * States the group's purpose or constraints.
  *
  * @see https://mantle.ngrok.com/components/forms/multi-select#multiselectgroupdescription
  *
@@ -453,8 +453,8 @@ declare const ContentFooter: ({ className, children, ref, ...props }: MultiSelec
  */
 declare const MultiSelect: {
   /**
-   * Root component for a multi-select combobox. Provides state management for
-   * selecting multiple values with typeahead filtering.
+   * Root component for a multi-select combobox. Owns the selected values and
+   * the typeahead query.
    *
    * Use MultiSelect when the user can choose multiple values from a list, with selected
    * items rendered as removable tags/chips. For single selection, use Combobox (with search)

package/dist/multi-select.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-lZ48P8Nn.js";import{t as r}from"./slot-DpNWVci8.js";import{a as i,r as a}from"./field-Bpptk_9t.js";import{t as o}from"./field-B1wqeZr4.js";import{n as s}from"./separator-D0D6VyyM.js";import{t as c}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{createContext as l,useCallback as u,useContext as d,useEffect as f,useMemo as p,useRef as m,useState as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{XIcon as y}from"@phosphor-icons/react/X";import{CheckIcon as b}from"@phosphor-icons/react/Check";import*as x from"@ariakit/react";import{LockIcon as S}from"@phosphor-icons/react/Lock";const C=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),w=[],T=l({current:null}),E=l({current:[]}),D=l({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),O=({children:e,defaultSelectedValue:t=w,...n})=>{let r=m(null),i=m(void 0),a=m(null),o=m([]),s=p(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return _(T.Provider,{value:r,children:_(D.Provider,{value:s,children:_(E.Provider,{value:o,children:_(x.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})},k=({"aria-invalid":n,className:r,children:o,onKeyDown:s,onMouseDown:c,ref:l,validation:u,...f})=>{let p=d(T),{inputRef:m}=d(D),h=x.useComboboxContext(),g=i(),{validation:v}=a({"aria-invalid":n,validation:u??g});return _(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:t(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,r),"data-validation":v||void 0,onKeyDown:e=>{e.key===`Escape`&&h?.getState().open&&(e.preventDefault(),h.hide()),s?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),m.current?.focus()),c?.(e)},ref:e(p,l),...f,children:o})},A=({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,ref:c,...l})=>{let u=m(null);return v(`span`,{ref:e(u,c),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:t(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,r),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),M(e.currentTarget);return}s?.(e)},...l,children:[i,_(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:t(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&M(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:_(n,{svg:o?_(S,{}):_(y,{weight:`bold`}),className:`size-4`})})]})},j={Root:O,Trigger:k,TagValues:({children:e,lockedValues:t=w})=>{let n=x.useComboboxContext(),r=x.useStoreState(n,`selectedValue`),i=(C(r)?r:void 0)??w,a=m(i);a.current=i;let o=d(E);o.current=t;let s=p(()=>new Set(t),[t]),c=m(new Map),{onInputKeyDownRef:l,inputRef:u}=d(D),h=m(new Set);f(()=>()=>{h.current.forEach(cancelAnimationFrame)},[]);let v=e=>{let t=requestAnimationFrame(()=>{h.current.delete(t),e()});h.current.add(t)},y=e=>{if(n){let t=n.getState().selectedValue;if(!C(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},b=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},S=()=>{u.current?.focus()},T=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&b(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?b(t+1):S();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&M(e);break}if(y(n),e.key===`Backspace`)if(t>0){let e=t-1;v(()=>b(e))}else v(()=>{a.current.length>0?b(0):S()});else v(()=>{t<a.current.length?b(t):S()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),S(),u.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&S();break}};return l.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),b(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&M(t)}else y(e)}},_(g,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&M(e);return}y(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>T(e,n),onClick:()=>b(n)};return e?e(r):_(A,{...r},t)})})},Input:({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:s,onValueChange:c,placeholder:l,ref:u,...f})=>{let p=x.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=d(D),g=d(o),v=x.useStoreState(p,`selectedValue`),y=((C(v)?v:void 0)?.length??0)>0;return _(x.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:t(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,n),onChange:e=>{c?.(e.target.value),i?.(e)},onKeyDown:e=>{m.current?.(e),s?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&p?.show(),r?.(e)},onFocus:e=>{p?.show(),a?.(e)},placeholder:y?void 0:l,ref:e(h,u),...f,...g?{"aria-describedby":g[`aria-describedby`],"aria-errormessage":g[`aria-errormessage`],"aria-invalid":g[`aria-invalid`],id:g.id,name:g.name}:void 0})},Tag:A,Content:({asChild:e=!1,backdrop:n=!1,children:i,className:a,modal:o=!0,portalElement:s,preventBodyScroll:c,ref:l,sameWidth:p=!0,unmountOnHide:m=!0,...g})=>{let v=d(T),[y,b]=h(!1);f(()=>{b(v.current?.closest(`[data-mantle-modal-content]`)!=null)},[v]);let S=u(()=>v.current?.getBoundingClientRect()??null,[v]),C=u(e=>typeof s==`function`?s(e):s??v.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,v]),w=u(e=>!(e.target instanceof Node&&v.current?.contains(e.target)),[v]);return _(x.ComboboxPopover,{"data-slot":`multi-select-content`,className:t(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,a),backdrop:n,getAnchorRect:S,gutter:4,hideOnInteractOutside:w,modal:o,portalElement:C,preventBodyScroll:c??!y,ref:l,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,sameWidth:p,unmountOnHide:m,...g,children:i})},ContentFooter:({className:e,children:n,ref:r,...i})=>_(`div`,{ref:r,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...i,children:n}),Item:({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,ref:l,...u})=>{let f=d(E),p=s!=null&&f.current.includes(s);return v(x.ComboboxItem,{"data-slot":`multi-select-item`,className:t(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:l,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,_(x.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:_(n,{svg:_(b,{weight:`bold`}),className:`size-4 text-accent-600`})})]})},Group:({asChild:e=!1,children:t,ref:n,...i})=>_(x.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:n,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...i,children:t}),GroupLabel:({asChild:e=!1,children:n,className:i,ref:a,...o})=>_(x.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:a,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...o,children:n}),GroupDescription:({className:e,children:n,ref:r,...i})=>_(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:r,...i,children:n}),Separator:({className:e,ref:n,...r})=>_(s,{"data-slot":`multi-select-separator`,ref:n,className:t(`my-1 w-auto`,e),...r}),Empty:({className:e,children:n,ref:r,...i})=>_(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:r,role:`presentation`,...i,children:n})};function M(e){c()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{j as MultiSelect};
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-lZ48P8Nn.js";import{t as r}from"./slot-DpNWVci8.js";import{a as i,r as a}from"./field-Bpptk_9t.js";import{t as o}from"./field-B1wqeZr4.js";import{n as s}from"./separator-D0D6VyyM.js";import{t as c}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{createContext as l,useCallback as u,useContext as d,useEffect as f,useMemo as p,useRef as m,useState as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{XIcon as y}from"@phosphor-icons/react/X";import{CheckIcon as b}from"@phosphor-icons/react/Check";import*as x from"@ariakit/react";import{LockIcon as S}from"@phosphor-icons/react/Lock";const C=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),w=[],T=l({current:null}),E=l({current:[]}),D=l({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),O=({children:e,defaultSelectedValue:t=w,...n})=>{let r=m(null),i=m(void 0),a=m(null),o=m([]),s=p(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return _(T.Provider,{value:r,children:_(D.Provider,{value:s,children:_(E.Provider,{value:o,children:_(x.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})},k=({"aria-invalid":n,className:r,children:o,onKeyDown:s,onMouseDown:c,ref:l,validation:u,...f})=>{let p=d(T),{inputRef:m}=d(D),h=x.useComboboxContext(),g=i(),{validation:v}=a({"aria-invalid":n,validation:u??g});return _(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:t(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,r),"data-validation":v||void 0,onKeyDown:e=>{e.key===`Escape`&&h?.getState().open&&(e.preventDefault(),h.hide()),s?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),m.current?.focus()),c?.(e)},ref:e(p,l),...f,children:o})},A=({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,ref:c,...l})=>{let u=m(null);return v(`span`,{ref:e(u,c),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:t(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,r),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),M(e.currentTarget);return}s?.(e)},...l,children:[i,_(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:t(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&M(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:_(n,{svg:o?_(S,{}):_(y,{weight:`bold`}),className:`size-4`})})]})},j={Root:O,Trigger:k,TagValues:({children:e,lockedValues:t=w})=>{let n=x.useComboboxContext(),r=x.useStoreState(n,`selectedValue`),i=(C(r)?r:void 0)??w,a=m(i);a.current=i;let o=d(E);o.current=t;let s=p(()=>new Set(t),[t]),c=m(new Map),{onInputKeyDownRef:l,inputRef:u}=d(D),h=m(new Set);f(()=>()=>{h.current.forEach(cancelAnimationFrame)},[]);let v=e=>{let t=requestAnimationFrame(()=>{h.current.delete(t),e()});h.current.add(t)},y=e=>{if(n){let t=n.getState().selectedValue;if(!C(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},b=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},S=()=>{u.current?.focus()},T=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&b(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?b(t+1):S();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&M(e);break}if(y(n),e.key===`Backspace`)if(t>0){let e=t-1;v(()=>b(e))}else v(()=>{a.current.length>0?b(0):S()});else v(()=>{t<a.current.length?b(t):S()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),S(),u.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&S()}};return l.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),b(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&M(t)}else y(e)}},_(g,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&M(e);return}y(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>T(e,n),onClick:()=>b(n)};return e?e(r):_(A,{...r},t)})})},Input:({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:s,onValueChange:c,placeholder:l,ref:u,...f})=>{let p=x.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=d(D),g=d(o),v=x.useStoreState(p,`selectedValue`),y=((C(v)?v:void 0)?.length??0)>0;return _(x.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:t(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,n),onChange:e=>{c?.(e.target.value),i?.(e)},onKeyDown:e=>{m.current?.(e),s?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&p?.show(),r?.(e)},onFocus:e=>{p?.show(),a?.(e)},placeholder:y?void 0:l,ref:e(h,u),...f,...g?{"aria-describedby":g[`aria-describedby`],"aria-errormessage":g[`aria-errormessage`],"aria-invalid":g[`aria-invalid`],id:g.id,name:g.name}:void 0})},Tag:A,Content:({asChild:e=!1,backdrop:n=!1,children:i,className:a,modal:o=!0,portalElement:s,preventBodyScroll:c,ref:l,sameWidth:p=!0,unmountOnHide:m=!0,...g})=>{let v=d(T),[y,b]=h(!1);f(()=>{b(v.current?.closest(`[data-mantle-modal-content]`)!=null)},[v]);let S=u(()=>v.current?.getBoundingClientRect()??null,[v]),C=u(e=>typeof s==`function`?s(e):s??v.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,v]),w=u(e=>!(e.target instanceof Node&&v.current?.contains(e.target)),[v]);return _(x.ComboboxPopover,{"data-slot":`multi-select-content`,className:t(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,a),backdrop:n,getAnchorRect:S,gutter:4,hideOnInteractOutside:w,modal:o,portalElement:C,preventBodyScroll:c??!y,ref:l,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,sameWidth:p,unmountOnHide:m,...g,children:i})},ContentFooter:({className:e,children:n,ref:r,...i})=>_(`div`,{ref:r,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...i,children:n}),Item:({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,ref:l,...u})=>{let f=d(E),p=s!=null&&f.current.includes(s);return v(x.ComboboxItem,{"data-slot":`multi-select-item`,className:t(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:l,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,_(x.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:_(n,{svg:_(b,{weight:`bold`}),className:`size-4 text-accent-600`})})]})},Group:({asChild:e=!1,children:t,ref:n,...i})=>_(x.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:n,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...i,children:t}),GroupLabel:({asChild:e=!1,children:n,className:i,ref:a,...o})=>_(x.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:a,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...o,children:n}),GroupDescription:({className:e,children:n,ref:r,...i})=>_(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:r,...i,children:n}),Separator:({className:e,ref:n,...r})=>_(s,{"data-slot":`multi-select-separator`,ref:n,className:t(`my-1 w-auto`,e),...r}),Empty:({className:e,children:n,ref:r,...i})=>_(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:r,role:`presentation`,...i,children:n})};function M(e){c()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{j as MultiSelect};

package/dist/otp-input.d.ts

@@ -104,11 +104,11 @@ type OtpInputSlotProps = ComponentProps<"div"> & {
 declare const OtpInputSlotImpl: ({ className, index, ref, ...props }: OtpInputSlotProps) => import("react").JSX.Element;
 type OtpInputSeparatorProps = ComponentProps<"div"> & WithAsChild & {
   /**
-   * If `true`, the separator will be rendered with `role="separator"` so
-   * assistive tech announces it as a divider between OTP groups.
+   * If `true`, the separator renders with `role="separator"` so assistive
+   * tech announces it as a divider between OTP groups.
    * If `false`, the separator is purely decorative and is removed from
    * the accessibility tree — preferred inside an OTP control where the
-   * minus icon is just visual chrome between slot groups.
+   * minus icon is visual chrome between slot groups.
    *
    * @default false
    */
@@ -176,7 +176,7 @@ declare const Separator: ({ asChild, children, className, ref, semantic, ...prop
 declare const OtpInput: {
   /**
    * The root of the OTP input. Wraps the hidden input that captures
-   * keystrokes, paste, and autofill, and provides per-slot state to
+   * keystrokes, paste, and autofill, and exposes per-slot state to
    * descendant `OtpInput.Slot` parts.
    *
    * @see https://mantle.ngrok.com/components/forms/otp-input