twico-ui 1.3.2 → 1.5.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React23 = require('react');
+var React24 = 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 React23__namespace = /*#__PURE__*/_interopNamespace(React23);
+var React24__namespace = /*#__PURE__*/_interopNamespace(React24);
 
 // components/navigation/Accordion.jsx
-var SUPPORTS_STYLE_HOIST = parseInt(String(React23__namespace.version), 10) >= 19;
+var SUPPORTS_STYLE_HOIST = parseInt(String(React24__namespace.version), 10) >= 19;
 function useScopedStyles(id, css) {
-  React23__namespace.useInsertionEffect(() => {
+  React24__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 ? React23__namespace.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
+  return SUPPORTS_STYLE_HOIST ? React24__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);
@@ -50,7 +50,9 @@ var ACCORDION_CSS = `
   color: var(--color-text); text-align: start;
   transition: background-color var(--duration-fast) var(--ease-standard);
 }
-.twc-accordion__trigger:hover { background: var(--color-surface-sunken); }
+.twc-accordion__heading { margin: 0; font: inherit; }
+.twc-accordion__trigger:hover:not(:disabled) { background: var(--color-surface-sunken); }
+.twc-accordion__trigger:disabled { opacity: 0.45; cursor: not-allowed; }
 .twc-accordion__trigger:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-accordion__label { flex: 1; }
 .twc-accordion__chevron { flex: none; color: var(--color-text-subtle); transition: transform var(--duration-base) var(--ease-spring); }
@@ -69,14 +71,19 @@ function Accordion({
   defaultOpen = [],
   open: openProp,
   onOpenChange,
+  headingLevel = 3,
   className = "",
+  onKeyDown: onKeyDownProp,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-accordion-styles", ACCORDION_CSS);
-  const [internal, setInternal] = React23__namespace.default.useState(() => new Set(defaultOpen));
+  const rootRef = React24__namespace.default.useRef(null);
+  const [internal, setInternal] = React24__namespace.default.useState(() => new Set(defaultOpen));
   const open = openProp !== void 0 ? new Set(openProp) : internal;
-  const baseId = React23__namespace.default.useId();
+  const baseId = React24__namespace.default.useId();
   function toggle(val) {
+    const item = items.find((x) => x.value === val);
+    if (item?.disabled) return;
     const next = new Set(open);
     if (next.has(val)) next.delete(val);
     else {
@@ -86,18 +93,47 @@ function Accordion({
     if (openProp === void 0) setInternal(next);
     onOpenChange?.([...next]);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-accordion ${className}`, ...rest, children: [
+  function handleKeyDown(e) {
+    onKeyDownProp?.(e);
+    if (!(e.target instanceof HTMLElement) || !e.target.classList.contains("twc-accordion__trigger")) return;
+    const triggers = Array.from(rootRef.current.querySelectorAll(".twc-accordion__trigger")).filter((b) => !b.disabled);
+    const i = triggers.indexOf(e.target);
+    if (i < 0) return;
+    const len2 = triggers.length;
+    let next;
+    switch (e.key) {
+      case "ArrowDown":
+        next = (i + 1) % len2;
+        break;
+      case "ArrowUp":
+        next = (i - 1 + len2) % len2;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = len2 - 1;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    triggers[next].focus();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: `twc-accordion ${className}`, onKeyDown: handleKeyDown, ...rest, children: [
     __twcStyles,
     items.map((it, i) => {
       const isOpen = open.has(it.value);
       const triggerId = `${baseId}-trigger-${i}`;
       const panelId = `${baseId}-panel-${i}`;
+      const lvl = Math.min(6, Math.max(1, it.headingLevel ?? headingLevel));
+      const Heading2 = `h${lvl}`;
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-accordion__item", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", id: triggerId, className: "twc-accordion__trigger", "data-open": isOpen || void 0, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(it.value), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading2, { className: "twc-accordion__heading", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", id: triggerId, className: "twc-accordion__trigger", "data-open": isOpen || void 0, disabled: it.disabled || void 0, "aria-disabled": it.disabled || void 0, "data-disabled": it.disabled || void 0, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(it.value), children: [
           it.icon,
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-accordion__label", children: it.label }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) }) })
-        ] }),
+        ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-accordion__panel", id: panelId, role: "region", "aria-labelledby": triggerId, "data-open": isOpen || void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-accordion__panel-inner", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-accordion__content", children: it.content }) }) })
       ] }, it.value);
     })
@@ -153,11 +189,15 @@ function Alert({
   title,
   icon,
   onClose,
+  live,
+  closeLabel = "Dismiss",
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-alert-styles", ALERT_CSS);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-alert ${className}`, "data-tone": tone, "data-variant": variant, role: "alert", ...rest, children: [
+  const resolvedLive = live ?? (tone === "danger" || tone === "warning" ? "assertive" : tone === "success" || tone === "info" ? "polite" : "off");
+  const liveProps = resolvedLive === "assertive" ? { role: "alert" } : resolvedLive === "polite" ? { role: "status" } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-alert ${className}`, "data-tone": tone, "data-variant": variant, ...liveProps, ...rest, children: [
     __twcStyles,
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-alert__icon", "aria-hidden": "true", children: icon || /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
@@ -167,7 +207,7 @@ function Alert({
       title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-alert__title", children: title }) : null,
       children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-alert__desc", children }) : null
     ] }),
-    onClose ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-alert__close", onClick: onClose, "aria-label": "Dismiss", 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
+    onClose ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-alert__close", onClick: onClose, "aria-label": closeLabel, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
   ] });
 }
 var AVATAR_CSS = `
@@ -208,22 +248,29 @@ function initials(name) {
 function safeSrc(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
-  return s.startsWith("javascript:") || s.startsWith("vbscript:") ? void 0 : url;
+  if (s.startsWith("javascript:") || s.startsWith("vbscript:")) return void 0;
+  if (s.startsWith("data:") && !s.startsWith("data:image/")) return void 0;
+  return url;
 }
+var STATUS_LABELS = { online: "Online", busy: "Busy", away: "Away", offline: "Offline" };
 function Avatar({
   src,
   name,
   size = "md",
   square = false,
   status,
+  statusLabel,
+  statusLabels,
   ring = false,
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-avatar-styles", AVATAR_CSS);
-  const [errored, setErrored] = React23__namespace.default.useState(false);
+  const [errored, setErrored] = React24__namespace.default.useState(false);
   const cleanSrc = safeSrc(src);
   const showImg = cleanSrc && !errored;
+  const _statusLabel = status ? statusLabel ?? statusLabels?.[status] ?? STATUS_LABELS[status] : void 0;
+  const baseName = name || "avatar";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -231,12 +278,12 @@ function Avatar({
       "data-size": size,
       "data-square": square || void 0,
       role: "img",
-      "aria-label": name || "avatar",
+      "aria-label": _statusLabel ? `${baseName}, ${_statusLabel}` : baseName,
       ...rest,
       children: [
         __twcStyles,
         showImg ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: "twc-avatar__img", src: cleanSrc, alt: name || "", onError: () => setErrored(true) }, cleanSrc) : initials(name),
-        status ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-avatar__status", "data-status": status }) : null
+        status ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-avatar__status", "data-status": status, title: _statusLabel }) : null
       ]
     }
   );
@@ -277,6 +324,11 @@ var MENU_CSS = `
 .twc-menu__item-label { flex: 1 1 auto; min-width: 0; }
 .twc-menu__shortcut { margin-inline-start: auto; padding-inline-start: var(--space-3); font-size: var(--text-xs); color: var(--color-text-subtle); font-family: var(--font-mono); }
 `;
+var safeHref = (url) => {
+  if (url == null) return void 0;
+  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
+  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
+};
 function Menu({
   trigger,
   items,
@@ -286,26 +338,29 @@ function Menu({
   open: openProp,
   defaultOpen = false,
   onOpenChange,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-menu-styles", MENU_CSS);
-  const [openState, setOpenState] = React23__namespace.default.useState(defaultOpen);
-  const [render, setRender] = React23__namespace.default.useState(false);
-  const [pos, setPos] = React23__namespace.default.useState(null);
-  const [active, setActive] = React23__namespace.default.useState(-1);
-  const wrapRef = React23__namespace.default.useRef(null);
-  const menuRef = React23__namespace.default.useRef(null);
-  const menuId = React23__namespace.default.useId();
+  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 headerId = `${menuId}-header`;
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React23__namespace.default.useRef(open);
+  const openRef = React24__namespace.default.useRef(open);
   openRef.current = open;
-  const controlledRef = React23__namespace.default.useRef(controlled);
+  const controlledRef = React24__namespace.default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React23__namespace.default.useRef(onOpenChange);
+  const onOpenChangeRef = React24__namespace.default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React23__namespace.default.useCallback((next) => {
+  const setOpen = React24__namespace.default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -313,7 +368,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 = React23__namespace.default.useCallback(() => {
+  const place = React24__namespace.default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -328,7 +383,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]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -346,7 +401,7 @@ function Menu({
       document.removeEventListener("mousedown", onDown);
     };
   }, [open, place]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -392,8 +447,12 @@ function Menu({
       e.preventDefault();
       const it = items[active];
       if (it && !it.disabled) {
-        it.onClick?.();
-        setOpen(false);
+        const el = typeof document !== "undefined" ? document.getElementById(`${menuId}-item-${active}`) : null;
+        if (el && el.tagName === "A") el.click();
+        else {
+          it.onClick?.();
+          setOpen(false);
+        }
       }
     }
   }
@@ -407,29 +466,32 @@ function Menu({
       "data-align": align,
       "data-flip": pos.flip || void 0,
       role: "menu",
+      "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", children: header }) : null,
+        header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-menu__header", id: headerId, 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}`);
+          const href = !it.disabled ? safeHref(it.href) : void 0;
+          const Tag2 = href ? "a" : "button";
           return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+            Tag2,
             {
-              type: "button",
               id: `${menuId}-item-${i}`,
               className: "twc-menu__item",
               role: "menuitem",
               tabIndex: -1,
               "data-danger": it.danger || void 0,
               "data-active": active === i || void 0,
-              disabled: it.disabled,
               onMouseEnter: () => setActive(i),
               onClick: () => {
                 it.onClick?.();
                 setOpen(false);
               },
+              ...Tag2 === "button" ? { type: "button", disabled: it.disabled } : { href, target: it.target, rel: it.rel },
               children: [
                 it.icon,
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-menu__item-label", children: it.label }),
@@ -443,7 +505,7 @@ function Menu({
     }
   ) : null;
   const activeDescId = open && active >= 0 ? `${menuId}-item-${active}` : void 0;
-  const triggerEl = React23__namespace.default.isValidElement(trigger) ? React23__namespace.default.cloneElement(trigger, {
+  const triggerEl = React24__namespace.default.isValidElement(trigger) ? React24__namespace.default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -526,7 +588,7 @@ function AvatarMenu({
       ]
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Menu, { className, trigger, items, header, align, width: 240, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(Menu, { className, trigger, items, header, align, width: 240, "aria-label": `${name || "Account"} menu`, ...rest });
 }
 var BADGE_CSS = `
 .twc-badge {
@@ -593,7 +655,7 @@ var BREADCRUMB_CSS = `
 .twc-breadcrumb__ellipsis { border: none; background: transparent; cursor: pointer; color: var(--color-text-subtle); padding: 3px 7px; border-radius: var(--radius-sm); font: inherit; }
 .twc-breadcrumb__ellipsis:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 `;
-function safeHref(url) {
+function safeHref2(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -607,7 +669,7 @@ function Breadcrumb({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-breadcrumb-styles", BREADCRUMB_CSS);
-  const [expanded, setExpanded] = React23__namespace.default.useState(false);
+  const [expanded, setExpanded] = React24__namespace.default.useState(false);
   const sep = separator || /* @__PURE__ */ jsxRuntime.jsx(ChevronSep, {});
   let display = items;
   if (maxItems > 0 && items.length > maxItems && !expanded) {
@@ -620,7 +682,7 @@ function Breadcrumb({
     __twcStyles,
     display.map((it, i) => {
       const last = i === display.length - 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React24__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",
           {
@@ -636,7 +698,7 @@ function Breadcrumb({
           "a",
           {
             className: "twc-breadcrumb__item",
-            href: safeHref(it.href) || "#",
+            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,
@@ -739,7 +801,7 @@ var CSS2 = `
   animation: twico-ripple var(--duration-slow) var(--ease-out) forwards;
 }
 `;
-function safeHref2(url) {
+function safeHref3(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -761,7 +823,7 @@ function Button({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-btn-styles", CSS2);
-  const [ripples, setRipples] = React23__namespace.default.useState([]);
+  const [ripples, setRipples] = React24__namespace.default.useState([]);
   const Tag2 = as;
   const inert = Tag2 === "a" && (disabled || loading);
   function handleClick(e) {
@@ -790,7 +852,7 @@ function Button({
       "data-block": fullWidth || void 0,
       disabled: Tag2 === "button" ? disabled || loading : void 0,
       type: Tag2 === "button" ? "button" : void 0,
-      href: inert ? void 0 : safeHref2(href),
+      href: inert ? void 0 : safeHref3(href),
       "aria-disabled": inert || void 0,
       tabIndex: inert ? -1 : void 0,
       "aria-busy": loading || void 0,
@@ -898,6 +960,15 @@ var CAROUSEL_CSS = `
 .twc-carousel__dot { width: 8px; height: 8px; border-radius: var(--radius-full); border: none; padding: 0; cursor: pointer;
   background: var(--color-border-strong); transition: width var(--duration-base) var(--ease-spring), background-color var(--duration-fast); }
 .twc-carousel__dot[data-active="true"] { width: 22px; background: var(--color-primary); }
+.twc-carousel__pause { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
+  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--color-surface) 88%, transparent); color: var(--color-text);
+  border: var(--border-thin) solid var(--color-border); box-shadow: var(--shadow-sm); cursor: pointer;
+  backdrop-filter: blur(6px); transition: background-color var(--duration-fast) var(--ease-standard); }
+.twc-carousel__pause:hover { background: var(--color-surface); }
+.twc-carousel__pause svg { width: 15px; height: 15px; display: block; }
+.twc-carousel__live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
 `;
 function Carousel({
   children,
@@ -906,35 +977,76 @@ function Carousel({
   onIndexChange,
   showArrows = true,
   showDots = true,
+  showPauseButton = true,
   loop = true,
   autoPlay = false,
   interval = 4e3,
+  label,
+  pauseLabel = "Pause",
+  playLabel = "Play",
   className = "",
+  onKeyDown: onKeyDownProp,
+  "aria-label": ariaLabelProp,
+  "aria-labelledby": ariaLabelledbyProp,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-carousel-styles", CAROUSEL_CSS);
-  const slides = React23__namespace.default.Children.toArray(children);
+  const slides = React24__namespace.default.Children.toArray(children);
   const count = slides.length;
-  const [internal, setInternal] = React23__namespace.default.useState(defaultIndex);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultIndex);
   const index = indexProp !== void 0 ? indexProp : internal;
-  const [paused, setPaused] = React23__namespace.default.useState(false);
-  const setIndex = React23__namespace.default.useCallback((i) => {
+  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(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return void 0;
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const on = () => setPrefersReduced(mql.matches);
+    on();
+    mql.addEventListener("change", on);
+    return () => mql.removeEventListener("change", on);
+  }, []);
+  const setIndex = React24__namespace.default.useCallback((i) => {
     if (indexProp === void 0) setInternal(i);
     onIndexChange?.(i);
   }, [indexProp, onIndexChange]);
-  const go = React23__namespace.default.useCallback((i) => {
+  const go = React24__namespace.default.useCallback((i) => {
     setIndex(loop ? (i + count) % count : Math.min(Math.max(i, 0), count - 1));
   }, [count, loop, setIndex]);
-  React23__namespace.default.useEffect(() => {
-    if (!autoPlay || paused || count <= 1) return;
+  const autoRotating = autoPlay && !paused && !userPaused && !prefersReduced && count > 1;
+  React24__namespace.default.useEffect(() => {
+    if (!autoRotating) return void 0;
     const t = setInterval(() => {
       const next = loop ? (index + 1) % count : index + 1 >= count ? index : index + 1;
       if (next !== index) setIndex(next);
     }, interval);
     return () => clearInterval(t);
-  }, [autoPlay, paused, count, interval, loop, index, setIndex]);
+  }, [autoRotating, count, interval, loop, index, setIndex]);
   const atStart = !loop && index === 0;
   const atEnd = !loop && index === count - 1;
+  const handleKeyDown = (e) => {
+    onKeyDownProp?.(e);
+    if (e.defaultPrevented) return;
+    if (e.target.closest && e.target.closest('input, textarea, select, [contenteditable="true"]')) return;
+    switch (e.key) {
+      case "ArrowLeft":
+        go(index - 1);
+        break;
+      case "ArrowRight":
+        go(index + 1);
+        break;
+      case "Home":
+        go(0);
+        break;
+      case "End":
+        go(count - 1);
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+  };
+  const ariaLabel = ariaLabelledbyProp ? void 0 : ariaLabelProp ?? label ?? "Carousel";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -943,12 +1055,17 @@ function Carousel({
       onMouseLeave: () => setPaused(false),
       onFocusCapture: () => setPaused(true),
       onBlurCapture: () => setPaused(false),
+      onKeyDown: handleKeyDown,
       role: "region",
       "aria-roledescription": "carousel",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledbyProp,
       ...rest,
       children: [
         __twcStyles,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-carousel__viewport", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-carousel__track", style: { transform: `translateX(-${index * 100}%)` }, children: slides.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-carousel__slide", role: "group", "aria-roledescription": "slide", "aria-label": `${i + 1} of ${count}`, "aria-hidden": i !== index || void 0, inert: i !== index || void 0, children: s }, i)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-carousel__viewport", tabIndex: 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-carousel__track", style: { transform: `translateX(-${index * 100}%)` }, children: slides.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-carousel__slide", role: "group", "aria-roledescription": "slide", "aria-label": `${i + 1} of ${count}`, "aria-hidden": i !== index || void 0, inert: i !== index || void 0, children: s }, i)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-carousel__live", "aria-live": autoRotating ? "off" : "polite", "aria-atomic": "true", children: count > 1 ? `Slide ${index + 1} of ${count}` : null }),
+        autoPlay && showPauseButton && count > 1 ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-carousel__pause", "aria-label": userPaused ? playLabel : pauseLabel, onClick: () => setUserPaused((v) => !v), children: userPaused ? /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 5h4v14H6zM14 5h4v14h-4z" }) }) }) : null,
         showArrows && count > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-carousel__arrow", "data-dir": "prev", "aria-label": "Previous", disabled: atStart, onClick: () => go(index - 1), 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: "m15 18-6-6 6-6" }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-carousel__arrow", "data-dir": "next", "aria-label": "Next", disabled: atEnd, onClick: () => go(index + 1), 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: "m9 18 6-6-6-6" }) }) })
@@ -971,6 +1088,7 @@ var CHART_CSS = `
 .twc-chart__leg { display: inline-flex; align-items: center; gap: 6px; }
 .twc-chart__leg-sw { width: 10px; height: 10px; border-radius: 3px; }
 @keyframes twc-chart-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
+.twc-chart__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 `;
 var SERIES_COLORS = ["var(--brand-500)", "var(--sky-500)", "var(--emerald-500)", "var(--amber-500)", "var(--rose-500)"];
 function Chart({
@@ -985,10 +1103,14 @@ function Chart({
   valueFormat,
   ariaLabel,
   "aria-label": ariaLabelProp,
+  tableFallback = true,
+  caption,
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-chart-styles", CHART_CSS);
+  const uid = React24__namespace.default.useId();
+  const tableId = tableFallback ? `${uid}-table` : void 0;
   const keys = series || ["value"];
   const palette = colors && colors.length ? colors : SERIES_COLORS;
   const W = 600, H = height, padL = showAxis ? 40 : 8, padR = 8, padT = 12, padB = showAxis ? 26 : 8;
@@ -1001,7 +1123,7 @@ function Chart({
   const svgAriaLabel = ariaLabelProp ?? ariaLabel ?? `${type} chart`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-chart ${className}`, ...rest, children: [
     __twcStyles,
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": svgAriaLabel, preserveAspectRatio: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": svgAriaLabel, "aria-describedby": tableId, preserveAspectRatio: "none", children: [
       showGrid ? Array.from({ length: ticks + 1 }).map((_, i) => {
         const gy = padT + innerH / ticks * i;
         return /* @__PURE__ */ jsxRuntime.jsx("line", { className: "twc-chart__grid", x1: padL, y1: gy, x2: W - padR, y2: gy }, i);
@@ -1051,6 +1173,17 @@ function Chart({
         return /* @__PURE__ */ jsxRuntime.jsx("text", { className: "twc-chart__axis", x: cx, y: H - 8, textAnchor: "middle", children: d.label }, i);
       }) : null
     ] }),
+    tableFallback ? /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "twc-chart__sr", id: tableId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("caption", { children: caption ?? svgAriaLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col" }),
+        keys.map((k) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: k }, k))
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.map((d, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "row", children: d.label }),
+        keys.map((k) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: fmt(Number(d[k]) || 0) }, k))
+      ] }, i)) })
+    ] }) : null,
     showLegend && keys.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-chart__legend", children: keys.map((k, si) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-chart__leg", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-chart__leg-sw", style: { background: palette[si % palette.length] } }),
       k
@@ -1123,12 +1256,12 @@ 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 = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
-  const ref = React23__namespace.default.useRef(null);
-  React23__namespace.default.useEffect(() => {
+  const ref = React24__namespace.default.useRef(null);
+  React24__namespace.default.useEffect(() => {
     if (ref.current) ref.current.indeterminate = indeterminate;
   }, [indeterminate]);
   const describedBy = [rest["aria-describedby"], error ? errId : null].filter(Boolean).join(" ") || void 0;
@@ -1265,20 +1398,20 @@ function ColorPicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
   const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
-  const [internal, setInternal] = React23__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
   const hex = (value !== void 0 ? value : internal) || "#000000";
-  const lastValidRef = React23__namespace.default.useRef(hex);
+  const lastValidRef = React24__namespace.default.useRef(hex);
   if (/^#[0-9a-f]{6}$/i.test(hex)) lastValidRef.current = hex;
-  const [open, setOpen] = React23__namespace.default.useState(false);
-  const [hsv, setHsv] = React23__namespace.default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
-  const [coords, setCoords] = React23__namespace.default.useState(null);
-  const wrapRef = React23__namespace.default.useRef(null);
-  const triggerRef = React23__namespace.default.useRef(null);
-  const popRef = React23__namespace.default.useRef(null);
-  const areaRef = React23__namespace.default.useRef(null);
-  const hueRef = React23__namespace.default.useRef(null);
+  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 POP_W = 240;
-  const place = React23__namespace.default.useCallback(() => {
+  const place = React24__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1289,7 +1422,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 });
   }, []);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -1300,17 +1433,17 @@ function ColorPicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  const labelId = React23__namespace.default.useId();
+  const labelId = React24__namespace.default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
-  React23__namespace.default.useEffect(() => {
+  React24__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]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1327,8 +1460,8 @@ function ColorPicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React23__namespace.default.useRef(false);
-  React23__namespace.default.useEffect(() => {
+  const prevOpen = React24__namespace.default.useRef(false);
+  React24__namespace.default.useEffect(() => {
     let id;
     if (!prevOpen.current && open) {
       id = setTimeout(() => areaRef.current?.focus({ preventScroll: true }), 20);
@@ -1648,29 +1781,29 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
-  const groups = React23__namespace.default.useMemo(() => normalizeGroups(options), [options]);
-  const flat = React23__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React23__namespace.default.useId();
+  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 fieldId = id || autoId;
-  const [internal, setInternal] = React23__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const selected = flat.find((o) => o.value === current);
-  const [open, setOpen] = React23__namespace.default.useState(false);
-  const [query, setQuery] = React23__namespace.default.useState("");
-  const [active, setActive] = React23__namespace.default.useState(0);
-  const [coords, setCoords] = React23__namespace.default.useState(null);
-  const wrapRef = React23__namespace.default.useRef(null);
-  const controlRef = React23__namespace.default.useRef(null);
-  const inputRef = React23__namespace.default.useRef(null);
-  const popRef = React23__namespace.default.useRef(null);
-  const listRef = React23__namespace.default.useRef(null);
-  const activeRef = React23__namespace.default.useRef(null);
-  const fGroups = React23__namespace.default.useMemo(
+  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 = React23__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
-  const place = React23__namespace.default.useCallback(() => {
+  const visible = React24__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const place = React24__namespace.default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1685,7 +1818,7 @@ function Combobox({
       flip
     });
   }, [placement, minWidth]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -1696,7 +1829,7 @@ function Combobox({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1706,10 +1839,10 @@ function Combobox({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (open) ensureVisible(listRef.current, activeRef.current);
   }, [active, open]);
   function openMenu() {
@@ -1752,7 +1885,7 @@ 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(React23__namespace.default.Fragment, { children: [
+  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: [
     g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
@@ -1890,6 +2023,52 @@ function Combobox({
     error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null
   ] });
 }
+var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
+var 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(() => {
+    if (!active || !canUseDOM) return void 0;
+    const node = ref.current;
+    if (!node) return void 0;
+    const prevFocused = document.activeElement;
+    const first = node.querySelector(FOCUSABLE);
+    (first || node).focus();
+    return () => {
+      if (restoreFocus && prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
+    };
+  }, [active]);
+  React24__namespace.default.useEffect(() => {
+    if (!active || !canUseDOM) return void 0;
+    const node = ref.current;
+    const onKey = (e) => {
+      if (e.key !== "Tab" || !node) return;
+      const f = Array.from(node.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null);
+      if (!f.length) {
+        e.preventDefault();
+        node.focus();
+        return;
+      }
+      const first = f[0], last = f[f.length - 1], ae = document.activeElement;
+      if (e.shiftKey) {
+        if (ae === first || ae === node || !node.contains(ae)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (ae === last || !node.contains(ae)) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [active]);
+}
+function usePortal() {
+  return React24__namespace.default.useCallback((node) => {
+    if (typeof document === "undefined") return null;
+    return typeof reactDom.createPortal === "function" ? reactDom.createPortal(node, document.body) : node;
+  }, []);
+}
 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; }
@@ -1935,14 +2114,15 @@ function CommandPalette({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-cmdk-styles", COMMAND_CSS);
-  const [query, setQuery] = React23__namespace.default.useState("");
-  const [active, setActive] = React23__namespace.default.useState(0);
-  const inputRef = React23__namespace.default.useRef(null);
-  const listRef = React23__namespace.default.useRef(null);
-  const paletteRef = React23__namespace.default.useRef(null);
-  const baseId = React23__namespace.default.useId();
-  const [mounted, setMounted] = React23__namespace.default.useState(open);
-  React23__namespace.default.useEffect(() => {
+  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(() => {
     if (open) {
       setMounted(true);
       return;
@@ -1950,7 +2130,7 @@ function CommandPalette({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -1958,58 +2138,26 @@ function CommandPalette({
       document.body.style.overflow = prev;
     };
   }, [open]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (open) {
       setQuery("");
       setActive(0);
-      const t = setTimeout(() => inputRef.current?.focus(), 30);
-      return () => clearTimeout(t);
     }
   }, [open]);
-  React23__namespace.default.useEffect(() => {
-    if (!open) return;
-    const prevFocused = document.activeElement;
-    return () => {
-      if (prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
-    };
-  }, [open]);
-  React23__namespace.default.useEffect(() => {
-    if (!open) return;
-    const focusables = (node) => node ? Array.from(
-      node.querySelectorAll(
-        '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"])'
-      )
-    ).filter((el) => el.offsetParent !== null) : [];
+  useFocusTrap(paletteRef, open && mounted);
+  React24__namespace.default.useEffect(() => {
+    if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
         onClose?.();
-        return;
-      }
-      if (e.key !== "Tab") return;
-      const node = paletteRef.current;
-      const f = focusables(node);
-      if (!f.length) {
-        e.preventDefault();
-        node?.focus();
-        return;
-      }
-      const first = f[0], last = f[f.length - 1], ae = document.activeElement;
-      if (e.shiftKey) {
-        if (ae === first || ae === node || !node.contains(ae)) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else if (ae === last || !node.contains(ae)) {
-        e.preventDefault();
-        first.focus();
       }
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   const q = query.trim().toLowerCase();
-  const filtered = React23__namespace.default.useMemo(() => commands.filter(
+  const filtered = React24__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 = [];
@@ -2024,7 +2172,7 @@ function CommandPalette({
     g.items.push(c);
     flat.push(c);
   });
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
   const run = (cmd) => {
@@ -2044,11 +2192,11 @@ function CommandPalette({
       if (cmd) run(cmd);
     }
   }
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     const node = listRef.current?.querySelector('[data-active="true"]');
     if (node) node.scrollIntoView({ block: "nearest" });
   }, [active]);
-  if (!mounted || typeof document === "undefined") return null;
+  if (!mounted) return null;
   const state = open ? "open" : "closed";
   const listId = `${baseId}-list`;
   const optionId = (i) => `${baseId}-opt-${i}`;
@@ -2114,8 +2262,7 @@ function CommandPalette({
       ] }, g.key || "_")) })
     ] })
   ] });
-  const RD = typeof reactDom.createPortal === "function" ? reactDom.createPortal : null;
-  return RD ? RD(overlay, document.body) : overlay;
+  return renderPortal(overlay);
 }
 var CURRENCIES = {
   USD: { code: "USD", symbol: "$", precision: 2, label: "US Dollar" },
@@ -2218,11 +2365,11 @@ 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 = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const controlled = value !== void 0;
-  const [internal, setInternal] = React23__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [internal, setInternal] = React24__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;
   function handleChange(e) {
@@ -2396,32 +2543,32 @@ function Select({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
-  const groups = React23__namespace.default.useMemo(() => normalizeGroups2(options), [options]);
-  const flat = React23__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React23__namespace.default.useId();
+  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 fieldId = id || autoId;
-  const [internal, setInternal] = React23__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
-  const [open, setOpen] = React23__namespace.default.useState(false);
-  const [render, setRender] = React23__namespace.default.useState(false);
-  const [active, setActive] = React23__namespace.default.useState(0);
-  const [coords, setCoords] = React23__namespace.default.useState(null);
-  const [query, setQuery] = React23__namespace.default.useState("");
-  const wrapRef = React23__namespace.default.useRef(null);
-  const triggerRef = React23__namespace.default.useRef(null);
-  const popRef = React23__namespace.default.useRef(null);
-  const listRef = React23__namespace.default.useRef(null);
-  const activeRef = React23__namespace.default.useRef(null);
-  const searchRef = React23__namespace.default.useRef(null);
+  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 showSearch = searchable === void 0 ? flat.length > 5 : searchable;
-  const fGroups = React23__namespace.default.useMemo(() => {
+  const fGroups = React24__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 = React23__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React24__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
   const selected = flat.find((o) => o.value === current);
-  const place = React23__namespace.default.useCallback(() => {
+  const place = React24__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -2436,7 +2583,7 @@ function Select({
       flip
     });
   }, [placement, minWidth]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -2447,7 +2594,7 @@ function Select({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
@@ -2463,13 +2610,13 @@ function Select({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (open) ensureVisible2(listRef.current, activeRef.current);
   }, [active, open]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -2477,8 +2624,8 @@ function Select({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  const prevOpen = React23__namespace.default.useRef(false);
-  React23__namespace.default.useEffect(() => {
+  const prevOpen = React24__namespace.default.useRef(false);
+  React24__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();
@@ -2551,7 +2698,7 @@ function Select({
         }
       )
     ] }) : 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(React23__namespace.default.Fragment, { children: [
+    /* @__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: [
       g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
       g.options.map((o) => {
         counter += 1;
@@ -2725,19 +2872,19 @@ function CurrencyField({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
-  const autoId = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const curControlled = currency !== void 0;
-  const [curInternal, setCurInternal] = React23__namespace.default.useState(defaultCurrency);
+  const [curInternal, setCurInternal] = React24__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] = React23__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [valInternal, setValInternal] = React24__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 = React23__namespace.default.useMemo(() => {
+  const options = React24__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]);
@@ -2872,12 +3019,12 @@ function Input({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
-  const autoId = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
   const isPassword = type === "password";
-  const [revealed, setRevealed] = React23__namespace.default.useState(false);
+  const [revealed, setRevealed] = React24__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",
@@ -3058,28 +3205,28 @@ function MultiSelect({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
-  const groups = React23__namespace.default.useMemo(() => normalizeGroups3(options), [options]);
-  const flat = React23__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React23__namespace.default.useId();
+  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 fieldId = id || autoId;
-  const [internal, setInternal] = React23__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React23__namespace.default.useState(false);
-  const [query, setQuery] = React23__namespace.default.useState("");
-  const [active, setActive] = React23__namespace.default.useState(0);
-  const [coords, setCoords] = React23__namespace.default.useState(null);
-  const wrapRef = React23__namespace.default.useRef(null);
-  const controlRef = React23__namespace.default.useRef(null);
-  const inputRef = React23__namespace.default.useRef(null);
-  const popRef = React23__namespace.default.useRef(null);
-  const listRef = React23__namespace.default.useRef(null);
-  const activeRef = React23__namespace.default.useRef(null);
-  const fGroups = React23__namespace.default.useMemo(
+  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) => matches2(o, query.trim())) })).filter((g) => g.options.length),
     [groups, query]
   );
-  const visible = React23__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
-  const place = React23__namespace.default.useCallback(() => {
+  const visible = React24__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const place = React24__namespace.default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -3094,7 +3241,7 @@ function MultiSelect({
       flip
     });
   }, [placement, minWidth]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -3105,7 +3252,7 @@ function MultiSelect({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -3116,10 +3263,10 @@ function MultiSelect({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (open) ensureVisible3(listRef.current, activeRef.current);
   }, [active, open]);
   function commit(next) {
@@ -3156,7 +3303,7 @@ 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(React23__namespace.default.Fragment, { children: [
+  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: [
     g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
@@ -3300,6 +3447,15 @@ 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 {
@@ -3362,15 +3518,18 @@ function Pagination({
   siblings = 1,
   boundaries = 1,
   size = "md",
-  showJumper = false,
+  showJumper,
   showPageJumper,
   jumperLabel = "Go to",
   className = "",
   ...rest
 }) {
+  if (process.env.NODE_ENV !== "production" && showJumper !== void 0 && showPageJumper === void 0) {
+    warnOnce("Pagination.showJumper", "Pagination: `showJumper` is deprecated and will be removed in 2.0 \u2014 use `showPageJumper`.");
+  }
   const jumperEnabled = showPageJumper ?? showJumper;
   const __twcStyles = useScopedStyles("twc-pagination-styles", PAGINATION_CSS);
-  const [internal, setInternal] = React23__namespace.default.useState(defaultPage);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultPage);
   const page = pageProp !== void 0 ? pageProp : internal;
   const pages = buildPages(page, total, siblings, boundaries);
   const go = (p) => {
@@ -3378,7 +3537,7 @@ function Pagination({
     if (pageProp === void 0) setInternal(p);
     onChange?.(p);
   };
-  const [jump, setJump] = React23__namespace.default.useState("");
+  const [jump, setJump] = React24__namespace.default.useState("");
   const submitJump = () => {
     const n = parseInt(jump, 10);
     if (!Number.isNaN(n)) go(Math.min(Math.max(n, 1), total));
@@ -3801,6 +3960,7 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__sw[data-on="true"]::after { transform: translateX(14px); }
 .twc-dt__panel-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; }
 .twc-dt__panel-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); }
+.twc-dt__panel-count { font-weight: 600; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
 .twc-dt__link { border: none; background: transparent; color: var(--color-primary); font-family: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm); }
 .twc-dt__link:hover { background: var(--color-primary-subtle); }
 
@@ -3988,9 +4148,9 @@ function runDatatableQuery(rows, query, options = {}) {
   return { rows: page, total, filtered: out };
 }
 function useFloating() {
-  const [pos, setPos] = React23__namespace.default.useState(null);
-  const cfg = React23__namespace.default.useRef(null);
-  const place = React23__namespace.default.useCallback(() => {
+  const [pos, setPos] = React24__namespace.default.useState(null);
+  const cfg = React24__namespace.default.useRef(null);
+  const place = React24__namespace.default.useCallback(() => {
     const c = cfg.current;
     if (!c || !c.el || !c.el.isConnected) return null;
     const r = c.el.getBoundingClientRect();
@@ -4001,17 +4161,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 = React23__namespace.default.useCallback((el, align = "left", width = 220) => {
+  const open = React24__namespace.default.useCallback((el, align = "left", width = 220) => {
     cfg.current = { el, align, width };
     const p = place();
     if (p) setPos(p);
   }, [place]);
-  const close = React23__namespace.default.useCallback(() => {
+  const close = React24__namespace.default.useCallback(() => {
     cfg.current = null;
     setPos(null);
   }, []);
   const isOpen = pos != null;
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!isOpen) return void 0;
     const update = () => {
       const p = place();
@@ -4035,9 +4195,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 = React23__namespace.default.useRef(null);
+  const ref = React24__namespace.default.useRef(null);
   const isSelect = col.editType === "select" || options && col.editType !== "text";
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (isSelect) {
       const t = setTimeout(() => ref.current?.querySelector(".twc-sel__trigger")?.click(), 0);
       return () => clearTimeout(t);
@@ -4198,7 +4358,7 @@ function Datatable({
   loading = false,
   rowKey,
   checkboxSelection = false,
-  density: densityProp = "standard",
+  density: densityProp = "comfortable",
   pageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
   height = 440,
@@ -4206,7 +4366,9 @@ function Datatable({
   rowCount,
   onServerChange,
   batchActions = [],
-  showExport = true,
+  showExport = false,
+  showDensity = false,
+  showPivot = false,
   exportFilename = "export",
   aggregationValues = null,
   disableColumnReorder = false,
@@ -4238,7 +4400,7 @@ function Datatable({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
-  const cols = React23__namespace.default.useMemo(() => {
+  const cols = React24__namespace.default.useMemo(() => {
     const out = columns.map((c) => {
       const isActions = c.type === "actions";
       return {
@@ -4273,7 +4435,7 @@ function Datatable({
     }
     return out;
   }, [columns, rowPinning]);
-  const _autoKey = React23__namespace.default.useRef();
+  const _autoKey = React24__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;
@@ -4288,17 +4450,17 @@ function Datatable({
     }
     return i;
   });
-  const [sort, setSort] = React23__namespace.default.useState(null);
-  const [filters, setFilters] = React23__namespace.default.useState([]);
-  const [hidden, setHidden] = React23__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [showRowNum, setShowRowNum] = React23__namespace.default.useState(rowNumbers);
-  const [wrapped, setWrapped] = React23__namespace.default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
+  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 toggleWrap = (field) => setWrapped((w) => {
     const n = new Set(w);
     n.has(field) ? n.delete(field) : n.add(field);
     return n;
   });
-  const [pins, setPins] = React23__namespace.default.useState(() => {
+  const [pins, setPins] = React24__namespace.default.useState(() => {
     const left = [], right = [];
     columns.forEach((c) => {
       if (c.pinned === "left") left.push(c.field);
@@ -4306,34 +4468,34 @@ function Datatable({
     });
     return { left, right };
   });
-  const [density, setDensity] = React23__namespace.default.useState(densityProp);
-  const [quick, setQuick] = React23__namespace.default.useState("");
-  const [selected, setSelected] = React23__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [activeRow, setActiveRow] = React23__namespace.default.useState(null);
-  const [activeCell, setActiveCell] = React23__namespace.default.useState(null);
-  const [page, setPage] = React23__namespace.default.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React23__namespace.default.useState(pageSize > 0 ? pageSize : 10);
-  const [colQuery, setColQuery] = React23__namespace.default.useState("");
-  const [widths, setWidths] = React23__namespace.default.useState({});
-  const [order, setOrder] = React23__namespace.default.useState(() => columns.map((c) => c.field));
-  const [drag, setDrag] = React23__namespace.default.useState({ from: null, over: null, after: false });
-  const [aggOn, setAggOn] = React23__namespace.default.useState(showAggregation);
-  const [focus, setFocus] = React23__namespace.default.useState({ r: 0, c: 0 });
-  const gridRef = React23__namespace.default.useRef(null);
-  const [groupBy, setGroupBy] = React23__namespace.default.useState(rowGrouping || []);
-  const [collapsed, setCollapsed] = React23__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [pinnedRows, setPinnedRows] = React23__namespace.default.useState({ top: [], bottom: [] });
-  const [headH, setHeadH] = React23__namespace.default.useState(41);
-  const theadRef = React23__namespace.default.useRef(null);
-  const [rowOrder, setRowOrder] = React23__namespace.default.useState(null);
-  const [rowHeights, setRowHeights] = React23__namespace.default.useState({});
-  const [rowDrag, setRowDrag] = React23__namespace.default.useState({ from: null, over: null, after: false });
-  const [rowGrab, setRowGrab] = React23__namespace.default.useState(null);
-  const [reorderMsg, setReorderMsg] = React23__namespace.default.useState("");
-  const rowFocusRef = React23__namespace.default.useRef(null);
-  const rootRef = React23__namespace.default.useRef(null);
-  const [compact, setCompact] = React23__namespace.default.useState(false);
-  React23__namespace.default.useEffect(() => {
+  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 el = rootRef.current;
     if (!el) return void 0;
     const measure = () => setCompact((el.clientWidth || 0) < 720);
@@ -4346,11 +4508,11 @@ function Datatable({
       else if (typeof window !== "undefined") window.removeEventListener("resize", measure);
     };
   }, []);
-  const scrollRef = React23__namespace.default.useRef(null);
-  const [scrollTop, setScrollTop] = React23__namespace.default.useState(0);
-  const [viewportH, setViewportH] = React23__namespace.default.useState(0);
-  const [pivotOn, setPivotOn] = React23__namespace.default.useState(pivotMode);
-  const [aggConfig, setAggConfig] = React23__namespace.default.useState(() => {
+  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 m = {};
     (columns || []).forEach((c) => {
       if (typeof c.aggregation === "string") m[c.field] = c.aggregation;
@@ -4358,13 +4520,13 @@ function Datatable({
     return m;
   });
   const aggOf = (c) => aggConfig[c.field] || (typeof c.aggregation === "function" ? c.aggregation : null);
-  const [pivotConfig, setPivotConfig] = React23__namespace.default.useState(() => ({
+  const [pivotConfig, setPivotConfig] = React24__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;
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     setOrder((prev) => {
       const fields = columns.map((c) => c.field);
       const kept = prev.filter((f) => fields.includes(f));
@@ -4372,32 +4534,32 @@ function Datatable({
       return [...kept, ...added];
     });
   }, [columns]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     setDensity(densityProp);
   }, [densityProp]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
   const rowGroupingKey = (rowGrouping || []).join("\0");
-  const rowGroupingKeyRef = React23__namespace.default.useRef(rowGroupingKey);
-  React23__namespace.default.useEffect(() => {
+  const rowGroupingKeyRef = React24__namespace.default.useRef(rowGroupingKey);
+  React24__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] = React23__namespace.default.useState(null);
+  const [colMenu, setColMenu] = React24__namespace.default.useState(null);
   const [menuPos, openMenu, closeMenu] = useFloating();
-  const [panel, setPanel] = React23__namespace.default.useState(null);
+  const [panel, setPanel] = React24__namespace.default.useState(null);
   const [panelPos, openPanel, closePanel] = useFloating();
-  const [rowMenu, setRowMenu] = React23__namespace.default.useState(null);
+  const [rowMenu, setRowMenu] = React24__namespace.default.useState(null);
   const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
-  const [exportOpen, setExportOpen] = React23__namespace.default.useState(false);
+  const [exportOpen, setExportOpen] = React24__namespace.default.useState(false);
   const [exportPos, openExport, closeExport] = useFloating();
-  const menuTriggerRef = React23__namespace.default.useRef(null);
-  const colMenuRef = React23__namespace.default.useRef(null);
-  const rowMenuRef = React23__namespace.default.useRef(null);
-  const exportMenuRef = React23__namespace.default.useRef(null);
+  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);
   function focusFirstItem(container) {
     if (!container) return;
     const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -4436,16 +4598,16 @@ function Datatable({
       restoreTriggerFocus();
     }
   }
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (colMenu) focusFirstItem(colMenuRef.current);
   }, [colMenu]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (rowMenu) focusFirstItem(rowMenuRef.current);
   }, [rowMenu]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (exportOpen) focusFirstItem(exportMenuRef.current);
   }, [exportOpen]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!colMenu && !panel && !rowMenu) return;
     const closeAll = () => {
       setColMenu(null);
@@ -4468,7 +4630,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [colMenu, panel, rowMenu]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!exportOpen) return;
     const close = () => {
       setExportOpen(false);
@@ -4487,9 +4649,9 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [exportOpen]);
-  const colByField = React23__namespace.default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
+  const colByField = React24__namespace.default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
   const visibleCols = cols.filter((c) => !hidden.has(c.field));
-  const ordered = React23__namespace.default.useMemo(() => {
+  const ordered = React24__namespace.default.useMemo(() => {
     const orderIdx = (f) => {
       const i = order.indexOf(f);
       return i === -1 ? 9999 : i;
@@ -4524,7 +4686,7 @@ function Datatable({
     }
     return {};
   };
-  const processed = React23__namespace.default.useMemo(() => {
+  const processed = React24__namespace.default.useMemo(() => {
     if (serverMode) {
       if (rowOrder) {
         const idx = new Map(rowOrder.map((k, i) => [k, i]));
@@ -4563,10 +4725,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);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (page > totalPages - 1) setPage(0);
   }, [totalPages]);
-  const activeGroupBy = React23__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
+  const activeGroupBy = React24__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
   function subtotalText(rowsIn) {
     const parts = [];
     for (const c of ordered) {
@@ -4593,7 +4755,7 @@ function Datatable({
     if (agg === "max") return Math.max(...nums);
     return null;
   }
-  const displayItems = React23__namespace.default.useMemo(() => {
+  const displayItems = React24__namespace.default.useMemo(() => {
     if (!activeGroupBy.length) return null;
     const build = (rowsIn, depth, prefix) => {
       if (depth >= activeGroupBy.length) return rowsIn.map((row) => ({ kind: "leaf", row }));
@@ -4635,7 +4797,7 @@ function Datatable({
       return { top, bottom };
     });
   }
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!rowPinning) return;
     const measure = () => {
       if (theadRef.current) setHeadH(theadRef.current.offsetHeight || 41);
@@ -4649,12 +4811,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 = React23__namespace.default.useMemo(() => {
+  const keyIndex = React24__namespace.default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     leafRows.forEach((r, i) => m.set(keyOf(r, i), i));
     return m;
   }, [leafRows]);
-  const keyIndexMid = React23__namespace.default.useMemo(() => {
+  const keyIndexMid = React24__namespace.default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     middleRows.forEach((r, i) => m.set(keyOf(r, keyIndex.get(keyOf(r)) ?? i), i));
     return m;
@@ -4739,19 +4901,19 @@ function Datatable({
       setReorderMsg("Reorder cancelled.");
     }
   }
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (rowFocusRef.current == null) return;
     const key = rowFocusRef.current;
     rowFocusRef.current = null;
     const root = gridRef.current;
     if (!root) return;
-    const sel = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(String(key)) : String(key).replace(/"/g, '\\"');
+    const sel = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(String(key)) : String(key).replace(/[\\"]/g, "\\$&");
     const el = root.querySelector(`.twc-dt__row-handle[data-row-key="${sel}"]`);
     if (el) el.focus();
   });
   const estRowH = rowHeight ?? (density === "compact" ? 36 : density === "comfortable" ? 56 : 44);
   const virtualizing = virtualized && !paginated && !activeGroupBy.length && !loading;
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -4761,13 +4923,13 @@ function Datatable({
     if (ro) ro.observe(el);
     return () => ro && ro.disconnect();
   }, [virtualizing, height]);
-  const onScrollVirtual = React23__namespace.default.useCallback((e) => {
+  const onScrollVirtual = React24__namespace.default.useCallback((e) => {
     setScrollTop(e.currentTarget.scrollTop);
   }, []);
   const vh = viewportH || (typeof height === "number" ? height : 440);
-  const rowHRef = React23__namespace.default.useRef(/* @__PURE__ */ new Map());
-  const [measureTick, setMeasureTick] = React23__namespace.default.useState(0);
-  const offsets = React23__namespace.default.useMemo(() => {
+  const rowHRef = React24__namespace.default.useRef(/* @__PURE__ */ new Map());
+  const [measureTick, setMeasureTick] = React24__namespace.default.useState(0);
+  const offsets = React24__namespace.default.useMemo(() => {
     if (!virtualizing) return null;
     const total = middleRows.length;
     const arr = new Float64Array(total + 1);
@@ -4777,7 +4939,7 @@ function Datatable({
     }
     return arr;
   }, [virtualizing, middleRows, estRowH, measureTick]);
-  const vWindow = React23__namespace.default.useMemo(() => {
+  const vWindow = React24__namespace.default.useMemo(() => {
     if (!virtualizing || !offsets) return null;
     const total = middleRows.length;
     const totalH = offsets[total];
@@ -4806,7 +4968,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]);
-  React23__namespace.default.useLayoutEffect(() => {
+  React24__namespace.default.useLayoutEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -4821,9 +4983,9 @@ function Datatable({
     }
     if (changed) setMeasureTick((t) => t + 1);
   });
-  const onServerChangeRef = React23__namespace.default.useRef(onServerChange);
+  const onServerChangeRef = React24__namespace.default.useRef(onServerChange);
   onServerChangeRef.current = onServerChange;
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!serverMode) return;
     const t = setTimeout(() => {
       onServerChangeRef.current?.({
@@ -4858,7 +5020,7 @@ function Datatable({
       return n;
     });
   }
-  const movableMidFields = React23__namespace.default.useMemo(
+  const movableMidFields = React24__namespace.default.useMemo(
     () => ordered.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field)).map((c) => c.field),
     [ordered, pins]
   );
@@ -4889,7 +5051,7 @@ function Datatable({
     }
     return [...set].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
   }
-  const [resizing, setResizing] = React23__namespace.default.useState(false);
+  const [resizing, setResizing] = React24__namespace.default.useState(false);
   function startResize(e, field) {
     e.preventDefault();
     e.stopPropagation();
@@ -4996,7 +5158,7 @@ function Datatable({
     if (!agg) return null;
     if (aggregationValues && col.field in aggregationValues) {
       const pre = aggregationValues[col.field];
-      if (pre && typeof pre === "object" && !React23__namespace.default.isValidElement(pre)) {
+      if (pre && typeof pre === "object" && !React24__namespace.default.isValidElement(pre)) {
         if (typeof agg === "string" && agg in pre) return pre[agg];
       } else {
         return pre;
@@ -5114,14 +5276,14 @@ function Datatable({
       focusCell(r, c);
     }
   }
-  React23__namespace.default.useEffect(() => {
+  React24__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 = React23__namespace.default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
+  const selectedRows = React24__namespace.default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
   function clearSelection() {
     setSelected(/* @__PURE__ */ new Set());
   }
-  const [editing, setEditing] = React23__namespace.default.useState(null);
+  const [editing, setEditing] = React24__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;
@@ -5156,17 +5318,17 @@ function Datatable({
       cancelEdit();
     }
   }
-  const batchEditableCols = React23__namespace.default.useMemo(
+  const batchEditableCols = React24__namespace.default.useMemo(
     () => cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false))),
     [cols, editMode]
   );
-  const [batchEdit, setBatchEdit] = React23__namespace.default.useState(null);
+  const [batchEdit, setBatchEdit] = React24__namespace.default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
   function openBatchEditor(el) {
     setBatchEdit({ fields: {}, values: {} });
     openBatchEdit(el, "left", 320);
   }
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!batchEdit) return;
     const close = () => {
       setBatchEdit(null);
@@ -5185,7 +5347,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [batchEdit]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (batchEdit && selected.size === 0) {
       setBatchEdit(null);
       closeBatchEdit();
@@ -5222,7 +5384,7 @@ function Datatable({
     setBatchEdit(null);
     closeBatchEdit();
   }
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
       if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
@@ -5295,6 +5457,8 @@ function Datatable({
   };
   const shownColRows = cols.filter((c) => c.field !== "__pinactions__" && c.headerName.toLowerCase().includes(colQuery.trim().toLowerCase())).sort((a, b) => orderIdxOf(a.field) - orderIdxOf(b.field));
   const rowNumMatch = rowNumbers && "row number".includes(colQuery.trim().toLowerCase());
+  const manageableCols = cols.filter((c) => c.field !== "__pinactions__");
+  const visibleColCount = manageableCols.filter((c) => !hidden.has(c.field)).length;
   const rppOptions = Array.from(new Set([...pageSizeOptions || [], pageSize].filter((n) => n > 0))).sort((a, b) => a - b).map((n) => ({ value: String(n), label: String(n) }));
   const totalCols = ordered.length + (checkboxSelection ? 1 : 0) + (showRowNum ? 1 : 0);
   function renderGroupRow(item) {
@@ -5492,12 +5656,12 @@ function Datatable({
     const vlabel = (v) => v.label || (colByField[v.field]?.headerName || v.field);
     const rowFieldLabel = rFields.map((f) => colByField[f]?.headerName || f).join(" / ");
     const leafPaths = [];
-    const seen = /* @__PURE__ */ new Set();
+    const seen2 = /* @__PURE__ */ new Set();
     for (const r of rows) {
       const path = colPathOf(r);
       const key = path.join("\0");
-      if (!seen.has(key)) {
-        seen.add(key);
+      if (!seen2.has(key)) {
+        seen2.add(key);
         leafPaths.push(path);
       }
     }
@@ -5657,11 +5821,11 @@ function Datatable({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__tbtn", "data-tip": "Change row density", onClick: () => setDensity((d) => d === "compact" ? "standard" : d === "standard" ? "comfortable" : "compact"), children: [
+      showDensity ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__tbtn", "data-tip": "Change row density", onClick: () => setDensity((d) => d === "compact" ? "standard" : d === "standard" ? "comfortable" : "compact"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.density }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__tlabel", children: density[0].toUpperCase() + density.slice(1) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      ] }) : null,
+      showAggregation ? /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
@@ -5686,8 +5850,8 @@ function Datatable({
             aggOn && hasAggregation ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__tbadge", children: ordered.filter((c) => aggOf(c)).length }) : null
           ]
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      ) : null,
+      showPivot || pivotMode || pivot != null || pivotActive ? /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
@@ -5712,7 +5876,7 @@ function Datatable({
             pivotActive ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__tdot", "aria-label": "on", role: "img" }) : null
           ]
         }
-      ),
+      ) : null,
       showExport ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__export", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__export-main", "data-tip": "Export to CSV", onClick: () => exportData("csv"), "aria-label": "Export to CSV", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.download }),
@@ -6025,7 +6189,7 @@ function Datatable({
           } }) })
         ] }) : null
       ] }),
-      paginated ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__footer-row", "data-pager": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Pagination, { size: "sm", page: page + 1, total: totalPages, boundaries: 3, showJumper: showPageJumper && totalPages > 5, onChange: (p) => setPage(p - 1) }) }) : null
+      paginated ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__footer-row", "data-pager": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Pagination, { size: "sm", page: page + 1, total: totalPages, boundaries: 3, showPageJumper: showPageJumper && totalPages > 5, onChange: (p) => setPage(p - 1) }) }) : null
     ] }) : null,
     exportOpen && exportPos ? /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -6281,7 +6445,14 @@ function Datatable({
     ) : null,
     panel === "columns" && panelPos ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cols", style: { top: panelPos.top, left: panelPos.left }, role: "dialog", "aria-label": "Column settings", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__panel-head", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__panel-title", children: "Columns" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__panel-title", children: [
+          "Columns ",
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__panel-count", title: `${visibleColCount} of ${manageableCols.length} columns shown`, children: [
+            visibleColCount,
+            "/",
+            manageableCols.length
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setHidden(/* @__PURE__ */ new Set()), children: "Show all" }),
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setHidden(new Set(cols.filter((c) => c.hideable).map((c) => c.field))), children: "Hide all" })
@@ -6735,23 +6906,23 @@ function DatePicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
   const __twcStyles1 = useScopedStyles("twc-datepicker-styles", DATEPICKER_CSS);
-  const autoId = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
-  const [internal, setInternal] = React23__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React23__namespace.default.useState(false);
-  const [view, setView] = React23__namespace.default.useState(selected || /* @__PURE__ */ new Date());
-  const [mode, setMode] = React23__namespace.default.useState("days");
-  const [focusDate, setFocusDate] = React23__namespace.default.useState(null);
-  const [coords, setCoords] = React23__namespace.default.useState(null);
-  const wrapRef = React23__namespace.default.useRef(null);
-  const triggerRef = React23__namespace.default.useRef(null);
-  const popRef = React23__namespace.default.useRef(null);
-  const gridRef = React23__namespace.default.useRef(null);
+  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 POP_W = 280;
-  const place = React23__namespace.default.useCallback(() => {
+  const place = React24__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -6762,7 +6933,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 });
   }, []);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -6773,7 +6944,7 @@ function DatePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return;
     setView(selected || /* @__PURE__ */ new Date());
     setMode("days");
@@ -6793,8 +6964,8 @@ function DatePicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React23__namespace.default.useRef(false);
-  React23__namespace.default.useEffect(() => {
+  const prevOpen = React24__namespace.default.useRef(false);
+  React24__namespace.default.useEffect(() => {
     let id2;
     if (!prevOpen.current && open) {
       id2 = setTimeout(() => gridRef.current?.querySelector('[tabindex="0"]')?.focus({ preventScroll: true }), 30);
@@ -6805,9 +6976,9 @@ function DatePicker({
     prevOpen.current = open;
     return () => clearTimeout(id2);
   }, [open]);
-  const months = React23__namespace.default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
-  const monthsShort = React23__namespace.default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
-  const dows = React23__namespace.default.useMemo(
+  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(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW[(i + weekStartsOn) % 7]) : weekdayNames(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -6835,7 +7006,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);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open || mode !== "days" || !focusDate) return;
     gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
   }, [focusDate, open, mode]);
@@ -7058,23 +7229,23 @@ function DateRangePicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
   const __twcStyles1 = useScopedStyles("twc-drp-styles", RANGE_CSS);
-  const [internal, setInternal] = React23__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
   const range = value !== void 0 ? value : internal;
-  const [open, setOpen] = React23__namespace.default.useState(false);
-  const [view, setView] = React23__namespace.default.useState(range.start || /* @__PURE__ */ new Date());
-  const [hover, setHover] = React23__namespace.default.useState(null);
-  const [coords, setCoords] = React23__namespace.default.useState(null);
-  const wrapRef = React23__namespace.default.useRef(null);
-  const triggerRef = React23__namespace.default.useRef(null);
-  const popRef = React23__namespace.default.useRef(null);
-  const labelId = React23__namespace.default.useId();
+  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 descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const POP_W = 420;
-  const place = React23__namespace.default.useCallback(() => {
+  const place = React24__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7085,7 +7256,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 });
   }, []);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7096,7 +7267,7 @@ function DateRangePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -7134,8 +7305,8 @@ function DateRangePicker({
     setView(start);
     setOpen(false);
   };
-  const months = React23__namespace.default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
-  const dows = React23__namespace.default.useMemo(
+  const months = React24__namespace.default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
+  const dows = React24__namespace.default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW2[(i + weekStartsOn) % 7]) : weekdayNames2(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7316,13 +7487,14 @@ function Dialog({
   className = "",
   ...rest
 }) {
-  const autoId = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const dialogRef = React23__namespace.default.useRef(null);
+  const dialogRef = React24__namespace.default.useRef(null);
   const __twcStyles = useScopedStyles("twc-dialog-styles", DIALOG_CSS);
-  const [mounted, setMounted] = React23__namespace.default.useState(open);
-  React23__namespace.default.useEffect(() => {
+  const renderPortal = usePortal();
+  const [mounted, setMounted] = React24__namespace.default.useState(open);
+  React24__namespace.default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -7330,7 +7502,7 @@ function Dialog({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -7338,48 +7510,13 @@ function Dialog({
       document.body.style.overflow = prev;
     };
   }, [open]);
-  React23__namespace.default.useEffect(() => {
-    if (!open || !mounted) return void 0;
-    const node = dialogRef.current;
-    const prevFocused = document.activeElement;
-    const first = node?.querySelector(
-      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
-    );
-    (first || node)?.focus();
-    return () => {
-      if (prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
-    };
-  }, [open, mounted]);
-  React23__namespace.default.useEffect(() => {
-    if (!open) return;
-    const node = dialogRef.current;
-    const focusables = () => node ? Array.from(
-      node.querySelectorAll(
-        'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
-      )
-    ).filter((el) => el.offsetParent !== null) : [];
+  useFocusTrap(dialogRef, open && mounted);
+  React24__namespace.default.useEffect(() => {
+    if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
         onClose?.();
-        return;
-      }
-      if (e.key !== "Tab") return;
-      const f = focusables();
-      if (!f.length) {
-        e.preventDefault();
-        node?.focus();
-        return;
-      }
-      const first = f[0], last = f[f.length - 1], ae = document.activeElement;
-      if (e.shiftKey) {
-        if (ae === first || ae === node || !node.contains(ae)) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else if (ae === last || !node.contains(ae)) {
-        e.preventDefault();
-        first.focus();
       }
     };
     document.addEventListener("keydown", onKey);
@@ -7403,9 +7540,7 @@ function Dialog({
       footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dialog__footer", children: footer }) : null
     ] })
   ] });
-  if (typeof document === "undefined") return null;
-  const RD = typeof reactDom.createPortal === "function" ? reactDom.createPortal : null;
-  return RD ? RD(overlay, document.body) : overlay;
+  return renderPortal(overlay);
 }
 var DIVIDER_CSS = `
 .twc-divider { border: none; background: var(--color-divider); }
@@ -7420,6 +7555,10 @@ var DIVIDER_CSS = `
    so ::before/::after land on the correct inline edge under RTL \u2014 no physical override needed. */
 .twc-divider-label[data-align="start"]::before { flex: 0 0 var(--space-6); }
 .twc-divider-label[data-align="end"]::after { flex: 0 0 var(--space-6); }
+/* Vertical labeled divider: stack the two segments above/below the label. */
+.twc-divider-label[data-orientation="vertical"] { flex-direction: column; align-self: stretch; min-height: 1em; margin: 0 var(--space-3); }
+.twc-divider-label[data-orientation="vertical"]::before,
+.twc-divider-label[data-orientation="vertical"]::after { width: 1px; height: auto; flex: 1; }
 `;
 function Divider({
   orientation = "horizontal",
@@ -7432,7 +7571,7 @@ function Divider({
   const __twcStyles = useScopedStyles("twc-divider-styles", DIVIDER_CSS);
   const resolvedAlign = align === "left" ? "start" : align === "right" ? "end" : align;
   if (children) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-divider-label ${className}`, "data-align": resolvedAlign, role: "separator", ...rest, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-divider-label ${className}`, "data-align": resolvedAlign, "data-orientation": orientation, role: "separator", "aria-orientation": orientation, ...rest, children: [
       __twcStyles,
       children
     ] });
@@ -7519,13 +7658,14 @@ function Drawer({
   style,
   ...rest
 }) {
-  const autoId = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const panelRef = React23__namespace.default.useRef(null);
+  const panelRef = React24__namespace.default.useRef(null);
   const __twcStyles = useScopedStyles("twc-drawer-styles", DRAWER_CSS);
-  const [mounted, setMounted] = React23__namespace.default.useState(open);
-  React23__namespace.default.useEffect(() => {
+  const renderPortal = usePortal();
+  const [mounted, setMounted] = React24__namespace.default.useState(open);
+  React24__namespace.default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -7533,7 +7673,7 @@ function Drawer({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -7541,48 +7681,13 @@ function Drawer({
       document.body.style.overflow = prev;
     };
   }, [open]);
-  React23__namespace.default.useEffect(() => {
-    if (!open || !mounted) return void 0;
-    const node = panelRef.current;
-    const prevFocused = document.activeElement;
-    const first = node?.querySelector(
-      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
-    );
-    (first || node)?.focus();
-    return () => {
-      if (prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
-    };
-  }, [open, mounted]);
-  React23__namespace.default.useEffect(() => {
-    if (!open) return;
-    const node = panelRef.current;
-    const focusables = () => node ? Array.from(
-      node.querySelectorAll(
-        'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
-      )
-    ).filter((el) => el.offsetParent !== null) : [];
+  useFocusTrap(panelRef, open && mounted);
+  React24__namespace.default.useEffect(() => {
+    if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
         onClose?.();
-        return;
-      }
-      if (e.key !== "Tab") return;
-      const f = focusables();
-      if (!f.length) {
-        e.preventDefault();
-        node?.focus();
-        return;
-      }
-      const first = f[0], last = f[f.length - 1], ae = document.activeElement;
-      if (e.shiftKey) {
-        if (ae === first || ae === node || !node.contains(ae)) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else if (ae === last || !node.contains(ae)) {
-        e.preventDefault();
-        first.focus();
       }
     };
     document.addEventListener("keydown", onKey);
@@ -7610,9 +7715,7 @@ function Drawer({
       footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-drawer__footer", children: footer }) : null
     ] })
   ] });
-  if (typeof document === "undefined") return null;
-  const RD = typeof reactDom.createPortal === "function" ? reactDom.createPortal : null;
-  return RD ? RD(overlay, document.body) : overlay;
+  return renderPortal(overlay);
 }
 var EMPTY_CSS = `
 .twc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3);
@@ -7630,11 +7733,14 @@ function EmptyState({
   title,
   description,
   actions,
-  bordered = false,
+  bordered,
   border,
   className = "",
   ...rest
 }) {
+  if (process.env.NODE_ENV !== "production" && bordered !== void 0 && border === void 0) {
+    warnOnce("EmptyState.bordered", "EmptyState: `bordered` is deprecated and will be removed in 2.0 \u2014 use `border`.");
+  }
   const hasBorder = border ?? bordered;
   const __twcStyles = useScopedStyles("twc-empty-styles", EMPTY_CSS);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-empty ${className}`, "data-bordered": hasBorder || void 0, ...rest, children: [
@@ -7665,7 +7771,7 @@ function Field({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS5);
-  const autoId = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, "data-size": size, ...rest, children: [
@@ -7745,11 +7851,11 @@ function FileUpload({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-upload-styles", UPLOAD_CSS);
-  const [internal, setInternal] = React23__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
   const files = value !== void 0 ? value : internal;
-  const [drag, setDrag] = React23__namespace.default.useState(false);
-  const inputRef = React23__namespace.default.useRef(null);
-  const autoId = React23__namespace.default.useId();
+  const [drag, setDrag] = React24__namespace.default.useState(false);
+  const inputRef = React24__namespace.default.useRef(null);
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
@@ -7947,19 +8053,20 @@ function Kanban({
   defaultCards,
   onCardMove,
   renderCard,
+  getCardLabel,
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-kanban-styles", KANBAN_CSS);
-  const [internal, setInternal] = React23__namespace.default.useState(cards ?? defaultCards ?? []);
+  const [internal, setInternal] = React24__namespace.default.useState(cards ?? defaultCards ?? []);
   const items = cards !== void 0 ? cards : internal;
-  const [drag, setDrag] = React23__namespace.default.useState(null);
-  const [overCol, setOverCol] = React23__namespace.default.useState(null);
-  const [grab, setGrab] = React23__namespace.default.useState(null);
-  const [announce, setAnnounce] = React23__namespace.default.useState("");
-  const rootRef = React23__namespace.default.useRef(null);
-  const focusIdRef = React23__namespace.default.useRef(null);
-  React23__namespace.default.useEffect(() => {
+  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(() => {
     if (focusIdRef.current == null) return void 0;
     const raf = requestAnimationFrame(() => {
       const id = focusIdRef.current;
@@ -8011,7 +8118,7 @@ function Kanban({
     }
   };
   const keyTargetCol = grab ? columns[grab.targetIdx]?.id : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-kanban ${className}`, ref: rootRef, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-kanban ${className}`, ref: rootRef, role: "group", "aria-label": "Board", ...rest, children: [
     __twcStyles,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-kanban__sr", role: "status", "aria-live": "polite", children: announce }),
     columns.map((col, colIdx) => {
@@ -8021,7 +8128,7 @@ function Kanban({
         {
           className: "twc-kanban__col",
           role: "group",
-          "aria-label": typeof col.title === "string" ? col.title : void 0,
+          "aria-label": col.ariaLabel ?? colTitle(col),
           "data-over": overCol === col.id || keyTargetCol === col.id || void 0,
           onDragOver: (e) => {
             e.preventDefault();
@@ -8052,6 +8159,8 @@ function Kanban({
                 tabIndex: 0,
                 "aria-roledescription": "draggable card",
                 "data-card-id": card.id,
+                "aria-label": getCardLabel?.(card) ?? (typeof card.ariaLabel === "string" ? card.ariaLabel : cardTitle(card)),
+                "aria-pressed": grab && grab.id === card.id || void 0,
                 "data-grabbed": grab && grab.id === card.id || void 0,
                 onKeyDown: (e) => handleCardKey(e, card, colIdx),
                 onBlur: () => {
@@ -8105,7 +8214,7 @@ var LIST_CSS = `
 `;
 function List({ items, plain = false, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-list-styles", LIST_CSS);
-  const safeHref11 = (url) => {
+  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;
@@ -8113,7 +8222,7 @@ function List({ items, plain = false, className = "", ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: `twc-list ${className}`, "data-plain": plain || void 0, ...rest, children: [
     __twcStyles,
     items.map((it, i) => {
-      const href = safeHref11(it.href);
+      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: [
@@ -8167,7 +8276,7 @@ button.twc-navbar__brand, a.twc-navbar__brand { cursor: pointer; }
   .twc-navbar__menu-btn { display: inline-grid; }
 }
 `;
-function safeHref3(url) {
+function safeHref4(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -8180,16 +8289,19 @@ function Navbar({
   actions,
   sticky = true,
   onMenuClick,
+  menuOpen,
+  menuControls,
+  navLabel = "Primary",
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-navbar-styles", NAVBAR_CSS);
   return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `twc-navbar ${className}`, "data-sticky": sticky || void 0, ...rest, children: [
     __twcStyles,
-    onMenuClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-navbar__menu-btn", "aria-label": "Open menu", onClick: onMenuClick, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }) }) }) : null,
-    brand ? brandHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "twc-navbar__brand", href: safeHref3(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "twc-navbar__links", children: links.map((l, i) => {
-      const href = safeHref3(l.href);
+    onMenuClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-navbar__menu-btn", "aria-expanded": menuOpen, "aria-controls": menuControls, "aria-label": menuOpen ? "Close menu" : "Open menu", onClick: onMenuClick, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }) }) }) : null,
+    brand ? brandHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "twc-navbar__brand", href: safeHref4(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "twc-navbar__links", "aria-label": navLabel, children: links.map((l, i) => {
+      const href = safeHref4(l.href);
       const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         l.icon,
         l.label
@@ -8257,21 +8369,21 @@ function Popover({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-popover-styles", POPOVER_CSS);
-  const [openState, setOpenState] = React23__namespace.default.useState(defaultOpen);
-  const [render, setRender] = React23__namespace.default.useState(false);
-  const [pos, setPos] = React23__namespace.default.useState(null);
-  const wrapRef = React23__namespace.default.useRef(null);
-  const popRef = React23__namespace.default.useRef(null);
-  const popId = React23__namespace.default.useId();
+  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 controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React23__namespace.default.useRef(open);
+  const openRef = React24__namespace.default.useRef(open);
   openRef.current = open;
-  const controlledRef = React23__namespace.default.useRef(controlled);
+  const controlledRef = React24__namespace.default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React23__namespace.default.useRef(onOpenChange);
+  const onOpenChangeRef = React24__namespace.default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React23__namespace.default.useCallback((next) => {
+  const setOpen = React24__namespace.default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -8279,7 +8391,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 = React23__namespace.default.useCallback(() => {
+  const place = React24__namespace.default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -8310,7 +8422,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]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -8333,7 +8445,7 @@ function Popover({
       document.removeEventListener("keydown", onKey);
     };
   }, [open, place]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -8341,12 +8453,12 @@ function Popover({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (render && open) place();
   }, [render, place]);
-  const restoreRef = React23__namespace.default.useRef(null);
-  const needFocusRef = React23__namespace.default.useRef(false);
-  React23__namespace.default.useEffect(() => {
+  const restoreRef = React24__namespace.default.useRef(null);
+  const needFocusRef = React24__namespace.default.useRef(false);
+  React24__namespace.default.useEffect(() => {
     if (open) {
       restoreRef.current = document.activeElement;
       needFocusRef.current = true;
@@ -8357,7 +8469,7 @@ function Popover({
     needFocusRef.current = false;
     if (prev && typeof prev.focus === "function" && popRef.current?.contains(document.activeElement)) prev.focus();
   }, [open]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (open && render && pos && needFocusRef.current) {
       needFocusRef.current = false;
       popRef.current?.focus({ preventScroll: true });
@@ -8385,7 +8497,7 @@ function Popover({
       ]
     }
   ) : null;
-  const triggerEl = React23__namespace.default.isValidElement(trigger) ? React23__namespace.default.cloneElement(trigger, {
+  const triggerEl = React24__namespace.default.isValidElement(trigger) ? React24__namespace.default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -8424,9 +8536,12 @@ function Progress({
   size = "md",
   indeterminate = false,
   showLabel = false,
+  label,
   className = "",
   ...rest
 }) {
+  const labelId = React24__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); }
 .twc-progress {
@@ -8465,14 +8580,14 @@ function Progress({
   return (
     // Single-root contract: className and ...rest (style, id, handlers, …) share the outer
     // wrapper; role="progressbar" + aria-value* stay on the inner track.
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-progress-wrap ${className}`, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-progress-wrap ${className}`, ...restProps, children: [
       __twcStyles,
-      showLabel && !indeterminate ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-progress__meta", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Progress" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      (showLabel || label != null) && !indeterminate ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-progress__meta", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, children: label ?? "Progress" }),
+        showLabel ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
           Math.round(pct),
           "%"
-        ] })
+        ] }) : null
       ] }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -8485,6 +8600,8 @@ function Progress({
           "aria-valuenow": indeterminate ? void 0 : Math.round(pct),
           "aria-valuemin": 0,
           "aria-valuemax": 100,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby ?? (label != null ? labelId : void 0),
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
         }
       )
@@ -8546,7 +8663,7 @@ function Radio({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
@@ -8624,12 +8741,12 @@ function Rating({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-rating-styles", RATING_CSS);
-  const [internal, setInternal] = React23__namespace.default.useState(defaultValue);
-  const [hover, setHover] = React23__namespace.default.useState(0);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
+  const [hover, setHover] = React24__namespace.default.useState(0);
   const val = value !== void 0 ? value : internal;
   const shown = hover || val;
   const interactive = !readOnly && !disabled;
-  const btnRefs = React23__namespace.default.useRef([]);
+  const btnRefs = React24__namespace.default.useRef([]);
   const tabStar = Math.min(count, Math.max(1, Math.round(val) || 1));
   const set = (v) => {
     if (!interactive) return;
@@ -8723,12 +8840,12 @@ function Tooltip({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
-  const id = React23__namespace.default.useId();
-  const [show, setShow] = React23__namespace.default.useState(false);
-  const [coords, setCoords] = React23__namespace.default.useState(null);
-  const timer = React23__namespace.default.useRef(null);
-  const wrapRef = React23__namespace.default.useRef(null);
-  const tipRef = React23__namespace.default.useRef(null);
+  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);
@@ -8737,8 +8854,8 @@ function Tooltip({
     clearTimeout(timer.current);
     setShow(false);
   };
-  React23__namespace.default.useEffect(() => () => clearTimeout(timer.current), []);
-  const place = React23__namespace.default.useCallback(() => {
+  React24__namespace.default.useEffect(() => () => clearTimeout(timer.current), []);
+  const place = React24__namespace.default.useCallback(() => {
     const el = wrapRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -8754,10 +8871,10 @@ function Tooltip({
     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]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     place();
   }, [place]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!show) return void 0;
     place();
     const onMove = () => place();
@@ -8768,7 +8885,7 @@ function Tooltip({
       window.removeEventListener("resize", onMove);
     };
   }, [show, place]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!show) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -8780,7 +8897,7 @@ function Tooltip({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [show]);
   const describedBy = show ? id : void 0;
-  const trigger = React23__namespace.default.isValidElement(children) && children.type !== React23__namespace.default.Fragment ? React23__namespace.default.cloneElement(children, {
+  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(
@@ -8836,6 +8953,7 @@ var SIDEBAR_CSS = `
 .twc-sidebar__brand { display: inline-flex; align-items: center; gap: var(--space-2-5); font-weight: var(--font-extrabold); font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--color-text); white-space: nowrap; overflow: hidden; min-width: 0;
   transition: font-size var(--duration-base) var(--ease-standard), gap var(--duration-base) var(--ease-standard); }
 .twc-sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
+.twc-sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
 .twc-sidebar__section { font-size: 10px; font-weight: var(--font-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-subtle); padding: var(--space-3) var(--space-3) var(--space-1); white-space: nowrap; overflow: hidden; max-height: 2.5rem; opacity: 1; visibility: visible;
   transition: max-height var(--duration-base) var(--ease-standard), padding var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
 .twc-sidebar[data-collapsed="true"] .twc-sidebar__section { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden;
@@ -8877,6 +8995,23 @@ var SIDEBAR_CSS = `
 .twc-sidebar[data-collapsed="true"] .twc-sidebar__foot { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0; }
 .twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse { width: auto; padding: 11px; gap: 0; margin: 0; }
 .twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse span { display: none; }
+
+/* Off-canvas overlay mode (mobile): the rail becomes a slide-over drawer behind a
+   scrim, mirroring Drawer.jsx. Logical inset + a --_off var slide it in from the
+   inline-start edge (mirrored under dir="rtl"). */
+.twc-sidebar__overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-overlay); backdrop-filter: blur(2px); }
+.twc-sidebar__overlay[data-state="open"] { animation: twico-fade-in var(--duration-base) var(--ease-out); }
+.twc-sidebar__overlay[data-state="closed"] { animation: twc-sidebar-fade-out var(--duration-exit) var(--ease-in) forwards; pointer-events: none; }
+@keyframes twc-sidebar-fade-out { from { opacity: 1; } to { opacity: 0; } }
+.twc-sidebar--overlay { position: fixed; inset-block: 0; inset-inline-start: 0; height: 100%; max-width: 92vw; z-index: var(--z-modal); box-shadow: var(--shadow-xl); --_off: -100%; }
+[dir="rtl"] .twc-sidebar--overlay { inset-inline-start: auto; inset-inline-end: 0; --_off: 100%; }
+.twc-sidebar--overlay[data-state="open"] { animation: twc-sidebar-in var(--duration-base) var(--ease-out); }
+.twc-sidebar--overlay[data-state="closed"] { animation: twc-sidebar-out var(--duration-exit) var(--ease-in) forwards; }
+@keyframes twc-sidebar-in { from { transform: translateX(var(--_off)); } to { transform: translateX(0); } }
+@keyframes twc-sidebar-out { from { transform: translateX(0); } to { transform: translateX(var(--_off)); } }
+@media (prefers-reduced-motion: reduce) {
+  .twc-sidebar__overlay[data-state], .twc-sidebar--overlay[data-state] { animation-duration: 1ms; }
+}
 `;
 function Sidebar({
   brand,
@@ -8886,63 +9021,149 @@ function Sidebar({
   defaultCollapsed = false,
   collapsible = true,
   onCollapsedChange,
+  overlay = false,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  navLabel = "Main",
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-sidebar-styles", SIDEBAR_CSS);
-  const [internal, setInternal] = React23__namespace.default.useState(defaultCollapsed);
+  const navId = React24__namespace.default.useId();
+  const panelRef = React24__namespace.default.useRef(null);
+  const renderPortal = usePortal();
+  const [internal, setInternal] = React24__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 safeHref11 = (url) => {
+  const [openInternal, setOpenInternal] = React24__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(() => {
+    if (!overlay) return void 0;
+    if (open) {
+      setMounted(true);
+      return void 0;
+    }
+    const t = setTimeout(() => setMounted(false), 170);
+    return () => clearTimeout(t);
+  }, [overlay, open]);
+  React24__namespace.default.useEffect(() => {
+    if (!overlay || !open) return void 0;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [overlay, open]);
+  useFocusTrap(panelRef, overlay && open && mounted);
+  React24__namespace.default.useEffect(() => {
+    if (!overlay || !open) return void 0;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (openProp === void 0) setOpenInternal(false);
+        onOpenChange?.(false);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [overlay, open, openProp, onOpenChange]);
+  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("aside", { className: `twc-sidebar ${className}`, "data-collapsed": collapsed || void 0, ...rest, children: [
+  const renderItem = (it, i) => {
+    const href = safeHref12(it.href);
+    const labelStr = typeof it.label === "string" ? it.label : void 0;
+    const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__ic", "aria-hidden": "true", children: it.icon }) : labelStr != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__ic twc-sidebar__ic--initial", "aria-hidden": "true", children: labelStr.charAt(0) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__label", children: it.label }),
+      it.badge != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__badge", children: it.badge }) : null
+    ] });
+    const common = {
+      className: "twc-sidebar__item",
+      "data-active": it.active || void 0,
+      "aria-current": it.active ? "page" : void 0,
+      onClick: it.onClick,
+      "aria-label": collapsed && labelStr != null ? labelStr : void 0
+    };
+    const node = href != null ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, ...common, children: inner }) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", ...common, children: inner });
+    return collapsed && labelStr != null ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: labelStr, placement: "right", style: { display: "block" }, children: node }) : node;
+  };
+  const groups = [];
+  let group = { sid: null, section: null, entries: [] };
+  let secN = 0;
+  for (let i = 0; i < items.length; i++) {
+    const it = items[i];
+    if (it.section) {
+      if (group.entries.length || group.section != null) groups.push(group);
+      secN += 1;
+      group = { sid: `${navId}-sec-${secN}`, section: it.section, entries: [] };
+    } else {
+      group.entries.push({ it, i });
+    }
+  }
+  if (group.entries.length || group.section != null) groups.push(group);
+  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", { className: "twc-sidebar__nav", children: items.map(
-      (it, i) => it.section ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sidebar__section", children: it.section }, i) : (() => {
-        const href = safeHref11(it.href);
-        const labelStr = typeof it.label === "string" ? it.label : void 0;
-        const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__ic", "aria-hidden": "true", children: it.icon }) : labelStr != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__ic twc-sidebar__ic--initial", "aria-hidden": "true", children: labelStr.charAt(0) }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__label", children: it.label }),
-          it.badge != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__badge", children: it.badge }) : null
-        ] });
-        const common = {
-          className: "twc-sidebar__item",
-          "data-active": it.active || void 0,
-          "aria-current": it.active ? "page" : void 0,
-          onClick: it.onClick,
-          "aria-label": collapsed && labelStr != null ? labelStr : void 0
-        };
-        const node = href != null ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, ...common, children: inner }, i) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", ...common, children: inner }, i);
-        return collapsed && labelStr != null ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: labelStr, placement: "right", style: { display: "block" }, children: node }, i) : node;
-      })()
-    ) }),
+    /* @__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: [
+      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)) }),
     footer || collapsible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-sidebar__foot", children: [
       footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sidebar__foot-user", children: footer }) : null,
-      collapsible ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-sidebar__collapse", onClick: toggle, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", children: [
+      collapsible ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-sidebar__collapse", onClick: toggle, "aria-expanded": !collapsed, "aria-controls": navId, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", 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("span", { children: "Collapse" })
       ] }) : null
     ] }) : null
   ] });
+  if (!overlay) {
+    return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: `twc-sidebar ${className}`, "data-collapsed": collapsed || void 0, ...rest, children: body });
+  }
+  if (!mounted) return null;
+  const state = open ? "open" : "closed";
+  const drawer = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sidebar__overlay", "data-state": state, onMouseDown: (e) => {
+    if (e.target === e.currentTarget) setOpen(false);
+  }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "aside",
+    {
+      ref: panelRef,
+      className: `twc-sidebar twc-sidebar--overlay ${className}`,
+      "data-state": state,
+      "data-collapsed": collapsed || void 0,
+      role: "dialog",
+      "aria-modal": "true",
+      tabIndex: -1,
+      "aria-label": navLabel || "Navigation",
+      ...rest,
+      children: body
+    }
+  ) });
+  return renderPortal(drawer);
 }
 function Skeleton({
   variant = "text",
   width,
   height,
   lines = 1,
+  label,
   className = "",
   style,
   ...rest
 }) {
+  const a11y = label != null ? { role: "status", "aria-live": "polite", "aria-busy": true } : { "aria-hidden": true };
   const __twcStyles = useScopedStyles("twc-skeleton-styles", `
 .twc-skeleton {
   position: relative; overflow: hidden;
@@ -8958,25 +9179,31 @@ function Skeleton({
 .twc-skeleton[data-variant="rect"] { border-radius: var(--radius-md); }
 .twc-skeleton__group { display: flex; flex-direction: column; gap: 8px; }
 .twc-skeleton__group .twc-skeleton:last-child { width: 70%; }
+.twc-skeleton__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 /* The shimmer signals loading \u2014 keep it animating even under reduced motion. */
 @media (prefers-reduced-motion: reduce) {
   .twc-skeleton::after { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
 }
 `);
   if (variant === "text" && lines > 1) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-skeleton__group ${className}`, style: { height, ...style }, ...rest, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-skeleton__group ${className}`, style: { height, ...style }, ...a11y, ...rest, children: [
       __twcStyles,
+      label != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-skeleton__sr", children: label }) : null,
       Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-skeleton", "data-variant": "text", style: { width: width || "100%" } }, i))
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       className: `twc-skeleton ${className}`,
       "data-variant": variant,
       style: { width, height, ...style },
+      ...a11y,
       ...rest,
-      children: __twcStyles
+      children: [
+        __twcStyles,
+        label != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-skeleton__sr", children: label }) : null
+      ]
     }
   );
 }
@@ -9043,12 +9270,12 @@ function Slider({
   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 = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React23__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultValue);
   const val = value !== void 0 ? value : internal;
-  const trackRef = React23__namespace.default.useRef(null);
-  const [dragging, setDragging] = React23__namespace.default.useState(false);
+  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 clampSnap = (raw) => {
@@ -9066,8 +9293,8 @@ function Slider({
     const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
     return clampSnap(min + ratio * (max - min));
   };
-  const dragCleanupRef = React23__namespace.default.useRef(null);
-  React23__namespace.default.useEffect(() => () => dragCleanupRef.current?.(), []);
+  const dragCleanupRef = React24__namespace.default.useRef(null);
+  React24__namespace.default.useEffect(() => () => dragCleanupRef.current?.(), []);
   function onPointerDown(e) {
     if (disabled) return;
     e.preventDefault();
@@ -9089,7 +9316,7 @@ function Slider({
   }
   function onKeyDown(e) {
     if (disabled) return;
-    let next = val;
+    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);
     else if (e.key === "Home") next = min;
@@ -9142,12 +9369,15 @@ function Slider({
 function Spinner({
   size = "md",
   color,
-  tone = "current",
+  tone,
   label = "Loading",
   className = "",
   ...rest
 }) {
-  const resolvedColor = color ?? tone;
+  if (process.env.NODE_ENV !== "production" && tone !== void 0 && color === void 0) {
+    warnOnce("Spinner.tone", "Spinner: `tone` is deprecated and will be removed in 2.0 \u2014 use `color`.");
+  }
+  const resolvedColor = color ?? tone ?? "current";
   const __twcStyles = useScopedStyles("twc-spinner-styles", `
 .twc-spinner {
   --_sz: 24px; --_bw: 2.5px;
@@ -9263,6 +9493,7 @@ var STEPPER_CSS = `
 .twc-stepper[data-orientation="vertical"] .twc-step__col { display: flex; flex-direction: column; align-items: center; }
 .twc-step[data-state="complete"] .twc-step__connector, .twc-step[data-state="active"] .twc-step__connector { background: var(--_accent); }
 .twc-stepper[data-orientation="vertical"] .twc-step__vbody { padding-bottom: var(--space-2); }
+.twc-step__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 `;
 var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) });
 var BangIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5M12 17h.01" }) });
@@ -9278,7 +9509,7 @@ function Stepper({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-stepper-styles", STEPPER_CSS);
-  const [activeInternal, setActiveInternal] = React23__namespace.default.useState(defaultActive);
+  const [activeInternal, setActiveInternal] = React24__namespace.default.useState(defaultActive);
   const active = activeProp !== void 0 ? activeProp : activeInternal;
   const handleStep = (i) => {
     if (activeProp === void 0) setActiveInternal(i);
@@ -9290,11 +9521,12 @@ function Stepper({
     if (i === active) return "active";
     return "upcoming";
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-stepper ${className}`, "data-orientation": orientation, "data-tone": tone, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-stepper ${className}`, "data-orientation": orientation, "data-tone": tone, role: "group", "aria-label": "Progress", ...rest, children: [
     __twcStyles,
     steps.map((step, i) => {
       const state = stateOf(i, step);
       const last = i === steps.length - 1;
+      const srText = `Step ${i + 1} of ${steps.length}${state === "complete" ? ", completed" : state === "error" ? ", error" : state === "active" ? ", current" : ", upcoming"}. `;
       const isClickable = clickable && i <= active;
       const interactive = isClickable ? {
         role: "button",
@@ -9316,8 +9548,10 @@ function Stepper({
             "data-state": state,
             "data-clickable": isClickable || void 0,
             "aria-current": state === "active" ? "step" : void 0,
+            "aria-invalid": state === "error" ? "true" : void 0,
             ...interactive,
             children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-step__sr", children: srText }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-step__col", children: [
                 indicator,
                 !last ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-step__connector" }) : null
@@ -9338,8 +9572,10 @@ function Stepper({
           "data-state": state,
           "data-clickable": isClickable || void 0,
           "aria-current": state === "active" ? "step" : void 0,
+          "aria-invalid": state === "error" ? "true" : void 0,
           ...interactive,
           children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-step__sr", children: srText }),
             indicator,
             !last ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-step__connector" }) : null,
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-step__body", children: [
@@ -9405,7 +9641,7 @@ function Switch({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
@@ -9489,14 +9725,14 @@ function Table({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-table-styles", TABLE_CSS);
-  const cols = React23__namespace.default.useMemo(
+  const cols = React24__namespace.default.useMemo(
     () => (columns || []).map((c) => ({ ...c, header: c.headerName, render: c.renderCell })),
     [columns]
   );
   const dataRows = rowsProp || [];
-  const [internalSort, setInternalSort] = React23__namespace.default.useState(defaultSort || { field: null, dir: "asc" });
+  const [internalSort, setInternalSort] = React24__namespace.default.useState(defaultSort || { field: null, dir: "asc" });
   const sort = (sortProp !== void 0 ? sortProp : internalSort) || { field: null, dir: "asc" };
-  const rows = React23__namespace.default.useMemo(() => {
+  const rows = React24__namespace.default.useMemo(() => {
     if (!sortable || !sort.field) return dataRows;
     const col = cols.find((c) => c.field === sort.field);
     if (!col) return dataRows;
@@ -9588,6 +9824,13 @@ var TABS_CSS = `
 .twc-tabs[data-variant="pill"] .twc-tabs__indicator {
   top: 4px; bottom: 4px; height: auto; background: var(--color-surface); box-shadow: var(--shadow-sm); border-radius: var(--radius-md);
 }
+.twc-tab[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
+/* Horizontal tablist scrolls when tabs overflow (vertical orientation untouched). Making
+   overflow-x non-visible makes overflow-y compute to auto, which would clip the bottom:-1px
+   indicator \u2014 so pin the horizontal indicator to bottom:0 (the list border-bottom is the baseline). */
+.twc-tabs:not([data-orientation="vertical"]) .twc-tabs__list { overflow-x: auto; scrollbar-width: none; }
+.twc-tabs:not([data-orientation="vertical"]) .twc-tabs__list::-webkit-scrollbar { display: none; }
+.twc-tabs:not([data-orientation="vertical"]) .twc-tabs__indicator { bottom: 0; }
 .twc-tabs__panel { padding-top: var(--space-4); }
 
 /* Vertical orientation */
@@ -9622,24 +9865,27 @@ function Tabs({
 }) {
   const vertical = orientation === "vertical";
   const __twcStyles = useScopedStyles("twc-tabs-styles", TABS_CSS);
-  const [internal, setInternal] = React23__namespace.default.useState(defaultValue ?? items[0]?.value);
+  const [internal, setInternal] = React24__namespace.default.useState(defaultValue ?? items[0]?.value);
   const active = value ?? internal;
-  const listRef = React23__namespace.default.useRef(null);
-  const [ind, setInd] = React23__namespace.default.useState({ left: 0, width: 0, top: 0, height: 0 });
-  const baseId = React23__namespace.default.useId();
+  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 tabIdAt = (i) => `${baseId}-tab-${i}`;
   const panelId = `${baseId}-panel`;
   const activeIndex = items.findIndex((it) => it.value === active);
-  const updateIndicator = React23__namespace.default.useCallback(() => {
+  const updateIndicator = React24__namespace.default.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const el = list.querySelector('[data-active="true"]');
-    if (el) setInd({ left: el.offsetLeft, width: el.offsetWidth, top: el.offsetTop, height: el.offsetHeight });
-  }, []);
-  React23__namespace.default.useEffect(() => {
+    if (el) {
+      setInd({ left: el.offsetLeft, width: el.offsetWidth, top: el.offsetTop, height: el.offsetHeight });
+      if (!vertical) el.scrollIntoView?.({ inline: "nearest", block: "nearest" });
+    }
+  }, [vertical]);
+  React24__namespace.default.useEffect(() => {
     updateIndicator();
   }, [active, updateIndicator, items, orientation]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     const r = () => updateIndicator();
     window.addEventListener("resize", r);
     if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
@@ -9660,20 +9906,32 @@ function Tabs({
     const keys = [prevKey, nextKey, "Home", "End"];
     if (!keys.includes(e.key)) return;
     const n = items.length;
-    if (!n) return;
+    if (!n || items.every((it2) => it2.disabled)) return;
     e.preventDefault();
     let i = activeIndex < 0 ? 0 : activeIndex;
-    if (e.key === "Home") i = 0;
-    else if (e.key === "End") i = n - 1;
-    else {
+    if (e.key === "Home") i = items.findIndex((it2) => !it2.disabled);
+    else if (e.key === "End") {
+      for (let k = n - 1; k >= 0; k--) {
+        if (!items[k].disabled) {
+          i = k;
+          break;
+        }
+      }
+    } else {
       const dir = e.key === nextKey ? 1 : -1;
-      i = (i + dir + n) % n;
+      let guard = 0;
+      do {
+        i = (i + dir + n) % n;
+      } while (items[i]?.disabled && ++guard <= n);
     }
     const it = items[i];
-    if (!it) return;
+    if (!it || it.disabled) return;
     select(it.value);
     const btns = listRef.current?.querySelectorAll('[role="tab"]');
-    if (btns && btns[i]) btns[i].focus();
+    if (btns && btns[i]) {
+      btns[i].focus();
+      btns[i].scrollIntoView?.({ inline: "nearest", block: "nearest" });
+    }
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-tabs ${className}`, "data-variant": variant, "data-tone": tone, "data-orientation": orientation, ...rest, children: [
     __twcStyles,
@@ -9686,10 +9944,14 @@ function Tabs({
           className: "twc-tab",
           role: "tab",
           "aria-selected": it.value === active,
+          "aria-disabled": it.disabled || void 0,
+          disabled: it.disabled || void 0,
           "aria-controls": it.value === active && panelRendered ? panelId : void 0,
-          tabIndex: it.value === active ? 0 : -1,
+          tabIndex: it.value === active && !it.disabled ? 0 : -1,
           "data-active": it.value === active || void 0,
-          onClick: () => select(it.value),
+          onClick: () => {
+            if (!it.disabled) select(it.value);
+          },
           children: [
             it.icon,
             it.label,
@@ -9752,10 +10014,12 @@ function Tag({
   leftIcon,
   tone = "neutral",
   variant = "soft",
+  removeLabel,
   className = "",
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-tag-styles", TAG_CSS);
+  const _removeLabel = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `twc-tag ${className}`, "data-tone": tone, "data-variant": variant, "data-no-remove": !onRemove || void 0, ...rest, children: [
     __twcStyles,
     leftIcon,
@@ -9763,7 +10027,7 @@ function Tag({
     onRemove ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-tag__remove", onClick: (e) => {
       e.stopPropagation();
       onRemove(e);
-    }, "aria-label": "Remove", 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
+    }, "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({
@@ -9809,7 +10073,7 @@ function Textarea({
 .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 = React23__namespace.default.useId();
+  const autoId = React24__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
@@ -9947,19 +10211,19 @@ function Toast({
 }) {
   const resolvedTone = tone === "neutral" ? "default" : tone;
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const onCloseRef = React23__namespace.default.useRef(onClose);
-  React23__namespace.default.useEffect(() => {
+  const onCloseRef = React24__namespace.default.useRef(onClose);
+  React24__namespace.default.useEffect(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const timer = React23__namespace.default.useRef();
-  const stop = React23__namespace.default.useCallback(() => clearTimeout(timer.current), []);
-  const start = React23__namespace.default.useCallback(() => {
+  const timer = React24__namespace.default.useRef();
+  const stop = React24__namespace.default.useCallback(() => clearTimeout(timer.current), []);
+  const start = React24__namespace.default.useCallback(() => {
     stop();
     if (duration && duration !== Infinity && onCloseRef.current) {
       timer.current = setTimeout(() => onCloseRef.current && onCloseRef.current(), duration);
     }
   }, [duration, stop]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     start();
     return stop;
   }, [start, stop]);
@@ -10003,30 +10267,30 @@ function Toast({
 }
 function ToastViewport({ children, limit, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const shown = limit && limit > 0 ? React23__namespace.default.Children.toArray(children).slice(-limit) : children;
+  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: [
     __twcStyles,
     shown
   ] });
 }
-var ToastContext = React23__namespace.default.createContext(null);
+var ToastContext = React24__namespace.default.createContext(null);
 function useToast() {
-  const ctx = React23__namespace.default.useContext(ToastContext);
+  const ctx = React24__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] = React23__namespace.default.useState([]);
-  const idRef = React23__namespace.default.useRef(0);
-  const limitRef = React23__namespace.default.useRef(limit);
-  React23__namespace.default.useEffect(() => {
+  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(() => {
     limitRef.current = limit;
   }, [limit]);
-  const dismiss = React23__namespace.default.useCallback((id) => {
+  const dismiss = React24__namespace.default.useCallback((id) => {
     setToasts((s) => s.filter((t) => t.id !== id));
   }, []);
-  const clear = React23__namespace.default.useCallback(() => setToasts([]), []);
-  const api = React23__namespace.default.useMemo(() => {
+  const clear = React24__namespace.default.useCallback(() => setToasts([]), []);
+  const api = React24__namespace.default.useMemo(() => {
     const push = (opts) => {
       const id = idRef.current += 1;
       const next = typeof opts === "string" ? { title: opts } : opts && typeof opts === "object" ? opts : {};
@@ -10047,7 +10311,7 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
     toast.show = withTone("default");
     return { toast, dismiss, clear };
   }, [dismiss, clear]);
-  const value = React23__namespace.default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
+  const value = React24__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(
@@ -10087,7 +10351,7 @@ var TREE_CSS = `
 .twc-tree__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-tree__badge { flex: none; font-size: 11px; color: var(--color-text-subtle); }
 `;
-function Node({ node, depth, expanded, selectedId, tabbableId, rowRefs, onToggle, onSelect, onRowFocus }) {
+function Node({ node, depth, posInSet, setSize, expanded, selectedId, tabbableId, rowRefs, onToggle, onSelect, onRowFocus }) {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
   const open = expanded.has(node.id);
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { role: "none", children: [
@@ -10098,6 +10362,8 @@ function Node({ node, depth, expanded, selectedId, tabbableId, rowRefs, onToggle
         className: "twc-tree__row",
         role: "treeitem",
         "aria-level": depth + 1,
+        "aria-posinset": posInSet,
+        "aria-setsize": setSize,
         "aria-selected": selectedId === node.id,
         "data-selected": selectedId === node.id || void 0,
         "data-tree-id": node.id,
@@ -10121,11 +10387,13 @@ function Node({ node, depth, expanded, selectedId, tabbableId, rowRefs, onToggle
         ]
       }
     ),
-    hasChildren && open ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "twc-tree__group twc-tree__group--child", role: "group", children: node.children.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+    hasChildren && open ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "twc-tree__group twc-tree__group--child", role: "group", children: node.children.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
       Node,
       {
         node: c,
         depth: depth + 1,
+        posInSet: i + 1,
+        setSize: node.children.length,
         expanded,
         selectedId,
         tabbableId,
@@ -10151,12 +10419,13 @@ function TreeView({
 }) {
   const nodes = items;
   const __twcStyles = useScopedStyles("twc-tree-styles", TREE_CSS);
-  const [expInternal, setExpInternal] = React23__namespace.default.useState(() => new Set(defaultExpanded));
+  const [expInternal, setExpInternal] = React24__namespace.default.useState(() => new Set(defaultExpanded));
   const expanded = expandedProp !== void 0 ? new Set(expandedProp) : expInternal;
-  const [selInternal, setSelInternal] = React23__namespace.default.useState(defaultSelectedId);
+  const [selInternal, setSelInternal] = React24__namespace.default.useState(defaultSelectedId);
   const selectedId = selectedProp !== void 0 ? selectedProp : selInternal;
-  const [focusId, setFocusId] = React23__namespace.default.useState(null);
-  const rowRefs = React23__namespace.default.useRef(/* @__PURE__ */ new Map());
+  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 toggle = (id) => {
     const n = new Set(expanded);
     n.has(id) ? n.delete(id) : n.add(id);
@@ -10170,10 +10439,12 @@ function TreeView({
   const visible = [];
   const parentOf = /* @__PURE__ */ new Map();
   const hasKids = /* @__PURE__ */ new Map();
+  const labelText = /* @__PURE__ */ new Map();
   const walk = (nodes2, parentId) => {
     for (const n of nodes2) {
       visible.push(n.id);
       parentOf.set(n.id, parentId);
+      if (typeof n.label === "string") labelText.set(n.id, n.label);
       const kids = Array.isArray(n.children) && n.children.length > 0;
       hasKids.set(n.id, kids);
       if (kids && expanded.has(n.id)) walk(n.children, n.id);
@@ -10211,17 +10482,36 @@ function TreeView({
         return;
       }
       next = parentOf.get(id);
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && /\S/.test(e.key)) {
+      const now = Date.now();
+      taRef.current.str = now - taRef.current.t > 500 ? e.key : taRef.current.str + e.key;
+      taRef.current.t = now;
+      const q = taRef.current.str.toLowerCase();
+      const single = q.length > 1 && [...q].every((c) => c === q[0]);
+      const needle = single ? q[0] : q;
+      for (let k = 1; k <= visible.length; k++) {
+        const cand = visible[(i + k) % visible.length];
+        const lbl = labelText.get(cand);
+        if (lbl && lbl.toLowerCase().startsWith(needle)) {
+          e.preventDefault();
+          focusRow(cand);
+          break;
+        }
+      }
+      return;
     } else return;
     e.preventDefault();
     if (next != null) focusRow(next);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-tree ${className}`, role: "tree", onKeyDown, ...rest, children: [
     __twcStyles,
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "twc-tree__group", role: "none", children: nodes.map((n) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "twc-tree__group", role: "none", children: nodes.map((n, i) => /* @__PURE__ */ jsxRuntime.jsx(
       Node,
       {
         node: n,
         depth: 0,
+        posInSet: i + 1,
+        setSize: nodes.length,
         expanded,
         selectedId,
         tabbableId,
@@ -10235,12 +10525,22 @@ function TreeView({
   ] });
 }
 var SHELL_CSS = `
-.twc-shell { display: flex; overflow: hidden; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); }
+.twc-shell { position: relative; display: flex; overflow: hidden; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); }
+.twc-shell__skip { position: absolute; inset-inline-start: var(--space-3); inset-block-start: var(--space-3); z-index: 100;
+  padding: var(--space-2) var(--space-4); background: var(--color-surface); color: var(--color-text);
+  border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-sans);
+  transform: translateY(-200%); transition: transform var(--duration-fast) var(--ease-standard); }
+.twc-shell__skip:focus-visible { transform: translateY(0); outline: none; box-shadow: var(--ring); }
 .twc-shell__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; height: 100%; }
 .twc-shell__header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
   min-height: 60px; padding-inline: var(--space-5); border-bottom: var(--border-thin) solid var(--color-border); background: var(--color-surface); }
 .twc-shell__content { flex: 1 1 auto; min-height: 0; overflow: auto; }
 .twc-shell__content[data-padded="true"] { padding: var(--space-6) var(--space-5); }
+/* Mobile: stack the shell so the sidebar (rendered as an off-canvas overlay) no
+   longer reserves a column \u2014 the main content spans the full width. */
+@media (max-width: 720px) {
+  .twc-shell { flex-direction: column; }
+}
 `;
 function AppShell({
   sidebar,
@@ -10248,17 +10548,27 @@ function AppShell({
   children,
   height = "100dvh",
   padded = true,
+  mainId = "twc-main",
+  skipLinkLabel = "Skip to content",
+  sidebarOpen,
+  onSidebarOpenChange,
   className = "",
   style,
   ...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, {
+    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
+  }) : sidebar;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-shell ${className}`.trim(), style: { height, ...style }, ...rest, children: [
     __twcStyles,
-    sidebar,
+    skipLinkLabel != null && skipLinkLabel !== false ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "twc-shell__skip", href: `#${mainId}`, children: skipLinkLabel }) : null,
+    wiredSidebar,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-shell__main", children: [
       header != null ? /* @__PURE__ */ jsxRuntime.jsx("header", { className: "twc-shell__header", children: header }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "twc-shell__content", "data-padded": padded ? "true" : void 0, children })
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "twc-shell__content", id: mainId, tabIndex: -1, "data-padded": padded ? "true" : void 0, children })
     ] })
   ] });
 }
@@ -10277,7 +10587,7 @@ function bgValue(bg) {
   if (BG[bg]) return `var(${BG[bg]})`;
   return String(bg).startsWith("--") ? `var(${bg})` : bg;
 }
-function safeHref4(url) {
+function safeHref5(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -10322,11 +10632,11 @@ function Box({
     boxShadow: shadow ? `var(--shadow-${shadow})` : void 0,
     ...style
   };
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref4(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref5(rest.href);
   return /* @__PURE__ */ jsxRuntime.jsx(Tag2, { className: `twc-box ${className}`.trim(), style: s, ...rest, children });
 }
 var SIZES = { sm: 640, md: 768, lg: 1024, xl: 1280, full: "100%" };
-function safeHref5(url) {
+function safeHref6(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -10341,7 +10651,7 @@ function Container({
   ...rest
 }) {
   const max = SIZES[size] ?? size;
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref5(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref6(rest.href);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag2,
     {
@@ -10366,7 +10676,8 @@ function space(v) {
 function len(v) {
   return typeof v === "number" ? `${v}px` : v;
 }
-function safeHref6(url) {
+var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+function safeHref7(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -10376,29 +10687,54 @@ function Grid({
   columns,
   minChildWidth,
   gap = 4,
+  rowGap,
+  columnGap,
   align,
   justify,
+  alignContent,
+  justifyContent,
   className = "",
   style,
   children,
   ...rest
 }) {
-  const templateColumns = minChildWidth ? `repeat(auto-fill, minmax(min(${len(minChildWidth)}, 100%), 1fr))` : `repeat(${columns || 1}, minmax(0, 1fr))`;
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref6(rest.href);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const responsive = columns != null && typeof columns === "object";
+  const uid = React24__namespace.default.useId();
+  const gridId = responsive ? `g${uid.replace(/[^a-zA-Z0-9]/g, "")}` : null;
+  let css = "";
+  if (responsive) {
+    const base = columns.base ?? 1;
+    const sel = `[data-twc-grid-id="${gridId}"]`;
+    css = `${sel} { --twc-grid-cols: ${base}; }`;
+    for (const bp of ["sm", "md", "lg", "xl"]) {
+      if (columns[bp] != null) css += `
+@media (min-width: ${BP[bp]}px) { ${sel} { --twc-grid-cols: ${columns[bp]}; } }`;
+    }
+  }
+  const __twcStyles = useScopedStyles(gridId ? `twc-grid-${gridId}` : "twc-grid", css);
+  const templateColumns = minChildWidth ? `repeat(auto-fill, minmax(min(${len(minChildWidth)}, 100%), 1fr))` : responsive ? `repeat(var(--twc-grid-cols, ${columns.base ?? 1}), minmax(0, 1fr))` : `repeat(${columns || 1}, minmax(0, 1fr))`;
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref7(rest.href);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
       className: `twc-grid ${className}`.trim(),
+      "data-twc-grid-id": gridId || void 0,
       style: {
         display: "grid",
         gridTemplateColumns: templateColumns,
-        gap: space(gap),
+        rowGap: space(rowGap ?? gap),
+        columnGap: space(columnGap ?? gap),
         alignItems: align,
         justifyItems: justify,
+        alignContent,
+        justifyContent,
         ...style
       },
       ...rest,
-      children
+      children: [
+        responsive ? __twcStyles : null,
+        children
+      ]
     }
   );
 }
@@ -10407,7 +10743,7 @@ function space2(v) {
   if (typeof v === "number") return `var(--space-${String(v).replace(".", "-")})`;
   return v;
 }
-function safeHref7(url) {
+function safeHref8(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -10420,12 +10756,21 @@ function Stack({
   justify,
   wrap = false,
   inline = false,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  divider,
   className = "",
   style,
   children,
   ...rest
 }) {
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref7(rest.href);
+  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;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag2,
     {
@@ -10437,11 +10782,15 @@ function Stack({
         alignItems: align,
         justifyContent: justify,
         flexWrap: wrap ? "wrap" : void 0,
+        paddingTop: space2(pt ?? py ?? p),
+        paddingRight: space2(pr ?? px ?? p),
+        paddingBottom: space2(pb ?? py ?? p),
+        paddingLeft: space2(pl ?? px ?? p),
         minWidth: 0,
         ...style
       },
       ...rest,
-      children
+      children: kids
     }
   );
 }
@@ -10453,22 +10802,64 @@ var CODE_CSS = `
   border: var(--border-thin) solid var(--color-border);
   white-space: normal; overflow-wrap: anywhere; word-break: break-word;
 }
+.twc-code[data-block="true"] {
+  display: block; position: relative; white-space: pre; overflow-x: auto;
+  padding: 12px 14px; padding-inline-end: 40px; line-height: 1.6; font-size: 0.8125em;
+  overflow-wrap: normal; word-break: normal;
+}
+.twc-code__copy {
+  position: absolute; top: 6px; inset-inline-end: 6px; display: inline-grid; place-items: center;
+  width: 26px; height: 26px; border: none; border-radius: var(--radius-sm);
+  background: var(--color-surface); color: var(--color-text-subtle); cursor: pointer;
+  transition: color var(--duration-fast), background-color var(--duration-fast);
+}
+.twc-code__copy:hover { color: var(--color-text); }
+.twc-code__copy:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-code__copy svg { width: 15px; height: 15px; display: block; }
 `;
-function safeHref8(url) {
+function safeHref9(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Code({ as: Tag2 = "code", className = "", children, ...rest }) {
+function Code({
+  as,
+  block = false,
+  copyable = false,
+  copyLabel = "Copy code",
+  copiedLabel = "Copied",
+  className = "",
+  children,
+  ...rest
+}) {
   const __twcStyles = useScopedStyles("twc-code-styles", CODE_CSS);
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref8(rest.href);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { className: `twc-code ${className}`.trim(), ...rest, children: [
+  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 doCopy = () => {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return;
+    const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), 2e3);
+    }).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref: rootRef, className: `twc-code ${className}`.trim(), "data-block": block || void 0, ...rest, children: [
     __twcStyles,
+    copyable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-code__copy", "aria-label": copied ? copiedLabel : copyLabel, onClick: doCopy, children: copied ? /* @__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: "m20 6-11 11-5-5" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+    ] }) }) : null,
     children
   ] });
 }
 var LEVEL_SIZE = { 1: "4xl", 2: "2xl", 3: "xl", 4: "lg", 5: "base", 6: "sm" };
-function safeHref9(url) {
+function safeHref10(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -10477,15 +10868,18 @@ function Heading({
   as,
   level = 2,
   size,
+  display = false,
   align,
+  truncate,
+  lineClamp,
   className = "",
   style,
   children,
   ...rest
 }) {
   const Tag2 = as || `h${level}`;
-  const sz = size || LEVEL_SIZE[level] || "2xl";
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref9(rest.href);
+  const sz = size || (display ? "display" : LEVEL_SIZE[level]) || "2xl";
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag2,
     {
@@ -10499,6 +10893,7 @@ function Heading({
         letterSpacing: "-0.02em",
         fontSize: `var(--text-${sz})`,
         textAlign: align,
+        ...lineClamp != null ? { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lineClamp, overflow: "hidden" } : truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 } : null,
         ...style
       },
       ...rest,
@@ -10517,9 +10912,11 @@ var TONE = {
   success: "--color-success",
   warning: "--color-warning-subtle-fg",
   info: "--color-info-subtle-fg",
-  neutral: "--color-text-muted"
+  neutral: "--color-text-muted",
+  // Adopt the surrounding color (e.g. inside a solid Button/Badge/Alert or a link).
+  inherit: "inherit"
 };
-function safeHref10(url) {
+function safeHref11(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -10530,12 +10927,15 @@ function Text({
   tone = "default",
   weight,
   align,
+  truncate,
+  lineClamp,
   className = "",
   style,
   children,
   ...rest
 }) {
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
+  const toneToken = TONE[tone] || TONE.default;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag2,
     {
@@ -10545,9 +10945,10 @@ function Text({
         fontFamily: "var(--font-sans)",
         lineHeight: 1.6,
         fontSize: `var(--text-${size})`,
-        color: `var(${TONE[tone] || TONE.default})`,
+        color: toneToken.startsWith("--") ? `var(${toneToken})` : toneToken,
         fontWeight: weight ? `var(--font-${weight})` : void 0,
         textAlign: align,
+        ...lineClamp != null ? { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lineClamp, overflow: "hidden" } : truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 } : null,
         ...style
       },
       ...rest,
@@ -10555,58 +10956,68 @@ function Text({
     }
   );
 }
-var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicLayoutEffect = canUseDOM ? React23__namespace.default.useLayoutEffect : React23__namespace.default.useEffect;
+var canUseDOM2 = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicLayoutEffect = canUseDOM2 ? React24__namespace.default.useLayoutEffect : React24__namespace.default.useEffect;
 function useMounted() {
-  const [mounted, setMounted] = React23__namespace.default.useState(false);
-  React23__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React24__namespace.default.useState(false);
+  React24__namespace.default.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function usePrevious(value) {
-  const ref = React23__namespace.default.useRef(void 0);
-  React23__namespace.default.useEffect(() => {
+  const ref = React24__namespace.default.useRef(void 0);
+  React24__namespace.default.useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
 function useToggle(initial = false) {
-  const [on, setOn] = React23__namespace.default.useState(initial);
-  const toggle = React23__namespace.default.useCallback((next) => {
+  const [on, setOn] = React24__namespace.default.useState(initial);
+  const toggle = React24__namespace.default.useCallback((next) => {
     setOn((prev) => typeof next === "boolean" ? next : !prev);
   }, []);
   return [on, toggle, setOn];
 }
 function useDisclosure(initial = false) {
-  const [open, setOpen] = React23__namespace.default.useState(initial);
-  const onOpen = React23__namespace.default.useCallback(() => setOpen(true), []);
-  const onClose = React23__namespace.default.useCallback(() => setOpen(false), []);
-  const onToggle = React23__namespace.default.useCallback(() => setOpen((p) => !p), []);
+  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), []);
   return { open, onOpen, onClose, onToggle, setOpen };
 }
 function useControllableState({ value, defaultValue, onChange } = {}) {
   const isControlled = value !== void 0;
-  const [uncontrolled, setUncontrolled] = React23__namespace.default.useState(defaultValue);
+  const [uncontrolled, setUncontrolled] = React24__namespace.default.useState(defaultValue);
   const current = isControlled ? value : uncontrolled;
-  const ref = React23__namespace.default.useRef({ current, isControlled, onChange });
+  const ref = React24__namespace.default.useRef({ current, isControlled, onChange });
   useIsomorphicLayoutEffect(() => {
     ref.current = { current, isControlled, onChange };
   });
-  const setValue = React23__namespace.default.useCallback((next) => {
+  const wasControlled = React24__namespace.default.useRef(isControlled);
+  React24__namespace.default.useEffect(() => {
+    if (wasControlled.current !== isControlled) {
+      warnOnce(
+        "useControllableState:switch",
+        `useControllableState: a value is switching from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Decide between controlled (\`value\`) and uncontrolled (\`defaultValue\`) for the component's lifetime.`
+      );
+      wasControlled.current = isControlled;
+    }
+  });
+  const setValue = React24__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;
     if (!ctrl) setUncontrolled(resolved);
     if (cb) cb(resolved);
   }, []);
-  return [current, setValue];
+  return [current, setValue, isControlled];
 }
-function useMediaQuery(query) {
-  const get = () => canUseDOM ? window.matchMedia(query).matches : false;
-  const [matches3, setMatches] = React23__namespace.default.useState(get);
-  React23__namespace.default.useEffect(() => {
-    if (!canUseDOM) return void 0;
+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);
+  useIsomorphicLayoutEffect(() => {
+    if (!canUseDOM2) return void 0;
     const mql = window.matchMedia(query);
     const onChange = () => setMatches(mql.matches);
     onChange();
@@ -10619,10 +11030,10 @@ function usePrefersReducedMotion() {
   return useMediaQuery("(prefers-reduced-motion: reduce)");
 }
 function useColorScheme({ storageKey = "twico-theme", attribute = "class", element, disableTransitionsOnChange = true } = {}) {
-  const getTarget = () => element || (canUseDOM ? document.documentElement : null);
-  const firstApply = React23__namespace.default.useRef(true);
+  const getTarget = () => element || (canUseDOM2 ? document.documentElement : null);
+  const firstApply = React24__namespace.default.useRef(true);
   const read = () => {
-    if (!canUseDOM) return "light";
+    if (!canUseDOM2) return "light";
     try {
       const stored = window.localStorage.getItem(storageKey);
       if (stored === "light" || stored === "dark") return stored;
@@ -10630,12 +11041,12 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     }
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   };
-  const [theme, setThemeState] = React23__namespace.default.useState(read);
-  const apply = React23__namespace.default.useCallback(
+  const [theme, setThemeState] = React24__namespace.default.useState(read);
+  const apply = React24__namespace.default.useCallback(
     (t) => {
       const target = getTarget();
       if (!target) return;
-      const skip = firstApply.current || !disableTransitionsOnChange || !canUseDOM;
+      const skip = firstApply.current || !disableTransitionsOnChange || !canUseDOM2;
       firstApply.current = false;
       let css;
       if (!skip) {
@@ -10657,26 +11068,26 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   useIsomorphicLayoutEffect(() => {
     apply(theme);
   }, [theme, apply]);
-  const themeRef = React23__namespace.default.useRef(theme);
+  const themeRef = React24__namespace.default.useRef(theme);
   useIsomorphicLayoutEffect(() => {
     themeRef.current = theme;
   }, [theme]);
-  const setTheme = React23__namespace.default.useCallback(
+  const setTheme = React24__namespace.default.useCallback(
     (t) => {
       setThemeState(t);
       try {
-        if (canUseDOM) window.localStorage.setItem(storageKey, t);
+        if (canUseDOM2) window.localStorage.setItem(storageKey, t);
       } catch (e) {
       }
-      if (canUseDOM) window.dispatchEvent(new Event("twico:colorscheme"));
+      if (canUseDOM2) window.dispatchEvent(new Event("twico:colorscheme"));
     },
     [storageKey]
   );
-  const toggle = React23__namespace.default.useCallback(() => {
+  const toggle = React24__namespace.default.useCallback(() => {
     setTheme(themeRef.current === "dark" ? "light" : "dark");
   }, [setTheme]);
-  React23__namespace.default.useEffect(() => {
-    if (!canUseDOM) return void 0;
+  React24__namespace.default.useEffect(() => {
+    if (!canUseDOM2) return void 0;
     const sync = () => setThemeState(read());
     const onStorage = (e) => {
       if (e.key === storageKey) sync();
@@ -10691,15 +11102,15 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   return { theme, setTheme, toggle, isDark: theme === "dark" };
 }
 function useEventListener(eventName, handler, element, options) {
-  const saved = React23__namespace.default.useRef(handler);
+  const saved = React24__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;
-  React23__namespace.default.useEffect(() => {
-    const target = element && element.current || element || (canUseDOM ? window : null);
+  React24__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 };
     const listener = (e) => saved.current(e);
@@ -10708,12 +11119,12 @@ function useEventListener(eventName, handler, element, options) {
   }, [eventName, element, capture, passive, once]);
 }
 function useClickOutside(ref, handler, events = ["mousedown", "touchstart"]) {
-  const saved = React23__namespace.default.useRef(handler);
+  const saved = React24__namespace.default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
-  React23__namespace.default.useEffect(() => {
-    if (!canUseDOM) return void 0;
+  React24__namespace.default.useEffect(() => {
+    if (!canUseDOM2) return void 0;
     const listener = (e) => {
       const el = ref && ref.current;
       if (!el || el.contains(e.target)) return;
@@ -10739,7 +11150,7 @@ function useKeyPress(key, handler, options = {}) {
 }
 function useLocalStorage(key, initialValue) {
   const read = () => {
-    if (!canUseDOM) return initialValue;
+    if (!canUseDOM2) return initialValue;
     try {
       const item = window.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -10747,13 +11158,13 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   };
-  const [stored, setStored] = React23__namespace.default.useState(read);
-  const setValue = React23__namespace.default.useCallback(
+  const [stored, setStored] = React24__namespace.default.useState(read);
+  const setValue = React24__namespace.default.useCallback(
     (value) => {
       setStored((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
         try {
-          if (canUseDOM) window.localStorage.setItem(key, JSON.stringify(next));
+          if (canUseDOM2) window.localStorage.setItem(key, JSON.stringify(next));
         } catch (e) {
         }
         return next;
@@ -10764,9 +11175,9 @@ function useLocalStorage(key, initialValue) {
   return [stored, setValue];
 }
 function useCopyToClipboard(timeout = 1500) {
-  const [copied, setCopied] = React23__namespace.default.useState(false);
-  const copy = React23__namespace.default.useCallback(async (text) => {
-    if (!canUseDOM || !navigator.clipboard) {
+  const [copied, setCopied] = React24__namespace.default.useState(false);
+  const copy = React24__namespace.default.useCallback(async (text) => {
+    if (!canUseDOM2 || !navigator.clipboard) {
       setCopied(false);
       return false;
     }
@@ -10779,7 +11190,7 @@ function useCopyToClipboard(timeout = 1500) {
       return false;
     }
   }, []);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (!copied) return void 0;
     const t = setTimeout(() => setCopied(false), timeout);
     return () => clearTimeout(t);
@@ -10787,23 +11198,23 @@ function useCopyToClipboard(timeout = 1500) {
   return { copied, copy };
 }
 function useDebouncedValue(value, delay = 200) {
-  const [debounced, setDebounced] = React23__namespace.default.useState(value);
-  React23__namespace.default.useEffect(() => {
+  const [debounced, setDebounced] = React24__namespace.default.useState(value);
+  React24__namespace.default.useEffect(() => {
     const t = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(t);
   }, [value, delay]);
   return debounced;
 }
 function useDebouncedCallback(callback, delay = 200) {
-  const saved = React23__namespace.default.useRef(callback);
-  const timer = React23__namespace.default.useRef(null);
+  const saved = React24__namespace.default.useRef(callback);
+  const timer = React24__namespace.default.useRef(null);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React23__namespace.default.useEffect(() => () => {
+  React24__namespace.default.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  return React23__namespace.default.useCallback(
+  return React24__namespace.default.useCallback(
     (...args) => {
       if (timer.current) clearTimeout(timer.current);
       timer.current = setTimeout(() => saved.current(...args), delay);
@@ -10812,34 +11223,34 @@ function useDebouncedCallback(callback, delay = 200) {
   );
 }
 function useInterval(callback, delay) {
-  const saved = React23__namespace.default.useRef(callback);
+  const saved = React24__namespace.default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React23__namespace.default.useEffect(() => {
+  React24__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 = React23__namespace.default.useRef(callback);
+  const saved = React24__namespace.default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React23__namespace.default.useEffect(() => {
+  React24__namespace.default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setTimeout(() => saved.current(), delay);
     return () => clearTimeout(id);
   }, [delay]);
 }
 function useWindowSize() {
-  const [size, setSize] = React23__namespace.default.useState(() => ({
-    width: canUseDOM ? window.innerWidth : 0,
-    height: canUseDOM ? window.innerHeight : 0
+  const [size, setSize] = React24__namespace.default.useState(() => ({
+    width: canUseDOM2 ? window.innerWidth : 0,
+    height: canUseDOM2 ? window.innerHeight : 0
   }));
-  React23__namespace.default.useEffect(() => {
-    if (!canUseDOM) return void 0;
+  React24__namespace.default.useEffect(() => {
+    if (!canUseDOM2) return void 0;
     const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
     onResize();
     window.addEventListener("resize", onResize);
@@ -10848,8 +11259,8 @@ function useWindowSize() {
   return size;
 }
 function useHover(ref) {
-  const [hovered, setHovered] = React23__namespace.default.useState(false);
-  React23__namespace.default.useEffect(() => {
+  const [hovered, setHovered] = React24__namespace.default.useState(false);
+  React24__namespace.default.useEffect(() => {
     const el = ref && ref.current;
     if (!el) return void 0;
     const on = () => setHovered(true);
@@ -10865,10 +11276,10 @@ function useHover(ref) {
 }
 function useIntersectionObserver(ref, options = {}) {
   const { root = null, rootMargin = "0px", threshold = 0 } = options;
-  const [entry, setEntry] = React23__namespace.default.useState(null);
-  React23__namespace.default.useEffect(() => {
+  const [entry, setEntry] = React24__namespace.default.useState(null);
+  React24__namespace.default.useEffect(() => {
     const el = ref && ref.current;
-    if (!canUseDOM || !el || typeof IntersectionObserver === "undefined") return void 0;
+    if (!canUseDOM2 || !el || typeof IntersectionObserver === "undefined") return void 0;
     const obs = new IntersectionObserver(([e]) => setEntry(e), { root, rootMargin, threshold });
     obs.observe(el);
     return () => obs.disconnect();
@@ -10879,7 +11290,7 @@ var __scrollLockCount = 0;
 var __scrollLockSaved = "";
 function useScrollLock(locked = true) {
   useIsomorphicLayoutEffect(() => {
-    if (!canUseDOM || !locked) return void 0;
+    if (!canUseDOM2 || !locked) return void 0;
     if (__scrollLockCount === 0) {
       __scrollLockSaved = document.body.style.overflow;
       document.body.style.overflow = "hidden";
@@ -10894,9 +11305,11 @@ function useScrollLock(locked = true) {
   }, [locked]);
 }
 function useId(prefix = "twc") {
-  const raw = React23__namespace.default.useId();
+  const raw = React24__namespace.default.useId();
   return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
 }
+var useFocusTrap2 = useFocusTrap;
+var usePortal2 = usePortal;
 
 exports.Accordion = Accordion;
 exports.Alert = Alert;
@@ -10970,6 +11383,7 @@ exports.useDebouncedCallback = useDebouncedCallback;
 exports.useDebouncedValue = useDebouncedValue;
 exports.useDisclosure = useDisclosure;
 exports.useEventListener = useEventListener;
+exports.useFocusTrap = useFocusTrap2;
 exports.useHover = useHover;
 exports.useId = useId;
 exports.useIntersectionObserver = useIntersectionObserver;
@@ -10979,6 +11393,7 @@ exports.useKeyPress = useKeyPress;
 exports.useLocalStorage = useLocalStorage;
 exports.useMediaQuery = useMediaQuery;
 exports.useMounted = useMounted;
+exports.usePortal = usePortal2;
 exports.usePrefersReducedMotion = usePrefersReducedMotion;
 exports.usePrevious = usePrevious;
 exports.useScrollLock = useScrollLock;