twico-ui 1.5.0 → 1.6.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React24 = require('react');
+var React25 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 
@@ -23,12 +23,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React24__namespace = /*#__PURE__*/_interopNamespace(React24);
+var React25__namespace = /*#__PURE__*/_interopNamespace(React25);
 
 // components/navigation/Accordion.jsx
-var SUPPORTS_STYLE_HOIST = parseInt(String(React24__namespace.version), 10) >= 19;
+var SUPPORTS_STYLE_HOIST = parseInt(String(React25__namespace.version), 10) >= 19;
 function useScopedStyles(id, css) {
-  React24__namespace.useInsertionEffect(() => {
+  React25__namespace.useInsertionEffect(() => {
     if (SUPPORTS_STYLE_HOIST) return;
     if (typeof document === "undefined" || document.getElementById(id)) return;
     const el = document.createElement("style");
@@ -36,7 +36,7 @@ function useScopedStyles(id, css) {
     el.textContent = css;
     document.head.appendChild(el);
   }, [id, css]);
-  return SUPPORTS_STYLE_HOIST ? React24__namespace.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
+  return SUPPORTS_STYLE_HOIST ? React25__namespace.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
 }
 var ACCORDION_CSS = `
 .twc-accordion { display: flex; flex-direction: column; font-family: var(--font-sans);
@@ -77,10 +77,10 @@ function Accordion({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-accordion-styles", ACCORDION_CSS);
-  const rootRef = React24__namespace.default.useRef(null);
-  const [internal, setInternal] = React24__namespace.default.useState(() => new Set(defaultOpen));
+  const rootRef = React25__namespace.default.useRef(null);
+  const [internal, setInternal] = React25__namespace.default.useState(() => new Set(defaultOpen));
   const open = openProp !== void 0 ? new Set(openProp) : internal;
-  const baseId = React24__namespace.default.useId();
+  const baseId = React25__namespace.default.useId();
   function toggle(val) {
     const item = items.find((x) => x.value === val);
     if (item?.disabled) return;
@@ -266,7 +266,7 @@ function Avatar({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-avatar-styles", AVATAR_CSS);
-  const [errored, setErrored] = React24__namespace.default.useState(false);
+  const [errored, setErrored] = React25__namespace.default.useState(false);
   const cleanSrc = safeSrc(src);
   const showImg = cleanSrc && !errored;
   const _statusLabel = status ? statusLabel ?? statusLabels?.[status] ?? STATUS_LABELS[status] : void 0;
@@ -291,7 +291,7 @@ function Avatar({
 var MENU_CSS = `
 .twc-menu-wrap { position: relative; display: inline-flex; }
 .twc-menu {
-  position: fixed; z-index: var(--z-dropdown); min-width: 200px;
+  position: fixed; z-index: var(--z-popover); min-width: 200px;
   padding: var(--space-1-5); background: var(--color-surface-raised);
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg); font-family: var(--font-sans);
@@ -344,23 +344,25 @@ function Menu({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-menu-styles", MENU_CSS);
-  const [openState, setOpenState] = React24__namespace.default.useState(defaultOpen);
-  const [render, setRender] = React24__namespace.default.useState(false);
-  const [pos, setPos] = React24__namespace.default.useState(null);
-  const [active, setActive] = React24__namespace.default.useState(-1);
-  const wrapRef = React24__namespace.default.useRef(null);
-  const menuRef = React24__namespace.default.useRef(null);
-  const menuId = React24__namespace.default.useId();
+  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 headerId = `${menuId}-header`;
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React24__namespace.default.useRef(open);
+  const openRef = React25__namespace.default.useRef(open);
   openRef.current = open;
-  const controlledRef = React24__namespace.default.useRef(controlled);
+  const controlledRef = React25__namespace.default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React24__namespace.default.useRef(onOpenChange);
+  const onOpenChangeRef = React25__namespace.default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React24__namespace.default.useCallback((next) => {
+  const setOpen = React25__namespace.default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -368,7 +370,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 = React24__namespace.default.useCallback(() => {
+  const place = React25__namespace.default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -383,7 +385,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]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -401,7 +403,7 @@ function Menu({
       document.removeEventListener("mousedown", onDown);
     };
   }, [open, place]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -418,7 +420,7 @@ function Menu({
       if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
         e.preventDefault();
         setOpen(true);
-        setActive(-1);
+        setActive(interactiveIdx[0] ?? -1);
       }
       return;
     }
@@ -439,6 +441,24 @@ function Menu({
       if (next < 0) next = list.length - 1;
       if (next >= list.length) next = 0;
       setActive(list[next]);
+    } else if (e.key === "PageDown" || e.key === "PageUp") {
+      e.preventDefault();
+      const list = interactiveIdx;
+      if (list.length) {
+        const curPos = Math.max(0, list.indexOf(active));
+        const next = Math.min(list.length - 1, Math.max(0, curPos + (e.key === "PageDown" ? 5 : -5)));
+        setActive(list[next]);
+      }
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      typeBufRef.current += e.key.toLowerCase();
+      clearTimeout(typeTimerRef.current);
+      typeTimerRef.current = setTimeout(() => {
+        typeBufRef.current = "";
+      }, 500);
+      const b = typeBufRef.current;
+      const labelOf = (i) => String(items[i]?.label ?? "").toLowerCase();
+      const hit = interactiveIdx.find((i) => labelOf(i).startsWith(b));
+      if (hit != null) setActive(hit);
     } else if (e.key === "Home" || e.key === "End") {
       e.preventDefault();
       const list = interactiveIdx;
@@ -466,12 +486,13 @@ function Menu({
       "data-align": align,
       "data-flip": pos.flip || void 0,
       role: "menu",
+      "aria-orientation": "vertical",
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby ?? (ariaLabel ? void 0 : header ? headerId : void 0),
       style: { top: pos.top, bottom: pos.bottom, left: pos.left, minWidth: pos.width, width: pos.width, maxHeight: pos.maxHeight },
       children: [
         __twcStyles,
-        header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-menu__header", id: headerId, children: header }) : null,
+        header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-menu__header", id: headerId, role: "presentation", children: header }) : null,
         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}`);
@@ -505,7 +526,7 @@ function Menu({
     }
   ) : null;
   const activeDescId = open && active >= 0 ? `${menuId}-item-${active}` : void 0;
-  const triggerEl = React24__namespace.default.isValidElement(trigger) ? React24__namespace.default.cloneElement(trigger, {
+  const triggerEl = React25__namespace.default.isValidElement(trigger) ? React25__namespace.default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -645,8 +666,9 @@ function Badge({
 }
 var BREADCRUMB_CSS = `
 .twc-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-family: var(--font-sans); font-size: var(--text-sm); }
-.twc-breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); text-decoration: none; padding: 3px 7px; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
-.twc-breadcrumb__item:hover:not([aria-current]) { color: var(--color-text); background: var(--color-surface-sunken); }
+.twc-breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); text-decoration: none; padding: 3px 7px; border: 0; background: transparent; font: inherit; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+a.twc-breadcrumb__item, button.twc-breadcrumb__item { cursor: pointer; }
+a.twc-breadcrumb__item:hover, button.twc-breadcrumb__item:hover { color: var(--color-text); background: var(--color-surface-sunken); }
 .twc-breadcrumb__item[aria-current="page"] { color: var(--color-text); font-weight: var(--font-semibold); cursor: default; }
 .twc-breadcrumb__item svg { width: 15px; height: 15px; flex: none; }
 .twc-breadcrumb__sep { display: inline-flex; align-items: center; color: var(--color-text-subtle); pointer-events: none; }
@@ -669,7 +691,7 @@ function Breadcrumb({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-breadcrumb-styles", BREADCRUMB_CSS);
-  const [expanded, setExpanded] = React24__namespace.default.useState(false);
+  const [expanded, setExpanded] = React25__namespace.default.useState(false);
   const sep = separator || /* @__PURE__ */ jsxRuntime.jsx(ChevronSep, {});
   let display = items;
   if (maxItems > 0 && items.length > maxItems && !expanded) {
@@ -682,7 +704,7 @@ function Breadcrumb({
     __twcStyles,
     display.map((it, i) => {
       const last = i === display.length - 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs(React24__namespace.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React25__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",
           {
@@ -694,17 +716,18 @@ function Breadcrumb({
               it.label
             ]
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(
-          "a",
-          {
-            className: "twc-breadcrumb__item",
-            href: safeHref2(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
-            ]
-          }
+        ) : safeHref2(it.href) ? /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "twc-breadcrumb__item", href: safeHref2(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: [
+          it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: it.icon }) : null,
+          it.label
+        ] }) : (
+          // #46: no href and no onClick → inert plain-text crumb (not a fake <a href="#">).
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-breadcrumb__item", children: [
+            it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: it.icon }) : null,
+            it.label
+          ] })
         ),
         !last ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-breadcrumb__sep", "aria-hidden": "true", children: sep }) : null
       ] }, i);
@@ -823,7 +846,7 @@ function Button({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-btn-styles", CSS2);
-  const [ripples, setRipples] = React24__namespace.default.useState([]);
+  const [ripples, setRipples] = React25__namespace.default.useState([]);
   const Tag2 = as;
   const inert = Tag2 === "a" && (disabled || loading);
   function handleClick(e) {
@@ -899,7 +922,9 @@ var CARD_CSS = `
 .twc-card[data-pad="md"] { padding: var(--space-5); }
 .twc-card[data-pad="lg"] { padding: var(--space-6); }
 .twc-card[data-pad="none"] { padding: 0; }
-.twc-card__header { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-3); }
+.twc-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
+.twc-card__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.twc-card__actions { flex: none; display: flex; align-items: center; gap: var(--space-2); }
 .twc-card__title { font-size: var(--text-lg); font-weight: var(--font-bold); letter-spacing: -0.01em; }
 .twc-card__subtitle { font-size: var(--text-sm); color: var(--color-text-muted); }
 .twc-card__body { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
@@ -909,6 +934,7 @@ function Card({
   children,
   title,
   subtitle,
+  actions,
   footer,
   variant = "elevated",
   padding = "md",
@@ -929,9 +955,12 @@ function Card({
       ...rest,
       children: [
         __twcStyles,
-        title || subtitle ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-card__header", children: [
-          title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-card__title", children: title }) : null,
-          subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-card__subtitle", children: subtitle }) : null
+        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,
+            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-card__subtitle", children: subtitle }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-card__actions", children: actions }) : null
         ] }) : null,
         children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-card__body", children }) : null,
         footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-card__footer", children: footer }) : null
@@ -991,14 +1020,14 @@ function Carousel({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-carousel-styles", CAROUSEL_CSS);
-  const slides = React24__namespace.default.Children.toArray(children);
+  const slides = React25__namespace.default.Children.toArray(children);
   const count = slides.length;
-  const [internal, setInternal] = React24__namespace.default.useState(defaultIndex);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultIndex);
   const index = indexProp !== void 0 ? indexProp : internal;
-  const [paused, setPaused] = React24__namespace.default.useState(false);
-  const [userPaused, setUserPaused] = React24__namespace.default.useState(false);
-  const [prefersReduced, setPrefersReduced] = React24__namespace.default.useState(false);
-  React24__namespace.default.useEffect(() => {
+  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(() => {
     if (typeof window === "undefined" || !window.matchMedia) return void 0;
     const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
     const on = () => setPrefersReduced(mql.matches);
@@ -1006,15 +1035,15 @@ function Carousel({
     mql.addEventListener("change", on);
     return () => mql.removeEventListener("change", on);
   }, []);
-  const setIndex = React24__namespace.default.useCallback((i) => {
+  const setIndex = React25__namespace.default.useCallback((i) => {
     if (indexProp === void 0) setInternal(i);
     onIndexChange?.(i);
   }, [indexProp, onIndexChange]);
-  const go = React24__namespace.default.useCallback((i) => {
+  const go = React25__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;
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!autoRotating) return void 0;
     const t = setInterval(() => {
       const next = loop ? (index + 1) % count : index + 1 >= count ? index : index + 1;
@@ -1109,7 +1138,7 @@ function Chart({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-chart-styles", CHART_CSS);
-  const uid = React24__namespace.default.useId();
+  const uid = React25__namespace.default.useId();
   const tableId = tableFallback ? `${uid}-table` : void 0;
   const keys = series || ["value"];
   const palette = colors && colors.length ? colors : SERIES_COLORS;
@@ -1201,6 +1230,15 @@ function shortNum(v) {
   if (v >= 1e3) return (v / 1e3).toFixed(v % 1e3 ? 1 : 0) + "k";
   return String(Math.round(v));
 }
+
+// components/_warn.js
+var seen = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV === "production") return;
+  if (seen.has(key)) return;
+  seen.add(key);
+  if (typeof console !== "undefined" && console.warn) console.warn(message);
+}
 function Checkbox({
   label,
   description,
@@ -1256,14 +1294,18 @@ 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 = React24__namespace.default.useId();
+  const autoId = React25__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
-  const ref = React24__namespace.default.useRef(null);
-  React24__namespace.default.useEffect(() => {
-    if (ref.current) ref.current.indeterminate = indeterminate;
-  }, [indeterminate]);
+  const ref = React25__namespace.default.useRef(null);
+  const mixed = indeterminate && !checked;
+  React25__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"]) {
+    warnOnce("Checkbox.no-name", "Checkbox: no accessible name \u2014 pass `label`, or `aria-label`/`aria-labelledby` for a label-less control (WCAG 4.1.2).");
+  }
   const describedBy = [rest["aria-describedby"], error ? errId : null].filter(Boolean).join(" ") || void 0;
   const control = /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `twc-check ${className}`, "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, htmlFor: fieldId, children: [
     __twcStyles,
@@ -1279,12 +1321,14 @@ function Checkbox({
         disabled,
         onChange,
         ...rest,
+        required: required || void 0,
         "aria-required": required || void 0,
+        "aria-checked": mixed ? "mixed" : void 0,
         "aria-invalid": invalid || void 0,
         "aria-describedby": describedBy
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-check__box", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "twc-check__svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-check__box", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "twc-check__svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: mixed ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
     label || description ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-check__text", children: [
       label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-check__label", children: label }) : null,
       description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-check__desc", children: description }) : null
@@ -1340,6 +1384,7 @@ var COLORPICKER_CSS = `
 .twc-cp__hex[data-tone="info"]    { --_accent: var(--color-info);    --_ring: 0 0 0 var(--ring-width) color-mix(in srgb, var(--color-info) 32%, transparent); }
 .twc-cp__hex[data-tone="neutral"] { --_accent: var(--color-border-strong); --_ring: 0 0 0 var(--ring-width) color-mix(in srgb, var(--color-text) 14%, transparent); }
 .twc-cp__hex:focus { border-color: var(--_accent); box-shadow: var(--_ring); }
+.twc-cp__hex[data-invalid="true"] { border-color: var(--color-danger); }
 .twc-cp__presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--space-3); }
 .twc-cp__preset { width: 22px; height: 22px; border-radius: var(--radius-sm); border: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); padding: 0;
   transition: transform var(--duration-fast) var(--ease-spring); }
@@ -1398,20 +1443,20 @@ function ColorPicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
   const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
-  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
   const hex = (value !== void 0 ? value : internal) || "#000000";
-  const lastValidRef = React24__namespace.default.useRef(hex);
+  const lastValidRef = React25__namespace.default.useRef(hex);
   if (/^#[0-9a-f]{6}$/i.test(hex)) lastValidRef.current = hex;
-  const [open, setOpen] = React24__namespace.default.useState(false);
-  const [hsv, setHsv] = React24__namespace.default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
-  const [coords, setCoords] = React24__namespace.default.useState(null);
-  const wrapRef = React24__namespace.default.useRef(null);
-  const triggerRef = React24__namespace.default.useRef(null);
-  const popRef = React24__namespace.default.useRef(null);
-  const areaRef = React24__namespace.default.useRef(null);
-  const hueRef = React24__namespace.default.useRef(null);
+  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 POP_W = 240;
-  const place = React24__namespace.default.useCallback(() => {
+  const place = React25__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1422,7 +1467,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 });
   }, []);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -1433,17 +1478,17 @@ function ColorPicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  const labelId = React24__namespace.default.useId();
+  const labelId = React25__namespace.default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
-  React24__namespace.default.useEffect(() => {
+  React25__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]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1460,8 +1505,8 @@ function ColorPicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React24__namespace.default.useRef(false);
-  React24__namespace.default.useEffect(() => {
+  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);
@@ -1615,6 +1660,8 @@ function ColorPicker({
                   value: hex,
                   maxLength: 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,
                   onChange: (e) => {
                     let v = e.target.value;
                     if (!v.startsWith("#")) v = "#" + v;
@@ -1725,6 +1772,9 @@ var COMBO_CSS = `
 .twc-opt__check { flex: none; color: var(--color-primary); display: inline-flex; }
 .twc-opt__check svg { width: 16px; height: 16px; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
+.twc-opt[data-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+.twc-pop__loading { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 12px; font-size: var(--text-sm); color: var(--color-text-muted); }
+.twc-pop__spinner { width: 15px; height: 15px; border-radius: var(--radius-full); border: 2px solid var(--color-border); border-top-color: var(--color-primary); animation: twico-spin 0.7s linear infinite; }
 `;
 function toOpt(o) {
   return typeof o === "string" ? { value: o, label: o } : o;
@@ -1774,6 +1824,11 @@ function Combobox({
   placement = "bottom",
   portal = true,
   minWidth = 0,
+  onInputChange,
+  filter,
+  loading = false,
+  emptyText = "No results found",
+  name,
   id,
   className = "",
   onFocus,
@@ -1781,29 +1836,38 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
-  const groups = React24__namespace.default.useMemo(() => normalizeGroups(options), [options]);
-  const flat = React24__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React24__namespace.default.useId();
+  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 fieldId = id || autoId;
-  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const selected = flat.find((o) => o.value === current);
-  const [open, setOpen] = React24__namespace.default.useState(false);
-  const [query, setQuery] = React24__namespace.default.useState("");
-  const [active, setActive] = React24__namespace.default.useState(0);
-  const [coords, setCoords] = React24__namespace.default.useState(null);
-  const wrapRef = React24__namespace.default.useRef(null);
-  const controlRef = React24__namespace.default.useRef(null);
-  const inputRef = React24__namespace.default.useRef(null);
-  const popRef = React24__namespace.default.useRef(null);
-  const listRef = React24__namespace.default.useRef(null);
-  const activeRef = React24__namespace.default.useRef(null);
-  const fGroups = React24__namespace.default.useMemo(
-    () => groups.map((g) => ({ group: g.group, options: g.options.filter((o) => matches(o, query.trim())) })).filter((g) => g.options.length),
-    [groups, query]
-  );
-  const visible = React24__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
-  const place = React24__namespace.default.useCallback(() => {
+  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 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 nextEnabled = (from, dir) => {
+    let i = from + dir;
+    while (i >= 0 && i < visible.length) {
+      if (!visible[i]?.disabled) return i;
+      i += dir;
+    }
+    return from;
+  };
+  const place = React25__namespace.default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1818,7 +1882,7 @@ function Combobox({
       flip
     });
   }, [placement, minWidth]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -1829,7 +1893,7 @@ function Combobox({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1839,10 +1903,15 @@ function Combobox({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React24__namespace.default.useEffect(() => {
+  React25__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]);
   function openMenu() {
@@ -1855,6 +1924,8 @@ function Combobox({
     setQuery("");
   }
   function commit(v) {
+    const o = flat.find((x) => x.value === v);
+    if (o && o.disabled) return;
     if (value === void 0) setInternal(v);
     onChange?.(v);
     close();
@@ -1866,17 +1937,20 @@ function Combobox({
         openMenu();
         return;
       }
-      setActive((a) => Math.min(a + 1, visible.length - 1));
+      setActive((a) => nextEnabled(a, 1));
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      setActive((a) => Math.max(a - 1, 0));
+      setActive((a) => nextEnabled(a, -1));
     } else if (e.key === "Enter") {
       e.preventDefault();
       if (open && visible[active]) commit(visible[active].value);
     } else if (e.key === "Escape") {
       close();
       inputRef.current?.blur();
-    } else if (e.key === "Backspace" && !query && selected) ;
+    } else if (e.key === "Backspace" && !query && selected) {
+      e.preventDefault();
+      commit(null);
+    }
   }
   const displayValue = open ? query : selected ? selected.label : "";
   const listboxId = `${fieldId}-listbox`;
@@ -1885,7 +1959,10 @@ function Combobox({
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
   let counter = -1;
-  const popInner = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, children: visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: "No results found" }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React24__namespace.default.Fragment, { children: [
+  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: [
+    /* @__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;
@@ -1900,9 +1977,14 @@ function Combobox({
           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: () => setActive(idx),
+          onMouseEnter: () => {
+            if (!o.disabled) setActive(idx);
+          },
           onMouseDown: (e) => e.preventDefault(),
           onClick: () => commit(o.value),
           children: [
@@ -1930,7 +2012,7 @@ function Combobox({
             id: listboxId,
             role: "listbox",
             ref: popRef,
-            "data-placement": coords.flip ? "top" : void 0,
+            "data-placement": coords.flip ? "top" : "bottom",
             style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-tooltip)" },
             children: popInner
           }
@@ -1943,6 +2025,7 @@ function Combobox({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
     __twcStyles,
+    name ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: current ?? "" }) : null,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -1988,6 +2071,7 @@ function Combobox({
                 onChange: (e) => {
                   setQuery(e.target.value);
                   setOpen(true);
+                  onInputChange?.(e.target.value);
                 },
                 onKeyDown: (e) => {
                   onKeyDown?.(e);
@@ -2024,9 +2108,10 @@ function Combobox({
   ] });
 }
 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 } = {}) {
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!active || !canUseDOM) return void 0;
     const node = ref.current;
     if (!node) return void 0;
@@ -2037,7 +2122,7 @@ function useFocusTrap(ref, active = true, { restoreFocus = true } = {}) {
       if (restoreFocus && prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
     };
   }, [active]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!active || !canUseDOM) return void 0;
     const node = ref.current;
     const onKey = (e) => {
@@ -2064,11 +2149,53 @@ function useFocusTrap(ref, active = true, { restoreFocus = true } = {}) {
   }, [active]);
 }
 function usePortal() {
-  return React24__namespace.default.useCallback((node) => {
+  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; }
@@ -2110,19 +2237,20 @@ function CommandPalette({
   commands,
   placeholder = "Type a command or search\u2026",
   emptyText = "No results found",
+  searchLabel = "Command palette search",
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-cmdk-styles", COMMAND_CSS);
   const renderPortal = usePortal();
-  const [query, setQuery] = React24__namespace.default.useState("");
-  const [active, setActive] = React24__namespace.default.useState(0);
-  const inputRef = React24__namespace.default.useRef(null);
-  const listRef = React24__namespace.default.useRef(null);
-  const paletteRef = React24__namespace.default.useRef(null);
-  const baseId = React24__namespace.default.useId();
-  const [mounted, setMounted] = React24__namespace.default.useState(open);
-  React24__namespace.default.useEffect(() => {
+  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(() => {
     if (open) {
       setMounted(true);
       return;
@@ -2130,22 +2258,15 @@ function CommandPalette({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React24__namespace.default.useEffect(() => {
-    if (!open) return void 0;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [open]);
-  React24__namespace.default.useEffect(() => {
+  useScrollLock(open);
+  React25__namespace.default.useEffect(() => {
     if (open) {
       setQuery("");
       setActive(0);
     }
   }, [open]);
   useFocusTrap(paletteRef, open && mounted);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -2157,7 +2278,7 @@ function CommandPalette({
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   const q = query.trim().toLowerCase();
-  const filtered = React24__namespace.default.useMemo(() => commands.filter(
+  const filtered = React25__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 = [];
@@ -2172,7 +2293,7 @@ function CommandPalette({
     g.items.push(c);
     flat.push(c);
   });
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
   const run = (cmd) => {
@@ -2192,7 +2313,7 @@ function CommandPalette({
       if (cmd) run(cmd);
     }
   }
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     const node = listRef.current?.querySelector('[data-active="true"]');
     if (node) node.scrollIntoView({ block: "nearest" });
   }, [active]);
@@ -2220,7 +2341,8 @@ function CommandPalette({
             value: query,
             placeholder,
             role: "combobox",
-            "aria-expanded": "true",
+            "aria-label": searchLabel,
+            "aria-expanded": flat.length > 0 ? "true" : "false",
             "aria-controls": listId,
             "aria-activedescendant": activeId,
             onChange: (e) => setQuery(e.target.value),
@@ -2322,7 +2444,9 @@ var CUR_CSS = `
 .twc-cur:focus-within { border-color: var(--_accent); box-shadow: var(--_ring); }
 .twc-cur[data-invalid="true"] { border-color: var(--color-danger); }
 .twc-cur[data-invalid="true"]:focus-within { box-shadow: 0 0 0 var(--ring-width) color-mix(in srgb, var(--color-danger) 28%, transparent); }
-.twc-cur[data-disabled="true"] { background: var(--color-surface-sunken); opacity: 0.7; }
+.twc-cur[data-disabled="true"] { background: var(--color-surface-sunken); opacity: 0.7; cursor: not-allowed; }
+.twc-cur[data-readonly="true"] { background: var(--color-surface-sunken); }
+.twc-cur__el:disabled { cursor: not-allowed; }
 .twc-cur__sym, .twc-cur__code {
   display: inline-flex; align-items: center; padding: 0 var(--space-3);
   background: var(--color-surface-sunken); color: var(--color-text-muted);
@@ -2365,18 +2489,29 @@ 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 = React24__namespace.default.useId();
+  const autoId = React25__namespace.default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const controlled = value !== void 0;
-  const [internal, setInternal] = React24__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [internal, setInternal] = React25__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = controlled ? clampPrecision(String(value ?? ""), prec) : internal;
-  const describedBy = [error ? `${fieldId}-error` : hint ? `${fieldId}-hint` : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+  React25__namespace.default.useEffect(() => {
+    if (!controlled) return;
+    const raw = String(value ?? "");
+    if (shown !== raw) {
+      const n = Number(shown);
+      onValueChange?.(shown === "" || Number.isNaN(n) ? null : n, shown);
+    }
+  }, [controlled, shown, value]);
+  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;
   function handleChange(e) {
     const next = clampPrecision(e.target.value, prec);
     if (!controlled) setInternal(next);
     onChange?.(e);
-    onValueChange?.(next === "" ? null : Number(next), next);
+    const n = Number(next);
+    onValueChange?.(next === "" || Number.isNaN(n) ? null : n, next);
   }
   function handleBlur(e) {
     rest.onBlur?.(e);
@@ -2393,7 +2528,7 @@ function Currency({
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-cur", "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-cur", "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, "data-readonly": rest.readOnly || void 0, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-cur__sym", "aria-hidden": "true", children: sym }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -2406,16 +2541,16 @@ function Currency({
           placeholder,
           disabled,
           required: required || void 0,
-          "aria-invalid": invalid || void 0,
           ...rest,
           onChange: handleChange,
           onBlur: handleBlur,
+          "aria-invalid": ariaInvalid,
           "aria-describedby": describedBy
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-cur__code", children: cur })
     ] }),
-    error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: `${fieldId}-error`, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: `${fieldId}-hint`, className: "twc-field__hint", children: hint }) : null
+    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 SELECT_CSS = `
@@ -2490,6 +2625,13 @@ var SELECT_CSS = `
 .twc-opt__check { flex: none; color: var(--color-primary); display: inline-flex; }
 .twc-opt__check svg { width: 16px; height: 16px; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
+.twc-opt[data-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+.twc-pop__loading { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 12px; font-size: var(--text-sm); color: var(--color-text-muted); }
+.twc-pop__spinner { width: 15px; height: 15px; border-radius: var(--radius-full); border: 2px solid var(--color-border); border-top-color: var(--color-primary); animation: twico-spin 0.7s linear infinite; }
+.twc-pop__search-clear { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-full); }
+.twc-pop__search-clear:hover { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-pop__search-clear svg { width: 13px; height: 13px; }
+.twc-sel__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 `;
 function toOpt2(o) {
   return typeof o === "string" ? { value: o, label: o } : o;
@@ -2536,6 +2678,10 @@ function Select({
   placement = "bottom",
   portal = true,
   minWidth = 0,
+  matchTriggerWidth = true,
+  loading = false,
+  emptyText = "No results found",
+  name,
   id,
   className = "",
   onClick,
@@ -2543,47 +2689,58 @@ function Select({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
-  const groups = React24__namespace.default.useMemo(() => normalizeGroups2(options), [options]);
-  const flat = React24__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React24__namespace.default.useId();
+  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 fieldId = id || autoId;
-  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
-  const [open, setOpen] = React24__namespace.default.useState(false);
-  const [render, setRender] = React24__namespace.default.useState(false);
-  const [active, setActive] = React24__namespace.default.useState(0);
-  const [coords, setCoords] = React24__namespace.default.useState(null);
-  const [query, setQuery] = React24__namespace.default.useState("");
-  const wrapRef = React24__namespace.default.useRef(null);
-  const triggerRef = React24__namespace.default.useRef(null);
-  const popRef = React24__namespace.default.useRef(null);
-  const listRef = React24__namespace.default.useRef(null);
-  const activeRef = React24__namespace.default.useRef(null);
-  const searchRef = React24__namespace.default.useRef(null);
+  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 showSearch = searchable === void 0 ? flat.length > 5 : searchable;
-  const fGroups = React24__namespace.default.useMemo(() => {
+  const fGroups = React25__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 = React24__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React25__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
   const selected = flat.find((o) => o.value === current);
-  const place = React24__namespace.default.useCallback(() => {
+  const nextEnabled = (from, dir) => {
+    let i = from + dir;
+    while (i >= 0 && i < visible.length) {
+      if (!visible[i]?.disabled) return i;
+      i += dir;
+    }
+    return from;
+  };
+  const place = React25__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
     const vh = window.innerHeight;
     const below = vh - r.bottom;
     const flip = placement === "top" || below < 260 && r.top > below;
+    const widthStyle = matchTriggerWidth ? { width: Math.max(r.width, minWidth) } : { width: "auto", minWidth: Math.max(r.width, minWidth), maxWidth: Math.max(160, window.innerWidth - r.left - 8) };
     setCoords({
       left: r.left,
-      width: Math.max(r.width, minWidth),
+      ...widthStyle,
       top: flip ? void 0 : Math.round(r.bottom + 6),
       bottom: flip ? Math.round(vh - r.top + 6) : void 0,
       flip
     });
-  }, [placement, minWidth]);
-  React24__namespace.default.useEffect(() => {
+  }, [placement, minWidth, matchTriggerWidth]);
+  React25__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -2594,7 +2751,7 @@ function Select({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
@@ -2610,13 +2767,13 @@ function Select({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (open) ensureVisible2(listRef.current, activeRef.current);
   }, [active, open]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -2624,8 +2781,8 @@ function Select({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  const prevOpen = React24__namespace.default.useRef(false);
-  React24__namespace.default.useEffect(() => {
+  const prevOpen = React25__namespace.default.useRef(false);
+  React25__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();
@@ -2633,6 +2790,8 @@ function Select({
     prevOpen.current = open;
   }, [open]);
   function commit(v) {
+    const o = flat.find((x) => x.value === v);
+    if (o && o.disabled) return;
     if (value === void 0) setInternal(v);
     onChange?.(v);
     setOpen(false);
@@ -2653,6 +2812,18 @@ function Select({
       setOpen(true);
       return;
     }
+    if (!open && !showSearch && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      e.preventDefault();
+      bufferRef.current += e.key.toLowerCase();
+      clearTimeout(bufferTimerRef.current);
+      bufferTimerRef.current = setTimeout(() => {
+        bufferRef.current = "";
+      }, 500);
+      const b = bufferRef.current;
+      const match = flat.find((o) => !o.disabled && o.label.toLowerCase().startsWith(b)) || flat.find((o) => !o.disabled && o.label.toLowerCase().includes(b));
+      if (match) commit(match.value);
+      return;
+    }
     if (!open) return;
     if (e.key === "Tab") {
       setOpen(false);
@@ -2661,10 +2832,10 @@ function Select({
     if (e.key === "Escape") setOpen(false);
     else if (e.key === "ArrowDown") {
       e.preventDefault();
-      setActive((a) => Math.min(a + 1, visible.length - 1));
+      setActive((a) => nextEnabled(a, 1));
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      setActive((a) => Math.max(a - 1, 0));
+      setActive((a) => nextEnabled(a, -1));
     } else if (e.key === "Enter") {
       e.preventDefault();
       if (visible[active]) commit(visible[active].value);
@@ -2696,9 +2867,16 @@ function Select({
           "aria-controls": listboxId,
           "aria-activedescendant": activeId
         }
-      )
+      ),
+      query ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-pop__search-clear", "aria-label": "Clear search", onClick: () => {
+        setQuery("");
+        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: visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: "No results found" }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React24__namespace.default.Fragment, { children: [
+    /* @__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("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;
@@ -2713,9 +2891,14 @@ function Select({
             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: () => setActive(idx),
+            onMouseEnter: () => {
+              if (!o.disabled) setActive(idx);
+            },
             onClick: () => commit(o.value),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
@@ -2728,7 +2911,8 @@ function Select({
           o.value
         );
       })
-    ] }, gi)) })
+    ] }, 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"}` })
   ] });
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
   const canPortal = portal && RD && RD.createPortal;
@@ -2745,19 +2929,20 @@ function Select({
             role: "listbox",
             ref: popRef,
             "data-state": popState,
-            "data-placement": coords.flip ? "top" : void 0,
-            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-tooltip)" },
+            "data-placement": coords.flip ? "top" : "bottom",
+            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, minWidth: coords.minWidth, maxWidth: coords.maxWidth, right: "auto", zIndex: "var(--z-tooltip)" },
             children: popInner
           }
         ),
         document.body
       );
     } else if (!portal) {
-      popEl = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop", id: listboxId, role: "listbox", ref: popRef, "data-state": popState, "data-placement": placement === "top" ? "top" : void 0, children: popInner });
+      popEl = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop", id: listboxId, role: "listbox", ref: popRef, "data-state": popState, "data-placement": placement === "top" ? "top" : "bottom", children: popInner });
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
     __twcStyles,
+    name ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: current ?? "" }) : null,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -2828,7 +3013,9 @@ var CURF_CSS = `
 .twc-cur:focus-within { border-color: var(--_accent); box-shadow: var(--_ring); }
 .twc-cur[data-invalid="true"] { border-color: var(--color-danger); }
 .twc-cur[data-invalid="true"]:focus-within { box-shadow: 0 0 0 var(--ring-width) color-mix(in srgb, var(--color-danger) 28%, transparent); }
-.twc-cur[data-disabled="true"] { background: var(--color-surface-sunken); opacity: 0.7; }
+.twc-cur[data-disabled="true"] { background: var(--color-surface-sunken); opacity: 0.7; cursor: not-allowed; }
+.twc-cur[data-readonly="true"] { background: var(--color-surface-sunken); }
+.twc-cur__el:disabled { cursor: not-allowed; }
 .twc-cur__sym, .twc-cur__code {
   display: inline-flex; align-items: center; padding: 0 var(--space-3);
   background: var(--color-surface-sunken); color: var(--color-text-muted);
@@ -2872,19 +3059,37 @@ function CurrencyField({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
-  const autoId = React24__namespace.default.useId();
+  const autoId = React25__namespace.default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const curControlled = currency !== void 0;
-  const [curInternal, setCurInternal] = React24__namespace.default.useState(defaultCurrency);
+  const [curInternal, setCurInternal] = React25__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] = React24__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [valInternal, setValInternal] = React25__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = valControlled ? clampPrecision(String(value ?? ""), prec) : valInternal;
-  const describedBy = [error ? `${fieldId}-error` : hint ? `${fieldId}-hint` : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
-  const options = React24__namespace.default.useMemo(() => {
+  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(() => {
+    if (!valControlled) {
+      const clamped = clampPrecision(valInternal, prec);
+      if (clamped !== valInternal) {
+        setValInternal(clamped);
+        const n = Number(clamped);
+        onValueChange?.(clamped === "" || Number.isNaN(n) ? null : n, clamped, cur);
+      }
+    } else {
+      const raw = String(value ?? "");
+      if (shown !== raw) {
+        const n = Number(shown);
+        onValueChange?.(shown === "" || Number.isNaN(n) ? null : n, shown, cur);
+      }
+    }
+  }, [prec, cur, shown, value, valControlled, valInternal]);
+  const options = React25__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]);
@@ -2893,13 +3098,15 @@ function CurrencyField({
     onCurrencyChange?.(next);
     const reclamped = clampPrecision(shown, (CURRENCIES[next] || CURRENCIES.USD).precision);
     if (!valControlled) setValInternal(reclamped);
-    onValueChange?.(reclamped === "" ? null : Number(reclamped), reclamped, next);
+    const rn = Number(reclamped);
+    onValueChange?.(reclamped === "" || Number.isNaN(rn) ? null : rn, reclamped, next);
   }
   function handleChange(e) {
     onChange?.(e);
     const next = clampPrecision(e.target.value, prec);
     if (!valControlled) setValInternal(next);
-    onValueChange?.(next === "" ? null : Number(next), next, cur);
+    const n = Number(next);
+    onValueChange?.(next === "" || Number.isNaN(n) ? null : n, next, cur);
   }
   function handleBlur(e) {
     rest.onBlur?.(e);
@@ -2910,13 +3117,14 @@ function CurrencyField({
     if (!valControlled) setValInternal(fixed);
     onValueChange?.(Number(fixed), fixed, cur);
   }
+  const curLabel = typeof label === "string" && label ? `${label} currency` : "Currency";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-cur", "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-cur", "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, "data-readonly": rest.readOnly || void 0, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-curf__pick", children: /* @__PURE__ */ jsxRuntime.jsx(
         Select,
         {
@@ -2927,7 +3135,7 @@ function CurrencyField({
           searchable: true,
           portal: true,
           minWidth: 260,
-          "aria-label": "Currency",
+          "aria-label": curLabel,
           onChange: setCurrency
         }
       ) }),
@@ -2943,16 +3151,16 @@ function CurrencyField({
           placeholder,
           disabled,
           required: required || void 0,
-          "aria-invalid": invalid || void 0,
           ...rest,
           onChange: handleChange,
           onBlur: handleBlur,
+          "aria-invalid": ariaInvalid,
           "aria-describedby": describedBy
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-cur__code", children: meta.code })
     ] }),
-    error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: `${fieldId}-error`, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: `${fieldId}-hint`, className: "twc-field__hint", children: hint }) : null
+    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 FIELD_CSS2 = `
@@ -2988,6 +3196,7 @@ var FIELD_CSS2 = `
 .twc-input[data-invalid="true"] { border-color: var(--color-danger); }
 .twc-input[data-invalid="true"]:focus-within { box-shadow: 0 0 0 var(--ring-width) color-mix(in srgb, var(--color-danger) 28%, transparent); }
 .twc-input[data-disabled] { background: var(--color-surface-sunken); opacity: 0.7; cursor: not-allowed; }
+.twc-input[data-readonly] { background: var(--color-surface-sunken); }
 .twc-input__el {
   flex: 1; min-width: 0; border: none; outline: none; background: transparent;
   font-family: inherit; font-size: var(--text-sm); color: var(--color-text); height: 100%;
@@ -3003,6 +3212,17 @@ var FIELD_CSS2 = `
 .twc-input__reveal:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-input__reveal svg { width: 17px; height: 17px; }
 `;
+var INPUT_EXTRA_CSS = `
+.twc-input { overflow: hidden; }
+.twc-input__addon { align-self: stretch; display: inline-flex; align-items: center; padding-inline: var(--space-3);
+  background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-sm);
+  font-weight: var(--font-semibold); white-space: nowrap; flex: none; }
+.twc-input__addon--start { border-inline-end: var(--border-thin) solid var(--color-border); margin-inline-start: calc(-1 * var(--space-3)); }
+.twc-input__addon--end { border-inline-start: var(--border-thin) solid var(--color-border); margin-inline-end: calc(-1 * var(--space-3)); }
+.twc-field__footer { display: flex; align-items: center; gap: var(--space-2); }
+.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); }
+`;
 function Input({
   label,
   hint,
@@ -3012,6 +3232,9 @@ function Input({
   tone = "primary",
   leftIcon,
   rightIcon,
+  leftAddon,
+  rightAddon,
+  showCount = false,
   type = "text",
   disabled = false,
   id,
@@ -3019,12 +3242,26 @@ function Input({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
-  const autoId = React24__namespace.default.useId();
+  const __twcExtra = useScopedStyles("twc-input-extra-styles", INPUT_EXTRA_CSS);
+  const autoId = React25__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 count = countControlled ? String(rest.value ?? "").length : len2;
+  const max = rest.maxLength;
+  const showCounter = showCount && max != null;
+  const near = showCounter && count >= Math.floor(max * 0.9);
+  const handleChange = (e) => {
+    rest.onChange?.(e);
+    if (showCount && !countControlled) setLen(e.target.value.length);
+  };
+  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] = React24__namespace.default.useState(false);
+  const [revealed, setRevealed] = React25__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",
@@ -3049,11 +3286,13 @@ function Input({
   ) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, children: [
     __twcStyles,
+    __twcExtra,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-input", "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-input", "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, "data-readonly": rest.readOnly || void 0, children: [
+      leftAddon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-input__addon twc-input__addon--start", children: leftAddon }) : null,
       leftIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-input__affix", children: leftIcon }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -3064,14 +3303,23 @@ function Input({
           disabled,
           required: required || void 0,
           "aria-required": required || void 0,
-          "aria-invalid": invalid || void 0,
-          "aria-describedby": error || hint ? descId : void 0,
-          ...rest
+          ...rest,
+          onChange: handleChange,
+          "aria-invalid": ariaInvalid,
+          "aria-describedby": describedBy
         }
       ),
-      suffix
+      suffix,
+      rightAddon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-input__addon twc-input__addon--end", children: rightAddon }) : null
     ] }),
-    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
+    error || hint || showCounter ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-field__footer", children: [
+      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,
+      showCounter ? /* @__PURE__ */ jsxRuntime.jsxs("span", { id: countId, className: "twc-field__count", "data-danger": near || void 0, "aria-live": "polite", children: [
+        count,
+        " / ",
+        max
+      ] }) : null
+    ] }) : null
   ] });
 }
 var MULTI_CSS = `
@@ -3149,6 +3397,10 @@ var MULTI_CSS = `
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
+.twc-opt[data-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+.twc-pop__loading { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 12px; font-size: var(--text-sm); color: var(--color-text-muted); }
+.twc-pop__spinner { width: 15px; height: 15px; border-radius: var(--radius-full); border: 2px solid var(--color-border); border-top-color: var(--color-primary); animation: twico-spin 0.7s linear infinite; }
+.twc-ms__more { flex: none; align-self: center; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-muted); background: var(--color-surface-sunken); border-radius: var(--radius-sm); padding: 2px 7px; }
 `;
 function toOpt3(o) {
   return typeof o === "string" ? { value: o, label: o } : o;
@@ -3198,6 +3450,11 @@ function MultiSelect({
   placement = "bottom",
   portal = true,
   minWidth = 0,
+  loading = false,
+  emptyText = "No results found",
+  name,
+  max,
+  maxTagCount,
   id,
   className = "",
   onFocus,
@@ -3205,28 +3462,38 @@ function MultiSelect({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
-  const groups = React24__namespace.default.useMemo(() => normalizeGroups3(options), [options]);
-  const flat = React24__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React24__namespace.default.useId();
+  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 fieldId = id || autoId;
-  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React24__namespace.default.useState(false);
-  const [query, setQuery] = React24__namespace.default.useState("");
-  const [active, setActive] = React24__namespace.default.useState(0);
-  const [coords, setCoords] = React24__namespace.default.useState(null);
-  const wrapRef = React24__namespace.default.useRef(null);
-  const controlRef = React24__namespace.default.useRef(null);
-  const inputRef = React24__namespace.default.useRef(null);
-  const popRef = React24__namespace.default.useRef(null);
-  const listRef = React24__namespace.default.useRef(null);
-  const activeRef = React24__namespace.default.useRef(null);
-  const fGroups = React24__namespace.default.useMemo(
+  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(
     () => groups.map((g) => ({ group: g.group, options: g.options.filter((o) => matches2(o, query.trim())) })).filter((g) => g.options.length),
     [groups, query]
   );
-  const visible = React24__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
-  const place = React24__namespace.default.useCallback(() => {
+  const visible = React25__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  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) => {
+    let i = from + dir;
+    while (i >= 0 && i < visible.length) {
+      if (!isOptDisabled(visible[i])) return i;
+      i += dir;
+    }
+    return from;
+  };
+  const place = React25__namespace.default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -3241,7 +3508,7 @@ function MultiSelect({
       flip
     });
   }, [placement, minWidth]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -3252,7 +3519,7 @@ function MultiSelect({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -3263,10 +3530,10 @@ function MultiSelect({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (open) ensureVisible3(listRef.current, activeRef.current);
   }, [active, open]);
   function commit(next) {
@@ -3274,7 +3541,10 @@ function MultiSelect({
     onChange?.(next);
   }
   function toggle(v) {
-    commit(selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v]);
+    const o = flat.find((x) => x.value === v);
+    const isSel = selected.includes(v);
+    if (!isSel && o && isOptDisabled(o)) return;
+    commit(isSel ? selected.filter((x) => x !== v) : [...selected, v]);
     setQuery("");
     inputRef.current?.focus();
   }
@@ -3282,10 +3552,10 @@ function MultiSelect({
     if (e.key === "ArrowDown") {
       e.preventDefault();
       if (!open) setOpen(true);
-      else setActive((a) => Math.min(a + 1, visible.length - 1));
+      else setActive((a) => nextEnabled(a, 1));
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      setActive((a) => Math.max(a - 1, 0));
+      setActive((a) => nextEnabled(a, -1));
     } else if (e.key === "Enter") {
       e.preventDefault();
       if (open && visible[active]) toggle(visible[active].value);
@@ -3303,12 +3573,16 @@ function MultiSelect({
   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: visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: "No results found" }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React24__namespace.default.Fragment, { children: [
+  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",
         {
@@ -3318,9 +3592,14 @@ function MultiSelect({
           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: () => setActive(idx),
+          onMouseEnter: () => {
+            if (!optDisabled) setActive(idx);
+          },
           onMouseDown: (e) => e.preventDefault(),
           onClick: () => toggle(o.value),
           children: [
@@ -3346,7 +3625,7 @@ function MultiSelect({
           {
             className: "twc-pop twc-pop--portal",
             ref: popRef,
-            "data-placement": coords.flip ? "top" : void 0,
+            "data-placement": coords.flip ? "top" : "bottom",
             style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-tooltip)" },
             children: popInner
           }
@@ -3359,6 +3638,7 @@ function MultiSelect({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
     __twcStyles,
+    name ? selected.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: v }, i)) : null,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -3381,13 +3661,18 @@ function MultiSelect({
             }
           },
           children: [
-            selectedOpts.map((o) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-ms__chip", children: [
+            (maxTagCount != null ? selectedOpts.slice(0, maxTagCount) : selectedOpts).map((o) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-ms__chip", children: [
               o.label,
-              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-ms__chip-x", "aria-label": `Remove ${o.label}`, onClick: (e) => {
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", tabIndex: -1, className: "twc-ms__chip-x", "aria-label": `Remove ${o.label}`, onClick: (e) => {
                 e.stopPropagation();
                 toggle(o.value);
               }, 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: "M18 6 6 18M6 6l12 12" }) }) })
             ] }, o.value)),
+            maxTagCount != null && selectedOpts.length > maxTagCount ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-ms__more", title: selectedOpts.slice(maxTagCount).map((o) => o.label).join(", "), children: [
+              "+",
+              selectedOpts.length - maxTagCount,
+              " more"
+            ] }) : null,
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -3419,7 +3704,7 @@ function MultiSelect({
                 ...rest
               }
             ),
-            clearable && selected.length > 0 && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-ms__clear", "aria-label": "Clear all", onClick: (e) => {
+            clearable && selected.length > 0 && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", tabIndex: -1, className: "twc-ms__clear", "aria-label": "Clear all", onClick: (e) => {
               e.stopPropagation();
               commit([]);
               setQuery("");
@@ -3447,15 +3732,6 @@ function MultiSelect({
     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
   ] });
 }
-
-// components/_warn.js
-var seen = /* @__PURE__ */ new Set();
-function warnOnce(key, message) {
-  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV === "production") return;
-  if (seen.has(key)) return;
-  seen.add(key);
-  if (typeof console !== "undefined" && console.warn) console.warn(message);
-}
 var PAGINATION_CSS = `
 .twc-pagination { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); }
 .twc-page {
@@ -3521,6 +3797,7 @@ function Pagination({
   showJumper,
   showPageJumper,
   jumperLabel = "Go to",
+  getPageLabel,
   className = "",
   ...rest
 }) {
@@ -3529,7 +3806,7 @@ function Pagination({
   }
   const jumperEnabled = showPageJumper ?? showJumper;
   const __twcStyles = useScopedStyles("twc-pagination-styles", PAGINATION_CSS);
-  const [internal, setInternal] = React24__namespace.default.useState(defaultPage);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultPage);
   const page = pageProp !== void 0 ? pageProp : internal;
   const pages = buildPages(page, total, siblings, boundaries);
   const go = (p) => {
@@ -3537,7 +3814,7 @@ function Pagination({
     if (pageProp === void 0) setInternal(p);
     onChange?.(p);
   };
-  const [jump, setJump] = React24__namespace.default.useState("");
+  const [jump, setJump] = React25__namespace.default.useState("");
   const submitJump = () => {
     const n = parseInt(jump, 10);
     if (!Number.isNaN(n)) go(Math.min(Math.max(n, 1), total));
@@ -3554,6 +3831,7 @@ function Pagination({
           className: "twc-page",
           "data-size": size,
           "data-active": p === page || void 0,
+          "aria-label": getPageLabel ? getPageLabel(p) : `Page ${p}`,
           "aria-current": p === page ? "page" : void 0,
           onClick: () => go(p),
           children: p
@@ -3586,6 +3864,154 @@ function Pagination({
     ] }) : null
   ] });
 }
+var TOOLTIP_CSS = `
+.twc-tooltip-wrap { display: inline-flex; }
+.twc-tooltip {
+  position: fixed; z-index: var(--z-tooltip);
+  padding: 6px 10px; border-radius: var(--radius-md);
+  background: var(--color-text); color: var(--color-surface);
+  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
+  line-height: 1.3; white-space: normal; max-width: var(--_tw-maxw, 260px); box-shadow: var(--shadow-md);
+  opacity: 0; transform: scale(0.9); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
+}
+.twc-tooltip[data-show="true"] { pointer-events: auto; }
+.twc-tooltip[data-show="true"] { opacity: 1; transform: scale(1); }
+.twc-tooltip[data-place="top"]    { transform-origin: bottom center; translate: -50% 0; }
+.twc-tooltip[data-place="bottom"] { transform-origin: top center; translate: -50% 0; }
+.twc-tooltip[data-place="left"]   { transform-origin: right center; translate: 0 -50%; }
+.twc-tooltip[data-place="right"]  { transform-origin: left center; translate: 0 -50%; }
+.twc-tooltip[data-show="true"][data-place="top"], .twc-tooltip[data-show="true"][data-place="bottom"] { transform: scale(1); }
+.twc-tooltip__arrow { position: absolute; width: 7px; height: 7px; background: var(--color-text); transform: rotate(45deg); }
+.twc-tooltip[data-place="top"] .twc-tooltip__arrow    { bottom: -3px; left: 50%; margin-left: -3.5px; }
+.twc-tooltip[data-place="bottom"] .twc-tooltip__arrow { top: -3px; left: 50%; margin-left: -3.5px; }
+.twc-tooltip[data-place="left"] .twc-tooltip__arrow   { right: -3px; top: 50%; margin-top: -3.5px; }
+.twc-tooltip[data-place="right"] .twc-tooltip__arrow  { left: -3px; top: 50%; margin-top: -3.5px; }
+@media (prefers-reduced-motion: reduce) { .twc-tooltip { transition: opacity var(--duration-fast) linear; transform: none; } }
+`;
+function Tooltip({
+  children,
+  label,
+  placement = "top",
+  delay = 120,
+  className = "",
+  ...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 open = () => {
+    clearTimeout(closeTimer.current);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setShow(true), delay);
+  };
+  const close = () => {
+    clearTimeout(timer.current);
+    clearTimeout(closeTimer.current);
+    closeTimer.current = setTimeout(() => setShow(false), 120);
+  };
+  const cancelClose = () => {
+    clearTimeout(closeTimer.current);
+  };
+  React25__namespace.default.useEffect(() => () => {
+    clearTimeout(timer.current);
+    clearTimeout(closeTimer.current);
+  }, []);
+  const place = React25__namespace.default.useCallback(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const cx = Math.round(r.left + r.width / 2), cy = Math.round(r.top + r.height / 2);
+    const vw = window.innerWidth, vh = window.innerHeight, gap = 8, margin = 8;
+    const tip = tipRef.current;
+    const tw = tip ? tip.offsetWidth : 0, th = tip ? tip.offsetHeight : 0;
+    const clampX = (c) => tw ? Math.round(Math.min(Math.max(c, margin + tw / 2), vw - margin - tw / 2)) : c;
+    const clampY = (c) => th ? Math.round(Math.min(Math.max(c, margin + th / 2), vh - margin - th / 2)) : c;
+    const spaceAbove = r.top - gap - margin, spaceBelow = vh - r.bottom - gap - margin;
+    const spaceLeft = r.left - gap - margin, spaceRight = vw - r.right - gap - margin;
+    let side = placement;
+    if (placement === "top" && spaceAbove < th && spaceBelow > spaceAbove) side = "bottom";
+    else if (placement === "bottom" && spaceBelow < th && spaceAbove > spaceBelow) side = "top";
+    else if (placement === "left" && spaceLeft < tw && spaceRight > spaceLeft) side = "right";
+    else if (placement === "right" && spaceRight < tw && spaceLeft > spaceRight) side = "left";
+    const base = { left: "auto", right: "auto", top: "auto", bottom: "auto", place: side };
+    if (side === "bottom") setCoords({ ...base, left: clampX(cx), top: Math.round(r.bottom + gap) });
+    else if (side === "left") setCoords({ ...base, top: clampY(cy), right: Math.round(vw - r.left + gap) });
+    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(() => {
+    place();
+  }, [place]);
+  React25__namespace.default.useEffect(() => {
+    if (!show) return void 0;
+    place();
+    const onMove = () => place();
+    window.addEventListener("scroll", onMove, true);
+    window.addEventListener("resize", onMove);
+    return () => {
+      window.removeEventListener("scroll", onMove, true);
+      window.removeEventListener("resize", onMove);
+    };
+  }, [show, place]);
+  React25__namespace.default.useEffect(() => {
+    if (!show) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        clearTimeout(timer.current);
+        setShow(false);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    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, {
+    "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
+  }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-describedby": describedBy, children });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref: wrapRef,
+      className: `twc-tooltip-wrap ${className}`,
+      onMouseEnter: open,
+      onMouseLeave: close,
+      onFocus: open,
+      onBlur: close,
+      ...rest,
+      children: [
+        __twcStyles,
+        trigger,
+        coords ? reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              ref: tipRef,
+              id,
+              className: "twc-tooltip",
+              "data-place": coords.place || placement,
+              "data-show": show || void 0,
+              role: "tooltip",
+              "aria-hidden": show ? void 0 : "true",
+              onMouseEnter: cancelClose,
+              onMouseLeave: close,
+              style: { position: "fixed", left: coords.left, right: coords.right, top: coords.top, bottom: coords.bottom },
+              children: [
+                label,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          document.body
+        ) : null
+      ]
+    }
+  );
+}
 var DT_CSS = `
 .twc-dt { display: flex; flex-direction: column; font-family: var(--font-sans); color: var(--color-text);
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
@@ -4148,9 +4574,9 @@ function runDatatableQuery(rows, query, options = {}) {
   return { rows: page, total, filtered: out };
 }
 function useFloating() {
-  const [pos, setPos] = React24__namespace.default.useState(null);
-  const cfg = React24__namespace.default.useRef(null);
-  const place = React24__namespace.default.useCallback(() => {
+  const [pos, setPos] = React25__namespace.default.useState(null);
+  const cfg = React25__namespace.default.useRef(null);
+  const place = React25__namespace.default.useCallback(() => {
     const c = cfg.current;
     if (!c || !c.el || !c.el.isConnected) return null;
     const r = c.el.getBoundingClientRect();
@@ -4161,17 +4587,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 = React24__namespace.default.useCallback((el, align = "left", width = 220) => {
+  const open = React25__namespace.default.useCallback((el, align = "left", width = 220) => {
     cfg.current = { el, align, width };
     const p = place();
     if (p) setPos(p);
   }, [place]);
-  const close = React24__namespace.default.useCallback(() => {
+  const close = React25__namespace.default.useCallback(() => {
     cfg.current = null;
     setPos(null);
   }, []);
   const isOpen = pos != null;
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!isOpen) return void 0;
     const update = () => {
       const p = place();
@@ -4195,9 +4621,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 = React24__namespace.default.useRef(null);
+  const ref = React25__namespace.default.useRef(null);
   const isSelect = col.editType === "select" || options && col.editType !== "text";
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (isSelect) {
       const t = setTimeout(() => ref.current?.querySelector(".twc-sel__trigger")?.click(), 0);
       return () => clearTimeout(t);
@@ -4373,6 +4799,8 @@ function Datatable({
   aggregationValues = null,
   disableColumnReorder = false,
   disableColumnResize = false,
+  emptyMessage,
+  renderEmpty,
   editMode = false,
   onRowUpdate,
   onRowsChange,
@@ -4400,7 +4828,7 @@ function Datatable({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
-  const cols = React24__namespace.default.useMemo(() => {
+  const cols = React25__namespace.default.useMemo(() => {
     const out = columns.map((c) => {
       const isActions = c.type === "actions";
       return {
@@ -4435,7 +4863,7 @@ function Datatable({
     }
     return out;
   }, [columns, rowPinning]);
-  const _autoKey = React24__namespace.default.useRef();
+  const _autoKey = React25__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;
@@ -4450,17 +4878,17 @@ function Datatable({
     }
     return i;
   });
-  const [sort, setSort] = React24__namespace.default.useState(null);
-  const [filters, setFilters] = React24__namespace.default.useState([]);
-  const [hidden, setHidden] = React24__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [showRowNum, setShowRowNum] = React24__namespace.default.useState(rowNumbers);
-  const [wrapped, setWrapped] = React24__namespace.default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
+  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 toggleWrap = (field) => setWrapped((w) => {
     const n = new Set(w);
     n.has(field) ? n.delete(field) : n.add(field);
     return n;
   });
-  const [pins, setPins] = React24__namespace.default.useState(() => {
+  const [pins, setPins] = React25__namespace.default.useState(() => {
     const left = [], right = [];
     columns.forEach((c) => {
       if (c.pinned === "left") left.push(c.field);
@@ -4468,34 +4896,34 @@ function Datatable({
     });
     return { left, right };
   });
-  const [density, setDensity] = React24__namespace.default.useState(densityProp);
-  const [quick, setQuick] = React24__namespace.default.useState("");
-  const [selected, setSelected] = React24__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [activeRow, setActiveRow] = React24__namespace.default.useState(null);
-  const [activeCell, setActiveCell] = React24__namespace.default.useState(null);
-  const [page, setPage] = React24__namespace.default.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React24__namespace.default.useState(pageSize > 0 ? pageSize : 10);
-  const [colQuery, setColQuery] = React24__namespace.default.useState("");
-  const [widths, setWidths] = React24__namespace.default.useState({});
-  const [order, setOrder] = React24__namespace.default.useState(() => columns.map((c) => c.field));
-  const [drag, setDrag] = React24__namespace.default.useState({ from: null, over: null, after: false });
-  const [aggOn, setAggOn] = React24__namespace.default.useState(showAggregation);
-  const [focus, setFocus] = React24__namespace.default.useState({ r: 0, c: 0 });
-  const gridRef = React24__namespace.default.useRef(null);
-  const [groupBy, setGroupBy] = React24__namespace.default.useState(rowGrouping || []);
-  const [collapsed, setCollapsed] = React24__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [pinnedRows, setPinnedRows] = React24__namespace.default.useState({ top: [], bottom: [] });
-  const [headH, setHeadH] = React24__namespace.default.useState(41);
-  const theadRef = React24__namespace.default.useRef(null);
-  const [rowOrder, setRowOrder] = React24__namespace.default.useState(null);
-  const [rowHeights, setRowHeights] = React24__namespace.default.useState({});
-  const [rowDrag, setRowDrag] = React24__namespace.default.useState({ from: null, over: null, after: false });
-  const [rowGrab, setRowGrab] = React24__namespace.default.useState(null);
-  const [reorderMsg, setReorderMsg] = React24__namespace.default.useState("");
-  const rowFocusRef = React24__namespace.default.useRef(null);
-  const rootRef = React24__namespace.default.useRef(null);
-  const [compact, setCompact] = React24__namespace.default.useState(false);
-  React24__namespace.default.useEffect(() => {
+  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 el = rootRef.current;
     if (!el) return void 0;
     const measure = () => setCompact((el.clientWidth || 0) < 720);
@@ -4508,11 +4936,11 @@ function Datatable({
       else if (typeof window !== "undefined") window.removeEventListener("resize", measure);
     };
   }, []);
-  const scrollRef = React24__namespace.default.useRef(null);
-  const [scrollTop, setScrollTop] = React24__namespace.default.useState(0);
-  const [viewportH, setViewportH] = React24__namespace.default.useState(0);
-  const [pivotOn, setPivotOn] = React24__namespace.default.useState(pivotMode);
-  const [aggConfig, setAggConfig] = React24__namespace.default.useState(() => {
+  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 m = {};
     (columns || []).forEach((c) => {
       if (typeof c.aggregation === "string") m[c.field] = c.aggregation;
@@ -4520,13 +4948,13 @@ function Datatable({
     return m;
   });
   const aggOf = (c) => aggConfig[c.field] || (typeof c.aggregation === "function" ? c.aggregation : null);
-  const [pivotConfig, setPivotConfig] = React24__namespace.default.useState(() => ({
+  const [pivotConfig, setPivotConfig] = React25__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;
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     setOrder((prev) => {
       const fields = columns.map((c) => c.field);
       const kept = prev.filter((f) => fields.includes(f));
@@ -4534,32 +4962,32 @@ function Datatable({
       return [...kept, ...added];
     });
   }, [columns]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     setDensity(densityProp);
   }, [densityProp]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
   const rowGroupingKey = (rowGrouping || []).join("\0");
-  const rowGroupingKeyRef = React24__namespace.default.useRef(rowGroupingKey);
-  React24__namespace.default.useEffect(() => {
+  const rowGroupingKeyRef = React25__namespace.default.useRef(rowGroupingKey);
+  React25__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] = React24__namespace.default.useState(null);
+  const [colMenu, setColMenu] = React25__namespace.default.useState(null);
   const [menuPos, openMenu, closeMenu] = useFloating();
-  const [panel, setPanel] = React24__namespace.default.useState(null);
+  const [panel, setPanel] = React25__namespace.default.useState(null);
   const [panelPos, openPanel, closePanel] = useFloating();
-  const [rowMenu, setRowMenu] = React24__namespace.default.useState(null);
+  const [rowMenu, setRowMenu] = React25__namespace.default.useState(null);
   const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
-  const [exportOpen, setExportOpen] = React24__namespace.default.useState(false);
+  const [exportOpen, setExportOpen] = React25__namespace.default.useState(false);
   const [exportPos, openExport, closeExport] = useFloating();
-  const menuTriggerRef = React24__namespace.default.useRef(null);
-  const colMenuRef = React24__namespace.default.useRef(null);
-  const rowMenuRef = React24__namespace.default.useRef(null);
-  const exportMenuRef = React24__namespace.default.useRef(null);
+  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);
   function focusFirstItem(container) {
     if (!container) return;
     const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -4598,16 +5026,16 @@ function Datatable({
       restoreTriggerFocus();
     }
   }
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (colMenu) focusFirstItem(colMenuRef.current);
   }, [colMenu]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (rowMenu) focusFirstItem(rowMenuRef.current);
   }, [rowMenu]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (exportOpen) focusFirstItem(exportMenuRef.current);
   }, [exportOpen]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!colMenu && !panel && !rowMenu) return;
     const closeAll = () => {
       setColMenu(null);
@@ -4630,7 +5058,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [colMenu, panel, rowMenu]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!exportOpen) return;
     const close = () => {
       setExportOpen(false);
@@ -4649,9 +5077,9 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [exportOpen]);
-  const colByField = React24__namespace.default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
+  const colByField = React25__namespace.default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
   const visibleCols = cols.filter((c) => !hidden.has(c.field));
-  const ordered = React24__namespace.default.useMemo(() => {
+  const ordered = React25__namespace.default.useMemo(() => {
     const orderIdx = (f) => {
       const i = order.indexOf(f);
       return i === -1 ? 9999 : i;
@@ -4686,7 +5114,7 @@ function Datatable({
     }
     return {};
   };
-  const processed = React24__namespace.default.useMemo(() => {
+  const processed = React25__namespace.default.useMemo(() => {
     if (serverMode) {
       if (rowOrder) {
         const idx = new Map(rowOrder.map((k, i) => [k, i]));
@@ -4725,10 +5153,10 @@ function Datatable({
   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);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (page > totalPages - 1) setPage(0);
   }, [totalPages]);
-  const activeGroupBy = React24__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
+  const activeGroupBy = React25__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
   function subtotalText(rowsIn) {
     const parts = [];
     for (const c of ordered) {
@@ -4755,7 +5183,7 @@ function Datatable({
     if (agg === "max") return Math.max(...nums);
     return null;
   }
-  const displayItems = React24__namespace.default.useMemo(() => {
+  const displayItems = React25__namespace.default.useMemo(() => {
     if (!activeGroupBy.length) return null;
     const build = (rowsIn, depth, prefix) => {
       if (depth >= activeGroupBy.length) return rowsIn.map((row) => ({ kind: "leaf", row }));
@@ -4797,7 +5225,7 @@ function Datatable({
       return { top, bottom };
     });
   }
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!rowPinning) return;
     const measure = () => {
       if (theadRef.current) setHeadH(theadRef.current.offsetHeight || 41);
@@ -4811,12 +5239,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 = React24__namespace.default.useMemo(() => {
+  const keyIndex = React25__namespace.default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     leafRows.forEach((r, i) => m.set(keyOf(r, i), i));
     return m;
   }, [leafRows]);
-  const keyIndexMid = React24__namespace.default.useMemo(() => {
+  const keyIndexMid = React25__namespace.default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     middleRows.forEach((r, i) => m.set(keyOf(r, keyIndex.get(keyOf(r)) ?? i), i));
     return m;
@@ -4901,7 +5329,7 @@ function Datatable({
       setReorderMsg("Reorder cancelled.");
     }
   }
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (rowFocusRef.current == null) return;
     const key = rowFocusRef.current;
     rowFocusRef.current = null;
@@ -4913,7 +5341,7 @@ function Datatable({
   });
   const estRowH = rowHeight ?? (density === "compact" ? 36 : density === "comfortable" ? 56 : 44);
   const virtualizing = virtualized && !paginated && !activeGroupBy.length && !loading;
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -4923,13 +5351,13 @@ function Datatable({
     if (ro) ro.observe(el);
     return () => ro && ro.disconnect();
   }, [virtualizing, height]);
-  const onScrollVirtual = React24__namespace.default.useCallback((e) => {
+  const onScrollVirtual = React25__namespace.default.useCallback((e) => {
     setScrollTop(e.currentTarget.scrollTop);
   }, []);
   const vh = viewportH || (typeof height === "number" ? height : 440);
-  const rowHRef = React24__namespace.default.useRef(/* @__PURE__ */ new Map());
-  const [measureTick, setMeasureTick] = React24__namespace.default.useState(0);
-  const offsets = React24__namespace.default.useMemo(() => {
+  const rowHRef = React25__namespace.default.useRef(/* @__PURE__ */ new Map());
+  const [measureTick, setMeasureTick] = React25__namespace.default.useState(0);
+  const offsets = React25__namespace.default.useMemo(() => {
     if (!virtualizing) return null;
     const total = middleRows.length;
     const arr = new Float64Array(total + 1);
@@ -4939,7 +5367,7 @@ function Datatable({
     }
     return arr;
   }, [virtualizing, middleRows, estRowH, measureTick]);
-  const vWindow = React24__namespace.default.useMemo(() => {
+  const vWindow = React25__namespace.default.useMemo(() => {
     if (!virtualizing || !offsets) return null;
     const total = middleRows.length;
     const totalH = offsets[total];
@@ -4968,7 +5396,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]);
-  React24__namespace.default.useLayoutEffect(() => {
+  React25__namespace.default.useLayoutEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -4983,9 +5411,9 @@ function Datatable({
     }
     if (changed) setMeasureTick((t) => t + 1);
   });
-  const onServerChangeRef = React24__namespace.default.useRef(onServerChange);
+  const onServerChangeRef = React25__namespace.default.useRef(onServerChange);
   onServerChangeRef.current = onServerChange;
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!serverMode) return;
     const t = setTimeout(() => {
       onServerChangeRef.current?.({
@@ -5020,8 +5448,8 @@ function Datatable({
       return n;
     });
   }
-  const movableMidFields = React24__namespace.default.useMemo(
-    () => ordered.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field)).map((c) => c.field),
+  const movableMidFields = React25__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]
   );
   function moveCol(field, dir) {
@@ -5051,7 +5479,7 @@ function Datatable({
     }
     return [...set].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
   }
-  const [resizing, setResizing] = React24__namespace.default.useState(false);
+  const [resizing, setResizing] = React25__namespace.default.useState(false);
   function startResize(e, field) {
     e.preventDefault();
     e.stopPropagation();
@@ -5158,7 +5586,7 @@ function Datatable({
     if (!agg) return null;
     if (aggregationValues && col.field in aggregationValues) {
       const pre = aggregationValues[col.field];
-      if (pre && typeof pre === "object" && !React24__namespace.default.isValidElement(pre)) {
+      if (pre && typeof pre === "object" && !React25__namespace.default.isValidElement(pre)) {
         if (typeof agg === "string" && agg in pre) return pre[agg];
       } else {
         return pre;
@@ -5276,14 +5704,14 @@ function Datatable({
       focusCell(r, c);
     }
   }
-  React24__namespace.default.useEffect(() => {
+  React25__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 = React24__namespace.default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
+  const selectedRows = React25__namespace.default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
   function clearSelection() {
     setSelected(/* @__PURE__ */ new Set());
   }
-  const [editing, setEditing] = React24__namespace.default.useState(null);
+  const [editing, setEditing] = React25__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;
@@ -5318,17 +5746,17 @@ function Datatable({
       cancelEdit();
     }
   }
-  const batchEditableCols = React24__namespace.default.useMemo(
+  const batchEditableCols = React25__namespace.default.useMemo(
     () => cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false))),
     [cols, editMode]
   );
-  const [batchEdit, setBatchEdit] = React24__namespace.default.useState(null);
+  const [batchEdit, setBatchEdit] = React25__namespace.default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
   function openBatchEditor(el) {
     setBatchEdit({ fields: {}, values: {} });
     openBatchEdit(el, "left", 320);
   }
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!batchEdit) return;
     const close = () => {
       setBatchEdit(null);
@@ -5347,7 +5775,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [batchEdit]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (batchEdit && selected.size === 0) {
       setBatchEdit(null);
       closeBatchEdit();
@@ -5384,7 +5812,7 @@ function Datatable({
     setBatchEdit(null);
     closeBatchEdit();
   }
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
       if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
@@ -5406,13 +5834,12 @@ function Datatable({
     })() : [];
     const menu = [...items.filter((a) => a.showInMenu), ...pinItems];
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__actions", style: { justifyContent: col.align === "right" ? "flex-end" : "flex-start" }, children: [
-      inline.map((a, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      inline.map((a, i) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: a.label, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           className: "twc-dt__act",
           "data-danger": a.danger || void 0,
-          title: a.label,
           "aria-label": a.label,
           disabled: a.disabled,
           onClick: (e) => {
@@ -5420,16 +5847,14 @@ function Datatable({
             a.onClick?.(row);
           },
           children: a.icon
-        },
-        i
-      )),
-      menu.length ? /* @__PURE__ */ jsxRuntime.jsx(
+        }
+      ) }, i)),
+      menu.length ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: "More actions", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           className: "twc-dt__act",
           "aria-label": "More actions",
-          title: "More",
           "aria-haspopup": "menu",
           "aria-expanded": rowMenu && rowMenu.row === row || void 0,
           onClick: (e) => {
@@ -5446,7 +5871,7 @@ function Datatable({
           },
           children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.more })
         }
-      ) : null
+      ) }) : null
     ] });
   }
   const tableMinWidth = leadW + ordered.reduce((a, c) => a + widthOf(c), 0);
@@ -5990,7 +6415,7 @@ function Datatable({
               const st = stickyOf(c.field);
               const sorted = sort && sort.field === c.field ? sort.dir : void 0;
               const w = widthOf(c);
-              const reorderable = !disableColumnReorder && st.pin == null && c.type !== "actions";
+              const reorderable = !disableColumnReorder && st.pin == null && c.type !== "actions" && c.reorderable !== false;
               const resizable = !disableColumnResize && c.resizable !== false;
               const hasMenu = !c.disableColumnMenu && (c.sortable || c.filterable || c.pinnable || c.hideable);
               return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6114,14 +6539,17 @@ 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", children: [
-            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", "data-pin": "left", style: { insetInlineStart: 0, width: 44 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
-            showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", "aria-hidden": "true", "data-pin": "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
+          /* @__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: [
+            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) => {
               const st = stickyOf(c.field);
-              return /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", "data-num": c.type === "number" || void 0, "data-pin": st.pin, "data-pin-edge": st.edge, style: { width: widthOf(c), ...st.style }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", style: { "--_w": `${45 + (ri * 13 + ci * 29) % 45}%` } }) }, c.field);
+              return /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-num": c.type === "number" || void 0, "data-pin": st.pin, "data-pin-edge": st.edge, style: { width: widthOf(c), ...st.style }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": `${45 + (ri * 13 + ci * 29) % 45}%` } }) }, c.field);
             })
-          ] }, ri)) : (displayItems ? displayItems.length === 0 : paged.length === 0) ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", colSpan: totalCols, style: { maxWidth: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__empty", children: "No rows match your filters" }) }) }) : displayItems ? (() => {
+          ] }, ri)) : (displayItems ? displayItems.length === 0 : paged.length === 0) ? (
+            // #121: customizable, filter-aware empty state. #122: grid roles on the empty row.
+            /* @__PURE__ */ jsxRuntime.jsx("tr", { role: "row", "aria-rowindex": 2, children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__empty", children: renderEmpty ? renderEmpty() : emptyMessage ?? (filters.length > 0 || quick.trim() !== "" ? "No rows match your filters" : "No rows") }) }) })
+          ) : displayItems ? (() => {
             let li = -1;
             return displayItems.map((item) => item.kind === "group" ? renderGroupRow(item) : renderLeaf(item.row, ++li));
           })() : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -6134,13 +6562,13 @@ function Datatable({
             pinnedBottomRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "bottom"))
           ] }) }),
           hasAggregation && aggOn && !loading && paged.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", children: [
-            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: 44 } }) : null,
-            showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__rownum", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W } }) : null,
+            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: 44 } }) : null,
+            showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "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 } }) : null,
             ordered.map((c) => {
               const st = stickyOf(c.field);
               const v = aggregate(c);
               const display = v == null ? null : c.aggregationFormatter ? c.aggregationFormatter(v) : c.valueFormatter ? c.valueFormatter(v, null) : typeof v === "number" ? v.toLocaleString() : v;
-              return /* @__PURE__ */ jsxRuntime.jsx("td", { "data-num": c.type === "number" || void 0, "data-pin": st.pin, "data-pin-edge": st.edge, style: { width: widthOf(c), ...st.style }, children: v == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              return /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-num": c.type === "number" || void 0, "data-pin": st.pin, "data-pin-edge": st.edge, style: { width: widthOf(c), ...st.style }, children: v == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 typeof aggOf(c) === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__agg-label", children: aggLabels[aggOf(c)] }) : null,
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__agg-val", children: display })
               ] }) }, c.field);
@@ -6183,7 +6611,7 @@ 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, value: String(rowsPerPage), options: rppOptions, placement: "top", onChange: (v) => {
+          /* @__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);
           } }) })
@@ -6484,7 +6912,7 @@ function Datatable({
           )
         ] }) : null,
         shownColRows.length === 0 ? rowNumMatch ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__empty", style: { padding: "18px 12px" }, children: "No columns found" }) : shownColRows.map((c) => {
-          const canDrag = !disableColumnReorder && !colQuery.trim();
+          const canDrag = !disableColumnReorder && c.reorderable !== false && !colQuery.trim();
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -6861,6 +7289,7 @@ var DATEPICKER_CSS = `
 .twc-dp__day[data-today="true"] { font-weight: var(--font-bold); box-shadow: inset 0 0 0 1px var(--color-primary-border); }
 .twc-dp__day[data-selected="true"] { background: var(--color-primary); color: var(--color-primary-fg); font-weight: var(--font-bold); }
 .twc-dp__day:disabled { color: var(--color-text-subtle); opacity: 0.4; cursor: not-allowed; }
+.twc-dp__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 .twc-dp__day:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-dp__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
 .twc-dp__mo { padding: 10px 0; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: var(--text-sm); color: var(--color-text); border-radius: var(--radius-md); }
@@ -6906,23 +7335,23 @@ function DatePicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
   const __twcStyles1 = useScopedStyles("twc-datepicker-styles", DATEPICKER_CSS);
-  const autoId = React24__namespace.default.useId();
+  const autoId = React25__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
-  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React24__namespace.default.useState(false);
-  const [view, setView] = React24__namespace.default.useState(selected || /* @__PURE__ */ new Date());
-  const [mode, setMode] = React24__namespace.default.useState("days");
-  const [focusDate, setFocusDate] = React24__namespace.default.useState(null);
-  const [coords, setCoords] = React24__namespace.default.useState(null);
-  const wrapRef = React24__namespace.default.useRef(null);
-  const triggerRef = React24__namespace.default.useRef(null);
-  const popRef = React24__namespace.default.useRef(null);
-  const gridRef = React24__namespace.default.useRef(null);
+  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 POP_W = 280;
-  const place = React24__namespace.default.useCallback(() => {
+  const place = React25__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -6933,7 +7362,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 });
   }, []);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -6944,7 +7373,7 @@ function DatePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return;
     setView(selected || /* @__PURE__ */ new Date());
     setMode("days");
@@ -6964,8 +7393,8 @@ function DatePicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React24__namespace.default.useRef(false);
-  React24__namespace.default.useEffect(() => {
+  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);
@@ -6976,9 +7405,9 @@ function DatePicker({
     prevOpen.current = open;
     return () => clearTimeout(id2);
   }, [open]);
-  const months = React24__namespace.default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
-  const monthsShort = React24__namespace.default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
-  const dows = React24__namespace.default.useMemo(
+  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(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW[(i + weekStartsOn) % 7]) : weekdayNames(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7006,7 +7435,7 @@ 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);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open || mode !== "days" || !focusDate) return;
     gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
   }, [focusDate, open, mode]);
@@ -7096,6 +7525,7 @@ function DatePicker({
             /* @__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("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" }) }) })
             ] }),
             mode === "days" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dp__grid", ref: gridRef, onKeyDown: onGridKeyDown, children: [
@@ -7196,6 +7626,7 @@ var RANGE_CSS = `
 .twc-drp__day[data-edge="end"] { background: var(--color-primary); color: var(--color-primary-fg); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-weight: var(--font-bold); }
 .twc-drp__day[data-edge="both"] { background: var(--color-primary); color: var(--color-primary-fg); border-radius: var(--radius-md); font-weight: var(--font-bold); }
 .twc-drp__day:disabled { opacity: 0.3; cursor: not-allowed; }
+.twc-drp__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 [dir="rtl"] .twc-drp__nav svg { transform: scaleX(-1); }
 `;
 var MONTHS2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
@@ -7221,6 +7652,9 @@ function DateRangePicker({
   presets = true,
   locale,
   weekStartsOn = 0,
+  min,
+  max,
+  disabledDate,
   disabled = false,
   tone = "primary",
   onChange,
@@ -7229,23 +7663,23 @@ function DateRangePicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
   const __twcStyles1 = useScopedStyles("twc-drp-styles", RANGE_CSS);
-  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
   const range = value !== void 0 ? value : internal;
-  const [open, setOpen] = React24__namespace.default.useState(false);
-  const [view, setView] = React24__namespace.default.useState(range.start || /* @__PURE__ */ new Date());
-  const [hover, setHover] = React24__namespace.default.useState(null);
-  const [coords, setCoords] = React24__namespace.default.useState(null);
-  const wrapRef = React24__namespace.default.useRef(null);
-  const triggerRef = React24__namespace.default.useRef(null);
-  const popRef = React24__namespace.default.useRef(null);
-  const labelId = React24__namespace.default.useId();
+  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 descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const POP_W = 420;
-  const place = React24__namespace.default.useCallback(() => {
+  const place = React25__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7256,7 +7690,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 });
   }, []);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7267,7 +7701,7 @@ function DateRangePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -7288,7 +7722,9 @@ function DateRangePicker({
     if (value === void 0) setInternal(r);
     onChange?.(r);
   };
+  const outOfRange = (d) => min && ymd(d) < ymd(min) || max && ymd(d) > ymd(max) || Boolean(disabledDate && disabledDate(d));
   const clickDay = (d) => {
+    if (outOfRange(d)) return;
     if (!range.start || range.start && range.end) {
       set({ start: d, end: null });
     } else {
@@ -7305,8 +7741,8 @@ function DateRangePicker({
     setView(start);
     setOpen(false);
   };
-  const months = React24__namespace.default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
-  const dows = React24__namespace.default.useMemo(
+  const months = React25__namespace.default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
+  const dows = React25__namespace.default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW2[(i + weekStartsOn) % 7]) : weekdayNames2(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7388,6 +7824,11 @@ function DateRangePicker({
                   " ",
                   y
                 ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-drp__sr", "aria-live": "polite", children: [
+                  months[m],
+                  " ",
+                  y
+                ] }),
                 /* @__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: [
@@ -7401,6 +7842,7 @@ function DateRangePicker({
                       type: "button",
                       className: "twc-drp__day",
                       "data-outside": outside || void 0,
+                      disabled: outOfRange(d) || void 0,
                       "data-in": inRange(t) || void 0,
                       "data-edge": edgeOf(t) || void 0,
                       "aria-pressed": !!edgeOf(t),
@@ -7487,14 +7929,14 @@ function Dialog({
   className = "",
   ...rest
 }) {
-  const autoId = React24__namespace.default.useId();
+  const autoId = React25__namespace.default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const dialogRef = React24__namespace.default.useRef(null);
+  const dialogRef = React25__namespace.default.useRef(null);
   const __twcStyles = useScopedStyles("twc-dialog-styles", DIALOG_CSS);
   const renderPortal = usePortal();
-  const [mounted, setMounted] = React24__namespace.default.useState(open);
-  React24__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React25__namespace.default.useState(open);
+  React25__namespace.default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -7502,16 +7944,10 @@ function Dialog({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React24__namespace.default.useEffect(() => {
-    if (!open) return void 0;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [open]);
+  useScrollLock(open);
+  useInertBackground(dialogRef, open && mounted);
   useFocusTrap(dialogRef, open && mounted);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -7658,14 +8094,14 @@ function Drawer({
   style,
   ...rest
 }) {
-  const autoId = React24__namespace.default.useId();
+  const autoId = React25__namespace.default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const panelRef = React24__namespace.default.useRef(null);
+  const panelRef = React25__namespace.default.useRef(null);
   const __twcStyles = useScopedStyles("twc-drawer-styles", DRAWER_CSS);
   const renderPortal = usePortal();
-  const [mounted, setMounted] = React24__namespace.default.useState(open);
-  React24__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React25__namespace.default.useState(open);
+  React25__namespace.default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -7673,16 +8109,10 @@ function Drawer({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React24__namespace.default.useEffect(() => {
-    if (!open) return void 0;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [open]);
-  useFocusTrap(panelRef, open && mounted);
-  React24__namespace.default.useEffect(() => {
+  useScrollLock(open);
+  useInertBackground(panelRef, open && mounted);
+  useFocusTrap(panelRef, open && mounted);
+  React25__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -7771,16 +8201,21 @@ function Field({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS5);
-  const autoId = React24__namespace.default.useId();
+  const autoId = React25__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, {
+    "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;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, "data-size": size, ...rest, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor, children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    children,
+    control,
     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
   ] });
 }
@@ -7834,6 +8269,14 @@ function fmtSize(bytes) {
   if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
   return (bytes / (1024 * 1024)).toFixed(1) + " MB";
 }
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const toks = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+  if (!toks.length) return true;
+  const name = file.name.toLowerCase(), type = (file.type || "").toLowerCase();
+  return toks.some((t) => t.startsWith(".") ? name.endsWith(t) : t.endsWith("/*") ? type.startsWith(t.slice(0, -1)) : type === t);
+}
+var fileKey = (f) => `${f.name}-${f.size}-${f.lastModified}`;
 function FileUpload({
   accept,
   multiple = false,
@@ -7845,17 +8288,20 @@ function FileUpload({
   required = false,
   value,
   defaultValue = [],
+  maxSize,
+  maxFiles,
+  onReject,
   onChange,
   id,
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-upload-styles", UPLOAD_CSS);
-  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
   const files = value !== void 0 ? value : internal;
-  const [drag, setDrag] = React24__namespace.default.useState(false);
-  const inputRef = React24__namespace.default.useRef(null);
-  const autoId = React24__namespace.default.useId();
+  const [drag, setDrag] = React25__namespace.default.useState(false);
+  const inputRef = React25__namespace.default.useRef(null);
+  const autoId = React25__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
@@ -7864,8 +8310,28 @@ function FileUpload({
     onChange?.(next);
   };
   function addFiles(list) {
-    const arr = Array.from(list);
-    set(multiple ? [...files, ...arr] : arr.slice(0, 1));
+    const incoming = Array.from(list);
+    const retained = multiple ? files.slice() : [];
+    const seen2 = new Set(retained.map(fileKey));
+    const accepted = [];
+    const rejections = [];
+    for (const f of incoming) {
+      if (multiple && seen2.has(fileKey(f))) continue;
+      let reason = null;
+      if (accept && !matchesAccept(f, accept)) reason = "type";
+      else if (maxSize && f.size > maxSize) reason = "size";
+      else if (multiple && maxFiles && retained.length + accepted.length >= maxFiles) reason = "count";
+      if (reason) {
+        rejections.push({ file: f, reason });
+        continue;
+      }
+      accepted.push(f);
+      if (multiple) seen2.add(fileKey(f));
+    }
+    if (rejections.length) onReject?.(rejections);
+    if (multiple) {
+      if (accepted.length) set([...retained, ...accepted]);
+    } else if (accepted.length) set(accepted.slice(0, 1));
   }
   function remove(i) {
     set(files.filter((_, idx) => idx !== i));
@@ -7939,7 +8405,7 @@ function FileUpload({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-upload__file-size", children: fmtSize(f.size) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-upload__file-x", "aria-label": `Remove ${f.name}`, onClick: () => remove(i), 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" }) }) })
-    ] }, i)) }) : null,
+    ] }, fileKey(f))) }) : null,
     error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : null
   ] });
 }
@@ -8058,15 +8524,15 @@ function Kanban({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-kanban-styles", KANBAN_CSS);
-  const [internal, setInternal] = React24__namespace.default.useState(cards ?? defaultCards ?? []);
+  const [internal, setInternal] = React25__namespace.default.useState(cards ?? defaultCards ?? []);
   const items = cards !== void 0 ? cards : internal;
-  const [drag, setDrag] = React24__namespace.default.useState(null);
-  const [overCol, setOverCol] = React24__namespace.default.useState(null);
-  const [grab, setGrab] = React24__namespace.default.useState(null);
-  const [announce, setAnnounce] = React24__namespace.default.useState("");
-  const rootRef = React24__namespace.default.useRef(null);
-  const focusIdRef = React24__namespace.default.useRef(null);
-  React24__namespace.default.useEffect(() => {
+  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(() => {
     if (focusIdRef.current == null) return void 0;
     const raf = requestAnimationFrame(() => {
       const id = focusIdRef.current;
@@ -8211,42 +8677,49 @@ var LIST_CSS = `
 .twc-list__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .twc-list__desc { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .twc-list__trail { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-subtle); font-size: var(--text-sm); }
+.twc-list__empty { padding: 30px 12px; text-align: center; color: var(--color-text-subtle); font-size: var(--text-sm); }
 `;
-function List({ items, plain = false, className = "", ...rest }) {
+function List({ items, plain = false, emptyMessage, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-list-styles", LIST_CSS);
   const 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;
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: `twc-list ${className}`, "data-plain": plain || void 0, ...rest, children: [
-    __twcStyles,
-    items.map((it, i) => {
-      const href = safeHref12(it.href);
-      const interactive = Boolean(it.onClick || href);
-      const Tag2 = href ? "a" : interactive ? "button" : "div";
-      const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        it.leading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-list__lead", "aria-hidden": "true", children: it.leading }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-list__main", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-list__title", children: it.title }),
-          it.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-list__desc", children: it.description }) : null
-        ] }),
-        it.trailing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-list__trail", children: it.trailing }) : null
-      ] });
-      return /* @__PURE__ */ jsxRuntime.jsx("li", { style: { display: "contents" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Tag2,
-        {
-          className: "twc-list__item",
-          "data-interactive": interactive || void 0,
-          "data-active": it.active || void 0,
-          href,
-          type: Tag2 === "button" ? "button" : void 0,
-          onClick: it.onClick,
-          children: content
-        }
-      ) }, i);
-    })
-  ] });
+  return (
+    // role="list" before {...rest} so a consumer can still override it (e.g. role="menu");
+    // list-style:none + display:contents on the <li> drop the implicit list/listitem roles
+    // in some engines, so we set them explicitly (#123).
+    /* @__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 interactive = Boolean(it.onClick || href);
+        const Tag2 = href ? "a" : interactive ? "button" : "div";
+        const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          it.leading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-list__lead", "aria-hidden": "true", children: it.leading }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-list__main", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-list__title", children: it.title }),
+            it.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-list__desc", children: it.description }) : null
+          ] }),
+          it.trailing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-list__trail", children: it.trailing }) : null
+        ] });
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "listitem", style: { display: "contents" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Tag2,
+          {
+            className: "twc-list__item",
+            "data-interactive": interactive || void 0,
+            "data-active": it.active || void 0,
+            "aria-current": it.active ? "page" : void 0,
+            href,
+            type: Tag2 === "button" ? "button" : void 0,
+            onClick: it.onClick,
+            children: content
+          }
+        ) }, i);
+      })
+    ] })
+  );
 }
 var NAVBAR_CSS = `
 .twc-navbar { display: flex; align-items: center; gap: var(--space-4); height: 60px; padding: 0 var(--space-5);
@@ -8369,21 +8842,21 @@ function Popover({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-popover-styles", POPOVER_CSS);
-  const [openState, setOpenState] = React24__namespace.default.useState(defaultOpen);
-  const [render, setRender] = React24__namespace.default.useState(false);
-  const [pos, setPos] = React24__namespace.default.useState(null);
-  const wrapRef = React24__namespace.default.useRef(null);
-  const popRef = React24__namespace.default.useRef(null);
-  const popId = React24__namespace.default.useId();
+  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 controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React24__namespace.default.useRef(open);
+  const openRef = React25__namespace.default.useRef(open);
   openRef.current = open;
-  const controlledRef = React24__namespace.default.useRef(controlled);
+  const controlledRef = React25__namespace.default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React24__namespace.default.useRef(onOpenChange);
+  const onOpenChangeRef = React25__namespace.default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React24__namespace.default.useCallback((next) => {
+  const setOpen = React25__namespace.default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -8391,7 +8864,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 = React24__namespace.default.useCallback(() => {
+  const place = React25__namespace.default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -8401,7 +8874,13 @@ function Popover({
     let top, left, flip = false, arrow = {};
     const vertical = placement === "top" || placement === "bottom";
     if (vertical) {
-      flip = placement === "top" || placement === "bottom" && vh - r.bottom < 180 && r.top > vh - r.bottom;
+      const ph2 = popRef.current ? popRef.current.offsetHeight : 120;
+      const spaceAbove = r.top - gap - M;
+      const spaceBelow = vh - r.bottom - gap - M;
+      let openUp = placement === "top";
+      if (openUp && spaceAbove < ph2 && spaceBelow > spaceAbove) openUp = false;
+      else if (!openUp && spaceBelow < ph2 && spaceAbove > spaceBelow) openUp = true;
+      flip = openUp;
       top = flip ? void 0 : r.bottom + gap;
       const bottom = flip ? vh - r.top + gap : void 0;
       let l = align === "start" ? r.left : align === "end" ? r.right - w : r.left + r.width / 2 - w / 2;
@@ -8422,7 +8901,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]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -8445,7 +8924,7 @@ function Popover({
       document.removeEventListener("keydown", onKey);
     };
   }, [open, place]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -8453,12 +8932,12 @@ function Popover({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (render && open) place();
   }, [render, place]);
-  const restoreRef = React24__namespace.default.useRef(null);
-  const needFocusRef = React24__namespace.default.useRef(false);
-  React24__namespace.default.useEffect(() => {
+  const restoreRef = React25__namespace.default.useRef(null);
+  const needFocusRef = React25__namespace.default.useRef(false);
+  React25__namespace.default.useEffect(() => {
     if (open) {
       restoreRef.current = document.activeElement;
       needFocusRef.current = true;
@@ -8469,12 +8948,7 @@ function Popover({
     needFocusRef.current = false;
     if (prev && typeof prev.focus === "function" && popRef.current?.contains(document.activeElement)) prev.focus();
   }, [open]);
-  React24__namespace.default.useEffect(() => {
-    if (open && render && pos && needFocusRef.current) {
-      needFocusRef.current = false;
-      popRef.current?.focus({ preventScroll: true });
-    }
-  }, [open, render, pos]);
+  useFocusTrap(popRef, open && render && !!pos, { restoreFocus: false });
   const pop = render && pos ? /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -8485,6 +8959,7 @@ function Popover({
       "data-state": open ? "open" : "closed",
       "data-flip": pos.flip || void 0,
       role: "dialog",
+      "aria-modal": "true",
       "aria-labelledby": title ? `${popId}-title` : void 0,
       style: { top: pos.top, bottom: pos.bottom, left: pos.left, width: pos.width },
       children: [
@@ -8497,7 +8972,7 @@ function Popover({
       ]
     }
   ) : null;
-  const triggerEl = React24__namespace.default.isValidElement(trigger) ? React24__namespace.default.cloneElement(trigger, {
+  const triggerEl = React25__namespace.default.isValidElement(trigger) ? React25__namespace.default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -8540,7 +9015,7 @@ function Progress({
   className = "",
   ...rest
 }) {
-  const labelId = React24__namespace.default.useId();
+  const labelId = React25__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); }
@@ -8663,10 +9138,13 @@ 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 = React24__namespace.default.useId();
+  const autoId = React25__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
+  if (process.env.NODE_ENV !== "production" && !label && !description && !rest["aria-label"] && !rest["aria-labelledby"]) {
+    warnOnce("Radio.no-name", "Radio: no accessible name \u2014 pass `label`, or `aria-label`/`aria-labelledby` for a label-less control (WCAG 4.1.2).");
+  }
   const describedBy = [rest["aria-describedby"], error ? errId : null].filter(Boolean).join(" ") || void 0;
   const control = /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `twc-radio ${className}`, "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, htmlFor: fieldId, children: [
     __twcStyles,
@@ -8683,6 +9161,7 @@ function Radio({
         disabled,
         onChange,
         ...rest,
+        required: required || void 0,
         "aria-required": required || void 0,
         "aria-invalid": invalid || void 0,
         "aria-describedby": describedBy
@@ -8700,11 +9179,103 @@ function Radio({
     /* @__PURE__ */ jsxRuntime.jsx("span", { id: errId, className: "twc-field__error", children: error })
   ] });
 }
+var RADIO_GROUP_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; }
+.twc-field__req { color: var(--color-danger); }
+.twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
+.twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
+.twc-radio-group__items { display: flex; flex-direction: column; gap: var(--space-2-5); }
+.twc-radio-group__items[data-orientation="horizontal"] { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
+`;
+function RadioGroup({
+  name,
+  value,
+  defaultValue,
+  onChange,
+  options,
+  children,
+  label,
+  hint,
+  error,
+  orientation = "vertical",
+  disabled = false,
+  required = false,
+  size = "md",
+  tone = "primary",
+  id,
+  className = "",
+  ...rest
+}) {
+  const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
+  const autoId = React25__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 current = value !== void 0 ? value : internal;
+  const select = (v) => {
+    if (value === void 0) setInternal(v);
+    onChange?.(v);
+  };
+  const radios = options ? options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+    Radio,
+    {
+      name: groupName,
+      value: o.value,
+      label: o.label,
+      description: o.description,
+      checked: current === o.value,
+      onChange: () => select(o.value),
+      disabled: disabled || o.disabled,
+      required,
+      size,
+      tone
+    },
+    o.value
+  )) : React25__namespace.default.Children.map(children, (child) => {
+    if (!React25__namespace.default.isValidElement(child)) return child;
+    const v = child.props.value;
+    return React25__namespace.default.cloneElement(child, {
+      name: child.props.name ?? groupName,
+      checked: child.props.checked ?? current === v,
+      onChange: child.props.onChange ?? (() => select(v)),
+      disabled: child.props.disabled ?? disabled,
+      required: child.props.required ?? required,
+      size: child.props.size ?? size,
+      tone: child.props.tone ?? tone
+    });
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `twc-field ${className}`,
+      role: "radiogroup",
+      "aria-labelledby": label ? labelId : void 0,
+      "aria-describedby": error || hint ? descId : void 0,
+      "aria-invalid": invalid || void 0,
+      "aria-required": required || void 0,
+      "data-orientation": orientation,
+      ...rest,
+      children: [
+        __twcStyles,
+        label ? /* @__PURE__ */ jsxRuntime.jsxs("span", { id: labelId, className: "twc-field__label", children: [
+          label,
+          required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-radio-group__items", "data-orientation": orientation === "horizontal" ? "horizontal" : void 0, children: radios }),
+        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 RATING_CSS = `
 .twc-rating { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); }
 .twc-rating__stars { display: inline-flex; gap: 2px; }
-.twc-rating__btn { border: none; background: transparent; padding: 1px; cursor: pointer; color: var(--color-border-strong); line-height: 0;
-  transition: transform var(--duration-fast) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
+.twc-rating__btn { border: none; background: transparent; padding: 1px; cursor: pointer; line-height: 0;
+  transition: transform var(--duration-fast) var(--ease-spring); }
 .twc-rating__btn:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
 .twc-rating[data-readonly="true"] .twc-rating__btn { cursor: default; }
 .twc-rating[data-disabled="true"] { opacity: 0.55; }
@@ -8718,8 +9289,11 @@ var RATING_CSS = `
 .twc-rating[data-tone="danger"]  { --_accent: var(--color-danger); }
 .twc-rating[data-tone="info"]    { --_accent: var(--color-info); }
 .twc-rating[data-tone="neutral"] { --_accent: var(--color-text); }
-.twc-rating__btn[data-on="true"] { color: var(--_c, var(--_accent)); }
-.twc-rating__btn svg { width: var(--_sz, 24px); height: var(--_sz, 24px); display: block; }
+/* Per-star partial fill: an accent-colored star clipped to var(--twc-fill) over an empty star. */
+.twc-rating__star { position: relative; display: inline-block; line-height: 0; }
+.twc-rating__bg { color: var(--color-border-strong); }
+.twc-rating__fg { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--twc-fill, 0%); overflow: hidden; color: var(--_c, var(--_accent)); }
+.twc-rating svg { width: var(--_sz, 24px); height: var(--_sz, 24px); display: block; }
 .twc-rating[data-size="sm"] { --_sz: 18px; }
 .twc-rating[data-size="lg"] { --_sz: 32px; }
 .twc-rating__value { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
@@ -8735,19 +9309,26 @@ function Rating({
   readOnly = false,
   disabled = false,
   showValue = false,
+  clearable = true,
+  format,
+  name,
   onChange,
   className = "",
   style,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-rating-styles", RATING_CSS);
-  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
-  const [hover, setHover] = React24__namespace.default.useState(0);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [hover, setHover] = React25__namespace.default.useState(0);
   const val = value !== void 0 ? value : internal;
   const shown = hover || val;
   const interactive = !readOnly && !disabled;
-  const btnRefs = React24__namespace.default.useRef([]);
+  const btnRefs = React25__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)) {
+    warnOnce("Rating.fractional-interactive", "Rating: a fractional value only renders (partial-fill display) in readOnly mode \u2014 interactive selection is integer-only.");
+  }
   const set = (v) => {
     if (!interactive) return;
     if (value === void 0) setInternal(v);
@@ -8760,18 +9341,46 @@ function Rating({
     else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = Math.max(1, val - 1);
     else if (e.key === "Home") next = 1;
     else if (e.key === "End") next = count;
+    else if (clearable && (e.key === "Delete" || e.key === "Backspace")) next = 0;
     else return;
     e.preventDefault();
     set(next);
-    btnRefs.current[next - 1]?.focus();
+    btnRefs.current[Math.max(0, next - 1)]?.focus();
+  };
+  const star = (n) => {
+    const fill = Math.max(0, Math.min(1, shown - (n - 1)));
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-rating__star", style: { "--twc-fill": `${fill * 100}%` }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "twc-rating__bg", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: StarPath }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-rating__fg", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: StarPath }) }) })
+    ] });
   };
+  if (readOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `twc-rating ${className}`,
+        "data-size": size,
+        "data-tone": tone,
+        "data-readonly": "true",
+        style: color ? { "--_c": color, ...style } : style,
+        role: "img",
+        "aria-label": `${fmt(val)} out of ${count} stars`,
+        ...rest,
+        children: [
+          __twcStyles,
+          name ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: val, disabled: disabled || void 0 }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-rating__stars", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-rating__btn", children: star(i + 1) }, i + 1)) }),
+          showValue ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-rating__value", children: fmt(val) }) : null
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `twc-rating ${className}`,
       "data-size": size,
       "data-tone": tone,
-      "data-readonly": readOnly || void 0,
       "data-disabled": disabled || void 0,
       style: color ? { "--_c": color, ...style } : style,
       role: "radiogroup",
@@ -8780,6 +9389,7 @@ function Rating({
       ...rest,
       children: [
         __twcStyles,
+        name ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: val, disabled: disabled || void 0 }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-rating__stars", onMouseLeave: () => setHover(0), onKeyDown, children: Array.from({ length: count }).map((_, i) => {
           const n = i + 1;
           return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8790,149 +9400,19 @@ function Rating({
               },
               type: "button",
               className: "twc-rating__btn",
-              "data-on": n <= shown || void 0,
               role: "radio",
               "aria-label": `${n} star${n > 1 ? "s" : ""}`,
               "aria-checked": n === val,
-              disabled: readOnly || disabled,
+              disabled,
               tabIndex: interactive && n === tabStar ? 0 : -1,
               onMouseEnter: () => interactive && setHover(n),
-              onClick: () => set(n === val ? 0 : n),
-              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: StarPath }) })
+              onClick: () => set(n === val && clearable ? 0 : n),
+              children: star(n)
             },
             n
           );
         }) }),
-        showValue ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-rating__value", children: val.toFixed(1) }) : null
-      ]
-    }
-  );
-}
-var TOOLTIP_CSS = `
-.twc-tooltip-wrap { display: inline-flex; }
-.twc-tooltip {
-  position: fixed; z-index: var(--z-tooltip); pointer-events: none;
-  padding: 6px 10px; border-radius: var(--radius-md);
-  background: var(--color-text); color: var(--color-surface);
-  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
-  line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow-md);
-  opacity: 0; transform: scale(0.9); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
-}
-.twc-tooltip[data-show="true"] { opacity: 1; transform: scale(1); }
-.twc-tooltip[data-place="top"]    { transform-origin: bottom center; translate: -50% 0; }
-.twc-tooltip[data-place="bottom"] { transform-origin: top center; translate: -50% 0; }
-.twc-tooltip[data-place="left"]   { transform-origin: right center; translate: 0 -50%; }
-.twc-tooltip[data-place="right"]  { transform-origin: left center; translate: 0 -50%; }
-.twc-tooltip[data-show="true"][data-place="top"], .twc-tooltip[data-show="true"][data-place="bottom"] { transform: scale(1); }
-.twc-tooltip__arrow { position: absolute; width: 7px; height: 7px; background: var(--color-text); transform: rotate(45deg); }
-.twc-tooltip[data-place="top"] .twc-tooltip__arrow    { bottom: -3px; left: 50%; margin-left: -3.5px; }
-.twc-tooltip[data-place="bottom"] .twc-tooltip__arrow { top: -3px; left: 50%; margin-left: -3.5px; }
-.twc-tooltip[data-place="left"] .twc-tooltip__arrow   { right: -3px; top: 50%; margin-top: -3.5px; }
-.twc-tooltip[data-place="right"] .twc-tooltip__arrow  { left: -3px; top: 50%; margin-top: -3.5px; }
-@media (prefers-reduced-motion: reduce) { .twc-tooltip { transition: opacity var(--duration-fast) linear; transform: none; } }
-`;
-function Tooltip({
-  children,
-  label,
-  placement = "top",
-  delay = 120,
-  className = "",
-  ...rest
-}) {
-  const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
-  const id = React24__namespace.default.useId();
-  const [show, setShow] = React24__namespace.default.useState(false);
-  const [coords, setCoords] = React24__namespace.default.useState(null);
-  const timer = React24__namespace.default.useRef(null);
-  const wrapRef = React24__namespace.default.useRef(null);
-  const tipRef = React24__namespace.default.useRef(null);
-  const open = () => {
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => setShow(true), delay);
-  };
-  const close = () => {
-    clearTimeout(timer.current);
-    setShow(false);
-  };
-  React24__namespace.default.useEffect(() => () => clearTimeout(timer.current), []);
-  const place = React24__namespace.default.useCallback(() => {
-    const el = wrapRef.current;
-    if (!el) return;
-    const r = el.getBoundingClientRect();
-    const cx = Math.round(r.left + r.width / 2), cy = Math.round(r.top + r.height / 2);
-    const vw = window.innerWidth, vh = window.innerHeight, gap = 8, margin = 8;
-    const tip = tipRef.current;
-    const tw = tip ? tip.offsetWidth : 0, th = tip ? tip.offsetHeight : 0;
-    const clampX = (c) => tw ? Math.round(Math.min(Math.max(c, margin + tw / 2), vw - margin - tw / 2)) : c;
-    const clampY = (c) => th ? Math.round(Math.min(Math.max(c, margin + th / 2), vh - margin - th / 2)) : c;
-    const base = { left: "auto", right: "auto", top: "auto", bottom: "auto" };
-    if (placement === "bottom") setCoords({ ...base, left: clampX(cx), top: Math.round(r.bottom + gap) });
-    else if (placement === "left") setCoords({ ...base, top: clampY(cy), right: Math.round(vw - r.left + gap) });
-    else if (placement === "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]);
-  React24__namespace.default.useEffect(() => {
-    place();
-  }, [place]);
-  React24__namespace.default.useEffect(() => {
-    if (!show) return void 0;
-    place();
-    const onMove = () => place();
-    window.addEventListener("scroll", onMove, true);
-    window.addEventListener("resize", onMove);
-    return () => {
-      window.removeEventListener("scroll", onMove, true);
-      window.removeEventListener("resize", onMove);
-    };
-  }, [show, place]);
-  React24__namespace.default.useEffect(() => {
-    if (!show) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") {
-        clearTimeout(timer.current);
-        setShow(false);
-      }
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [show]);
-  const describedBy = show ? id : void 0;
-  const trigger = React24__namespace.default.isValidElement(children) && children.type !== React24__namespace.default.Fragment ? React24__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(
-    "span",
-    {
-      ref: wrapRef,
-      className: `twc-tooltip-wrap ${className}`,
-      onMouseEnter: open,
-      onMouseLeave: close,
-      onFocus: open,
-      onBlur: close,
-      ...rest,
-      children: [
-        __twcStyles,
-        trigger,
-        coords ? reactDom.createPortal(
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              ref: tipRef,
-              id,
-              className: "twc-tooltip",
-              "data-place": placement,
-              "data-show": show || void 0,
-              role: "tooltip",
-              "aria-hidden": show ? void 0 : "true",
-              style: { position: "fixed", left: coords.left, right: coords.right, top: coords.top, bottom: coords.bottom },
-              children: [
-                label,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
-              ]
-            }
-          ),
-          document.body
-        ) : null
+        showValue ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-rating__value", children: fmt(val) }) : null
       ]
     }
   );
@@ -9030,24 +9510,24 @@ function Sidebar({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-sidebar-styles", SIDEBAR_CSS);
-  const navId = React24__namespace.default.useId();
-  const panelRef = React24__namespace.default.useRef(null);
+  const navId = React25__namespace.default.useId();
+  const panelRef = React25__namespace.default.useRef(null);
   const renderPortal = usePortal();
-  const [internal, setInternal] = React24__namespace.default.useState(defaultCollapsed);
+  const [internal, setInternal] = React25__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] = React24__namespace.default.useState(defaultOpen);
+  const [openInternal, setOpenInternal] = React25__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] = React24__namespace.default.useState(open);
-  React24__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React25__namespace.default.useState(open);
+  React25__namespace.default.useEffect(() => {
     if (!overlay) return void 0;
     if (open) {
       setMounted(true);
@@ -9056,7 +9536,7 @@ function Sidebar({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [overlay, open]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!overlay || !open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -9065,7 +9545,7 @@ function Sidebar({
     };
   }, [overlay, open]);
   useFocusTrap(panelRef, overlay && open && mounted);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!overlay || !open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -9117,7 +9597,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(React24__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(React25__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)) }),
@@ -9256,11 +9736,16 @@ function Slider({
   min: minProp = 0,
   max: maxProp = 100,
   step: stepProp = 1,
+  pageStep: pageStepProp,
+  precision,
   tone = "primary",
   disabled = false,
+  range = false,
   showValue = true,
   showTicks = false,
   formatValue,
+  getAriaValueText,
+  name,
   onChange,
   id,
   className = "",
@@ -9269,38 +9754,73 @@ function Slider({
   const min = Number.isFinite(minProp) ? minProp : 0;
   const max = Number.isFinite(maxProp) && maxProp > min ? maxProp : min + 1;
   const step = Number.isFinite(stepProp) && stepProp > 0 ? stepProp : 1;
-  const __twcStyles = useScopedStyles("twc-slider-styles", SLIDER_CSS);
-  const autoId = React24__namespace.default.useId();
-  const fieldId = id || autoId;
-  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
-  const val = value !== void 0 ? value : internal;
-  const trackRef = React24__namespace.default.useRef(null);
-  const [dragging, setDragging] = React24__namespace.default.useState(false);
-  const pct = (val - min) / (max - min) * 100;
-  const fmt = (v) => formatValue ? formatValue(v) : v;
+  const pageStep = Number.isFinite(pageStepProp) && pageStepProp > 0 ? pageStepProp : Math.max(step, (max - min) / 10);
+  const stepDecimals = (() => {
+    const s = String(step);
+    const i = s.indexOf(".");
+    return i === -1 ? 0 : s.length - i - 1;
+  })();
+  const decimals = Number.isInteger(precision) && precision >= 0 ? precision : stepDecimals;
   const clampSnap = (raw) => {
     const stepped = Math.round((raw - min) / step) * step + min;
     return Math.min(max, Math.max(min, Math.round(stepped * 1e6) / 1e6));
   };
-  const setVal = (v) => {
-    if (value === void 0) setInternal(v);
-    onChange?.(v);
+  const __twcStyles = useScopedStyles("twc-slider-styles", SLIDER_CSS);
+  const autoId = React25__namespace.default.useId();
+  const fieldId = id || autoId;
+  const isRange = range || Array.isArray(value) || Array.isArray(defaultValue);
+  const [internal, setInternal] = React25__namespace.default.useState(() => {
+    if (isRange) {
+      const dv = Array.isArray(defaultValue) ? defaultValue : [min, max];
+      return [clampSnap(dv[0]), clampSnap(dv[1])];
+    }
+    return clampSnap(Number.isFinite(defaultValue) ? defaultValue : min);
+  });
+  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 fmt = (v) => formatValue ? formatValue(v) : v.toFixed(decimals);
+  const valueTextFor = (v) => {
+    if (getAriaValueText) return getAriaValueText(v);
+    if (formatValue) {
+      const d = formatValue(v);
+      return typeof d === "string" || typeof d === "number" ? String(d) : void 0;
+    }
+    return decimals > 0 ? v.toFixed(decimals) : void 0;
+  };
+  const commit = (nextVals) => {
+    const out = isRange ? nextVals : nextVals[0];
+    if (value === void 0) setInternal(out);
+    onChange?.(out);
+  };
+  const setThumb = (i, raw) => {
+    const next = clampedVals.slice();
+    next[i] = clampSnap(raw);
+    if (isRange) {
+      if (i === 0) next[0] = Math.min(next[0], next[1]);
+      else next[1] = Math.max(next[1], next[0]);
+    }
+    commit(next);
   };
   const fromClientX = (clientX) => {
     const node = trackRef.current;
-    if (!node) return val;
+    if (!node) return clampedVals[0];
     const r = node.getBoundingClientRect();
     const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
     return clampSnap(min + ratio * (max - min));
   };
-  const dragCleanupRef = React24__namespace.default.useRef(null);
-  React24__namespace.default.useEffect(() => () => dragCleanupRef.current?.(), []);
+  const dragCleanupRef = React25__namespace.default.useRef(null);
+  React25__namespace.default.useEffect(() => () => dragCleanupRef.current?.(), []);
   function onPointerDown(e) {
     if (disabled) return;
     e.preventDefault();
+    const posVal = fromClientX(e.clientX);
+    const idx = isRange ? Math.abs(posVal - clampedVals[0]) <= Math.abs(posVal - clampedVals[1]) ? 0 : 1 : 0;
     setDragging(true);
-    setVal(fromClientX(e.clientX));
-    const move = (ev) => setVal(fromClientX(ev.clientX));
+    setThumb(idx, posVal);
+    const move = (ev) => setThumb(idx, fromClientX(ev.clientX));
     const detach = () => {
       window.removeEventListener("pointermove", move);
       window.removeEventListener("pointerup", up);
@@ -9314,54 +9834,68 @@ function Slider({
     window.addEventListener("pointermove", move);
     window.addEventListener("pointerup", up);
   }
-  function onKeyDown(e) {
+  function onThumbKeyDown(e, i) {
     if (disabled) return;
+    const cur = clampedVals[i];
     let next;
-    if (e.key === "ArrowRight" || e.key === "ArrowUp") next = clampSnap(val + step);
-    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = clampSnap(val - step);
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") next = cur + step;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = cur - step;
+    else if (e.key === "PageUp") next = cur + pageStep;
+    else if (e.key === "PageDown") next = cur - pageStep;
     else if (e.key === "Home") next = min;
     else if (e.key === "End") next = max;
     else return;
     e.preventDefault();
-    setVal(next);
+    setThumb(i, next);
   }
   const ticks = showTicks ? Math.floor((max - min) / step) + 1 : 0;
   const labelId = label ? `${fieldId}-label` : void 0;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
-  const display = fmt(val);
-  const valueText = formatValue && (typeof display === "string" || typeof display === "number") ? String(display) : void 0;
+  const headValue = isRange ? `${fmt(clampedVals[0])} \u2013 ${fmt(clampedVals[1])}` : fmt(clampedVals[0]);
+  const fillLo = (Math.min(...clampedVals) - min) / (max - min) * 100;
+  const fillHi = (Math.max(...clampedVals) - min) / (max - min) * 100;
+  const fillStyle = isRange ? { left: `${fillLo}%`, width: `${fillHi - fillLo}%` } : { width: `${fillHi}%` };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-slider ${className}`, "data-tone": tone, "data-disabled": disabled || void 0, ...rest, children: [
     __twcStyles,
+    name ? clampedVals.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: v, disabled: disabled || void 0 }, i)) : null,
     label || showValue ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-slider__head", children: [
       label ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "twc-slider__label", id: labelId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-      showValue ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__value", children: display }) : null
+      showValue ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__value", children: headValue }) : null
     ] }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-slider__track", ref: trackRef, "data-show-bubble": dragging || void 0, onPointerDown, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-slider__rail" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-slider__fill", style: { width: `${pct}%` } }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-slider__fill", style: fillStyle }),
       showTicks ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-slider__ticks", children: Array.from({ length: ticks }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__tick", style: { left: `${ticks > 1 ? i / (ticks - 1) * 100 : 0}%` } }, i)) }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          id: fieldId,
-          className: "twc-slider__thumb",
-          style: { left: `${pct}%` },
-          role: "slider",
-          tabIndex: disabled ? -1 : 0,
-          "aria-valuemin": min,
-          "aria-valuemax": max,
-          "aria-valuenow": val,
-          "aria-valuetext": valueText,
-          "aria-labelledby": labelId,
-          "aria-label": labelId ? void 0 : "Slider",
-          "aria-describedby": error || hint ? descId : void 0,
-          "aria-invalid": invalid || void 0,
-          "aria-disabled": disabled || void 0,
-          onKeyDown,
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__bubble", children: display })
-        }
-      )
+      indices.map((i) => {
+        const tv = clampedVals[i];
+        const p = (tv - min) / (max - min) * 100;
+        const tMin = isRange && i === 1 ? clampedVals[0] : min;
+        const tMax = isRange && i === 0 ? clampedVals[1] : max;
+        const thumbLabel = isRange ? i === 0 ? "Minimum" : "Maximum" : labelId ? void 0 : "Slider";
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: i === 0 ? fieldId : void 0,
+            className: "twc-slider__thumb",
+            style: { left: `${p}%` },
+            role: "slider",
+            tabIndex: disabled ? -1 : 0,
+            "aria-valuemin": tMin,
+            "aria-valuemax": tMax,
+            "aria-valuenow": tv,
+            "aria-valuetext": valueTextFor(tv),
+            "aria-labelledby": isRange ? void 0 : labelId,
+            "aria-label": thumbLabel,
+            "aria-describedby": error || hint ? descId : void 0,
+            "aria-invalid": invalid || void 0,
+            "aria-disabled": disabled || void 0,
+            onKeyDown: (e) => onThumbKeyDown(e, i),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__bubble", children: fmt(tv) })
+          },
+          i
+        );
+      })
     ] }),
     error || hint ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-slider__msgs", children: error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__hint", children: hint }) }) : null
   ] });
