@axzydev/axzy_ui_system 1.4.8 → 1.5.0

package/src/components/organisms/dropfile/dropfile.tsx

@@ -6,6 +6,7 @@ import ITText from "@/components/atoms/text/text";
 import ITButton from "@/components/atoms/button/button";
 import ITDialog from "@/components/organisms/dialog/dialog";
 import { ITDropfileProps, FileTypeEnum, UploadStatus } from "./dropfile.props";
+import { useITTranslation } from "@/i18n";
 export { FileTypeEnum, UploadStatus } from "./dropfile.props";
 
 /**
@@ -50,9 +51,10 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   onStatusChange,
   initialPreviewUrl,
   view = "drop",
-  buttonLabel = "Subir archivo",
+  buttonLabel,
   modalTitle,
 }) => {
+  const { t } = useITTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [fileType, setFileType] = useState<string | null>(null);
@@ -172,22 +174,22 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   const StatusBadge = ({ status }: { status: UploadStatus }) => {
     const config = {
       [UploadStatus.PENDING]: {
-        label: "Pendiente",
+        label: t("dropfile.status.pending"),
         color: "bg-warning-100 text-warning-800 border-warning-200",
         dotColor: "bg-warning-400",
       },
       [UploadStatus.UPLOADING]: {
-        label: "Subiendo...",
+        label: t("dropfile.status.uploading"),
         color: "bg-primary-100 text-primary-800 border-primary-200",
         dotColor: "bg-primary-400 animate-pulse",
       },
       [UploadStatus.UPLOADED]: {
-        label: "Subido",
+        label: t("dropfile.status.uploaded"),
         color: "bg-success-100 text-success-800 border-success-200",
         dotColor: "bg-success-400",
       },
       [UploadStatus.ERROR]: {
-        label: "Error",
+        label: t("dropfile.status.error"),
         color: "bg-danger-100 text-danger-800 border-danger-200",
         dotColor: "bg-danger-400",
       },
@@ -223,7 +225,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
           setImagePreview(previewUrl);
         }
       } else {
-        alert(`Tipo de archivo no permitido.`);
+        alert(t("dropfile.fileTypeNotAllowed"));
         setSelectedFile(null);
         setFileType(null);
         setImagePreview(null);
@@ -318,7 +320,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   const headerRow = (
     <div className="flex items-center justify-between mb-2">
       <label className="block text-sm font-semibold text-secondary-700">
-        <ITText as="span">Subir archivo </ITText><ITText as="span" className="text-secondary-400 font-normal text-xs">({getFileExtensions()})</ITText>
+        <ITText as="span">{t("dropfile.upload")} </ITText><ITText as="span" className="text-secondary-400 font-normal text-xs">({getFileExtensions()})</ITText>
       </label>
 
       {showStatusBadge && selectedFile && (
@@ -355,7 +357,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
 
           <div className="text-center space-y-1">
             <ITText as="p" className={`text-sm font-medium transition-colors duration-300 ${isDragActive ? 'text-primary-700' : 'text-secondary-700'}`}>
-              {isDragActive ? "¡Suelta aquí!" : "Haz clic o arrastra"}
+              {isDragActive ? t("dropfile.dropHere") : t("dropfile.clickOrDrag")}
             </ITText>
           </div>
         </div>
@@ -375,8 +377,8 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                   )}
                 </div>
                 <div className="min-w-0">
-                  <ITText as="p" className="text-xs font-medium text-secondary-900 truncate" title={selectedFile?.name || "Imagen cargada"}>
-                    {selectedFile?.name || "Imagen cargada"}
+                  <ITText as="p" className="text-xs font-medium text-secondary-900 truncate" title={selectedFile?.name || t("dropfile.imageLoaded")}>
+                    {selectedFile?.name || t("dropfile.imageLoaded")}
                   </ITText>
                   <ITText as="p" className="text-[10px] text-secondary-500">
                     {selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : ""}
@@ -389,7 +391,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
             {((selectedFile && fileType?.startsWith('image/')) || (!selectedFile && imagePreview)) ? (
               <img 
                 src={imagePreview} 
-                alt="Vista previa" 
+                alt={t("dropfile.previewAlt")} 
                 className="w-full h-full object-contain max-h-[200px]"
               />
             ) : (
@@ -397,7 +399,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                 <svg className="w-10 h-10 mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                 </svg>
-                <ITText as="span" className="text-xs">Sin vista previa</ITText>
+                <ITText as="span" className="text-xs">{t("dropfile.noPreview")}</ITText>
               </div>
             )}
           </div>
@@ -412,7 +414,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                   size="sm"
                   onClick={handleCancel}
                 >
-                  <ITText>Cancelar</ITText>
+                  <ITText>{t("common.cancel")}</ITText>
                 </ITButton>
                 <ITButton
                   type="button"
@@ -422,7 +424,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                   onClick={handleConfirm}
                 >
                   <div className="flex items-center gap-2">
-                    <ITText>Confirmar</ITText>
+                    <ITText>{t("common.confirm")}</ITText>
                     <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                     </svg>
@@ -440,7 +442,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                 <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                 </svg>
-                <ITText>Eliminar</ITText>
+                <ITText>{t("common.delete")}</ITText>
               </ITButton>
             )}
           </div>
@@ -479,13 +481,13 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
             </svg>
             <ITText className="truncate">
-              {selectedFile?.name || (hasFile ? "Archivo cargado" : buttonLabel)}
+              {selectedFile?.name || (hasFile ? t("dropfile.fileLoaded") : (buttonLabel ?? t("dropfile.upload")))}
             </ITText>
             {showStatusBadge && hasFile && <StatusBadge status={uploadStatus} />}
           </div>
         </ITButton>
 
-        <ITDialog isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title={modalTitle ?? buttonLabel}>
+        <ITDialog isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title={modalTitle ?? buttonLabel ?? t("dropfile.upload")}>
           <div className="w-full transition-all duration-300">
             {headerRow}
             {dropZoneOrPreview}

package/src/components/organisms/form-builder/fieldRenderer.tsx

@@ -11,6 +11,7 @@ import { useFieldRules } from "./useFormBuilder";
 import { getColSpanClass, getGridColsClass } from "@/utils/styles";
 import ITText from "@/components/atoms/text/text";
 import { FaSpinner } from "react-icons/fa";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Resolves `FieldConfigV2["options"]` to a stable `{ value, label }[]` array,
@@ -123,6 +124,7 @@ const ITFieldRenderer = ({
   dependentValues = {},
 }: ITFieldRendererProps) => {
   const context = useITFormBuilderContext();
+  const { t } = useITTranslation();
   const { isVisible, isRequired, isDisabled, dynamicProps } = useFieldRules(
     config,
     dependentValues,
@@ -220,7 +222,7 @@ const ITFieldRenderer = ({
               >
                 <FaSpinner className="animate-spin text-primary-500" />
                 <ITText as="span" className="text-sm text-slate-500">
-                  Cargando opciones...
+                  {t("formBuilder.loadingOptions")}
                 </ITText>
               </div>
             );
@@ -366,7 +368,7 @@ const ITFieldRenderer = ({
         return (
           <div className="p-4 border-2 border-dashed border-secondary-200 rounded-xl">
             <ITText as="p" className="text-sm text-secondary-500 text-center">
-              Array Field: {label}
+              {t("formBuilder.arrayField", { label: label ?? "" })}
             </ITText>
           </div>
         );

package/src/components/organisms/navbar/navbar.tsx

@@ -4,6 +4,7 @@ import { FaChevronDown, FaChevronRight, FaUserCircle } from "react-icons/fa";
 import { ITNavbarProps, ITNavigationItem } from "./navbar.props";
 import ITText from "@/components/atoms/text/text";
 import { theme } from "@/theme/theme";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Full sidebar navigation shell with collapsible submenus, user menu dropdown, and themed styling.
@@ -44,6 +45,7 @@ export default function ITNavbar({
   showSidebarOnMobile = false,
   sidebarItems,
 }: ITNavbarProps) {
+  const { t } = useITTranslation();
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
 
@@ -106,7 +108,7 @@ export default function ITNavbar({
                         <img
                           className="w-8 h-8 rounded-full"
                           src={userMenu.userImage}
-                          alt="user photo"
+                          alt={t("common.userAvatar")}
                         />
                       ) : (
                         <FaUserCircle className="w-8 h-8 text-secondary-500" />
@@ -290,7 +292,7 @@ export default function ITNavbar({
                   <img
                     className="w-10 h-10 rounded-full border-2 transition-colors"
                     src={userMenu.userImage}
-                    alt="user photo"
+                    alt={t("common.userAvatar")}
                     style={{ borderColor: sidebar.borderColor }}
                   />
                 ) : (

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

@@ -3,6 +3,7 @@ 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 { useITTranslation } from "@/i18n";
 
 /**
  * Page title bar with breadcrumbs, description, back button, and action buttons.
@@ -29,6 +30,7 @@ export default function ITPageHeader({
   iconColor,
   className,
 }: ITPageHeaderProps) {
+  const { t } = useITTranslation();
   const showTopRow = breadcrumbs?.length || backAction;
   // Flat appearance: compact title, no decorative icon tile.
   const flat = useITFlatAppearance();
@@ -43,7 +45,7 @@ export default function ITPageHeader({
               <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"
-                aria-label="Volver"
+                aria-label={t("pageHeader.back")}
               >
                 <FaChevronLeft size={14} />
               </button>

package/src/components/organisms/searchTable/components/PaginationControls.tsx

@@ -4,6 +4,7 @@ import PaginationInfo from "./PaginationInfo";
 import ITSelect from "@/components/molecules/select/select";
 import ITButton from "@/components/atoms/button/button";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 interface PaginationControlsProps {
   pageIndex: number;
@@ -30,13 +31,14 @@ export default function PaginationControls({
   currentCount,
   totalCount,
 }: PaginationControlsProps) {
+  const { t } = useITTranslation();
   return (
     <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
       <div className="flex items-center space-x-4">
         <PaginationInfo currentCount={currentCount} totalCount={totalCount} />
 
         <div className="flex items-center space-x-2">
-          <ITText as="span" className="text-sm text-secondary-700">Mostrar:</ITText>
+          <ITText as="span" className="text-sm text-secondary-700">{t("searchTable.showLabel")}</ITText>
           <ITSelect
             name="itemsPerPage"
             options={itemsPerPageOptions.map((option) => ({
@@ -59,14 +61,14 @@ export default function PaginationControls({
           onClick={() => onPageChange(pageIndex - 1)}
           disabled={!hasPreviousPage}
           className="min-w-[32px]"
-          ariaLabel="Página anterior"
-          title="Ir a la página anterior"
+          ariaLabel={t("searchTable.prev")}
+          title={t("searchTable.prev")}
         >
           <FaArrowLeft aria-hidden="true" />
         </ITButton>
 
         <ITText as="span" className="px-4 py-2 text-sm text-secondary-700" aria-live="polite">
-          Página {pageIndex} de {totalPages}
+          {t("searchTable.pageOf", { current: pageIndex, total: totalPages })}
         </ITText>
 
         <ITButton
@@ -75,8 +77,8 @@ export default function PaginationControls({
           onClick={() => onPageChange(pageIndex + 1)}
           disabled={!hasNextPage}
           className="min-w-[32px]"
-          ariaLabel="Página siguiente"
-          title="Ir a la página siguiente"
+          ariaLabel={t("searchTable.next")}
+          title={t("searchTable.next")}
         >
           <FaArrowRight aria-hidden="true" />
         </ITButton>

package/src/components/organisms/searchTable/components/PaginationInfo.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 interface PaginationInfoProps {
   currentCount: number;
@@ -12,9 +13,10 @@ export default function PaginationInfo({
   totalCount,
   className = "",
 }: PaginationInfoProps) {
+  const { t } = useITTranslation();
   return (
     <ITText as="span" className={`text-sm text-secondary-700 ${className}`}>
-      Mostrando {currentCount} de {totalCount} resultados
+      {t("searchTable.showingCount", { from: currentCount, total: totalCount })}
     </ITText>
   );
 }

package/src/components/organisms/searchTable/components/SearchAndSortBar.tsx

@@ -3,6 +3,7 @@ import SearchInput from "./SearchInput";
 import SortButton from "./SortButton";
 import ITButton from "@/components/atoms/button/button";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 interface SearchAndSortBarProps {
   searchTerm: string;
@@ -22,13 +23,14 @@ export default function SearchAndSortBar({
   onClearSearch,
   onGlobalSort,
   sortConfig,
-  searchInputPlaceholder = "Buscar en todos los campos...",
+  searchInputPlaceholder,
 }: SearchAndSortBarProps) {
+  const { t } = useITTranslation();
   return (
     <div className="bg-secondary-50 px-6 py-4 border-b border-secondary-200">
       <div className="flex items-center gap-4">
         <SearchInput
-          placeholder={searchInputPlaceholder}
+          placeholder={searchInputPlaceholder ?? t("searchTable.searchPlaceholder")}
           value={searchTerm}
           onChange={onSearchChange}
         />
@@ -41,10 +43,10 @@ export default function SearchAndSortBar({
             variant="outlined"
             color="danger"
             onClick={onClearSearch}
-            ariaLabel="Limpiar búsqueda"
-            title="Limpiar búsqueda"
+            ariaLabel={t("searchTable.clearSearch")}
+            title={t("searchTable.clearSearch")}
           >
-            <ITText as="span">Limpiar</ITText>
+            <ITText as="span">{t("common.clear")}</ITText>
           </ITButton>
         )}
       </div>

package/src/components/organisms/searchTable/components/SearchInput.tsx

@@ -1,6 +1,7 @@
 import ITInput from "@/components/atoms/input/input";
 import React from "react";
 import { FaSearch } from "react-icons/fa";
+import { useITTranslation } from "@/i18n";
 
 interface SearchInputProps {
   placeholder?: string;
@@ -10,11 +11,12 @@ interface SearchInputProps {
 }
 
 export default function SearchInput({
-  placeholder = "Buscar en todos los campos...",
+  placeholder,
   value,
   onChange,
   className = "",
 }: SearchInputProps) {
+  const { t } = useITTranslation();
   return (
     <div className={`relative flex-1 ${className}`}>
       <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -22,7 +24,7 @@ export default function SearchInput({
       </div>
       <ITInput
         name="global-search"
-        placeholder={placeholder}
+        placeholder={placeholder ?? t("searchTable.searchPlaceholder")}
         value={value}
         onChange={(e) => onChange(e.target.value)}
         onBlur={() => {}}

package/src/components/organisms/searchTable/components/SortButton.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 interface SortButtonProps {
   sortConfig?: {
@@ -16,18 +17,19 @@ export default function SortButton({
   onClick,
   className = "",
 }: SortButtonProps) {
+  const { t } = useITTranslation();
+  const directionLabel = sortConfig
+    ? sortConfig.direction === "asc"
+      ? t("searchTable.sortDescending")
+      : t("searchTable.sortAscending")
+    : t("searchTable.sortAscending");
+
   return (
     <button
       onClick={onClick}
       className={`p-3 rounded-lg bg-white border border-secondary-300 hover:bg-secondary-50 transition-colors duration-200 flex items-center gap-2 min-w-[120px] ${className}`}
-      aria-label={`Ordenar tabla ${
-        sortConfig
-          ? sortConfig.direction === "asc"
-            ? "descendente"
-            : "ascendente"
-          : "ascendente"
-      }`}
-      title="Ordenar tabla"
+      aria-label={t("searchTable.sortAria", { direction: directionLabel })}
+      title={t("searchTable.sortTable")}
     >
       {sortConfig ? (
         sortConfig.direction === "asc" ? (
@@ -41,9 +43,9 @@ export default function SortButton({
       <ITText as="span" className="text-sm font-medium text-secondary-700">
         {sortConfig
           ? sortConfig.direction === "asc"
-            ? "Asc ↑"
-            : "Desc ↓"
-          : "Ordenar"}
+            ? t("searchTable.sortAsc")
+            : t("searchTable.sortDesc")
+          : t("searchTable.sort")}
       </ITText>
     </button>
   );

package/src/components/organisms/searchTable/components/TableEmptyState.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 interface TableEmptyStateProps {
   colSpan: number;
@@ -10,12 +11,13 @@ export default function TableEmptyState({
   colSpan,
   searchTerm,
 }: TableEmptyStateProps) {
+  const { t } = useITTranslation();
   return (
     <tr>
       <td colSpan={colSpan} className="px-6 py-4 text-center">
         {searchTerm
-          ? <ITText as="span">No se encontraron resultados para tu búsqueda</ITText>
-          : <ITText as="span">No se encontraron resultados</ITText>}
+          ? <ITText as="span">{t("searchTable.emptySearch")}</ITText>
+          : <ITText as="span">{t("searchTable.empty")}</ITText>}
       </td>
     </tr>
   );

package/src/components/organisms/searchTable/components/TableRow.tsx

@@ -6,6 +6,7 @@ import { FaCheck, FaTimes } from "react-icons/fa";
 import { SearchColumn } from "../searchTable.props";
 import EditableCell from "./EditableCell";
 import * as yup from "yup";
+import { useITTranslation, toIntlLocale } from "@/i18n";
 
 interface TableRowProps<T> {
   row: T;
@@ -31,6 +32,7 @@ export default function TableRow<T>({
   isEditing = false,
   onEdit,
 }: TableRowProps<T>) {
+  const { t, locale } = useITTranslation();
   const {
     editedRow,
     errors,
@@ -55,18 +57,18 @@ export default function TableRow<T>({
     switch (col.type) {
       case "number":
         return typeof value === "number" && col.currencyMX
-          ? formatCurrencyMX(value)
+          ? formatCurrencyMX(value, toIntlLocale(locale))
           : (value as React.ReactNode);
 
       case "boolean":
         return value ? (
           <FaCheck
             className="text-green-500"
-            aria-label="Verdadero"
-            title="Verdadero"
+            aria-label={t("common.true")}
+            title={t("common.true")}
           />
         ) : (
-          <FaTimes className="text-danger-500" aria-label="Falso" title="Falso" />
+          <FaTimes className="text-danger-500" aria-label={t("common.false")} title={t("common.false")} />
         );
 
       case "actions":

package/src/components/organisms/searchTable/searchTable.tsx

@@ -11,6 +11,7 @@ import { getNestedValue } from "@/utils/table.utils";
 import TableEmptyState from "./components/TableEmptyState";
 import PaginationControls from "./components/PaginationControls";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 interface CustomITSearchTableProps<T> extends ITSearchTableProps<T> {
   editingRow?: number | null;
@@ -53,7 +54,7 @@ export default function ITSearchTable<T extends Record<string, unknown>>({
   data,
   containerClassName,
   searchTermInitial = "",
-  searchInputPlaceholder = "Buscar en todos los campos...",
+  searchInputPlaceholder,
   variant = "default",
   size = "md",
   itemsPerPageOptions = [10, 20, 50, 100],
@@ -76,6 +77,7 @@ export default function ITSearchTable<T extends Record<string, unknown>>({
   onSave,
   onCancel,
 }: CustomITSearchTableProps<T>) {
+  const { t } = useITTranslation();
   const [itemsPerPage, setItemsPerPage] = useState(defaultItemsPerPage);
 
   const { searchTerm, handleSearchChange, handleClearSearch } = useDebouncedSearch({
@@ -145,7 +147,7 @@ return (
              onClearSearch={handleClearSearchWithClear}
             onGlobalSort={handleGlobalSort}
             sortConfig={sortConfig}
-            searchInputPlaceholder={searchInputPlaceholder}
+            searchInputPlaceholder={searchInputPlaceholder ?? t("searchTable.searchPlaceholder")}
           />
         </div>
 

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

@@ -75,7 +75,7 @@ export interface ITSidebarNotification {
   count: number;
   /** Icon rendered left of the label (e.g. a bell). Omit for a count-only pill. */
   icon?: React.ReactNode;
