@skiddph/prui 0.10.2 → 0.11.0

package/dist/core/drawer.js

@@ -1,93 +1,76 @@
-import { jsx as t, jsxs as Y } from "react/jsx-runtime";
-import * as a from "react";
-import { X as k } from "lucide-react";
-import { cn as P } from "./cn.js";
-import { useReducedMotion as j, useOverlay as A, Portal as E } from "./overlay.js";
-import { usePruiI18n as F } from "../i18n.js";
-const L = {
+import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import * as u from "react";
+import { X as M } from "lucide-react";
+import { cn as R } from "./cn.js";
+import { useMountTransition as T, useOverlay as Y, Portal as k } from "./overlay.js";
+import { usePruiI18n as P } from "../i18n.js";
+const j = {
   left: "left-0 top-0 h-full prui-drawer-panel",
   right: "right-0 top-0 h-full prui-drawer-panel",
   top: "left-0 top-0 w-full prui-drawer-panel",
   bottom: "left-0 bottom-0 w-full prui-drawer-panel"
-}, $ = {
+}, L = {
   left: "translateX(0)",
   right: "translateX(0)",
   top: "translateY(0)",
   bottom: "translateY(0)"
-}, q = {
+}, $ = {
   left: "translateX(-100%)",
   right: "translateX(100%)",
   top: "translateY(-100%)",
   bottom: "translateY(100%)"
-}, h = a.forwardRef(function({ open: n, defaultOpen: i = !1, onOpenChange: s, side: r = "right", size: o, children: v, ariaLabel: w, hideClose: y, className: g, style: x }, S) {
-  const [N, D] = a.useState(i), m = n !== void 0, l = m ? n : N, [M, u] = a.useState(l), [p, d] = a.useState(!1), f = j(), { t: R } = F(), c = (e) => {
-    m || D(e), s == null || s(e);
-  };
-  a.useEffect(() => {
-    if (l) {
-      if (u(!0), f) {
-        d(!0);
-        return;
-      }
-      const C = requestAnimationFrame(() => d(!0));
-      return () => cancelAnimationFrame(C);
-    }
-    if (d(!1), f) {
-      u(!1);
-      return;
-    }
-    const e = setTimeout(() => u(!1), 300);
-    return () => clearTimeout(e);
-  }, [l, f]);
-  const { ref: T } = A({
-    open: l,
-    onEscape: () => c(!1)
+}, f = u.forwardRef(function({ open: a, defaultOpen: n = !1, onOpenChange: l, side: e = "right", size: r, children: c, ariaLabel: h, hideClose: b, className: v, style: y }, g) {
+  const [w, x] = u.useState(n), p = a !== void 0, d = p ? a : w, { mounted: S, shown: i } = T(d), { t: N } = P(), s = (o) => {
+    p || x(o), l == null || l(o);
+  }, { ref: D } = Y({
+    open: d,
+    onEscape: () => s(!1)
   });
-  if (!M) return null;
+  if (!S) return null;
   const X = {
-    transform: p ? $[r] : q[r],
+    transform: i ? L[e] : $[e],
     transition: "transform var(--prui-duration-slow) var(--prui-ease-out)",
-    ...r === "left" || r === "right" ? { width: typeof o == "number" ? `${o}px` : o ?? "400px" } : { maxHeight: typeof o == "number" ? `${o}px` : o ?? "80vh" },
-    ...x
+    ...e === "left" || e === "right" ? { width: typeof r == "number" ? `${r}px` : r ?? "400px" } : { maxHeight: typeof r == "number" ? `${r}px` : r ?? "80vh" },
+    ...y
   };
-  return /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t("div", { ref: T, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t("div", { ref: D, children: /* @__PURE__ */ t(
     "div",
     {
       className: "prui-drawer-overlay fixed inset-0 z-[var(--prui-z-modal)]",
       style: {
         backgroundColor: "var(--prui-scrim)",
-        opacity: p ? 1 : 0,
+        opacity: i ? 1 : 0,
         transition: "opacity var(--prui-duration-slow) var(--prui-ease-out)"
       },
-      onMouseDown: (e) => {
-        e.target === e.currentTarget && c(!1);
+      onMouseDown: (o) => {
+        o.target === o.currentTarget && s(!1);
       },
-      children: /* @__PURE__ */ Y(
+      children: /* @__PURE__ */ C(
         "div",
         {
-          ref: S,
+          ref: g,
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": w,
-          "data-state": p ? "open" : "closed",
-          className: P(
+          "aria-label": h,
+          "data-state": i ? "open" : "closed",
+          className: R(
             "absolute flex flex-col overflow-y-auto border border-[var(--prui-line)] bg-[var(--prui-surface)]",
             "text-[var(--prui-fg)] shadow-[var(--prui-shadow-modal)] outline-none",
-            L[r],
-            g
+            j[e],
+            v
           ),
           style: X,
           children: [
-            r === "bottom" ? /* @__PURE__ */ t("div", { "aria-hidden": !0, className: "mx-auto mt-2 mb-1 h-1 w-10 shrink-0 rounded-[var(--prui-radius-full)] bg-[var(--prui-line)]" }) : null,
-            v,
-            y ? null : /* @__PURE__ */ t(
+            e === "bottom" ? /* @__PURE__ */ t("div", { "aria-hidden": !0, className: "mx-auto mt-2 mb-1 h-1 w-10 shrink-0 rounded-[var(--prui-radius-full)] bg-[var(--prui-line)]" }) : null,
+            c,
+            b ? null : /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                "aria-label": R.close,
-                onClick: () => c(!1),
+                "aria-label": N.close,
+                onClick: () => s(!1),
                 className: "absolute right-3 top-3 rounded-[var(--prui-radius-1)] p-1 text-[var(--prui-dim)] transition-colors hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)] cursor-pointer",
-                children: /* @__PURE__ */ t(k, { className: "h-4 w-4", "aria-hidden": !0 })
+                children: /* @__PURE__ */ t(M, { className: "h-4 w-4", "aria-hidden": !0 })
               }
             )
           ]
@@ -96,12 +79,12 @@ const L = {
     }
   ) }) });
 });
-h.displayName = "Drawer";
-const H = a.forwardRef(function(n, i) {
-  return /* @__PURE__ */ t(h, { ref: i, side: "bottom", ...n });
+f.displayName = "Drawer";
+const E = u.forwardRef(function(a, n) {
+  return /* @__PURE__ */ t(f, { ref: n, side: "bottom", ...a });
 });
-H.displayName = "Sheet";
-const J = {
+E.displayName = "Sheet";
+const A = {
   name: "Drawer",
   props: [
     { name: "open", type: "boolean", default: "undefined", control: "boolean" },
@@ -112,7 +95,7 @@ const J = {
     { name: "ariaLabel", type: "string", default: null, control: "text" },
     { name: "hideClose", type: "boolean", default: "false", control: "boolean" }
   ]
-}, K = {
+}, B = {
   name: "Sheet",
   props: [
     { name: "open", type: "boolean", default: "undefined", control: "boolean" },
@@ -122,8 +105,8 @@ const J = {
   ]
 };
 export {
-  h as Drawer,
-  H as Sheet,
-  J as drawerPropsMeta,
-  K as sheetPropsMeta
+  f as Drawer,
+  E as Sheet,
+  A as drawerPropsMeta,
+  B as sheetPropsMeta
 };

package/dist/core/overlay.d.ts

@@ -25,6 +25,18 @@ export declare function Portal({ children, container, }: {
 }): React.ReactPortal | null;
 /** True when the user asked the OS for reduced motion. */
 export declare function useReducedMotion(): boolean;
+/**
+ * Mount/unmount lifecycle for enter/exit animations. Mounts immediately when
+ * `open` turns true; flips `shown` a frame later so the enter state (the
+ * "from" transform) paints first — a single rAF can merge into that first
+ * paint under discrete-event flushes and skip the animation entirely, so this
+ * waits two frames. On close, `shown` drops at once and unmounting waits
+ * `exitMs` for the exit animation. Reduced motion skips both directions.
+ */
+export declare function useMountTransition(open: boolean, exitMs?: number): {
+    mounted: boolean;
+    shown: boolean;
+};
 /** All focusable elements inside root, in DOM order. */
 export declare function getFocusable(root: HTMLElement | null): HTMLElement[];
 /** Register an overlay; returns its stack id. */

package/dist/core/overlay.js

@@ -1,23 +1,47 @@
-import * as s from "react";
+import * as c from "react";
 import { createPortal as E } from "react-dom";
-function P({
+function x({
   children: t,
   container: e
 }) {
-  const [r, c] = s.useState(null);
-  return s.useEffect(() => {
-    c(e ?? (typeof document < "u" ? document.body : null));
-  }, [e]), r == null ? null : E(t, r);
-}
-function x() {
-  const [t, e] = s.useState(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-  return s.useEffect(() => {
+  const [n, s] = c.useState(null);
+  return c.useEffect(() => {
+    s(e ?? (typeof document < "u" ? document.body : null));
+  }, [e]), n == null ? null : E(t, n);
+}
+function v() {
+  const [t, e] = c.useState(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  return c.useEffect(() => {
     if (typeof window > "u" || !window.matchMedia) return;
-    const r = window.matchMedia("(prefers-reduced-motion: reduce)"), c = () => e(r.matches);
-    return r.addEventListener("change", c), () => r.removeEventListener("change", c);
+    const n = window.matchMedia("(prefers-reduced-motion: reduce)"), s = () => e(n.matches);
+    return n.addEventListener("change", s), () => n.removeEventListener("change", s);
   }, []), t;
 }
-const v = [
+function I(t, e = 300) {
+  const n = v(), [s, o] = c.useState(t), [r, u] = c.useState(!1);
+  return c.useEffect(() => {
+    if (t) {
+      if (o(!0), n) {
+        u(!0);
+        return;
+      }
+      let f = 0;
+      const a = requestAnimationFrame(() => {
+        f = requestAnimationFrame(() => u(!0));
+      });
+      return () => {
+        cancelAnimationFrame(a), cancelAnimationFrame(f);
+      };
+    }
+    if (u(!1), n) {
+      o(!1);
+      return;
+    }
+    const i = setTimeout(() => o(!1), e);
+    return () => clearTimeout(i);
+  }, [t, n, e]), { mounted: s, shown: r };
+}
+const g = [
   "a[href]",
   "button:not([disabled])",
   "input:not([disabled])",
@@ -30,138 +54,138 @@ const v = [
   "[contenteditable]:not([contenteditable='false'])"
 ].join(",");
 function y(t) {
-  return t ? Array.from(t.querySelectorAll(v)).filter(
+  return t ? Array.from(t.querySelectorAll(g)).filter(
     (e) => !e.closest("[inert], [aria-hidden='true']") && !e.hasAttribute("hidden")
   ) : [];
 }
-const f = [];
-function g(t) {
+const l = [];
+function T(t) {
   const e = Symbol("prui-overlay");
-  return f.push({ id: e, element: t }), e;
+  return l.push({ id: e, element: t }), e;
 }
-function T(t) {
-  const e = f.findIndex((r) => r.id === t);
-  e >= 0 && f.splice(e, 1);
+function w(t) {
+  const e = l.findIndex((n) => n.id === t);
+  e >= 0 && l.splice(e, 1);
 }
 function k(t) {
-  const e = f[f.length - 1];
+  const e = l[l.length - 1];
   return e != null && e.id === t;
 }
-function I() {
-  return f.length;
+function B() {
+  return l.length;
 }
-function w(t) {
-  const e = s.useRef(null), r = s.useRef(null), [c, o] = s.useReducer((i) => i + 1, 0);
-  s.useEffect(() => {
+function A(t) {
+  const e = c.useRef(null), n = c.useRef(null), [s, o] = c.useReducer((i) => i + 1, 0);
+  c.useEffect(() => {
     if (!t) return;
-    const i = g(null);
-    return e.current = i, r.current = f[f.length - 1] ?? null, o(), () => {
-      T(i), e.current === i && (e.current = null, r.current = null);
+    const i = T(null);
+    return e.current = i, n.current = l[l.length - 1] ?? null, o(), () => {
+      w(i), e.current === i && (e.current = null, n.current = null);
     };
   }, [t]);
-  const n = s.useCallback((i) => {
-    r.current && (r.current.element = i);
-  }, []), u = s.useCallback(() => e.current != null ? k(e.current) : !1, []);
-  return { setElement: n, isTop: u };
-}
-function R(t, e, r) {
-  const c = s.useRef(r);
-  c.current = r, s.useEffect(() => {
+  const r = c.useCallback((i) => {
+    n.current && (n.current.element = i);
+  }, []), u = c.useCallback(() => e.current != null ? k(e.current) : !1, []);
+  return { setElement: r, isTop: u };
+}
+function R(t, e, n) {
+  const s = c.useRef(n);
+  s.current = n, c.useEffect(() => {
     if (!t) return;
-    const o = (n) => {
-      if (n.key !== "Escape" || !e()) return;
-      c.current() === !1 && n.stopPropagation();
+    const o = (r) => {
+      if (r.key !== "Escape" || !e()) return;
+      s.current() === !1 && r.stopPropagation();
     };
     return document.addEventListener("keydown", o, !0), () => document.removeEventListener("keydown", o, !0);
   }, [t, e]);
 }
-let a = 0, h = "", p = "";
-function L() {
-  typeof document > "u" || (a++, !(a > 1) && (h = document.body.style.overflow, p = document.body.style.paddingRight, document.body.style.overflow = "hidden", document.body.classList.add("modal-open")));
+let m = 0, h = "", p = "";
+function S() {
+  typeof document > "u" || (m++, !(m > 1) && (h = document.body.style.overflow, p = document.body.style.paddingRight, document.body.style.overflow = "hidden", document.body.classList.add("modal-open")));
 }
-function A() {
-  typeof document > "u" || (a = Math.max(0, a - 1), !(a > 0) && (document.body.style.overflow = h, document.body.style.paddingRight = p, document.body.classList.remove("modal-open")));
+function L() {
+  typeof document > "u" || (m = Math.max(0, m - 1), !(m > 0) && (document.body.style.overflow = h, document.body.style.paddingRight = p, document.body.classList.remove("modal-open")));
 }
-function S(t) {
-  s.useEffect(() => {
+function C(t) {
+  c.useEffect(() => {
     if (t)
-      return L(), A;
+      return S(), L;
   }, [t]);
 }
 const b = typeof HTMLElement < "u" && "inert" in HTMLElement.prototype;
-function C(t, e) {
-  const r = t.ownerDocument, c = [];
-  for (const o of Array.from(r.body.childNodes)) {
+function M(t, e) {
+  const n = t.ownerDocument, s = [];
+  for (const o of Array.from(n.body.childNodes)) {
     if (!(o instanceof HTMLElement)) continue;
-    const n = o.tagName;
-    n === "SCRIPT" || n === "STYLE" || n === "LINK" || n === "NOSCRIPT" || n === "META" || n === "TITLE" || n === "TEMPLATE" || o === t || o.contains(t) || t.contains(o) || e.has(o) || o.getAttribute("aria-hidden") !== "true" && (c.push({ el: o, ariaHidden: o.getAttribute("aria-hidden") }), o.setAttribute("aria-hidden", "true"), b && o.setAttribute("inert", ""));
+    const r = o.tagName;
+    r === "SCRIPT" || r === "STYLE" || r === "LINK" || r === "NOSCRIPT" || r === "META" || r === "TITLE" || r === "TEMPLATE" || o === t || o.contains(t) || t.contains(o) || e.has(o) || o.getAttribute("aria-hidden") !== "true" && (s.push({ el: o, ariaHidden: o.getAttribute("aria-hidden") }), o.setAttribute("aria-hidden", "true"), b && o.setAttribute("inert", ""));
   }
   return () => {
-    for (const { el: o, ariaHidden: n } of c)
-      n === null ? o.removeAttribute("aria-hidden") : o.setAttribute("aria-hidden", n), b && o.removeAttribute("inert");
+    for (const { el: o, ariaHidden: r } of s)
+      r === null ? o.removeAttribute("aria-hidden") : o.setAttribute("aria-hidden", r), b && o.removeAttribute("inert");
   };
 }
-function M(t, e) {
-  s.useEffect(() => {
+function O(t, e) {
+  c.useEffect(() => {
     if (!t || !e || typeof document > "u") return;
-    const r = /* @__PURE__ */ new Set();
-    for (const c of f)
-      c.element && r.add(c.element);
-    return C(e, r);
+    const n = /* @__PURE__ */ new Set();
+    for (const s of l)
+      s.element && n.add(s.element);
+    return M(e, n);
   }, [t, e]);
 }
-function O({ active: t, container: e, initialFocus: r = "first", restoreFocus: c = !0 }) {
-  const o = s.useRef(null);
-  s.useEffect(() => {
+function N({ active: t, container: e, initialFocus: n = "first", restoreFocus: s = !0 }) {
+  const o = c.useRef(null);
+  c.useEffect(() => {
     if (!t) return;
     o.current = document.activeElement ?? null;
-    const u = (r === !1 ? null : r === "container" ? e : r === "first" ? y(e)[0] ?? e : r.current ?? null) ?? e;
+    const u = (n === !1 ? null : n === "container" ? e : n === "first" ? y(e)[0] ?? e : n.current ?? null) ?? e;
     u && u.isConnected && !u.contains(document.activeElement) && (!u.hasAttribute("tabindex") && u.tagName !== "INPUT" && u.tagName !== "BUTTON" && u.tagName !== "TEXTAREA" && u.tagName !== "SELECT" && u.tagName !== "A" && !u.isContentEditable && u.setAttribute("tabindex", "-1"), u.focus());
-  }, [t, e, r]), s.useEffect(() => {
+  }, [t, e, n]), c.useEffect(() => {
     if (t) return;
-    const n = o.current;
-    !n || !c || (o.current = null, n.isConnected && n.focus());
-  }, [t, c]), s.useEffect(
+    const r = o.current;
+    !r || !s || (o.current = null, r.isConnected && r.focus());
+  }, [t, s]), c.useEffect(
     () => () => {
-      const n = o.current;
-      n && c && n.isConnected && n.focus();
+      const r = o.current;
+      r && s && r.isConnected && r.focus();
     },
-    [c]
-  ), s.useEffect(() => {
+    [s]
+  ), c.useEffect(() => {
     if (!t) return;
-    const n = (u) => {
+    const r = (u) => {
       if (u.key !== "Tab") return;
       const i = y(e);
       if (i.length === 0) {
         e && !e.contains(document.activeElement) && (u.preventDefault(), e.focus());
         return;
       }
-      const l = i[0], m = i[i.length - 1], d = document.activeElement;
+      const f = i[0], a = i[i.length - 1], d = document.activeElement;
       if (!d || !(e != null && e.contains(d))) {
-        u.preventDefault(), l.focus();
+        u.preventDefault(), f.focus();
         return;
       }
-      u.shiftKey && d === l ? (u.preventDefault(), m.focus()) : !u.shiftKey && d === m && (u.preventDefault(), l.focus());
+      u.shiftKey && d === f ? (u.preventDefault(), a.focus()) : !u.shiftKey && d === a && (u.preventDefault(), f.focus());
     };
-    return document.addEventListener("keydown", n, !0), () => document.removeEventListener("keydown", n, !0);
+    return document.addEventListener("keydown", r, !0), () => document.removeEventListener("keydown", r, !0);
   }, [t, e]);
 }
-function B({
+function D({
   open: t,
   onEscape: e,
-  modal: r = !0,
-  initialFocus: c = "first",
+  modal: n = !0,
+  initialFocus: s = "first",
   restoreFocus: o = !0
 }) {
-  const [n, u] = s.useState(null), { setElement: i, isTop: l } = w(t);
-  return R(t, l, () => e == null ? void 0 : e()), S(t && r), M(t && r && n != null, n), O({ active: t && r, container: n, initialFocus: c, restoreFocus: o }), { ref: s.useCallback(
+  const [r, u] = c.useState(null), { setElement: i, isTop: f } = A(t);
+  return R(t, f, () => e == null ? void 0 : e()), C(t && n), O(t && n && r != null, r), N({ active: t && n, container: r, initialFocus: s, restoreFocus: o }), { ref: c.useCallback(
     (d) => {
       u(d), i(d);
     },
     [i]
-  ), element: n, top: l };
+  ), element: r, top: f };
 }
-const D = {
+const K = {
   name: "useOverlay",
   props: [
     { name: "open", type: "boolean", default: null, control: "boolean" },
@@ -172,18 +196,19 @@ const D = {
   ]
 };
 export {
-  P as Portal,
+  x as Portal,
   y as getFocusable,
   k as isTopOverlay,
-  I as overlayCount,
-  D as overlayPropsMeta,
-  g as pushOverlay,
-  T as removeOverlay,
+  B as overlayCount,
+  K as overlayPropsMeta,
+  T as pushOverlay,
+  w as removeOverlay,
   R as useEscapeKey,
-  O as useFocusTrap,
-  M as useInertBackground,
-  B as useOverlay,
-  w as useOverlayStack,
-  x as useReducedMotion,
-  S as useScrollLock
+  N as useFocusTrap,
+  O as useInertBackground,
+  I as useMountTransition,
+  D as useOverlay,
+  A as useOverlayStack,
+  v as useReducedMotion,
+  C as useScrollLock
 };

package/dist/index.js

@@ -35,7 +35,7 @@ import { TimePanel as Wo, TimePicker as Xo, TimeRangePicker as Yo, timePickerPro
 import { FileUpload as or, fileUploadPropsMeta as rr } from "./core/file-upload.js";
 import { D as tr, a as sr, b as pr, c as ir, d as Pr, F as mr, N as lr, P as nr, T as dr, e as Mr, f as gr, g as cr } from "./chunks/data-table-toolbar-B-5J2Ozl.js";
 import { Link as fr, NavLink as xr, Navigate as Tr, Outlet as Sr, Route as br, Routes as hr } from "react-router-dom";
-import { A as Fr, a as Rr, b as kr, c as yr, C as Ar, F as vr, R as Ir, S as Cr, d as wr, e as Br, f as Nr, g as Er, h as Or, i as Lr, r as Kr, s as Ur, j as Gr, k as _r, u as Hr } from "./chunks/auth-shell-BudxZ4__.js";
+import { A as Fr, a as Rr, b as kr, c as yr, C as Ar, F as vr, R as Ir, S as Cr, d as wr, e as Br, f as Nr, g as Er, h as Or, i as Lr, r as Kr, s as Ur, j as Gr, k as _r, u as Hr } from "./chunks/auth-shell-DBKlNZtl.js";
 import { AdminSetup as jr, EmptyState as qr, ErrorPage as zr, ForgotPasswordPage as Jr, LoginPage as Qr, LogoutPage as Wr, NotFoundPage as Xr, OtpPage as Yr, PagesRegistry as Zr, ProfilePage as $r, RegisterPage as ea, ResetPasswordPage as oa, SettingsPage as ra, adminSetupPropsMeta as aa, emptyStatePropsMeta as ta, errorPagePropsMeta as sa, forgotPasswordPagePropsMeta as pa, loginPagePropsMeta as ia, logoutPagePropsMeta as Pa, notFoundPagePropsMeta as ma, otpPagePropsMeta as la, profilePagePropsMeta as na, registerPagePropsMeta as da, resetPasswordPagePropsMeta as Ma, settingsPagePropsMeta as ga } from "./pages.js";
 import { PRUI_BREAKPOINTS as ua, PRUI_DESIGN_TOKENS as fa, PRUI_THEMES as xa, PRUI_TOKENS as Ta, applyTheme as Sa, applyThemeTokens as ba, clearAppliedTokens as ha, defineTheme as Da, isDarkTheme as Fa, isLightTheme as Ra, listThemes as ka, nextTheme as ya, readPersistedTheme as Aa, resolveThemeName as va, restoreAppliedTokens as Ia, themeMeta as Ca, themeMode as wa, useBreakpointAtLeast as Ba } from "./theme.js";
 import { PruiProvider as Ea, defaultDictionary as Oa, getPruiDictionary as La, resetPruiDictionary as Ka, setPruiDictionary as Ua, usePruiI18n as Ga } from "./i18n.js";

package/dist/prui.css

@@ -172,6 +172,7 @@ body.modal-open { overflow: hidden; }
   .prui-toast,
   .prui-skeleton,
   .prui-progress-indeterminate,
+  .prui-shell,
   .prui-anim-fade,
   .prui-anim-scale,
   .prui-anim-slide {
@@ -236,6 +237,8 @@ body.modal-open { overflow: hidden; }
     display: grid;
     height: 100dvh;
     overflow: hidden;
+    /* the rail width eases between full and collapsed (kill switch below) */
+    transition: grid-template-columns var(--prui-duration-base) var(--prui-ease-out);
     grid-template-columns: var(--prui-rail-width, 64px) minmax(0, 1fr);
     grid-template-areas:
       "header header"
@@ -256,6 +259,8 @@ body.modal-open { overflow: hidden; }
     display: grid;
     height: 100dvh;
     overflow: hidden;
+    /* sidebar <-> rail width eases on collapse (kill switch above disables) */
+    transition: grid-template-columns var(--prui-duration-base) var(--prui-ease-out);
     grid-template-columns: var(--prui-shell-sidebar, var(--prui-sidebar-width, 260px)) minmax(0, 1fr);
     grid-template-rows: auto minmax(0, 1fr);
     grid-template-areas:

package/dist/theme/base.css

@@ -157,6 +157,7 @@ body.modal-open { overflow: hidden; }
   .prui-toast,
   .prui-skeleton,
   .prui-progress-indeterminate,
+  .prui-shell,
   .prui-anim-fade,
   .prui-anim-scale,
   .prui-anim-slide {
@@ -221,6 +222,8 @@ body.modal-open { overflow: hidden; }
     display: grid;
     height: 100dvh;
     overflow: hidden;
+    /* the rail width eases between full and collapsed (kill switch below) */
+    transition: grid-template-columns var(--prui-duration-base) var(--prui-ease-out);
     grid-template-columns: var(--prui-rail-width, 64px) minmax(0, 1fr);
     grid-template-areas:
       "header header"
@@ -241,6 +244,8 @@ body.modal-open { overflow: hidden; }
     display: grid;
     height: 100dvh;
     overflow: hidden;
+    /* sidebar <-> rail width eases on collapse (kill switch above disables) */
+    transition: grid-template-columns var(--prui-duration-base) var(--prui-ease-out);
     grid-template-columns: var(--prui-shell-sidebar, var(--prui-sidebar-width, 260px)) minmax(0, 1fr);
     grid-template-rows: auto minmax(0, 1fr);
     grid-template-areas:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skiddph/prui",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "PRUI component system: primitives, app-layer super-components, pages, and themes",
   "type": "module",
   "license": "Apache-2.0",