elements-kit 0.15.0 → 0.17.0

package/dist/{benchmark.CX_oY03V-CSLAXL5f.mjs → benchmark.CX_oY03V-CsUg-gW0.mjs}

@@ -4099,6 +4099,14 @@ function afterEach(fn, timeout) {
 	};
 	return getCurrentSuite().on("afterEach", withTimeout(wrapper, timeout ?? getDefaultHookTimeout(), true, /* @__PURE__ */ new Error("STACK_TRACE_ERROR"), abortIfTimeout));
 }
+createTestHook("onTestFailed", (test, handler, timeout) => {
+	test.onFailed ||= [];
+	test.onFailed.push(withTimeout(handler, timeout ?? getDefaultHookTimeout(), true, /* @__PURE__ */ new Error("STACK_TRACE_ERROR"), abortIfTimeout));
+});
+createTestHook("onTestFinished", (test, handler, timeout) => {
+	test.onFinished ||= [];
+	test.onFinished.push(withTimeout(handler, timeout ?? getDefaultHookTimeout(), true, /* @__PURE__ */ new Error("STACK_TRACE_ERROR"), abortIfTimeout));
+});
 /**
 * Registers a callback function that wraps around all tests within the current suite.
 * The callback receives a `runSuite` function that must be called to run the suite's tests.
@@ -4198,6 +4206,14 @@ function withSuiteFixtures(suiteHook, fn, context, stackTraceError, contextIndex
 		})();
 	};
 }
+function createTestHook(name, handler) {
+	return (fn, timeout) => {
+		assertTypes(fn, `"${name}" callback`, ["function"]);
+		const current = getCurrentTest();
+		if (!current) throw new Error(`Hook ${name}() can only be called inside a test`);
+		return handler(current, fn, timeout);
+	};
+}
 function findTestFileStackTrace(testFilePath, error) {
 	const lines = error.split("\n").slice(1);
 	for (const line of lines) {
@@ -4926,7 +4942,7 @@ function makeTimeoutError(isHook, timeout, stackTraceError) {
 }
 globalThis.performance ? globalThis.performance.now.bind(globalThis.performance) : Date.now;
 globalThis.performance ? globalThis.performance.now.bind(globalThis.performance) : Date.now;
-Date.now;
+const unixNow = Date.now;
 const { clearTimeout, setTimeout: setTimeout$1 } = getSafeTimers();
 const packs = /* @__PURE__ */ new Map();
 const eventsPacks = [];
@@ -4953,6 +4969,21 @@ async function finishSendTasksUpdate(runner) {
 	sendTasksUpdate(runner);
 	await Promise.all(pendingTasksUpdates);
 }
