@shohojdhara/atomix 0.4.7 → 0.4.9

package/src/components/AtomixGlass/stories/Phase1-Test.stories.tsx

@@ -0,0 +1,95 @@
+/**
+ * Quick Test Story for Phase 1 Animations
+ * 
+ * This is a minimal test to verify the animation pipeline is working
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { AtomixGlass } from '../AtomixGlass';
+
+const meta = {
+  title: 'Testing/Phase 1 Animation Quick Test',
+  component: AtomixGlass,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    withTimeAnimation: { control: 'boolean' },
+    animationSpeed: { control: { type: 'range', min: 0.1, max: 5.0, step: 0.1 } },
+    distortionOctaves: { control: { type: 'range', min: 1, max: 8, step: 1 } },
+    distortionQuality: { 
+      control: 'select', 
+      options: ['low', 'medium', 'high', 'ultra'] 
+    },
+  },
+} satisfies Meta<typeof AtomixGlass>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default test with animations enabled
+export const Animated: Story = {
+  args: {
+    children: (
+      <div style={{ padding: '40px', color: 'white', textAlign: 'center' }}>
+        <h2>Phase 1 Animation Test</h2>
+        <p>If you see flowing liquid glass effects, it's working!</p>
+      </div>
+    ),
+    mode: 'shader',
+    withTimeAnimation: true,
+    animationSpeed: 1.0,
+    distortionOctaves: 4,
+    distortionQuality: 'high',
+    displacementScale: 30,
+    blurAmount: 8,
+    saturation: 180,
+    aberrationIntensity: 3,
+    // Dark background to make effects visible
+    style: {
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    },
+  },
+};
+
+// Comparison: Same config without animations
+export const Static: Story = {
+  args: {
+    ...Animated.args,
+    withTimeAnimation: false,
+  },
+};
+
+// Speed comparison
+export const FastAnimation: Story = {
+  args: {
+    ...Animated.args,
+    animationSpeed: 3.0,
+  },
+};
+
+export const SlowAnimation: Story = {
+  args: {
+    ...Animated.args,
+    animationSpeed: 0.3,
+  },
+};
+
+// High complexity FBM
+export const HighDetailFBM: Story = {
+  args: {
+    ...Animated.args,
+    distortionOctaves: 7,
+    distortionQuality: 'ultra',
+  },
+};
+
+// Mobile optimized (low quality)
+export const MobileOptimized: Story = {
+  args: {
+    ...Animated.args,
+    distortionOctaves: 2,
+    distortionQuality: 'low',
+  },
+};

package/src/components/AtomixGlass/stories/Playground.stories.tsx

@@ -723,7 +723,7 @@ export const Playground: Story = {
                         </div>
                         <div>
                           <div
-                            className="u-font-bold u-fs-sm"
+                            className="u-font-bold u-text-sm"
                             style={{
                               background:
                                 'linear-gradient(90deg, #fff 0%, rgba(122,255,215,0.9) 100%)',
@@ -735,7 +735,7 @@ export const Playground: Story = {
                           >
                             AtomixGlass Playground
                           </div>
-                          <div className="u-fs-xs u-opacity-60 u-mt-1">Live parameter editor</div>
+                          <div className="u-text-xs u-opacity-60 u-mt-1">Live parameter editor</div>
                         </div>
                       </div>
                     </div>
@@ -750,11 +750,11 @@ export const Playground: Story = {
                     }}
                   >
                     <div className="u-flex u-justify-between u-items-center u-mb-2">
-                      <span className="u-text-white u-font-semibold u-fs-xs">
+                      <span className="u-text-white u-font-semibold u-text-xs">
                         Performance Score
                       </span>
                       <span
-                        className="u-font-bold u-fs-sm"
+                        className="u-font-bold u-text-sm"
                         style={{ color: getPerformanceColor() }}
                       >
                         {Math.round(performanceScore)}/100
@@ -792,7 +792,7 @@ export const Playground: Story = {
                   {/* Quick Presets */}
                   <div className="u-mb-4">
                     <label
