@shohojdhara/atomix 0.3.12 → 0.3.14

package/src/components/Avatar/Avatar.stories.tsx

@@ -75,11 +75,11 @@ export const VariantsShowcase: Story = {
     };
 
     return (
-      <div className="u-d-grid u-gap-6" style={{ gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr 1fr' }}>
+      <div className="u-grid u-gap-6" style={{ gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr 1fr' }}>
         {/* Header Row */}
-        <div className="u-fw-bold">Type</div>
+        <div className="u-font-bold">Type</div>
         {sizeOptions.map(size => (
-          <div key={size} className="u-fw-bold u-text-center">
+          <div key={size} className="u-font-bold u-text-center">
             {size.toUpperCase()}
           </div>
         ))}
@@ -87,7 +87,7 @@ export const VariantsShowcase: Story = {
         {/* Square Avatars */}
         <div>Square</div>
         {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
+          <div key={size} className="u-flex u-justify-center">
             <Avatar src={variantImages.square} size={size} />
           </div>
         ))}
@@ -95,7 +95,7 @@ export const VariantsShowcase: Story = {
         {/* Circle Avatars */}
         <div>Circle</div>
         {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
+          <div key={size} className="u-flex u-justify-center">
             <Avatar src={variantImages.circle} size={size} circle={true} />
           </div>
         ))}
@@ -103,7 +103,7 @@ export const VariantsShowcase: Story = {
         {/* Initials Avatars */}
         <div>Initials</div>
         {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
+          <div key={size} className="u-flex u-justify-center">
             <Avatar initials="JD" size={size} />
           </div>
         ))}
@@ -111,7 +111,7 @@ export const VariantsShowcase: Story = {
         {/* Icon Avatars */}
         <div>Icon</div>
         {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
+          <div key={size} className="u-flex u-justify-center">
             <Avatar
               icon={<Icon name="User" size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />}
               size={size}
@@ -122,7 +122,7 @@ export const VariantsShowcase: Story = {
         {/* Fallback Avatars */}
         <div>Fallback</div>
         {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
+          <div key={size} className="u-flex u-justify-center">
             <Avatar src={variantImages.fallback} size={size} />
           </div>
         ))}
@@ -130,7 +130,7 @@ export const VariantsShowcase: Story = {
         {/* Interactive Avatars */}
         <div>Interactive</div>
         {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
+          <div key={size} className="u-flex u-justify-center">
             <Avatar
               src={`https://i.pravatar.cc/150?img=${size === 'xs' ? 4 : size === 'sm' ? 5 : size === 'md' ? 6 : size === 'lg' ? 7 : 8}`}
               size={size}
@@ -143,7 +143,7 @@ export const VariantsShowcase: Story = {
         {/* Disabled Avatars */}
         <div>Disabled</div>
         {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
+          <div key={size} className="u-flex u-justify-center">
             <Avatar
               src={`https://i.pravatar.cc/150?img=${size === 'xs' ? 9 : size === 'sm' ? 10 : size === 'md' ? 11 : size === 'lg' ? 12 : 13}`}
               size={size}
@@ -164,15 +164,15 @@ export const AvatarGroupShowcase: Story = {
     const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
 
     return (
-      <div className="u-d-flex u-flex-column u-gap-8">
+      <div className="u-flex u-flex-column u-gap-8">
         {/* First row: Standard and Stacked side by side */}
-        <div className="u-d-flex u-gap-12">
+        <div className="u-flex u-gap-12">
           {/* Standard Avatar Groups */}
           <div className="u-flex-grow-1">
-            <h3 className="u-mb-4 u-fw-normal">Standard Avatar Groups</h3>
-            <div className="u-d-flex u-flex-column u-gap-4">
+            <h3 className="u-mb-4 u-font-normal">Standard Avatar Groups</h3>
+            <div className="u-flex u-flex-column u-gap-4">
               {sizes.map(size => (
-                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
+                <div key={size} className="u-flex u-items-center u-gap-4">
                   <div className="u-w-12">{size.toUpperCase()}</div>
                   <AvatarGroup>
                     <Avatar src={`https://i.pravatar.cc/150?img=${14}`} size={size} circle />
@@ -188,10 +188,10 @@ export const AvatarGroupShowcase: Story = {
 
           {/* Stacked Avatar Groups */}
           <div className="u-flex-grow-1">
-            <h3 className="u-mb-4 u-fw-normal">Stacked Avatar Groups</h3>
-            <div className="u-d-flex u-flex-column u-gap-4">
+            <h3 className="u-mb-4 u-font-normal">Stacked Avatar Groups</h3>
+            <div className="u-flex u-flex-column u-gap-4">
               {sizes.map(size => (
-                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
+                <div key={size} className="u-flex u-items-center u-gap-4">
                   <div className="u-w-12">{size.toUpperCase()}</div>
                   <AvatarGroup stacked>
                     <Avatar src={`https://i.pravatar.cc/150?img=${24}`} size={size} circle />
@@ -207,13 +207,13 @@ export const AvatarGroupShowcase: Story = {
         </div>
 
         {/* Second row: Max and Stacked+Max side by side */}
-        <div className="u-d-flex u-gap-12">
+        <div className="u-flex u-gap-12">
           {/* Avatar Groups with Max Limit */}
           <div className="u-flex-grow-1">
-            <h3 className="u-mb-4 u-fw-normal">Avatar Groups with Max Limit</h3>
-            <div className="u-d-flex u-flex-column u-gap-4">
+            <h3 className="u-mb-4 u-font-normal">Avatar Groups with Max Limit</h3>
+            <div className="u-flex u-flex-column u-gap-4">
               {sizes.map(size => (
-                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
+                <div key={size} className="u-flex u-items-center u-gap-4">
                   <div className="u-w-12">{size.toUpperCase()}</div>
                   <AvatarGroup max={3}>
                     <Avatar src={`https://i.pravatar.cc/150?img=${19}`} size={size} circle />
@@ -229,10 +229,10 @@ export const AvatarGroupShowcase: Story = {
 
           {/* Stacked Avatar Groups with Max Limit */}
           <div className="u-flex-grow-1">
-            <h3 className="u-mb-4 u-fw-normal">Stacked Groups with Max Limit</h3>
-            <div className="u-d-flex u-flex-column u-gap-4">
+            <h3 className="u-mb-4 u-font-normal">Stacked Groups with Max Limit</h3>
+            <div className="u-flex u-flex-column u-gap-4">
               {sizes.map(size => (
-                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
+                <div key={size} className="u-flex u-items-center u-gap-4">
                   <div className="u-w-12">{size.toUpperCase()}</div>
                   <AvatarGroup stacked max={3} moreText={`+more`}>
                     <Avatar src={`https://i.pravatar.cc/150?img=${29}`} size={size} circle />
@@ -249,7 +249,7 @@ export const AvatarGroupShowcase: Story = {
 
         {/* Mixed Content Avatar Groups */}
         <div>
-          <h3 className="u-mb-4 u-fw-normal">Mixed Content Avatar Groups</h3>
+          <h3 className="u-mb-4 u-font-normal">Mixed Content Avatar Groups</h3>
           <AvatarGroup>
             <Avatar src={`https://i.pravatar.cc/150?img=${34}`} size="md" circle />
             <Avatar initials="JD" size="md" circle />

package/src/components/Badge/Badge.stories.tsx

@@ -231,7 +231,7 @@ export const AllVariants: Story = {
     },
   },
   render: () => (
-    <div className="u-d-flex u-flex-wrap u-gap-2">
+    <div className="u-flex u-flex-wrap u-gap-2">
       {THEME_COLORS.map(color => (
         <Badge key={color} label={color} variant={color} />
       ))}
@@ -255,7 +255,7 @@ export const AllSizes: Story = {
     },
   },
   render: () => (
-    <div className="u-d-flex u-align-items-center u-gap-2">
+    <div className="u-flex u-items-center u-gap-2">
       <Badge label="Small" variant="primary" size="sm" />
       <Badge label="Medium" variant="primary" size="md" />
       <Badge label="Large" variant="primary" size="lg" />
@@ -271,10 +271,10 @@ export const WithDifferentContent: Story = {
     label: 'Badge with different content',
   },
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-4">
+    <div className="u-flex u-flex-column u-gap-4">
       <div>
         <h3 className="u-mt-0 u-mb-2">Numeric Badges</h3>
-        <div className="u-d-flex u-gap-2">
+        <div className="u-flex u-gap-2">
           <Badge label="1" variant="primary" />
           <Badge label="2" variant="secondary" />
           <Badge label="3" variant="success" />
@@ -285,7 +285,7 @@ export const WithDifferentContent: Story = {
       </div>
       <div>
         <h3 className="u-mt-0 u-mb-2">Status Badges</h3>
-        <div className="u-d-flex u-gap-2">
+        <div className="u-flex u-gap-2">
           <Badge label="New" variant="primary" />
           <Badge label="Active" variant="success" />
           <Badge label="Pending" variant="warning" />
@@ -295,7 +295,7 @@ export const WithDifferentContent: Story = {
       </div>
       <div>
         <h3 className="u-mt-0 u-mb-2">Badges with Icons</h3>
-        <div className="u-d-flex u-gap-2">
+        <div className="u-flex u-gap-2">
           <Badge label="Info" variant="info" icon={<Icon />} />
           <Badge label="Warning" variant="warning" icon={<Icon />} />
           <Badge label="Success" variant="success" icon={<Icon />} />
@@ -321,19 +321,19 @@ export const UsageExamples: Story = {
     },
   },
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-6 u-max-width-80">
+    <div className="u-flex u-flex-column u-gap-6 u-max-width-80">
       <div>
         <h3 className="u-mt-0 u-mb-2">In navigation</h3>
-        <div className="u-d-flex u-gap-4">
-          <div className="u-d-flex u-align-items-center u-gap-2">
+        <div className="u-flex u-gap-4">
+          <div className="u-flex u-items-center u-gap-2">
             <span>Inbox</span>
             <Badge label="24" variant="error" size="sm" />
           </div>
-          <div className="u-d-flex u-align-items-center u-gap-2">
+          <div className="u-flex u-items-center u-gap-2">
             <span>Notifications</span>
             <Badge label="3" variant="primary" size="sm" />
           </div>
-          <div className="u-d-flex u-align-items-center u-gap-2">
+          <div className="u-flex u-items-center u-gap-2">
             <span>Messages</span>
             <Badge label="New" variant="success" size="sm" />
           </div>
@@ -342,13 +342,13 @@ export const UsageExamples: Story = {
 
       <div>
         <h3 className="u-mt-0 u-mb-2">In cards</h3>
-        <div className="u-p-4 u-shadow u-d-flex u-flex-column u-gap-2">
-          <div className="u-d-flex u-justify-content-between">
+        <div className="u-p-4 u-shadow u-flex u-flex-column u-gap-2">
+          <div className="u-flex u-justify-between">
             <h4 className="u-m-0">Product Title</h4>
             <Badge label="Sale" variant="error" />
           </div>
           <p className="u-my-2">This is a sample product description.</p>
-          <div className="u-d-flex u-gap-2">
+          <div className="u-flex u-gap-2">
             <Badge label="In Stock" variant="success" size="sm" />
             <Badge label="Free Shipping" variant="info" size="sm" />
           </div>
@@ -359,20 +359,20 @@ export const UsageExamples: Story = {
         <h3 className="u-mt-0 u-mb-2">In lists</h3>
         <ul className="u-p-0 u-m-0" style={{ listStyle: 'none' }}>
           <li
-            className="u-py-2 u-d-flex u-justify-content-between"
+            className="u-py-2 u-flex u-justify-between"
             style={{ borderBottom: '1px solid #e0e0e0' }}
           >
             <span>Task 1</span>
             <Badge label="Completed" variant="success" size="sm" />
           </li>
           <li
-            className="u-py-2 u-d-flex u-justify-content-between"
+            className="u-py-2 u-flex u-justify-between"
             style={{ borderBottom: '1px solid #e0e0e0' }}
           >
             <span>Task 2</span>
             <Badge label="In Progress" variant="warning" size="sm" />
           </li>
-          <li className="u-py-2 u-d-flex u-justify-content-between">
+          <li className="u-py-2 u-flex u-justify-between">
             <span>Task 3</span>
             <Badge label="Not Started" variant="secondary" size="sm" />
           </li>
@@ -391,16 +391,16 @@ export const ThemeAwareBadges: Story = {
     variant: 'primary',
   },
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-6">
+    <div className="u-flex u-flex-column u-gap-6">
       <div>
         <h3 className="u-mt-0 u-mb-2">Theme Aware Badges</h3>
         <p className="u-mb-4">
           The badges below demonstrate how they adapt to different theme modes.
         </p>
-        <div className="u-d-flex u-gap-5 u-mt-4">
+        <div className="u-flex u-gap-5 u-mt-4">
           <div className="u-p-5 u-shadow u-flex-1">
             <h4 className="u-mt-0">Current Theme</h4>
-            <div className="u-d-flex u-flex-wrap u-gap-2">
+            <div className="u-flex u-flex-wrap u-gap-2">
               {THEME_COLORS.map(color => (
                 <Badge key={color} label={color} variant={color} />
               ))}
@@ -414,27 +414,27 @@ export const ThemeAwareBadges: Story = {
         <p className="u-mb-2">
           Our badges are designed to maintain proper contrast in both light and dark modes.
         </p>
-        <div className="u-d-flex u-flex-column u-gap-2 u-mt-2">
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>
+        <div className="u-flex u-flex-column u-gap-2 u-mt-2">
+          <div className="u-flex u-items-center u-gap-2">
+            <span className="u-inline-block" style={{ width: '120px' }}>
               Primary:
             </span>
             <Badge label="New Feature" variant="primary" />
           </div>
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>
+          <div className="u-flex u-items-center u-gap-2">
+            <span className="u-inline-block" style={{ width: '120px' }}>
               Success:
             </span>
             <Badge label="Completed" variant="success" />
           </div>
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>
+          <div className="u-flex u-items-center u-gap-2">
+            <span className="u-inline-block" style={{ width: '120px' }}>
               Warning:
             </span>
             <Badge label="In Progress" variant="warning" />
           </div>
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>
+          <div className="u-flex u-items-center u-gap-2">
+            <span className="u-inline-block" style={{ width: '120px' }}>
               Error:
             </span>
             <Badge label="Failed" variant="error" />
@@ -571,7 +571,7 @@ export const GlassAllVariants: Story = {
         borderRadius: '8px',
       }}
     >
-      <div className="u-d-flex u-flex-wrap u-gap-2">
+      <div className="u-flex u-flex-wrap u-gap-2">
         {THEME_COLORS.map(color => (
           <Badge key={color} label={color} variant={color} glass={true} />
         ))}
@@ -597,7 +597,7 @@ export const GlassAllSizes: Story = {
         borderRadius: '8px',
       }}
     >
-      <div className="u-d-flex u-align-items-center u-gap-2">
+      <div className="u-flex u-items-center u-gap-2">
         <Badge label="Small" variant="primary" size="sm" glass={true} />
         <Badge label="Medium" variant="primary" size="md" glass={true} />
         <Badge label="Large" variant="primary" size="lg" glass={true} />

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Badge } from './Badge';
+
+// Mock AtomixGlass component
+vi.mock('../AtomixGlass/AtomixGlass', () => ({
+    AtomixGlass: ({ children, ...props }: any) => (
+        <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+            {children}
+        </div>
+    ),
+}));
+
+describe('Badge Component', () => {
+    it('renders correctly', () => {
+        render(<Badge label="Test Badge" />);
+        expect(screen.getByText('Test Badge')).toBeInTheDocument();
+    });
+
+    it('renders with aria-label', () => {
+        render(<Badge label="Badge" aria-label="Accessible Badge" />);
+        expect(screen.getByLabelText('Accessible Badge')).toBeInTheDocument();
+    });
+
+    it('renders close button when onRemove is provided', () => {
+        const handleRemove = vi.fn();
+        render(<Badge label="Removable" onRemove={handleRemove} />);
+
+        const closeButton = screen.getByRole('button', { name: 'Remove badge' });
+        expect(closeButton).toBeInTheDocument();
+
+        fireEvent.click(closeButton);
+        expect(handleRemove).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not render close button when onRemove is not provided', () => {
+        render(<Badge label="Static" />);
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('disables close button when badge is disabled', () => {
+        const handleRemove = vi.fn();
+        render(<Badge label="Disabled" onRemove={handleRemove} disabled />);
+
+        const closeButton = screen.getByRole('button', { name: 'Remove badge' });
+        expect(closeButton).toBeDisabled();
+
+        fireEvent.click(closeButton);
+        expect(handleRemove).not.toHaveBeenCalled();
+    });
+});

package/src/components/Badge/Badge.tsx

@@ -10,6 +10,8 @@ export const Badge: React.FC<BadgeProps> = memo(({
   size = 'md',
   disabled = false,
   icon,
+  onRemove,
+  'aria-label': ariaLabel,
   className = '',
   glass,
   style,
@@ -30,9 +32,26 @@ export const Badge: React.FC<BadgeProps> = memo(({
   });
 
   const badgeElement = (
-    <span className={badgeClass} aria-disabled={disabled} ref={ref} style={style}>
+    <span
+      className={badgeClass}
+      aria-disabled={disabled}
+      aria-label={ariaLabel}
+      ref={ref}
+      style={style}
+    >
       {icon && <span className={BADGE.ICON_CLASS}>{icon}</span>}
       <span>{label}</span>
+      {onRemove && (
+        <button
+          type="button"
+          className="c-badge__close"
+          onClick={onRemove}
+          aria-label="Remove badge"
+          disabled={disabled}
+        >
+          ×
+        </button>
+      )}
     </span>
   );
 

package/src/components/Block/Block.stories.tsx

@@ -346,25 +346,25 @@ export const ContentPreview: Story = {
         <Grid>
           <GridCol xs={12} md={6} lg={3}>
             <div className="u-text-center u-p-3">
-              <h3 className="u-fs-h4">Consistency</h3>
+              <h3 className="u-text-h4">Consistency</h3>
               <p className="u-mb-0">Unified design language across all products</p>
             </div>
           </GridCol>
           <GridCol xs={12} md={6} lg={3}>
             <div className="u-text-center u-p-3">
-              <h3 className="u-fs-h4">Accessibility</h3>
+              <h3 className="u-text-h4">Accessibility</h3>
               <p className="u-mb-0">WCAG 2.1 AA compliant components</p>
             </div>
           </GridCol>
           <GridCol xs={12} md={6} lg={3}>
             <div className="u-text-center u-p-3">
-              <h3 className="u-fs-h4">Responsive</h3>
+              <h3 className="u-text-h4">Responsive</h3>
               <p className="u-mb-0">Mobile-first approach for all devices</p>
             </div>
           </GridCol>
           <GridCol xs={12} md={6} lg={3}>
             <div className="u-text-center u-p-3">
-              <h3 className="u-fs-h4">Customizable</h3>
+              <h3 className="u-text-h4">Customizable</h3>
               <p className="u-mb-0">Easily extend and modify components</p>
             </div>
           </GridCol>
@@ -372,7 +372,7 @@ export const ContentPreview: Story = {
       </Block>
 
       <Block spacing="xl">
-        <div className="u-d-flex u-flex-column u-align-items-center u-text-center">
+        <div className="u-flex u-flex-column u-items-center u-text-center">
           <h2 className="u-mb-3">Ready to Get Started?</h2>
           <p className="u-mb-4" style={{ maxWidth: '600px' }}>
             Join thousands of developers and designers building with Atomix Design System

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -19,7 +19,7 @@ const meta = {
     items: { control: 'object' },
     divider: { control: 'text' },
     className: { control: 'text' },
-    ariaLabel: { control: 'text' },
+    'aria-label': { control: 'text' },
   },
 } satisfies Meta<typeof Breadcrumb>;
 

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -57,7 +57,7 @@ export interface BreadcrumbProps {
   /**
    * Aria label for the navigation
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * Optional custom link component
@@ -73,7 +73,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = memo(({
   items,
   divider,
   className = '',
-  ariaLabel = 'Breadcrumb',
+  'aria-label': ariaLabel = 'Breadcrumb',
   LinkComponent,
   style,
 }) => {

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

@@ -303,7 +303,7 @@ export const AllVariants: Story = {
     },
   },
   render: () => (
-    <div className="u-d-flex u-flex-wrap u-gap-2">
+    <div className="u-flex u-flex-wrap u-gap-2">
       <Button label="Primary" variant="primary" />
       <Button label="Secondary" variant="secondary" />
       <Button label="Success" variant="success" />
@@ -332,7 +332,7 @@ export const AllOutlineVariants: Story = {
     },
   },
   render: () => (
-    <div className="u-d-flex u-flex-wrap u-gap-2">
+    <div className="u-flex u-flex-wrap u-gap-2">
       <Button label="Outline Primary" variant="outline-primary" />
       <Button label="Outline Secondary" variant="outline-secondary" />
       <Button label="Outline Success" variant="outline-success" />
@@ -361,7 +361,7 @@ export const AllSizes: Story = {
     },
   },
   render: () => (
-    <div className="u-d-flex u-align-items-center u-gap-2">
+    <div className="u-flex u-items-center u-gap-2">
       <Button label="Small" variant="primary" size="sm" />
       <Button label="Medium" variant="primary" size="md" />
       <Button label="Large" variant="primary" size="lg" />
@@ -380,7 +380,7 @@ export const IconButtonVariants: Story = {
     iconOnly: true,
   },
   render: () => (
-    <div className="u-d-flex u-flex-wrap u-gap-2">
+    <div className="u-flex u-flex-wrap u-gap-2">
       <Button label="Add" variant="primary" icon={<Icon />} />
       <Button label="Add" variant="secondary" icon={<Icon />} />
       <Button label="Add" variant="success" icon={<Icon />} />
@@ -413,7 +413,7 @@ export const RoundedVariants: Story = {
     rounded: true,
   },
   render: () => (
-    <div className="u-d-flex u-flex-wrap u-gap-2">
+    <div className="u-flex u-flex-wrap u-gap-2">
       <Button label="Primary" variant="primary" rounded />
       <Button label="Secondary" variant="secondary" rounded />
       <Button label="Success" variant="success" rounded />
@@ -535,7 +535,7 @@ export const GlassVariants: Story = {
         borderRadius: '12px',
       }}
     >
-      <div className="u-d-flex u-flex-wrap u-gap-2">
+      <div className="u-flex u-flex-wrap u-gap-2">
         <Button label="Primary" variant="primary" glass />
         <Button label="Secondary" variant="secondary" glass />
         <Button label="Success" variant="success" glass />
@@ -566,7 +566,7 @@ export const GlassOutlineVariants: Story = {
         borderRadius: '12px',
       }}
     >
-      <div className="u-d-flex u-flex-wrap u-gap-2">
+      <div className="u-flex u-flex-wrap u-gap-2">
         <Button label="Outline Primary" variant="outline-primary" glass />
         <Button label="Outline Secondary" variant="outline-secondary" glass />
         <Button label="Outline Success" variant="outline-success" glass />
@@ -596,7 +596,7 @@ export const GlassSizes: Story = {
         borderRadius: '12px',
       }}
     >
-      <div className="u-d-flex u-align-items-center u-gap-2">
+      <div className="u-flex u-items-center u-gap-2">
         <Button label="Small Glass" variant="primary" size="sm" glass={{ cornerRadius: 8 }} />
         <Button label="Medium Glass" variant="primary" size="md" glass />
         <Button label="Large Glass" variant="primary" size="lg" glass />
@@ -622,7 +622,7 @@ export const GlassWithIcons: Story = {
         borderRadius: '12px',
       }}
     >
-      <div className="u-d-flex u-flex-wrap u-gap-2">
+      <div className="u-flex u-flex-wrap u-gap-2">
         <Button label="With Icon" variant="primary" icon={<Icon />} glass={{ cornerRadius: 12 }} />
         <Button
           label="Icon Only"
@@ -699,7 +699,7 @@ export const GlassShowcase: Story = {
         <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
           Primary Glass Variants
         </h3>
-        <div className="u-d-flex u-flex-wrap u-gap-2 u-align-items-center">
+        <div className="u-flex u-flex-wrap u-gap-2 u-items-center">
           <Button label="Small Glass" variant="primary" size="sm" glass={{ cornerRadius: 8 }} />
           <Button label="Medium Glass" variant="primary" size="md" glass />
           <Button label="Large Glass" variant="primary" size="lg" glass />
@@ -723,7 +723,7 @@ export const GlassShowcase: Story = {
         <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
           Outline Glass Variants
         </h3>
-        <div className="u-d-flex u-flex-wrap u-gap-2">
+        <div className="u-flex u-flex-wrap u-gap-2">
           <Button label="Outline Primary" variant="outline-primary" glass />
           <Button label="Outline Success" variant="outline-success" glass />
           <Button label="Outline Warning" variant="outline-warning" glass />
@@ -744,7 +744,7 @@ export const GlassShowcase: Story = {
         <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
           Custom Glass Effects
         </h3>
-        <div className="u-d-flex u-flex-wrap u-gap-2">
+        <div className="u-flex u-flex-wrap u-gap-2">
           <Button
             label="Polar Mode"
             variant="secondary"
@@ -797,7 +797,7 @@ export const GlassShowcase: Story = {
         <h3 style={{ color: '#333', marginBottom: '1rem', fontSize: '1.2rem' }}>
           Light Background
         </h3>
-        <div className="u-d-flex u-flex-wrap u-gap-2">
+        <div className="u-flex u-flex-wrap u-gap-2">
           <Button label="Light Variant" variant="light" glass />
           <Button label="Outline Light" variant="outline-light" glass />
           <Button label="Dark on Light" variant="dark" glass />

package/src/components/Button/Button.tsx

@@ -46,10 +46,10 @@ export const Button = React.memo(
         onHover,
         onFocus,
         onBlur,
-        ariaLabel,
-        ariaDescribedBy,
-        ariaExpanded,
-        ariaControls,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        'aria-expanded': ariaExpanded,
+        'aria-controls': ariaControls,
         tabIndex,
         style,
         LinkComponent,

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

@@ -150,8 +150,8 @@ export const WithIcons: Story = {
 export const IconOnly: Story = {
   render: () => (
     <ButtonGroup>
-      <Button iconName="CaretLeft" iconOnly ariaLabel="Previous" />
-      <Button iconName="CaretRight" iconOnly ariaLabel="Next" />
+      <Button iconName="CaretLeft" iconOnly aria-label="Previous" />
+      <Button iconName="CaretRight" iconOnly aria-label="Next" />
     </ButtonGroup>
   ),
 };

package/src/components/Button/README.md

@@ -97,6 +97,11 @@ const GlassVariantsExample = () => (
 | `className` | `string` | - | Additional CSS classes |
 | `as` | `ElementType` | `'button'` | HTML element or component to render as |
 | `glass` | `boolean \| AtomixGlassProps` | `false` | Glass morphism effect |
+| `aria-label` | `string` | - | Accessible label for the button |
+| `aria-describedby` | `string` | - | ID of the element that describes the button |
+| `aria-expanded` | `boolean` | - | Indicates if the button controls an expandable element |
+| `aria-controls` | `string` | - | ID of the element controlled by the button |
+| `tabIndex` | `number` | `0` | Tab index for keyboard navigation |
 
 ### Glass Props