+function throttle(fn, ms) {
+	let last = 0;
+	let pendingCall;
+	return function call(...args) {
+		const now = unixNow();
+		if (now - last > ms) {
+			last = now;
+			clearTimeout(pendingCall);
+			pendingCall = void 0;
+			return fn.apply(this, args);
+		}
+		pendingCall ??= setTimeout$1(() => call.bind(this)(...args), ms);
+	};
+}
+throttle(sendTasksUpdate, 100);
 /**
 * @experimental
 * @advanced

package/dist/{element-D6xVuWdX.mjs → element-DGuUvJM4.mjs}

@@ -1,4 +1,4 @@
-import { c as effectScope, g as untracked, p as onCleanup, s as effect } from "./lib-Dkc7cV5F.mjs";
+import { c as effectScope, g as untracked, p as onCleanup, s as effect } from "./lib-Cg8fI7K5.mjs";
 import "./polyfill-CdZVCxdo.mjs";
 import { isReactive, resolveProps } from "./signals/index.mjs";
 import { on } from "./utilities/event-listener.mjs";

package/dist/for.mjs

@@ -1,6 +1,6 @@
-import { c as effectScope, g as untracked, h as trigger, m as signal, p as onCleanup, s as effect } from "./lib-Dkc7cV5F.mjs";
+import { c as effectScope, g as untracked, h as trigger, m as signal, p as onCleanup, s as effect } from "./lib-Cg8fI7K5.mjs";
 import "./signals/index.mjs";
-import { n as disposeElement } from "./element-D6xVuWdX.mjs";
+import { n as disposeElement } from "./element-DGuUvJM4.mjs";
 //#region src/for.ts
 /**
 * Keyed list renderer. See {@link ForProps} for prop details.

package/dist/integrations/react.mjs

@@ -1,6 +1,6 @@
-import { m as signal, s as effect } from "../lib-Dkc7cV5F.mjs";
+import { m as signal, s as effect } from "../lib-Cg8fI7K5.mjs";
 import "../signals/index.mjs";
-import { t as scope } from "../scope-CnEvL9Nd.mjs";
+import { t as scope } from "../scope-De6rSJvq.mjs";
 import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 //#region src/integrations/react.ts
 /**

package/dist/jsx-runtime/index.d.mts

@@ -1,2 +1,2 @@
 import { U as createElement, _ as SlotProps, a as RawProps, b as MaybeReactive, c as ResolveProps, d as ComponentClass, f as ComponentFn, g as JSX, h as Attrs, i as Props, l as Child, m as PropsTarget, n as ElementProps, o as ReactiveProps, p as ComponentInstance, r as MaybeReactiveProps, s as Require, t as ComponentProps, u as Component, v as Fragment } from "../infer-DGtBn6Nm.mjs";
-export { Attrs, type Child, type Component, type ComponentClass, type ComponentFn, type ComponentInstance, type ComponentProps, type ElementProps, Fragment, JSX, type MaybeReactive, type MaybeReactiveProps, type Props, type PropsTarget, type RawProps, type ReactiveProps, type Require, type ResolveProps, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };
+export { Attrs, Child, Component, ComponentClass, ComponentFn, ComponentInstance, ComponentProps, ElementProps, Fragment, JSX, MaybeReactive, MaybeReactiveProps, Props, PropsTarget, RawProps, ReactiveProps, Require, ResolveProps, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime/index.mjs

@@ -1,4 +1,4 @@
-import { r as mountChild, t as createElement } from "../element-D6xVuWdX.mjs";
+import { r as mountChild, t as createElement } from "../element-DGuUvJM4.mjs";
 //#region src/jsx-runtime/fragment.ts
 /**
 * Used by the JSX transform for `<>...</>` fragments.

package/dist/{lib-Dkc7cV5F.mjs → lib-Cg8fI7K5.mjs}

@@ -295,27 +295,12 @@ const COMPUTED = Symbol("computed");
 const EFFECT = Symbol("effect");
 const EFFECT_SCOPE = Symbol("effectScope");
 const { link, unlink, propagate, checkDirty, shallowPropagate } = createReactiveSystem({
-	/**
-	* Called by the graph engine when a Mutable+Dirty node needs to recompute.
-	* Dispatches by tagged property:
-	*
-	* - `'getter' in node`     → computed: delegate to `updateComputed`.
-	* - `'currentValue' in node` → signal: delegate to `updateSignal`.
-	* - else                    → effectScope: mark `Mutable` and report
-	*   "changed", so any parent effect re-evaluates as if the scope itself
-	*   propagated.
-	*/
 	update(node) {
 		if ("getter" in node) return updateComputed(node);
 		if ("currentValue" in node) return updateSignal(node);
 		node.flags = 1;
 		return true;
 	},
-	/**
-	* Called when an effect node is notified that one of its deps is dirty.
-	* Inserts the effect into the flush queue in dependency order (parents
-	* before children) so that effects always run in topological order.
-	*/
 	notify(effect) {
 		let insertIndex = queuedLength;
 		let firstInsertedIndex = insertIndex;
@@ -332,22 +317,6 @@ const { link, unlink, propagate, checkDirty, shallowPropagate } = createReactive
 			queued[insertIndex] = left;
 		}
 	},