@@ -9509,7 +10043,7 @@ function Stepper({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-stepper-styles", STEPPER_CSS);
-  const [activeInternal, setActiveInternal] = React24__namespace.default.useState(defaultActive);
+  const [activeInternal, setActiveInternal] = React25__namespace.default.useState(defaultActive);
   const active = activeProp !== void 0 ? activeProp : activeInternal;
   const handleStep = (i) => {
     if (activeProp === void 0) setActiveInternal(i);
@@ -9641,10 +10175,13 @@ 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 = React24__namespace.default.useId();
+  const autoId = React25__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
+  if (process.env.NODE_ENV !== "production" && !label && !description && !rest["aria-label"] && !rest["aria-labelledby"]) {
+    warnOnce("Switch.no-name", "Switch: no accessible name \u2014 pass `label`, or `aria-label`/`aria-labelledby` for a label-less control (WCAG 4.1.2).");
+  }
   const describedBy = [rest["aria-describedby"], error ? errId : null].filter(Boolean).join(" ") || void 0;
   const control = /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `twc-switch ${className}`, "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, htmlFor: fieldId, children: [
     __twcStyles,
@@ -9660,6 +10197,7 @@ function Switch({
         disabled,
         onChange,
         ...rest,
+        required: required || void 0,
         "aria-required": required || void 0,
         "aria-invalid": invalid || void 0,
         "aria-describedby": describedBy
@@ -9706,6 +10244,13 @@ var TABLE_CSS = `
 .twc-table[data-size="lg"] thead th { padding: var(--space-4) var(--space-5); }
 .twc-table[data-size="lg"] tbody td { padding: var(--space-4) var(--space-5); font-size: var(--text-base); }
 .twc-table[data-sticky="true"] thead th { position: sticky; top: 0; z-index: 2; background: var(--color-surface); box-shadow: inset 0 calc(-1 * var(--border-thin)) 0 0 var(--color-border); }
+.twc-table__caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.twc-table__empty { padding: 30px 12px; text-align: center; color: var(--color-text-subtle); font-size: var(--text-sm); }
+.twc-table__sk { display: inline-block; height: 12px; border-radius: var(--radius-sm); background: var(--color-surface-sunken);
+  position: relative; overflow: hidden; width: var(--_w, 70%); }
+.twc-table__sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-text) 8%, transparent), transparent);
+  animation: twico-shimmer 1.4s infinite; }
 `;
 function Table({
   columns,
@@ -9721,18 +10266,26 @@ function Table({
   selectedKeys,
   stickyHeader = false,
   maxHeight,
+  loading = false,
+  loadingRows = 8,
+  emptyMessage = "No data",
+  ariaLabel,
+  caption,
+  // Pulled out of `rest` so they land on the <table>, not the wrapper <div> (#128).
+  "aria-label": ariaLabelRaw,
+  "aria-labelledby": ariaLabelledby,
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-table-styles", TABLE_CSS);
-  const cols = React24__namespace.default.useMemo(
+  const cols = React25__namespace.default.useMemo(
     () => (columns || []).map((c) => ({ ...c, header: c.headerName, render: c.renderCell })),
     [columns]
   );
   const dataRows = rowsProp || [];
-  const [internalSort, setInternalSort] = React24__namespace.default.useState(defaultSort || { field: null, dir: "asc" });
+  const [internalSort, setInternalSort] = React25__namespace.default.useState(defaultSort || { field: null, dir: "asc" });
   const sort = (sortProp !== void 0 ? sortProp : internalSort) || { field: null, dir: "asc" };
-  const rows = React24__namespace.default.useMemo(() => {
+  const rows = React25__namespace.default.useMemo(() => {
     if (!sortable || !sort.field) return dataRows;
     const col = cols.find((c) => c.field === sort.field);
     if (!col) return dataRows;
@@ -9755,32 +10308,46 @@ function Table({
   const wrapStyle = maxHeight !== void 0 ? { ...rest.style, maxHeight, overflowY: "auto" } : rest.style;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-table-wrap ${className}`, ...rest, style: wrapStyle, children: [
     __twcStyles,
-    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "twc-table", "data-hover": hover || void 0, "data-striped": striped || void 0, "data-size": size, "data-sticky": stickyHeader || void 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: cols.map((c) => {
-        const active = sort.field === c.field;
-        const canSort = sortable && c.sortable !== false;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "th",
-          {
-            "data-align": c.align,
-            "data-sortable": canSort || void 0,
-            "data-active": active || void 0,
-            "data-dir": active ? sort.dir : void 0,
-            style: c.width ? { width: c.width } : void 0,
-            "aria-sort": active ? sort.dir === "asc" ? "ascending" : "descending" : canSort ? "none" : void 0,
-            children: canSort ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-table__sort", onClick: () => toggleSort(c.field), children: [
-              c.header,
-              /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m18 15-6-6-6 6" }) })
-            ] }) : c.header
-          },
-          c.field
-        );
-      }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
-        const k = keyFn(row, i);
-        return /* @__PURE__ */ jsxRuntime.jsx("tr", { "data-selected": selected.has(k) || void 0, children: cols.map((c) => /* @__PURE__ */ jsxRuntime.jsx("td", { "data-align": c.align, children: c.render ? c.render(row[c.field], row, i) : row[c.field] }, c.field)) }, k);
-      }) })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        className: "twc-table",
+        "data-hover": hover || void 0,
+        "data-striped": striped || void 0,
+        "data-size": size,
+        "data-sticky": stickyHeader || void 0,
+        "aria-label": ariaLabelRaw ?? ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-busy": loading || void 0,
+        children: [
+          caption != null ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "twc-table__caption", children: caption }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: cols.map((c) => {
+            const active = sort.field === c.field;
+            const canSort = sortable && c.sortable !== false;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                "data-align": c.align,
+                "data-sortable": canSort || void 0,
+                "data-active": active || void 0,
+                "data-dir": active ? sort.dir : void 0,
+                style: c.width ? { width: c.width } : void 0,
+                "aria-sort": active ? sort.dir === "asc" ? "ascending" : "descending" : canSort ? "none" : void 0,
+                children: canSort ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-table__sort", onClick: () => toggleSort(c.field), children: [
+                  c.header,
+                  /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m18 15-6-6-6 6" }) })
+                ] }) : c.header
+              },
+              c.field
+            );
+          }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: loadingRows }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: cols.map((c) => /* @__PURE__ */ jsxRuntime.jsx("td", { "data-align": c.align, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-table__sk" }) }, c.field)) }, `sk${ri}`)) : rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: cols.length || 1, className: "twc-table__empty", children: emptyMessage }) }) : rows.map((row, i) => {
+            const k = keyFn(row, i);
+            return /* @__PURE__ */ jsxRuntime.jsx("tr", { "data-selected": selected.has(k) || void 0, children: cols.map((c) => /* @__PURE__ */ jsxRuntime.jsx("td", { "data-align": c.align, children: c.render ? c.render(row[c.field], row, i) : row[c.field] }, c.field)) }, k);
+          }) })
+        ]
+      }
+    )
   ] });
 }
 var TABS_CSS = `
@@ -9865,15 +10432,15 @@ function Tabs({
 }) {
   const vertical = orientation === "vertical";
   const __twcStyles = useScopedStyles("twc-tabs-styles", TABS_CSS);
-  const [internal, setInternal] = React24__namespace.default.useState(defaultValue ?? items[0]?.value);
+  const [internal, setInternal] = React25__namespace.default.useState(defaultValue ?? items[0]?.value);
   const active = value ?? internal;
-  const listRef = React24__namespace.default.useRef(null);
-  const [ind, setInd] = React24__namespace.default.useState({ left: 0, width: 0, top: 0, height: 0 });
-  const baseId = React24__namespace.default.useId();
+  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 tabIdAt = (i) => `${baseId}-tab-${i}`;
   const panelId = `${baseId}-panel`;
   const activeIndex = items.findIndex((it) => it.value === active);
-  const updateIndicator = React24__namespace.default.useCallback(() => {
+  const updateIndicator = React25__namespace.default.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const el = list.querySelector('[data-active="true"]');
@@ -9882,10 +10449,10 @@ function Tabs({
       if (!vertical) el.scrollIntoView?.({ inline: "nearest", block: "nearest" });
     }
   }, [vertical]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     updateIndicator();
   }, [active, updateIndicator, items, orientation]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     const r = () => updateIndicator();
     window.addEventListener("resize", r);
     if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
@@ -10030,20 +10597,8 @@ 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
   ] });
 }
-function Textarea({
-  label,
-  hint,
-  error,
-  required = false,
-  size = "md",
-  tone = "primary",
-  rows = 4,
-  disabled = false,
-  id,
-  className = "",
-  ...rest
-}) {
-  const __twcStyles = useScopedStyles("twc-textarea-styles", `
+var useIso = typeof document !== "undefined" ? React25__namespace.default.useLayoutEffect : React25__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; }
 .twc-field__req { color: var(--color-danger); }
@@ -10072,11 +10627,74 @@ function Textarea({
 .twc-textarea__el:focus { border-color: var(--_accent); box-shadow: var(--_ring); }
 .twc-textarea__el[aria-invalid="true"] { border-color: var(--color-danger); }
 .twc-textarea__el:disabled { background: var(--color-surface-sunken); opacity: 0.7; cursor: not-allowed; }
-`);
-  const autoId = React24__namespace.default.useId();
+.twc-textarea__el[data-readonly] { background: var(--color-surface-sunken); }
+.twc-textarea__el[data-autosize="true"] { resize: none; overflow: hidden; }
+.twc-field__footer { display: flex; align-items: center; gap: var(--space-2); }
+.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({
+  label,
+  hint,
+  error,
+  required = false,
+  size = "md",
+  tone = "primary",
+  rows = 4,
+  autosize = false,
+  minRows,
+  maxRows,
+  showCount = false,
+  disabled = false,
+  id,
+  className = "",
+  ...rest
+}, ref) {
+  const __twcStyles = useScopedStyles("twc-textarea-styles", TEXTAREA_CSS);
+  const autoId = React25__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 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 count = countControlled ? String(rest.value ?? "").length : len2;
+  const max = rest.maxLength;
+  const showCounter = showCount && max != null;
+  const near = showCounter && count >= Math.floor(max * 0.9);
+  const resize = () => {
+    const el = innerRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const cs = getComputedStyle(el);
+    const line = parseFloat(cs.lineHeight) || 20;
+    const vPad = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+    const vBorder = (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0);
+    const min = (minRows ?? rows) * line + vPad + vBorder;
+    const maxH = maxRows ? maxRows * line + vPad + vBorder : Infinity;
+    const next = Math.min(Math.max(el.scrollHeight + vBorder, min), maxH);
+    el.style.height = `${next}px`;
+    el.style.overflowY = el.scrollHeight + vBorder > maxH ? "auto" : "hidden";
+  };
+  useIso(() => {
+    if (autosize && innerRef.current) resize();
+  }, [autosize, rest.value, minRows, maxRows, rows]);
+  const handleInput = (e) => {
+    rest.onInput?.(e);
+    if (autosize) resize();
+  };
+  const handleChange = (e) => {
+    rest.onChange?.(e);
+    if (showCount && !countControlled) setLen(e.target.value.length);
+  };
+  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;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
@@ -10086,22 +10704,34 @@ function Textarea({
     /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
+        ref: setRef,
         id: fieldId,
         className: "twc-textarea__el",
         "data-size": size,
         "data-tone": tone,
-        rows,
+        "data-autosize": autosize || void 0,
+        "data-readonly": rest.readOnly || void 0,
+        rows: autosize ? minRows ?? rows : rows,
         disabled,
         required: required || void 0,
         "aria-required": required || void 0,
-        "aria-invalid": invalid || void 0,
-        "aria-describedby": error || hint ? descId : void 0,
-        ...rest
+        ...rest,
+        onInput: handleInput,
+        onChange: handleChange,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": describedBy
       }
     ),
-    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
+    error || hint || showCounter ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-field__footer", children: [
+      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,
+      showCounter ? /* @__PURE__ */ jsxRuntime.jsxs("span", { id: countId, className: "twc-field__count", "data-danger": near || void 0, "aria-live": "polite", children: [
+        count,
+        " / ",
+        max
+      ] }) : null
+    ] }) : null
   ] });
-}
+});
 var TIMELINE_CSS = `
 .twc-timeline { display: flex; flex-direction: column; font-family: var(--font-sans); margin: 0; padding: 0; list-style: none; }
 .twc-timeline__item { position: relative; display: flex; gap: var(--space-4); padding-bottom: var(--space-6); }
@@ -10211,28 +10841,29 @@ function Toast({
 }) {
   const resolvedTone = tone === "neutral" ? "default" : tone;
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const onCloseRef = React24__namespace.default.useRef(onClose);
-  React24__namespace.default.useEffect(() => {
+  const onCloseRef = React25__namespace.default.useRef(onClose);
+  React25__namespace.default.useEffect(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const timer = React24__namespace.default.useRef();
-  const stop = React24__namespace.default.useCallback(() => clearTimeout(timer.current), []);
-  const start = React24__namespace.default.useCallback(() => {
+  const timer = React25__namespace.default.useRef();
+  const stop = React25__namespace.default.useCallback(() => clearTimeout(timer.current), []);
+  const start = React25__namespace.default.useCallback(() => {
     stop();
     if (duration && duration !== Infinity && onCloseRef.current) {
       timer.current = setTimeout(() => onCloseRef.current && onCloseRef.current(), duration);
     }
   }, [duration, stop]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     start();
     return stop;
   }, [start, stop]);
+  const role = resolvedTone === "danger" || resolvedTone === "warning" ? "alert" : "status";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `twc-toast ${className}`,
       "data-tone": resolvedTone,
-      role: "status",
+      role,
       ...rest,
       onMouseEnter: (e) => {
         onMouseEnter?.(e);
@@ -10267,30 +10898,30 @@ function Toast({
 }
 function ToastViewport({ children, limit, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const shown = limit && limit > 0 ? React24__namespace.default.Children.toArray(children).slice(-limit) : children;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-toast-viewport ${className}`, ...rest, children: [
+  const shown = limit && limit > 0 ? React25__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 = React24__namespace.default.createContext(null);
+var ToastContext = React25__namespace.default.createContext(null);
 function useToast() {
-  const ctx = React24__namespace.default.useContext(ToastContext);
+  const ctx = React25__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] = React24__namespace.default.useState([]);
-  const idRef = React24__namespace.default.useRef(0);
-  const limitRef = React24__namespace.default.useRef(limit);
-  React24__namespace.default.useEffect(() => {
+  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(() => {
     limitRef.current = limit;
   }, [limit]);
-  const dismiss = React24__namespace.default.useCallback((id) => {
+  const dismiss = React25__namespace.default.useCallback((id) => {
     setToasts((s) => s.filter((t) => t.id !== id));
   }, []);
-  const clear = React24__namespace.default.useCallback(() => setToasts([]), []);
-  const api = React24__namespace.default.useMemo(() => {
+  const clear = React25__namespace.default.useCallback(() => setToasts([]), []);
+  const api = React25__namespace.default.useMemo(() => {
     const push = (opts) => {
       const id = idRef.current += 1;
       const next = typeof opts === "string" ? { title: opts } : opts && typeof opts === "object" ? opts : {};
@@ -10311,7 +10942,7 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
     toast.show = withTone("default");
     return { toast, dismiss, clear };
   }, [dismiss, clear]);
-  const value = React24__namespace.default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
+  const value = React25__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(
@@ -10419,13 +11050,13 @@ function TreeView({
 }) {
   const nodes = items;
   const __twcStyles = useScopedStyles("twc-tree-styles", TREE_CSS);
-  const [expInternal, setExpInternal] = React24__namespace.default.useState(() => new Set(defaultExpanded));
+  const [expInternal, setExpInternal] = React25__namespace.default.useState(() => new Set(defaultExpanded));
   const expanded = expandedProp !== void 0 ? new Set(expandedProp) : expInternal;
-  const [selInternal, setSelInternal] = React24__namespace.default.useState(defaultSelectedId);
+  const [selInternal, setSelInternal] = React25__namespace.default.useState(defaultSelectedId);
   const selectedId = selectedProp !== void 0 ? selectedProp : selInternal;
-  const [focusId, setFocusId] = React24__namespace.default.useState(null);
-  const rowRefs = React24__namespace.default.useRef(/* @__PURE__ */ new Map());
-  const taRef = React24__namespace.default.useRef({ str: "", t: 0 });
+  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 toggle = (id) => {
     const n = new Set(expanded);
     n.has(id) ? n.delete(id) : n.add(id);
@@ -10557,7 +11188,7 @@ function AppShell({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-shell-styles", SHELL_CSS);
-  const wiredSidebar = React24__namespace.default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React24__namespace.default.cloneElement(sidebar, {
+  const wiredSidebar = React25__namespace.default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React25__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
@@ -10699,7 +11330,7 @@ function Grid({
   ...rest
 }) {
   const responsive = columns != null && typeof columns === "object";
-  const uid = React24__namespace.default.useId();
+  const uid = React25__namespace.default.useId();
   const gridId = responsive ? `g${uid.replace(/[^a-zA-Z0-9]/g, "")}` : null;
   let css = "";
   if (responsive) {
@@ -10770,7 +11401,7 @@ function Stack({
   ...rest
 }) {
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref8(rest.href);
-  const kids = divider != null ? React24__namespace.default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsxRuntime.jsx(React24__namespace.default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
+  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(
     Tag2,
     {
@@ -10835,10 +11466,10 @@ 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 = React24__namespace.default.useRef(null);
-  const [copied, setCopied] = React24__namespace.default.useState(false);
-  const timerRef = React24__namespace.default.useRef(null);
-  React24__namespace.default.useEffect(() => () => clearTimeout(timerRef.current), []);
+  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), []);
   const doCopy = () => {
     if (typeof navigator === "undefined" || !navigator.clipboard) return;
     const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
@@ -10957,45 +11588,45 @@ function Text({
   );
 }
 var canUseDOM2 = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicLayoutEffect = canUseDOM2 ? React24__namespace.default.useLayoutEffect : React24__namespace.default.useEffect;
+var useIsomorphicLayoutEffect = canUseDOM2 ? React25__namespace.default.useLayoutEffect : React25__namespace.default.useEffect;
 function useMounted() {
-  const [mounted, setMounted] = React24__namespace.default.useState(false);
-  React24__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React25__namespace.default.useState(false);
+  React25__namespace.default.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function usePrevious(value) {
-  const ref = React24__namespace.default.useRef(void 0);
-  React24__namespace.default.useEffect(() => {
+  const ref = React25__namespace.default.useRef(void 0);
+  React25__namespace.default.useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
 function useToggle(initial = false) {
-  const [on, setOn] = React24__namespace.default.useState(initial);
-  const toggle = React24__namespace.default.useCallback((next) => {
+  const [on, setOn] = React25__namespace.default.useState(initial);
+  const toggle = React25__namespace.default.useCallback((next) => {
     setOn((prev) => typeof next === "boolean" ? next : !prev);
   }, []);
   return [on, toggle, setOn];
 }
 function useDisclosure(initial = false) {
-  const [open, setOpen] = React24__namespace.default.useState(initial);
-  const onOpen = React24__namespace.default.useCallback(() => setOpen(true), []);
-  const onClose = React24__namespace.default.useCallback(() => setOpen(false), []);
-  const onToggle = React24__namespace.default.useCallback(() => setOpen((p) => !p), []);
+  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), []);
   return { open, onOpen, onClose, onToggle, setOpen };
 }
 function useControllableState({ value, defaultValue, onChange } = {}) {
   const isControlled = value !== void 0;
-  const [uncontrolled, setUncontrolled] = React24__namespace.default.useState(defaultValue);
+  const [uncontrolled, setUncontrolled] = React25__namespace.default.useState(defaultValue);
   const current = isControlled ? value : uncontrolled;
-  const ref = React24__namespace.default.useRef({ current, isControlled, onChange });
+  const ref = React25__namespace.default.useRef({ current, isControlled, onChange });
   useIsomorphicLayoutEffect(() => {
     ref.current = { current, isControlled, onChange };
   });
-  const wasControlled = React24__namespace.default.useRef(isControlled);
-  React24__namespace.default.useEffect(() => {
+  const wasControlled = React25__namespace.default.useRef(isControlled);
+  React25__namespace.default.useEffect(() => {
     if (wasControlled.current !== isControlled) {
       warnOnce(
         "useControllableState:switch",
@@ -11004,7 +11635,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
       wasControlled.current = isControlled;
     }
   });
-  const setValue = React24__namespace.default.useCallback((next) => {
+  const setValue = React25__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;
@@ -11015,7 +11646,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
 }
 function useMediaQuery(query, { defaultValue = false, initializeWithValue = false } = {}) {
   const get = () => canUseDOM2 ? window.matchMedia(query).matches : defaultValue;
-  const [matches3, setMatches] = React24__namespace.default.useState(initializeWithValue ? get : defaultValue);
+  const [matches3, setMatches] = React25__namespace.default.useState(initializeWithValue ? get : defaultValue);
   useIsomorphicLayoutEffect(() => {
     if (!canUseDOM2) return void 0;
     const mql = window.matchMedia(query);
@@ -11031,7 +11662,7 @@ function usePrefersReducedMotion() {
 }
 function useColorScheme({ storageKey = "twico-theme", attribute = "class", element, disableTransitionsOnChange = true } = {}) {
   const getTarget = () => element || (canUseDOM2 ? document.documentElement : null);
-  const firstApply = React24__namespace.default.useRef(true);
+  const firstApply = React25__namespace.default.useRef(true);
   const read = () => {
     if (!canUseDOM2) return "light";
     try {
@@ -11041,8 +11672,8 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     }
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   };
-  const [theme, setThemeState] = React24__namespace.default.useState(read);
-  const apply = React24__namespace.default.useCallback(
+  const [theme, setThemeState] = React25__namespace.default.useState(read);
+  const apply = React25__namespace.default.useCallback(
     (t) => {
       const target = getTarget();
       if (!target) return;
@@ -11068,11 +11699,11 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   useIsomorphicLayoutEffect(() => {
     apply(theme);
   }, [theme, apply]);
-  const themeRef = React24__namespace.default.useRef(theme);
+  const themeRef = React25__namespace.default.useRef(theme);
   useIsomorphicLayoutEffect(() => {
     themeRef.current = theme;
   }, [theme]);
-  const setTheme = React24__namespace.default.useCallback(
+  const setTheme = React25__namespace.default.useCallback(
     (t) => {
       setThemeState(t);
       try {
@@ -11083,10 +11714,10 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     },
     [storageKey]
   );
-  const toggle = React24__namespace.default.useCallback(() => {
+  const toggle = React25__namespace.default.useCallback(() => {
     setTheme(themeRef.current === "dark" ? "light" : "dark");
   }, [setTheme]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const sync = () => setThemeState(read());
     const onStorage = (e) => {
@@ -11102,14 +11733,14 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   return { theme, setTheme, toggle, isDark: theme === "dark" };
 }
 function useEventListener(eventName, handler, element, options) {
-  const saved = React24__namespace.default.useRef(handler);
+  const saved = React25__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;
-  React24__namespace.default.useEffect(() => {
+  React25__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 };
@@ -11119,11 +11750,11 @@ function useEventListener(eventName, handler, element, options) {
   }, [eventName, element, capture, passive, once]);
 }
 function useClickOutside(ref, handler, events = ["mousedown", "touchstart"]) {
-  const saved = React24__namespace.default.useRef(handler);
+  const saved = React25__namespace.default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const listener = (e) => {
       const el = ref && ref.current;
@@ -11158,8 +11789,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   };
-  const [stored, setStored] = React24__namespace.default.useState(read);
-  const setValue = React24__namespace.default.useCallback(
+  const [stored, setStored] = React25__namespace.default.useState(read);
+  const setValue = React25__namespace.default.useCallback(
     (value) => {
       setStored((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -11175,8 +11806,8 @@ function useLocalStorage(key, initialValue) {
   return [stored, setValue];
 }
 function useCopyToClipboard(timeout = 1500) {
-  const [copied, setCopied] = React24__namespace.default.useState(false);
-  const copy = React24__namespace.default.useCallback(async (text) => {
+  const [copied, setCopied] = React25__namespace.default.useState(false);
+  const copy = React25__namespace.default.useCallback(async (text) => {
     if (!canUseDOM2 || !navigator.clipboard) {
       setCopied(false);
       return false;
@@ -11190,7 +11821,7 @@ function useCopyToClipboard(timeout = 1500) {
       return false;
     }
   }, []);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!copied) return void 0;
     const t = setTimeout(() => setCopied(false), timeout);
     return () => clearTimeout(t);
@@ -11198,23 +11829,23 @@ function useCopyToClipboard(timeout = 1500) {
   return { copied, copy };
 }
 function useDebouncedValue(value, delay = 200) {
-  const [debounced, setDebounced] = React24__namespace.default.useState(value);
-  React24__namespace.default.useEffect(() => {
+  const [debounced, setDebounced] = React25__namespace.default.useState(value);
+  React25__namespace.default.useEffect(() => {
     const t = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(t);
   }, [value, delay]);
   return debounced;
 }
 function useDebouncedCallback(callback, delay = 200) {
-  const saved = React24__namespace.default.useRef(callback);
-  const timer = React24__namespace.default.useRef(null);
+  const saved = React25__namespace.default.useRef(callback);
+  const timer = React25__namespace.default.useRef(null);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React24__namespace.default.useEffect(() => () => {
+  React25__namespace.default.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  return React24__namespace.default.useCallback(
+  return React25__namespace.default.useCallback(
     (...args) => {
       if (timer.current) clearTimeout(timer.current);
       timer.current = setTimeout(() => saved.current(...args), delay);
@@ -11223,33 +11854,33 @@ function useDebouncedCallback(callback, delay = 200) {
   );
 }
 function useInterval(callback, delay) {
-  const saved = React24__namespace.default.useRef(callback);
+  const saved = React25__namespace.default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React24__namespace.default.useEffect(() => {
+  React25__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 = React24__namespace.default.useRef(callback);
+  const saved = React25__namespace.default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setTimeout(() => saved.current(), delay);
     return () => clearTimeout(id);
   }, [delay]);
 }
 function useWindowSize() {
-  const [size, setSize] = React24__namespace.default.useState(() => ({
+  const [size, setSize] = React25__namespace.default.useState(() => ({
     width: canUseDOM2 ? window.innerWidth : 0,
     height: canUseDOM2 ? window.innerHeight : 0
   }));
-  React24__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
     onResize();
@@ -11259,8 +11890,8 @@ function useWindowSize() {
   return size;
 }
 function useHover(ref) {
-  const [hovered, setHovered] = React24__namespace.default.useState(false);
-  React24__namespace.default.useEffect(() => {
+  const [hovered, setHovered] = React25__namespace.default.useState(false);
+  React25__namespace.default.useEffect(() => {
     const el = ref && ref.current;
     if (!el) return void 0;
     const on = () => setHovered(true);
@@ -11276,8 +11907,8 @@ function useHover(ref) {
 }
 function useIntersectionObserver(ref, options = {}) {
   const { root = null, rootMargin = "0px", threshold = 0 } = options;
-  const [entry, setEntry] = React24__namespace.default.useState(null);
-  React24__namespace.default.useEffect(() => {
+  const [entry, setEntry] = React25__namespace.default.useState(null);
+  React25__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 });
@@ -11286,30 +11917,13 @@ function useIntersectionObserver(ref, options = {}) {
   }, [ref, root, rootMargin, JSON.stringify(threshold)]);
   return entry;
 }
-var __scrollLockCount = 0;
-var __scrollLockSaved = "";
-function useScrollLock(locked = true) {
-  useIsomorphicLayoutEffect(() => {
-    if (!canUseDOM2 || !locked) return void 0;
-    if (__scrollLockCount === 0) {
-      __scrollLockSaved = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
-    }
-    __scrollLockCount += 1;
-    return () => {
-      __scrollLockCount -= 1;
-      if (__scrollLockCount === 0) {
-        document.body.style.overflow = __scrollLockSaved;
-      }
-    };
-  }, [locked]);
-}
 function useId(prefix = "twc") {
-  const raw = React24__namespace.default.useId();
+  const raw = React25__namespace.default.useId();
   return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
 }
 var useFocusTrap2 = useFocusTrap;
 var usePortal2 = usePortal;
+var useScrollLock2 = useScrollLock;
 
 exports.Accordion = Accordion;
 exports.Alert = Alert;
@@ -11353,6 +11967,7 @@ exports.Pagination = Pagination;
 exports.Popover = Popover;
 exports.Progress = Progress;
 exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
 exports.Rating = Rating;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
@@ -11396,7 +12011,7 @@ exports.useMounted = useMounted;
 exports.usePortal = usePortal2;
 exports.usePrefersReducedMotion = usePrefersReducedMotion;
 exports.usePrevious = usePrevious;
-exports.useScrollLock = useScrollLock;
+exports.useScrollLock = useScrollLock2;
 exports.useTimeout = useTimeout;
 exports.useToast = useToast;
 exports.useToggle = useToggle;