elements-kit 0.27.4 → 0.27.6

package/README.md

@@ -339,6 +339,7 @@ const op = async(() => fetch("/api/items").then((r) => r.json()));
 op.start();   // run with reactive tracking — reruns when tracked signals change
 await op;     // awaitable (delegates to .then/.catch/.finally via .raw)
 op.stop();    // halt reruns + fire registered cleanup
+op.reset();   // stop + clear state back to `idle`
 ```
 
 Reactive state getters: `.state` (`"idle" | "pending" | "fulfilled" | "rejected"` — `idle` before the first run, so `.pending` is `false` until you trigger one), `.value`, `.reason`, `.result`, `.pending`, `.raw` (the underlying `ComputedPromise`).

package/dist/attributes.d.mts

@@ -1,2 +1,2 @@
-import { a as Attributes, c as observedAttributes, i as AttributeTarget, n as AttrChangeHandler, o as attributes, r as AttributeDecorated, s as dispatchAttrChange, t as ATTRIBUTES } from "./attributes-3r7Diua4.mjs";
+import { a as Attributes, c as observedAttributes, i as AttributeTarget, n as AttrChangeHandler, o as attributes, r as AttributeDecorated, s as dispatchAttrChange, t as ATTRIBUTES } from "./attributes-YQZNO15D.mjs";
 export { ATTRIBUTES, AttrChangeHandler, AttributeDecorated, AttributeTarget, Attributes, attributes, dispatchAttrChange, observedAttributes };

package/dist/await.d.mts

@@ -1,4 +1,4 @@
-import { s as Props, t as Children } from "./children-_cMdyX7Q.mjs";
+import { s as Props, t as Children } from "./children-CjlmAzxx.mjs";
 
 //#region src/await.d.ts
 /** @internal Metadata stamped on an Await region getter (see claim walk). */

package/dist/await.mjs

@@ -1,4 +1,4 @@
-import { f as effectsInert, t as ASYNC_REGION } from "./lib-DYypKhxk.mjs";
+import { f as effectsInert, t as ASYNC_REGION } from "./lib-Dw0g-vex.mjs";
 import { isReactivePromiseLike, promise } from "./utilities/promise.mjs";
 import { isAsyncLike } from "./utilities/async.mjs";
 //#region src/await.ts

package/dist/{children-_cMdyX7Q.d.mts → children-CjlmAzxx.d.mts}

@@ -1,6 +1,6 @@
-import { n as AttrChangeHandler, t as ATTRIBUTES } from "./attributes-3r7Diua4.mjs";
-import { i as PropertiesOf, n as CustomElementRegistry, r as EventsOf } from "./custom-elements-C7oiqw-y.mjs";
-import { r as MaybeReactive } from "./index-BrVMftR8.mjs";
+import { n as AttrChangeHandler, t as ATTRIBUTES } from "./attributes-YQZNO15D.mjs";
+import { i as PropertiesOf, n as CustomElementRegistry, r as EventsOf } from "./custom-elements-CTqSkWI7.mjs";
+import { r as MaybeReactive } from "./index-BSAqa0-0.mjs";
 import * as CSS from "csstype";
 import { JSX } from "dom-expressions/src/jsx";
 

package/dist/chunk-CfYAbeIz.mjs

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist/{custom-elements-C7oiqw-y.d.mts → custom-elements-CTqSkWI7.d.mts}

@@ -1,4 +1,4 @@
-import { t as ATTRIBUTES } from "./attributes-3r7Diua4.mjs";
+import { t as ATTRIBUTES } from "./attributes-YQZNO15D.mjs";
 
 //#region src/custom-elements.d.ts
 type RegisteredElementInstances = { [K in keyof ElementsKit.CustomElementRegistry]: ElementsKit.CustomElementRegistry[K] extends (abstract new (...args: any[]) => infer I) ? I : never };

package/dist/custom-elements.d.mts

@@ -1,2 +1,2 @@
-import { a as PublicPropKeys, i as PropertiesOf, n as CustomElementRegistry, o as defineElement, r as EventsOf, t as AttributesOf } from "./custom-elements-C7oiqw-y.mjs";
+import { a as PublicPropKeys, i as PropertiesOf, n as CustomElementRegistry, o as defineElement, r as EventsOf, t as AttributesOf } from "./custom-elements-CTqSkWI7.mjs";
 export { AttributesOf, CustomElementRegistry, EventsOf, PropertiesOf, PublicPropKeys, defineElement };

package/dist/direction-EwIAAn1f.d.mts

@@ -0,0 +1,29 @@
+import { t as Computed } from "./index-BSAqa0-0.mjs";
+
+//#region src/utilities/direction.d.ts
+type Direction = "ltr" | "rtl";
+/**
+ * The page's direction — the document root's resolved `direction`
+ * (`"ltr"` / `"rtl"`), reactive. `direction` below is the
+ * pre-instantiated page singleton, like `windowSize` / `online`.
+ *
+ * Resyncs on `dir` attribute changes anywhere in the document (the
+ * mechanism locale switches use; `direction` inherits, so ancestor
+ * flips count). A stylesheet-driven `direction` change has no
+ * observable primitive — it's picked up on the next `dir` mutation.
+ * Outside a browser: a constant `"ltr"`.
+ *
+ * @example
+ * ```ts
+ * import { direction } from "elements-kit/utilities/direction";
+ *
+ * effect(() => {
+ *   panel.dataset.dir = direction(); // re-runs on <html dir> changes
+ * });
+ * ```
+ */
+declare function createDirection(element?: Element): Computed<Direction> & Disposable;
+/** The page's direction — the document root's, reactive. */
+declare const direction: Computed<Direction> & Disposable;
+//#endregion
+export { createDirection as n, direction as r, Direction as t };

package/dist/{element-DgQvp-49.mjs → element-bMvwF1ue.mjs}

@@ -1,5 +1,5 @@
-import { C as untracked, _ as onCleanup, d as effectScope, u as effect } from "./lib-DYypKhxk.mjs";
-import "./polyfill-CdZVCxdo.mjs";
+import { C as untracked, _ as onCleanup, d as effectScope, u as effect } from "./lib-Dw0g-vex.mjs";
+import "./polyfill-B1lNNcum.mjs";
 import { isReactive } from "./signals/index.mjs";
 import { on } from "./utilities/event-listener.mjs";
 import { Slot } from "./slot.mjs";

package/dist/for.d.mts

@@ -1,4 +1,4 @@
-import { o as MaybeReactiveProps } from "./children-_cMdyX7Q.mjs";
+import { o as MaybeReactiveProps } from "./children-CjlmAzxx.mjs";
 
 //#region src/for.d.ts
 type KeyFn<T> = (item: T, index: number) => string | number;

package/dist/for.mjs

@@ -1,6 +1,6 @@
-import { C as untracked, S as trigger, _ as onCleanup, d as effectScope, u as effect, x as signal } from "./lib-DYypKhxk.mjs";
+import { C as untracked, S as trigger, _ as onCleanup, d as effectScope, u as effect, x as signal } from "./lib-Dw0g-vex.mjs";
 import "./signals/index.mjs";
-import { n as disposeElement } from "./element-DgQvp-49.mjs";
+import { n as disposeElement } from "./element-bMvwF1ue.mjs";
 //#region src/for.ts
 /**
 * Keyed list renderer. See {@link ForProps} for prop details.

package/dist/{fragment-BJfcQdsL.mjs → fragment-DV0hrE_A.mjs}

@@ -1,6 +1,6 @@
-import { _ as onCleanup, u as effect } from "./lib-DYypKhxk.mjs";
+import { _ as onCleanup, u as effect } from "./lib-Dw0g-vex.mjs";
 import "./signals/index.mjs";
-import { d as MATHML_NAMESPACE, o as mountChild, p as SVG_NAMESPACE } from "./element-DgQvp-49.mjs";
+import { d as MATHML_NAMESPACE, o as mountChild, p as SVG_NAMESPACE } from "./element-bMvwF1ue.mjs";
 import { Slot } from "./slot.mjs";
 //#region src/jsx-runtime/fragment.ts
 const ForeignRoots = {

package/dist/{hot-Zl0s17uq.mjs → hot-kRKLQS6B.mjs}

@@ -1,6 +1,6 @@
-import { _ as onCleanup, u as effect, x as signal } from "./lib-DYypKhxk.mjs";
+import { _ as onCleanup, u as effect, x as signal } from "./lib-Dw0g-vex.mjs";
 import "./signals/index.mjs";
-import { r as getRenderer, t as createElement } from "./element-DgQvp-49.mjs";
+import { r as getRenderer, t as createElement } from "./element-bMvwF1ue.mjs";
 import { Slot } from "./slot.mjs";
 import { HMR_CELLS_SLOT, HMR_SLOT } from "./integrations/hmr-slot.mjs";
 //#region src/jsx-runtime/hot.ts

package/dist/hydrate/index.mjs

@@ -1,2 +1,2 @@
-import { t as hydrate } from "../hydrate-ICXw1FIY.mjs";
+import { t as hydrate } from "../hydrate-Vx_iBMqJ.mjs";
 export { hydrate };

package/dist/{hydrate-ICXw1FIY.mjs → hydrate-Vx_iBMqJ.mjs}

@@ -1,11 +1,11 @@
-import { C as untracked, _ as onCleanup, d as effectScope, n as CLAIM, t as ASYNC_REGION, u as effect, v as setDeferAsyncRuns } from "./lib-DYypKhxk.mjs";
+import { C as untracked, _ as onCleanup, d as effectScope, n as CLAIM, t as ASYNC_REGION, u as effect, v as setDeferAsyncRuns } from "./lib-Dw0g-vex.mjs";
 import { isReactive } from "./signals/index.mjs";
 import { isReactivePromiseLike } from "./utilities/promise.mjs";
 import { flushDeferredAsyncRuns, isAsyncLike } from "./utilities/async.mjs";
-import { a as applyProps, i as setRenderer, s as resolveChild, t as createElement } from "./element-DgQvp-49.mjs";
+import { a as applyProps, i as setRenderer, s as resolveChild, t as createElement } from "./element-bMvwF1ue.mjs";
 import { Slot } from "./slot.mjs";
 import { For, isForComponent } from "./for.mjs";
-import { n as isFragmentComponent, r as parseHtml, t as Fragment } from "./fragment-BJfcQdsL.mjs";
+import { n as isFragmentComponent, r as parseHtml, t as Fragment } from "./fragment-DV0hrE_A.mjs";
 //#region src/hydrate/claim.ts
 let hydrationContext = null;
 function setHydrationContext(ctx) {

package/dist/integrations/astro-client.mjs

@@ -1,6 +1,6 @@
-import { t as createElement } from "../element-DgQvp-49.mjs";
+import { t as createElement } from "../element-bMvwF1ue.mjs";
 import { render } from "../render.mjs";
-import { t as hydrate } from "../hydrate-ICXw1FIY.mjs";
+import { t as hydrate } from "../hydrate-Vx_iBMqJ.mjs";
 import { withSlotProps } from "./astro-slots.mjs";
 import { HMR_SLOT } from "./hmr-slot.mjs";
 //#region src/integrations/astro-client.ts

package/dist/integrations/astro-server.mjs

@@ -1,7 +1,7 @@
-import { y as setInertEffects } from "../lib-DYypKhxk.mjs";
-import { i as setRenderer, t as createElement } from "../element-DgQvp-49.mjs";
+import { y as setInertEffects } from "../lib-Dw0g-vex.mjs";
+import { i as setRenderer, t as createElement } from "../element-bMvwF1ue.mjs";
 import { withSlotProps } from "./astro-slots.mjs";
-import { i as serverJsx, n as renderToString, r as SNode } from "../server-Qm9JTZ-J.mjs";
+import { i as serverJsx, n as renderToString, r as SNode } from "../server-DxiXDjQU.mjs";
 //#region src/integrations/astro-server.ts
 /**
 * Decide whether `Component` is an elements-kit component. Invoked by Astro

package/dist/integrations/astro-slots.mjs

@@ -1,5 +1,5 @@
-import { t as createElement } from "../element-DgQvp-49.mjs";
-import { t as Fragment } from "../fragment-BJfcQdsL.mjs";
+import { t as createElement } from "../element-bMvwF1ue.mjs";
+import { t as Fragment } from "../fragment-DV0hrE_A.mjs";
 //#region src/integrations/astro-slots.ts
 /**
 * @internal Map Astro's pre-rendered slot HTML (`Record<name, html>`) into

package/dist/integrations/hmr-runtime.mjs

@@ -1,7 +1,7 @@
-import { t as createElement } from "../element-DgQvp-49.mjs";
+import { t as createElement } from "../element-bMvwF1ue.mjs";
 import { render } from "../render.mjs";
 import { HMR_SLOT } from "./hmr-slot.mjs";
-import { n as updateCells } from "../hot-Zl0s17uq.mjs";
+import { n as updateCells } from "../hot-kRKLQS6B.mjs";
 //#region src/integrations/hmr-runtime.ts
 const slot = globalThis;
 const records = /* @__PURE__ */ new Set();

package/dist/integrations/react.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-BrVMftR8.mjs";
+import { t as Computed } from "../index-BSAqa0-0.mjs";
 
 //#region src/integrations/react.d.ts
 /**

package/dist/integrations/react.mjs

@@ -1,6 +1,6 @@
-import { u as effect, x as signal } from "../lib-DYypKhxk.mjs";
+import { u as effect, x as signal } from "../lib-Dw0g-vex.mjs";
 import "../signals/index.mjs";
-import { t as scope } from "../scope-C1vELXqP.mjs";
+import { t as scope } from "../scope-B1kDu4YX.mjs";
 import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 //#region src/integrations/react.ts
 /**

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

@@ -1,5 +1,5 @@
-import { a as Fragment, c as PropsOf, i as JSX, l as Require, n as ComponentClass, o as MaybeReactiveProps, r as ComponentFn, s as Props, t as Children } from "../children-_cMdyX7Q.mjs";
-import { n as ComputedProps, r as MaybeReactive } from "../index-BrVMftR8.mjs";
+import { a as Fragment, c as PropsOf, i as JSX, l as Require, n as ComponentClass, o as MaybeReactiveProps, r as ComponentFn, s as Props, t as Children } from "../children-CjlmAzxx.mjs";
+import { n as ComputedProps, r as MaybeReactive } from "../index-BSAqa0-0.mjs";
 
 //#region src/jsx-runtime/hot.d.ts
 /**

package/dist/jsx-runtime/dev.mjs

@@ -1,4 +1,4 @@
-import { t as Fragment } from "../fragment-BJfcQdsL.mjs";
-import { t as createHotElement } from "../hot-Zl0s17uq.mjs";
+import { t as Fragment } from "../fragment-DV0hrE_A.mjs";
+import { t as createHotElement } from "../hot-kRKLQS6B.mjs";
 import "./index.mjs";
 export { Fragment, createHotElement as h, createHotElement as jsx, createHotElement as jsxDEV, createHotElement as jsxs };

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

@@ -1,3 +1,3 @@
-import { a as Fragment, c as PropsOf, i as JSX, l as Require, n as ComponentClass, o as MaybeReactiveProps, r as ComponentFn, s as Props, t as Children, u as createElement } from "../children-_cMdyX7Q.mjs";
-import { n as ComputedProps, r as MaybeReactive } from "../index-BrVMftR8.mjs";
+import { a as Fragment, c as PropsOf, i as JSX, l as Require, n as ComponentClass, o as MaybeReactiveProps, r as ComponentFn, s as Props, t as Children, u as createElement } from "../children-CjlmAzxx.mjs";
+import { n as ComputedProps, r as MaybeReactive } from "../index-BSAqa0-0.mjs";
 export { type Children, ComponentClass, ComponentFn, type ComputedProps, Fragment, JSX, type MaybeReactive, type MaybeReactiveProps, type Props, type PropsOf, type Require, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime/index.mjs

@@ -1,3 +1,3 @@
-import { t as createElement } from "../element-DgQvp-49.mjs";
-import { t as Fragment } from "../fragment-BJfcQdsL.mjs";
+import { t as createElement } from "../element-bMvwF1ue.mjs";
+import { t as Fragment } from "../fragment-DV0hrE_A.mjs";
 export { Fragment, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/render.mjs

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

package/dist/{scope-C1vELXqP.mjs → scope-B1kDu4YX.mjs}

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

package/dist/server/index.mjs

@@ -1,2 +1,2 @@
-import { n as renderToString, t as renderToStream } from "../server-Qm9JTZ-J.mjs";
+import { n as renderToString, t as renderToStream } from "../server-DxiXDjQU.mjs";
 export { renderToStream, renderToString };

package/dist/{server-Qm9JTZ-J.mjs → server-DxiXDjQU.mjs}

@@ -1,10 +1,10 @@
-import { C as untracked, y as setInertEffects } from "./lib-DYypKhxk.mjs";
+import { C as untracked, y as setInertEffects } from "./lib-Dw0g-vex.mjs";
 import { isReactive } from "./signals/index.mjs";
 import { isReactivePromiseLike } from "./utilities/promise.mjs";
 import { isAsyncLike } from "./utilities/async.mjs";
-import { c as AttrAliases, f as Properties, i as setRenderer, l as BooleanAttributes, u as ChildProperties } from "./element-DgQvp-49.mjs";
+import { c as AttrAliases, f as Properties, i as setRenderer, l as BooleanAttributes, u as ChildProperties } from "./element-bMvwF1ue.mjs";
 import { isForComponent } from "./for.mjs";
-import { n as isFragmentComponent } from "./fragment-BJfcQdsL.mjs";
+import { n as isFragmentComponent } from "./fragment-DV0hrE_A.mjs";
 //#region src/server/escape.ts
 function escapeDelim(s, delim, escDelim) {
 	let iDelim = s.indexOf(delim);

package/dist/signals/index.d.mts

@@ -1,2 +1,2 @@
-import { C as isSignal, D as untracked, E as trigger, S as isEffectScope, T as signal, _ as computed, a as Updater, b as isComputed, c as reactive, d as COMPUTED, f as EFFECT, g as batch, h as SIGNAL, i as Signal, l as resolve, m as SEED, n as ComputedProps, o as computedProps, p as EFFECT_SCOPE, r as MaybeReactive, s as isReactive, t as Computed, u as CLAIM, v as effect, w as onCleanup, x as isEffect, y as effectScope } from "../index-BrVMftR8.mjs";
+import { C as isSignal, D as untracked, E as trigger, S as isEffectScope, T as signal, _ as computed, a as Updater, b as isComputed, c as reactive, d as COMPUTED, f as EFFECT, g as batch, h as SIGNAL, i as Signal, l as resolve, m as SEED, n as ComputedProps, o as computedProps, p as EFFECT_SCOPE, r as MaybeReactive, s as isReactive, t as Computed, u as CLAIM, v as effect, w as onCleanup, x as isEffect, y as effectScope } from "../index-BSAqa0-0.mjs";
 export { CLAIM, COMPUTED, Computed, ComputedProps, EFFECT, EFFECT_SCOPE, MaybeReactive, SEED, SIGNAL, Signal, Updater, batch, computed, computedProps, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, signal, trigger, untracked };

package/dist/signals/index.mjs

@@ -1,5 +1,5 @@
-import { C as untracked, S as trigger, _ as onCleanup, a as EFFECT_SCOPE, c as batch, d as effectScope, g as isSignal, h as isEffectScope, i as EFFECT, l as computed, m as isEffect, n as CLAIM, o as SEED, p as isComputed, r as COMPUTED, s as SIGNAL, u as effect, x as signal } from "../lib-DYypKhxk.mjs";
-import "../polyfill-CdZVCxdo.mjs";
+import { C as untracked, S as trigger, _ as onCleanup, a as EFFECT_SCOPE, c as batch, d as effectScope, g as isSignal, h as isEffectScope, i as EFFECT, l as computed, m as isEffect, n as CLAIM, o as SEED, p as isComputed, r as COMPUTED, s as SIGNAL, u as effect, x as signal } from "../lib-Dw0g-vex.mjs";
+import "../polyfill-B1lNNcum.mjs";
 //#region src/signals/index.ts
 /**
 * Type-guard: `true` when `value` is a reactive source (`signal` or `computed`),

package/dist/slot.mjs

@@ -1,4 +1,4 @@
-import "./polyfill-CdZVCxdo.mjs";
+import "./polyfill-B1lNNcum.mjs";
 //#region src/slot.ts
 /**
 * A lightweight slot that reserves a region in the DOM using comment markers.

package/dist/ui/otp-input/index.d.mts

@@ -1,5 +1,5 @@
-import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-3r7Diua4.mjs";
-import { t as HTMLElementBase } from "../../environment-c2ftMYT0.mjs";
+import { n as AttrChangeHandler, t as ATTRIBUTES } from "../../attributes-YQZNO15D.mjs";
+import { t as HTMLElementBase } from "../../environment-EQugnOcg.mjs";
 
 //#region src/ui/otp-input/otp-input.d.ts
 /**

package/dist/ui/otp-input/index.mjs

@@ -1,5 +1,5 @@
 import { ATTRIBUTES, observedAttributes } from "../../attributes.mjs";
-import { l as computed, u as effect, x as signal } from "../../lib-DYypKhxk.mjs";
+import { l as computed, u as effect, x as signal } from "../../lib-Dw0g-vex.mjs";
 import "../../signals/index.mjs";
 import { on } from "../../utilities/event-listener.mjs";
 import { render } from "../../render.mjs";

package/dist/ui/overlay/handle.css

@@ -0,0 +1,134 @@
+.x-handle {
+  box-sizing: border-box;
+  z-index: 1;
+  pointer-events: auto;
+  touch-action: none;
+  position: absolute;
+}
+
+.x-handle:before {
+  content: "";
+  width: max(100%, var(--space-6));
+  height: max(100%, var(--space-6));
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+
+.x-handle:where([data-placement="move"]) {
+  top: var(--space-2);
+  width: var(--space-8);
+  height: var(--space-1);
+  border-radius: max(var(--radius-1), var(--radius-pill));
+  background-color: var(--neutral-a8);
+  margin-inline: auto;
+  inset-inline: 0;
+}
+
+.x-handle:where([data-placement^="block-"]) {
+  width: var(--space-8);
+  height: var(--space-1);
+  border-radius: max(var(--radius-1), var(--radius-pill));
+  background-color: var(--neutral-a8);
+  margin-inline: auto;
+  inset-inline: 0;
+}
+
+.x-handle:where([data-placement="block-start"]) {
+  top: var(--space-2);
+}
+
+.x-handle:where([data-placement="block-end"]) {
+  bottom: var(--space-2);
+}
+
+.x-handle:where([data-placement^="inline-"]) {
+  width: var(--space-1);
+  height: var(--space-8);
+  border-radius: max(var(--radius-1), var(--radius-pill));
+  background-color: var(--neutral-a8);
+  margin-block: auto;
+  inset-block: 0;
+}
+
+.x-handle:where([data-placement="inline-start"]) {
+  inset-inline-start: var(--space-2);
+}
+
+.x-handle:where([data-placement="inline-end"]) {
+  inset-inline-end: var(--space-2);
+}
+
+.x-handle:where([data-placement^="start-"], [data-placement^="end-"]) {
+  --_grip-r: max(calc(var(--overlay-grip-radius, var(--radius-5)) - var(--space-1)),
+    0px);
+  --_cap: min(var(--space-1), calc(var(--_grip-r) * 9999));
+  --_gx: 1;
+  --_gy: 1;
+  width: max(calc(var(--_grip-r) + var(--space-1)), calc(var(--space-1) * 3));
+  height: max(calc(var(--_grip-r) + var(--space-1)), calc(var(--space-1) * 3));
+  border: var(--space-1) solid var(--neutral-a8);
+  border-bottom-right-radius: var(--_grip-r);
+  transform: scale(var(--_gx), var(--_gy));
+  -webkit-mask: /* tails, cut flat at the cap centers (full length when capless) */
+    linear-gradient(#000, #000) right 0 top calc(var(--_cap) / 2) /
+      var(--space-1) calc(100% - var(--_cap) / 2) no-repeat,
+    linear-gradient(#000, #000) left calc(var(--_cap) / 2) bottom 0 /
+      calc(100% - var(--_cap) / 2) var(--space-1) no-repeat,
+    /* arc quadrant — the border's own curve shows through */
+    linear-gradient(#000, #000) 100% 100% / var(--_grip-r) var(--_grip-r)
+      no-repeat,
+    /* round caps, centered on the flat cuts over solid border ink */
+    radial-gradient(circle closest-side, #000 calc(100% - .5px), transparent)
+      right 0 top 0 / var(--_cap) var(--_cap) no-repeat,
+    radial-gradient(circle closest-side, #000 calc(100% - .5px), transparent)
+      left 0 bottom 0 / var(--_cap) var(--_cap) no-repeat;
+  mask: /* tails, cut flat at the cap centers (full length when capless) */
+    linear-gradient(#000, #000) right 0 top calc(var(--_cap) / 2) /
+      var(--space-1) calc(100% - var(--_cap) / 2) no-repeat,
+    linear-gradient(#000, #000) left calc(var(--_cap) / 2) bottom 0 /
+      calc(100% - var(--_cap) / 2) var(--space-1) no-repeat,
+    /* arc quadrant — the border's own curve shows through */
+    linear-gradient(#000, #000) 100% 100% / var(--_grip-r) var(--_grip-r)
+      no-repeat,
+    /* round caps, centered on the flat cuts over solid border ink */
+    radial-gradient(circle closest-side, #000 calc(100% - .5px), transparent)
+      right 0 top 0 / var(--_cap) var(--_cap) no-repeat,
+    radial-gradient(circle closest-side, #000 calc(100% - .5px), transparent)
+      left 0 bottom 0 / var(--_cap) var(--_cap) no-repeat;
+  background: none;
+}
+
+.x-handle:where([data-placement="start-end"], [data-placement="end-end"]) {
+  inset-inline-end: var(--space-1);
+}
+
+.x-handle:where([data-placement="start-start"], [data-placement="end-start"]) {
+  --_gx: -1;
+  inset-inline-start: var(--space-1);
+}
+
+.x-handle:where([data-placement^="end-"]) {
+  bottom: var(--space-1);
+}
+
+.x-handle:where([data-placement^="start-"]) {
+  top: var(--space-1);
+  --_gy: -1;
+}
+
+.x-handle:where([data-placement="start-end"], [data-placement="end-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  --_gx: -1;
+}
+
+.x-handle:where([data-placement="start-start"], [data-placement="end-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  --_gx: 1;
+}
+
+@media (forced-colors: active) {
+  .x-handle:where([data-placement]) {
+    background-color: buttontext;
+    border-color: buttontext;
+  }
+}

package/dist/ui/overlay/index.css

@@ -1,88 +1,22 @@
 .x-overlay {
-  --overlay-constraint-top: 0px;
-  --overlay-constraint-left: 0px;
-  --overlay-constraint-width: 100vw;
-  --overlay-constraint-height: 100vh;
-  --_ct: var(--overlay-constraint-top, 0px);
-  --_cl: var(--overlay-constraint-left, 0px);
-  --_cw: var(--overlay-constraint-width, 100vw);
-  --_ch: var(--overlay-constraint-height, 100vh);
-}
-
-@supports (height: 1svh) {
-  .x-overlay {
-    --overlay-constraint-width: 100svw;
-    --overlay-constraint-height: 100svh;
-  }
-}
-
-.x-overlay {
-  top: var(--_ct);
-  left: var(--_cl);
-  translate: calc(-50% + var(--overlay-dx, 0px) +
-        clamp(50%,
-          var(--overlay-x, calc(var(--_cw) / 2)),
-          calc(-50% + var(--_cw))))
-    calc(-50% + var(--overlay-dy, 0px) +
-        clamp(50%,
-          var(--overlay-y, calc(var(--_ch) / 2)),
-          calc(-50% + var(--_ch))));
-  transform: translate(var(--_ex, 0px), var(--_ey, 0px));
-  bottom: auto;
-  right: auto;
-}
-
-@supports (anchor-name: --x) and (position-area: block-end) {
-  .x-overlay[data-anchor="element"] {
-    translate: var(--overlay-dx, 0px) var(--overlay-dy, 0px);
-    position-area: var(--overlay-area, block-end);
-    position-try-fallbacks: flip-block, flip-inline;
-    position-visibility: anchors-visible;
-    margin: var(--overlay-gap, var(--space-2));
-    top: auto;
-    left: auto;
-  }
-}
-
-.x-overlay-anchor {
-  pointer-events: none;
-  width: 0;
-  height: 0;
-  transition: top var(--overlay-duration, .3s)
-      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
-    left var(--overlay-duration, .3s)
-      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
-    width var(--overlay-duration, .3s)
-      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
-    height var(--overlay-duration, .3s)
-      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1));
-  position: fixed;
-}
-
-@supports (anchor-name: --x) and (position-area: block-end) {
-  .x-overlay-anchor[data-follow] {
-    top: anchor(top);
-    left: anchor(left);
-    width: anchor-size(width);
-    height: anchor-size(height);
-  }
-}
-
-.x-overlay {
-  --overlay-width: 480px;
-  width: var(--overlay-w, var(--overlay-width));
-  max-width: var(--_cw);
-  height: var(--overlay-h, fit-content);
-  max-height: var(--_ch);
   --overlay-duration: .3s;
   --overlay-easing: cubic-bezier(.32, .72, 0, 1);
-  transition: top var(--overlay-duration) var(--overlay-easing),
-    left var(--overlay-duration) var(--overlay-easing),
-    translate var(--overlay-duration) var(--overlay-easing),
-    transform var(--overlay-duration) var(--overlay-easing),
+  box-sizing: border-box;
+  width: var(--w, var(--overlay-w, auto));
+  height: var(--h, var(--overlay-h, auto));
+  transition: translate var(--overlay-duration) var(--overlay-easing),
     width var(--overlay-duration) var(--overlay-easing),
     height var(--overlay-duration) var(--overlay-easing);
+  border: 0;
   flex-direction: column;
+  margin: 0;
+  padding: 0;
+  bottom: auto;
+  right: auto;
+}
+
+.x-overlay[data-no-transition] {
+  transition: none;
 }
 
 .x-overlay:not([open], :popover-open) {
@@ -102,15 +36,6 @@
   min-height: 0;
 }
 
-@supports not (translate: 0px) {
-  .x-overlay {
-    top: auto;
-    left: auto;
-    margin: auto;
-    inset: 0;
-  }
-}
-
 @supports (interpolate-size: allow-keywords) {
   .x-overlay {
     interpolate-size: allow-keywords;