-	/**
-	* Called when a dep node loses its last subscriber.
-	*
-	* Dispatch by tagged property:
-	*
-	* - **computed** (`'getter' in node`): if it had deps, reset to Dirty so
-	*   it recomputes lazily if a new subscriber appears later. Cleanups
-	*   registered via {@link onCleanup} during the previous run are flushed
-	*   (outside any tracking context). Child effects/scopes created in the
-	*   getter are released in LIFO order via {@link disposeAllDepsInReverse}.
-	* - **signal** (`'currentValue' in node`): no-op. Signals stay live so a
-	*   future subscriber can read the latest value.
-	* - **effect** (`'fn' in node`): cascade-dispose via `effectOper`
-	*   (children first, then own cleanup).
-	* - **effectScope** (else): cascade-dispose via `effectScopeOper`.
-	*/
 	unwatched(node) {
 		if ("getter" in node) {
 			const c = node;

package/dist/render.mjs

@@ -1,4 +1,4 @@
-import { t as scope } from "./scope-CnEvL9Nd.mjs";
+import { t as scope } from "./scope-De6rSJvq.mjs";
 //#region src/render.ts
 /**
 * Mount a node into `target` with a scoped lifetime.

package/dist/{scope-CnEvL9Nd.mjs → scope-De6rSJvq.mjs}

@@ -1,4 +1,4 @@
-import { c as effectScope, g as untracked } from "./lib-Dkc7cV5F.mjs";
+import { c as effectScope, g as untracked } from "./lib-Cg8fI7K5.mjs";
 //#region src/signals/scope.ts
 /**
 * Run `setup` inside a fresh `effectScope`. Returns `[result, stop]`.

package/dist/signals/index.mjs

@@ -1,4 +1,4 @@
-import { a as batch, c as effectScope, d as isEffectScope, f as isSignal, g as untracked, h as trigger, i as SIGNAL, l as isComputed, m as signal, n as EFFECT, o as computed, p as onCleanup, r as EFFECT_SCOPE, s as effect, t as COMPUTED, u as isEffect } from "../lib-Dkc7cV5F.mjs";
+import { a as batch, c as effectScope, d as isEffectScope, f as isSignal, g as untracked, h as trigger, i as SIGNAL, l as isComputed, m as signal, n as EFFECT, o as computed, p as onCleanup, r as EFFECT_SCOPE, s as effect, t as COMPUTED, u as isEffect } from "../lib-Cg8fI7K5.mjs";
 import "../polyfill-CdZVCxdo.mjs";
 //#region src/signals/index.ts
 /**

package/dist/{test.BmQO5GaM-Ddz9cDxc.mjs → test.BmQO5GaM-ZC2MPXQb.mjs}

@@ -1,4 +1,4 @@
-import { A as plugins, C as getCallLastIndex, D as ordinal, E as noop, O as stringify, S as createSimpleStackTrace, T as isObject, _ as getSafeTimers, a as waitForImportsToResolve, b as printDiffOrStringify, d as getNames, g as delay, h as parseSingleStack, i as resetModules, j as y, k as format, m as parseErrorStacktrace, n as getWorkerState, r as isChildProcess, u as getCurrentTest, v as processError, w as getType, x as assertTypes, y as diff } from "./benchmark.CX_oY03V-CSLAXL5f.mjs";
+import { A as plugins, C as getCallLastIndex, D as ordinal, E as noop, O as stringify, S as createSimpleStackTrace, T as isObject, _ as getSafeTimers, a as waitForImportsToResolve, b as printDiffOrStringify, d as getNames, g as delay, h as parseSingleStack, i as resetModules, j as y, k as format, m as parseErrorStacktrace, n as getWorkerState, r as isChildProcess, u as getCurrentTest, v as processError, w as getType, x as assertTypes, y as diff } from "./benchmark.CX_oY03V-CsUg-gW0.mjs";
 //#region node_modules/.pnpm/@vitest+spy@4.1.3/node_modules/@vitest/spy/dist/index.js
 function isMockFunction(fn) {
 	return typeof fn === "function" && "_isMockFunction" in fn && fn._isMockFunction === true;
@@ -997,115 +997,16 @@ function inspect(value, opts = {}) {
 }
 __name(inspect, "inspect");
 var config = {
-	/**
-	* ### config.includeStack
-	*
-	* User configurable property, influences whether stack trace
-	* is included in Assertion error message. Default of false
-	* suppresses stack trace in the error message.
-	*
-	*     chai.config.includeStack = true;  // enable stack on error
-	*
-	* @param {boolean}
-	* @public
-	*/
 	includeStack: false,
-	/**
-	* ### config.showDiff
-	*
-	* User configurable property, influences whether or not
-	* the `showDiff` flag should be included in the thrown
-	* AssertionErrors. `false` will always be `false`; `true`
-	* will be true when the assertion has requested a diff
-	* be shown.
-	*
-	* @param {boolean}
-	* @public
-	*/
 	showDiff: true,
-	/**
-	* ### config.truncateThreshold
-	*
-	* User configurable property, sets length threshold for actual and
-	* expected values in assertion errors. If this threshold is exceeded, for
-	* example for large data structures, the value is replaced with something
-	* like `[ Array(3) ]` or `{ Object (prop1, prop2) }`.
-	*
-	* Set it to zero if you want to disable truncating altogether.
-	*
-	* This is especially userful when doing assertions on arrays: having this
-	* set to a reasonable large value makes the failure messages readily
-	* inspectable.
-	*
-	*     chai.config.truncateThreshold = 0;  // disable truncating
-	*
-	* @param {number}
-	* @public
-	*/
 	truncateThreshold: 40,
-	/**
-	* ### config.useProxy
-	*
-	* User configurable property, defines if chai will use a Proxy to throw
-	* an error when a non-existent property is read, which protects users
-	* from typos when using property-based assertions.
-	*
-	* Set it to false if you want to disable this feature.
-	*
-	*     chai.config.useProxy = false;  // disable use of Proxy
-	*
-	* This feature is automatically disabled regardless of this config value
-	* in environments that don't support proxies.
-	*
-	* @param {boolean}
-	* @public
-	*/
 	useProxy: true,
-	/**
-	* ### config.proxyExcludedKeys
-	*
-	* User configurable property, defines which properties should be ignored
-	* instead of throwing an error if they do not exist on the assertion.
-	* This is only applied if the environment Chai is running in supports proxies and
-	* if the `useProxy` configuration setting is enabled.
-	* By default, `then` and `inspect` will not throw an error if they do not exist on the
-	* assertion object because the `.inspect` property is read by `util.inspect` (for example, when
-	* using `console.log` on the assertion object) and `.then` is necessary for promise type-checking.
-	*
-	*     // By default these keys will not throw an error if they do not exist on the assertion object
-	*     chai.config.proxyExcludedKeys = ['then', 'inspect'];
-	*
-	* @param {Array}
-	* @public
-	*/
 	proxyExcludedKeys: [
 		"then",
 		"catch",
 		"inspect",
 		"toJSON"
 	],
-	/**
-	* ### config.deepEqual
-	*
-	* User configurable property, defines which a custom function to use for deepEqual
-	* comparisons.
-	* By default, the function used is the one from the `deep-eql` package without custom comparator.
-	*
-	*     // use a custom comparator
-	*     chai.config.deepEqual = (expected, actual) => {
-	*         return chai.util.eql(expected, actual, {
-	*             comparator: (expected, actual) => {
-	*                 // for non number comparison, use the default behavior
-	*                 if(typeof expected !== 'number') return null;
-	*                 // allow a difference of 10 between compared numbers
-	*                 return typeof actual === 'number' && Math.abs(actual - expected) < 10
-	*             }
-	*         })
-	*     };
-	*
-	* @param {Function}
-	* @public
-	*/
 	deepEqual: null
 };
 function inspect2(obj, showHidden, depth, colors) {

package/dist/ui/accordion/accordion.css

@@ -36,7 +36,7 @@
   padding: var(--accordion-summary-padding-block)
     var(--accordion-summary-padding-inline);
   font-size: var(--accordion-font-size);
-  color: var(--color-11);
+  color: var(--accent-11);
   -webkit-user-select: none;
   user-select: none;
   font-weight: 500;
@@ -117,16 +117,16 @@
 }
 
 .x-accordion:where([data-variant="soft"]) {
-  background-color: var(--color-a2);
-  --accordion-summary-bg: var(--color-a2);
-  --accordion-summary-hover-bg: var(--color-a3);
+  background-color: var(--accent-a2);
+  --accordion-summary-bg: var(--accent-a2);
+  --accordion-summary-hover-bg: var(--accent-a3);
   --accordion-body-bg: transparent;
 }
 
 :where(.dark, .dark-theme) .x-accordion:where([data-variant="soft"]) {
-  background-color: var(--color-a2);
-  --accordion-summary-bg: var(--color-a2);
-  --accordion-summary-hover-bg: var(--color-a3);
+  background-color: var(--accent-a2);
+  --accordion-summary-bg: var(--accent-a2);
+  --accordion-summary-hover-bg: var(--accent-a3);
 }
 
 .x-accordion:where(:not([data-variant]), [data-variant="surface"]) + .x-accordion:where(:not([data-variant]), [data-variant="surface"]) {
@@ -151,19 +151,19 @@
 }
 
 .x-accordion:where([data-variant="borderless"]) > summary {
-  color: var(--color-a11);
+  color: var(--accent-a11);
   padding-inline: 0;
   transition: background-color .12s ease-out, color .12s ease-out;
 }
 
 @media (hover: hover) {
   .x-accordion:where([data-variant="borderless"]) > summary:where(:hover) {
-    color: var(--color-12);
+    color: var(--accent-12);
   }
 }
 
 .x-accordion:where([data-variant="borderless"][open]) > summary {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-accordion:where([data-variant="borderless"])::details-content {

package/dist/ui/alert/alert.css

@@ -1,7 +1,7 @@
 .x-alert {
   box-sizing: border-box;
   text-align: left;
-  color: var(--color-a11);
+  color: var(--accent-a11);
   grid-template-columns: auto 1fr;
   justify-content: flex-start;
   align-items: flex-start;
@@ -9,7 +9,7 @@
 }
 
 .x-alert:where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-alert-icon {
@@ -64,14 +64,14 @@
 }
 
 .x-alert:where(:not([data-variant="surface"], [data-variant="outline"])) {
-  background-color: var(--color-a3);
+  background-color: var(--accent-a3);
 }
 
 .x-alert:where([data-variant="surface"]) {
-  background-color: var(--color-a2);
-  box-shadow: inset 0 0 0 1px var(--color-a6);
+  background-color: var(--accent-a2);
+  box-shadow: inset 0 0 0 1px var(--accent-a6);
 }
 
 .x-alert:where([data-variant="outline"]) {
-  box-shadow: inset 0 0 0 1px var(--color-a7);
+  box-shadow: inset 0 0 0 1px var(--accent-a7);
 }

package/dist/ui/badge/badge.css

@@ -38,51 +38,51 @@
 }
 
 .x-badge:where([data-variant="solid"]) {
-  background-color: var(--color-9);
+  background-color: var(--accent-9);
   color: var(--accent-contrast);
 }
 
 .x-badge:where([data-variant="solid"])::selection {
-  background-color: var(--color-7);
-  color: var(--color-12);
+  background-color: var(--accent-7);
+  color: var(--accent-12);
 }
 
 .x-badge:where([data-variant="solid"]):where([data-high-contrast]) {
-  background-color: var(--color-12);
-  color: var(--color-1);
+  background-color: var(--accent-12);
+  color: var(--accent-1);
 }
 
 .x-badge:where([data-variant="solid"]):where([data-high-contrast])::selection {
-  background-color: var(--color-a11);
-  color: var(--color-1);
+  background-color: var(--accent-a11);
+  color: var(--accent-1);
 }
 
 .x-badge:where([data-variant="surface"]) {
   background-color: var(--accent-surface);
-  box-shadow: inset 0 0 0 1px var(--color-a6);
-  color: var(--color-a11);
+  box-shadow: inset 0 0 0 1px var(--accent-a6);
+  color: var(--accent-a11);
 }
 
 .x-badge:where([data-variant="surface"]):where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-badge:where([data-variant="soft"]) {
-  background-color: var(--color-a3);
-  color: var(--color-a11);
+  background-color: var(--accent-a3);
+  color: var(--accent-a11);
 }
 
 .x-badge:where([data-variant="soft"]):where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-badge:where([data-variant="outline"]) {
-  box-shadow: inset 0 0 0 1px var(--color-a8);
-  color: var(--color-a11);
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  color: var(--accent-a11);
 }
 
 .x-badge:where([data-variant="outline"]):where([data-high-contrast]) {
-  box-shadow: inset 0 0 0 1px var(--color-a7),
+  box-shadow: inset 0 0 0 1px var(--accent-a7),
       inset 0 0 0 1px var(--base-color-a11);
-  color: var(--color-12);
+  color: var(--accent-12);
 }

package/dist/ui/button/button.css

@@ -65,28 +65,28 @@
 }
 
 .x-button:where([data-variant="solid"]) {
-  background-color: var(--color-9);
+  background-color: var(--accent-9);
   color: var(--accent-contrast);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="solid"]):where(:hover) {
-    background-color: var(--color-10);
+    background-color: var(--accent-10);
   }
 }
 
 .x-button:where([data-variant="solid"]):where([data-state="open"]) {
-  background-color: var(--color-10);
+  background-color: var(--accent-10);
 }
 
 .x-button:where([data-variant="solid"]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-10);
