twico-ui 1.6.0 → 1.8.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React25 = require('react');
+var React37 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 
@@ -23,21 +23,338 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React25__namespace = /*#__PURE__*/_interopNamespace(React25);
+var React37__namespace = /*#__PURE__*/_interopNamespace(React37);
 
-// components/navigation/Accordion.jsx
-var SUPPORTS_STYLE_HOIST = parseInt(String(React25__namespace.version), 10) >= 19;
+// components/TwicoProvider.jsx
+var SUPPORTS_STYLE_HOIST = parseInt(String(React37__namespace.version), 10) >= 19;
+var NonceContext = React37__namespace.createContext(void 0);
 function useScopedStyles(id, css) {
-  React25__namespace.useInsertionEffect(() => {
+  const nonce = React37__namespace.useContext(NonceContext);
+  React37__namespace.useInsertionEffect(() => {
     if (SUPPORTS_STYLE_HOIST) return;
-    if (typeof document === "undefined" || document.getElementById(id)) return;
-    const el = document.createElement("style");
-    el.id = id;
-    el.textContent = css;
-    document.head.appendChild(el);
-  }, [id, css]);
-  return SUPPORTS_STYLE_HOIST ? React25__namespace.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
+    if (typeof document === "undefined") return;
+    if (!css) return;
+    let el = document.getElementById(id);
+    if (!el) {
+      el = document.createElement("style");
+      el.id = id;
+      if (nonce) {
+        el.setAttribute("nonce", nonce);
+        el.nonce = nonce;
+      }
+      document.head.appendChild(el);
+    }
+    if (el.textContent !== css) el.textContent = css;
+  }, [id, css, nonce]);
+  return SUPPORTS_STYLE_HOIST && css ? React37__namespace.createElement("style", { href: id, precedence: "twc-ui", nonce }, css) : null;
+}
+
+// components/TwicoProvider.jsx
+function TwicoProvider({ nonce, children }) {
+  return React37__namespace.default.createElement(NonceContext.Provider, { value: nonce }, children);
+}
+var GROUPS = { colors: "color", space: "space", radius: "radius", font: "font", shadow: "shadow", motion: "" };
+function createTheme(partial = {}) {
+  const vars = {};
+  for (const [group, prefix] of Object.entries(GROUPS)) {
+    const obj = partial[group];
+    if (!obj || typeof obj !== "object") continue;
+    for (const [key, value] of Object.entries(obj)) {
+      if (value == null) continue;
+      vars[`--${prefix ? `${prefix}-` : ""}${key}`] = String(value);
+    }
+  }
+  return vars;
+}
+function toVars(theme) {
+  if (!theme) return {};
+  return Object.keys(theme).some((k) => k.startsWith("--")) ? theme : createTheme(theme);
+}
+function ThemeProvider({ theme, mode = "inline", className = "", style, children, ...rest }) {
+  const vars = React37__namespace.default.useMemo(() => toVars(theme), [theme]);
+  const uid = React37__namespace.default.useId();
+  const scopeId = `twc-theme-${uid.replace(/[^a-zA-Z0-9]/g, "")}`;
+  const css = mode === "stylesheet" ? `[data-twc-theme="${scopeId}"] { ${Object.entries(vars).map(([k, v]) => `${k}: ${v};`).join(" ")} }` : "";
+  const __twcStyles = useScopedStyles(mode === "stylesheet" ? scopeId : "twc-theme-noop", css);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `twc-theme ${className}`.trim(),
+      "data-twc-theme": mode === "stylesheet" ? scopeId : void 0,
+      style: mode === "stylesheet" ? style : { ...vars, ...style },
+      ...rest,
+      children: [
+        mode === "stylesheet" ? __twcStyles : null,
+        children
+      ]
+    }
+  );
 }
