@axzydev/axzy_ui_system 1.4.8 → 1.5.0

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -38,12 +38,11 @@
     "preview": "vite preview",
     "bundle": "tsup src/index.ts && node scripts/build-css.mjs",
     "watch": "tsup src/index.ts --watch",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
     "ext:catalog": "node vscode-extension/scripts/generate-catalog.mjs",
     "ext:build": "node vscode-extension/esbuild.mjs",
     "ext:typecheck": "tsc --noEmit -p vscode-extension/tsconfig.json",
-    "ext:package": "node vscode-extension/esbuild.mjs && cd vscode-extension && npx --yes @vscode/vsce package --no-dependencies"
+    "ext:package": "node vscode-extension/esbuild.mjs && cd vscode-extension && npx --yes @vscode/vsce package --no-dependencies",
+    "audit:sandbox": "node scripts/audit-sandbox.mjs"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -75,18 +74,6 @@
     "tailwindcss": "^4.0.0",
     "tsup": "^8.3.6",
     "vite-plugin-dts": "^4.5.0",
-    "storybook": "^10.2.0",
-    "@storybook/react-vite": "^10.2.0",
-    "@chromatic-com/storybook": "^5.0.0",
-    "@storybook/addon-vitest": "^10.2.0",
-    "@storybook/addon-a11y": "^10.2.0",
-    "@storybook/addon-docs": "^10.2.0",
-    "@storybook/addon-onboarding": "^10.2.0",
-    "eslint-plugin-storybook": "^10.2.0",
-    "vitest": "^4.0.18",
-    "playwright": "^1.58.0",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
     "@types/vscode": "1.85.0",
     "esbuild": "^0.25.0"
   }

package/src/App.tsx

@@ -1,18 +1,11 @@
 import React, { useEffect, useMemo, useState } from "react";
-import {
-  FaCreditCard,
-  FaHome,
-  FaKeyboard,
-  FaRegBell,
-  FaSlidersH,
-  FaTable,
-} from "react-icons/fa";
-import { ITLayout, ITThemeProvider, useDebouncedSearch } from "./index";
+import { ITLayout, ITThemeProvider, ITI18nProvider, useITTranslation, useDebouncedSearch } from "./index";
 import type { ITNavigationItem } from "./index";
-import "./index.css";
 
 // Import Showcases
 import { HomeShowcase } from "./showcases/HomeShowcase";
+import ProductoDetalle from "./showcases/ProductoDetalle";
+import { PRODUCTOS } from "./showcases/productos";
 import { GettingStartedShowcase } from "./showcases/GettingStartedShowcase";
 import { HelpShowcase } from "./showcases/HelpShowcase";
 import { SizesShowcase } from "./showcases/SizesShowcase";
@@ -82,18 +75,18 @@ import { useHashRoute } from "./sandbox/useHashRoute";
 import TopbarSearch from "./sandbox/TopbarSearch";
 import { LandingShowcase } from "./sandbox/LandingShowcase";
 import NotFoundShowcase from "./sandbox/NotFoundShowcase";
+import { sandboxMessages, translateLabel } from "./sandbox/i18n";
+import { SandboxLocaleProvider, useSandboxLocale } from "./sandbox/locale";
+import { SelectorIdioma, SelectorTema } from "./sandbox/controls";
+import { GROUP_ICONS } from "./sandbox/icons";
 
