@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/components/ui/mobile-skeleton-loading-demo.js

@@ -8,7 +8,7 @@ import { useLoadingPerformance } from '../../hooks/use-loading-performance'
 import { useBatteryConsciousLoading } from '../../hooks/use-battery-conscious-loading'
 import { useLoadingAccessibility } from '../../hooks/use-loading-accessibility'
 
-export const MobileSkeletonLoadingDemo= () => {
+export const MobileSkeletonLoadingDemo: React.FC = () => {
   const [activeTab, setActiveTab] = useState('overview')
   const [isLoading, setIsLoading] = useState(false)
   const [loadingProgress, setLoadingProgress] = useState(0)
@@ -17,83 +17,88 @@ export const MobileSkeletonLoadingDemo= () => {
   // Initialize all hooks
   const mobileSkeleton = useMobileSkeleton(
     {
-      enableMobileOptimization,
-      enablePerformanceOptimization,
-      enableBatteryOptimization,
-      enableAccessibilitySupport,
-      enableTouchOptimization},
+      enableMobileOptimization: true,
+      enablePerformanceOptimization: true,
+      enableBatteryOptimization: true,
+      enableAccessibilitySupport: true,
+      enableTouchOptimization: true
+    },
     {
-      onSkeletonCreated) => console.log('Skeleton created, variant),
-      onLoadingStateChanged) => console.log('Loading state changed, state),
-      onPerformanceOptimized) => console.log('Performance optimized, optimization),
-      onBatteryOptimized) => console.log('Battery optimized, strategy),
-      onAccessibilityEnhanced) => console.log('Accessibility enhanced, feature)
+      onSkeletonCreated: (variant) => console.log('Skeleton created:', variant),
+      onLoadingStateChanged: (state) => console.log('Loading state changed:', state),
+      onPerformanceOptimized: (optimization) => console.log('Performance optimized:', optimization),
+      onBatteryOptimized: (strategy) => console.log('Battery optimized:', strategy),
+      onAccessibilityEnhanced: (feature) => console.log('Accessibility enhanced:', feature)
     }
   )
 
   const deviceLoadingStates = useDeviceLoadingStates(
     {
-      enableMobileStates,
-      enableTabletStates,
-      enableDesktopStates,
-      enableAdaptiveBehavior,
-      enableOrientationSupport,
-      enablePerformanceAdaptation},
+      enableMobileStates: true,
+      enableTabletStates: true,
+      enableDesktopStates: true,
+      enableAdaptiveBehavior: true,
+      enableOrientationSupport: true,
+      enablePerformanceAdaptation: true
+    },
     {
-      onLoadingStateChanged) => console.log('Device loading state changed, state),
-      onDeviceStateChanged) => console.log('Device state changed, deviceState),
-      onAdaptiveBehaviorEnabled) => console.log('Adaptive behavior enabled, behavior),
-      onPerformanceAdapted) => console.log('Performance adapted, adaptation)
+      onLoadingStateChanged: (state) => console.log('Device loading state changed:', state),
+      onDeviceStateChanged: (deviceState) => console.log('Device state changed:', deviceState),
+      onAdaptiveBehaviorEnabled: (behavior) => console.log('Adaptive behavior enabled:', behavior),
+      onPerformanceAdapted: (adaptation) => console.log('Performance adapted:', adaptation)
     }
   )
 
   const loadingPerformance = useLoadingPerformance(
     {
-      enableAnimationOptimization,
-      enableMemoryManagement,
-      enableBatteryOptimization,
-      enablePerformanceMonitoring,
-      enableAutoOptimization},
+      enableAnimationOptimization: true,
+      enableMemoryManagement: true,
+      enableBatteryOptimization: true,
+      enablePerformanceMonitoring: true,
+      enableAutoOptimization: true
+    },
     {
-      onPerformanceOptimized) => console.log('Loading performance optimized, strategy),
-      onMemoryOptimized) => console.log('Memory optimized, optimization),
-      onBatteryOptimized) => console.log('Battery optimized, strategy),
-      onAnimationOptimized) => console.log('Animation optimized, optimization)
+      onPerformanceOptimized: (strategy) => console.log('Loading performance optimized:', strategy),
+      onMemoryOptimized: (optimization) => console.log('Memory optimized:', optimization),
+      onBatteryOptimized: (strategy) => console.log('Battery optimized:', strategy),
+      onAnimationOptimized: (optimization) => console.log('Animation optimized:', optimization)
     }
   )
 
   const batteryConsciousLoading = useBatteryConsciousLoading(
     {
-      enableBatteryMonitoring,
-      enableLoadingOptimization,
-      enablePerformanceAdjustment,
-      enableUserNotification,
-      enableAutoOptimization},
+      enableBatteryMonitoring: true,
+      enableLoadingOptimization: true,
+      enablePerformanceAdjustment: true,
+      enableUserNotification: true,
+      enableAutoOptimization: true
+    },
     {
-      onBatteryLevelChanged) => console.log('Battery level changed, batteryState),
-      onLoadingOptimized) => console.log('Loading optimized for battery, optimization),
-      onPerformanceAdjusted) => console.log('Performance adjusted, adjustment),
-      onUserNotified) => console.log('User notified, notification)
+      onBatteryLevelChanged: (batteryState) => console.log('Battery level changed:', batteryState),
+      onLoadingOptimized: (optimization) => console.log('Loading optimized for battery:', optimization),
+      onPerformanceAdjusted: (adjustment) => console.log('Performance adjusted:', adjustment),
+      onUserNotified: (notification) => console.log('User notified:', notification)
     }
   )
 
   const loadingAccessibility = useLoadingAccessibility(
     {
-      enableScreenReaderSupport,
-      enableReducedMotionSupport,
-      enableFocusManagement,
-      enableAriaSupport,
-      enableVoiceControl,
-      enableHighContrast,
-      enableKeyboardNavigation},
+      enableScreenReaderSupport: true,
+      enableReducedMotionSupport: true,
+      enableFocusManagement: true,
+      enableAriaSupport: true,
+      enableVoiceControl: true,
+      enableHighContrast: true,
+      enableKeyboardNavigation: true
+    },
     {
-      onScreenReaderEnhanced) => console.log('Screen reader enhanced, feature),
-      onReducedMotionApplied) => console.log('Reduced motion applied, feature),
-      onFocusManaged) => console.log('Focus managed, feature),
-      onAriaEnhanced) => console.log('ARIA enhanced, feature),
-      onVoiceControlEnabled) => console.log('Voice control enabled, feature),
-      onHighContrastApplied) => console.log('High contrast applied, feature),
-      onKeyboardNavigationEnabled) => console.log('Keyboard navigation enabled, feature)
+      onScreenReaderEnhanced: (feature) => console.log('Screen reader enhanced:', feature),
+      onReducedMotionApplied: (feature) => console.log('Reduced motion applied:', feature),
+      onFocusManaged: (feature) => console.log('Focus managed:', feature),
+      onAriaEnhanced: (feature) => console.log('ARIA enhanced:', feature),
+      onVoiceControlEnabled: (feature) => console.log('Voice control enabled:', feature),
+      onHighContrastApplied: (feature) => console.log('High contrast applied:', feature),
+      onKeyboardNavigationEnabled: (feature) => console.log('Keyboard navigation enabled:', feature)
     }
   )
 
