@axzydev/axzy_ui_system 1.7.3 → 1.8.0

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -47,7 +47,8 @@
     "audit:sandbox": "node scripts/audit-sandbox.mjs",
     "docs:llm": "pnpm ext:catalog && node scripts/build-llm-docs.mjs && node scripts/build-ai-bundle.mjs",
     "docs:ai": "node scripts/build-ai-bundle.mjs",
-    "docs:json-renderer": "node scripts/build-json-renderer-docs.mjs"
+    "docs:json-renderer": "node scripts/build-json-renderer-docs.mjs",
+    "schema:check": "node scripts/json-renderer/check.mjs"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -72,6 +73,7 @@
     "@types/react-dom": "19.0.3",
     "@types/vscode": "1.85.0",
     "@vitejs/plugin-react-swc": "3.8.0",
+    "ajv": "8.18.0",
     "esbuild": "^0.25.0",
     "eslint": "9.19.0",
     "eslint-plugin-react-hooks": "5.0.0",

package/src/App.tsx

@@ -70,7 +70,7 @@ import JsonRendererShowcase from "./showcases/JsonRendererShowcase";
 import JsonEditorShowcase from "./showcases/JsonEditorShowcase";
 import JsonScreenShowcase from "./showcases/JsonScreenShowcase";
 import DemoJsonPortfolio from "./showcases/DemoJsonPortfolio";