-// Icons per sandbox group (icons stay here; navigation.ts is plain data).
-const GROUP_ICONS: Record<string, React.ReactNode> = {
-  general: <FaHome />,
-  struc: <FaCreditCard />,
-  forms: <FaKeyboard />,
-  data: <FaTable />,
-  nav: <FaSlidersH />,
-  feed: <FaRegBell />,
-};
-
-function App() {
+/**
+ * Dev-only language switcher for the sandbox chrome. Lee el idioma del contexto
+ * compartido, así que el mismo control vive igual en la barra del sandbox y en
+ * la cabecera del portafolio.
+ */
+function AppShell() {
+  const { t } = useITTranslation();
   const { route, goToItem, goToLanding, goToPortfolio } = useHashRoute();
   const [subitemConnector] = useState<"dot" | "|" | "none">("dot");
 
@@ -127,13 +120,13 @@ function App() {
       return SANDBOX_GROUPS.map((group) => {
         const subitems = group.subitems.map((sub) => ({
           id: sub.id,
-          label: sub.label,
+          label: translateLabel(sub.id, sub.label, t),
           isActive: showroomActive === sub.id,
           action: () => goToItem(group.id, sub.id),
         }));
         return {
           id: group.id,
-          label: group.label,
+          label: translateLabel(group.id, group.label, t),
           icon: GROUP_ICONS[group.id],
           isActive: subitems.some((sub) => sub.isActive),
           subitems,
@@ -143,22 +136,23 @@ function App() {
 
     const flat: ITNavigationItem[] = [];
     SANDBOX_GROUPS.forEach((group) => {
+      const groupLabel = translateLabel(group.id, group.label, t);
       const groupMatches =
-        group.label.toLowerCase().includes(term) ||
+        groupLabel.toLowerCase().includes(term) ||
         group.id.toLowerCase().includes(term);
-      const groupBadge = group.label.split(" ")[0];
+      const groupBadge = groupLabel.split(" ")[0];
 
       group.subitems
         .filter(
           (sub) =>
             groupMatches ||
-            sub.label.toLowerCase().includes(term) ||
+            translateLabel(sub.id, sub.label, t).toLowerCase().includes(term) ||
             sub.id.toLowerCase().includes(term),
         )
         .forEach((sub) => {
           flat.push({
             id: sub.id,
-            label: sub.label,
+            label: translateLabel(sub.id, sub.label, t),
             icon: GROUP_ICONS[group.id],
             badge: groupBadge,
             isActive: showroomActive === sub.id,
@@ -167,7 +161,7 @@ function App() {
         });
     });
     return flat;
-  }, [debouncedTerm, showroomActive, goToItem]);
+  }, [debouncedTerm, showroomActive, goToItem, t]);
 
   // Sidebar is UNCONTROLLED: ITLayout's internal default is the 88px rail and the
   // rail expands automatically on hover. No toggle button — the hover is the control.
@@ -188,18 +182,14 @@ function App() {
         pending={searchValue.trim() !== debouncedTerm.trim()}
       />
     ),
-    // The topbar places `children` in its right area, right before the user menu.
+    // The topbar places `children` in its right area: los controles reales del
+    // chrome (idioma y tema). Antes había aquí una campana de notificaciones con
+    // un punto rojo que no llevaba a ninguna parte.
     children: (
-      <button
-        type="button"
-        aria-label="Notificaciones"
-        title="Notificaciones"
-        className="relative flex items-center justify-center p-2.5 rounded-xl transition-colors duration-200 hover:bg-[var(--it-topbar-user-hover,#f1f5f9)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-400"
-        style={{ color: "var(--it-topbar-icon, #94a3b8)" }}
-      >
-        <FaRegBell className="w-5 h-5" aria-hidden="true" />
-        <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-red-500 ring-2 ring-white" />
-      </button>
+      <>
+        <SelectorIdioma />
+        <SelectorTema />
+      </>
     ),
     navItems: [
       {
@@ -209,7 +199,7 @@ function App() {
       },
       {
         id: "portfolio",
-        label: "Portafolio",
+        label: t("sandbox.nav.portfolio"),
         action: () => goToPortfolio(),
       },
     ],
@@ -217,16 +207,8 @@ function App() {
       if (id === "ui-system") goToLanding();
       else if (id === "portfolio") goToPortfolio();
     },
-    userMenu: {
-      userName: "Alex Dev",
-      userEmail: "alex@axzy.dev",
-      menuItems: [
-        {
-          label: "Ir al Portafolio",
-          onClick: () => goToPortfolio(),
-        },
-      ],
-    },
+    // Sin `userMenu`: el sandbox no tiene sesión. Antes mostraba un usuario
+    // inventado ("Alex Dev / alex@axzy.dev") en un portafolio real.
   };
 
   // Render correct component based on active showroom navigation
@@ -340,31 +322,66 @@ function App() {
 
   return (
     <ITThemeProvider showFab={false} density={0.98} radius={10} shadow={2}>
-      {route.view === "home" ? (
-        <div className="min-h-screen bg-slate-50 dark:bg-slate-950 py-10 px-4 sm:px-6 lg:px-8">
-          <div className="max-w-6xl mx-auto">
+        {route.view === "producto" ? (
+          <div className="min-h-[100dvh] bg-[#fafafa] dark:bg-[#0b0d10]">
+            {route.valid ? (
+              <ProductoDetalle
+                producto={PRODUCTOS.find((producto) => producto.id === route.producto)!}
+                onBack={() => goToPortfolio()}
+              />
+            ) : (
+              <NotFoundShowcase
+                attempted={route.raw}
+                onGoLanding={() => goToLanding()}
+                onGoPortfolio={goToPortfolio}
+              />
+            )}
+          </div>
+        ) : route.view === "home" ? (
+          <div className="min-h-[100dvh] bg-[#fafafa] dark:bg-[#0b0d10]">
             <HomeShowcase />
           </div>
-        </div>
-      ) : (
-        <ITLayout sidebar={sidebarProps} topBar={topBarProps}>
-          {!route.valid ? (
-            <NotFoundShowcase
-              attempted={route.raw}
-              onGoLanding={() => goToLanding()}
-              onGoPortfolio={goToPortfolio}
-            />
-          ) : !route.group && !route.item ? (
-            <LandingShowcase
-              onOpenItem={goToItem}
-              onOpenPortfolio={goToPortfolio}
-            />
-          ) : (
-            renderShowcase(showroomActive)
-          )}
-        </ITLayout>
-      )}
-    </ITThemeProvider>
+        ) : (
+          <ITLayout sidebar={sidebarProps} topBar={topBarProps}>
+            {!route.valid ? (
+              <NotFoundShowcase
+                attempted={route.raw}
+                onGoLanding={() => goToLanding()}
+                onGoPortfolio={goToPortfolio}
+              />
+            ) : !route.group && !route.item ? (
+              <LandingShowcase
+                onOpenItem={goToItem}
+                onOpenPortfolio={goToPortfolio}
+              />
+            ) : (
+              renderShowcase(showroomActive)
+            )}
+          </ITLayout>
+        )}
+      </ITThemeProvider>
+  );
+}
+
+/**
+ * Sandbox root: el idioma vive en `SandboxLocaleProvider` (compartido con el
+ * portafolio) y `ITI18nProvider` lo aplica a todo el showroom.
+ */
+function SandboxI18n() {
+  const { locale } = useSandboxLocale();
+
+  return (
+    <ITI18nProvider locale={locale} messages={sandboxMessages}>
+      <AppShell />
+    </ITI18nProvider>
+  );
+}
+
+function App() {
+  return (
+    <SandboxLocaleProvider>
+      <SandboxI18n />
+    </SandboxLocaleProvider>
   );
 }
 

package/src/components/atoms/badget/badget.tsx

@@ -30,6 +30,19 @@ export default function ITBadget({
   const themeBadge = (theme as any).badge || {};
   const config = themeBadge[color] || themeBadge.primary || {};
 
+  /**
+   * El acento base de la paleta (`--color-primary`, cian por defecto) queda en
+   * 2.4:1 con texto blanco y 3.3:1 como texto sobre blanco. Para `primary` el
+   * color se resuelve con utilidades (`primary-700` en claro, `primary-500` en
+   * oscuro) que sí pasan AA; el resto de colores del tema se respetan tal cual.
+   */
+  const esAcentoPrimario = color === "primary";
+  const claseAcento = esAcentoPrimario
+    ? variant === "filled"
+      ? "bg-primary-700 text-white dark:bg-primary-500 dark:text-slate-950"
+      : "border-primary-700 text-primary-700 dark:border-primary-500 dark:text-primary-500"
+    : "";
+
   const getStyle = () => {
     const style: React.CSSProperties = {
       fontWeight: config.fontWeight,
@@ -41,14 +54,18 @@ export default function ITBadget({
     };
 
     if (variant === "filled") {
-      style.backgroundColor = config.backgroundColor;
-      style.color = config.color;
+      if (!esAcentoPrimario) {
+        style.backgroundColor = config.backgroundColor;
+        style.color = config.color;
+      }
       style.borderColor = config.borderColor || 'transparent'; // Some filled badges might have subtle borders
     } else if (variant === "outlined") {
       style.backgroundColor = "transparent";
-      // Use the dark text color for both text and border to ensure high contrast
-      style.color = config.color; 
-      style.borderColor = config.color;
+      if (!esAcentoPrimario) {
+        // El tono del tema para texto y borde: legible sobre cualquier superficie.
+        style.color = config.color;
+        style.borderColor = config.color;
+      }
     }
 
     return style;
@@ -57,6 +74,7 @@ export default function ITBadget({
   return (
     <span
       className={clsx(
+        claseAcento,
         "inline-flex items-center justify-center",
         // Apply size classes (padding/font-size)
         badgeSizes[size],

package/src/components/atoms/chip/chip.tsx

@@ -4,6 +4,7 @@ import { chipSizes } from "@/types/chip.types";
 import { theme } from "@/theme/theme";
 import { FaTimes } from "react-icons/fa";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Compact tag / pill used for labels, active filters, and multi-value selections.
@@ -63,6 +64,7 @@ export default function ITChip({
     style.borderColor = palette[500];
   }
 
+  const { t } = useITTranslation();
   const interactive = Boolean(onClick) && !disabled;
 
   return (
@@ -96,7 +98,7 @@ export default function ITChip({
       {removable && (
         <button
           type="button"
-          aria-label={label ? `Quitar ${label}` : "Quitar"}
+          aria-label={label ? t("chip.remove", { label }) : t("chip.remove", { label: "" }).trim()}
           disabled={disabled}
           onClick={(e) => {
             e.stopPropagation();

package/src/components/atoms/image/image.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { ITImageProps } from "./image.props";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Image component with automatic fallback on load error.
@@ -27,6 +28,7 @@ const ITImage = ({
   fallback = "",
 }: ITImageProps) => {
   const [imageError, setImageError] = useState(false);
+  const { t } = useITTranslation();
 
   const handleImageError = () => {
     setImageError(true);
@@ -39,7 +41,7 @@ const ITImage = ({
       {imageError ? (
         <img
           src={fallback}
-          alt="Fallback"
+          alt={t("image.fallbackAlt")}
           className="w-full h-full object-cover"
         />
       ) : (

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

@@ -5,6 +5,7 @@ import { KeyboardEvent, useState, useEffect, useRef, useCallback } from "react";
 import { theme } from "@/theme/theme";
 import { disabledOverlay, iconAbsoluteLeft, iconAbsoluteRight, inputError, inputLabel, inputFieldStyle } from "@/utils/styles";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Text input component with label, validation error display, icon slots,
@@ -69,6 +70,7 @@ export default function ITInput({
   size = "md",
   decimals
 }: ITInputProps) {
+  const { t, formatNumber: formatNumberLocale } = useITTranslation();
   const isCheckboxOrRadio = type === "checkbox" || type === "radio";
   const isNumberType = type === "number";
   const isTextArea = type === "textarea";
@@ -120,11 +122,11 @@ export default function ITInput({
     : (value === undefined || value === null || String(value).trim() === "");
 
   const effectiveError = error !== undefined && error !== false
-    ? (error === true ? "Este campo es requerido" : error)
-    : (required && isEmpty ? "Este campo es requerido" : undefined);
+    ? (error === true ? t("field.required") : error)
+    : (required && isEmpty ? t("field.required") : undefined);
 
   const hasError = isTouched && !!effectiveError;
-  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : t("field.required");
 
 
    const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
@@ -148,7 +150,7 @@ export default function ITInput({
       }
 
       if (currencyFormat) {
-        return num.toLocaleString("es-MX", {
+        return formatNumberLocale(num, {
           minimumFractionDigits: decimalPlaces,
           maximumFractionDigits: decimalPlaces,
         });
@@ -160,7 +162,7 @@ export default function ITInput({
 
       return num.toString();
     },
-    [currencyFormat, decimalPlaces]
+    [currencyFormat, decimalPlaces, formatNumberLocale]
   );
 
   const unformatValue = useCallback(
@@ -594,6 +596,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
                         type="button"
                         className="absolute inset-y-0 right-0 flex items-center pr-3 z-10 text-secondary-400 hover:text-secondary-600 focus:outline-none"
                         onClick={() => setShowPassword(!showPassword)}
+                        aria-label={showPassword ? t("input.hidePassword") : t("input.showPassword")}
                         tabIndex={-1} // Don't allow tabbing into the eye icon
                       >
                         {showPassword ? (

package/src/components/atoms/loader/loader.tsx

@@ -2,6 +2,7 @@ import { theme } from "@/theme/theme";
 import { LoaderSize, sizeClasses } from "@/types/loader.types";
 import { LoaderProps } from "./loader.props";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Loading indicators with multiple animation types: spinner, dots, pulse,
@@ -26,6 +27,7 @@ export default function ITLoader({
   color = "primary", // Default to semantic primary
   className = "",
 }: LoaderProps) {
+  const { t } = useITTranslation();
   
   // Resolve color: Check if it's a semantic color in theme, otherwise use as-is
   const isSemantic = color in theme.colors;
@@ -51,7 +53,7 @@ export default function ITLoader({
         style={style}
       >
         <ITText as="span" className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
-          Loading...
+          {t("common.loading")}
         </ITText>
       </div>
     );

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

@@ -27,6 +27,18 @@ export interface ITSlideToggleProps {
   /** Size of the switch: "sm" | "md" | "lg". Default: "md". */
   size?: "sm" | "md" | "lg";
 
+  /**
+   * Texto visible del interruptor. Se asocia al control como nombre accesible
+   * (`aria-label`) cuando no hay un `<label>` externo que lo nombre.
+   */
+  label?: string;
+
+  /**
+   * Nombre accesible cuando la etiqueta visible vive fuera del componente.
+   * Tiene prioridad sobre `label`.
+   */
+  ariaLabel?: string;
+
   /** Additional CSS classes on the container. */
   className?: string;
 }

package/src/components/atoms/slide/slide.tsx

@@ -24,6 +24,8 @@ export default function ITSlideToggle({
   inactiveColor = "#9ca3af", // default gray-400
   disabled = false,
   size = "md",
+  label,
+  ariaLabel,
   className = "",
 }: ITSlideToggleProps) {
   // Handle internal state if not controlled
@@ -98,6 +100,7 @@ export default function ITSlideToggle({
       style={{ backgroundColor }}
       role="switch"
       aria-checked={isOn}
+      aria-label={ariaLabel ?? label}
       tabIndex={disabled ? -1 : 0}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {

package/src/components/molecules/alert/alert.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { ITAlertProps, AlertVariant } from "./alert.props";
 import { FaInfoCircle, FaCheckCircle, FaExclamationTriangle, FaTimesCircle, FaTimes } from "react-icons/fa";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 const config: Record<AlertVariant, { icon: React.ReactNode; classes: string }> = {
   info: {
@@ -39,6 +40,7 @@ export default function ITAlert({
   icon,
   className,
 }: ITAlertProps) {
+  const { t } = useITTranslation();
   const cfg = config[variant];
   return (
     <div
@@ -51,7 +53,7 @@ export default function ITAlert({
         {children && <ITText as="div" className="text-sm opacity-90">{children}</ITText>}
       </div>
       {dismissible && onDismiss && (
-        <button onClick={onDismiss} className="flex-shrink-0 opacity-60 hover:opacity-100 transition-opacity">
+        <button onClick={onDismiss} className="flex-shrink-0 opacity-60 hover:opacity-100 transition-opacity" aria-label={t("common.dismiss")}>
           <FaTimes size={12} />
         </button>
       )}

package/src/components/molecules/breadcrumbs/breadcrumbs.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { ITBreadcrumbsProps } from "./breadcrumbs.props";
 import { FaChevronRight } from "react-icons/fa";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Navigation breadcrumb trail with automatic link/button rendering and custom separator.
@@ -20,8 +21,9 @@ export default function ITBreadcrumbs({
   separator = <FaChevronRight size={10} />,
   className,
 }: ITBreadcrumbsProps) {
+  const { t } = useITTranslation();
   return (
-    <nav className={clsx("flex items-center gap-1.5 text-sm", className)} aria-label="Breadcrumb">
+    <nav className={clsx("flex items-center gap-1.5 text-sm", className)} aria-label={t("breadcrumbs.aria")}>
       {items.map((item, i) => {
         const isLast = i === items.length - 1;
         return (

package/src/components/molecules/calendar/calendar.tsx

@@ -18,12 +18,12 @@ import {
   isBefore,
   isAfter
 } from 'date-fns';
-import { es } from 'date-fns/locale';
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { ITCalendarProps, CalendarEvent } from './calendar.props';
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -74,6 +74,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
   className,
   variant = 'primary',
 }) => {
+  const { t, dateLocale } = useITTranslation();
   // Determine mode: if onChange provided, assume picker (month) unless specialized
   const mode = modeProp || (onChange ? 'month' : 'week');
   
@@ -326,7 +327,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                   e.currentTarget.style.backgroundColor = 'transparent';
                 }}
               >
-                {format(currentDate, 'MMMM', { locale: es })}
+                {format(currentDate, 'MMMM', { locale: dateLocale })}
               </button>
             )}
             <button
@@ -364,7 +365,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
             onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--it-calendar-header-hover, #f1f5f9)'; }}
             onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
           >
-            <ITText as="span">Hoy</ITText>
+            <ITText as="span">{t("calendar.today")}</ITText>
           </button>
           <button 
             onClick={handleNext} 
@@ -437,7 +438,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                               onClick={() => pickMonth(monthIndex)}
                           >
                               <ITText as="span" className="capitalize">
-                                  {format(new Date(2000, monthIndex, 1), 'MMM', { locale: es })}
+                                  {format(new Date(2000, monthIndex, 1), 'MMM', { locale: dateLocale })}
                               </ITText>
                           </button>
                       );
@@ -447,7 +448,9 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
            <div className="p-4">
              {/* Weekday Headers */}
              <div className="grid grid-cols-7 mb-2">
-                {['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'].map(day => (
+                {Array.from({ length: 7 }, (_, i) =>
+                  format(addDays(startOfWeek(currentDate, { weekStartsOn: 1 }), i), 'EEE', { locale: dateLocale })
+                ).map(day => (
                   <ITText key={day} as="div" className="text-center text-xs font-semibold text-secondary-400 uppercase py-1">
                     {day}
                   </ITText>
@@ -554,7 +557,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                         opacity: isToday(day) ? 1 : 0.6,
                       }}
                     >
-                      {format(day, 'EEE', { locale: es })}
+                      {format(day, 'EEE', { locale: dateLocale })}
                     </ITText>
                     <ITText
                       as="span"

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

@@ -3,6 +3,7 @@ import { ITCardProps } from "./card.props";
 import { useState } from "react";
 import ITText from "@/components/atoms/text/text";
 import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states.
@@ -20,7 +21,7 @@ import { useITFlatAppearance } from "@/theme/theme-context";
 export default function ITCard({
   title,
   image,
-  alt = "Card Image",
+  alt,
   children,
   actions,
   className,
@@ -30,8 +31,10 @@ export default function ITCard({
   actionClassName,
   onClick,
 }: ITCardProps) {
+  const { t } = useITTranslation();
   const [isHovered, setIsHovered] = useState(false);
   const flat = useITFlatAppearance();
+  const resolvedAlt = alt ?? t("card.imageAlt");
 
   const containerStyle: React.CSSProperties = {
     backgroundColor: "var(--it-card-bg, #ffffff)",
@@ -76,7 +79,7 @@ export default function ITCard({
       {image && (
         <img
           src={image}
-          alt={alt}
+          alt={resolvedAlt}
           className={clsx("w-full h-48 object-cover", imageClassName)}
         />
       )}