@@ -128,7 +133,11 @@ export const MobileSkeletonLoadingDemo= () => {
   // Get device-specific loading class
   const getLoadingStateClass = () => {
     switch (deviceLoadingStates.deviceState.deviceType) {
-      case 'mobile'}
+      case 'mobile': return 'loading-state-mobile'
+      case 'tablet': return 'loading-state-tablet'
+      case 'desktop': return 'loading-state-desktop'
+      default: return 'loading-state-mobile'
+    }
   }
 
   // Get battery-conscious class
@@ -172,35 +181,35 @@ export const MobileSkeletonLoadingDemo= () => {
         {/* Navigation */}
         <div className="flex flex-wrap gap-2 mb-6">
           <Button 
-            variant={activeTab === 'overview' ? 'default' }
+            variant={activeTab === 'overview' ? 'default' : 'outline'}
             onClick={() => setActiveTab('overview')}
             size="sm"
           >
             Overview
           </Button>
           <Button 
-            variant={activeTab === 'skeletons' ? 'default' }
+            variant={activeTab === 'skeletons' ? 'default' : 'outline'}
             onClick={() => setActiveTab('skeletons')}
             size="sm"
           >
             Skeletons
           </Button>
           <Button 
-            variant={activeTab === 'loading' ? 'default' }
+            variant={activeTab === 'loading' ? 'default' : 'outline'}
             onClick={() => setActiveTab('loading')}
             size="sm"
           >
             Loading States
           </Button>
           <Button 
-            variant={activeTab === 'performance' ? 'default' }
+            variant={activeTab === 'performance' ? 'default' : 'outline'}
             onClick={() => setActiveTab('performance')}
             size="sm"
           >
             Performance
           </Button>
           <Button 
-            variant={activeTab === 'accessibility' ? 'default' }
+            variant={activeTab === 'accessibility' ? 'default' : 'outline'}
             onClick={() => setActiveTab('accessibility')}
             size="sm"
           >
@@ -211,14 +220,15 @@ export const MobileSkeletonLoadingDemo= () => {
         {/* Overview Section */}
         {activeTab === 'overview' && (
           <div className="space-y-6">
-            <div className="grid grid-cols-1 md}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {/* Device State */}
               <div className="p-4 bg-blue-50 rounded-lg">
                 <h3 className="font-semibold text-blue-900 mb-2">Device State</h3>
                 <div className="space-y-1 text-sm">
-                  <p><span className="font-medium">Type}</p>
-                  <p><span className="font-medium">Orientation}</p>
-                  <p><span className="font-medium">Screen}</p>
-                  <p><span className="font-medium">Strategy]?.type || 'skeleton'}</p>
+                  <p><span className="font-medium">Type:</span> {deviceLoadingStates.deviceState.deviceType}</p>
+                  <p><span className="font-medium">Orientation:</span> {deviceLoadingStates.deviceState.orientation}</p>
+                  <p><span className="font-medium">Screen:</span> {deviceLoadingStates.deviceState.screenSize}</p>
+                  <p><span className="font-medium">Strategy:</span> {deviceLoadingStates.deviceState.loadingStates[0]?.type || 'skeleton'}</p>
                 </div>
               </div>
 