-import DemoJsonDashboard, { DEMO_APP_PAGES, type DemoAppPage } from "./showcases/DemoJsonDashboard";
+import DemoJsonDashboard from "./showcases/DemoJsonDashboard";
 
 // Sandbox routing / landing (dev-only, never published)
 import {
@@ -377,18 +377,16 @@ function AppShell() {
         ) : route.view === "demo" ? (
           route.group === "app" ? (
             <DemoJsonDashboard
-              page={(DEMO_APP_PAGES.includes((route.item ?? "inicio") as DemoAppPage)
-                ? route.item
-                : "inicio") as DemoAppPage}
-              onNavigate={(pagina) => {
-                window.location.hash = `#demo/app/${pagina}`;
+              path={`/${route.item || "inicio"}`}
+              query={route.query}
+              onNavigate={(href) => {
+                window.location.hash = `#demo/app${href}`;
               }}
               onExit={() => {
                 window.location.hash = "#demo";
               }}
-              filterEstado={route.query.estado ?? "Todos"}
               onFilterChange={(estado) => {
-                const base = `#demo/app/${route.item ?? "inicio"}`;
+                const base = `#demo/app/${route.item || "inicio"}`;
                 window.location.hash = estado === "Todos" ? base : `${base}?estado=${encodeURIComponent(estado)}`;
               }}
             />

package/src/components/atoms/button/button.tsx

@@ -9,6 +9,7 @@ import { useState } from "react";
 import { theme } from "@/theme/theme";
 import { ITButtonProps } from "./button.props";
 import ITText from "@/components/atoms/text/text";
+import { useITAppearance } from "@/theme/theme-context";
 
 /**
  * Highly configurable action button supporting 8 visual variants, theme colors, 3 sizes, icons, and hover/focus states.
@@ -37,6 +38,8 @@ export default function ITButton({
 }: ITButtonProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
+  // Bento: pill buttons. The radius token is only defined when the provider has no explicit `radius`.
+  const bento = useITAppearance() === "bento";
 
   /** La variante `icon-only` siempre es un cuadrado con padding simétrico. */
   const isIconOnly = variant === "icon-only";
@@ -72,6 +75,10 @@ export default function ITButton({
       transition: themeConfig.transition || 'all 0.2s',
     };
 
+    if (bento) {
+      style.borderRadius = `var(--it-bento-pill-radius, ${themeConfig.borderRadius})`;
+    }
+
     if (variant === "rounded") {
       style.borderRadius = "9999px";
     }

package/src/components/atoms/flex/flex.props.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, ElementType } from "react";
+import { ReactNode, CSSProperties, ElementType, UIEvent } from "react";
 
 export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
 export type FlexAlign = "start" | "end" | "center" | "stretch" | "baseline";
@@ -32,4 +32,6 @@ export interface ITFlexProps {
   as?: ElementType;
   /** Click handler */
   onClick?: (e: React.MouseEvent) => void;
+  /** Scroll handler (useful for scrollable chat/log panels) */
+  onScroll?: (e: UIEvent<HTMLElement>) => void;
 }

package/src/components/atoms/flex/flex.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { forwardRef } from "react";
 import {
   ITFlexProps,
   FlexDirection,
@@ -52,7 +53,7 @@ const wrapMap: Record<FlexWrap, string> = {
  *   <main>Content</main>
  * </ITFlex>
  */
-export default function ITFlex({
+const ITFlex = forwardRef<HTMLDivElement, ITFlexProps>(function ITFlex({
   children,
   direction = "row",
   align,
@@ -66,7 +67,8 @@ export default function ITFlex({
   style,
   as: Component = "div",
   onClick,
-}: ITFlexProps) {
+  onScroll,
+}, ref) {
   const resolvedStyle: React.CSSProperties = {
     gap: gap > 0 ? `${gap * 0.25}rem` : undefined,
     flexGrow: typeof grow === "boolean" ? (grow ? 1 : 0) : grow,
@@ -77,6 +79,7 @@ export default function ITFlex({
 
   return (
     <Component
+      ref={ref}
       className={clsx(
         "flex",
         directionMap[direction],
@@ -87,8 +90,13 @@ export default function ITFlex({
       )}
       style={resolvedStyle}
       onClick={onClick}
+      onScroll={onScroll}
     >
       {children}
     </Component>
   );
-}
+});
+
+ITFlex.displayName = "ITFlex";
+
+export default ITFlex;

package/src/components/atoms/input/input.tsx

@@ -91,6 +91,11 @@ export default function ITInput({
   const getStyle = () => {
     const style = inputFieldStyle(inputTheme, size);
 
+    // Textarea is multi-line: in bento it keeps a soft radius instead of the single-line pill.
+    if (isTextArea) {
+      style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
+    }
+
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;

package/src/components/atoms/segmented-control/segmented-control.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { ITSegmentedControlProps } from "./segmented-control.props";
 import ITText from "@/components/atoms/text/text";
+import { useITAppearance } from "@/theme/theme-context";
 
 const sizeMap = {
   sm: { button: "px-2.5 py-1.5 text-[11px]", container: "p-0.5" },
@@ -31,16 +32,22 @@ export default function ITSegmentedControl({
   disabled = false,
 }: ITSegmentedControlProps) {
   const { button, container } = sizeMap[size];
+  // Bento: borderless pill track with an ink pill for the selected option.
+  const bento = useITAppearance() === "bento";
 
   return (
     <div
       role="group"
       className={clsx(
-        "inline-flex rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
+        "inline-flex",
+        bento
+          ? "rounded-full"
+          : "rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
         container,
         disabled && "opacity-50 cursor-not-allowed",
         className
       )}
+      style={bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)" } : undefined}
     >
       {options.map((opt) => {
         const isActive = opt.value === value;
@@ -53,12 +60,22 @@ export default function ITSegmentedControl({
             disabled={disabled}
             className={clsx(
               button,
-              "rounded-lg font-semibold transition-all flex items-center gap-1.5",
-              isActive
-                ? "bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600"
-                : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
+              "font-semibold transition-all flex items-center gap-1.5",
+              bento
+                ? "rounded-full border border-transparent"
+                : isActive
+                ? "rounded-lg bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600"
+                : "rounded-lg text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
               disabled && "pointer-events-none"
             )}
+            style={
+              bento
+                ? {
+                    backgroundColor: isActive ? "var(--it-bento-ink-bg, #0f172a)" : "transparent",
+                    color: isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)",
+                  }
+                : undefined
+            }
           >
             {opt.icon && <span>{opt.icon}</span>}
             <ITText as="span">{opt.label}</ITText>

package/src/components/atoms/textarea/textarea.props.ts

@@ -21,4 +21,8 @@ export interface ITTextareaProps {
   maxLength?: number;
   /** Resize behavior of the textarea: "none" | "vertical" | "horizontal" | "both". */
   resize?: "none" | "vertical" | "horizontal" | "both";
+  /** Keydown handler (e.g. Enter to send in a chat composer). */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  /** Autofocus the textarea. */
+  autoFocus?: boolean;
 }

package/src/components/atoms/textarea/textarea.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { forwardRef } from "react";
 import { ITTextareaProps } from "./textarea.props";
 import { inputLabel, inputError } from "@/utils/styles";
 import ITText from "@/components/atoms/text/text";
@@ -26,7 +27,7 @@ const resizeMap = {
  *   error={bio.length > 500 ? "Max 500 characters" : undefined}
  * />
  */
-export default function ITTextarea({
+const ITTextarea = forwardRef<HTMLTextAreaElement, ITTextareaProps>(function ITTextarea({
   value,
   onChange,
   label,
@@ -38,7 +39,9 @@ export default function ITTextarea({
   name,
   maxLength,
   resize = "vertical",
-}: ITTextareaProps) {
+  onKeyDown,
+  autoFocus = false,
+}, ref) {
   return (
     <div className={clsx("flex flex-col gap-1.5", className)}>
       {label && (
@@ -47,6 +50,7 @@ export default function ITTextarea({
         </ITText>
       )}
       <textarea
+        ref={ref}
         id={name}
         name={name}
         value={value}
@@ -55,6 +59,8 @@ export default function ITTextarea({
         rows={rows}
         disabled={disabled}
         maxLength={maxLength}
+        onKeyDown={onKeyDown}
+        autoFocus={autoFocus}
         className={clsx(
           "w-full border border-solid transition-all duration-200 rounded-lg px-3 py-2 text-sm outline-none",
           "focus:ring-2",
@@ -68,4 +74,8 @@ export default function ITTextarea({
       {error && <ITText as="span" className={inputError}>{error}</ITText>}
     </div>
   );
-}
+});
+
+ITTextarea.displayName = "ITTextarea";
+
+export default ITTextarea;

package/src/components/molecules/card/card.props.ts

@@ -1,8 +1,22 @@
+/** Pastel tint applied to a card through the `--color-<tone>-soft` token. */
+export type ITCardTone =
+  | "primary"
+  | "secondary"
+  | "ternary"
+  | "success"
+  | "info"
+  | "warning"
+  | "danger";
+
 export interface ITCardProps {
+  /** Pastel tile: tints the card background with the `--color-<tone>-soft` token of the palette, overriding the default white surface. In `soft`/`flat` appearances it also uses `--color-<tone>-soft-border` for the border; in `bento` the card stays borderless. Works in every appearance and in dark mode. Omit it for the regular surface. */
+  tone?: ITCardTone;
   /** Click handler. When provided, the card becomes interactive with hover shadow effect. */
   onClick?: () => void;
   /** Card title displayed in the header area. */
   title?: string;
+  /** Optional actions rendered at the right of the title row (e.g. a play button). */
+  headerActions?: React.ReactNode;
   /** Image source URL displayed at the top of the card. */
   image?: string;
   /** Alt text for the card image. @default "Card Image" */

package/src/components/molecules/card/card.tsx

@@ -2,11 +2,12 @@ import clsx from "clsx";
 import { ITCardProps } from "./card.props";
 import { useState } from "react";
 import ITText from "@/components/atoms/text/text";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 import { useITTranslation } from "@/i18n";
 
 /**
- * Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states.
+ * Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states
+ * and pastel `tone` tiles. Follows the provider `appearance` (`soft`, `flat`, `bento`).
  *
  * @example
  * <ITCard title="Welcome" image="/hero.jpg" actions={<ITButton label="Learn more" />}>
@@ -14,12 +15,17 @@ import { useITTranslation } from "@/i18n";
  * </ITCard>
  *
  * @example
+ * <ITCard tone="success" title="Revenue">+12.4%</ITCard>
+ *
+ * @example
  * <ITCard onClick={() => {}} className="max-w-sm">
  *   Clickable card with hover shadow.
  * </ITCard>
  */
 export default function ITCard({
   title,
+  tone,
+  headerActions,
   image,
   alt,
   children,
@@ -33,41 +39,66 @@ export default function ITCard({
 }: ITCardProps) {
   const { t } = useITTranslation();
   const [isHovered, setIsHovered] = useState(false);
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
   const resolvedAlt = alt ?? t("card.imageAlt");
 
   const containerStyle: React.CSSProperties = {
     backgroundColor: "var(--it-card-bg, #ffffff)",
-    borderColor: flat
-      ? "var(--it-card-flat-border, var(--color-secondary-200))"
-      : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
-    borderWidth: "1px",
+    borderColor: bento
+      ? "transparent"
+      : flat
+        ? "var(--it-card-flat-border, var(--color-secondary-200))"
+        : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
+    borderWidth: bento ? "0px" : "1px",
     borderStyle: "solid",
-    borderRadius: flat
-      ? "var(--it-card-radius, var(--radius-lg))"
-      : "var(--it-card-radius, var(--radius-2xl))",
+    borderRadius: bento
+      ? "var(--it-card-radius, var(--it-bento-card-radius, var(--radius-2xl)))"
+      : flat
+        ? "var(--it-card-radius, var(--radius-lg))"
+        : "var(--it-card-radius, var(--radius-2xl))",
     // Soft depth: every card floats a little at rest; interactive cards
     // gain visual weight on hover instead of appearing flat until clicked.
     // Flat appearance: the hairline border carries the surface, so a card
     // only gets a shadow as hover feedback when it is clickable.
-    boxShadow: flat
+    // Bento: borderless, a diffuse shadow at rest and a stronger one on hover.
+    boxShadow: bento
       ? onClick && isHovered
-        ? "var(--shadow-sm)"
-        : "none"
-      : onClick
-        ? isHovered
-          ? "var(--shadow-lg)"
-          : "var(--shadow-sm)"
-        : "var(--shadow-sm)",
+        ? "var(--it-bento-card-shadow-hover, var(--shadow-lg))"
+        : "var(--it-bento-card-shadow, var(--shadow-sm))"
+      : flat
+        ? onClick && isHovered
+          ? "var(--shadow-sm)"
+          : "none"
+        : onClick
+          ? isHovered
+            ? "var(--shadow-lg)"
+            : "var(--shadow-sm)"
+          : "var(--shadow-sm)",
     transition: onClick ? "box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out" : "none",
-    transform: onClick && isHovered && !flat ? "translateY(-2px)" : "translateY(0)",
+    transform: onClick && isHovered && !flat && !bento ? "translateY(-2px)" : "translateY(0)",
     cursor: onClick ? "pointer" : "default",
   };
 
+  // Pastel tile: the soft token is translucent, so it is layered over the
+  // regular surface (opaque tile, correct in light and dark).
+  if (tone) {
+    const soft = `var(--color-${tone}-soft)`;
+    containerStyle.backgroundImage = `linear-gradient(${soft}, ${soft})`;
+    if (!bento) containerStyle.borderColor = `var(--color-${tone}-soft-border)`;
+  }
+
   const bodyStyle: React.CSSProperties = {
-    padding: "1.25rem",
+    padding: bento ? "var(--it-bento-card-padding, 1.5rem)" : "1.25rem",
   };
 
+  const titleTypography = bento
+    ? "text-lg font-bold"
+    : flat
+      ? "text-base font-semibold"
+      : "text-xl font-semibold";
+
   return (
     <div
       onClick={onClick}
@@ -97,14 +128,26 @@ export default function ITCard({
       )}
 
       <div className={clsx(contentClassName)} style={bodyStyle}>
-        {title && (
+        {headerActions ? (
+          <div className="mb-2 flex items-center justify-between gap-3">
+            {title && (
+              <ITText
+                as="h3"
+                className={clsx(titleTypography, titleClassName)}
+              >
+                {title}
+              </ITText>
+            )}
+            {headerActions}
+          </div>
+        ) : title ? (
           <ITText
             as="h3"
-            className={clsx(flat ? "text-base font-semibold mb-3" : "text-xl font-semibold mb-2", titleClassName)}
+            className={clsx(titleTypography, flat ? "mb-3" : bento ? "mb-4" : "mb-2", titleClassName)}
           >
             {title}
           </ITText>
-        )}
+        ) : null}
         <ITText as="div" className="text-secondary-600">{children}</ITText>
       </div>
       {actions && (

package/src/components/molecules/chip-input/chip-input.tsx

@@ -70,6 +70,8 @@ export default function ITChipInput({
     style.alignItems = "center";
     style.gap = "0.375rem";
     style.minHeight = "2.5rem";
+    // Multi-line control: bento rounds it with a softer radius than the single-line pill.
+    style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
 
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;

package/src/components/molecules/line-bar-chart/line-bar-chart.props.ts

@@ -19,6 +19,10 @@ export interface ITLineBarChartProps {
   lineColor?: string;
   /** Color de las barras. */
   barColor?: string;
+  /** Muestra la serie de línea. @default true */
+  showLine?: boolean;
+  /** Muestra la serie de barras. @default true */
+  showBars?: boolean;
   height?: number;
   /** Formatea los valores del tooltip; por defecto número con separadores. */
   formatValue?: (value: number) => string;

package/src/components/molecules/line-bar-chart/line-bar-chart.tsx

@@ -16,6 +16,8 @@ export function ITLineBarChart({
   barLabel,
   lineColor = "#10b981",
   barColor = "#3b82f6",
+  showLine = true,
+  showBars = true,
   height = 240,
   formatValue,
   formatAxis,
@@ -40,8 +42,12 @@ export function ITLineBarChart({
   const plotHeight = height - padding.top - padding.bottom;
 
   const max = useMemo(
-    () => Math.max(...data.flatMap((d) => [d.line, d.bar]), 1),
-    [data]
+    () =>
+      Math.max(
+        ...data.flatMap((d) => [showLine ? d.line : 0, showBars ? d.bar : 0]),
+        1
+      ),
+    [data, showLine, showBars]
   );
   const gridValues = [0, 0.25, 0.5, 0.75, 1].map((f) => max * f);
   const step = data.length > 0 ? plotWidth / data.length : plotWidth;
@@ -103,21 +109,22 @@ export function ITLineBarChart({
           </g>
         ))}
 
-        {data.map((d, i) => (
-          <rect
-            key={`bar-${d.label}`}
-            x={x(i) - barWidth / 2}
-            y={y(d.bar)}
-            width={barWidth}
-            height={Math.max(padding.top + plotHeight - y(d.bar), 1)}
-            rx={3}
-            fill={barColor}
-            opacity={hover === null || hover === i ? 0.85 : 0.35}
-          />
-        ))}
+        {showBars &&
+          data.map((d, i) => (
+            <rect
+              key={`bar-${d.label}`}
+              x={x(i) - barWidth / 2}
+              y={y(d.bar)}
+              width={barWidth}
+              height={Math.max(padding.top + plotHeight - y(d.bar), 1)}
+              rx={3}
+              fill={barColor}
+              opacity={hover === null || hover === i ? 0.85 : 0.35}
+            />
+          ))}
 
-        {areaPath && <path d={areaPath} fill={`url(#area-${gradientId})`} />}
-        {data.length > 0 && (
+        {showLine && areaPath && <path d={areaPath} fill={`url(#area-${gradientId})`} />}
+        {showLine && data.length > 0 && (
           <polyline
             points={linePoints}
             fill="none"
@@ -127,17 +134,18 @@ export function ITLineBarChart({
             strokeLinejoin="round"
           />
         )}
-        {data.map((d, i) => (
-          <circle
-            key={`dot-${d.label}`}
-            cx={x(i)}
-            cy={y(d.line)}
-            r={hover === i ? 4.5 : 3}
-            fill="#ffffff"
-            stroke={lineColor}
-            strokeWidth={2}
-          />
-        ))}
+        {showLine &&
+          data.map((d, i) => (
+            <circle
+              key={`dot-${d.label}`}
+              cx={x(i)}
+              cy={y(d.line)}
+              r={hover === i ? 4.5 : 3}
+              fill="#ffffff"
+              stroke={lineColor}
+              strokeWidth={2}
+            />
+          ))}
 
         {data.map((d, i) => (
           <g key={`hit-${d.label}`} onMouseEnter={() => setHover(i)}>
@@ -157,24 +165,32 @@ export function ITLineBarChart({
           role="status"
         >
           <p className="text-[10px] font-semibold" style={{ color: "#e2e8f0" }}>{active.label}</p>
-          <p className="text-[11px] tabular-nums" style={{ color: lineColor }}>
-            {resolvedLineLabel}: {resolvedFormatValue(active.line)}
-          </p>
-          <p className="text-[11px] tabular-nums" style={{ color: "#93c5fd" }}>
-            {resolvedBarLabel}: {resolvedFormatValue(active.bar)}
-          </p>
+          {showLine && (
+            <p className="text-[11px] tabular-nums" style={{ color: lineColor }}>
+              {resolvedLineLabel}: {resolvedFormatValue(active.line)}
+            </p>
+          )}
+          {showBars && (
+            <p className="text-[11px] tabular-nums" style={{ color: "#93c5fd" }}>
+              {resolvedBarLabel}: {resolvedFormatValue(active.bar)}
+            </p>
+          )}
         </div>
       )}
 
       <ul className="flex flex-wrap items-center gap-4 text-[11px]" style={{ color: "#475569" }}>
-        <li>
-          <span className="h-2.5 w-2.5 rounded-sm" style={{ background: lineColor }} aria-hidden />
-          {resolvedLineLabel}
-        </li>
-        <li>
-          <span className="h-2.5 w-2.5 rounded-sm" style={{ background: barColor }} aria-hidden />
-          {resolvedBarLabel}
-        </li>
+        {showLine && (
+          <li>
+            <span className="h-2.5 w-2.5 rounded-sm" style={{ background: lineColor }} aria-hidden />
+            {resolvedLineLabel}
+          </li>
+        )}
+        {showBars && (
+          <li>
+            <span className="h-2.5 w-2.5 rounded-sm" style={{ background: barColor }} aria-hidden />
+            {resolvedBarLabel}
+          </li>
+        )}
       </ul>
     </div>
   );

package/src/components/molecules/multi-select/multi-select.tsx

@@ -127,6 +127,8 @@ export default function ITMultiSelect({
     style.alignItems = "center";
     style.gap = "0.375rem";
     style.minHeight = "2.5rem";
+    // Multi-line control: bento rounds it with a softer radius than the single-line pill.
+    style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
 
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;