elements-kit 0.27.5 → 0.27.7

package/dist/ui/overlay/overlay.css

@@ -1,45 +1,22 @@
-.x-overlay {
-  color: var(--neutral-12);
-}
-
-.x-overlay:where([open])::backdrop {
-  background: var(--overlay-backdrop, var(--color-overlay));
-}
-
-.x-overlay > .x-card {
-  contain: none;
-  touch-action: pan-y;
-  position: static;
-  overflow-y: auto;
-}
-
-:where(.x-overlay:not([data-material-background], [data-material-background] .x-overlay)) {
-  --color-material: var(--color-material-solid);
-  --backdrop-filter-material: none;
-}
-
-.x-overlay:where([data-resize], [data-draggable]):before, .x-overlay:where([data-resize], [data-draggable]):after {
-  content: "";
+.x-handle {
+  box-sizing: border-box;
   z-index: 1;
-  pointer-events: none;
+  pointer-events: auto;
+  touch-action: none;
   position: absolute;
 }
 
-.x-overlay:where([data-draggable]:not([data-resize^="end-"])):after {
-  width: var(--space-3);
-  height: var(--space-3);
-  border-radius: var(--overlay-grip-radius, var(--radius-5));
-  background-color: var(--neutral-a8);
-  inset-block-start: var(--space-2);
-  inset-inline-start: var(--space-2);
-}
-
-.x-overlay:where([data-draggable][data-resize="start-start"]):after {
-  inset-inline-start: auto;
-  inset-inline-end: var(--space-2);
+.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-overlay:where([data-draggable][data-resize^="end-"]):after {
+.x-handle:where([data-placement="move"]) {
   top: var(--space-2);
   width: var(--space-8);
   height: var(--space-1);
@@ -49,7 +26,7 @@
   inset-inline: 0;
 }
 
-.x-overlay:where([data-resize^="block-"]):before {
+.x-handle:where([data-placement^="block-"]) {
   width: var(--space-8);
   height: var(--space-1);
   border-radius: max(var(--radius-1), var(--radius-pill));
@@ -58,15 +35,15 @@
   inset-inline: 0;
 }
 
-.x-overlay:where([data-resize="block-start"]):before {
+.x-handle:where([data-placement="block-start"]) {
   top: var(--space-2);
 }
 
-.x-overlay:where([data-resize="block-end"]):before {
+.x-handle:where([data-placement="block-end"]) {
   bottom: var(--space-2);
 }
 
-.x-overlay:where([data-resize^="inline-"]):before {
+.x-handle:where([data-placement^="inline-"]) {
   width: var(--space-1);
   height: var(--space-8);
   border-radius: max(var(--radius-1), var(--radius-pill));
@@ -75,23 +52,20 @@
   inset-block: 0;
 }
 
-.x-overlay:where([data-resize="inline-start"]):before {
+.x-handle:where([data-placement="inline-start"]) {
   inset-inline-start: var(--space-2);
 }
 
-.x-overlay:where([data-resize="inline-end"]):before {
+.x-handle:where([data-placement="inline-end"]) {
   inset-inline-end: var(--space-2);
 }
 
-.x-overlay:where([data-resize^="start-"], [data-resize^="end-"]):before {
+.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;
-  content: "";
-  z-index: 1;
-  pointer-events: none;
   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);
@@ -106,13 +80,9 @@
     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)
+    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)
+    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) /
@@ -123,105 +93,85 @@
     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)
+    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)
+    radial-gradient(circle closest-side, #000 calc(100% - .5px), transparent)
       left 0 bottom 0 / var(--_cap) var(--_cap) no-repeat;
-  position: absolute;
+  background: none;
 }
 
-.x-overlay:where([data-resize="start-end"], [data-resize="end-end"]):before {
+.x-handle:where([data-placement="start-end"], [data-placement="end-end"]) {
   inset-inline-end: var(--space-1);
 }
 
-.x-overlay:where([data-resize="start-start"], [data-resize="end-start"]):before {
+.x-handle:where([data-placement="start-start"], [data-placement="end-start"]) {
   --_gx: -1;
   inset-inline-start: var(--space-1);
 }
 
-.x-overlay:where([data-resize^="end-"]):before {
+.x-handle:where([data-placement^="end-"]) {
   bottom: var(--space-1);
 }
 
-.x-overlay:where([data-resize^="start-"]):before {
+.x-handle:where([data-placement^="start-"]) {
   top: var(--space-1);
   --_gy: -1;
 }
 
-.x-overlay:where([data-resize="start-end"], [data-resize="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))):before {
+.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-overlay:where([data-resize="start-start"], [data-resize="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))):before {
+.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;
 }
 
-.x-overlay > .x-overlay-arrow {
-  display: none;
-}
-
-.x-overlay:where([data-placed]) > .x-overlay-arrow {
-  --_as: var(--overlay-arrow-size, 10px);
-  z-index: -1;
-  width: var(--_as);
-  height: var(--_as);
-  background-color: var(--color-material, var(--color-surface));
-  box-shadow: 0 0 0 .5px var(--neutral-a3);
-  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));
-  display: block;
-  position: absolute;
-  rotate: 45deg;
+@media (forced-colors: active) {
+  .x-handle:where([data-placement]) {
+    background-color: buttontext;
+    border-color: buttontext;
+  }
 }
 
-.x-overlay:where([data-placed="bottom"]) > .x-overlay-arrow {
-  top: calc(var(--_as) / -2);
-  left: var(--overlay-arrow-x, calc(50% - var(--_as) / 2));
+.x-overlay {
+  color: var(--neutral-12);
 }
 
-.x-overlay:where([data-placed="top"]) > .x-overlay-arrow {
-  bottom: calc(var(--_as) / -2);
-  left: var(--overlay-arrow-x, calc(50% - var(--_as) / 2));
+.x-overlay:where([open])::backdrop {
+  background: var(--overlay-backdrop, var(--color-overlay));
 }
 
-.x-overlay:where([data-placed="right"]) > .x-overlay-arrow {
-  left: calc(var(--_as) / -2);
-  top: var(--overlay-arrow-y, calc(50% - var(--_as) / 2));
+.x-overlay > .x-card {
+  contain: none;
+  touch-action: pan-y;
+  position: static;
+  overflow-y: auto;
 }
 
-.x-overlay:where([data-placed="left"]) > .x-overlay-arrow {
-  right: calc(var(--_as) / -2);
-  top: var(--overlay-arrow-y, calc(50% - var(--_as) / 2));
+:where(.x-overlay:not([data-material-background], [data-material-background] .x-overlay)) {
+  --color-material: var(--color-material-solid);
+  --backdrop-filter-material: none;
 }
 
 @supports (transition-behavior: allow-discrete) {
   .x-overlay {
-    transition-property: top, left, translate, transform, width, height, opacity, scale, display;
+    transition-property: translate, width, height, scale, display;
     transition-duration: var(--overlay-duration);
     transition-timing-function: var(--overlay-easing);
     transition-behavior: allow-discrete;
   }
 
-  .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]) {
-    opacity: 0;
-    scale: .97;
+  .x-overlay:where(:not(:has( > .x-handle[data-placement^="block-"],  > .x-handle[data-placement^="inline-"]))) {
+    scale: .94;
   }
 
-  .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]):where([open], :popover-open) {
-    opacity: 1;
+  .x-overlay:where(:not(:has( > .x-handle[data-placement^="block-"],  > .x-handle[data-placement^="inline-"]))):where([open], :popover-open) {
     scale: 1;
   }
 
   @starting-style {
-    .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]):where([open], :popover-open) {
-      opacity: 0;
-      scale: .97;
+    .x-overlay:where(:not(:has( > .x-handle[data-placement^="block-"],  > .x-handle[data-placement^="inline-"]))):where([open], :popover-open) {
+      scale: .94;
     }
   }
 
@@ -241,86 +191,86 @@
     transform-origin: 100%;
   }
 
-  .x-overlay:where([data-resize="block-start"]) {
+  .x-overlay:where(:has( > .x-handle[data-placement="block-start"])) {
     --_ey: 100%;
   }
 
-  .x-overlay:where([data-resize="block-start"]):where([open], :popover-open) {
+  .x-overlay:where(:has( > .x-handle[data-placement="block-start"])):where([open], :popover-open) {
     --_ey: 0%;
   }
 
   @starting-style {
-    .x-overlay:where([data-resize="block-start"]):where([open], :popover-open) {
+    .x-overlay:where(:has( > .x-handle[data-placement="block-start"])):where([open], :popover-open) {
       --_ey: 100%;
     }
   }
 
-  .x-overlay:where([data-resize="block-end"]) {
+  .x-overlay:where(:has( > .x-handle[data-placement="block-end"])) {
     --_ey: -100%;
   }
 
-  .x-overlay:where([data-resize="block-end"]):where([open], :popover-open) {
+  .x-overlay:where(:has( > .x-handle[data-placement="block-end"])):where([open], :popover-open) {
     --_ey: 0%;
   }
 
   @starting-style {
-    .x-overlay:where([data-resize="block-end"]):where([open], :popover-open) {
+    .x-overlay:where(:has( > .x-handle[data-placement="block-end"])):where([open], :popover-open) {
       --_ey: -100%;
     }
   }
 
-  .x-overlay:where([data-resize="inline-start"]) {
+  .x-overlay:where(:has( > .x-handle[data-placement="inline-start"])) {
     --_ex: 100%;
   }
 
-  .x-overlay:where([data-resize="inline-start"]):where([open], :popover-open) {
+  .x-overlay:where(:has( > .x-handle[data-placement="inline-start"])):where([open], :popover-open) {
     --_ex: 0%;
   }
 
   @starting-style {
-    .x-overlay:where([data-resize="inline-start"]):where([open], :popover-open) {
+    .x-overlay:where(:has( > .x-handle[data-placement="inline-start"])):where([open], :popover-open) {
       --_ex: 100%;
     }
   }
 
-  .x-overlay:where([data-resize="inline-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))) {
+  .x-overlay:where(:has( > .x-handle[data-placement="inline-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))) {
     --_ex: -100%;
   }
 
-  .x-overlay:where([data-resize="inline-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))):where([open], :popover-open) {
+  .x-overlay:where(:has( > .x-handle[data-placement="inline-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))):where([open], :popover-open) {
     --_ex: 0%;
   }
 
   @starting-style {
-    .x-overlay:where([data-resize="inline-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))):where([open], :popover-open) {
+    .x-overlay:where(:has( > .x-handle[data-placement="inline-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))):where([open], :popover-open) {
       --_ex: -100%;
     }
   }
 
-  .x-overlay:where([data-resize="inline-end"]) {
+  .x-overlay:where(:has( > .x-handle[data-placement="inline-end"])) {
     --_ex: -100%;
   }
 
-  .x-overlay:where([data-resize="inline-end"]):where([open], :popover-open) {
+  .x-overlay:where(:has( > .x-handle[data-placement="inline-end"])):where([open], :popover-open) {
     --_ex: 0%;
   }
 
   @starting-style {
-    .x-overlay:where([data-resize="inline-end"]):where([open], :popover-open) {
+    .x-overlay:where(:has( > .x-handle[data-placement="inline-end"])):where([open], :popover-open) {
       --_ex: -100%;
     }
   }
 
-  .x-overlay:where([data-resize="inline-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))) {
+  .x-overlay:where(:has( > .x-handle[data-placement="inline-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))) {
     --_ex: 100%;
   }
 
-  .x-overlay:where([data-resize="inline-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))):where([open], :popover-open) {
+  .x-overlay:where(:has( > .x-handle[data-placement="inline-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))):where([open], :popover-open) {
     --_ex: 0%;
   }
 
   @starting-style {
-    .x-overlay:where([data-resize="inline-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))):where([open], :popover-open) {
+    .x-overlay:where(:has( > .x-handle[data-placement="inline-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))):where([open], :popover-open) {
       --_ex: 100%;
     }
   }
@@ -345,7 +295,7 @@
 
   @supports (overlay: auto) {
     .x-overlay {
-      transition-property: top, left, translate, transform, width, height, opacity, scale, display, overlay;
+      transition-property: translate, width, height, scale, display, overlay;
     }
 
     .x-overlay::backdrop {
@@ -362,7 +312,7 @@
     transition-timing-function: var(--overlay-easing, cubic-bezier(.32, .72, 0, 1));
   }
 
-  :root:has(.x-overlay[data-resize="block-start"][open]) [data-overlay-deck] {
+  :root:has(.x-overlay[open]:has( > .x-handle[data-placement="block-start"])) [data-overlay-deck] {
     scale: .96;
     translate: 0 var(--space-2);
     border-radius: var(--radius-4);
@@ -375,14 +325,3 @@
     transition: none;
   }
 }
-
-@media (forced-colors: active) {
-  .x-overlay:where([data-resize]):before {
-    background-color: buttontext;
-    border-color: buttontext;
-  }
-
-  .x-overlay:where([data-draggable]):after {
-    background-color: buttontext;
-  }
-}

package/dist/utilities/_observe.mjs

@@ -1,4 +1,4 @@
-import { _ as onCleanup } from "../lib-DYypKhxk.mjs";
+import { _ as onCleanup } from "../lib-Dw0g-vex.mjs";
 import "../signals/index.mjs";
 //#region src/utilities/_observe.ts
 /**

package/dist/utilities/active-element.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/utilities/active-element.d.ts
 declare const activeElement: Computed<Element | null>;

package/dist/utilities/active-element.mjs

@@ -1,4 +1,4 @@
-import { l as computed } from "../lib-DYypKhxk.mjs";
+import { l as computed } from "../lib-Dw0g-vex.mjs";
 import "../signals/index.mjs";
 import { fromEvent, sync } from "./event-driven.mjs";
 import { isBrowser } from "./environment.mjs";

package/dist/utilities/async.d.mts

@@ -1,4 +1,4 @@
-import { m as SEED, r as MaybeReactive, u as CLAIM } from "../index-BrVMftR8.mjs";
+import { m as SEED, r as MaybeReactive, u as CLAIM } from "../index-BSAqa0-0.mjs";
 import { ComputedPromise } from "./promise.mjs";
 
 //#region src/utilities/async.d.ts

package/dist/utilities/async.mjs

@@ -1,4 +1,4 @@
-import { C as untracked, b as shouldDeferAsyncRuns, f as effectsInert, n as CLAIM, o as SEED, u as effect, x as signal } from "../lib-DYypKhxk.mjs";
+import { C as untracked, b as shouldDeferAsyncRuns, f as effectsInert, n as CLAIM, o as SEED, u as effect, x as signal } from "../lib-Dw0g-vex.mjs";
 import { resolve } from "../signals/index.mjs";
 import { promise } from "./promise.mjs";
 //#region src/utilities/async.ts

package/dist/utilities/context.mjs

@@ -1,4 +1,4 @@
-import { _ as onCleanup, x as signal } from "../lib-DYypKhxk.mjs";
+import { _ as onCleanup, x as signal } from "../lib-Dw0g-vex.mjs";
 import "../signals/index.mjs";
 //#region src/utilities/context.ts
 const registry = /* @__PURE__ */ new WeakMap();

package/dist/utilities/debounced.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/utilities/debounced.d.ts
 /**

package/dist/utilities/debounced.mjs

@@ -1,4 +1,4 @@
-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 { createTimeout } from "./timeout.mjs";
 //#region src/utilities/debounced.ts

package/dist/utilities/direction.d.mts

@@ -0,0 +1,2 @@
+import { n as createDirection, r as direction, t as Direction } from "../direction-EwIAAn1f.mjs";
+export { Direction, createDirection, direction };

package/dist/utilities/direction.mjs

@@ -0,0 +1,42 @@
+import { _ as onCleanup, l as computed, x as signal } from "../lib-Dw0g-vex.mjs";
+import "../signals/index.mjs";
+import { isBrowser } from "./environment.mjs";
+import { createMutationObserver } from "./mutation-observer.mjs";
+//#region src/utilities/direction.ts
+/**
+* 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
+* });
+* ```
+*/
+function createDirection(element) {
+	if (!isBrowser) return Object.assign(computed(() => "ltr"), { [Symbol.dispose]() {} });
+	const target = element ?? document.documentElement;
+	const read = () => getComputedStyle(target).direction === "rtl" ? "rtl" : "ltr";
+	const current = signal(read());
+	const observer = createMutationObserver(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["dir"],
+		subtree: true
+	}, () => current(read()));
+	onCleanup(() => observer[Symbol.dispose]());
+	return Object.assign(computed(() => current()), { [Symbol.dispose]: () => observer[Symbol.dispose]() });
+}
+/** The page's direction — the document root's, reactive. */
+const direction = createDirection();
+//#endregion
+export { createDirection, direction };

package/dist/utilities/dom-lifecycle.bench.mjs

@@ -3218,7 +3218,7 @@ function manageArtifactAttachment(attachment) {
 	if (attachment.body != null) attachment.bodyEncoding ??= "base64";
 }
 //#endregion
-//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_jsdom@30.0.1_vite@8.0.8_@types+node@25.5.2_esbuild@0.28.1_yaml@2.9.0_/node_modules/vitest/dist/chunks/utils.BX5Fg8C4.js
+//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_@vitest+browser-playwright@4.1.9_happy-dom@20.8.9_jsdom_4a7f3a3b1442d8fc34c9440d05942918/node_modules/vitest/dist/chunks/utils.BX5Fg8C4.js
 const NAME_WORKER_STATE = "__vitest_worker__";
 function getWorkerState() {
 	const workerState = globalThis[NAME_WORKER_STATE];
@@ -3226,7 +3226,7 @@ function getWorkerState() {
 	return workerState;
 }
 //#endregion
-//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_jsdom@30.0.1_vite@8.0.8_@types+node@25.5.2_esbuild@0.28.1_yaml@2.9.0_/node_modules/vitest/dist/chunks/benchmark.CX_oY03V.js
+//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_@vitest+browser-playwright@4.1.9_happy-dom@20.8.9_jsdom_4a7f3a3b1442d8fc34c9440d05942918/node_modules/vitest/dist/chunks/benchmark.CX_oY03V.js
 const benchFns = /* @__PURE__ */ new WeakMap();
 const benchOptsMap = /* @__PURE__ */ new WeakMap();
 const bench = createBenchmark(function(name, fn = noop, options = {}) {

package/dist/utilities/dom-lifecycle.d.mts

@@ -1,4 +1,4 @@
-import { t as HTMLElementBase } from "../environment-c2ftMYT0.mjs";
+import { t as HTMLElementBase } from "../environment-EQugnOcg.mjs";
 
 //#region src/utilities/dom-lifecycle.d.ts
 type LifecycleCallback = (self: DomLifecycleElement) => void;

package/dist/utilities/dom-lifecycle.mjs

@@ -1,4 +1,4 @@
-import { d as effectScope } from "../lib-DYypKhxk.mjs";
+import { d as effectScope } from "../lib-Dw0g-vex.mjs";
 import "../signals/index.mjs";
 import { HTMLElementBase, isBrowser } from "./environment.mjs";
 //#region src/utilities/dom-lifecycle.ts

package/dist/utilities/element-rect.d.mts

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

package/dist/utilities/element-rect.mjs

@@ -1,4 +1,4 @@
-import { _ as onCleanup, d as effectScope, l as computed, u as effect, x as signal } from "../lib-DYypKhxk.mjs";
+import { _ as onCleanup, d as effectScope, l as computed, u as effect, x as signal } from "../lib-Dw0g-vex.mjs";
 import { resolve } from "../signals/index.mjs";
 import { createResizeObserver } from "./resize-observer.mjs";
 //#region src/utilities/element-rect.ts

package/dist/utilities/element-scroll.d.mts

@@ -1,4 +1,4 @@
-import { i as Signal } from "../index-BrVMftR8.mjs";
+import { i as Signal } from "../index-BSAqa0-0.mjs";
 
 //#region src/utilities/element-scroll.d.ts
 type ElementScrollResult = {

package/dist/utilities/environment.d.mts

@@ -1,2 +1,2 @@
-import { n as isBrowser, r as noopDisposable, t as HTMLElementBase } from "../environment-c2ftMYT0.mjs";
+import { n as isBrowser, r as noopDisposable, t as HTMLElementBase } from "../environment-EQugnOcg.mjs";
 export { HTMLElementBase, isBrowser, noopDisposable };

package/dist/utilities/event-driven.d.mts

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

package/dist/utilities/event-driven.mjs

@@ -1,4 +1,4 @@
-import { S as trigger, _ as onCleanup, l as computed, s as SIGNAL, x as signal } from "../lib-DYypKhxk.mjs";
+import { S as trigger, _ as onCleanup, l as computed, s as SIGNAL, x as signal } from "../lib-Dw0g-vex.mjs";
 import "../signals/index.mjs";
 //#region src/utilities/event-driven.ts
 /**

package/dist/utilities/event-listener.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/utilities/event-listener.d.ts
 /**

package/dist/utilities/event-listener.mjs

@@ -1,4 +1,4 @@
-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";
 //#region src/utilities/event-listener.ts
 function on(target, type, handler, options) {

package/dist/utilities/focus-within.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/utilities/focus-within.d.ts
 /**

package/dist/utilities/focus-within.mjs

@@ -1,4 +1,4 @@
-import { x as signal } from "../lib-DYypKhxk.mjs";
+import { x as signal } from "../lib-Dw0g-vex.mjs";
 import "../signals/index.mjs";
 import { on } from "./event-listener.mjs";
 //#region src/utilities/focus-within.ts

package/dist/utilities/hover.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/utilities/hover.d.ts
 /**

package/dist/utilities/hover.mjs

@@ -1,4 +1,4 @@
-import { x as signal } from "../lib-DYypKhxk.mjs";
+import { x as signal } from "../lib-Dw0g-vex.mjs";
 import "../signals/index.mjs";
 import { on } from "./event-listener.mjs";
 //#region src/utilities/hover.ts

package/dist/utilities/interval.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/utilities/interval.d.ts
 type IntervalResult = {

package/dist/utilities/interval.mjs

@@ -1,4 +1,4 @@
-import { _ as onCleanup, x as signal } from "../lib-DYypKhxk.mjs";
+import { _ as onCleanup, x as signal } from "../lib-Dw0g-vex.mjs";
 import "../signals/index.mjs";
 //#region src/utilities/interval.ts
 function createInterval(arg1, arg2) {