+  background-color: var(--accent-10);
   filter: var(--base-button-solid-active-filter);
 }
 
 @media (pointer: coarse) {
   .x-button:where([data-variant="solid"]):where(:active:not([data-state="open"])) {
-    outline: .5em solid var(--color-a4);
+    outline: .5em solid var(--accent-a4);
     outline-offset: 0;
   }
 }
@@ -97,24 +97,24 @@
 }
 
 .x-button:where([data-variant="solid"]):where([data-high-contrast]) {
-  background-color: var(--color-12);
+  background-color: var(--accent-12);
   color: var(--base-color-1);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="solid"]):where([data-high-contrast]):where(:hover) {
-    background-color: var(--color-12);
+    background-color: var(--accent-12);
     filter: var(--base-button-solid-high-contrast-hover-filter);
   }
 }
 
 .x-button:where([data-variant="solid"]):where([data-high-contrast]):where([data-state="open"]) {
-  background-color: var(--color-12);
+  background-color: var(--accent-12);
   filter: var(--base-button-solid-high-contrast-hover-filter);
 }
 
 .x-button:where([data-variant="solid"]):where([data-high-contrast]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-12);
+  background-color: var(--accent-12);
   filter: var(--base-button-solid-high-contrast-active-filter);
 }
 
@@ -126,11 +126,11 @@
 }
 
 .x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]) {
-  color: var(--color-a11);
+  color: var(--accent-a11);
 }
 
 .x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]):where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]):where([data-disabled]) {
@@ -139,26 +139,26 @@
 }
 
 .x-button:where([data-variant="soft"]) {
-  background-color: var(--color-a3);
+  background-color: var(--accent-a3);
 }
 
 .x-button:where([data-variant="soft"]):where(:focus-visible) {
-  outline: 2px solid var(--color-8);
+  outline: 2px solid var(--accent-8);
   outline-offset: -1px;
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="soft"]):where(:hover) {
-    background-color: var(--color-a4);
+    background-color: var(--accent-a4);
   }
 }
 
 .x-button:where([data-variant="soft"]):where([data-state="open"]) {
-  background-color: var(--color-a4);
+  background-color: var(--accent-a4);
 }
 
 .x-button:where([data-variant="soft"]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-a5);