-  /** Accessible label and tooltip for the notification button. @default "Notificaciones" */
+  /** Accessible label and tooltip for the notification button. @default i18n `sidebar.notifications` ("Notificaciones") */
   label?: string;
   /** Click handler for the notification button. */
   onClick?: () => void;

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

@@ -11,6 +11,7 @@ import {
 import ITBadget from "@/components/atoms/badget/badget";
 import ITText from "@/components/atoms/text/text";
 import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITTranslation } from "@/i18n";
 
 /** Narrows a submenu entry to a titled group. */
 function isSubItemGroup(
@@ -73,6 +74,7 @@ export default function ITSidebar({
 }: ITSidebarProps) {
   // Flat appearance: plain surface, no glow/accent bar, narrower panel.
   const flat = useITFlatAppearance();
+  const { t } = useITTranslation();
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
   const [isHovering, setIsHovering] = useState(false);
   const sidebarRef = useRef<HTMLDivElement>(null);
@@ -251,7 +253,7 @@ export default function ITSidebar({
     const {
       count,
       icon,
-      label = "Notificaciones",
+      label = t("sidebar.notifications"),
       onClick,
       badgeProps,
     } = notification;
@@ -371,11 +373,14 @@ export default function ITSidebar({
       )}
 
       {/* Navigation Items */}
-      <nav aria-label="Componentes de la librería" className={`flex-1 py-4 custom-scrollbar ${fixedRail ? "overflow-visible" : "overflow-y-auto overflow-x-hidden"} ${flat && isSidebarCollapsed ? "px-3" : "px-4"}`}>
+      <nav aria-label={t("sidebar.navAria")} className={`flex-1 py-4 custom-scrollbar ${fixedRail ? "overflow-visible" : "overflow-y-auto overflow-x-hidden"} ${flat && isSidebarCollapsed ? "px-3" : "px-4"}`}>
         <ul className="space-y-1">
           {navigationItems.map((item) => {
             const hasSubmenu = !!item.subitems && item.subitems.length > 0;
             const submenuId = `it-sidebar-submenu-${item.id}`;
+            // El submenú solo existe en el DOM cuando la barra está expandida:
+            // `aria-controls` a un id inexistente es un valor ARIA inválido.
+            const hasRenderedSubmenu = hasSubmenu && !isSidebarCollapsed;
             const { className: badgeClassName, ...badgeRest } = item.badgeProps ?? {};
             // Flat + expanded: a parent whose subitem is active stays plain; the
             // subitem carries the highlight. Collapsed, the parent icon shows it.
@@ -387,7 +392,7 @@ export default function ITSidebar({
                 tabIndex={0}
                 aria-label={item.label}
                 aria-expanded={hasSubmenu ? expandedItems.has(item.id) : undefined}
-                aria-controls={hasSubmenu ? submenuId : undefined}
+                aria-controls={hasRenderedSubmenu ? submenuId : undefined}
                 className={`flex items-center cursor-pointer 
                   transition-all duration-300 ease-[cubic-bezier(0.2,0,0,1)]
                   rounded-xl relative overflow-visible
@@ -525,7 +530,7 @@ export default function ITSidebar({
                       ))}
                     </div>
                   ) : (
-                    <ITText as="div" className="px-5 py-3 text-sm italic" style={{ color: "var(--it-sidebar-label-color, var(--color-secondary-400))" }}>No hay submenú</ITText>
+                    <ITText as="div" className="px-5 py-3 text-sm italic" style={{ color: "var(--it-sidebar-label-color, var(--color-secondary-400))" }}>{t("sidebar.noSubmenu")}</ITText>
                   )}
                 </div>
               )}

package/src/components/organisms/toast/toast.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { ITToastProps } from "./toast.props";
 import { FaTimesCircle, FaCheckCircle, FaExclamationTriangle, FaInfoCircle, FaTimes } from "react-icons/fa";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * ITToast — floating notification with automatic dismiss and severity-based styling.
@@ -34,6 +35,7 @@ export default function ITToast({
   position = "top-right",
   onClose,
 }: ITToastProps) {
+  const { t } = useITTranslation();
   const [isVisible, setIsVisible] = useState(true);
 
   useEffect(() => {
@@ -98,7 +100,7 @@ export default function ITToast({
       <button
         onClick={handleClose}
         className="p-1.5 rounded-full hover:bg-black/15 transition-colors focus:outline-none focus:ring-2 focus:ring-white/50"
-        aria-label="Close notification"
+        aria-label={t("common.closeNotification")}
       >
         <FaTimes className="w-4 h-4" />
       </button>

package/src/components/organisms/topbar/topbar.tsx

@@ -4,6 +4,7 @@ import { useRef, useState } from "react";
 import { ITTopBarProps } from "./topbar.props";
 import ITText from "@/components/atoms/text/text";
 import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITTranslation } from "@/i18n";
 
 /**
  * ITTopBar — sticky top navigation bar with logo, nav items, and user avatar dropdown.
@@ -73,6 +74,7 @@ export default function ITTopBar({
 }: ITTopBarProps) {
   // Flat appearance: plain bar (no shadow/blur), initials avatar, name before it.
   const flat = useITFlatAppearance();
+  const { t } = useITTranslation();
   const initials = (userMenu?.userName ?? "")
     .trim()
     .split(/\s+/)
@@ -102,7 +104,7 @@ export default function ITTopBar({
           {showMobileMenuButton && (
             <button
               type="button"
-              aria-label="Menú"
+              aria-label={t("common.menu")}
               className={`${showDesktopMenuButton ? "" : "lg:hidden"} p-2.5 -ml-2.5 rounded-xl transition-colors duration-200`}
               style={{
                  color: "var(--it-topbar-icon, #64748b)",
@@ -200,7 +202,7 @@ export default function ITTopBar({
                       <img
                         className="w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm"
                         src={userMenu.userImage}
-                        alt="Current user"
+                        alt={t("common.userAvatar")}
                       />
                     ) : flat && initials ? (
                       <div