-                      className="u-block u-mb-2 u-text-white u-font-semibold u-fs-xs"
+                      className="u-block u-mb-2 u-text-white u-font-semibold u-text-xs"
                       style={{ letterSpacing: '0.5px' }}
                     >
                       ⚡ Quick Presets
@@ -855,7 +855,7 @@ export const Playground: Story = {
                       <button
                         key={tab}
                         onClick={() => setControlTab(tab)}
-                        className="u-flex-grow-1 u-py-2 u-fs-xs u-font-bold u-rounded-pill u-cursor-pointer"
+                        className="u-flex-grow-1 u-py-2 u-text-xs u-font-bold u-rounded-pill u-cursor-pointer"
                         style={{
                           background: controlTab === tab ? 'rgba(255,255,255,0.1)' : 'transparent',
                           color: controlTab === tab ? '#fff' : 'rgba(255,255,255,0.5)',
@@ -885,7 +885,7 @@ export const Playground: Story = {
                             }}
                           />
                           <span
-                            className="u-fs-xs u-font-bold u-opacity-60"
+                            className="u-text-xs u-font-bold u-opacity-60"
                             style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
                           >
                             Optics
@@ -918,11 +918,11 @@ export const Playground: Story = {
                           return (
                             <div key={key} className="u-mb-4">
                               <div className="u-flex u-justify-between u-items-baseline u-mb-1">
-                                <label className="u-fs-xs u-font-medium u-opacity-80">
+                                <label className="u-text-xs u-font-medium u-opacity-80">
                                   {label}
                                 </label>
                                 <span
-                                  className="u-fs-xs u-font-bold u-px-2 u-py-1 u-rounded"
+                                  className="u-text-xs u-font-bold u-px-2 u-py-1 u-rounded"
                                   style={{
                                     background: 'rgba(122,255,215,0.12)',
                                     color: '#7AFFD7',
@@ -982,7 +982,7 @@ export const Playground: Story = {
                             }}
                           />
                           <span
-                            className="u-fs-xs u-font-bold u-opacity-60"
+                            className="u-text-xs u-font-bold u-opacity-60"
                             style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
                           >
                             Physics
@@ -998,11 +998,11 @@ export const Playground: Story = {
                           return (
                             <div key={key} className="u-mb-4">
                               <div className="u-flex u-justify-between u-items-baseline u-mb-1">
-                                <label className="u-fs-xs u-font-medium u-opacity-80">
+                                <label className="u-text-xs u-font-medium u-opacity-80">
                                   {label}
                                 </label>
                                 <span
-                                  className="u-fs-xs u-font-bold u-px-2 u-py-1 u-rounded"
+                                  className="u-text-xs u-font-bold u-px-2 u-py-1 u-rounded"
                                   style={{
                                     background: 'rgba(167,139,250,0.12)',
                                     color: '#a78bfa',
@@ -1060,7 +1060,7 @@ export const Playground: Story = {
                             }}
                           />
                           <span
-                            className="u-fs-xs u-font-bold u-opacity-60"
+                            className="u-text-xs u-font-bold u-opacity-60"
                             style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
                           >
                             Flags
@@ -1110,7 +1110,7 @@ export const Playground: Story = {
                                   }}
                                 />
                                 <span
-                                  className="u-fs-xs u-font-medium"
+                                  className="u-text-xs u-font-medium"
                                   style={{ color: isOn ? '#7AFFD7' : 'rgba(255,255,255,0.6)' }}
                                 >
                                   {label}
@@ -1136,7 +1136,7 @@ export const Playground: Story = {
                         }}
                       />
                       <span
-                        className="u-fs-xs u-font-bold u-opacity-60"
+                        className="u-text-xs u-font-bold u-opacity-60"
                         style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
                       >
                         Glass Mode
@@ -1150,7 +1150,7 @@ export const Playground: Story = {
                         <button
                           key={mode}
                           onClick={() => setSelectedMode(mode)}
-                          className="u-py-2 u-rounded u-text-center u-fs-xs u-font-bold"
+                          className="u-py-2 u-rounded u-text-center u-text-xs u-font-bold"
                           style={{
                             background:
                               selectedMode === mode
@@ -1189,7 +1189,7 @@ export const Playground: Story = {
                           }}
                         />
                         <span
-                          className="u-fs-xs u-font-bold u-opacity-60"
+                          className="u-text-xs u-font-bold u-opacity-60"
                           style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
                         >
                           Shader Variant
@@ -1200,7 +1200,7 @@ export const Playground: Story = {
                           <button
                             key={opt.value}
                             onClick={() => setSelectedShader(opt.value as any)}
-                            className="u-py-2 u-px-3 u-rounded u-text-start u-fs-xs u-font-medium"
+                            className="u-py-2 u-px-3 u-rounded u-text-start u-text-xs u-font-medium"
                             style={{
                               background:
                                 selectedShader === opt.value
@@ -1228,7 +1228,7 @@ export const Playground: Story = {
                   <div className="u-mb-4">
                     {/* Header row: label + nav controls */}
                     <div className="u-flex u-items-center u-justify-between u-mb-2">
-                      <label className="u-block u-text-white u-font-semibold u-fs-sm">
+                      <label className="u-block u-text-white u-font-semibold u-text-sm">
                         🌄 Background
                       </label>
                       <div className="u-flex u-items-center u-gap-2">
@@ -1264,7 +1264,7 @@ export const Playground: Story = {
                           ‹
                         </button>
                         <span
-                          className="u-fs-xs u-opacity-60"
+                          className="u-text-xs u-opacity-60"
                           style={{
                             minWidth: '36px',
                             textAlign: 'center',
@@ -1454,17 +1454,17 @@ export const Playground: Story = {
                           flexShrink: 0,
                         }}
                       />
-                      <span className="u-fs-xs u-opacity-70" style={{ fontWeight: 600 }}>
+                      <span className="u-text-xs u-opacity-70" style={{ fontWeight: 600 }}>
                         {backgrounds[backgroundIndex]?.label}
                       </span>
                       <span
-                        className="u-fs-xs u-opacity-40"
+                        className="u-text-xs u-opacity-40"
                         style={{ textTransform: 'capitalize', marginLeft: 'auto' }}
                       >
                         {backgrounds[backgroundIndex]?.tag}
                       </span>
                     </div>
-                    <div className="u-mt-1 u-fs-xs u-opacity-35" style={{ letterSpacing: '0.3px' }}>
+                    <div className="u-mt-1 u-text-xs u-opacity-35" style={{ letterSpacing: '0.3px' }}>
                       Use ← → arrow keys to navigate
                     </div>
                   </div>
@@ -1543,7 +1543,7 @@ export const Playground: Story = {
                         <div className="u-flex u-justify-between u-items-center u-mb-6">
                           <div>
                             <h3
-                              className="u-m-0 u-font-bold u-fs-xl"
+                              className="u-m-0 u-font-bold u-text-xl"
                               style={{
                                 background:
                                   'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
@@ -1554,7 +1554,7 @@ export const Playground: Story = {
                             >
                               💻 Generated Code
                             </h3>
-                            <p className="u-m-0 u-fs-sm u-text-white u-opacity-70 u-mt-1">
+                            <p className="u-m-0 u-text-sm u-text-white u-opacity-70 u-mt-1">
                               Copy this code to use in your project
                             </p>
                           </div>
@@ -1573,7 +1573,7 @@ export const Playground: Story = {
                           </Button>
                         </div>
                         <pre
-                          className="custom-scrollbar u-rounded u-fs-sm"
+                          className="custom-scrollbar u-rounded u-text-sm"
                           style={{
                             overflowX: 'auto',
                             overflowY: 'auto',
@@ -1612,7 +1612,7 @@ export const Playground: Story = {
                     <div className="u-h-100 u-w-100 custom-scrollbar" style={{ overflowY: 'auto' }}>
                       <div className="u-p-4 u-p-lg-5 u-text-center">
                         <div
-                          className="u-inline-flex u-items-center u-gap-2 u-px-3 u-py-1 u-rounded-pill u-mb-4 u-fs-xs u-font-bold"
+                          className="u-inline-flex u-items-center u-gap-2 u-px-3 u-py-1 u-rounded-pill u-mb-4 u-text-xs u-font-bold"
                           style={{
                             background:
                               'linear-gradient(135deg, rgba(122, 255, 215, 0.2) 0%, rgba(102, 126, 234, 0.2) 100%)',
@@ -1623,7 +1623,7 @@ export const Playground: Story = {
                             backdropFilter: 'blur(8px)',
                           }}
                         >
-                          <span className="u-fs-base">✨</span>
+                          <span className="u-text-base">✨</span>
                           <span>LIVE PREVIEW</span>
                         </div>
 
@@ -1713,7 +1713,7 @@ export const Playground: Story = {
                             }}
                           >
                             <div
-                              className="u-mb-3 u-font-bold u-fs-sm"
+                              className="u-mb-3 u-font-bold u-text-sm"
                               style={{ color: '#7AFFD7', letterSpacing: '0.5px' }}
                             >
                               📊 Current Configuration Stack
@@ -1723,50 +1723,50 @@ export const Playground: Story = {
                               style={{ gridTemplateColumns: 'repeat(6, 1fr)' }}
                             >
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">Mode</span>
+                                <span className="u-text-xs u-opacity-60 u-font-medium">Mode</span>
                                 <span
-                                  className="u-fs-sm u-font-bold u-text-white"
+                                  className="u-text-sm u-font-bold u-text-white"
                                   style={{ textTransform: 'capitalize' }}
                                 >
                                   {selectedMode}
                                 </span>
                               </div>
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">Shader</span>
+                                <span className="u-text-xs u-opacity-60 u-font-medium">Shader</span>
                                 <span
-                                  className="u-fs-sm u-font-bold u-text-white"
+                                  className="u-text-sm u-font-bold u-text-white"
                                   style={{ textTransform: 'capitalize' }}
                                 >
                                   {selectedShader}
                                 </span>
                               </div>
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">
+                                <span className="u-text-xs u-opacity-60 u-font-medium">
                                   Displacement
                                 </span>
-                                <span className="u-fs-sm u-font-bold u-text-white">
+                                <span className="u-text-sm u-font-bold u-text-white">
                                   {settings.displacementScale}px
                                 </span>
                               </div>
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">
+                                <span className="u-text-xs u-opacity-60 u-font-medium">
                                   Aberration
                                 </span>
-                                <span className="u-fs-sm u-font-bold u-text-white">
+                                <span className="u-text-sm u-font-bold u-text-white">
                                   {settings.aberrationIntensity.toFixed(1)}
                                 </span>
                               </div>
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">Blur</span>
-                                <span className="u-fs-sm u-font-bold u-text-white">
+                                <span className="u-text-xs u-opacity-60 u-font-medium">Blur</span>
+                                <span className="u-text-sm u-font-bold u-text-white">
                                   {settings.blurAmount.toFixed(2)}
                                 </span>
                               </div>
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">
+                                <span className="u-text-xs u-opacity-60 u-font-medium">
                                   Elasticity
                                 </span>
-                                <span className="u-fs-sm u-font-bold u-text-white">
+                                <span className="u-text-sm u-font-bold u-text-white">
                                   {settings.elasticity.toFixed(2)}
                                 </span>
                               </div>
@@ -1783,14 +1783,14 @@ export const Playground: Story = {
                             }}
                           >
                             <div
-                              className="u-mb-3 u-font-bold u-fs-sm"
+                              className="u-mb-3 u-font-bold u-text-sm"
                               style={{ color: '#7AFFD7', letterSpacing: '0.5px' }}
                             >
                               🎨 Visual Characteristics
                             </div>
                             <div className="u-flex u-flex-wrap u-gap-2">
                               <div
-                                className="u-px-3 u-py-1 u-rounded-pill u-fs-xs u-font-bold"
+                                className="u-px-3 u-py-1 u-rounded-pill u-text-xs u-font-bold"
                                 style={{
                                   background: settings.withLiquidBlur
                                     ? 'rgba(122, 255, 215, 0.15)'
@@ -1807,7 +1807,7 @@ export const Playground: Story = {
                                 {settings.withLiquidBlur ? '✓' : '○'} Liquid Blur
                               </div>
                               <div
-                                className="u-px-3 u-py-1 u-rounded-pill u-fs-xs u-font-bold"
+                                className="u-px-3 u-py-1 u-rounded-pill u-text-xs u-font-bold"
                                 style={{
                                   background: settings.withBorder
                                     ? 'rgba(122, 255, 215, 0.15)'
@@ -1822,7 +1822,7 @@ export const Playground: Story = {
                                 {settings.withBorder ? '✓' : '○'} Border Effect
                               </div>
                               <div
-                                className="u-px-3 u-py-1 u-rounded-pill u-fs-xs u-font-bold"
+                                className="u-px-3 u-py-1 u-rounded-pill u-text-xs u-font-bold"
                                 style={{
                                   background: settings.reducedMotion
                                     ? 'rgba(239, 68, 68, 0.15)'
@@ -1839,7 +1839,7 @@ export const Playground: Story = {
                                 {settings.reducedMotion ? '✓' : '○'} Reduced Motion
                               </div>
                               <div
-                                className="u-px-3 u-py-1 u-rounded-pill u-fs-xs u-font-bold"
+                                className="u-px-3 u-py-1 u-rounded-pill u-text-xs u-font-bold"
                                 style={{
                                   background: settings.highContrast
                                     ? 'rgba(245, 158, 11, 0.15)'
@@ -1868,7 +1868,7 @@ export const Playground: Story = {
                             }}
                           >
                             <div
-                              className="u-mb-3 u-font-bold u-fs-sm"
+                              className="u-mb-3 u-font-bold u-text-sm"
                               style={{ color: '#7AFFD7', letterSpacing: '0.5px' }}
                             >
                               📈 Quick Stats
@@ -1877,23 +1877,23 @@ export const Playground: Story = {
                               className="u-grid u-gap-3"
                               style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}
                             >
-                              <div className="u-flex u-items-center u-fs-sm">
+                              <div className="u-flex u-items-center u-text-sm">
                                 <span className="u-opacity-60 u-font-medium">Saturation:</span>
                                 <span className="u-font-bold u-ml-2">{settings.saturation}%</span>
                               </div>
-                              <div className="u-flex u-items-center u-fs-sm">
+                              <div className="u-flex u-items-center u-text-sm">
                                 <span className="u-opacity-60 u-font-medium">Radius:</span>
                                 <span className="u-font-bold u-ml-2">
                                   {settings.borderRadius}px
                                 </span>
                               </div>
-                              <div className="u-flex u-items-center u-fs-sm">
+                              <div className="u-flex u-items-center u-text-sm">
                                 <span className="u-opacity-60 u-font-medium">Bg:</span>
                                 <span className="u-font-bold u-ml-2">
                                   {backgroundIndex + 1}/{backgrounds.length}
                                 </span>
                               </div>
-                              <div className="u-flex u-items-center u-fs-sm">
+                              <div className="u-flex u-items-center u-text-sm">
                                 <span className="u-opacity-60 u-font-medium">Effects:</span>
                                 <span className="u-font-bold u-ml-2">
                                   {settings.withoutEffects ? 'Off' : 'On'}

package/src/components/AtomixGlass/stories/shared-components.tsx

@@ -97,6 +97,9 @@ export const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({
             backgroundColor: overlayColor,
             opacity: overlayOpacity,
             padding,
+            objectPosition: 'center',
+            objectFit: 'cover',
+            backgroundPosition: 'fixed'
           }}
         />
       )}
@@ -193,7 +196,10 @@ export const StoryContainer: React.FC<StoryContainerProps> = ({
  * Collection of high-quality background images for different moods and scenarios
  */
 export const backgroundImages = [
+  'https://images.unsplash.com/photo-1773609108583-4f0040c75e7f?q=80&w=2532&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1593433073755-4233a78ee359?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
   'https://images.unsplash.com/photo-1637825891028-564f672aa42c?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670',
+  'https://images.unsplash.com/photo-1773062278803-0643c4782445?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
   'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
   'https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670',
   'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',

package/src/components/Avatar/Avatar.tsx

@@ -6,7 +6,7 @@ import { Icon } from '../Icon/Icon';
 export const Avatar: React.FC<AvatarProps> = memo(
   ({
     src,
-    alt = 'Avatar',
+    alt = 'User avatar',
     initials,
     icon,
     size = 'md',

package/src/components/Button/Button.stories.disabled-link.tsx

@@ -0,0 +1,10 @@
+import { Button } from './Button';
+
+export const DisabledLinkExample = {
+  render: () => (
+    <div style={{ padding: '20px', display: 'flex', gap: '10px' }}>
+      <Button href="/home" disabled>Disabled Link Button</Button>
+      <Button href="/home">Normal Link Button</Button>
+    </div>
+  ),
+};

package/src/components/Button/Button.stories.tsx

@@ -406,6 +406,16 @@ export const DisabledState: Story = {
   },
 };
 
+export const DisabledLinkState: Story = {
+  args: {
+    label: 'Disabled Link Button',
+    variant: 'primary',
+    size: 'md',
+    disabled: true,
+    href: '/home',
+  },
+};
+
 /**
  * Shows button in active state
  */

package/src/components/Button/Button.test.tsx

@@ -75,22 +75,27 @@ describe('Button Component', () => {
   });
 
   it('renders as disabled link when disabled and href provided', () => {
-    // Current implementation might be buggy here, let's see
     render(
       <Button href="/home" disabled>
         Home
       </Button>
     );
-    const link = screen.queryByRole('link');
-    const button = screen.queryByRole('button');
-
-    // If it renders as button when disabled (which logic suggested), then:
-    if (button) {
-      expect(button).toBeDisabled();
-    } else if (link) {
-      expect(link).toHaveAttribute('aria-disabled', 'true');
-      // Should not navigate
-    }
+
+    // An anchor tag without an href attribute is not considered a 'link' role.
+    // It's considered a generic text element, but in our component it has role='link' implicitly? No.
+    // Actually, an anchor without href is generic. But it might have button styles.
+    // Let's get it by text and assert it's an anchor without href.
+    const element = screen.getByText('Home').closest('a');
+    expect(element).toBeInTheDocument();
+
+    // It shouldn't have an href attribute because it's disabled.
+    expect(element).not.toHaveAttribute('href');
+
+    // It should have aria-disabled true
+    expect(element).toHaveAttribute('aria-disabled', 'true');
+
+    // It should have disabled class
+    expect(element).toHaveClass('c-btn--disabled');
   });
 
   it('forwards ref', () => {

package/src/components/Button/Button.tsx

@@ -62,7 +62,7 @@ export const Button = React.memo(
       // If disabled, we still check href, but we might want to render as button or anchor with aria-disabled
       // The previous logic was Boolean(href && !isDisabled). This meant if disabled, it renders as <button>.
       // This is a safe fallback for disabled links.
-      const shouldRenderAsLink = Boolean(href && !isDisabled);
+      const shouldRenderAsLink = Boolean(href);
 
       // Resolve icon element - support both icon (ReactNode) and iconName (string)
       const iconElement = iconName ? (
@@ -226,8 +226,8 @@ export const Button = React.memo(
           const linkProps = {
             ...buttonProps,
             ref: ref as any, // linkComponent usually forwards ref to anchor
-            href,
-            to: href,
+            href: isDisabled ? undefined : href,
+            to: isDisabled ? undefined : href,
             target,
             rel: target === '_blank' ? 'noopener noreferrer' : undefined,
           };
@@ -239,7 +239,7 @@ export const Button = React.memo(
             <a
               {...buttonProps}
               ref={ref as React.Ref<HTMLAnchorElement>}
-              href={href}
+              href={isDisabled ? undefined : href}
               target={target}
               rel={target === '_blank' ? 'noopener noreferrer' : undefined}
             >

package/src/components/Card/Card.tsx

@@ -26,7 +26,7 @@ export const Card = React.memo(
         // Content
         header,
         image,
-        imageAlt = '',
+        imageAlt = 'Card image',
         title,
         text,
         actions,