+  background-color: var(--accent-a5);
 }
 
 .x-button:where([data-variant="soft"]):where([data-disabled]) {
@@ -168,7 +168,7 @@
 
 @media (hover: hover) {
   .x-button:where([data-variant="text"], [data-variant="borderless"]):where(:hover) {
-    background-color: var(--color-a3);
+    background-color: var(--accent-a3);
   }
 }
 
@@ -178,11 +178,11 @@
 }
 
 .x-button:where([data-variant="text"], [data-variant="borderless"]):where([data-state="open"]) {
-  background-color: var(--color-a3);
+  background-color: var(--accent-a3);
 }
 
 .x-button:where([data-variant="text"], [data-variant="borderless"]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-a4);
+  background-color: var(--accent-a4);
 }
 
 .x-button:where([data-variant="text"], [data-variant="borderless"]):where([data-disabled]) {
@@ -191,22 +191,22 @@
 }
 
 .x-button:where([data-variant="outline"]) {
-  box-shadow: inset 0 0 0 1px var(--color-a8);
-  color: var(--color-a11);
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  color: var(--accent-a11);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="outline"]):where(:hover) {
-    background-color: var(--color-a2);
+    background-color: var(--accent-a2);
   }
 }
 
 .x-button:where([data-variant="outline"]):where([data-state="open"]) {
-  background-color: var(--color-a2);
+  background-color: var(--accent-a2);
 }
 
 .x-button:where([data-variant="outline"]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-a3);