@@ -226,10 +236,10 @@ export const MobileSkeletonLoadingDemo= () => {
               <div className="p-4 bg-yellow-50 rounded-lg">
                 <h3 className="font-semibold text-yellow-900 mb-2">Battery Status</h3>
                 <div className="space-y-1 text-sm">
-                  <p><span className="font-medium">Level)}%</p>
-                  <p><span className="font-medium">Status}</p>
-                  <p><span className="font-medium">Mode}</p>
-                  <p><span className="font-medium">Savings}%</p>
+                  <p><span className="font-medium">Level:</span> {batteryConsciousLoading.getBatteryPercentage()}%</p>
+                  <p><span className="font-medium">Status:</span> {batteryConsciousLoading.batteryState.status}</p>
+                  <p><span className="font-medium">Mode:</span> {batteryConsciousLoading.performanceMode}</p>
+                  <p><span className="font-medium">Savings:</span> {batteryConsciousLoading.batterySavings}%</p>
                 </div>
               </div>
 
@@ -237,10 +247,10 @@ export const MobileSkeletonLoadingDemo= () => {
               <div className="p-4 bg-green-50 rounded-lg">
                 <h3 className="font-semibold text-green-900 mb-2">Performance</h3>
                 <div className="space-y-1 text-sm">
-                  <p><span className="font-medium">FPS}</p>
-                  <p><span className="font-medium">Render)}ms</p>
-                  <p><span className="font-medium">Memory}MB</p>
-                  <p><span className="font-medium">Health}</p>
+                  <p><span className="font-medium">FPS:</span> {loadingPerformance.performanceMetrics.frameRate}</p>
+                  <p><span className="font-medium">Render:</span> {Math.round(loadingPerformance.performanceMetrics.renderTime)}ms</p>
+                  <p><span className="font-medium">Memory:</span> {loadingPerformance.performanceMetrics.memoryUsage}MB</p>
+                  <p><span className="font-medium">Health:</span> {loadingPerformance.performanceHealth}</p>
                 </div>
               </div>
 