+var FORM_CSS = `
+.twc-form { display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-sans); }
+.twc-form__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: inherit; }
+`;
+var Form = React37__namespace.default.forwardRef(function Form2({
+  onSubmit,
+  preventDefault = true,
+  loading = false,
+  disabled = false,
+  gap,
+  className = "",
+  style,
+  children,
+  ...rest
+}, ref) {
+  const __twcStyles = useScopedStyles("twc-form-styles", FORM_CSS);
+  const handleSubmit = (e) => {
+    if (preventDefault) e.preventDefault();
+    onSubmit?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      ref,
+      className: `twc-form ${className}`.trim(),
+      onSubmit: handleSubmit,
+      style: gap != null ? { gap: `var(--space-${gap})`, ...style } : style,
+      ...rest,
+      children: [
+        __twcStyles,
+        /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className: "twc-form__fieldset", disabled: loading || disabled || void 0, "aria-busy": loading || void 0, children })
+      ]
+    }
+  );
+});
+Form.displayName = "Form";
+var VH_CSS = `
+.twc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
+`;
+var VisuallyHidden = React37__namespace.default.forwardRef(function VisuallyHidden2({ as: Tag2 = "span", className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-visually-hidden-styles", VH_CSS);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref, className: `twc-visually-hidden ${className}`.trim(), ...rest, children: [
+    __twcStyles,
+    children
+  ] });
+});
+VisuallyHidden.displayName = "VisuallyHidden";
+var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsoLayoutEffect = canUseDOM ? React37__namespace.default.useLayoutEffect : React37__namespace.default.useEffect;
+var FOCUSABLE = 'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
+function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus } = {}) {
+  React37__namespace.default.useEffect(() => {
+    if (!active || !canUseDOM) return void 0;
+    const node = ref.current;
+    if (!node) return void 0;
+    const prevFocused = document.activeElement;
+    const target = (typeof initialFocus === "function" ? initialFocus() : initialFocus && initialFocus.current) || node.querySelector(FOCUSABLE);
+    (target || node).focus();
+    return () => {
+      if (restoreFocus && prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
+    };
+  }, [active]);
+  React37__namespace.default.useEffect(() => {
+    if (!active || !canUseDOM) return void 0;
+    const node = ref.current;
+    const onKey = (e) => {
+      if (e.key !== "Tab" || !node) return;
+      const f = Array.from(node.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null);
+      if (!f.length) {
+        e.preventDefault();
+        node.focus();
+        return;
+      }
+      const first = f[0], last = f[f.length - 1], ae = document.activeElement;
+      if (e.shiftKey) {
+        if (ae === first || ae === node || !node.contains(ae)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (ae === last || !node.contains(ae)) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [active]);
+}
+function usePortal() {
+  return React37__namespace.default.useCallback((node) => {
+    if (typeof document === "undefined") return null;
+    return typeof reactDom.createPortal === "function" ? reactDom.createPortal(node, document.body) : node;
+  }, []);
+}
+var __scrollLockCount = 0;
+var __scrollLockSaved = { overflow: "", paddingRight: "" };
+function useScrollLock(locked = true) {
+  useIsoLayoutEffect(() => {
+    if (!canUseDOM || !locked) return void 0;
+    if (__scrollLockCount === 0) {
+      const b = document.body;
+      __scrollLockSaved = { overflow: b.style.overflow, paddingRight: b.style.paddingRight };
+      const gutter = window.innerWidth - document.documentElement.clientWidth;
+      b.style.overflow = "hidden";
+      if (gutter > 0) b.style.paddingRight = `${(parseFloat(getComputedStyle(b).paddingRight) || 0) + gutter}px`;
+    }
+    __scrollLockCount += 1;
+    return () => {
+      __scrollLockCount -= 1;
+      if (__scrollLockCount === 0) {
+        document.body.style.overflow = __scrollLockSaved.overflow;
+        document.body.style.paddingRight = __scrollLockSaved.paddingRight;
+      }
+    };
+  }, [locked]);
+}
+function useInertBackground(ref, active) {
+  React37__namespace.default.useEffect(() => {
+    if (!active || !canUseDOM) return void 0;
+    const node = ref.current;
+    if (!node) return void 0;
+    const changed = [];
+    Array.from(document.body.children).forEach((el) => {
+      if (el.contains(node) || el.hasAttribute("aria-hidden") || el.inert) return;
+      el.inert = true;
+      el.setAttribute("aria-hidden", "true");
+      changed.push(el);
+    });
+    return () => {
+      changed.forEach((el) => {
+        el.inert = false;
+        el.removeAttribute("aria-hidden");
+      });
+    };
+  }, [active]);
+}
+
+// components/layout/Portal.jsx
+function Portal({ children }) {
+  const render = usePortal();
+  return render(children);
+}
+function getColorSchemeScript({ storageKey = "twico-theme", attribute = "class", defaultScheme } = {}) {
+  const k = JSON.stringify(storageKey);
+  const a = JSON.stringify(attribute);
+  const d = defaultScheme === "dark" || defaultScheme === "light" ? JSON.stringify(defaultScheme) : "null";
+  return `(function(){try{var k=${k},a=${a},d=${d},t=localStorage.getItem(k);if(t!=='light'){if(t!=='dark'){t=d?d:(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');}}if(a==='class'){document.documentElement.classList.toggle('dark',t==='dark');}else{document.documentElement.setAttribute(a,t);}}catch(e){}})();`;
+}
+function ColorSchemeScript({ storageKey = "twico-theme", attribute = "class", nonce, defaultScheme }) {
+  return React37__namespace.default.createElement("script", { nonce }, getColorSchemeScript({ storageKey, attribute, defaultScheme }));
+}
+var KBD_CSS = `
+.twc-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 6px;
+  font-family: var(--font-mono); font-size: 11px; font-weight: var(--font-semibold); line-height: 1; color: var(--color-text-muted);
+  background: var(--color-surface-sunken); border: var(--border-thin) solid var(--color-border);
+  border-bottom-width: 2px; border-radius: var(--radius-sm); }
+`;
+var Kbd = React37__namespace.default.forwardRef(function Kbd2({ className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-kbd-styles", KBD_CSS);
+  return /* @__PURE__ */ jsxRuntime.jsxs("kbd", { ref, className: `twc-kbd ${className}`.trim(), ...rest, children: [
+    __twcStyles,
+    children
+  ] });
+});
+Kbd.displayName = "Kbd";
+var PRE_CSS = `
+.twc-pre { margin: 0; padding: var(--space-4); overflow-x: auto; max-width: 100%;
+  font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-normal);
+  color: var(--color-text); background: var(--color-surface-sunken);
+  border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
+  white-space: pre; -webkit-overflow-scrolling: touch; }
+`;
+var Pre = React37__namespace.default.forwardRef(function Pre2({ className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-pre-styles", PRE_CSS);
+  return /* @__PURE__ */ jsxRuntime.jsxs("pre", { ref, className: `twc-pre ${className}`.trim(), ...rest, children: [
+    __twcStyles,
+    children
+  ] });
+});
+Pre.displayName = "Pre";
+var ANCHOR_CSS = `
+.twc-anchor { color: var(--color-primary); text-decoration: none; border-radius: var(--radius-sm);
+  transition: color var(--duration-fast) var(--ease-standard); }
+.twc-anchor:hover { text-decoration: underline; color: var(--color-primary-hover, var(--color-primary)); }
+.twc-anchor:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-anchor__ext { display: inline-block; margin-inline-start: 3px; font-size: 0.85em; vertical-align: baseline; }
+`;
+function safeHref(url) {
+  if (url == null) return void 0;
+  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
+  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
+}
+var Anchor = React37__namespace.default.forwardRef(function Anchor2({ as: Tag2 = "a", href, external = false, className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-anchor-styles", ANCHOR_CSS);
+  const extra = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref, className: `twc-anchor ${className}`.trim(), href: Tag2 === "a" ? safeHref(href) : href, ...extra, ...rest, children: [
+    __twcStyles,
+    children,
+    external ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-anchor__ext", "aria-hidden": "true", children: "\u2197" }) : null
+  ] });
+});
+Anchor.displayName = "Anchor";
+var LABEL_CSS = `
+.twc-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: inline-flex; gap: 4px; align-items: center; }
+.twc-label[data-size="sm"] { font-size: var(--text-xs); }
+.twc-label[data-size="lg"] { font-size: var(--text-base); }
+.twc-label__req { color: var(--color-danger); }
+`;
+var Label = React37__namespace.default.forwardRef(function Label2({ htmlFor, required = false, size = "md", className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-label-styles", LABEL_CSS);
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, htmlFor, className: `twc-label ${className}`.trim(), "data-size": size, ...rest, children: [
+    __twcStyles,
+    children,
+    required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-label__req", "aria-hidden": "true", children: "*" }) : null
+  ] });
+});
+Label.displayName = "Label";
+var IMAGE_CSS = `
+.twc-image { display: block; max-width: 100%; }
+.twc-image[data-fit] { width: 100%; height: 100%; }
+`;
+var Image = React37__namespace.default.forwardRef(function Image2({
+  src,
+  alt,
+  fit,
+  radius,
+  aspectRatio,
+  fallback,
+  loading = "lazy",
+  className = "",
+  style,
+  onError,
+  ...rest
+}, ref) {
+  const __twcStyles = useScopedStyles("twc-image-styles", IMAGE_CSS);
+  const [failed, setFailed] = React37__namespace.default.useState(false);
+  const shownSrc = failed && fallback ? fallback : src;
+  const s = {
+    objectFit: fit,
+    borderRadius: radius ? `var(--radius-${radius})` : void 0,
+    aspectRatio,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    __twcStyles,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        ref,
+        src: shownSrc,
+        alt,
+        loading,
+        className: `twc-image ${className}`.trim(),
+        "data-fit": fit || void 0,
+        style: s,
+        onError: (e) => {
+          onError?.(e);
+          if (fallback && !failed) setFailed(true);
+        },
+        ...rest
+      }
+    )
+  ] });
+});
+Image.displayName = "Image";
 var ACCORDION_CSS = `
 .twc-accordion { display: flex; flex-direction: column; font-family: var(--font-sans);
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
@@ -77,10 +394,10 @@ function Accordion({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-accordion-styles", ACCORDION_CSS);
-  const rootRef = React25__namespace.default.useRef(null);
-  const [internal, setInternal] = React25__namespace.default.useState(() => new Set(defaultOpen));
+  const rootRef = React37__namespace.default.useRef(null);
+  const [internal, setInternal] = React37__namespace.default.useState(() => new Set(defaultOpen));
   const open = openProp !== void 0 ? new Set(openProp) : internal;
-  const baseId = React25__namespace.default.useId();
+  const baseId = React37__namespace.default.useId();
   function toggle(val) {
     const item = items.find((x) => x.value === val);
     if (item?.disabled) return;
@@ -127,9 +444,9 @@ function Accordion({
       const triggerId = `${baseId}-trigger-${i}`;
       const panelId = `${baseId}-panel-${i}`;
       const lvl = Math.min(6, Math.max(1, it.headingLevel ?? headingLevel));
-      const Heading2 = `h${lvl}`;
+      const Heading3 = `h${lvl}`;
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-accordion__item", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Heading2, { className: "twc-accordion__heading", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", id: triggerId, className: "twc-accordion__trigger", "data-open": isOpen || void 0, disabled: it.disabled || void 0, "aria-disabled": it.disabled || void 0, "data-disabled": it.disabled || void 0, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(it.value), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading3, { className: "twc-accordion__heading", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", id: triggerId, className: "twc-accordion__trigger", "data-open": isOpen || void 0, disabled: it.disabled || void 0, "aria-disabled": it.disabled || void 0, "data-disabled": it.disabled || void 0, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(it.value), children: [
           it.icon,
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-accordion__label", children: it.label }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) }) })
@@ -266,7 +583,7 @@ function Avatar({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-avatar-styles", AVATAR_CSS);
-  const [errored, setErrored] = React25__namespace.default.useState(false);
+  const [errored, setErrored] = React37__namespace.default.useState(false);
   const cleanSrc = safeSrc(src);
   const showImg = cleanSrc && !errored;
   const _statusLabel = status ? statusLabel ?? statusLabels?.[status] ?? STATUS_LABELS[status] : void 0;
@@ -324,7 +641,7 @@ var MENU_CSS = `
 .twc-menu__item-label { flex: 1 1 auto; min-width: 0; }
 .twc-menu__shortcut { margin-inline-start: auto; padding-inline-start: var(--space-3); font-size: var(--text-xs); color: var(--color-text-subtle); font-family: var(--font-mono); }
 `;
-var safeHref = (url) => {
+var safeHref2 = (url) => {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -344,25 +661,25 @@ function Menu({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-menu-styles", MENU_CSS);
-  const [openState, setOpenState] = React25__namespace.default.useState(defaultOpen);
-  const [render, setRender] = React25__namespace.default.useState(false);
-  const [pos, setPos] = React25__namespace.default.useState(null);
-  const [active, setActive] = React25__namespace.default.useState(-1);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const menuRef = React25__namespace.default.useRef(null);
-  const typeBufRef = React25__namespace.default.useRef("");
-  const typeTimerRef = React25__namespace.default.useRef(null);
-  const menuId = React25__namespace.default.useId();
+  const [openState, setOpenState] = React37__namespace.default.useState(defaultOpen);
+  const [render, setRender] = React37__namespace.default.useState(false);
+  const [pos, setPos] = React37__namespace.default.useState(null);
+  const [active, setActive] = React37__namespace.default.useState(-1);
+  const wrapRef = React37__namespace.default.useRef(null);
+  const menuRef = React37__namespace.default.useRef(null);
+  const typeBufRef = React37__namespace.default.useRef("");
+  const typeTimerRef = React37__namespace.default.useRef(null);
+  const menuId = React37__namespace.default.useId();
   const headerId = `${menuId}-header`;
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React25__namespace.default.useRef(open);
+  const openRef = React37__namespace.default.useRef(open);
   openRef.current = open;
-  const controlledRef = React25__namespace.default.useRef(controlled);
+  const controlledRef = React37__namespace.default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React25__namespace.default.useRef(onOpenChange);
+  const onOpenChangeRef = React37__namespace.default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React25__namespace.default.useCallback((next) => {
+  const setOpen = React37__namespace.default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -370,7 +687,7 @@ function Menu({
   }, []);
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
   const interactiveIdx = items.map((it, i) => !it.separator && !it.heading ? i : -1).filter((i) => i >= 0);
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React37__namespace.default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -385,7 +702,7 @@ function Menu({
     const avail = (flip ? r.top : vh - r.bottom) - gap - M;
     setPos({ top, bottom, left, width: w, flip, maxHeight: Math.max(120, avail) });
   }, [align, width]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -403,7 +720,7 @@ function Menu({
       document.removeEventListener("mousedown", onDown);
     };
   }, [open, place]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -496,7 +813,7 @@ function Menu({
         items.map((it, i) => {
           if (it.separator) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-menu__sep", role: "separator" }, `s${i}`);
           if (it.label && it.heading) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-menu__label", children: it.label }, `h${i}`);
-          const href = !it.disabled ? safeHref(it.href) : void 0;
+          const href = !it.disabled ? safeHref2(it.href) : void 0;
           const Tag2 = href ? "a" : "button";
           return /* @__PURE__ */ jsxRuntime.jsxs(
             Tag2,
@@ -526,7 +843,7 @@ function Menu({
     }
   ) : null;
   const activeDescId = open && active >= 0 ? `${menuId}-item-${active}` : void 0;
-  const triggerEl = React25__namespace.default.isValidElement(trigger) ? React25__namespace.default.cloneElement(trigger, {
+  const triggerEl = React37__namespace.default.isValidElement(trigger) ? React37__namespace.default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -677,7 +994,7 @@ a.twc-breadcrumb__item:hover, button.twc-breadcrumb__item:hover { color: var(--c
 .twc-breadcrumb__ellipsis { border: none; background: transparent; cursor: pointer; color: var(--color-text-subtle); padding: 3px 7px; border-radius: var(--radius-sm); font: inherit; }
 .twc-breadcrumb__ellipsis:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 `;
-function safeHref2(url) {
+function safeHref3(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -691,7 +1008,7 @@ function Breadcrumb({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-breadcrumb-styles", BREADCRUMB_CSS);
-  const [expanded, setExpanded] = React25__namespace.default.useState(false);
+  const [expanded, setExpanded] = React37__namespace.default.useState(false);
   const sep = separator || /* @__PURE__ */ jsxRuntime.jsx(ChevronSep, {});
   let display = items;
   if (maxItems > 0 && items.length > maxItems && !expanded) {
@@ -704,7 +1021,7 @@ function Breadcrumb({
     __twcStyles,
     display.map((it, i) => {
       const last = i === display.length - 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React37__namespace.default.Fragment, { children: [
         it.ellipsis ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-breadcrumb__ellipsis", "aria-label": "Show more", onClick: () => setExpanded(true), children: "\u2026" }) : last ? /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -716,7 +1033,7 @@ function Breadcrumb({
               it.label
             ]
           }
-        ) : safeHref2(it.href) ? /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "twc-breadcrumb__item", href: safeHref2(it.href), onClick: it.onClick, children: [
+        ) : safeHref3(it.href) ? /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "twc-breadcrumb__item", href: safeHref3(it.href), onClick: it.onClick, children: [
           it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: it.icon }) : null,
           it.label
         ] }) : it.onClick ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-breadcrumb__item", onClick: it.onClick, children: [
@@ -824,7 +1141,7 @@ var CSS2 = `
   animation: twico-ripple var(--duration-slow) var(--ease-out) forwards;
 }
 `;
-function safeHref3(url) {
+function safeHref4(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -846,7 +1163,7 @@ function Button({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-btn-styles", CSS2);
-  const [ripples, setRipples] = React25__namespace.default.useState([]);
+  const [ripples, setRipples] = React37__namespace.default.useState([]);
   const Tag2 = as;
   const inert = Tag2 === "a" && (disabled || loading);
   function handleClick(e) {
@@ -875,7 +1192,7 @@ function Button({
       "data-block": fullWidth || void 0,
       disabled: Tag2 === "button" ? disabled || loading : void 0,
       type: Tag2 === "button" ? "button" : void 0,
-      href: inert ? void 0 : safeHref3(href),
+      href: inert ? void 0 : safeHref4(href),
       "aria-disabled": inert || void 0,
       tabIndex: inert ? -1 : void 0,
       "aria-busy": loading || void 0,
@@ -901,6 +1218,122 @@ function Button({
     }
   );
 }
+var UNITLESS = /* @__PURE__ */ new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexPositive",
+  "flexNegative",
+  "flexOrder",
+  "gridArea",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "fontWeight",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  "fillOpacity",
+  "floodOpacity",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth",
+  "scale"
+]);
+var isObject = (v) => v != null && typeof v === "object" && !Array.isArray(v);
+var isNestedKey = (k, v) => isObject(v) || k.charCodeAt(0) === 38 || k.charCodeAt(0) === 64 || k.charCodeAt(0) === 58;
+function kebab(prop) {
+  if (prop.startsWith("--")) return prop;
+  return prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function cssValue(key, value) {
+  if (typeof value !== "number") return String(value);
+  if (value === 0 || key.startsWith("--") || UNITLESS.has(key)) return String(value);
+  return `${value}px`;
+}
+function resolveSelector(key, scope) {
+  if (key.includes("&")) return key.replace(/&/g, scope);
+  if (key.charCodeAt(0) === 58) return `${scope}${key}`;
+  return `${scope} ${key}`;
+}
+function compileSx(obj, selector) {
+  if (!isObject(obj)) return "";
+  let decls = "";
+  let rules = "";
+  for (const key of Object.keys(obj)) {
+    const value = obj[key];
+    if (isNestedKey(key, value)) {
+      if (!isObject(value)) continue;
+      if (key.charCodeAt(0) === 64) {
+        const inner = compileSx(value, selector);
+        if (inner) rules += `${key} { ${inner.trim()} }
+`;
+      } else {
+        rules += compileSx(value, resolveSelector(key, selector));
+      }
+    } else {
+      decls += `${kebab(key)}: ${cssValue(key, value)}; `;
+    }
+  }
+  let out = "";
+  if (decls) out += `${selector} { ${decls.trimEnd()} }
+`;
+  out += rules;
+  return out;
+}
+function buildSx(sx, uid) {
+  if (!isObject(sx)) return { flatStyle: void 0, css: "" };
+  const scope = `[data-twc-sx="${uid}"]`;
+  let flatStyle;
+  let css = "";
+  for (const key of Object.keys(sx)) {
+    const value = sx[key];
+    if (isNestedKey(key, value)) {
+      if (!isObject(value)) continue;
+      if (key.charCodeAt(0) === 64) {
+        const inner = compileSx(value, scope);
+        if (inner) css += `${key} { ${inner.trim()} }
+`;
+      } else {
+        css += compileSx(value, resolveSelector(key, scope));
+      }
+    } else {
+      (flatStyle || (flatStyle = {}))[key] = value;
+    }
+  }
+  return { flatStyle, css };
+}
+function useSx(sx) {
+  const rawId = React37__namespace.default.useId();
+  const uid = `sx${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
+  const { flatStyle, css } = React37__namespace.default.useMemo(() => buildSx(sx, uid), [sx, uid]);
+  const styleNode = useScopedStyles(`twc-sx-${uid}`, css);
+  return { flatStyle, styleNode, sxAttr: css ? uid : void 0 };
+}
 var CARD_CSS = `
 .twc-card {
   display: flex; flex-direction: column;
@@ -940,10 +1373,13 @@ function Card({
   padding = "md",
   interactive = false,
   fullHeight = false,
+  sx,
   className = "",
+  style,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-card-styles", CARD_CSS);
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -952,9 +1388,12 @@ function Card({
       "data-pad": padding,
       "data-interactive": interactive || void 0,
       "data-full": fullHeight || void 0,
+      "data-twc-sx": sxAttr,
+      style: style || flatStyle ? { ...style, ...flatStyle } : void 0,
       ...rest,
       children: [
         __twcStyles,
+        styleNode,
         title || subtitle || actions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-card__header", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-card__heading", children: [
             title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-card__title", children: title }) : null,
@@ -1020,14 +1459,14 @@ function Carousel({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-carousel-styles", CAROUSEL_CSS);
-  const slides = React25__namespace.default.Children.toArray(children);
+  const slides = React37__namespace.default.Children.toArray(children);
   const count = slides.length;
-  const [internal, setInternal] = React25__namespace.default.useState(defaultIndex);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultIndex);
   const index = indexProp !== void 0 ? indexProp : internal;
-  const [paused, setPaused] = React25__namespace.default.useState(false);
-  const [userPaused, setUserPaused] = React25__namespace.default.useState(false);
-  const [prefersReduced, setPrefersReduced] = React25__namespace.default.useState(false);
-  React25__namespace.default.useEffect(() => {
+  const [paused, setPaused] = React37__namespace.default.useState(false);
+  const [userPaused, setUserPaused] = React37__namespace.default.useState(false);
+  const [prefersReduced, setPrefersReduced] = React37__namespace.default.useState(false);
+  React37__namespace.default.useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return void 0;
     const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
     const on = () => setPrefersReduced(mql.matches);
@@ -1035,15 +1474,15 @@ function Carousel({
     mql.addEventListener("change", on);
     return () => mql.removeEventListener("change", on);
   }, []);
-  const setIndex = React25__namespace.default.useCallback((i) => {
+  const setIndex = React37__namespace.default.useCallback((i) => {
     if (indexProp === void 0) setInternal(i);
     onIndexChange?.(i);
   }, [indexProp, onIndexChange]);
-  const go = React25__namespace.default.useCallback((i) => {
+  const go = React37__namespace.default.useCallback((i) => {
     setIndex(loop ? (i + count) % count : Math.min(Math.max(i, 0), count - 1));
   }, [count, loop, setIndex]);
   const autoRotating = autoPlay && !paused && !userPaused && !prefersReduced && count > 1;
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!autoRotating) return void 0;
     const t = setInterval(() => {
       const next = loop ? (index + 1) % count : index + 1 >= count ? index : index + 1;
@@ -1138,7 +1577,7 @@ function Chart({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-chart-styles", CHART_CSS);
-  const uid = React25__namespace.default.useId();
+  const uid = React37__namespace.default.useId();
   const tableId = tableFallback ? `${uid}-table` : void 0;
   const keys = series || ["value"];
   const palette = colors && colors.length ? colors : SERIES_COLORS;
@@ -1294,13 +1733,13 @@ function Checkbox({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
-  const ref = React25__namespace.default.useRef(null);
+  const ref = React37__namespace.default.useRef(null);
   const mixed = indeterminate && !checked;
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (ref.current) ref.current.indeterminate = mixed;
   }, [mixed]);
   if (process.env.NODE_ENV !== "production" && !label && !description && !rest["aria-label"] && !rest["aria-labelledby"]) {
@@ -1373,6 +1812,10 @@ var COLORPICKER_CSS = `
 .twc-cp__hue { position: relative; height: 12px; margin-top: var(--space-3); border-radius: var(--radius-full); cursor: pointer; touch-action: none;
   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
 .twc-cp__hue-knob { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: var(--radius-full); background: #fff; box-shadow: var(--shadow-sm), inset 0 0 0 1px rgb(0 0 0 / 0.2); transform: translate(-50%, -50%); pointer-events: none; }
+.twc-cp__alpha { position: relative; height: 12px; margin-top: var(--space-2); border-radius: var(--radius-full); cursor: pointer; touch-action: none;
+  background-image: linear-gradient(to right, transparent, var(--_solid, #000)), conic-gradient(#c8c8c8 0 25%, #fff 0 50%, #c8c8c8 0 75%, #fff 0);
+  background-size: 100% 100%, 10px 10px; }
+.twc-cp__alpha:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-cp__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
 .twc-cp__hex { flex: 1; min-width: 0; height: 32px; padding: 0 8px; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
   color: var(--color-text); background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-sm); outline: none; }
@@ -1410,11 +1853,17 @@ function rgbToHex(r, g, b) {
 function hsvToHex(h, s, v) {
   return rgbToHex(...hsvToRgb(h, s, v));
 }
+function hsvaToHex8(h, s, v, a) {
+  return rgbToHex(...hsvToRgb(h, s, v)) + Math.round(Math.min(1, Math.max(0, a)) * 255).toString(16).padStart(2, "0");
+}
 function hexToHsv(hex) {
-  const m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
+  let str = String(hex || "").replace(/^#/, "");
+  if (/^[0-9a-f]{3}$/i.test(str)) str = str.split("").map((c) => c + c).join("");
+  const m = /^([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(str);
   if (!m) return null;
   const int = parseInt(m[1], 16);
   const r = (int >> 16) / 255, g = (int >> 8 & 255) / 255, b = (int & 255) / 255;
+  const a = m[2] != null ? parseInt(m[2], 16) / 255 : 1;
   const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
   let h = 0;
   if (d) {
@@ -1424,7 +1873,7 @@ function hexToHsv(hex) {
     h *= 60;
     if (h < 0) h += 360;
   }
-  return { h, s: max ? d / max * 100 : 0, v: max * 100 };
+  return { h, s: max ? d / max * 100 : 0, v: max * 100, a };
 }
 var DEFAULT_PRESETS = ["#6366F1", "#0EA5E9", "#14B8A6", "#22C55E", "#F59E0B", "#F43F5E", "#8B5CF6", "#0F172A"];
 function ColorPicker({
@@ -1436,6 +1885,7 @@ function ColorPicker({
   defaultValue = "#6366F1",
   presets = DEFAULT_PRESETS,
   disabled = false,
+  alpha = false,
   tone = "primary",
   onChange,
   className = "",
@@ -1443,20 +1893,22 @@ function ColorPicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
   const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultValue);
   const hex = (value !== void 0 ? value : internal) || "#000000";
-  const lastValidRef = React25__namespace.default.useRef(hex);
-  if (/^#[0-9a-f]{6}$/i.test(hex)) lastValidRef.current = hex;
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [hsv, setHsv] = React25__namespace.default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const triggerRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const areaRef = React25__namespace.default.useRef(null);
-  const hueRef = React25__namespace.default.useRef(null);
+  const hexRe = alpha ? /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i : /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+  const lastValidRef = React37__namespace.default.useRef(hex);
+  if (hexRe.test(hex)) lastValidRef.current = hex;
+  const [open, setOpen] = React37__namespace.default.useState(false);
+  const [hsv, setHsv] = React37__namespace.default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94, a: 1 });
+  const [coords, setCoords] = React37__namespace.default.useState(null);
+  const wrapRef = React37__namespace.default.useRef(null);
+  const triggerRef = React37__namespace.default.useRef(null);
+  const popRef = React37__namespace.default.useRef(null);
+  const areaRef = React37__namespace.default.useRef(null);
+  const hueRef = React37__namespace.default.useRef(null);
+  const alphaRef = React37__namespace.default.useRef(null);
   const POP_W = 240;
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React37__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1467,7 +1919,7 @@ function ColorPicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -1478,17 +1930,17 @@ function ColorPicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  const labelId = React25__namespace.default.useId();
+  const labelId = React37__namespace.default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     const v = hexToHsv(hex);
     if (v && hsvToHex(v.h, v.s, v.v).toLowerCase() !== hsvToHex(hsv.h, hsv.s, hsv.v).toLowerCase()) setHsv(v);
   }, [hex]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1505,23 +1957,12 @@ function ColorPicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React25__namespace.default.useRef(false);
-  React25__namespace.default.useEffect(() => {
-    let id;
-    if (!prevOpen.current && open) {
-      id = setTimeout(() => areaRef.current?.focus({ preventScroll: true }), 20);
-    } else if (prevOpen.current && !open) {
-      const ae = typeof document !== "undefined" ? document.activeElement : null;
-      if (!ae || ae === document.body) triggerRef.current?.focus();
-    }
-    prevOpen.current = open;
-    return () => clearTimeout(id);
-  }, [open]);
+  useFocusTrap(popRef, open && !!coords, { initialFocus: areaRef });
   const commit = (next) => {
-    const h = hsvToHex(next.h, next.s, next.v);
+    const out = alpha ? hsvaToHex8(next.h, next.s, next.v, next.a ?? 1) : hsvToHex(next.h, next.s, next.v);
     setHsv(next);
-    if (value === void 0) setInternal(h);
-    onChange?.(h);
+    if (value === void 0) setInternal(out);
+    onChange?.(out);
   };
   const dragArea = (e) => {
     const r = areaRef.current.getBoundingClientRect();
@@ -1565,6 +2006,21 @@ function ColorPicker({
     e.preventDefault();
     commit({ ...hsv, h });
   };
+  const dragAlpha = (e) => {
+    const r = alphaRef.current.getBoundingClientRect();
+    const a = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));
+    commit({ ...hsv, a });
+  };
+  const onAlphaKeyDown = (e) => {
+    let a = hsv.a ?? 1;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") a = Math.min(1, a + 0.01);
+    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") a = Math.max(0, a - 0.01);
+    else if (e.key === "Home") a = 0;
+    else if (e.key === "End") a = 1;
+    else return;
+    e.preventDefault();
+    commit({ ...hsv, a: Math.round(a * 100) / 100 });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-cp twc-field ${className}`, ref: wrapRef, ...rest, children: [
     __twcStyles0,
     __twcStyles1,
@@ -1609,6 +2065,7 @@ function ColorPicker({
           className: "twc-cp__pop",
           ref: popRef,
           role: "dialog",
+          "aria-modal": "true",
           "aria-label": "Color picker",
           style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
           children: [
@@ -1650,6 +2107,23 @@ function ColorPicker({
                 children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-cp__hue-knob", style: { left: `${hsv.h / 360 * 100}%` } })
               }
             ),
+            alpha ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "twc-cp__alpha",
+                ref: alphaRef,
+                onPointerDown: startDrag(dragAlpha),
+                role: "slider",
+                tabIndex: 0,
+                "aria-label": "Alpha",
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round((hsv.a ?? 1) * 100),
+                onKeyDown: onAlphaKeyDown,
+                style: { "--_solid": hsvToHex(hsv.h, hsv.s, hsv.v) },
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-cp__hue-knob", style: { left: `${(hsv.a ?? 1) * 100}%` } })
+              }
+            ) : null,
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-cp__foot", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-cp__swatch", style: { background: hex } }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1658,10 +2132,10 @@ function ColorPicker({
                   className: "twc-cp__hex",
                   "data-tone": tone,
                   value: hex,
-                  maxLength: 7,
+                  maxLength: alpha ? 9 : 7,
                   "aria-label": "Hex color",
-                  "aria-invalid": !/^#[0-9a-f]{6}$/i.test(hex) || void 0,
-                  "data-invalid": !/^#[0-9a-f]{6}$/i.test(hex) || void 0,
+                  "aria-invalid": !hexRe.test(hex) || void 0,
+                  "data-invalid": !hexRe.test(hex) || void 0,
                   onChange: (e) => {
                     let v = e.target.value;
                     if (!v.startsWith("#")) v = "#" + v;
@@ -1671,7 +2145,7 @@ function ColorPicker({
                     if (p) setHsv(p);
                   },
                   onBlur: () => {
-                    if (/^#[0-9a-f]{6}$/i.test(hex)) return;
+                    if (hexRe.test(hex)) return;
                     const revert = lastValidRef.current;
                     if (revert === hex) return;
                     if (value === void 0) setInternal(revert);
@@ -1829,6 +2303,8 @@ function Combobox({
   loading = false,
   emptyText = "No results found",
   name,
+  virtualized = false,
+  overscan = 8,
   id,
   className = "",
   onFocus,
@@ -1836,29 +2312,51 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
-  const groups = React25__namespace.default.useMemo(() => normalizeGroups(options), [options]);
-  const flat = React25__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React25__namespace.default.useId();
+  const groups = React37__namespace.default.useMemo(() => normalizeGroups(options), [options]);
+  const flat = React37__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const selected = flat.find((o) => o.value === current);
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [query, setQuery] = React25__namespace.default.useState("");
-  const [active, setActive] = React25__namespace.default.useState(0);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const controlRef = React25__namespace.default.useRef(null);
-  const inputRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const listRef = React25__namespace.default.useRef(null);
-  const activeRef = React25__namespace.default.useRef(null);
-  const fGroups = React25__namespace.default.useMemo(() => {
+  const [open, setOpen] = React37__namespace.default.useState(false);
+  const [query, setQuery] = React37__namespace.default.useState("");
+  const [active, setActive] = React37__namespace.default.useState(0);
+  const [coords, setCoords] = React37__namespace.default.useState(null);
+  const [scrollTop, setScrollTop] = React37__namespace.default.useState(0);
+  const [listH, setListH] = React37__namespace.default.useState(260);
+  const wrapRef = React37__namespace.default.useRef(null);
+  const controlRef = React37__namespace.default.useRef(null);
+  const inputRef = React37__namespace.default.useRef(null);
+  const popRef = React37__namespace.default.useRef(null);
+  const listRef = React37__namespace.default.useRef(null);
+  const activeRef = React37__namespace.default.useRef(null);
+  const fGroups = React37__namespace.default.useMemo(() => {
     const q = query.trim();
     const fn = filter === false ? null : typeof filter === "function" ? filter : matches;
     return groups.map((g) => ({ group: g.group, options: fn ? g.options.filter((o) => fn(o, q)) : g.options })).filter((g) => g.options.length);
   }, [groups, query, filter]);
-  const visible = React25__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React37__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const rowH = React37__namespace.default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
+  const GROUP_H = 30;
+  const { rows, totalH } = React37__namespace.default.useMemo(() => {
+    if (!virtualized) return { rows: [], totalH: 0 };
+    const rows2 = [];
+    let off = 0;
+    let optIdx = -1;
+    fGroups.forEach((g, gi) => {
+      if (g.group) {
+        rows2.push({ kind: "group", gi, label: g.group, top: off, h: GROUP_H });
+        off += GROUP_H;
+      }
+      g.options.forEach((o) => {
+        optIdx += 1;
+        rows2.push({ kind: "option", o, idx: optIdx, top: off, h: rowH });
+        off += rowH;
+      });
+    });
+    return { rows: rows2, totalH: off };
+  }, [virtualized, fGroups, rowH]);
   const nextEnabled = (from, dir) => {
     let i = from + dir;
     while (i >= 0 && i < visible.length) {
@@ -1867,7 +2365,7 @@ function Combobox({
     }
     return from;
   };
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React37__namespace.default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1882,7 +2380,7 @@ function Combobox({
       flip
     });
   }, [placement, minWidth]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -1893,7 +2391,7 @@ function Combobox({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1903,17 +2401,36 @@ function Combobox({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
   }, [open]);
-  React25__namespace.default.useEffect(() => {
-    if (open) ensureVisible(listRef.current, activeRef.current);
-  }, [active, open]);
+  React37__namespace.default.useEffect(() => {
+    if (!open || !virtualized) return;
+    const el = listRef.current;
+    if (el && el.clientHeight) setListH(el.clientHeight);
+  }, [open, virtualized]);
+  React37__namespace.default.useEffect(() => {
+    if (!open) return;
+    if (!virtualized) {
+      ensureVisible(listRef.current, activeRef.current);
+      return;
+    }
+    const el = listRef.current;
+    if (!el) return;
+    const row = rows.find((r) => r.kind === "option" && r.idx === active);
+    if (!row) return;
+    const vh = el.clientHeight || listH;
+    let next = el.scrollTop;
+    if (row.top < el.scrollTop) next = row.top;
+    else if (row.top + row.h > el.scrollTop + vh) next = row.top + row.h - vh;
+    if (next !== el.scrollTop) el.scrollTop = next;
+    setScrollTop(next);
+  }, [active, open, virtualized, rows, listH]);
   function openMenu() {
     if (disabled) return;
     setQuery("");
@@ -1958,45 +2475,60 @@ function Combobox({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
+  const renderOption = (o, idx) => {
+    const isSel = o.value === current;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        id: optionId(idx),
+        type: "button",
+        className: "twc-opt",
+        role: "option",
+        "aria-selected": isSel,
+        ref: idx === active ? activeRef : null,
+        disabled: o.disabled || void 0,
+        "aria-disabled": o.disabled || void 0,
+        "data-disabled": o.disabled || void 0,
+        "data-selected": isSel || void 0,
+        "data-active": idx === active || void 0,
+        onMouseEnter: () => {
+          if (!o.disabled) setActive(idx);
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => commit(o.value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          ] }),
+          isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
+        ]
+      },
+      o.value
+    );
+  };
+  let vTop = 0, vBottom = 0, vShown = rows;
+  if (virtualized && rows.length) {
+    const winTop = scrollTop - overscan * rowH;
+    const winBottom = scrollTop + listH + overscan * rowH;
+    vShown = rows.filter((r) => r.top + r.h > winTop && r.top < winBottom);
+    vTop = vShown.length ? vShown[0].top : 0;
+    vBottom = vShown.length ? totalH - (vShown[vShown.length - 1].top + vShown[vShown.length - 1].h) : totalH;
+  }
   let counter = -1;
-  const popInner = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
+  const popInner = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, onScroll: virtualized ? (e) => setScrollTop(e.currentTarget.scrollTop) : void 0, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
     "Loading\u2026"
-  ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.default.Fragment, { children: [
+  ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
+    vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
+    vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
+  ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React37__namespace.default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
       const idx = counter;
-      const isSel = o.value === current;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          id: optionId(idx),
-          type: "button",
-          className: "twc-opt",
-          role: "option",
-          "aria-selected": isSel,
-          ref: idx === active ? activeRef : null,
-          disabled: o.disabled || void 0,
-          "aria-disabled": o.disabled || void 0,
-          "data-disabled": o.disabled || void 0,
-          "data-selected": isSel || void 0,
-          "data-active": idx === active || void 0,
-          onMouseEnter: () => {
-            if (!o.disabled) setActive(idx);
-          },
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => commit(o.value),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-              o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
-            ] }),
-            isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
-          ]
-        },
-        o.value
-      );
+      return renderOption(o, idx);
     })
   ] }, gi)) });
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
@@ -2107,95 +2639,6 @@ function Combobox({
     error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null
   ] });
 }
-var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsoLayoutEffect = canUseDOM ? React25__namespace.default.useLayoutEffect : React25__namespace.default.useEffect;
-var FOCUSABLE = 'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
-function useFocusTrap(ref, active = true, { restoreFocus = true } = {}) {
-  React25__namespace.default.useEffect(() => {
-    if (!active || !canUseDOM) return void 0;
-    const node = ref.current;
-    if (!node) return void 0;
-    const prevFocused = document.activeElement;
-    const first = node.querySelector(FOCUSABLE);
-    (first || node).focus();
-    return () => {
-      if (restoreFocus && prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
-    };
-  }, [active]);
-  React25__namespace.default.useEffect(() => {
-    if (!active || !canUseDOM) return void 0;
-    const node = ref.current;
-    const onKey = (e) => {
-      if (e.key !== "Tab" || !node) return;
-      const f = Array.from(node.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null);
-      if (!f.length) {
-        e.preventDefault();
-        node.focus();
-        return;
-      }
-      const first = f[0], last = f[f.length - 1], ae = document.activeElement;
-      if (e.shiftKey) {
-        if (ae === first || ae === node || !node.contains(ae)) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else if (ae === last || !node.contains(ae)) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [active]);
-}
-function usePortal() {
-  return React25__namespace.default.useCallback((node) => {
-    if (typeof document === "undefined") return null;
-    return typeof reactDom.createPortal === "function" ? reactDom.createPortal(node, document.body) : node;
-  }, []);
-}
-var __scrollLockCount = 0;
-var __scrollLockSaved = { overflow: "", paddingRight: "" };
-function useScrollLock(locked = true) {
-  useIsoLayoutEffect(() => {
-    if (!canUseDOM || !locked) return void 0;
-    if (__scrollLockCount === 0) {
-      const b = document.body;
-      __scrollLockSaved = { overflow: b.style.overflow, paddingRight: b.style.paddingRight };
-      const gutter = window.innerWidth - document.documentElement.clientWidth;
-      b.style.overflow = "hidden";
-      if (gutter > 0) b.style.paddingRight = `${(parseFloat(getComputedStyle(b).paddingRight) || 0) + gutter}px`;
-    }
-    __scrollLockCount += 1;
-    return () => {
-      __scrollLockCount -= 1;
-      if (__scrollLockCount === 0) {
-        document.body.style.overflow = __scrollLockSaved.overflow;
-        document.body.style.paddingRight = __scrollLockSaved.paddingRight;
-      }
-    };
-  }, [locked]);
-}
-function useInertBackground(ref, active) {
-  React25__namespace.default.useEffect(() => {
-    if (!active || !canUseDOM) return void 0;
-    const node = ref.current;
-    if (!node) return void 0;
-    const changed = [];
-    Array.from(document.body.children).forEach((el) => {
-      if (el.contains(node) || el.hasAttribute("aria-hidden") || el.inert) return;
-      el.inert = true;
-      el.setAttribute("aria-hidden", "true");
-      changed.push(el);
-    });
-    return () => {
-      changed.forEach((el) => {
-        el.inert = false;
-        el.removeAttribute("aria-hidden");
-      });
-    };
-  }, [active]);
-}
 var COMMAND_CSS = `
 .twc-cmdk__overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-overlay); backdrop-filter: blur(3px);
   display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
@@ -2243,14 +2686,14 @@ function CommandPalette({
 }) {
   const __twcStyles = useScopedStyles("twc-cmdk-styles", COMMAND_CSS);
   const renderPortal = usePortal();
-  const [query, setQuery] = React25__namespace.default.useState("");
-  const [active, setActive] = React25__namespace.default.useState(0);
-  const inputRef = React25__namespace.default.useRef(null);
-  const listRef = React25__namespace.default.useRef(null);
-  const paletteRef = React25__namespace.default.useRef(null);
-  const baseId = React25__namespace.default.useId();
-  const [mounted, setMounted] = React25__namespace.default.useState(open);
-  React25__namespace.default.useEffect(() => {
+  const [query, setQuery] = React37__namespace.default.useState("");
+  const [active, setActive] = React37__namespace.default.useState(0);
+  const inputRef = React37__namespace.default.useRef(null);
+  const listRef = React37__namespace.default.useRef(null);
+  const paletteRef = React37__namespace.default.useRef(null);
+  const baseId = React37__namespace.default.useId();
+  const [mounted, setMounted] = React37__namespace.default.useState(open);
+  React37__namespace.default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -2259,14 +2702,14 @@ function CommandPalette({
     return () => clearTimeout(t);
   }, [open]);
   useScrollLock(open);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (open) {
       setQuery("");
       setActive(0);
     }
   }, [open]);
   useFocusTrap(paletteRef, open && mounted);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -2278,7 +2721,7 @@ function CommandPalette({
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   const q = query.trim().toLowerCase();
-  const filtered = React25__namespace.default.useMemo(() => commands.filter(
+  const filtered = React37__namespace.default.useMemo(() => commands.filter(
     (c) => !q || c.label.toLowerCase().includes(q) || (c.keywords || "").toLowerCase().includes(q) || (c.group || "").toLowerCase().includes(q)
   ), [commands, q]);
   const groups = [];
@@ -2293,7 +2736,7 @@ function CommandPalette({
     g.items.push(c);
     flat.push(c);
   });
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
   const run = (cmd) => {
@@ -2313,7 +2756,7 @@ function CommandPalette({
       if (cmd) run(cmd);
     }
   }
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     const node = listRef.current?.querySelector('[data-active="true"]');
     if (node) node.scrollIntoView({ block: "nearest" });
   }, [active]);
@@ -2489,13 +2932,13 @@ function Currency({
   const prec = precision != null ? precision : meta.precision;
   const sym = symbol != null ? symbol : meta.symbol;
   const cur = code != null ? code : meta.code;
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const controlled = value !== void 0;
-  const [internal, setInternal] = React25__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [internal, setInternal] = React37__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = controlled ? clampPrecision(String(value ?? ""), prec) : internal;
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!controlled) return;
     const raw = String(value ?? "");
     if (shown !== raw) {
@@ -2682,6 +3125,8 @@ function Select({
   loading = false,
   emptyText = "No results found",
   name,
+  virtualized = false,
+  overscan = 8,
   id,
   className = "",
   onClick,
@@ -2689,32 +3134,54 @@ function Select({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
-  const bufferRef = React25__namespace.default.useRef("");
-  const bufferTimerRef = React25__namespace.default.useRef(null);
-  const groups = React25__namespace.default.useMemo(() => normalizeGroups2(options), [options]);
-  const flat = React25__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React25__namespace.default.useId();
+  const bufferRef = React37__namespace.default.useRef("");
+  const bufferTimerRef = React37__namespace.default.useRef(null);
+  const groups = React37__namespace.default.useMemo(() => normalizeGroups2(options), [options]);
+  const flat = React37__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [render, setRender] = React25__namespace.default.useState(false);
-  const [active, setActive] = React25__namespace.default.useState(0);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const [query, setQuery] = React25__namespace.default.useState("");
-  const wrapRef = React25__namespace.default.useRef(null);
-  const triggerRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const listRef = React25__namespace.default.useRef(null);
-  const activeRef = React25__namespace.default.useRef(null);
-  const searchRef = React25__namespace.default.useRef(null);
+  const [open, setOpen] = React37__namespace.default.useState(false);
+  const [render, setRender] = React37__namespace.default.useState(false);
+  const [active, setActive] = React37__namespace.default.useState(0);
+  const [coords, setCoords] = React37__namespace.default.useState(null);
+  const [query, setQuery] = React37__namespace.default.useState("");
+  const [scrollTop, setScrollTop] = React37__namespace.default.useState(0);
+  const [listH, setListH] = React37__namespace.default.useState(260);
+  const wrapRef = React37__namespace.default.useRef(null);
+  const triggerRef = React37__namespace.default.useRef(null);
+  const popRef = React37__namespace.default.useRef(null);
+  const listRef = React37__namespace.default.useRef(null);
+  const activeRef = React37__namespace.default.useRef(null);
+  const searchRef = React37__namespace.default.useRef(null);
   const showSearch = searchable === void 0 ? flat.length > 5 : searchable;
-  const fGroups = React25__namespace.default.useMemo(() => {
+  const fGroups = React37__namespace.default.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return groups;
     return groups.map((g) => ({ group: g.group, options: g.options.filter((o) => o.label.toLowerCase().includes(q) || o.description && o.description.toLowerCase().includes(q)) })).filter((g) => g.options.length);
   }, [groups, query]);
-  const visible = React25__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React37__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const rowH = React37__namespace.default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
+  const GROUP_H = 30;
+  const { rows, totalH } = React37__namespace.default.useMemo(() => {
+    if (!virtualized) return { rows: [], totalH: 0 };
+    const rows2 = [];
+    let off = 0;
+    let optIdx = -1;
+    fGroups.forEach((g, gi) => {
+      if (g.group) {
+        rows2.push({ kind: "group", gi, label: g.group, top: off, h: GROUP_H });
+        off += GROUP_H;
+      }
+      g.options.forEach((o) => {
+        optIdx += 1;
+        rows2.push({ kind: "option", o, idx: optIdx, top: off, h: rowH });
+        off += rowH;
+      });
+    });
+    return { rows: rows2, totalH: off };
+  }, [virtualized, fGroups, rowH]);
   const selected = flat.find((o) => o.value === current);
   const nextEnabled = (from, dir) => {
     let i = from + dir;
@@ -2724,7 +3191,7 @@ function Select({
     }
     return from;
   };
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React37__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -2740,7 +3207,7 @@ function Select({
       flip
     });
   }, [placement, minWidth, matchTriggerWidth]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -2751,7 +3218,7 @@ function Select({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
@@ -2767,13 +3234,32 @@ function Select({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React25__namespace.default.useEffect(() => {
-    if (open) ensureVisible2(listRef.current, activeRef.current);
-  }, [active, open]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
+    if (!open || !virtualized) return;
+    const el = listRef.current;
+    if (el && el.clientHeight) setListH(el.clientHeight);
+  }, [open, virtualized, render]);
+  React37__namespace.default.useEffect(() => {
+    if (!open) return;
+    if (!virtualized) {
+      ensureVisible2(listRef.current, activeRef.current);
+      return;
+    }
+    const el = listRef.current;
+    if (!el) return;
+    const row = rows.find((r) => r.kind === "option" && r.idx === active);
+    if (!row) return;
+    const vh = el.clientHeight || listH;
+    let next = el.scrollTop;
+    if (row.top < el.scrollTop) next = row.top;
+    else if (row.top + row.h > el.scrollTop + vh) next = row.top + row.h - vh;
+    if (next !== el.scrollTop) el.scrollTop = next;
+    setScrollTop(next);
+  }, [active, open, virtualized, rows, listH]);
+  React37__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -2781,8 +3267,8 @@ function Select({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  const prevOpen = React25__namespace.default.useRef(false);
-  React25__namespace.default.useEffect(() => {
+  const prevOpen = React37__namespace.default.useRef(false);
+  React37__namespace.default.useEffect(() => {
     if (prevOpen.current && !open) {
       const ae = typeof document !== "undefined" ? document.activeElement : null;
       if (popRef.current && ae && popRef.current.contains(ae)) triggerRef.current?.focus();
@@ -2846,6 +3332,45 @@ function Select({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
+  const renderOption = (o, idx) => {
+    const isSel = o.value === current;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        id: optionId(idx),
+        type: "button",
+        className: "twc-opt",
+        role: "option",
+        "aria-selected": isSel,
+        ref: idx === active ? activeRef : null,
+        disabled: o.disabled || void 0,
+        "aria-disabled": o.disabled || void 0,
+        "data-disabled": o.disabled || void 0,
+        "data-selected": isSel || void 0,
+        "data-active": idx === active || void 0,
+        onMouseEnter: () => {
+          if (!o.disabled) setActive(idx);
+        },
+        onClick: () => commit(o.value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          ] }),
+          isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
+        ]
+      },
+      o.value
+    );
+  };
+  let vTop = 0, vBottom = 0, vShown = rows;
+  if (virtualized && rows.length) {
+    const winTop = scrollTop - overscan * rowH;
+    const winBottom = scrollTop + listH + overscan * rowH;
+    vShown = rows.filter((r) => r.top + r.h > winTop && r.top < winBottom);
+    vTop = vShown.length ? vShown[0].top : 0;
+    vBottom = vShown.length ? totalH - (vShown[vShown.length - 1].top + vShown[vShown.length - 1].h) : totalH;
+  }
   let counter = -1;
   const popInner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     showSearch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__search", children: [
@@ -2873,43 +3398,19 @@ function Select({
         searchRef.current?.focus();
       }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, onScroll: virtualized ? (e) => setScrollTop(e.currentTarget.scrollTop) : void 0, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
       "Loading\u2026"
-    ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.default.Fragment, { children: [
+    ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
+      vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
+      vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
+    ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React37__namespace.default.Fragment, { children: [
       g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
       g.options.map((o) => {
         counter += 1;
         const idx = counter;
-        const isSel = o.value === current;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            id: optionId(idx),
-            type: "button",
-            className: "twc-opt",
-            role: "option",
-            "aria-selected": isSel,
-            ref: idx === active ? activeRef : null,
-            disabled: o.disabled || void 0,
-            "aria-disabled": o.disabled || void 0,
-            "data-disabled": o.disabled || void 0,
-            "data-selected": isSel || void 0,
-            "data-active": idx === active || void 0,
-            onMouseEnter: () => {
-              if (!o.disabled) setActive(idx);
-            },
-            onClick: () => commit(o.value),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-                o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
-              ] }),
-              isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
-            ]
-          },
-          o.value
-        );
+        return renderOption(o, idx);
       })
     ] }, gi)) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sel__sr", role: "status", "aria-live": "polite", children: loading ? "Loading\u2026" : visible.length === 0 ? emptyText : `${visible.length} result${visible.length === 1 ? "" : "s"}` })
@@ -3059,21 +3560,21 @@ function CurrencyField({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const curControlled = currency !== void 0;
-  const [curInternal, setCurInternal] = React25__namespace.default.useState(defaultCurrency);
+  const [curInternal, setCurInternal] = React37__namespace.default.useState(defaultCurrency);
   const cur = curControlled ? currency : curInternal;
   const meta = CURRENCIES[cur] || CURRENCIES.USD;
   const prec = meta.precision;
   const valControlled = value !== void 0;
-  const [valInternal, setValInternal] = React25__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [valInternal, setValInternal] = React37__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = valControlled ? clampPrecision(String(value ?? ""), prec) : valInternal;
   const descId = `${fieldId}-desc`;
   const describedBy = [error || hint ? descId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!valControlled) {
       const clamped = clampPrecision(valInternal, prec);
       if (clamped !== valInternal) {
@@ -3089,7 +3590,7 @@ function CurrencyField({
       }
     }
   }, [prec, cur, shown, value, valControlled, valInternal]);
-  const options = React25__namespace.default.useMemo(() => {
+  const options = React37__namespace.default.useMemo(() => {
     if (!currencies) return CURRENCY_OPTIONS;
     return currencies.map((c) => typeof c === "string" ? { value: c, label: `${c} \u2014 ${(CURRENCIES[c] || {}).label || c}` } : c);
   }, [currencies]);
@@ -3243,13 +3744,13 @@ function Input({
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
   const __twcExtra = useScopedStyles("twc-input-extra-styles", INPUT_EXTRA_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const countId = `${fieldId}-count`;
   const invalid = Boolean(error);
   const countControlled = rest.value !== void 0;
-  const [len2, setLen] = React25__namespace.default.useState(() => String(rest.defaultValue ?? "").length);
+  const [len2, setLen] = React37__namespace.default.useState(() => String(rest.defaultValue ?? "").length);
   const count = countControlled ? String(rest.value ?? "").length : len2;
   const max = rest.maxLength;
   const showCounter = showCount && max != null;
@@ -3261,7 +3762,7 @@ function Input({
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
   const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const isPassword = type === "password";
-  const [revealed, setRevealed] = React25__namespace.default.useState(false);
+  const [revealed, setRevealed] = React37__namespace.default.useState(false);
   const effectiveType = isPassword && revealed ? "text" : type;
   const suffix = rightIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-input__affix", children: rightIcon }) : isPassword ? /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -3455,6 +3956,8 @@ function MultiSelect({
   name,
   max,
   maxTagCount,
+  virtualized = false,
+  overscan = 8,
   id,
   className = "",
   onFocus,
@@ -3462,27 +3965,49 @@ function MultiSelect({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
-  const groups = React25__namespace.default.useMemo(() => normalizeGroups3(options), [options]);
-  const flat = React25__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React25__namespace.default.useId();
+  const groups = React37__namespace.default.useMemo(() => normalizeGroups3(options), [options]);
+  const flat = React37__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [query, setQuery] = React25__namespace.default.useState("");
-  const [active, setActive] = React25__namespace.default.useState(0);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const controlRef = React25__namespace.default.useRef(null);
-  const inputRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const listRef = React25__namespace.default.useRef(null);
-  const activeRef = React25__namespace.default.useRef(null);
-  const fGroups = React25__namespace.default.useMemo(
+  const [open, setOpen] = React37__namespace.default.useState(false);
+  const [query, setQuery] = React37__namespace.default.useState("");
+  const [active, setActive] = React37__namespace.default.useState(0);
+  const [coords, setCoords] = React37__namespace.default.useState(null);
+  const [scrollTop, setScrollTop] = React37__namespace.default.useState(0);
+  const [listH, setListH] = React37__namespace.default.useState(260);
+  const wrapRef = React37__namespace.default.useRef(null);
+  const controlRef = React37__namespace.default.useRef(null);
+  const inputRef = React37__namespace.default.useRef(null);
+  const popRef = React37__namespace.default.useRef(null);
+  const listRef = React37__namespace.default.useRef(null);
+  const activeRef = React37__namespace.default.useRef(null);
+  const fGroups = React37__namespace.default.useMemo(
     () => groups.map((g) => ({ group: g.group, options: g.options.filter((o) => matches2(o, query.trim())) })).filter((g) => g.options.length),
     [groups, query]
   );
-  const visible = React25__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React37__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const rowH = React37__namespace.default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
+  const GROUP_H = 30;
+  const { rows, totalH } = React37__namespace.default.useMemo(() => {
+    if (!virtualized) return { rows: [], totalH: 0 };
+    const rows2 = [];
+    let off = 0;
+    let optIdx = -1;
+    fGroups.forEach((g, gi) => {
+      if (g.group) {
+        rows2.push({ kind: "group", gi, label: g.group, top: off, h: GROUP_H });
+        off += GROUP_H;
+      }
+      g.options.forEach((o) => {
+        optIdx += 1;
+        rows2.push({ kind: "option", o, idx: optIdx, top: off, h: rowH });
+        off += rowH;
+      });
+    });
+    return { rows: rows2, totalH: off };
+  }, [virtualized, fGroups, rowH]);
   const capReached = max != null && (value !== void 0 ? value : internal).length >= max;
   const isOptDisabled = (o) => o.disabled || capReached && !(value !== void 0 ? value : internal).includes(o.value);
   const nextEnabled = (from, dir) => {
@@ -3493,7 +4018,7 @@ function MultiSelect({
     }
     return from;
   };
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React37__namespace.default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -3508,7 +4033,7 @@ function MultiSelect({
       flip
     });
   }, [placement, minWidth]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -3519,7 +4044,7 @@ function MultiSelect({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -3530,12 +4055,31 @@ function MultiSelect({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React25__namespace.default.useEffect(() => {
-    if (open) ensureVisible3(listRef.current, activeRef.current);
-  }, [active, open]);
+  React37__namespace.default.useEffect(() => {
+    if (!open || !virtualized) return;
+    const el = listRef.current;
+    if (el && el.clientHeight) setListH(el.clientHeight);
+  }, [open, virtualized]);
+  React37__namespace.default.useEffect(() => {
+    if (!open) return;
+    if (!virtualized) {
+      ensureVisible3(listRef.current, activeRef.current);
+      return;
+    }
+    const el = listRef.current;
+    if (!el) return;
+    const row = rows.find((r) => r.kind === "option" && r.idx === active);
+    if (!row) return;
+    const vh = el.clientHeight || listH;
+    let next = el.scrollTop;
+    if (row.top < el.scrollTop) next = row.top;
+    else if (row.top + row.h > el.scrollTop + vh) next = row.top + row.h - vh;
+    if (next !== el.scrollTop) el.scrollTop = next;
+    setScrollTop(next);
+  }, [active, open, virtualized, rows, listH]);
   function commit(next) {
     if (value === void 0) setInternal(next);
     onChange?.(next);
@@ -3572,48 +4116,74 @@ function MultiSelect({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  let counter = -1;
-  const popInner = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": "true", children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
-    "Loading\u2026"
-  ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.default.Fragment, { children: [
-    g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
-    g.options.map((o) => {
-      counter += 1;
-      const idx = counter;
-      const isSel = selected.includes(o.value);
-      const optDisabled = isOptDisabled(o);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          id: optionId(idx),
-          type: "button",
-          className: "twc-opt",
-          role: "option",
-          "aria-selected": isSel,
-          ref: idx === active ? activeRef : null,
-          disabled: optDisabled || void 0,
-          "aria-disabled": optDisabled || void 0,
-          "data-disabled": optDisabled || void 0,
-          "data-selected": isSel || void 0,
-          "data-active": idx === active || void 0,
-          onMouseEnter: () => {
-            if (!optDisabled) setActive(idx);
-          },
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => toggle(o.value),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__box", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-              o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
-            ] })
-          ]
+  const renderOption = (o, idx) => {
+    const isSel = selected.includes(o.value);
+    const optDisabled = isOptDisabled(o);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        id: optionId(idx),
+        type: "button",
+        className: "twc-opt",
+        role: "option",
+        "aria-selected": isSel,
+        ref: idx === active ? activeRef : null,
+        disabled: optDisabled || void 0,
+        "aria-disabled": optDisabled || void 0,
+        "data-disabled": optDisabled || void 0,
+        "data-selected": isSel || void 0,
+        "data-active": idx === active || void 0,
+        onMouseEnter: () => {
+          if (!optDisabled) setActive(idx);
         },
-        o.value
-      );
-    })
-  ] }, gi)) });
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => toggle(o.value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__box", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          ] })
+        ]
+      },
+      o.value
+    );
+  };
+  let vTop = 0, vBottom = 0, vShown = rows;
+  if (virtualized && rows.length) {
+    const winTop = scrollTop - overscan * rowH;
+    const winBottom = scrollTop + listH + overscan * rowH;
+    vShown = rows.filter((r) => r.top + r.h > winTop && r.top < winBottom);
+    vTop = vShown.length ? vShown[0].top : 0;
+    vBottom = vShown.length ? totalH - (vShown[vShown.length - 1].top + vShown[vShown.length - 1].h) : totalH;
+  }
+  let counter = -1;
+  const popInner = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "twc-pop__list",
+      id: listboxId,
+      ref: listRef,
+      role: "listbox",
+      "aria-multiselectable": "true",
+      onScroll: virtualized ? (e) => setScrollTop(e.currentTarget.scrollTop) : void 0,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
+        "Loading\u2026"
+      ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
+        vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
+        vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
+      ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React37__namespace.default.Fragment, { children: [
+        g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
+        g.options.map((o) => {
+          counter += 1;
+          const idx = counter;
+          return renderOption(o, idx);
+        })
+      ] }, gi))
+    }
+  );
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
   const canPortal = portal && RD && RD.createPortal;
   let popEl = null;
@@ -3806,7 +4376,7 @@ function Pagination({
   }
   const jumperEnabled = showPageJumper ?? showJumper;
   const __twcStyles = useScopedStyles("twc-pagination-styles", PAGINATION_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultPage);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultPage);
   const page = pageProp !== void 0 ? pageProp : internal;
   const pages = buildPages(page, total, siblings, boundaries);
   const go = (p) => {
@@ -3814,7 +4384,7 @@ function Pagination({
     if (pageProp === void 0) setInternal(p);
     onChange?.(p);
   };
-  const [jump, setJump] = React25__namespace.default.useState("");
+  const [jump, setJump] = React37__namespace.default.useState("");
   const submitJump = () => {
     const n = parseInt(jump, 10);
     if (!Number.isNaN(n)) go(Math.min(Math.max(n, 1), total));
@@ -3897,13 +4467,13 @@ function Tooltip({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
-  const id = React25__namespace.default.useId();
-  const [show, setShow] = React25__namespace.default.useState(false);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const timer = React25__namespace.default.useRef(null);
-  const closeTimer = React25__namespace.default.useRef(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const tipRef = React25__namespace.default.useRef(null);
+  const id = React37__namespace.default.useId();
+  const [show, setShow] = React37__namespace.default.useState(false);
+  const [coords, setCoords] = React37__namespace.default.useState(null);
+  const timer = React37__namespace.default.useRef(null);
+  const closeTimer = React37__namespace.default.useRef(null);
+  const wrapRef = React37__namespace.default.useRef(null);
+  const tipRef = React37__namespace.default.useRef(null);
   const open = () => {
     clearTimeout(closeTimer.current);
     clearTimeout(timer.current);
@@ -3917,11 +4487,11 @@ function Tooltip({
   const cancelClose = () => {
     clearTimeout(closeTimer.current);
   };
-  React25__namespace.default.useEffect(() => () => {
+  React37__namespace.default.useEffect(() => () => {
     clearTimeout(timer.current);
     clearTimeout(closeTimer.current);
   }, []);
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React37__namespace.default.useCallback(() => {
     const el = wrapRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -3944,10 +4514,10 @@ function Tooltip({
     else if (side === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r.right + gap) });
     else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r.top + gap) });
   }, [placement]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     place();
   }, [place]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!show) return void 0;
     place();
     const onMove = () => place();
@@ -3958,7 +4528,7 @@ function Tooltip({
       window.removeEventListener("resize", onMove);
     };
   }, [show, place]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!show) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -3970,7 +4540,7 @@ function Tooltip({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [show]);
   const describedBy = show ? id : void 0;
-  const trigger = React25__namespace.default.isValidElement(children) && children.type !== React25__namespace.default.Fragment ? React25__namespace.default.cloneElement(children, {
+  const trigger = React37__namespace.default.isValidElement(children) && children.type !== React37__namespace.default.Fragment ? React37__namespace.default.cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
   }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-describedby": describedBy, children });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4574,9 +5144,9 @@ function runDatatableQuery(rows, query, options = {}) {
   return { rows: page, total, filtered: out };
 }
 function useFloating() {
-  const [pos, setPos] = React25__namespace.default.useState(null);
-  const cfg = React25__namespace.default.useRef(null);
-  const place = React25__namespace.default.useCallback(() => {
+  const [pos, setPos] = React37__namespace.default.useState(null);
+  const cfg = React37__namespace.default.useRef(null);
+  const place = React37__namespace.default.useCallback(() => {
     const c = cfg.current;
     if (!c || !c.el || !c.el.isConnected) return null;
     const r = c.el.getBoundingClientRect();
@@ -4587,17 +5157,17 @@ function useFloating() {
     const top = r.bottom + 6;
     return { top, left, width: c.width, anchorX: r.left + r.width / 2, maxHeight: Math.max(180, vh - top - M) };
   }, []);
-  const open = React25__namespace.default.useCallback((el, align = "left", width = 220) => {
+  const open = React37__namespace.default.useCallback((el, align = "left", width = 220) => {
     cfg.current = { el, align, width };
     const p = place();
     if (p) setPos(p);
   }, [place]);
-  const close = React25__namespace.default.useCallback(() => {
+  const close = React37__namespace.default.useCallback(() => {
     cfg.current = null;
     setPos(null);
   }, []);
   const isOpen = pos != null;
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!isOpen) return void 0;
     const update = () => {
       const p = place();
@@ -4621,9 +5191,9 @@ function Caret({ pos }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__caret", style: { left } });
 }
 function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCancel, onKeyDown }) {
-  const ref = React25__namespace.default.useRef(null);
+  const ref = React37__namespace.default.useRef(null);
   const isSelect = col.editType === "select" || options && col.editType !== "text";
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (isSelect) {
       const t = setTimeout(() => ref.current?.querySelector(".twc-sel__trigger")?.click(), 0);
       return () => clearTimeout(t);
@@ -4787,6 +5357,9 @@ function Datatable({
   density: densityProp = "comfortable",
   pageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
+  page,
+  onPageChange,
+  onPageSizeChange,
   height = 440,
   serverMode = false,
   rowCount,
@@ -4828,7 +5401,7 @@ function Datatable({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
-  const cols = React25__namespace.default.useMemo(() => {
+  const cols = React37__namespace.default.useMemo(() => {
     const out = columns.map((c) => {
       const isActions = c.type === "actions";
       return {
@@ -4863,7 +5436,7 @@ function Datatable({
     }
     return out;
   }, [columns, rowPinning]);
-  const _autoKey = React25__namespace.default.useRef();
+  const _autoKey = React37__namespace.default.useRef();
   if (!_autoKey.current) _autoKey.current = { map: /* @__PURE__ */ new WeakMap(), n: 0 };
   const keyOf = rowKey || ((r, i) => {
     if (r != null && r.id != null) return r.id;
@@ -4878,17 +5451,17 @@ function Datatable({
     }
     return i;
   });
-  const [sort, setSort] = React25__namespace.default.useState(null);
-  const [filters, setFilters] = React25__namespace.default.useState([]);
-  const [hidden, setHidden] = React25__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [showRowNum, setShowRowNum] = React25__namespace.default.useState(rowNumbers);
-  const [wrapped, setWrapped] = React25__namespace.default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
+  const [sort, setSort] = React37__namespace.default.useState(null);
+  const [filters, setFilters] = React37__namespace.default.useState([]);
+  const [hidden, setHidden] = React37__namespace.default.useState(() => /* @__PURE__ */ new Set());
+  const [showRowNum, setShowRowNum] = React37__namespace.default.useState(rowNumbers);
+  const [wrapped, setWrapped] = React37__namespace.default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
   const toggleWrap = (field) => setWrapped((w) => {
     const n = new Set(w);
     n.has(field) ? n.delete(field) : n.add(field);
     return n;
   });
-  const [pins, setPins] = React25__namespace.default.useState(() => {
+  const [pins, setPins] = React37__namespace.default.useState(() => {
     const left = [], right = [];
     columns.forEach((c) => {
       if (c.pinned === "left") left.push(c.field);
@@ -4896,34 +5469,47 @@ function Datatable({
     });
     return { left, right };
   });
-  const [density, setDensity] = React25__namespace.default.useState(densityProp);
-  const [quick, setQuick] = React25__namespace.default.useState("");
-  const [selected, setSelected] = React25__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [activeRow, setActiveRow] = React25__namespace.default.useState(null);
-  const [activeCell, setActiveCell] = React25__namespace.default.useState(null);
-  const [page, setPage] = React25__namespace.default.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React25__namespace.default.useState(pageSize > 0 ? pageSize : 10);
-  const [colQuery, setColQuery] = React25__namespace.default.useState("");
-  const [widths, setWidths] = React25__namespace.default.useState({});
-  const [order, setOrder] = React25__namespace.default.useState(() => columns.map((c) => c.field));
-  const [drag, setDrag] = React25__namespace.default.useState({ from: null, over: null, after: false });
-  const [aggOn, setAggOn] = React25__namespace.default.useState(showAggregation);
-  const [focus, setFocus] = React25__namespace.default.useState({ r: 0, c: 0 });
-  const gridRef = React25__namespace.default.useRef(null);
-  const [groupBy, setGroupBy] = React25__namespace.default.useState(rowGrouping || []);
-  const [collapsed, setCollapsed] = React25__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [pinnedRows, setPinnedRows] = React25__namespace.default.useState({ top: [], bottom: [] });
-  const [headH, setHeadH] = React25__namespace.default.useState(41);
-  const theadRef = React25__namespace.default.useRef(null);
-  const [rowOrder, setRowOrder] = React25__namespace.default.useState(null);
-  const [rowHeights, setRowHeights] = React25__namespace.default.useState({});
-  const [rowDrag, setRowDrag] = React25__namespace.default.useState({ from: null, over: null, after: false });
-  const [rowGrab, setRowGrab] = React25__namespace.default.useState(null);
-  const [reorderMsg, setReorderMsg] = React25__namespace.default.useState("");
-  const rowFocusRef = React25__namespace.default.useRef(null);
-  const rootRef = React25__namespace.default.useRef(null);
-  const [compact, setCompact] = React25__namespace.default.useState(false);
-  React25__namespace.default.useEffect(() => {
+  const [density, setDensity] = React37__namespace.default.useState(densityProp);
+  const [quick, setQuick] = React37__namespace.default.useState("");
+  const [selected, setSelected] = React37__namespace.default.useState(() => /* @__PURE__ */ new Set());
+  const [activeRow, setActiveRow] = React37__namespace.default.useState(null);
+  const [activeCell, setActiveCell] = React37__namespace.default.useState(null);
+  const [internalPage, setInternalPage] = React37__namespace.default.useState(0);
+  const [internalRpp, setInternalRpp] = React37__namespace.default.useState(pageSize > 0 ? pageSize : 10);
+  const pageControlled = page !== void 0;
+  const pageSizeControlled = onPageSizeChange !== void 0;
+  const pageVal = pageControlled ? page : internalPage;
+  const sizeVal = pageSizeControlled ? pageSize > 0 ? pageSize : 10 : internalRpp;
+  const commitPage = (next) => {
+    onPageChange?.(next);
+    if (!pageControlled) setInternalPage(next);
+  };
+  const commitPageSize = (next) => {
+    onPageSizeChange?.(next);
+    if (!pageSizeControlled) setInternalRpp(next);
+    commitPage(0);
+  };
+  const [colQuery, setColQuery] = React37__namespace.default.useState("");
+  const [widths, setWidths] = React37__namespace.default.useState({});
+  const [order, setOrder] = React37__namespace.default.useState(() => columns.map((c) => c.field));
+  const [drag, setDrag] = React37__namespace.default.useState({ from: null, over: null, after: false });
+  const [aggOn, setAggOn] = React37__namespace.default.useState(showAggregation);
+  const [focus, setFocus] = React37__namespace.default.useState({ r: 0, c: 0 });
+  const gridRef = React37__namespace.default.useRef(null);
+  const [groupBy, setGroupBy] = React37__namespace.default.useState(rowGrouping || []);
+  const [collapsed, setCollapsed] = React37__namespace.default.useState(() => /* @__PURE__ */ new Set());
+  const [pinnedRows, setPinnedRows] = React37__namespace.default.useState({ top: [], bottom: [] });
+  const [headH, setHeadH] = React37__namespace.default.useState(41);
+  const theadRef = React37__namespace.default.useRef(null);
+  const [rowOrder, setRowOrder] = React37__namespace.default.useState(null);
+  const [rowHeights, setRowHeights] = React37__namespace.default.useState({});
+  const [rowDrag, setRowDrag] = React37__namespace.default.useState({ from: null, over: null, after: false });
+  const [rowGrab, setRowGrab] = React37__namespace.default.useState(null);
+  const [reorderMsg, setReorderMsg] = React37__namespace.default.useState("");
+  const rowFocusRef = React37__namespace.default.useRef(null);
+  const rootRef = React37__namespace.default.useRef(null);
+  const [compact, setCompact] = React37__namespace.default.useState(false);
+  React37__namespace.default.useEffect(() => {
     const el = rootRef.current;
     if (!el) return void 0;
     const measure = () => setCompact((el.clientWidth || 0) < 720);
@@ -4936,11 +5522,11 @@ function Datatable({
       else if (typeof window !== "undefined") window.removeEventListener("resize", measure);
     };
   }, []);
-  const scrollRef = React25__namespace.default.useRef(null);
-  const [scrollTop, setScrollTop] = React25__namespace.default.useState(0);
-  const [viewportH, setViewportH] = React25__namespace.default.useState(0);
-  const [pivotOn, setPivotOn] = React25__namespace.default.useState(pivotMode);
-  const [aggConfig, setAggConfig] = React25__namespace.default.useState(() => {
+  const scrollRef = React37__namespace.default.useRef(null);
+  const [scrollTop, setScrollTop] = React37__namespace.default.useState(0);
+  const [viewportH, setViewportH] = React37__namespace.default.useState(0);
+  const [pivotOn, setPivotOn] = React37__namespace.default.useState(pivotMode);
+  const [aggConfig, setAggConfig] = React37__namespace.default.useState(() => {
     const m = {};
     (columns || []).forEach((c) => {
       if (typeof c.aggregation === "string") m[c.field] = c.aggregation;
@@ -4948,13 +5534,13 @@ function Datatable({
     return m;
   });
   const aggOf = (c) => aggConfig[c.field] || (typeof c.aggregation === "function" ? c.aggregation : null);
-  const [pivotConfig, setPivotConfig] = React25__namespace.default.useState(() => ({
+  const [pivotConfig, setPivotConfig] = React37__namespace.default.useState(() => ({
     rows: pivot && pivot.rows || [],
     columns: pivot && pivot.columns || [],
     values: pivot && pivot.values || []
   }));
   const pivotActive = pivotOn && pivotConfig.rows.length > 0 && pivotConfig.values.length > 0;
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     setOrder((prev) => {
       const fields = columns.map((c) => c.field);
       const kept = prev.filter((f) => fields.includes(f));
@@ -4962,32 +5548,37 @@ function Datatable({
       return [...kept, ...added];
     });
   }, [columns]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     setDensity(densityProp);
   }, [densityProp]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
+  React37__namespace.default.useEffect(() => {
+    if (pageSizeControlled) return;
+    setInternalRpp(pageSize > 0 ? pageSize : 10);
+    setInternalPage(0);
+  }, [pageSize]);
   const rowGroupingKey = (rowGrouping || []).join("\0");
-  const rowGroupingKeyRef = React25__namespace.default.useRef(rowGroupingKey);
-  React25__namespace.default.useEffect(() => {
+  const rowGroupingKeyRef = React37__namespace.default.useRef(rowGroupingKey);
+  React37__namespace.default.useEffect(() => {
     if (rowGroupingKeyRef.current === rowGroupingKey) return;
     rowGroupingKeyRef.current = rowGroupingKey;
     setGroupBy(rowGrouping || []);
   }, [rowGroupingKey]);
   const widthOf = (c) => widths[c.field] ?? c.width ?? 160;
-  const [colMenu, setColMenu] = React25__namespace.default.useState(null);
+  const [colMenu, setColMenu] = React37__namespace.default.useState(null);
   const [menuPos, openMenu, closeMenu] = useFloating();
-  const [panel, setPanel] = React25__namespace.default.useState(null);
+  const [panel, setPanel] = React37__namespace.default.useState(null);
   const [panelPos, openPanel, closePanel] = useFloating();
-  const [rowMenu, setRowMenu] = React25__namespace.default.useState(null);
+  const [rowMenu, setRowMenu] = React37__namespace.default.useState(null);
   const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
-  const [exportOpen, setExportOpen] = React25__namespace.default.useState(false);
+  const [exportOpen, setExportOpen] = React37__namespace.default.useState(false);
   const [exportPos, openExport, closeExport] = useFloating();
-  const menuTriggerRef = React25__namespace.default.useRef(null);
-  const colMenuRef = React25__namespace.default.useRef(null);
-  const rowMenuRef = React25__namespace.default.useRef(null);
-  const exportMenuRef = React25__namespace.default.useRef(null);
+  const menuTriggerRef = React37__namespace.default.useRef(null);
+  const colMenuRef = React37__namespace.default.useRef(null);
+  const rowMenuRef = React37__namespace.default.useRef(null);
+  const exportMenuRef = React37__namespace.default.useRef(null);
   function focusFirstItem(container) {
     if (!container) return;
     const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -5026,16 +5617,16 @@ function Datatable({
       restoreTriggerFocus();
     }
   }
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (colMenu) focusFirstItem(colMenuRef.current);
   }, [colMenu]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (rowMenu) focusFirstItem(rowMenuRef.current);
   }, [rowMenu]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (exportOpen) focusFirstItem(exportMenuRef.current);
   }, [exportOpen]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!colMenu && !panel && !rowMenu) return;
     const closeAll = () => {
       setColMenu(null);
@@ -5058,7 +5649,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [colMenu, panel, rowMenu]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!exportOpen) return;
     const close = () => {
       setExportOpen(false);
@@ -5077,9 +5668,9 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [exportOpen]);
-  const colByField = React25__namespace.default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
+  const colByField = React37__namespace.default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
   const visibleCols = cols.filter((c) => !hidden.has(c.field));
-  const ordered = React25__namespace.default.useMemo(() => {
+  const ordered = React37__namespace.default.useMemo(() => {
     const orderIdx = (f) => {
       const i = order.indexOf(f);
       return i === -1 ? 9999 : i;
@@ -5114,7 +5705,7 @@ function Datatable({
     }
     return {};
   };
-  const processed = React25__namespace.default.useMemo(() => {
+  const processed = React37__namespace.default.useMemo(() => {
     if (serverMode) {
       if (rowOrder) {
         const idx = new Map(rowOrder.map((k, i) => [k, i]));
@@ -5151,12 +5742,12 @@ function Datatable({
   const paginated = pageSize > 0;
   const serverTotal = rowCount == null ? processed.length : rowCount;
   const totalRows = serverMode ? serverTotal : processed.length;
-  const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / rowsPerPage)) : 1;
-  const paged = !paginated || serverMode ? processed : processed.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-  React25__namespace.default.useEffect(() => {
-    if (page > totalPages - 1) setPage(0);
+  const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / sizeVal)) : 1;
+  const paged = !paginated || serverMode ? processed : processed.slice(pageVal * sizeVal, pageVal * sizeVal + sizeVal);
+  React37__namespace.default.useEffect(() => {
+    if (pageVal > totalPages - 1) commitPage(0);
   }, [totalPages]);
-  const activeGroupBy = React25__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
+  const activeGroupBy = React37__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
   function subtotalText(rowsIn) {
     const parts = [];
     for (const c of ordered) {
@@ -5183,7 +5774,7 @@ function Datatable({
     if (agg === "max") return Math.max(...nums);
     return null;
   }
-  const displayItems = React25__namespace.default.useMemo(() => {
+  const displayItems = React37__namespace.default.useMemo(() => {
     if (!activeGroupBy.length) return null;
     const build = (rowsIn, depth, prefix) => {
       if (depth >= activeGroupBy.length) return rowsIn.map((row) => ({ kind: "leaf", row }));
@@ -5225,7 +5816,7 @@ function Datatable({
       return { top, bottom };
     });
   }
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!rowPinning) return;
     const measure = () => {
       if (theadRef.current) setHeadH(theadRef.current.offsetHeight || 41);
@@ -5239,12 +5830,12 @@ function Datatable({
   const pinnedTopRows = canPinRows ? pinnedRows.top.map((k) => leafRows.find((r, i) => keyOf(r, i) === k)).filter(Boolean) : [];
   const pinnedBottomRows = canPinRows ? pinnedRows.bottom.map((k) => leafRows.find((r, i) => keyOf(r, i) === k)).filter(Boolean) : [];
   const middleRows = canPinRows ? leafRows.filter((r, i) => !pinSideOf(keyOf(r, i))) : leafRows;
-  const keyIndex = React25__namespace.default.useMemo(() => {
+  const keyIndex = React37__namespace.default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     leafRows.forEach((r, i) => m.set(keyOf(r, i), i));
     return m;
   }, [leafRows]);
-  const keyIndexMid = React25__namespace.default.useMemo(() => {
+  const keyIndexMid = React37__namespace.default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     middleRows.forEach((r, i) => m.set(keyOf(r, keyIndex.get(keyOf(r)) ?? i), i));
     return m;
@@ -5329,7 +5920,7 @@ function Datatable({
       setReorderMsg("Reorder cancelled.");
     }
   }
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (rowFocusRef.current == null) return;
     const key = rowFocusRef.current;
     rowFocusRef.current = null;
@@ -5341,7 +5932,7 @@ function Datatable({
   });
   const estRowH = rowHeight ?? (density === "compact" ? 36 : density === "comfortable" ? 56 : 44);
   const virtualizing = virtualized && !paginated && !activeGroupBy.length && !loading;
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -5351,13 +5942,13 @@ function Datatable({
     if (ro) ro.observe(el);
     return () => ro && ro.disconnect();
   }, [virtualizing, height]);
-  const onScrollVirtual = React25__namespace.default.useCallback((e) => {
+  const onScrollVirtual = React37__namespace.default.useCallback((e) => {
     setScrollTop(e.currentTarget.scrollTop);
   }, []);
   const vh = viewportH || (typeof height === "number" ? height : 440);
-  const rowHRef = React25__namespace.default.useRef(/* @__PURE__ */ new Map());
-  const [measureTick, setMeasureTick] = React25__namespace.default.useState(0);
-  const offsets = React25__namespace.default.useMemo(() => {
+  const rowHRef = React37__namespace.default.useRef(/* @__PURE__ */ new Map());
+  const [measureTick, setMeasureTick] = React37__namespace.default.useState(0);
+  const offsets = React37__namespace.default.useMemo(() => {
     if (!virtualizing) return null;
     const total = middleRows.length;
     const arr = new Float64Array(total + 1);
@@ -5367,7 +5958,7 @@ function Datatable({
     }
     return arr;
   }, [virtualizing, middleRows, estRowH, measureTick]);
-  const vWindow = React25__namespace.default.useMemo(() => {
+  const vWindow = React37__namespace.default.useMemo(() => {
     if (!virtualizing || !offsets) return null;
     const total = middleRows.length;
     const totalH = offsets[total];
@@ -5396,7 +5987,7 @@ function Datatable({
     if (start > end) start = end;
     return { start, end, padTop: offsets[start], padBottom: Math.max(0, totalH - offsets[end]) };
   }, [virtualizing, offsets, middleRows.length, vh, scrollTop, overscan]);
-  React25__namespace.default.useLayoutEffect(() => {
+  React37__namespace.default.useLayoutEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -5411,21 +6002,21 @@ function Datatable({
     }
     if (changed) setMeasureTick((t) => t + 1);
   });
-  const onServerChangeRef = React25__namespace.default.useRef(onServerChange);
+  const onServerChangeRef = React37__namespace.default.useRef(onServerChange);
   onServerChangeRef.current = onServerChange;
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!serverMode) return;
     const t = setTimeout(() => {
       onServerChangeRef.current?.({
-        page,
-        pageSize: rowsPerPage,
+        page: pageVal,
+        pageSize: sizeVal,
         sort,
         filters: filters.map(({ id, ...f }) => f),
         quickFilter: quick.trim()
       });
     }, 250);
     return () => clearTimeout(t);
-  }, [serverMode, page, rowsPerPage, sort, filters, quick]);
+  }, [serverMode, pageVal, sizeVal, sort, filters, quick]);
   function cycleSort(field) {
     setSort((s) => !s || s.field !== field ? { field, dir: "asc" } : s.dir === "asc" ? { field, dir: "desc" } : null);
   }
@@ -5448,7 +6039,7 @@ function Datatable({
       return n;
     });
   }
-  const movableMidFields = React25__namespace.default.useMemo(
+  const movableMidFields = React37__namespace.default.useMemo(
     () => ordered.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field) && c.reorderable !== false).map((c) => c.field),
     [ordered, pins]
   );
@@ -5479,7 +6070,7 @@ function Datatable({
     }
     return [...set].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
   }
-  const [resizing, setResizing] = React25__namespace.default.useState(false);
+  const [resizing, setResizing] = React37__namespace.default.useState(false);
   function startResize(e, field) {
     e.preventDefault();
     e.stopPropagation();
@@ -5586,7 +6177,7 @@ function Datatable({
     if (!agg) return null;
     if (aggregationValues && col.field in aggregationValues) {
       const pre = aggregationValues[col.field];
-      if (pre && typeof pre === "object" && !React25__namespace.default.isValidElement(pre)) {
+      if (pre && typeof pre === "object" && !React37__namespace.default.isValidElement(pre)) {
         if (typeof agg === "string" && agg in pre) return pre[agg];
       } else {
         return pre;
@@ -5704,14 +6295,14 @@ function Datatable({
       focusCell(r, c);
     }
   }
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     setFocus((f) => ({ r: Math.min(f.r, Math.max(0, leafRows.length - 1)), c: Math.min(f.c, Math.max(0, ordered.length - 1)) }));
-  }, [leafRows.length, ordered.length, page]);
-  const selectedRows = React25__namespace.default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
+  }, [leafRows.length, ordered.length, pageVal]);
+  const selectedRows = React37__namespace.default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
   function clearSelection() {
     setSelected(/* @__PURE__ */ new Set());
   }
-  const [editing, setEditing] = React25__namespace.default.useState(null);
+  const [editing, setEditing] = React37__namespace.default.useState(null);
   const isColEditable = (c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false));
   function beginEdit(rowK, col, row) {
     if (!isColEditable(col)) return;
@@ -5746,17 +6337,17 @@ function Datatable({
       cancelEdit();
     }
   }
-  const batchEditableCols = React25__namespace.default.useMemo(
+  const batchEditableCols = React37__namespace.default.useMemo(
     () => cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false))),
     [cols, editMode]
   );
-  const [batchEdit, setBatchEdit] = React25__namespace.default.useState(null);
+  const [batchEdit, setBatchEdit] = React37__namespace.default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
   function openBatchEditor(el) {
     setBatchEdit({ fields: {}, values: {} });
     openBatchEdit(el, "left", 320);
   }
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!batchEdit) return;
     const close = () => {
       setBatchEdit(null);
@@ -5775,7 +6366,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [batchEdit]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (batchEdit && selected.size === 0) {
       setBatchEdit(null);
       closeBatchEdit();
@@ -5812,7 +6403,7 @@ function Datatable({
     setBatchEdit(null);
     closeBatchEdit();
   }
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
       if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
@@ -5951,7 +6542,7 @@ function Datatable({
       {
         className: "twc-dt__row",
         role: "row",
-        "aria-rowindex": (paginated && !serverMode ? page * rowsPerPage : 0) + ri + 2,
+        "aria-rowindex": (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
         "aria-selected": (checkboxSelection ? sel : rowActive) || void 0,
         "data-selected": sel || void 0,
         "data-active": rowActive || void 0,
@@ -6009,7 +6600,7 @@ function Datatable({
             ] }),
             rowResize && !pinSide ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__row-resizer", title: "Drag to resize row", onPointerDown: (e) => startRowResize(e, k, e.currentTarget.closest("tr")), onClick: (e) => e.stopPropagation() }) : null
           ] }) : null,
-          showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? page * rowsPerPage : 0) + ri + 1 : "" }) : null,
+          showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
           ordered.map((c, ci) => {
             const st = stickyOf(c.field);
             const val = row[c.field];
@@ -6337,7 +6928,7 @@ function Datatable({
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.search }),
         /* @__PURE__ */ jsxRuntime.jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => {
           setQuick(e.target.value);
-          setPage(0);
+          commitPage(0);
         } })
       ] })
     ] }),
@@ -6539,7 +7130,7 @@ function Datatable({
               );
             })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(rowsPerPage, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "twc-dt__row", role: "row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "twc-dt__row", role: "row", children: [
             checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: 44 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
             showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
             ordered.map((c, ci) => {
@@ -6583,7 +7174,7 @@ function Datatable({
           const nf = (n) => n.toLocaleString();
           if (totalRows === 0) return "No rows";
           const shown = paged.length;
-          const start = paginated ? page * rowsPerPage + 1 : 1;
+          const start = paginated ? pageVal * sizeVal + 1 : 1;
           const end = paginated ? start + shown - 1 : shown;
           return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             paginated ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -6611,13 +7202,10 @@ function Datatable({
         })() }),
         paginated ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__rpp", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__rpp-label", children: "Rows per page" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 78 }, children: /* @__PURE__ */ jsxRuntime.jsx(Select, { size: "sm", portal: true, searchable: false, value: String(rowsPerPage), options: rppOptions, placement: "top", onChange: (v) => {
-            setRowsPerPage(Number(v));
-            setPage(0);
-          } }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 78 }, children: /* @__PURE__ */ jsxRuntime.jsx(Select, { size: "sm", portal: true, searchable: false, value: String(sizeVal), options: rppOptions, placement: "top", onChange: (v) => commitPageSize(Number(v)) }) })
         ] }) : null
       ] }),
-      paginated ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__footer-row", "data-pager": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Pagination, { size: "sm", page: page + 1, total: totalPages, boundaries: 3, showPageJumper: showPageJumper && totalPages > 5, onChange: (p) => setPage(p - 1) }) }) : null
+      paginated ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__footer-row", "data-pager": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Pagination, { size: "sm", page: pageVal + 1, total: totalPages, boundaries: 3, showPageJumper: showPageJumper && totalPages > 5, onChange: (p) => commitPage(p - 1) }) }) : null
     ] }) : null,
     exportOpen && exportPos ? /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -7266,6 +7854,18 @@ var DATEPICKER_CSS = `
 .twc-dp__clear { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 20px; height: 20px; border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-full); }
 .twc-dp__clear:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-dp__clear svg { width: 14px; height: 14px; }
+/* #105: editable (typed entry) variant \u2014 the control wraps a real text input + a trailing toggle. */
+.twc-dp__control--editable { cursor: text; gap: 0; padding-inline-end: var(--space-1); }
+.twc-dp__input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; outline: none; padding: 0;
+  font-family: inherit; font-size: var(--text-sm); color: var(--color-text); }
+.twc-dp__input::placeholder { color: var(--color-text-subtle); }
+.twc-dp__input:disabled { cursor: not-allowed; }
+.twc-dp__clear--inline { position: static; transform: none; flex: none; }
+.twc-dp__toggle { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: none; background: transparent;
+  color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--duration-fast), color var(--duration-fast); }
+.twc-dp__toggle:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-dp__toggle:disabled { cursor: not-allowed; }
+.twc-dp__toggle svg { width: 17px; height: 17px; }
 
 .twc-dp__pop {
   position: fixed; z-index: var(--z-popover); width: 280px;
@@ -7325,6 +7925,8 @@ function DatePicker({
   disabled = false,
   tone = "primary",
   clearable = true,
+  editable = false,
+  parse,
   format,
   locale,
   weekStartsOn = 0,
@@ -7335,23 +7937,25 @@ function DatePicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
   const __twcStyles1 = useScopedStyles("twc-datepicker-styles", DATEPICKER_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [view, setView] = React25__namespace.default.useState(selected || /* @__PURE__ */ new Date());
-  const [mode, setMode] = React25__namespace.default.useState("days");
-  const [focusDate, setFocusDate] = React25__namespace.default.useState(null);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const triggerRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const gridRef = React25__namespace.default.useRef(null);
+  const [open, setOpen] = React37__namespace.default.useState(false);
+  const [view, setView] = React37__namespace.default.useState(selected || /* @__PURE__ */ new Date());
+  const [mode, setMode] = React37__namespace.default.useState("days");
+  const [focusDate, setFocusDate] = React37__namespace.default.useState(null);
+  const [focusMonth, setFocusMonth] = React37__namespace.default.useState(null);
+  const [editText, setEditText] = React37__namespace.default.useState(null);
+  const [coords, setCoords] = React37__namespace.default.useState(null);
+  const wrapRef = React37__namespace.default.useRef(null);
+  const triggerRef = React37__namespace.default.useRef(null);
+  const popRef = React37__namespace.default.useRef(null);
+  const gridRef = React37__namespace.default.useRef(null);
   const POP_W = 280;
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React37__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7362,7 +7966,7 @@ function DatePicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7373,7 +7977,7 @@ function DatePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return;
     setView(selected || /* @__PURE__ */ new Date());
     setMode("days");
@@ -7393,21 +7997,10 @@ function DatePicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React25__namespace.default.useRef(false);
-  React25__namespace.default.useEffect(() => {
-    let id2;
-    if (!prevOpen.current && open) {
-      id2 = setTimeout(() => gridRef.current?.querySelector('[tabindex="0"]')?.focus({ preventScroll: true }), 30);
-    } else if (prevOpen.current && !open) {
-      const ae = typeof document !== "undefined" ? document.activeElement : null;
-      if (!ae || ae === document.body) triggerRef.current?.focus();
-    }
-    prevOpen.current = open;
-    return () => clearTimeout(id2);
-  }, [open]);
-  const months = React25__namespace.default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
-  const monthsShort = React25__namespace.default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
-  const dows = React25__namespace.default.useMemo(
+  useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
+  const months = React37__namespace.default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
+  const monthsShort = React37__namespace.default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
+  const dows = React37__namespace.default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW[(i + weekStartsOn) % 7]) : weekdayNames(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7419,8 +8012,33 @@ function DatePicker({
   const pick = (d) => {
     if (value === void 0) setInternal(d);
     onChange?.(d);
+    setEditText(null);
     setOpen(false);
   };
+  const parseTyped = (s) => {
+    const str = s.trim();
+    if (str === "") return null;
+    if (parse) {
+      const d = parse(str);
+      return d instanceof Date && !Number.isNaN(d.getTime()) ? d : void 0;
+    }
+    const t = Date.parse(str);
+    return Number.isNaN(t) ? void 0 : new Date(t);
+  };
+  const commitText = () => {
+    if (editText == null) return;
+    const parsed = parseTyped(editText);
+    if (parsed === null) {
+      setEditText(null);
+      if (selected) pick(null);
+      return;
+    }
+    if (parsed === void 0 || outOfRange(parsed)) {
+      setEditText(null);
+      return;
+    }
+    pick(parsed);
+  };
   const y = view.getFullYear(), m = view.getMonth();
   const first = new Date(y, m, 1);
   const startOffset = (first.getDay() - weekStartsOn + 7) % 7;
@@ -7435,10 +8053,34 @@ function DatePicker({
   };
   const cells = Array.from({ length: 42 }, (_, i) => new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
   const tabbableDate = (focusDate && cells.some((c) => sameDay(c, focusDate)) ? focusDate : null) || (selected && cells.some((c) => sameDay(c, selected)) ? selected : null) || (cells.some((c) => sameDay(c, today)) ? today : null) || new Date(y, m, 1);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open || mode !== "days" || !focusDate) return;
     gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
   }, [focusDate, open, mode]);
+  React37__namespace.default.useEffect(() => {
+    if (!open || mode !== "months" || focusMonth == null) return;
+    gridRef.current?.querySelector(`[data-mo="${focusMonth}"]`)?.focus();
+  }, [focusMonth, open, mode]);
+  const onMonthsKeyDown = (e) => {
+    const cur = focusMonth == null ? m : focusMonth;
+    let next;
+    if (e.key === "ArrowRight") next = cur + 1;
+    else if (e.key === "ArrowLeft") next = cur - 1;
+    else if (e.key === "ArrowDown") next = cur + 3;
+    else if (e.key === "ArrowUp") next = cur - 3;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = 11;
+    else return;
+    e.preventDefault();
+    if (next < 0) {
+      setView(new Date(y - 1, 0, 1));
+      next += 12;
+    } else if (next > 11) {
+      setView(new Date(y + 1, 0, 1));
+      next -= 12;
+    }
+    setFocusMonth(next);
+  };
   const onGridKeyDown = (e) => {
     const btn = e.target.closest?.("[data-key]");
     if (!btn) return;
@@ -7472,7 +8114,82 @@ function DatePicker({
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dp__field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dp__field", children: editable ? (
+      // #105: typed entry — the trigger is a real text input with a trailing
+      // calendar toggle button; typing commits via `parse` on Enter/blur.
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "twc-dp__control twc-dp__control--editable",
+          "data-open": open || void 0,
+          "data-disabled": disabled || void 0,
+          "data-tone": tone,
+          "data-invalid": invalid || void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: triggerRef,
+                className: "twc-dp__input",
+                id: fieldId,
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "off",
+                disabled,
+                placeholder,
+                value: editText != null ? editText : selected ? fmt(selected) : "",
+                "aria-haspopup": "dialog",
+                "aria-expanded": open,
+                "aria-labelledby": label ? `${fieldId}-label` : void 0,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": error || hint ? descId : void 0,
+                onChange: (e) => setEditText(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitText();
+                  } else if (e.key === "ArrowDown" && (e.altKey || !open)) {
+                    e.preventDefault();
+                    setOpen(true);
+                  } else if (e.key === "Escape" && open) setOpen(false);
+                },
+                onBlur: (e) => {
+                  if (popRef.current && popRef.current.contains(e.relatedTarget)) return;
+                  commitText();
+                }
+              }
+            ),
+            clearable && selected && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "twc-dp__clear twc-dp__clear--inline",
+                "aria-label": "Clear",
+                tabIndex: -1,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => pick(null),
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "twc-dp__toggle",
+                "aria-label": "Open calendar",
+                tabIndex: -1,
+                disabled,
+                onClick: () => !disabled && setOpen((o) => !o),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -7511,7 +8228,7 @@ function DatePicker({
         e.stopPropagation();
         pick(null);
       }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
-    ] }),
+    ] }) }),
     open && coords ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -7519,12 +8236,16 @@ function DatePicker({
           className: "twc-dp__pop",
           ref: popRef,
           role: "dialog",
+          "aria-modal": "true",
           "aria-label": "Choose date",
           style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dp__head", children: [
               /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dp__nav", "aria-label": "Previous", onClick: () => setView(mode === "months" ? new Date(y - 1, m, 1) : new Date(y, m - 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dp__title", onClick: () => setMode(mode === "days" ? "months" : "days"), children: mode === "days" ? `${months[m]} ${y}` : y }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dp__title", onClick: () => {
+                if (mode === "days") setFocusMonth(m);
+                setMode(mode === "days" ? "months" : "days");
+              }, children: mode === "days" ? `${months[m]} ${y}` : y }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dp__sr", "aria-live": "polite", children: mode === "days" ? `${months[m]} ${y}` : y }),
               /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dp__nav", "aria-label": "Next", onClick: () => setView(mode === "months" ? new Date(y + 1, m, 1) : new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) }) })
             ] }),
@@ -7552,11 +8273,14 @@ function DatePicker({
                   i
                 );
               })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dp__months", children: monthsShort.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dp__months", ref: gridRef, onKeyDown: onMonthsKeyDown, role: "grid", children: monthsShort.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 className: "twc-dp__mo",
+                role: "gridcell",
+                "data-mo": i,
+                tabIndex: i === (focusMonth ?? m) ? 0 : -1,
                 "data-selected": selected && selected.getFullYear() === y && selected.getMonth() === i || void 0,
                 onClick: () => {
                   setView(new Date(y, i, 1));
@@ -7603,6 +8327,17 @@ var RANGE_CSS = `
 .twc-drp__ic svg { width: 17px; height: 17px; }
 .twc-drp__text { flex: 1; font-size: var(--text-sm); color: var(--color-text); white-space: nowrap; }
 .twc-drp__text[data-placeholder="true"] { color: var(--color-text-subtle); }
+/* #105: editable (typed entry) variant. */
+.twc-drp__control--editable { cursor: text; gap: 0; padding-inline-end: var(--space-1); }
+.twc-drp__input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; outline: none; padding: 0;
+  font-family: inherit; font-size: var(--text-sm); color: var(--color-text); }
+.twc-drp__input::placeholder { color: var(--color-text-subtle); }
+.twc-drp__input:disabled { cursor: not-allowed; }
+.twc-drp__toggle { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: none; background: transparent;
+  color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--duration-fast), color var(--duration-fast); }
+.twc-drp__toggle:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-drp__toggle:disabled { cursor: not-allowed; }
+.twc-drp__toggle svg { width: 17px; height: 17px; }
 .twc-drp__pop { position: fixed; z-index: var(--z-popover); display: flex;
   background: var(--color-surface-raised); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg); animation: twico-scale-in var(--duration-fast) var(--ease-spring); transform-origin: top; }
@@ -7657,29 +8392,34 @@ function DateRangePicker({
   disabledDate,
   disabled = false,
   tone = "primary",
+  editable = false,
+  parse,
   onChange,
   className = "",
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
   const __twcStyles1 = useScopedStyles("twc-drp-styles", RANGE_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultValue);
   const range = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [view, setView] = React25__namespace.default.useState(range.start || /* @__PURE__ */ new Date());
-  const [hover, setHover] = React25__namespace.default.useState(null);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const triggerRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const labelId = React25__namespace.default.useId();
+  const [open, setOpen] = React37__namespace.default.useState(false);
+  const [view, setView] = React37__namespace.default.useState(range.start || /* @__PURE__ */ new Date());
+  const [hover, setHover] = React37__namespace.default.useState(null);
+  const [focusDate, setFocusDate] = React37__namespace.default.useState(null);
+  const [editText, setEditText] = React37__namespace.default.useState(null);
+  const [coords, setCoords] = React37__namespace.default.useState(null);
+  const wrapRef = React37__namespace.default.useRef(null);
+  const triggerRef = React37__namespace.default.useRef(null);
+  const popRef = React37__namespace.default.useRef(null);
+  const gridRef = React37__namespace.default.useRef(null);
+  const labelId = React37__namespace.default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const POP_W = 420;
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React37__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7690,7 +8430,7 @@ function DateRangePicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7701,7 +8441,7 @@ function DateRangePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -7722,7 +8462,86 @@ function DateRangePicker({
     if (value === void 0) setInternal(r);
     onChange?.(r);
   };
+  const parseOne = (s) => {
+    const str = s.trim();
+    if (str === "") return null;
+    if (parse) {
+      const d = parse(str);
+      return d instanceof Date && !Number.isNaN(d.getTime()) ? d : void 0;
+    }
+    const t = Date.parse(str);
+    return Number.isNaN(t) ? void 0 : new Date(t);
+  };
+  const commitText = () => {
+    if (editText == null) return;
+    const raw = editText.trim();
+    if (raw === "") {
+      setEditText(null);
+      if (range.start || range.end) set({ start: null, end: null });
+      return;
+    }
+    const parts = raw.split(/\s*(?:–|—|\bto\b|\.\.+)\s*/i).map((p) => p.trim());
+    let a = parseOne(parts[0] || "");
+    let b = parts.length > 1 ? parseOne(parts[1] || "") : null;
+    if (a === void 0 || b === void 0 || a && outOfRange(a) || b && outOfRange(b)) {
+      setEditText(null);
+      return;
+    }
+    if (a && b && ymd(b) < ymd(a)) {
+      const t = a;
+      a = b;
+      b = t;
+    }
+    set({ start: a || null, end: b || null });
+    setEditText(null);
+    setOpen(false);
+  };
+  useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
   const outOfRange = (d) => min && ymd(d) < ymd(min) || max && ymd(d) > ymd(max) || Boolean(disabledDate && disabledDate(d));
+  const sameDay2 = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  const keyOf = (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+  const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+  const addMonths = (d, n) => {
+    const last = new Date(d.getFullYear(), d.getMonth() + n + 1, 0);
+    return new Date(last.getFullYear(), last.getMonth(), Math.min(d.getDate(), last.getDate()));
+  };
+  React37__namespace.default.useEffect(() => {
+    if (!open) {
+      setFocusDate(null);
+      setHover(null);
+    }
+  }, [open]);
+  React37__namespace.default.useEffect(() => {
+    if (!open || !focusDate) return;
+    gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
+  }, [focusDate, open]);
+  const onGridKeyDown = (e) => {
+    const btn = e.target.closest && e.target.closest("[data-key]");
+    if (!btn) return;
+    const [fy, fm, fd] = btn.getAttribute("data-key").split("-").map(Number);
+    const cur = new Date(fy, fm, fd);
+    let step;
+    if (e.key === "ArrowLeft") step = (d) => addDays(d, -1);
+    else if (e.key === "ArrowRight") step = (d) => addDays(d, 1);
+    else if (e.key === "ArrowUp") step = (d) => addDays(d, -7);
+    else if (e.key === "ArrowDown") step = (d) => addDays(d, 7);
+    else if (e.key === "Home") step = (d) => addDays(d, -((d.getDay() - weekStartsOn + 7) % 7));
+    else if (e.key === "End") step = (d) => addDays(d, 6 - (d.getDay() - weekStartsOn + 7) % 7);
+    else if (e.key === "PageUp") step = (d) => addMonths(d, -1);
+    else if (e.key === "PageDown") step = (d) => addMonths(d, 1);
+    else return;
+    e.preventDefault();
+    let next = step(cur), guard = 0;
+    while (outOfRange(next) && guard < 366) {
+      next = step(next);
+      guard += 1;
+    }
+    if (outOfRange(next)) return;
+    setFocusDate(next);
+    setHover(next);
+    if (next.getFullYear() !== view.getFullYear() || next.getMonth() !== view.getMonth()) setView(new Date(next.getFullYear(), next.getMonth(), 1));
+  };
+  const tabbableDate = focusDate || range.start || /* @__PURE__ */ new Date();
   const clickDay = (d) => {
     if (outOfRange(d)) return;
     if (!range.start || range.start && range.end) {
@@ -7741,8 +8560,8 @@ function DateRangePicker({
     setView(start);
     setOpen(false);
   };
-  const months = React25__namespace.default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
-  const dows = React25__namespace.default.useMemo(
+  const months = React37__namespace.default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
+  const dows = React37__namespace.default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW2[(i + weekStartsOn) % 7]) : weekdayNames2(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7772,7 +8591,57 @@ function DateRangePicker({
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    editable ? (
+      // #105: typed entry — a text input accepting "start – end"; commits via `parse` on Enter/blur.
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-drp__control twc-drp__control--editable", "data-open": open || void 0, "data-disabled": disabled || void 0, "data-invalid": invalid || void 0, "data-tone": tone, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: triggerRef,
+            className: "twc-drp__input",
+            type: "text",
+            autoComplete: "off",
+            disabled,
+            placeholder,
+            value: editText != null ? editText : text,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-labelledby": label ? labelId : void 0,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": error || hint ? descId : void 0,
+            onChange: (e) => setEditText(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitText();
+              } else if (e.key === "ArrowDown" && (e.altKey || !open)) {
+                e.preventDefault();
+                setOpen(true);
+              } else if (e.key === "Escape" && open) setOpen(false);
+            },
+            onBlur: (e) => {
+              if (popRef.current && popRef.current.contains(e.relatedTarget)) return;
+              commitText();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "twc-drp__toggle",
+            "aria-label": "Open calendar",
+            tabIndex: -1,
+            disabled,
+            onClick: () => !disabled && setOpen((o) => !o),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+            ] })
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref: triggerRef,
@@ -7812,6 +8681,7 @@ function DateRangePicker({
           className: "twc-drp__pop",
           ref: popRef,
           role: "dialog",
+          "aria-modal": "true",
           "aria-label": "Choose date range",
           style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
           children: [
@@ -7831,7 +8701,7 @@ function DateRangePicker({
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-drp__nav", "aria-label": "Next month", onClick: () => setView(new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-drp__grid", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-drp__grid", ref: gridRef, onKeyDown: onGridKeyDown, role: "grid", children: [
                 dows.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-drp__dow", children: d }, i)),
                 Array.from({ length: 42 }).map((_, i) => {
                   const d = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i);
@@ -7843,6 +8713,8 @@ function DateRangePicker({
                       className: "twc-drp__day",
                       "data-outside": outside || void 0,
                       disabled: outOfRange(d) || void 0,
+                      "data-key": keyOf(d),
+                      tabIndex: sameDay2(d, tabbableDate) ? 0 : -1,
                       "data-in": inRange(t) || void 0,
                       "data-edge": edgeOf(t) || void 0,
                       "aria-pressed": !!edgeOf(t),
@@ -7929,14 +8801,14 @@ function Dialog({
   className = "",
   ...rest
 }) {
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const dialogRef = React25__namespace.default.useRef(null);
+  const dialogRef = React37__namespace.default.useRef(null);
   const __twcStyles = useScopedStyles("twc-dialog-styles", DIALOG_CSS);
   const renderPortal = usePortal();
-  const [mounted, setMounted] = React25__namespace.default.useState(open);
-  React25__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React37__namespace.default.useState(open);
+  React37__namespace.default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -7947,7 +8819,7 @@ function Dialog({
   useScrollLock(open);
   useInertBackground(dialogRef, open && mounted);
   useFocusTrap(dialogRef, open && mounted);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -8094,14 +8966,14 @@ function Drawer({
   style,
   ...rest
 }) {
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const panelRef = React25__namespace.default.useRef(null);
+  const panelRef = React37__namespace.default.useRef(null);
   const __twcStyles = useScopedStyles("twc-drawer-styles", DRAWER_CSS);
   const renderPortal = usePortal();
-  const [mounted, setMounted] = React25__namespace.default.useState(open);
-  React25__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React37__namespace.default.useState(open);
+  React37__namespace.default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -8112,7 +8984,7 @@ function Drawer({
   useScrollLock(open);
   useInertBackground(panelRef, open && mounted);
   useFocusTrap(panelRef, open && mounted);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -8201,11 +9073,11 @@ function Field({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS5);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const hasMsg = Boolean(error || hint);
-  const control = React25__namespace.default.isValidElement(children) ? React25__namespace.default.cloneElement(children, {
+  const control = React37__namespace.default.isValidElement(children) ? React37__namespace.default.cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], hasMsg ? descId : null].filter(Boolean).join(" ") || void 0,
     "aria-invalid": children.props["aria-invalid"] !== void 0 ? children.props["aria-invalid"] : error ? true : void 0
   }) : children;
@@ -8297,11 +9169,11 @@ function FileUpload({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-upload-styles", UPLOAD_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultValue);
   const files = value !== void 0 ? value : internal;
-  const [drag, setDrag] = React25__namespace.default.useState(false);
-  const inputRef = React25__namespace.default.useRef(null);
-  const autoId = React25__namespace.default.useId();
+  const [drag, setDrag] = React37__namespace.default.useState(false);
+  const inputRef = React37__namespace.default.useRef(null);
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
@@ -8524,15 +9396,15 @@ function Kanban({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-kanban-styles", KANBAN_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(cards ?? defaultCards ?? []);
+  const [internal, setInternal] = React37__namespace.default.useState(cards ?? defaultCards ?? []);
   const items = cards !== void 0 ? cards : internal;
-  const [drag, setDrag] = React25__namespace.default.useState(null);
-  const [overCol, setOverCol] = React25__namespace.default.useState(null);
-  const [grab, setGrab] = React25__namespace.default.useState(null);
-  const [announce, setAnnounce] = React25__namespace.default.useState("");
-  const rootRef = React25__namespace.default.useRef(null);
-  const focusIdRef = React25__namespace.default.useRef(null);
-  React25__namespace.default.useEffect(() => {
+  const [drag, setDrag] = React37__namespace.default.useState(null);
+  const [overCol, setOverCol] = React37__namespace.default.useState(null);
+  const [grab, setGrab] = React37__namespace.default.useState(null);
+  const [announce, setAnnounce] = React37__namespace.default.useState("");
+  const rootRef = React37__namespace.default.useRef(null);
+  const focusIdRef = React37__namespace.default.useRef(null);
+  React37__namespace.default.useEffect(() => {
     if (focusIdRef.current == null) return void 0;
     const raf = requestAnimationFrame(() => {
       const id = focusIdRef.current;
@@ -8681,7 +9553,7 @@ var LIST_CSS = `
 `;
 function List({ items, plain = false, emptyMessage, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-list-styles", LIST_CSS);
-  const safeHref12 = (url) => {
+  const safeHref13 = (url) => {
     if (url == null) return void 0;
     const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
     return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -8693,7 +9565,7 @@ function List({ items, plain = false, emptyMessage, className = "", ...rest }) {
     /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: `twc-list ${className}`, role: "list", "data-plain": plain || void 0, ...rest, children: [
       __twcStyles,
       items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", style: { display: "contents" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-list__empty", children: emptyMessage ?? "Nothing here yet" }) }) : items.map((it, i) => {
-        const href = safeHref12(it.href);
+        const href = safeHref13(it.href);
         const interactive = Boolean(it.onClick || href);
         const Tag2 = href ? "a" : interactive ? "button" : "div";
         const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -8749,7 +9621,7 @@ button.twc-navbar__brand, a.twc-navbar__brand { cursor: pointer; }
   .twc-navbar__menu-btn { display: inline-grid; }
 }
 `;
-function safeHref4(url) {
+function safeHref5(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -8772,9 +9644,9 @@ function Navbar({
   return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `twc-navbar ${className}`, "data-sticky": sticky || void 0, ...rest, children: [
     __twcStyles,
     onMenuClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-navbar__menu-btn", "aria-expanded": menuOpen, "aria-controls": menuControls, "aria-label": menuOpen ? "Close menu" : "Open menu", onClick: onMenuClick, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }) }) }) : null,
-    brand ? brandHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "twc-navbar__brand", href: safeHref4(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
+    brand ? brandHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "twc-navbar__brand", href: safeHref5(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "twc-navbar__links", "aria-label": navLabel, children: links.map((l, i) => {
-      const href = safeHref4(l.href);
+      const href = safeHref5(l.href);
       const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         l.icon,
         l.label
@@ -8842,21 +9714,21 @@ function Popover({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-popover-styles", POPOVER_CSS);
-  const [openState, setOpenState] = React25__namespace.default.useState(defaultOpen);
-  const [render, setRender] = React25__namespace.default.useState(false);
-  const [pos, setPos] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const popId = React25__namespace.default.useId();
+  const [openState, setOpenState] = React37__namespace.default.useState(defaultOpen);
+  const [render, setRender] = React37__namespace.default.useState(false);
+  const [pos, setPos] = React37__namespace.default.useState(null);
+  const wrapRef = React37__namespace.default.useRef(null);
+  const popRef = React37__namespace.default.useRef(null);
+  const popId = React37__namespace.default.useId();
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React25__namespace.default.useRef(open);
+  const openRef = React37__namespace.default.useRef(open);
   openRef.current = open;
-  const controlledRef = React25__namespace.default.useRef(controlled);
+  const controlledRef = React37__namespace.default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React25__namespace.default.useRef(onOpenChange);
+  const onOpenChangeRef = React37__namespace.default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React25__namespace.default.useCallback((next) => {
+  const setOpen = React37__namespace.default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -8864,7 +9736,7 @@ function Popover({
   }, []);
   const toggle = () => setOpen((o) => !o);
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React37__namespace.default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -8901,7 +9773,7 @@ function Popover({
     arrow = { top: Math.min(Math.max(cy - top - 5.5, 8), ph - 18), [onRight ? "left" : "right"]: -6 };
     setPos({ top, left, width: w, flip: false, arrow });
   }, [placement, align, width]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -8924,7 +9796,7 @@ function Popover({
       document.removeEventListener("keydown", onKey);
     };
   }, [open, place]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -8932,12 +9804,12 @@ function Popover({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (render && open) place();
   }, [render, place]);
-  const restoreRef = React25__namespace.default.useRef(null);
-  const needFocusRef = React25__namespace.default.useRef(false);
-  React25__namespace.default.useEffect(() => {
+  const restoreRef = React37__namespace.default.useRef(null);
+  const needFocusRef = React37__namespace.default.useRef(false);
+  React37__namespace.default.useEffect(() => {
     if (open) {
       restoreRef.current = document.activeElement;
       needFocusRef.current = true;
@@ -8972,7 +9844,7 @@ function Popover({
       ]
     }
   ) : null;
-  const triggerEl = React25__namespace.default.isValidElement(trigger) ? React25__namespace.default.cloneElement(trigger, {
+  const triggerEl = React37__namespace.default.isValidElement(trigger) ? React37__namespace.default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -9015,7 +9887,7 @@ function Progress({
   className = "",
   ...rest
 }) {
-  const labelId = React25__namespace.default.useId();
+  const labelId = React37__namespace.default.useId();
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restProps } = rest;
   const __twcStyles = useScopedStyles("twc-progress-styles", `
 .twc-progress-wrap { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
@@ -9138,7 +10010,7 @@ function Radio({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
@@ -9208,13 +10080,13 @@ function RadioGroup({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const labelId = `${fieldId}-label`;
   const descId = `${fieldId}-desc`;
   const groupName = name || `${fieldId}-name`;
   const invalid = Boolean(error);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const select = (v) => {
     if (value === void 0) setInternal(v);
@@ -9235,10 +10107,10 @@ function RadioGroup({
       tone
     },
     o.value
-  )) : React25__namespace.default.Children.map(children, (child) => {
-    if (!React25__namespace.default.isValidElement(child)) return child;
+  )) : React37__namespace.default.Children.map(children, (child) => {
+    if (!React37__namespace.default.isValidElement(child)) return child;
     const v = child.props.value;
-    return React25__namespace.default.cloneElement(child, {
+    return React37__namespace.default.cloneElement(child, {
       name: child.props.name ?? groupName,
       checked: child.props.checked ?? current === v,
       onChange: child.props.onChange ?? (() => select(v)),
@@ -9318,12 +10190,12 @@ function Rating({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-rating-styles", RATING_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
-  const [hover, setHover] = React25__namespace.default.useState(0);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultValue);
+  const [hover, setHover] = React37__namespace.default.useState(0);
   const val = value !== void 0 ? value : internal;
   const shown = hover || val;
   const interactive = !readOnly && !disabled;
-  const btnRefs = React25__namespace.default.useRef([]);
+  const btnRefs = React37__namespace.default.useRef([]);
   const tabStar = Math.min(count, Math.max(1, Math.round(val) || 1));
   const fmt = (v) => format ? format(v) : Number.isInteger(v) ? String(v) : v.toFixed(1);
   if (process.env.NODE_ENV !== "production" && interactive && !Number.isInteger(val)) {
@@ -9510,24 +10382,24 @@ function Sidebar({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-sidebar-styles", SIDEBAR_CSS);
-  const navId = React25__namespace.default.useId();
-  const panelRef = React25__namespace.default.useRef(null);
+  const navId = React37__namespace.default.useId();
+  const panelRef = React37__namespace.default.useRef(null);
   const renderPortal = usePortal();
-  const [internal, setInternal] = React25__namespace.default.useState(defaultCollapsed);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultCollapsed);
   const collapsed = collapsedProp !== void 0 ? collapsedProp : internal;
   const toggle = () => {
     const next = !collapsed;
     if (collapsedProp === void 0) setInternal(next);
     onCollapsedChange?.(next);
   };
-  const [openInternal, setOpenInternal] = React25__namespace.default.useState(defaultOpen);
+  const [openInternal, setOpenInternal] = React37__namespace.default.useState(defaultOpen);
   const open = openProp !== void 0 ? openProp : openInternal;
   const setOpen = (next) => {
     if (openProp === void 0) setOpenInternal(next);
     onOpenChange?.(next);
   };
-  const [mounted, setMounted] = React25__namespace.default.useState(open);
-  React25__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React37__namespace.default.useState(open);
+  React37__namespace.default.useEffect(() => {
     if (!overlay) return void 0;
     if (open) {
       setMounted(true);
@@ -9536,7 +10408,7 @@ function Sidebar({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [overlay, open]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!overlay || !open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -9545,7 +10417,7 @@ function Sidebar({
     };
   }, [overlay, open]);
   useFocusTrap(panelRef, overlay && open && mounted);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!overlay || !open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -9557,13 +10429,13 @@ function Sidebar({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [overlay, open, openProp, onOpenChange]);
-  const safeHref12 = (url) => {
+  const safeHref13 = (url) => {
     if (url == null) return void 0;
     const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
     return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
   };
   const renderItem = (it, i) => {
-    const href = safeHref12(it.href);
+    const href = safeHref13(it.href);
     const labelStr = typeof it.label === "string" ? it.label : void 0;
     const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__ic", "aria-hidden": "true", children: it.icon }) : labelStr != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__ic twc-sidebar__ic--initial", "aria-hidden": "true", children: labelStr.charAt(0) }) : null,
@@ -9597,7 +10469,7 @@ function Sidebar({
   const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     __twcStyles,
     brand ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sidebar__head", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__brand", children: brand }) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React37__namespace.default.Fragment, { children: [
       g.section != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sidebar__section", id: g.sid, children: g.section }) : null,
       /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "twc-sidebar__list", ...g.section != null ? { "aria-labelledby": g.sid } : {}, children: g.entries.map(({ it, i }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: renderItem(it) }, i)) })
     ] }, gi)) }),
@@ -9766,10 +10638,10 @@ function Slider({
     return Math.min(max, Math.max(min, Math.round(stepped * 1e6) / 1e6));
   };
   const __twcStyles = useScopedStyles("twc-slider-styles", SLIDER_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const isRange = range || Array.isArray(value) || Array.isArray(defaultValue);
-  const [internal, setInternal] = React25__namespace.default.useState(() => {
+  const [internal, setInternal] = React37__namespace.default.useState(() => {
     if (isRange) {
       const dv = Array.isArray(defaultValue) ? defaultValue : [min, max];
       return [clampSnap(dv[0]), clampSnap(dv[1])];
@@ -9779,8 +10651,8 @@ function Slider({
   const rawVal = value !== void 0 ? value : internal;
   const clampedVals = (isRange ? [Number(rawVal[0]), Number(rawVal[1])] : [Number(rawVal)]).map((v) => Math.min(max, Math.max(min, Number.isFinite(v) ? v : min)));
   const indices = isRange ? [0, 1] : [0];
-  const trackRef = React25__namespace.default.useRef(null);
-  const [dragging, setDragging] = React25__namespace.default.useState(false);
+  const trackRef = React37__namespace.default.useRef(null);
+  const [dragging, setDragging] = React37__namespace.default.useState(false);
   const fmt = (v) => formatValue ? formatValue(v) : v.toFixed(decimals);
   const valueTextFor = (v) => {
     if (getAriaValueText) return getAriaValueText(v);
@@ -9811,8 +10683,8 @@ function Slider({
     const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
     return clampSnap(min + ratio * (max - min));
   };
-  const dragCleanupRef = React25__namespace.default.useRef(null);
-  React25__namespace.default.useEffect(() => () => dragCleanupRef.current?.(), []);
+  const dragCleanupRef = React37__namespace.default.useRef(null);
+  React37__namespace.default.useEffect(() => () => dragCleanupRef.current?.(), []);
   function onPointerDown(e) {
     if (disabled) return;
     e.preventDefault();
@@ -10043,7 +10915,7 @@ function Stepper({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-stepper-styles", STEPPER_CSS);
-  const [activeInternal, setActiveInternal] = React25__namespace.default.useState(defaultActive);
+  const [activeInternal, setActiveInternal] = React37__namespace.default.useState(defaultActive);
   const active = activeProp !== void 0 ? activeProp : activeInternal;
   const handleStep = (i) => {
     if (activeProp === void 0) setActiveInternal(i);
@@ -10175,7 +11047,7 @@ function Switch({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
@@ -10278,14 +11150,14 @@ function Table({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-table-styles", TABLE_CSS);
-  const cols = React25__namespace.default.useMemo(
+  const cols = React37__namespace.default.useMemo(
     () => (columns || []).map((c) => ({ ...c, header: c.headerName, render: c.renderCell })),
     [columns]
   );
   const dataRows = rowsProp || [];
-  const [internalSort, setInternalSort] = React25__namespace.default.useState(defaultSort || { field: null, dir: "asc" });
+  const [internalSort, setInternalSort] = React37__namespace.default.useState(defaultSort || { field: null, dir: "asc" });
   const sort = (sortProp !== void 0 ? sortProp : internalSort) || { field: null, dir: "asc" };
-  const rows = React25__namespace.default.useMemo(() => {
+  const rows = React37__namespace.default.useMemo(() => {
     if (!sortable || !sort.field) return dataRows;
     const col = cols.find((c) => c.field === sort.field);
     if (!col) return dataRows;
@@ -10432,15 +11304,15 @@ function Tabs({
 }) {
   const vertical = orientation === "vertical";
   const __twcStyles = useScopedStyles("twc-tabs-styles", TABS_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue ?? items[0]?.value);
+  const [internal, setInternal] = React37__namespace.default.useState(defaultValue ?? items[0]?.value);
   const active = value ?? internal;
-  const listRef = React25__namespace.default.useRef(null);
-  const [ind, setInd] = React25__namespace.default.useState({ left: 0, width: 0, top: 0, height: 0 });
-  const baseId = React25__namespace.default.useId();
+  const listRef = React37__namespace.default.useRef(null);
+  const [ind, setInd] = React37__namespace.default.useState({ left: 0, width: 0, top: 0, height: 0 });
+  const baseId = React37__namespace.default.useId();
   const tabIdAt = (i) => `${baseId}-tab-${i}`;
   const panelId = `${baseId}-panel`;
   const activeIndex = items.findIndex((it) => it.value === active);
-  const updateIndicator = React25__namespace.default.useCallback(() => {
+  const updateIndicator = React37__namespace.default.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const el = list.querySelector('[data-active="true"]');
@@ -10449,10 +11321,10 @@ function Tabs({
       if (!vertical) el.scrollIntoView?.({ inline: "nearest", block: "nearest" });
     }
   }, [vertical]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     updateIndicator();
   }, [active, updateIndicator, items, orientation]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     const r = () => updateIndicator();
     window.addEventListener("resize", r);
     if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
@@ -10597,7 +11469,7 @@ function Tag({
     }, "aria-label": _removeLabel, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
   ] });
 }
-var useIso = typeof document !== "undefined" ? React25__namespace.default.useLayoutEffect : React25__namespace.default.useEffect;
+var useIso = typeof document !== "undefined" ? React37__namespace.default.useLayoutEffect : React37__namespace.default.useEffect;
 var TEXTAREA_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
@@ -10633,7 +11505,7 @@ var TEXTAREA_CSS = `
 .twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
 .twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
 `;
-var Textarea = React25__namespace.default.forwardRef(function Textarea2({
+var Textarea = React37__namespace.default.forwardRef(function Textarea2({
   label,
   hint,
   error,
@@ -10651,19 +11523,19 @@ var Textarea = React25__namespace.default.forwardRef(function Textarea2({
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-textarea-styles", TEXTAREA_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React37__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const countId = `${fieldId}-count`;
   const invalid = Boolean(error);
-  const innerRef = React25__namespace.default.useRef(null);
+  const innerRef = React37__namespace.default.useRef(null);
   const setRef = (el) => {
     innerRef.current = el;
     if (typeof ref === "function") ref(el);
     else if (ref) ref.current = el;
   };
   const countControlled = rest.value !== void 0;
-  const [len2, setLen] = React25__namespace.default.useState(() => String(rest.defaultValue ?? "").length);
+  const [len2, setLen] = React37__namespace.default.useState(() => String(rest.defaultValue ?? "").length);
   const count = countControlled ? String(rest.value ?? "").length : len2;
   const max = rest.maxLength;
   const showCounter = showCount && max != null;
@@ -10841,19 +11713,19 @@ function Toast({
 }) {
   const resolvedTone = tone === "neutral" ? "default" : tone;
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const onCloseRef = React25__namespace.default.useRef(onClose);
-  React25__namespace.default.useEffect(() => {
+  const onCloseRef = React37__namespace.default.useRef(onClose);
+  React37__namespace.default.useEffect(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const timer = React25__namespace.default.useRef();
-  const stop = React25__namespace.default.useCallback(() => clearTimeout(timer.current), []);
-  const start = React25__namespace.default.useCallback(() => {
+  const timer = React37__namespace.default.useRef();
+  const stop = React37__namespace.default.useCallback(() => clearTimeout(timer.current), []);
+  const start = React37__namespace.default.useCallback(() => {
     stop();
     if (duration && duration !== Infinity && onCloseRef.current) {
       timer.current = setTimeout(() => onCloseRef.current && onCloseRef.current(), duration);
     }
   }, [duration, stop]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     start();
     return stop;
   }, [start, stop]);
@@ -10898,30 +11770,30 @@ function Toast({
 }
 function ToastViewport({ children, limit, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const shown = limit && limit > 0 ? React25__namespace.default.Children.toArray(children).slice(-limit) : children;
+  const shown = limit && limit > 0 ? React37__namespace.default.Children.toArray(children).slice(-limit) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-toast-viewport ${className}`, role: "region", "aria-label": "Notifications", ...rest, children: [
     __twcStyles,
     shown
   ] });
 }
-var ToastContext = React25__namespace.default.createContext(null);
+var ToastContext = React37__namespace.default.createContext(null);
 function useToast() {
-  const ctx = React25__namespace.default.useContext(ToastContext);
+  const ctx = React37__namespace.default.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within a <ToastProvider>.");
   return ctx;
 }
 function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps }) {
-  const [toasts, setToasts] = React25__namespace.default.useState([]);
-  const idRef = React25__namespace.default.useRef(0);
-  const limitRef = React25__namespace.default.useRef(limit);
-  React25__namespace.default.useEffect(() => {
+  const [toasts, setToasts] = React37__namespace.default.useState([]);
+  const idRef = React37__namespace.default.useRef(0);
+  const limitRef = React37__namespace.default.useRef(limit);
+  React37__namespace.default.useEffect(() => {
     limitRef.current = limit;
   }, [limit]);
-  const dismiss = React25__namespace.default.useCallback((id) => {
+  const dismiss = React37__namespace.default.useCallback((id) => {
     setToasts((s) => s.filter((t) => t.id !== id));
   }, []);
-  const clear = React25__namespace.default.useCallback(() => setToasts([]), []);
-  const api = React25__namespace.default.useMemo(() => {
+  const clear = React37__namespace.default.useCallback(() => setToasts([]), []);
+  const api = React37__namespace.default.useMemo(() => {
     const push = (opts) => {
       const id = idRef.current += 1;
       const next = typeof opts === "string" ? { title: opts } : opts && typeof opts === "object" ? opts : {};
@@ -10942,7 +11814,7 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
     toast.show = withTone("default");
     return { toast, dismiss, clear };
   }, [dismiss, clear]);
-  const value = React25__namespace.default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
+  const value = React37__namespace.default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
   return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx(ToastViewport, { limit, ...viewportProps, children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -11050,13 +11922,13 @@ function TreeView({
 }) {
   const nodes = items;
   const __twcStyles = useScopedStyles("twc-tree-styles", TREE_CSS);
-  const [expInternal, setExpInternal] = React25__namespace.default.useState(() => new Set(defaultExpanded));
+  const [expInternal, setExpInternal] = React37__namespace.default.useState(() => new Set(defaultExpanded));
   const expanded = expandedProp !== void 0 ? new Set(expandedProp) : expInternal;
-  const [selInternal, setSelInternal] = React25__namespace.default.useState(defaultSelectedId);
+  const [selInternal, setSelInternal] = React37__namespace.default.useState(defaultSelectedId);
   const selectedId = selectedProp !== void 0 ? selectedProp : selInternal;
-  const [focusId, setFocusId] = React25__namespace.default.useState(null);
-  const rowRefs = React25__namespace.default.useRef(/* @__PURE__ */ new Map());
-  const taRef = React25__namespace.default.useRef({ str: "", t: 0 });
+  const [focusId, setFocusId] = React37__namespace.default.useState(null);
+  const rowRefs = React37__namespace.default.useRef(/* @__PURE__ */ new Map());
+  const taRef = React37__namespace.default.useRef({ str: "", t: 0 });
   const toggle = (id) => {
     const n = new Set(expanded);
     n.has(id) ? n.delete(id) : n.add(id);
@@ -11188,7 +12060,7 @@ function AppShell({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-shell-styles", SHELL_CSS);
-  const wiredSidebar = React25__namespace.default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React25__namespace.default.cloneElement(sidebar, {
+  const wiredSidebar = React37__namespace.default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React37__namespace.default.cloneElement(sidebar, {
     overlay: sidebar.props.overlay !== void 0 ? sidebar.props.overlay : true,
     open: sidebar.props.open !== void 0 ? sidebar.props.open : sidebarOpen,
     onOpenChange: sidebar.props.onOpenChange !== void 0 ? sidebar.props.onOpenChange : onSidebarOpenChange
@@ -11218,12 +12090,12 @@ function bgValue(bg) {
   if (BG[bg]) return `var(${BG[bg]})`;
   return String(bg).startsWith("--") ? `var(${bg})` : bg;
 }
-function safeHref5(url) {
+function safeHref6(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Box({
+var Box = React37__namespace.default.forwardRef(function Box2({
   as: Tag2 = "div",
   p,
   px,
@@ -11243,11 +12115,13 @@ function Box({
   border = false,
   radius,
   shadow,
+  sx,
   className = "",
   style,
   children,
   ...rest
-}) {
+}, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const s = {
     paddingTop: sp(pt ?? py ?? p),
     paddingRight: sp(pr ?? px ?? p),
@@ -11261,44 +12135,58 @@ function Box({
     border: border ? "var(--border-thin, 1px) solid var(--color-border)" : void 0,
     borderRadius: radius ? `var(--radius-${radius})` : void 0,
     boxShadow: shadow ? `var(--shadow-${shadow})` : void 0,
-    ...style
+    ...style,
+    ...flatStyle
   };
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref5(rest.href);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag2, { className: `twc-box ${className}`.trim(), style: s, ...rest, children });
-}
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref6(rest.href);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref, className: `twc-box ${className}`.trim(), style: s, "data-twc-sx": sxAttr, ...rest, children: [
+    styleNode,
+    children
+  ] });
+});
+Box.displayName = "Box";
 var SIZES = { sm: 640, md: 768, lg: 1024, xl: 1280, full: "100%" };
-function safeHref6(url) {
+function safeHref7(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Container({
+var Container = React37__namespace.default.forwardRef(function Container2({
   as: Tag2 = "div",
   size = "lg",
   padded = true,
+  sx,
   className = "",
   style,
   children,
   ...rest
-}) {
+}, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const max = SIZES[size] ?? size;
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref6(rest.href);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref7(rest.href);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
+      ref,
       className: `twc-container ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         width: "100%",
         maxWidth: typeof max === "number" ? `${max}px` : max,
         marginInline: "auto",
         paddingInline: padded ? "var(--space-5)" : void 0,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children
+      children: [
+        styleNode,
+        children
+      ]
     }
   );
-}
+});
+Container.displayName = "Container";
 function space(v) {
   if (v == null) return void 0;
   if (typeof v === "number") return `var(--space-${String(v).replace(".", "-")})`;
@@ -11308,12 +12196,12 @@ function len(v) {
   return typeof v === "number" ? `${v}px` : v;
 }
 var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-function safeHref7(url) {
+function safeHref8(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Grid({
+var Grid = React37__namespace.default.forwardRef(function Grid2({
   as: Tag2 = "div",
   columns,
   minChildWidth,
@@ -11324,13 +12212,15 @@ function Grid({
   justify,
   alignContent,
   justifyContent,
+  sx,
   className = "",
   style,
   children,
   ...rest
-}) {
+}, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const responsive = columns != null && typeof columns === "object";
-  const uid = React25__namespace.default.useId();
+  const uid = React37__namespace.default.useId();
   const gridId = responsive ? `g${uid.replace(/[^a-zA-Z0-9]/g, "")}` : null;
   let css = "";
   if (responsive) {
@@ -11344,12 +12234,14 @@ function Grid({
   }
   const __twcStyles = useScopedStyles(gridId ? `twc-grid-${gridId}` : "twc-grid", css);
   const templateColumns = minChildWidth ? `repeat(auto-fill, minmax(min(${len(minChildWidth)}, 100%), 1fr))` : responsive ? `repeat(var(--twc-grid-cols, ${columns.base ?? 1}), minmax(0, 1fr))` : `repeat(${columns || 1}, minmax(0, 1fr))`;
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref7(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref8(rest.href);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
+      ref,
       className: `twc-grid ${className}`.trim(),
       "data-twc-grid-id": gridId || void 0,
+      "data-twc-sx": sxAttr,
       style: {
         display: "grid",
         gridTemplateColumns: templateColumns,
@@ -11359,27 +12251,30 @@ function Grid({
         justifyItems: justify,
         alignContent,
         justifyContent,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
       children: [
         responsive ? __twcStyles : null,
+        styleNode,
         children
       ]
     }
   );
-}
+});
+Grid.displayName = "Grid";
 function space2(v) {
   if (v == null) return void 0;
   if (typeof v === "number") return `var(--space-${String(v).replace(".", "-")})`;
   return v;
 }
-function safeHref8(url) {
+function safeHref9(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Stack({
+var Stack = React37__namespace.default.forwardRef(function Stack2({
   as: Tag2 = "div",
   direction = "column",
   gap = 4,
@@ -11395,17 +12290,21 @@ function Stack({
   pb,
   pl,
   divider,
+  sx,
   className = "",
   style,
   children,
   ...rest
-}) {
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref8(rest.href);
-  const kids = divider != null ? React25__namespace.default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsxRuntime.jsx(React25__namespace.default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+}, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref9(rest.href);
+  const kids = divider != null ? React37__namespace.default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsxRuntime.jsx(React37__namespace.default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
+      ref,
       className: `twc-stack ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         display: inline ? "inline-flex" : "flex",
         flexDirection: direction,
@@ -11418,13 +12317,18 @@ function Stack({
         paddingBottom: space2(pb ?? py ?? p),
         paddingLeft: space2(pl ?? px ?? p),
         minWidth: 0,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children: kids
+      children: [
+        styleNode,
+        kids
+      ]
     }
   );
-}
+});
+Stack.displayName = "Stack";
 var CODE_CSS = `
 .twc-code {
   font-family: var(--font-mono); font-size: 0.875em;
@@ -11448,7 +12352,7 @@ var CODE_CSS = `
 .twc-code__copy:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-code__copy svg { width: 15px; height: 15px; display: block; }
 `;
-function safeHref9(url) {
+function safeHref10(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -11465,11 +12369,11 @@ function Code({
 }) {
   const __twcStyles = useScopedStyles("twc-code-styles", CODE_CSS);
   const Tag2 = as ?? (block ? "pre" : "code");
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref9(rest.href);
-  const rootRef = React25__namespace.default.useRef(null);
-  const [copied, setCopied] = React25__namespace.default.useState(false);
-  const timerRef = React25__namespace.default.useRef(null);
-  React25__namespace.default.useEffect(() => () => clearTimeout(timerRef.current), []);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
+  const rootRef = React37__namespace.default.useRef(null);
+  const [copied, setCopied] = React37__namespace.default.useState(false);
+  const timerRef = React37__namespace.default.useRef(null);
+  React37__namespace.default.useEffect(() => () => clearTimeout(timerRef.current), []);
   const doCopy = () => {
     if (typeof navigator === "undefined" || !navigator.clipboard) return;
     const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
@@ -11490,12 +12394,12 @@ function Code({
   ] });
 }
 var LEVEL_SIZE = { 1: "4xl", 2: "2xl", 3: "xl", 4: "lg", 5: "base", 6: "sm" };
-function safeHref10(url) {
+function safeHref11(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Heading({
+var Heading = React37__namespace.default.forwardRef(function Heading2({
   as,
   level = 2,
   size,
@@ -11503,18 +12407,22 @@ function Heading({
   align,
   truncate,
   lineClamp,
+  sx,
   className = "",
   style,
   children,
   ...rest
-}) {
+}, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const Tag2 = as || `h${level}`;
   const sz = size || (display ? "display" : LEVEL_SIZE[level]) || "2xl";
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
+      ref,
       className: `twc-heading ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         margin: 0,
         fontFamily: "var(--font-sans)",
@@ -11525,13 +12433,18 @@ function Heading({
         fontSize: `var(--text-${sz})`,
         textAlign: align,
         ...lineClamp != null ? { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lineClamp, overflow: "hidden" } : truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 } : null,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children
+      children: [
+        styleNode,
+        children
+      ]
     }
   );
-}
+});
+Heading.displayName = "Heading";
 var TONE = {
   default: "--color-text",
   muted: "--color-text-muted",
@@ -11547,12 +12460,12 @@ var TONE = {
   // Adopt the surrounding color (e.g. inside a solid Button/Badge/Alert or a link).
   inherit: "inherit"
 };
-function safeHref11(url) {
+function safeHref12(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Text({
+var Text = React37__namespace.default.forwardRef(function Text2({
   as: Tag2 = "p",
   size = "base",
   tone = "default",
@@ -11560,17 +12473,21 @@ function Text({
   align,
   truncate,
   lineClamp,
+  sx,
   className = "",
   style,
   children,
   ...rest
-}) {
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
+}, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref12(rest.href);
   const toneToken = TONE[tone] || TONE.default;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
+      ref,
       className: `twc-text ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         margin: 0,
         fontFamily: "var(--font-sans)",
@@ -11580,53 +12497,58 @@ function Text({
         fontWeight: weight ? `var(--font-${weight})` : void 0,
         textAlign: align,
         ...lineClamp != null ? { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lineClamp, overflow: "hidden" } : truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 } : null,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children
+      children: [
+        styleNode,
+        children
+      ]
     }
   );
-}
+});
+Text.displayName = "Text";
 var canUseDOM2 = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicLayoutEffect = canUseDOM2 ? React25__namespace.default.useLayoutEffect : React25__namespace.default.useEffect;
+var useIsomorphicLayoutEffect = canUseDOM2 ? React37__namespace.default.useLayoutEffect : React37__namespace.default.useEffect;
 function useMounted() {
-  const [mounted, setMounted] = React25__namespace.default.useState(false);
-  React25__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React37__namespace.default.useState(false);
+  React37__namespace.default.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function usePrevious(value) {
-  const ref = React25__namespace.default.useRef(void 0);
-  React25__namespace.default.useEffect(() => {
+  const ref = React37__namespace.default.useRef(void 0);
+  React37__namespace.default.useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
 function useToggle(initial = false) {
-  const [on, setOn] = React25__namespace.default.useState(initial);
-  const toggle = React25__namespace.default.useCallback((next) => {
+  const [on, setOn] = React37__namespace.default.useState(initial);
+  const toggle = React37__namespace.default.useCallback((next) => {
     setOn((prev) => typeof next === "boolean" ? next : !prev);
   }, []);
   return [on, toggle, setOn];
 }
 function useDisclosure(initial = false) {
-  const [open, setOpen] = React25__namespace.default.useState(initial);
-  const onOpen = React25__namespace.default.useCallback(() => setOpen(true), []);
-  const onClose = React25__namespace.default.useCallback(() => setOpen(false), []);
-  const onToggle = React25__namespace.default.useCallback(() => setOpen((p) => !p), []);
+  const [open, setOpen] = React37__namespace.default.useState(initial);
+  const onOpen = React37__namespace.default.useCallback(() => setOpen(true), []);
+  const onClose = React37__namespace.default.useCallback(() => setOpen(false), []);
+  const onToggle = React37__namespace.default.useCallback(() => setOpen((p) => !p), []);
   return { open, onOpen, onClose, onToggle, setOpen };
 }
 function useControllableState({ value, defaultValue, onChange } = {}) {
   const isControlled = value !== void 0;
-  const [uncontrolled, setUncontrolled] = React25__namespace.default.useState(defaultValue);
+  const [uncontrolled, setUncontrolled] = React37__namespace.default.useState(defaultValue);
   const current = isControlled ? value : uncontrolled;
-  const ref = React25__namespace.default.useRef({ current, isControlled, onChange });
+  const ref = React37__namespace.default.useRef({ current, isControlled, onChange });
   useIsomorphicLayoutEffect(() => {
     ref.current = { current, isControlled, onChange };
   });
-  const wasControlled = React25__namespace.default.useRef(isControlled);
-  React25__namespace.default.useEffect(() => {
+  const wasControlled = React37__namespace.default.useRef(isControlled);
+  React37__namespace.default.useEffect(() => {
     if (wasControlled.current !== isControlled) {
       warnOnce(
         "useControllableState:switch",
@@ -11635,7 +12557,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
       wasControlled.current = isControlled;
     }
   });
-  const setValue = React25__namespace.default.useCallback((next) => {
+  const setValue = React37__namespace.default.useCallback((next) => {
     const { current: cur, isControlled: ctrl, onChange: cb } = ref.current;
     const resolved = typeof next === "function" ? next(cur) : next;
     if (resolved === cur) return;
@@ -11646,7 +12568,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
 }
 function useMediaQuery(query, { defaultValue = false, initializeWithValue = false } = {}) {
   const get = () => canUseDOM2 ? window.matchMedia(query).matches : defaultValue;
-  const [matches3, setMatches] = React25__namespace.default.useState(initializeWithValue ? get : defaultValue);
+  const [matches3, setMatches] = React37__namespace.default.useState(initializeWithValue ? get : defaultValue);
   useIsomorphicLayoutEffect(() => {
     if (!canUseDOM2) return void 0;
     const mql = window.matchMedia(query);
@@ -11662,7 +12584,7 @@ function usePrefersReducedMotion() {
 }
 function useColorScheme({ storageKey = "twico-theme", attribute = "class", element, disableTransitionsOnChange = true } = {}) {
   const getTarget = () => element || (canUseDOM2 ? document.documentElement : null);
-  const firstApply = React25__namespace.default.useRef(true);
+  const firstApply = React37__namespace.default.useRef(true);
   const read = () => {
     if (!canUseDOM2) return "light";
     try {
@@ -11672,8 +12594,8 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     }
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   };
-  const [theme, setThemeState] = React25__namespace.default.useState(read);
-  const apply = React25__namespace.default.useCallback(
+  const [theme, setThemeState] = React37__namespace.default.useState(read);
+  const apply = React37__namespace.default.useCallback(
     (t) => {
       const target = getTarget();
       if (!target) return;
@@ -11699,11 +12621,11 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   useIsomorphicLayoutEffect(() => {
     apply(theme);
   }, [theme, apply]);
-  const themeRef = React25__namespace.default.useRef(theme);
+  const themeRef = React37__namespace.default.useRef(theme);
   useIsomorphicLayoutEffect(() => {
     themeRef.current = theme;
   }, [theme]);
-  const setTheme = React25__namespace.default.useCallback(
+  const setTheme = React37__namespace.default.useCallback(
     (t) => {
       setThemeState(t);
       try {
@@ -11714,10 +12636,10 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     },
     [storageKey]
   );
-  const toggle = React25__namespace.default.useCallback(() => {
+  const toggle = React37__namespace.default.useCallback(() => {
     setTheme(themeRef.current === "dark" ? "light" : "dark");
   }, [setTheme]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const sync = () => setThemeState(read());
     const onStorage = (e) => {
@@ -11733,14 +12655,14 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   return { theme, setTheme, toggle, isDark: theme === "dark" };
 }
 function useEventListener(eventName, handler, element, options) {
-  const saved = React25__namespace.default.useRef(handler);
+  const saved = React37__namespace.default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
   const capture = typeof options === "boolean" ? options : options && options.capture;
   const passive = typeof options === "object" && options ? options.passive : void 0;
   const once = typeof options === "object" && options ? options.once : void 0;
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     const target = element && element.current || element || (canUseDOM2 ? window : null);
     if (!target || !target.addEventListener) return void 0;
     const opts = typeof options === "boolean" ? options : { capture, passive, once };
@@ -11750,11 +12672,11 @@ function useEventListener(eventName, handler, element, options) {
   }, [eventName, element, capture, passive, once]);
 }
 function useClickOutside(ref, handler, events = ["mousedown", "touchstart"]) {
-  const saved = React25__namespace.default.useRef(handler);
+  const saved = React37__namespace.default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const listener = (e) => {
       const el = ref && ref.current;
@@ -11789,8 +12711,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   };
-  const [stored, setStored] = React25__namespace.default.useState(read);
-  const setValue = React25__namespace.default.useCallback(
+  const [stored, setStored] = React37__namespace.default.useState(read);
+  const setValue = React37__namespace.default.useCallback(
     (value) => {
       setStored((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -11806,8 +12728,8 @@ function useLocalStorage(key, initialValue) {
   return [stored, setValue];
 }
 function useCopyToClipboard(timeout = 1500) {
-  const [copied, setCopied] = React25__namespace.default.useState(false);
-  const copy = React25__namespace.default.useCallback(async (text) => {
+  const [copied, setCopied] = React37__namespace.default.useState(false);
+  const copy = React37__namespace.default.useCallback(async (text) => {
     if (!canUseDOM2 || !navigator.clipboard) {
       setCopied(false);
       return false;
@@ -11821,7 +12743,7 @@ function useCopyToClipboard(timeout = 1500) {
       return false;
     }
   }, []);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!copied) return void 0;
     const t = setTimeout(() => setCopied(false), timeout);
     return () => clearTimeout(t);
@@ -11829,23 +12751,23 @@ function useCopyToClipboard(timeout = 1500) {
   return { copied, copy };
 }
 function useDebouncedValue(value, delay = 200) {
-  const [debounced, setDebounced] = React25__namespace.default.useState(value);
-  React25__namespace.default.useEffect(() => {
+  const [debounced, setDebounced] = React37__namespace.default.useState(value);
+  React37__namespace.default.useEffect(() => {
     const t = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(t);
   }, [value, delay]);
   return debounced;
 }
 function useDebouncedCallback(callback, delay = 200) {
-  const saved = React25__namespace.default.useRef(callback);
-  const timer = React25__namespace.default.useRef(null);
+  const saved = React37__namespace.default.useRef(callback);
+  const timer = React37__namespace.default.useRef(null);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React25__namespace.default.useEffect(() => () => {
+  React37__namespace.default.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  return React25__namespace.default.useCallback(
+  return React37__namespace.default.useCallback(
     (...args) => {
       if (timer.current) clearTimeout(timer.current);
       timer.current = setTimeout(() => saved.current(...args), delay);
@@ -11854,33 +12776,33 @@ function useDebouncedCallback(callback, delay = 200) {
   );
 }
 function useInterval(callback, delay) {
-  const saved = React25__namespace.default.useRef(callback);
+  const saved = React37__namespace.default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setInterval(() => saved.current(), delay);
     return () => clearInterval(id);
   }, [delay]);
 }
 function useTimeout(callback, delay) {
-  const saved = React25__namespace.default.useRef(callback);
+  const saved = React37__namespace.default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setTimeout(() => saved.current(), delay);
     return () => clearTimeout(id);
   }, [delay]);
 }
 function useWindowSize() {
-  const [size, setSize] = React25__namespace.default.useState(() => ({
+  const [size, setSize] = React37__namespace.default.useState(() => ({
     width: canUseDOM2 ? window.innerWidth : 0,
     height: canUseDOM2 ? window.innerHeight : 0
   }));
-  React25__namespace.default.useEffect(() => {
+  React37__namespace.default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
     onResize();
@@ -11890,8 +12812,8 @@ function useWindowSize() {
   return size;
 }
 function useHover(ref) {
-  const [hovered, setHovered] = React25__namespace.default.useState(false);
-  React25__namespace.default.useEffect(() => {
+  const [hovered, setHovered] = React37__namespace.default.useState(false);
+  React37__namespace.default.useEffect(() => {
     const el = ref && ref.current;
     if (!el) return void 0;
     const on = () => setHovered(true);
@@ -11907,8 +12829,8 @@ function useHover(ref) {
 }
 function useIntersectionObserver(ref, options = {}) {
   const { root = null, rootMargin = "0px", threshold = 0 } = options;
-  const [entry, setEntry] = React25__namespace.default.useState(null);
-  React25__namespace.default.useEffect(() => {
+  const [entry, setEntry] = React37__namespace.default.useState(null);
+  React37__namespace.default.useEffect(() => {
     const el = ref && ref.current;
     if (!canUseDOM2 || !el || typeof IntersectionObserver === "undefined") return void 0;
     const obs = new IntersectionObserver(([e]) => setEntry(e), { root, rootMargin, threshold });
@@ -11918,7 +12840,7 @@ function useIntersectionObserver(ref, options = {}) {
   return entry;
 }
 function useId(prefix = "twc") {
-  const raw = React25__namespace.default.useId();
+  const raw = React37__namespace.default.useId();
   return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
 }
 var useFocusTrap2 = useFocusTrap;
@@ -11927,6 +12849,7 @@ var useScrollLock2 = useScrollLock;
 
 exports.Accordion = Accordion;
 exports.Alert = Alert;
+exports.Anchor = Anchor;
 exports.AppShell = AppShell;
 exports.Avatar = Avatar;
 exports.AvatarMenu = AvatarMenu;
@@ -11940,6 +12863,7 @@ exports.Chart = Chart;
 exports.Checkbox = Checkbox;
 exports.Code = Code;
 exports.ColorPicker = ColorPicker;
+exports.ColorSchemeScript = ColorSchemeScript;
 exports.Combobox = Combobox;
 exports.CommandPalette = CommandPalette;
 exports.Container = Container;
@@ -11954,17 +12878,23 @@ exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;
 exports.Field = Field;
 exports.FileUpload = FileUpload;
+exports.Form = Form;
 exports.Grid = Grid;
 exports.Heading = Heading;
 exports.IconButton = IconButton;
+exports.Image = Image;
 exports.Input = Input;
 exports.Kanban = Kanban;
+exports.Kbd = Kbd;
+exports.Label = Label;
 exports.List = List;
 exports.Menu = Menu;
 exports.MultiSelect = MultiSelect;
 exports.Navbar = Navbar;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
+exports.Portal = Portal;
+exports.Pre = Pre;
 exports.Progress = Progress;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
@@ -11983,12 +12913,17 @@ exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Text = Text;
 exports.Textarea = Textarea;
+exports.ThemeProvider = ThemeProvider;
 exports.Timeline = Timeline;
 exports.Toast = Toast;
 exports.ToastProvider = ToastProvider;
 exports.ToastViewport = ToastViewport;
 exports.Tooltip = Tooltip;
 exports.TreeView = TreeView;
+exports.TwicoProvider = TwicoProvider;
+exports.VisuallyHidden = VisuallyHidden;
+exports.createTheme = createTheme;
+exports.getColorSchemeScript = getColorSchemeScript;
 exports.runDatatableQuery = runDatatableQuery;
 exports.useClickOutside = useClickOutside;
 exports.useColorScheme = useColorScheme;