+  background-color: var(--accent-a3);
 }
 
 .x-button:where([data-variant="outline"]):where(:focus-visible) {
@@ -215,9 +215,9 @@
 }
 
 .x-button:where([data-variant="outline"]):where([data-high-contrast]) {
-  box-shadow: inset 0 0 0 1px var(--color-a7),
+  box-shadow: inset 0 0 0 1px var(--accent-a7),
       inset 0 0 0 1px var(--base-color-a11);
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-button:where([data-variant="outline"]):where([data-disabled]) {
@@ -228,23 +228,23 @@
 
 .x-button:where([data-variant="surface"]) {
   background-color: var(--accent-surface);
-  box-shadow: inset 0 0 0 1px var(--color-a7);
-  color: var(--color-a11);
+  box-shadow: inset 0 0 0 1px var(--accent-a7);
+  color: var(--accent-a11);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="surface"]):where(:hover) {
-    box-shadow: inset 0 0 0 1px var(--color-a8);
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
   }
 }
 
 .x-button:where([data-variant="surface"]):where([data-state="open"]) {
-  box-shadow: inset 0 0 0 1px var(--color-a8);
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
 }
 
 .x-button:where([data-variant="surface"]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-a3);
-  box-shadow: inset 0 0 0 1px var(--color-a8);
+  background-color: var(--accent-a3);
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
 }
 
 .x-button:where([data-variant="surface"]):where(:focus-visible) {
@@ -253,7 +253,7 @@
 }
 
 .x-button:where([data-variant="surface"]):where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-button:where([data-variant="surface"]):where([data-disabled]) {