@@ -248,10 +258,10 @@ export const MobileSkeletonLoadingDemo= () => {
               <div className="p-4 bg-purple-50 rounded-lg">
                 <h3 className="font-semibold text-purple-900 mb-2">Accessibility</h3>
                 <div className="space-y-1 text-sm">
-                  <p><span className="font-medium">Score}%</p>
-                  <p><span className="font-medium">Features}</p>
-                  <p><span className="font-medium">Active}</p>
-                  <p><span className="font-medium">Enhancing}</p>
+                  <p><span className="font-medium">Score:</span> {loadingAccessibility.accessibilityScore}%</p>
+                  <p><span className="font-medium">Features:</span> {loadingAccessibility.accessibilityFeatures.length}</p>
+                  <p><span className="font-medium">Active:</span> {loadingAccessibility.activeFeatures.length}</p>
+                  <p><span className="font-medium">Enhancing:</span> {loadingAccessibility.isEnhancing ? 'Yes' : 'No'}</p>
                 </div>
               </div>
             </div>
@@ -259,10 +269,10 @@ export const MobileSkeletonLoadingDemo= () => {
             {/* Controls */}
             <div className="flex flex-wrap gap-4 justify-center">
               <Button onClick={startLoading} disabled={isLoading}>
-                {isLoading ? 'Loading...' }
+                {isLoading ? 'Loading...' : 'Start Loading Simulation'}
               </Button>
               <Button onClick={toggleSkeletons} variant="outline">
-                {showSkeletons ? 'Hide' } Skeletons
+                {showSkeletons ? 'Hide' : 'Show'} Skeletons
               </Button>
               <Button onClick={loadingPerformance.autoOptimize} variant="outline">
                 Auto-Optimize Performance
@@ -316,13 +326,14 @@ export const MobileSkeletonLoadingDemo= () => {
             </div>
 
             {/* Skeleton Variants */}
-            <div className="grid grid-cols-1 md="p-4 bg-gray-50 rounded-lg">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="p-4 bg-gray-50 rounded-lg">
                 <h4 className="font-semibold mb-2">Available Skeleton Variants</h4>
                 <div className="space-y-2 text-sm">
                   {mobileSkeleton.skeletonVariants.map(variant => (
                     <div key={variant.id} className="flex justify-between items-center">
                       <span>{variant.name}</span>
-                      <Badge variant={variant.mobileOptimized ? "default" }>
+                      <Badge variant={variant.mobileOptimized ? "default" : "secondary"}>
                         {variant.animation}
                       </Badge>
                     </div>
@@ -333,10 +344,10 @@ export const MobileSkeletonLoadingDemo= () => {
               <div className="p-4 bg-gray-50 rounded-lg">
                 <h4 className="font-semibold mb-2">Device Optimizations</h4>
                 <div className="space-y-2 text-sm">
-                  <p><span className="font-medium">Mobile Optimized) ? 'Yes' }</p>
-                  <p><span className="font-medium">Loading Strategy)}</p>
-                  <p><span className="font-medium">Animation Intensity)}</p>
-                  <p><span className="font-medium">Touch Friendly=> v.touchFriendly) ? 'Yes' }</p>
+                  <p><span className="font-medium">Mobile Optimized:</span> {mobileSkeleton.isMobileOptimized() ? 'Yes' : 'No'}</p>
+                  <p><span className="font-medium">Loading Strategy:</span> {mobileSkeleton.getLoadingStrategy()}</p>
+                  <p><span className="font-medium">Animation Intensity:</span> {mobileSkeleton.getAnimationIntensity()}</p>
+                  <p><span className="font-medium">Touch Friendly:</span> {mobileSkeleton.skeletonVariants.some(v => v.touchFriendly) ? 'Yes' : 'No'}</p>
                 </div>
               </div>
             </div>
