@axzydev/axzy_ui_system 1.7.4 → 1.8.1

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.7.4",
+  "version": "1.8.1",
   "type": "module",
   "sideEffects": [
     "*.css"

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/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/molecules/card/card.props.ts

@@ -1,4 +1,16 @@
+/** 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. */

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,16 @@ 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,
@@ -34,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}
@@ -103,7 +133,7 @@ export default function ITCard({
             {title && (
               <ITText
                 as="h3"
-                className={clsx(flat ? "text-base font-semibold" : "text-xl font-semibold", titleClassName)}
+                className={clsx(titleTypography, titleClassName)}
               >
                 {title}
               </ITText>
@@ -113,7 +143,7 @@ export default function ITCard({
         ) : 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>

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/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;

package/src/components/molecules/tabs/tabs.tsx

@@ -2,10 +2,12 @@ import React, { useState } from 'react';
 import { ITTabsProps } from './tabs.props';
 import { clsx } from 'clsx';
 import ITText from "@/components/atoms/text/text";
+import { useITAppearance } from "@/theme/theme-context";
 
 /**
  * Tabbed navigation component with "line" and "pill" visual variants.
  * Manages its own active state internally via a defaultActiveId.
+ * With `appearance="bento"` the "pill" variant becomes a rounded track with an ink active pill.
  *
  * @example
  * <ITTabs
@@ -25,6 +27,7 @@ const ITTabs: React.FC<ITTabsProps> = ({
   className = '',
   containerClassName = ''
 }) => {
+  const bento = useITAppearance() === "bento" && variant === 'pill';
   const [activeId, setActiveId] = useState(defaultActiveId || items[0]?.id);
 
   const handleTabClick = (id: string, disabled?: boolean) => {
@@ -40,9 +43,10 @@ const ITTabs: React.FC<ITTabsProps> = ({
       {/* HEADER */}
       <div className={clsx(
         "flex border-secondary-200 mb-4",
-        variant === 'line' ? "border-b" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
+        variant === 'line' ? "border-b" : bento ? "gap-2 p-1 rounded-full w-fit" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
         className
-      )}>
+      )}
+      style={bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", borderColor: "transparent" } : undefined}>
         {items.map((item) => {
           const isActive = item.id === activeId;
           
@@ -61,14 +65,24 @@ const ITTabs: React.FC<ITTabsProps> = ({
                     : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300",
                 ],
                 // PILL VARIANT
-                variant === 'pill' && [
-                  "rounded-md",
-                  isActive 
-                    ? "bg-white text-primary-600 shadow-sm" 
-                    : "text-secondary-500 hover:text-secondary-700",
-                ],
+                variant === 'pill' && (bento
+                  ? "rounded-full"
+                  : [
+                      "rounded-md",
+                      isActive
+                        ? "bg-white text-primary-600 shadow-sm"
+                        : "text-secondary-500 hover:text-secondary-700",
+                    ]),
                 item.disabled && "opacity-50 cursor-not-allowed"
               )}
+              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
+              }
             >
               {item.icon && <span className="w-4 h-4">{item.icon}</span>}
               <ITText as="span">{item.label}</ITText>

package/src/components/organisms/data-table/dataTable.tsx

@@ -147,6 +147,29 @@ export default function ITDataTable<T extends Record<string, unknown>>({
   const isTableVirtual = virtualized && effectiveView === "table";
   const isStickyHeader = stickyHeader && isTableVirtual;
   const resolvedRowHeight = rowHeight ?? getRowHeight(size, density);
+
+  // La virtualización espacios filas de `resolvedRowHeight`; si el contenedor
+  // corta a una altura arbitraria, la última fila sale partida. Medimos el
+  // encabezado y recortamos a un múltiplo exacto de fila.
+  const headRef = useRef<HTMLTableSectionElement | null>(null);
+  const [headHeight, setHeadHeight] = useState(0);
+  useEffect(() => {
+    if (!isTableVirtual) return;
+    const el = headRef.current;
+    if (!el) return;
+    const measure = () => setHeadHeight(el.getBoundingClientRect().height);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [isTableVirtual, resolvedRowHeight]);
+
+  const snappedMaxHeight =
+    isTableVirtual && headHeight > 0
+      ? headHeight +
+        Math.max(1, Math.floor((virtualizedMaxHeight - headHeight) / resolvedRowHeight)) * resolvedRowHeight
+      : virtualizedMaxHeight;
   const columnCount = columns.length;
   const pinnedMeta = React.useMemo(() => getPinnedColumnMeta(columns), [columns]);
   const scrollOuterClass = isTableVirtual
@@ -507,7 +530,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
           ))}
         </colgroup>
       )}
-      <thead>
+      <thead ref={headRef}>
         <tr
           className={clsx(tableHeaderRow, "dark:text-slate-200", headerSlot.className)}
           style={headerSlot.style}
@@ -590,7 +613,10 @@ export default function ITDataTable<T extends Record<string, unknown>>({
                     onRowClick && !isLoading && tableRowClickable,
                     rowSlot.className
                   )}
-                  style={rowSlot.style}
+                  style={{
+                    ...(isTableVirtual ? { height: resolvedRowHeight } : null),
+                    ...rowSlot.style,
+                  }}
                   tabIndex={onRowClick && !isLoading ? 0 : undefined}
                   onClick={onRowClick && !isLoading ? handleRowClick(row) : undefined}
                   onKeyDown={onRowClick && !isLoading ? handleRowKeyDown(row) : undefined}
@@ -740,7 +766,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
             <div
               ref={scrollRef}
               className="overflow-x-auto overflow-y-auto"
-              style={{ maxHeight: virtualizedMaxHeight }}
+              style={{ maxHeight: snappedMaxHeight }}
             >
               {tableEl}
             </div>

package/src/components/organisms/page-header/page-header.tsx

@@ -2,7 +2,7 @@ import { FaChevronLeft } from "react-icons/fa";
 import { ITPageHeaderProps } from "./page-header.props";
 import ITBreadcrumbs from "@/components/molecules/breadcrumbs/breadcrumbs";
 import ITText from "@/components/atoms/text/text";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 import { useITTranslation } from "@/i18n";
 
 /**
@@ -33,7 +33,10 @@ export default function ITPageHeader({
   const { t } = useITTranslation();
   const showTopRow = breadcrumbs?.length || backAction;
   // Flat appearance: compact title, no decorative icon tile.
-  const flat = useITFlatAppearance();
+  // Bento: no icon tile either, but a larger tight title and a borderless round back button.
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
 
   return (
     <div className={`${className} space-y-3`}>
@@ -44,7 +47,16 @@ export default function ITPageHeader({
             {backAction && (
               <button
                 onClick={backAction}
-                className="flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0"
+                className={
+                  bento
+                    ? "flex items-center justify-center w-10 h-10 rounded-full hover:opacity-80 transition-opacity duration-200 flex-shrink-0"
+                    : "flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0"
+                }
+                style={
+                  bento
+                    ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", color: "var(--it-bento-control-text, #475569)" }
+                    : undefined
+                }
                 aria-label={t("pageHeader.back")}
               >
                 <FaChevronLeft size={14} />
@@ -65,7 +77,7 @@ export default function ITPageHeader({
       {/* Fila principal: icono + título + descripción + (acciones si no hay top row) */}
       <div className="flex items-start justify-between gap-6">
         <div className="flex items-start gap-4 min-w-0">
-          {icon && !flat && (
+          {icon && !flat && !bento && (
             <div
               className="flex items-center justify-center w-12 h-12 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 flex-shrink-0 transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-500 hover:shadow-sm"
               style={iconColor ? { color: iconColor } : undefined}
@@ -77,7 +89,9 @@ export default function ITPageHeader({
             <ITText
               as="h1"
               className={
-                flat
+                bento
+                  ? "text-3xl font-bold text-slate-900 dark:text-white tracking-tighter leading-tight"
+                  : flat
                   ? "text-[1.625rem] font-bold text-slate-900 dark:text-white tracking-tight leading-tight"
                   : "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight"
               }
@@ -88,7 +102,9 @@ export default function ITPageHeader({
               <ITText
                 as="p"
                 className={
-                  flat
+                  bento
+                    ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed"
+                    : flat
                     ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed"
                     : "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed"
                 }

package/src/components/organisms/sidebar/sidebar.tsx

@@ -10,7 +10,7 @@ import {
 } from "./sidebar.props";
 import ITBadget from "@/components/atoms/badget/badget";
 import ITText from "@/components/atoms/text/text";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 import { useITTranslation } from "@/i18n";
 
 /** Narrows a submenu entry to a titled group. */
@@ -95,7 +95,10 @@ export default function ITSidebar({
   expandOnHover = true,
 }: ITSidebarProps) {
   // Flat appearance: plain surface, no glow/accent bar, narrower panel.
-  const flat = useITFlatAppearance();
+  // Bento shares that structure; its tokens make the active item a neutral pill with bold ink text.
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   const { t } = useITTranslation();
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
   const [isHovering, setIsHovering] = useState(false);
@@ -202,7 +205,7 @@ export default function ITSidebar({
           color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
           backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
           fontSize: flat ? '0.84rem' : '0.78rem',
-          fontWeight: subitem.isActive ? 600 : 500,
+          fontWeight: subitem.isActive ? (bento ? 700 : 600) : 500,
           letterSpacing: '0.01em',
           marginLeft: subitemConnector === '|' ? '-1px' : '0',
         }}
@@ -365,7 +368,7 @@ export default function ITSidebar({
       style={{
         zIndex: 50,
         backgroundColor: "var(--it-sidebar-bg, rgba(255, 255, 255, 0.90))",
-        borderRight: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
+        borderRight: bento ? "none" : "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
         ...(flat ? {} : { WebkitBackdropFilter: 'blur(12px)', backdropFilter: 'blur(12px)' }),
       }}
     >
@@ -480,7 +483,7 @@ export default function ITSidebar({
                       style={{
                         color: active ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
                         fontSize: flat ? '0.875rem' : '0.8rem',
-                        fontWeight: active ? '600' : '500'
+                        fontWeight: active ? (bento ? '700' : '600') : '500'
                       }}
                     >
                       {item.label}

package/src/components/organisms/topbar/topbar.props.ts

@@ -7,6 +7,8 @@ export interface ITTopBarNavItem {
   label: string;
   /** Optional icon element rendered beside the label. */
   icon?: any;
+  /** Marks the item as the current one. Sets `aria-current="page"`; with `appearance="bento"` it renders as the ink pill (dark fill, white text), in the other appearances as a subtle highlight. @default false */
+  isActive?: boolean;
   /** Click handler for this navigation item (legacy, prefer onNavItemClick). */
   action: () => void;
 }