twico-ui 1.29.0 → 1.30.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.30.0](https://github.com/EncryptionL/twico-ui/compare/v1.29.0...v1.30.0) (2026-08-04)
+
+
+### Features
+
+* **inputs,datatable:** clearable inputs, richer select options, and datatable input clears ([e5eadbc](https://github.com/EncryptionL/twico-ui/commit/e5eadbce72db3ed96487bc7097d49c7c7caa6dfb)), closes [#328](https://github.com/EncryptionL/twico-ui/issues/328) [#326](https://github.com/EncryptionL/twico-ui/issues/326) [#327](https://github.com/EncryptionL/twico-ui/issues/327) [#326](https://github.com/EncryptionL/twico-ui/issues/326) [#327](https://github.com/EncryptionL/twico-ui/issues/327) [#328](https://github.com/EncryptionL/twico-ui/issues/328)
+
 # [1.29.0](https://github.com/EncryptionL/twico-ui/compare/v1.28.0...v1.29.0) (2026-08-03)
 
 

package/dist/index.cjs

@@ -5671,6 +5671,10 @@ var COMBO_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #326: optional leading icon/swatch + trailing (right-aligned) hint on an option. */
+.twc-opt__icon { flex: none; display: inline-flex; align-items: center; color: var(--color-text-muted); }
+.twc-opt__icon svg { width: 16px; height: 16px; }
+.twc-opt__hint { flex: none; margin-inline-start: auto; padding-inline-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
 /* #300: wrapOptions \u2014 let long labels/descriptions wrap onto multiple lines instead of truncating.
    overflow-wrap: anywhere also breaks a single very long token so it can't overflow the popover edge. */
 .twc-opt[data-wrap="true"] { align-items: flex-start; }
@@ -5738,6 +5742,7 @@ function Combobox({
   virtualized: virtualizedProp = false,
   overscan = 8,
   wrapOptions = false,
+  renderOption,
   id,
   className = "",
   onFocus,
@@ -5745,8 +5750,8 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
-  if (virtualizedProp && wrapOptions) warnOnce("combobox-wrap-virtualized", "twico-ui Combobox: `wrapOptions` disables `virtualized` \u2014 wrapped option rows aren't a fixed height.");
-  const virtualized = virtualizedProp && !wrapOptions;
+  if (virtualizedProp && (wrapOptions || renderOption)) warnOnce("combobox-var-height-virtualized", "twico-ui Combobox: `wrapOptions`/`renderOption` disable `virtualized` \u2014 those rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !wrapOptions && !renderOption;
   const groups = React51__namespace.default.useMemo(() => normalizeGroups(options), [options]);
   const flat = React51__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
   const autoId = React51__namespace.default.useId();
@@ -5917,7 +5922,7 @@ function Combobox({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  const renderOption = (o, idx) => {
+  const renderRow = (o, idx) => {
     const isSel = o.value === current;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -5940,9 +5945,13 @@ function Combobox({
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => commit(o.value),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          renderOption ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__main", children: renderOption(o, { selected: isSel, active: idx === active }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            o.icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__icon", "aria-hidden": "true", children: o.icon }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+              o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+            ] }),
+            o.hint != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__hint", children: o.hint }) : null
           ] }),
           isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
         ]
@@ -5964,14 +5973,14 @@ function Combobox({
     "Loading\u2026"
   ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
-    vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderOption(r2.o, r2.idx)),
+    vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderRow(r2.o, r2.idx)),
     vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
   ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React51__namespace.default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
       const idx = counter;
-      return renderOption(o, idx);
+      return renderRow(o, idx);
     })
   ] }, gi)) });
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
@@ -6508,6 +6517,10 @@ var SELECT_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #326: optional leading icon/swatch + trailing (right-aligned) hint on an option. */
+.twc-opt__icon { flex: none; display: inline-flex; align-items: center; color: var(--color-text-muted); }
+.twc-opt__icon svg { width: 16px; height: 16px; }
+.twc-opt__hint { flex: none; margin-inline-start: auto; padding-inline-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
 .twc-opt__check { flex: none; color: var(--color-primary); display: inline-flex; }
 .twc-opt__check svg { width: 16px; height: 16px; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
@@ -6568,8 +6581,9 @@ function Select({
   loading = false,
   emptyText = "No results found",
   name,
-  virtualized = false,
+  virtualized: virtualizedProp = false,
   overscan = 8,
+  renderOption,
   id,
   className = "",
   onClick,
@@ -6577,6 +6591,8 @@ function Select({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
+  if (virtualizedProp && renderOption) warnOnce("select-renderoption-virtualized", "twico-ui Select: `renderOption` disables `virtualized` \u2014 custom rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !renderOption;
   const bufferRef = React51__namespace.default.useRef("");
   const bufferTimerRef = React51__namespace.default.useRef(null);
   const groups = React51__namespace.default.useMemo(() => normalizeGroups2(options), [options]);
@@ -6782,7 +6798,7 @@ function Select({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  const renderOption = (o, idx) => {
+  const renderRow = (o, idx) => {
     const isSel = o.value === current;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -6804,9 +6820,13 @@ function Select({
         },
         onClick: () => commit(o.value),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          renderOption ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__main", children: renderOption(o, { selected: isSel, active: idx === active }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            o.icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__icon", "aria-hidden": "true", children: o.icon }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+              o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+            ] }),
+            o.hint != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__hint", children: o.hint }) : null
           ] }),
           isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
         ]
@@ -6854,14 +6874,14 @@ function Select({
       "Loading\u2026"
     ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
-      vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderOption(r2.o, r2.idx)),
+      vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderRow(r2.o, r2.idx)),
       vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
     ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React51__namespace.default.Fragment, { children: [
       g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
       g.options.map((o) => {
         counter += 1;
         const idx = counter;
-        return renderOption(o, idx);
+        return renderRow(o, idx);
       })
     ] }, gi)) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sel__sr", role: "status", "aria-live": "polite", children: loading ? "Loading\u2026" : visible.length === 0 ? emptyText : `${visible.length} result${visible.length === 1 ? "" : "s"}` })
@@ -7165,6 +7185,11 @@ var INPUT_EXTRA_CSS = `
 .twc-input__reveal:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-input__reveal:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-input__reveal svg { width: 17px; height: 17px; }
+/* #328: trailing clear (X) button \u2014 mirrors the reveal toggle; sits alongside rightIcon / the password eye. */
+.twc-input__clear { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm); flex: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.twc-input__clear:hover { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-input__clear:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-input__clear svg { width: 15px; height: 15px; }
 .twc-input__addon { align-self: stretch; display: inline-flex; align-items: center; padding-inline: var(--space-3);
   background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-sm);
   font-weight: var(--font-semibold); white-space: nowrap; flex: none; }
@@ -7186,6 +7211,7 @@ function Input({
   leftAddon,
   rightAddon,
   showCount = false,
+  clearable = false,
   type = "text",
   disabled = false,
   id,
@@ -7207,8 +7233,25 @@ function Input({
   const near = showCounter && count >= Math.floor(max * 0.9);
   const handleChange = (e) => {
     rest.onChange?.(e);
-    if (showCount && !countControlled) setLen(e.target.value.length);
+    if ((showCount || clearable) && !countControlled) setLen(e.target.value.length);
   };
+  const inputRef = React51__namespace.default.useRef(null);
+  const userRef = rest.ref;
+  const setRef = React51__namespace.default.useCallback((node) => {
+    inputRef.current = node;
+    if (typeof userRef === "function") userRef(node);
+    else if (userRef && typeof userRef === "object") userRef.current = node;
+  }, [userRef]);
+  const clearField = () => {
+    const el = inputRef.current;
+    if (!el) return;
+    const setter = typeof HTMLInputElement !== "undefined" && Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+    if (setter) setter.call(el, "");
+    else el.value = "";
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.focus();
+  };
+  const showClear = clearable && count > 0 && !disabled && !rest.readOnly;
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
   const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const isPassword = type === "password";
@@ -7255,11 +7298,16 @@ function Input({
           required: required || void 0,
           "aria-required": required || void 0,
           ...rest,
+          ref: setRef,
           onChange: handleChange,
           "aria-invalid": ariaInvalid,
           "aria-describedby": describedBy
         }
       ),
+      showClear ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-input__clear", "aria-label": "Clear", tabIndex: 0, onMouseDown: (e) => e.preventDefault(), onClick: clearField, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+      ] }) }) : null,
       suffix,
       rightAddon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-input__addon twc-input__addon--end", children: rightAddon }) : null
     ] }),
@@ -7347,6 +7395,10 @@ var MULTI_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #326: optional leading icon/swatch + trailing (right-aligned) hint on an option. */
+.twc-opt__icon { flex: none; display: inline-flex; align-items: center; color: var(--color-text-muted); }
+.twc-opt__icon svg { width: 16px; height: 16px; }
+.twc-opt__hint { flex: none; margin-inline-start: auto; padding-inline-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
 .twc-opt[data-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
 .twc-pop__loading { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 12px; font-size: var(--text-sm); color: var(--color-text-muted); }
@@ -7408,8 +7460,9 @@ function MultiSelect({
   maxTagCount,
   filter,
   onInputChange,
-  virtualized = false,
+  virtualized: virtualizedProp = false,
   overscan = 8,
+  renderOption,
   id,
   className = "",
   onFocus,
@@ -7417,6 +7470,8 @@ function MultiSelect({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
+  if (virtualizedProp && renderOption) warnOnce("multiselect-renderoption-virtualized", "twico-ui MultiSelect: `renderOption` disables `virtualized` \u2014 custom rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !renderOption;
   const groups = React51__namespace.default.useMemo(() => normalizeGroups3(options), [options]);
   const flat = React51__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
   const autoId = React51__namespace.default.useId();
@@ -7576,7 +7631,7 @@ function MultiSelect({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  const renderOption = (o, idx) => {
+  const renderRow = (o, idx) => {
     const isSel = selected.includes(o.value);
     const optDisabled = isOptDisabled(o);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7600,9 +7655,13 @@ function MultiSelect({
         onClick: () => toggle(o.value),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__box", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          renderOption ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__main", children: renderOption(o, { selected: isSel, active: idx === active }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            o.icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__icon", "aria-hidden": "true", children: o.icon }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+              o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+            ] }),
+            o.hint != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__hint", children: o.hint }) : null
           ] })
         ]
       },
@@ -7632,14 +7691,14 @@ function MultiSelect({
         "Loading\u2026"
       ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
-        vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderOption(r2.o, r2.idx)),
+        vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderRow(r2.o, r2.idx)),
         vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
       ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React51__namespace.default.Fragment, { children: [
         g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
         g.options.map((o) => {
           counter += 1;
           const idx = counter;
-          return renderOption(o, idx);
+          return renderRow(o, idx);
         })
       ] }, gi))
     }
@@ -8223,6 +8282,11 @@ var DT_CSS = `
   font-size: var(--text-sm); color: var(--color-text); width: 150px; }
 .twc-dt__search input:focus, .twc-dt__search input:focus-visible { outline: none; box-shadow: none; }
 .twc-dt__search input::placeholder { color: var(--color-text-subtle); }
+/* #327: trailing clear (X) for the built-in search inputs (quick-search + column-menu search). */
+.twc-dt__search-clear { border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: var(--radius-sm); flex: none; }
+.twc-dt__search-clear:hover { color: var(--color-text); background: var(--color-surface-sunken); }
+.twc-dt__search-clear:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-dt__search-clear svg { width: 14px; height: 14px; }
 .twc-dt__tlabel { display: inline; }
 /* Narrow grid: collapse the toolbar to icon-only buttons (labels survive as
    hover tooltips via data-tip) and let the search flex so nothing wraps. */
@@ -9591,6 +9655,8 @@ function Datatable({
   const colMenuRef = React51__namespace.default.useRef(null);
   const rowMenuRef = React51__namespace.default.useRef(null);
   const exportMenuRef = React51__namespace.default.useRef(null);
+  const quickSearchRef = React51__namespace.default.useRef(null);
+  const colSearchRef = React51__namespace.default.useRef(null);
   function focusFirstItem(container) {
     if (!container) return;
     const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -11605,7 +11671,11 @@ function Datatable({
       ] }) : null,
       searchable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__search", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.search }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) })
+        /* @__PURE__ */ jsxRuntime.jsx("input", { ref: quickSearchRef, placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) }),
+        quick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__search-clear", "aria-label": "Clear search", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+          commitQuick("");
+          quickSearchRef.current?.focus();
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) }) : null
       ] }) : null
     ] }),
     !pivotActive && activeGroupBy.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__groupbar", children: [