@@ -359,8 +370,8 @@ export const MobileSkeletonLoadingDemo= () => {
                 <div className="loading-progress">
                   <div 
                     className="loading-progress-bar" 
-                    style={{ width}%` }}
-                    aria-label={`Loading progress}%`}
+                    style={{ width: `${loadingProgress}%` }}
+                    aria-label={`Loading progress: ${loadingProgress}%`}
                   ></div>
                 </div>
                 <p className="text-center text-sm text-gray-600">
@@ -370,14 +381,15 @@ export const MobileSkeletonLoadingDemo= () => {
             )}
 
             {/* Device Loading States */}
-            <div className="grid grid-cols-1 md="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-4">
                 <h4 className="font-semibold">Current Device State</h4>
                 <div className="p-4 bg-blue-50 rounded-lg space-y-2">
-                  <p><span className="font-medium">Device}</p>
-                  <p><span className="font-medium">Orientation}</p>
-                  <p><span className="font-medium">Performance}</p>
-                  <p><span className="font-medium">Battery}</p>
-                  <p><span className="font-medium">Adaptive}</p>
+                  <p><span className="font-medium">Device:</span> {deviceLoadingStates.deviceState.deviceType}</p>
+                  <p><span className="font-medium">Orientation:</span> {deviceLoadingStates.deviceState.orientation}</p>
+                  <p><span className="font-medium">Performance:</span> {deviceLoadingStates.deviceState.performanceLevel}</p>
+                  <p><span className="font-medium">Battery:</span> {deviceLoadingStates.deviceState.batteryLevel}</p>
+                  <p><span className="font-medium">Adaptive:</span> {deviceLoadingStates.deviceState.adaptiveBehavior ? 'Yes' : 'No'}</p>
                 </div>
               </div>
 
@@ -391,9 +403,9 @@ export const MobileSkeletonLoadingDemo= () => {
                         <Badge variant="outline">{state.type}</Badge>
                       </div>
                       <div className="text-sm text-gray-600">
-                        <p>Duration}ms</p>
-                        <p>Complexity}</p>
-                        <p>Performance}</p>
+                        <p>Duration: {state.duration}ms</p>
+                        <p>Complexity: {state.complexity}</p>
+                        <p>Performance: {state.performance}</p>
                       </div>
                     </div>
                   ))}
@@ -427,7 +439,8 @@ export const MobileSkeletonLoadingDemo= () => {
             </div>
 
             {/* Performance Metrics */}
-            <div className="grid grid-cols-2 md="metric-item">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="metric-item">
                 <div className="metric-value">{loadingPerformance.performanceMetrics.frameRate}</div>
                 <div className="metric-label">FPS</div>
               </div>
@@ -447,7 +460,7 @@ export const MobileSkeletonLoadingDemo= () => {
 
             {/* Performance Health */}
             <div className="p-4 bg-gray-50 rounded-lg">
-              <h4 className="font-semibold mb-3">Performance Health}</h4>
+              <h4 className="font-semibold mb-3">Performance Health: {loadingPerformance.performanceHealth}</h4>
               <div className="space-y-2">
                 {loadingPerformance.getOptimizationRecommendations().map((recommendation, index) => (
                   <p key={index} className="text-sm text-gray-600">• {recommendation}</p>
@@ -458,11 +471,12 @@ export const MobileSkeletonLoadingDemo= () => {
             {/* Optimization Strategies */}
             <div className="space-y-4">
               <h4 className="font-semibold">Applied Optimizations</h4>
-              <div className="grid grid-cols-1 md=> (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {loadingPerformance.optimizationStrategies.map(strategy => (
                   <div key={strategy.id} className="p-3 bg-green-50 rounded-lg">
                     <div className="flex justify-between items-center mb-1">
                       <span className="font-medium">{strategy.name}</span>
-                      <Badge variant={strategy.impact === 'high' ? 'default' }>
+                      <Badge variant={strategy.impact === 'high' ? 'default' : 'secondary'}>
                         {strategy.impact}
                       </Badge>
                     </div>
@@ -509,20 +523,21 @@ export const MobileSkeletonLoadingDemo= () => {
             </div>
 
             {/* Accessibility State */}
-            <div className="grid grid-cols-2 md="metric-item">
-                <div className="metric-value">{loadingAccessibility.accessibilityState.screenReaderActive ? '✓' }</div>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="metric-item">
+                <div className="metric-value">{loadingAccessibility.accessibilityState.screenReaderActive ? '✓' : '✗'}</div>
                 <div className="metric-label">Screen Reader</div>
               </div>
               <div className="metric-item">
-                <div className="metric-value">{loadingAccessibility.accessibilityState.reducedMotionEnabled ? '✓' }</div>
+                <div className="metric-value">{loadingAccessibility.accessibilityState.reducedMotionEnabled ? '✓' : '✗'}</div>
                 <div className="metric-label">Reduced Motion</div>
               </div>
               <div className="metric-item">
-                <div className="metric-value">{loadingAccessibility.accessibilityState.ariaLabelsActive ? '✓' }</div>
+                <div className="metric-value">{loadingAccessibility.accessibilityState.ariaLabelsActive ? '✓' : '✗'}</div>
                 <div className="metric-label">ARIA Labels</div>
               </div>
               <div className="metric-item">
-                <div className="metric-value">{loadingAccessibility.accessibilityState.keyboardNavigationActive ? '✓' }</div>
+                <div className="metric-value">{loadingAccessibility.accessibilityState.keyboardNavigationActive ? '✓' : '✗'}</div>
                 <div className="metric-label">Keyboard Nav</div>
               </div>
             </div>
@@ -530,11 +545,12 @@ export const MobileSkeletonLoadingDemo= () => {
             {/* Accessibility Features */}
             <div className="space-y-4">
               <h4 className="font-semibold">Active Accessibility Features</h4>
-              <div className="grid grid-cols-1 md=> (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {loadingAccessibility.accessibilityFeatures.map(feature => (
                   <div key={feature.id} className="p-3 bg-purple-50 rounded-lg">
                     <div className="flex justify-between items-center mb-1">
                       <span className="font-medium">{feature.name}</span>
-                      <Badge variant={feature.impact === 'high' ? 'default' }>
+                      <Badge variant={feature.impact === 'high' ? 'default' : 'secondary'}>
                         {feature.impact}
                       </Badge>
                     </div>
@@ -574,31 +590,32 @@ export const MobileSkeletonLoadingDemo= () => {
       </Card>
 
       {/* Status Indicators */}
-      <div className="grid grid-cols-1 md={`loading-status ${getBatteryClass()}`}>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className={`loading-status ${getBatteryClass()}`}>
           <div className="w-3 h-3 bg-current rounded-full"></div>
           <span className="text-sm font-medium">
-            Battery)}
+            Battery: {batteryConsciousLoading.getBatteryStatus()}
           </span>
         </div>
         
         <div className={`loading-status ${getPerformanceClass()}`}>
           <div className="w-3 h-3 bg-current rounded-full"></div>
           <span className="text-sm font-medium">
-            Performance}
+            Performance: {loadingPerformance.performanceHealth}
           </span>
         </div>
         
         <div className={`loading-status ${getAccessibilityClass()}`}>
           <div className="w-3 h-3 bg-current rounded-full"></div>
           <span className="text-sm font-medium">
-            Accessibility}%
+            Accessibility: {loadingAccessibility.accessibilityScore}%
           </span>
         </div>
         
         <div className="loading-status">
           <div className="w-3 h-3 bg-current rounded-full"></div>
           <span className="text-sm font-medium">
-            Device}
+            Device: {deviceLoadingStates.deviceState.deviceType}
           </span>
         </div>
       </div>

package/dist/components/ui/navigation/breadcrumb.esm.js

@@ -8,7 +8,7 @@ import { useState, useMemo } from 'react';
 import { ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
 import { BreadcrumbProps, BreadcrumbItem } from './types';
 
-export const Breadcrumb= ({
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   items,
   separator = <ChevronRightIcon className="w-4 h-4" />,
   maxItems = 5,
@@ -18,7 +18,7 @@ export const Breadcrumb= ({
   truncate = true,
   responsive = true,
   className = '',
-  'data-testid'= 'breadcrumb',
+  'data-testid': testId = 'breadcrumb',
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -38,12 +38,12 @@ export const Breadcrumb= ({
     
     return [
       ...firstItems,
-      { id, label, disabled},
+      { id: 'ellipsis', label: '...', disabled: true },
       ...lastItems,
     ];
   }, [items, maxItems, truncate, isExpanded]);
 
-  const handleItemClick = (item) => {
+  const handleItemClick = (item: BreadcrumbItem) => {
     if (item.disabled || item.id === 'ellipsis') return;
     
     if (onItemClick) {
@@ -59,7 +59,7 @@ export const Breadcrumb= ({
     return 'breadcrumb breadcrumb--stan-design';
   };
 
-  const getItemClasses = (item, isLast) => {
+  const getItemClasses = (item: BreadcrumbItem, isLast: boolean) => {
     const baseClasses = 'breadcrumb__item-button';
     
     if (item.disabled) {
@@ -86,8 +86,8 @@ export const Breadcrumb= ({
       {showHome && (
         <>
           <button
-            onClick={() => handleItemClick({ id, label, href})}
-            className={`breadcrumb__home-button ${getItemClasses({ id, label} as BreadcrumbItem, false)}`}
+            onClick={() => handleItemClick({ id: 'home', label: 'Home', href: '/' })}
+            className={`breadcrumb__home-button ${getItemClasses({ id: 'home', label: 'Home' } as BreadcrumbItem, false)}`}
             aria-label="Go to home page"
           >
             <span className="breadcrumb__icon">{homeIcon}</span>
@@ -117,20 +117,23 @@ export const Breadcrumb= ({
                 <button
                   onClick={handleExpandToggle}
                   className="breadcrumb__ellipsis"
-                  aria-label={isExpanded ? 'Collapse breadcrumbs' }
+                  aria-label={isExpanded ? 'Collapse breadcrumbs' : 'Expand breadcrumbs'}
                 >
                   {item.label}
                 </button>
-              ) ={() => handleItemClick(item)}
+              ) : (
+                <button
+                  onClick={() => handleItemClick(item)}
                   className={getItemClasses(item, isLast)}
                   disabled={item.disabled}
-                  aria-current={isLast ? 'page' }
-                  aria-label={item.href ? `Navigate to ${item.label}` }
+                  aria-current={isLast ? 'page' : undefined}
+                  aria-label={item.href ? `Navigate to ${item.label}` : item.label}
                 >
                   {item.icon && <span className="breadcrumb__icon">{item.icon}</span>}
                   {responsive && window.innerWidth < 640 ? (
                     <span className="breadcrumb__item-label">{item.label}</span>
-                  ) ="breadcrumb__item-label">{item.label}</span>
+                  ) : (
+                    <span className="breadcrumb__item-label">{item.label}</span>
                   )}
                 </button>
               )}
@@ -143,9 +146,9 @@ export const Breadcrumb= ({
         <button
           onClick={handleExpandToggle}
           className={`breadcrumb__expand-toggle breadcrumb__expand-toggle--semantic`}
-          aria-label={isExpanded ? 'Show fewer breadcrumbs' }
+          aria-label={isExpanded ? 'Show fewer breadcrumbs' : 'Show all breadcrumbs'}
         >
-          {isExpanded ? 'Show Less' }
+          {isExpanded ? 'Show Less' : 'Show All'}
         </button>
       )}
     </nav>