@@ -12198,7 +12268,11 @@ function Datatable({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__col-search", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.search }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { autoFocus: true, placeholder: "Find column\u2026", "aria-label": "Find column", value: colQuery, onChange: (e) => setColQuery(e.target.value) })
+        /* @__PURE__ */ jsxRuntime.jsx("input", { ref: colSearchRef, autoFocus: true, placeholder: "Find column\u2026", "aria-label": "Find column", value: colQuery, onChange: (e) => setColQuery(e.target.value) }),
+        colQuery ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__search-clear", "aria-label": "Clear column search", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+          setColQuery("");
+          colSearchRef.current?.focus();
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) }) : null
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__col-list", children: [
         rowNumMatch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__col-row", onClick: () => setShowRowNum((v) => !v), children: [
@@ -12568,6 +12642,7 @@ function Datatable({
                   Input,
                   {
                     size: "sm",
+                    clearable: true,
                     type: filterTypeOf(col) === "number" ? "number" : "text",
                     placeholder: "Value",
                     value: f.value,
@@ -17656,6 +17731,12 @@ var TEXTAREA_CSS = `
 .twc-textarea__el:disabled { background: var(--color-surface-sunken); opacity: 0.7; cursor: not-allowed; }
 .twc-textarea__el[data-readonly] { background: var(--color-surface-sunken); }
 .twc-textarea__el[data-autosize="true"] { resize: none; overflow: hidden; }
+/* #328: clearable (X). Wrap positions the button top-inline-end so it dodges the bottom-right resize handle. */
+.twc-textarea__wrap { position: relative; display: block; }
+.twc-textarea__clear { position: absolute; top: 6px; inset-inline-end: 8px; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; background: var(--color-surface); color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.twc-textarea__clear:hover { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-textarea__clear:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-textarea__clear svg { width: 15px; height: 15px; }
 .twc-field__footer { display: flex; align-items: center; gap: var(--space-2); }
 .twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
 .twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
@@ -17672,6 +17753,7 @@ var Textarea = React51__namespace.default.forwardRef(function Textarea2({
   minRows,
   maxRows,
   showCount = false,
+  clearable = false,
   disabled = false,
   id,
   className = "",
@@ -17718,8 +17800,18 @@ var Textarea = React51__namespace.default.forwardRef(function Textarea2({
   };
   const handleChange = (e) => {
     rest.onChange?.(e);
-    if (showCount && !countControlled) setLen(e.target.value.length);
+    if ((showCount || clearable) && !countControlled) setLen(e.target.value.length);
+  };
+  const clearField = () => {
+    const el = innerRef.current;
+    if (!el) return;
+    const setter = typeof HTMLTextAreaElement !== "undefined" && Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+    if (setter) setter.call(el, "");
+    else el.value = "";
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.focus();
   };
+  const showClear = clearable && count > 0 && !disabled && !rest.readOnly;
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
   const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, children: [
@@ -17728,27 +17820,33 @@ var Textarea = React51__namespace.default.forwardRef(function Textarea2({
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        ref: setRef,
-        id: fieldId,
-        className: "twc-textarea__el",
-        "data-size": size,
-        "data-tone": tone,
-        "data-autosize": autosize || void 0,
-        "data-readonly": rest.readOnly || void 0,
-        rows: autosize ? minRows ?? rows : rows,
-        disabled,
-        required: required || void 0,
-        "aria-required": required || void 0,
-        ...rest,
-        onInput: handleInput,
-        onChange: handleChange,
-        "aria-invalid": ariaInvalid,
-        "aria-describedby": describedBy
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-textarea__wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref: setRef,
+          id: fieldId,
+          className: "twc-textarea__el",
+          "data-size": size,
+          "data-tone": tone,
+          "data-autosize": autosize || void 0,
+          "data-readonly": rest.readOnly || void 0,
+          rows: autosize ? minRows ?? rows : rows,
+          disabled,
+          required: required || void 0,
+          "aria-required": required || void 0,
+          ...rest,
+          onInput: handleInput,
+          onChange: handleChange,
+          "aria-invalid": ariaInvalid,
+          "aria-describedby": describedBy
+        }
+      ),
+      showClear ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-textarea__clear", "aria-label": "Clear", tabIndex: 0, onMouseDown: (e) => e.preventDefault(), onClick: clearField, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+      ] }) }) : null
+    ] }),
     error || hint || showCounter ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-field__footer", children: [
       error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null,
       showCounter ? /* @__PURE__ */ jsxRuntime.jsxs("span", { id: countId, className: "twc-field__count", "data-danger": near || void 0, "aria-live": "polite", children: [