@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -1,6 +1,49 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState, useCallback } from 'react';
 import { Button } from './Button';
-import { SIZES } from '../../lib/constants/components';
+import { SIZES, THEME_COLORS } from '../../lib/constants/components';
+
+// ============================================================================
+// TYPE DEFINITIONS
+// ============================================================================
+
+/**
+ * Type helper for story props without children requirement
+ */
+type ButtonStoryProps = Omit<React.ComponentProps<typeof Button>, 'children'> & {
+  children?: React.ReactNode;
+};
+
+// ============================================================================
+// SHARED UTILITIES & CONSTANTS
+// ============================================================================
+
+/**
+ * Reusable decorators for common story patterns
+ */
+const withBackground = (bgUrl: string) => (Story: any) => (
+  <div
+    className="u-bg-cover u-bg-center u-p-10 u-rounded-xl"
+    style={{
+      backgroundImage: `url(${bgUrl})`,
+    }}
+  >
+    <Story />
+  </div>
+);
+
+/**
+ * Sample data for stories
+ */
+const sampleData = {
+  basic: 'Example text',
+  longText: 'Lorem ipsum dolor sit amet...'.repeat(20),
+};
+
+// ============================================================================
+// META CONFIGURATION
+// ============================================================================
 
 const meta = {
   title: 'Components/Button',
@@ -9,8 +52,73 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Button component is a versatile interactive element used to trigger actions throughout the application. It supports multiple variants, sizes, states, and can include icons. Buttons are essential for user interactions and provide clear visual feedback for clickable actions.',
+        component: `# Button Component
+        
+## Overview
+The Button component is a versatile interactive element used to trigger actions throughout the application. It supports multiple variants, sizes, states, and can include icons. Buttons are essential for user interactions and provide clear visual feedback for clickable actions.
+
+## Features
+- Multiple color variants (primary, secondary, success, etc.)
+- Different sizes (sm, md, lg)
+- Support for icons and icon-only buttons
+- Loading states with optional loading text
+- Disabled, active, and selected states
+- Full-width and block-level options
+- Glass morphism effect support
+- Rounded (pill-shaped) style option
+
+## Accessibility
+- Keyboard support: Space and Enter keys activate the button
+- Screen reader: Proper labeling and role attributes
+- ARIA support: Correct roles and states for interactive elements
+- Focus management: Visual focus indicator for keyboard navigation
+
+## Usage Examples
+### Basic Usage
+\`\`\`tsx
+<Button label="Click Me" variant="primary" />
+\`\`\`
+
+### With Icon
+\`\`\`tsx
+<Button label="Add Item" variant="primary" icon={<PlusIcon />} />
+\`\`\`
+
+### Loading State
+\`\`\`tsx
+<Button label="Saving..." variant="primary" loading />
+\`\`\`
+
+## API Reference
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| variant | string | 'primary' | Visual style variant |
+| size | string | 'md' | Size of the button (sm, md, lg) |
+| disabled | boolean | false | Disables button interaction |
+| icon | ReactNode | - | Icon element to display in the button |
+| iconOnly | boolean | false | Renders only the icon without text |
+| rounded | boolean | false | Makes the button fully rounded (pill-shaped) |
+| glass | boolean or GlassConfig | false | Enables glass morphism effect |
+| loading | boolean | false | Shows loading spinner and disables interaction |
+| loadingText | string | - | Custom text to display during loading |
+| fullWidth | boolean | false | Makes button take full container width |
+| block | boolean | false | Makes button a block-level element |
+| active | boolean | false | Applies active state styling |
+| selected | boolean | false | Applies selected state styling |
+| iconPosition | 'start' or 'end' | 'start' | Position of the icon relative to text |
+
+## Design Tokens
+- \`--atomix-btn-padding\`: Padding around button content
+- \`--atomix-btn-font-size\`: Font size of button text
+- \`--atomix-btn-border-radius\`: Border radius of button
+- \`--atomix-btn-transition\`: Transition effect for button states
+- \`--atomix-btn-bg\`: Background color of button
+- \`--atomix-btn-color\`: Text color of button
+- \`--atomix-btn-shadow\`: Shadow of button
+
+## Notes
+Buttons are essential for user interactions and should be used consistently throughout the application to maintain a cohesive experience. Consider the context and purpose when choosing the appropriate variant and size.
+        `,
       },
     },
   },
@@ -38,62 +146,121 @@ const meta = {
         'link',
       ],
       description: 'The visual style of the button',
-      defaultValue: 'primary',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'primary' },
+      },
     },
     size: {
       control: { type: 'select' },
       options: SIZES,
       description: 'The size of the button',
-      defaultValue: 'md',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' },
+      },
     },
     disabled: {
       control: 'boolean',
       description: 'Whether the button is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     icon: {
-      control: 'text',
+      control: 'object',
       description: 'Optional icon element to display in the button',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
     },
     iconOnly: {
       control: 'boolean',
       description: 'Whether the button should only display an icon',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     rounded: {
       control: 'boolean',
       description: 'Whether the button should have a fully rounded (pill) shape',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     glass: {
-      control: { type: 'boolean' },
+      control: 'object',
       description: 'Apply glass morphism effect to the button',
+      table: {
+        type: { summary: 'boolean | GlassConfig' },
+        defaultValue: { summary: 'false' },
+      },
     },
     loading: {
       control: 'boolean',
       description: 'Whether the button is in a loading state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     loadingText: {
       control: 'text',
       description: 'Custom text to display during loading',
+      table: {
+        type: { summary: 'string' },
+      },
     },
     fullWidth: {
       control: 'boolean',
       description: 'Whether the button should take full width',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     block: {
       control: 'boolean',
       description: 'Whether the button should be block-level',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     active: {
       control: 'boolean',
       description: 'Whether the button is in active state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     selected: {
       control: 'boolean',
       description: 'Whether the button is selected',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     iconPosition: {
       control: { type: 'select' },
       options: ['start', 'end'],
       description: 'Position of the icon',
+      table: {
+        type: { summary: '"start" | "end"' },
+        defaultValue: { summary: 'start' },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Click event handler',
+      table: {
+        type: { summary: '(event: React.MouseEvent) => void' },
+      },
     },
   },
 } satisfies Meta<typeof Button>;
@@ -118,152 +285,157 @@ const Icon = () => (
   </svg>
 );
 
+// ============================================================================
+// BASIC USAGE STORIES
+// ============================================================================
+
 /**
- * Primary button variant - the main call-to-action style.
+ * Basic button usage with minimal props
  */
-export const Primary: Story = {
+export const BasicUsage: Story = {
   args: {
-    label: 'Primary Button',
+    label: 'Basic Button',
     variant: 'primary',
     size: 'md',
   },
 };
 
 /**
- * Secondary button variant - used for secondary actions.
+ * Button with all available props configured
  */
-export const Secondary: Story = {
+export const WithAllProps: Story = {
   args: {
-    label: 'Secondary Button',
-    variant: 'secondary',
+    label: 'Complete Button',
+    variant: 'primary',
     size: 'md',
+    icon: <Icon />,
+    iconPosition: 'start',
+    rounded: true,
+    loading: false,
+    disabled: false,
   },
-};
-
-/**
- * Success button variant - indicates successful or positive actions.
- */
-export const Success: Story = {
-  args: {
-    label: 'Success Button',
-    variant: 'success',
-    size: 'md',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates Button with all props configured.',
+      },
+    },
   },
 };
 
-/**
- * Info button variant - used for informational actions.
- */
-export const Info: Story = {
-  args: {
-    label: 'Info Button',
-    variant: 'info',
-    size: 'md',
-  },
-};
+// ============================================================================
+// VARIANTS & STATES STORIES
+// ============================================================================
 
 /**
- * Warning button variant - indicates caution or warning actions.
+ * Shows all available button color variants
  */
-export const Warning: Story = {
-  args: {
-    label: 'Warning Button',
-    variant: 'warning',
-    size: 'md',
-  },
-};
-
-/**
- * Error button variant - indicates destructive or error actions.
- */
-export const Error: Story = {
-  args: {
-    label: 'Error Button',
-    variant: 'error',
-    size: 'md',
-  },
+export const AllVariants: Story = {
+  render: () => (
+    <div className="u-flex u-flex-wrap u-gap-2">
+      {THEME_COLORS.map(color => (
+        <Button key={color} label={color} variant={color as any} />
+      ))}
+    </div>
+  ),
 };
 
 /**
- * Outline primary button variant - outlined style with primary color.
+ * Shows all available outline button variants
  */
-export const OutlinePrimary: Story = {
-  args: {
-    label: 'Outline Primary',
-    variant: 'outline-primary',
-    size: 'md',
-  },
+export const AllOutlineVariants: Story = {
+  render: () => (
+    <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" />
+      <Button label="Outline Info" variant="outline-info" />
+      <Button label="Outline Warning" variant="outline-warning" />
+      <Button label="Outline Danger" variant="outline-danger" />
+      <Button label="Outline Light" variant="outline-light" />
+      <Button label="Outline Dark" variant="outline-dark" />
+    </div>
+  ),
 };
 
 /**
- * Outline secondary button variant - outlined style with secondary color.
+ * Shows all available button sizes
  */
-export const OutlineSecondary: Story = {
-  args: {
-    label: 'Outline Secondary',
-    variant: 'outline-secondary',
-    size: 'md',
-  },
+export const AllSizes: Story = {
+  render: () => (
+    <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" />
+    </div>
+  ),
 };
 
 /**
- * Link button variant - styled as a text link.
+ * Shows default state of the button (normal, interactive state)
  */
-export const LinkButton: Story = {
+export const DefaultState: Story = {
   args: {
-    label: 'Link Button',
-    variant: 'link',
+    label: 'Default Button',
+    variant: 'primary',
     size: 'md',
   },
 };
 
 /**
- * Small size button variant.
+ * Shows button in loading state with spinner
  */
-export const Small: Story = {
+export const LoadingState: Story = {
   args: {
-    label: 'Small Button',
+    label: 'Loading...',
     variant: 'primary',
-    size: 'sm',
+    size: 'md',
+    loading: true,
   },
 };
 
 /**
- * Medium size button variant (default).
+ * Shows button in disabled state (non-interactive)
  */
-export const Medium: Story = {
+export const DisabledState: Story = {
   args: {
-    label: 'Medium Button',
+    label: 'Disabled Button',
     variant: 'primary',
     size: 'md',
+    disabled: true,
   },
 };
 
 /**
- * Large size button variant.
+ * Shows button in active state
  */
-export const Large: Story = {
+export const ActiveState: Story = {
   args: {
-    label: 'Large Button',
+    label: 'Active Button',
     variant: 'primary',
-    size: 'lg',
+    size: 'md',
+    active: true,
   },
 };
 
 /**
- * Disabled button state - non-interactive button.
+ * Shows button in selected state
  */
-export const Disabled: Story = {
+export const SelectedState: Story = {
   args: {
-    label: 'Disabled Button',
+    label: 'Selected Button',
     variant: 'primary',
     size: 'md',
-    disabled: true,
+    selected: true,
   },
 };
 
+// ============================================================================
+// WITH FEATURES STORIES
+// ============================================================================
+
 /**
- * Button with icon - displays an icon alongside the label.
+ * Shows button with icon support
  */
 export const WithIcon: Story = {
   args: {
@@ -275,11 +447,23 @@ export const WithIcon: Story = {
 };
 
 /**
- * Icon-only button - displays only an icon without text.
+ * Shows icon positioned at start and end of button
+ */
+export const WithIconPosition: Story = {
+  render: () => (
+    <div className="u-flex u-gap-2">
+      <Button label="Icon Start" variant="primary" icon={<Icon />} iconPosition="start" />
+      <Button label="Icon End" variant="secondary" icon={<Icon />} iconPosition="end" />
+    </div>
+  ),
+};
+
+/**
+ * Shows button with icon only (no text)
  */
-export const IconOnly: Story = {
+export const WithIconOnly: Story = {
   args: {
-    label: 'Add',
+    label: 'Icon Only Button',
     variant: 'primary',
     size: 'md',
     icon: <Icon />,
@@ -288,1169 +472,313 @@ export const IconOnly: Story = {
 };
 
 /**
- * Showcase of all button color variants in a single view.
+ * Shows complex nested content in button
  */
-export const AllVariants: Story = {
-  args: {
-    label: 'Button',
-    variant: 'success',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Displays all available button color variants side by side for easy comparison.',
-      },
-    },
-  },
+export const WithChildren: Story = {
   render: () => (
-    <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" />
-      <Button label="Info" variant="info" />
-      <Button label="Warning" variant="warning" />
-      <Button label="Error" variant="error" />
-      <Button label="Light" variant="light" />
-      <Button label="Dark" variant="dark" />
-    </div>
+    <Button variant="primary">
+      Button with <strong>Complex Content</strong>
+    </Button>
   ),
 };
 
 /**
- * Showcase of all outline button variants in a single view.
+ * Shows button with helper text or description
  */
-export const AllOutlineVariants: Story = {
-  args: {
-    label: 'Button',
-    variant: 'outline-primary',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Displays all available outline button variants with transparent backgrounds and colored borders.',
-      },
-    },
-  },
+export const WithHelperText: Story = {
   render: () => (
-    <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" />
-      <Button label="Outline Info" variant="outline-info" />
-      <Button label="Outline Warning" variant="outline-warning" />
-      <Button label="Outline Error" variant="outline-error" />
-      <Button label="Outline Light" variant="outline-light" />
-      <Button label="Outline Dark" variant="outline-dark" />
+    <div className="u-flex u-flex-column u-gap-2">
+      <Button label="Button with Helper" variant="primary" />
+      <p className="u-m-0 u-text-sm">This is a helper text for the button</p>
     </div>
   ),
 };
 
+// ============================================================================
+// ADVANCED CONFIGURATION STORIES
+// ============================================================================
+
 /**
- * Showcase of all button sizes (small, medium, large) in a single view.
+ * Shows button with custom inline styles
  */
-export const AllSizes: Story = {
+export const CustomStyling: Story = {
   args: {
-    label: 'Button',
+    label: 'Custom Styled Button',
     variant: 'primary',
+    size: 'md',
   },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Compares all available button sizes to help choose the appropriate size for your use case.',
-      },
-    },
-  },
-  render: () => (
-    <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" />
-    </div>
+  render: args => (
+    <Button
+      {...args}
+      style={{
+        background: 'linear-gradient(45deg, #667eea, #764ba2)',
+        border: 'none',
+        boxShadow: '0 4px 15px rgba(0, 0, 0, 0.2)',
+      }}
+    />
   ),
 };
 
 /**
- * Showcase of button icon variants and icon-only buttons.
+ * Shows button with custom CSS class
  */
-export const IconButtonVariants: Story = {
+export const WithClassName: Story = {
   args: {
-    label: 'Button',
+    label: 'Styled with Class',
     variant: 'primary',
-    icon: <Icon />,
-    iconOnly: true,
+    size: 'md',
+    className: 'custom-button-style',
   },
-  render: () => (
-    <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 />} />
-      <Button label="Add" variant="primary" icon={<Icon />} iconOnly />
-      <Button label="Add" variant="secondary" icon={<Icon />} iconOnly />
-      <Button label="Add" variant="success" icon={<Icon />} iconOnly />
-    </div>
-  ),
 };
 
 /**
- * Rounded button - fully rounded (pill-shaped) button style.
+ * Shows button with additional HTML attributes
  */
-export const Rounded: Story = {
+export const WithAttributes: Story = {
   args: {
-    label: 'Rounded Button',
+    label: 'Button with Attributes',
     variant: 'primary',
     size: 'md',
-    rounded: true,
+    id: 'my-button',
+    'aria-label': 'My custom button',
+    'data-testid': 'test-button',
   },
 };
 
+// ============================================================================
+// EDGE CASES STORIES
+// ============================================================================
+
 /**
- * Showcase of all button variants with rounded (pill) shape.
+ * Shows how button handles very long text
  */
-export const RoundedVariants: Story = {
+export const LongText: Story = {
   args: {
-    label: 'Button',
+    label: 'Very long text that might overflow or wrap to multiple lines in the button component',
     variant: 'primary',
-    rounded: true,
+    size: 'md',
   },
-  render: () => (
-    <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 />
-      <Button label="Info" variant="info" rounded />
-      <Button label="Warning" variant="warning" rounded />
-      <Button label="Error" variant="error" rounded />
-      <Button label="Light" variant="light" rounded />
-      <Button label="Dark" variant="dark" rounded />
-    </div>
-  ),
 };
 
 /**
- * Button using the label prop for text content.
+ * Shows button behavior when icon is missing
  */
-export const WithLabel: Story = {
+export const NoIconFallback: Story = {
   args: {
-    label: 'Button with Label',
+    label: 'Button without Icon',
     variant: 'primary',
+    size: 'md',
+    // Intentionally not providing icon prop to show fallback
   },
 };
 
 /**
- * Button using children prop for text content.
+ * Shows button with async callback handling
  */
-export const WithChildren: Story = {
-  render: () => (
-    <Button variant="primary">
-      Button with Children
-    </Button>
-  ),
-};
+export const WithAsyncAction: Story = {
+  render: () => {
+    const [isLoading, setIsLoading] = useState(false);
 
-/**
- * Button with icon and text content as children.
- */
-export const WithIconAndText: Story = {
-  render: () => (
-    <Button variant="primary">
-      <Icon />
-      Add Item
-    </Button>
-  ),
-};
+    const handleClick = useCallback(async () => {
+      setIsLoading(true);
+      // Simulate async operation
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setIsLoading(false);
+    }, []);
 
-/**
- * Button with glass morphism effect enabled.
- */
-export const GlassEffect: Story = {
-  args: {
-    label: 'Glass Button',
-    variant: 'primary',
-    glass: true,
+    return (
+      <Button label="Async Action" variant="primary" loading={isLoading} onClick={handleClick} />
+    );
   },
-  decorators: [
-    Story => (
-      <div
-        style={{
-          background:
-            'url(https://cdn.pixabay.com/photo/2022/10/02/17/23/mushroom-7494046_1280.jpg)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          padding: '10rem 25rem',
-          borderRadius: '12px',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const GlassEffectCustomized: Story = {
-  args: {
-    label: 'Customized Glass',
-    variant: 'secondary',
-    glass: {
-      displacementScale: 60,
-      blurAmount: 2,
-      saturation: 180,
-      aberrationIntensity: 2,
-      cornerRadius: 12,
-      overLight: false,
-      mode: 'polar' as const,
-    },
-  },
-  decorators: [
-    Story => (
-      <div
-        style={{
-          background:
-            'url(https://cdn.pixabay.com/photo/2022/10/02/17/23/mushroom-7494046_1280.jpg)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          padding: '25rem',
-          borderRadius: '12px',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
 };
 
-export const GlassVariants: Story = {
-  args: {
-    label: 'Glass Button',
-    variant: 'primary',
-    glass: true,
-  },
-  render: () => (
-    <div
-      style={{
-        background:
-          'url(https://cdn.pixabay.com/photo/2021/06/14/22/46/milky-way-6337038_1280.jpg)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        padding: '25rem',
-        borderRadius: '12px',
-      }}
-    >
-      <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 />
-        <Button label="Info" variant="info" glass />
-        <Button label="Warning" variant="warning" glass />
-        <Button label="Error" variant="error" glass />
-        <Button label="Light" variant="light" glass />
-        <Button label="Dark" variant="dark" glass />
-      </div>
-    </div>
-  ),
-};
+// ============================================================================
+// INTEGRATION EXAMPLES STORIES
+// ============================================================================
 
-export const GlassOutlineVariants: Story = {
-  args: {
-    label: 'Glass Button',
-    variant: 'outline-primary',
-    glass: true,
-  },
-  render: () => (
-    <div
-      style={{
-        background:
-          'url(https://cdn.pixabay.com/photo/2018/08/15/13/10/new-year-background-3608029_1280.jpg)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        padding: '20rem 10rem',
-        borderRadius: '12px',
-      }}
-    >
-      <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 />
-        <Button label="Outline Info" variant="outline-info" glass />
-        <Button label="Outline Warning" variant="outline-warning" glass />
-        <Button label="Outline Error" variant="outline-error" glass />
-        <Button label="Outline Light" variant="outline-light" glass />
-        <Button label="Outline Dark" variant="outline-dark" glass />
-      </div>
-    </div>
-  ),
-};
-
-export const GlassSizes: Story = {
-  args: {
-    label: 'Glass Button',
-    variant: 'primary',
-    glass: true,
-  },
+/**
+ * Button used in a form context
+ */
+export const InForm: Story = {
   render: () => (
-    <div
-      style={{
-        background: 'url(https://cdn.pixabay.com/photo/2020/12/15/01/43/street-5832394_1280.jpg)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        padding: '10rem 20rem',
-        borderRadius: '12px',
-      }}
-    >
-      <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 />
-      </div>
-    </div>
+    <form className="u-flex u-flex-column u-gap-2">
+      <input type="text" placeholder="Enter name" className="u-p-2 u-mb-2 u-border u-rounded" />
+      <Button label="Submit Form" variant="primary" />
+    </form>
   ),
 };
 
-export const GlassWithIcons: Story = {
-  args: {
-    label: 'Glass Button',
-    variant: 'primary',
-    glass: true,
-    icon: <Icon />,
-  },
+/**
+ * Button used in a card component
+ */
+export const InCard: Story = {
   render: () => (
-    <div
-      style={{
-        background: 'url(https://cdn.pixabay.com/photo/2020/12/15/01/43/street-5832394_1280.jpg)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        padding: '25rem',
-        borderRadius: '12px',
-      }}
-    >
-      <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"
-          variant="error"
-          icon={<Icon />}
-          iconOnly
-          glass={{ cornerRadius: 12 }}
-        />
-        <Button
-          label="Rounded Glass"
-          variant="success"
-          icon={<Icon />}
-          rounded
-          glass={{ cornerRadius: 24 }}
-        />
-        <Button
-          label="Rounded Icon"
-          variant="info"
-          icon={<Icon />}
-          iconOnly
-          rounded
-          glass={{ cornerRadius: 50 }}
-        />
+    <div className="u-p-4 u-bg-white u-rounded-lg u-shadow u-w-64">
+      <h3 className="u-mt-0 u-mb-2">Sample Card</h3>
+      <p className="u-mb-2">Card content goes here...</p>
+      <div className="u-mt-2">
+        <Button label="Learn More" variant="primary" size="sm" />
       </div>
     </div>
   ),
 };
 
-export const GlassRounded: Story = {
-  args: {
-    label: 'Rounded Glass',
-    variant: 'primary',
-    glass: {
-      cornerRadius: 22,
-    },
-    rounded: true,
-  },
-  decorators: [
-    Story => (
-      <div
-        style={{
-          background: 'url(https://cdn.pixabay.com/photo/2020/12/15/01/43/street-5832394_1280.jpg)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          padding: '25rem',
-          borderRadius: '12px',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-// Comprehensive Glass Showcase
-export const GlassShowcase: Story = {
-  args: {
-    label: 'Glass Button',
-    variant: 'primary',
-    glass: true,
-  },
+/**
+ * Button used in a modal context
+ */
+export const InModal: Story = {
   render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-      {/* Primary Glass Variants */}
-      <div
-        style={{
-          background: 'url(https://cdn.pixabay.com/photo/2021/11/13/08/50/athens-6790780_1280.jpg)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          padding: '2rem',
-          borderRadius: '12px',
-        }}
-      >
-        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
-          Primary Glass Variants
-        </h3>
-        <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 />
-          <Button label="With Icon" variant="primary" icon={<Icon />} glass />
-          <Button label="Icon Only" variant="primary" icon={<Icon />} iconOnly glass />
-          <Button label="Rounded" variant="primary" rounded glass={{ cornerRadius: 24 }} />
-        </div>
-      </div>
-
-      {/* Outline Glass Variants */}
-      <div
-        style={{
-          background:
-            'url(https://cdn.pixabay.com/photo/2025/09/18/23/32/pattern-9842070_1280.png)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          padding: '2rem',
-          borderRadius: '12px',
-        }}
-      >
-        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
-          Outline Glass Variants
-        </h3>
-        <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 />
-          <Button label="Outline Error" variant="outline-error" glass />
-        </div>
-      </div>
-
-      {/* Custom Glass Configuration */}
-      <div
-        style={{
-          background: 'url(https://cdn.pixabay.com/photo/2019/09/29/17/21/greece-4513857_1280.jpg)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          padding: '2rem',
-          borderRadius: '12px',
-        }}
-      >
-        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
-          Custom Glass Effects
-        </h3>
-        <div className="u-flex u-flex-wrap u-gap-2">
-          <Button
-            label="Polar Mode"
-            variant="secondary"
-            glass={{
-              displacementScale: 60,
-              blurAmount: 2,
-              saturation: 180,
-              aberrationIntensity: 2,
-              cornerRadius: 12,
-              mode: 'polar' as const,
-            }}
-          />
-          <Button
-            label="Prominent Mode"
-            variant="info"
-            glass={{
-              displacementScale: 80,
-              blurAmount: 1,
-              saturation: 200,
-              aberrationIntensity: 3,
-              cornerRadius: 12,
-              mode: 'prominent' as const,
-            }}
-          />
-          <Button
-            label="Shader Mode"
-            variant="success"
-            glass={{
-              displacementScale: 50,
-              blurAmount: 0,
-              saturation: 140,
-              aberrationIntensity: 1,
-              cornerRadius: 12,
-              mode: 'shader' as const,
-            }}
-          />
-        </div>
-      </div>
-
-      {/* Light Background */}
-      <div
-        style={{
-          background: 'url(https://cdn.pixabay.com/photo/2019/09/29/17/21/greece-4513852_1280.jpg)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          padding: '2rem',
-          borderRadius: '12px',
-        }}
-      >
-        <h3 style={{ color: '#333', marginBottom: '1rem', fontSize: '1.2rem' }}>
-          Light Background
-        </h3>
-        <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 />
-          <Button
-            label="Over Light"
-            variant="primary"
-            glass={{
-              overLight: true,
-              displacementScale: 45,
-              saturation: 120,
-            }}
-          />
+    <div className="u-relative">
+      <div className="u-p-6 u-bg-white u-rounded-lg u-shadow-lg u-w-96">
+        <h3 className="u-mt-0 u-mb-2">Confirmation</h3>
+        <p className="u-mb-4">Are you sure you want to proceed?</p>
+        <div className="u-flex u-justify-end u-gap-2 u-mt-4">
+          <Button label="Cancel" variant="secondary" />
+          <Button label="Confirm" variant="primary" />
         </div>
       </div>
     </div>
   ),
 };
 
-// Glass Mode Variants - Standard
-export const GlassModeStandard: Story = {
-  args: {
-    label: 'Standard Glass Mode',
-    variant: 'primary',
-    glass: {
-      mode: 'standard',
-      displacementScale: 60,
-      blurAmount: 2,
-      saturation: 160,
-      aberrationIntensity: 2,
-      cornerRadius: 12,
-    },
-  },
-  render: args => (
-    <div
-      style={{
-        background: 'url(https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=1920)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        display: 'flex',
-        gap: '2rem',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: '95vw',
-        minHeight: '95vh',
-      }}
-    >
-      <div style={{ textAlign: 'center', color: 'white', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
-        <h3 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>Standard Glass Mode</h3>
-        <p style={{ fontSize: '0.875rem', opacity: 0.9 }}>
-          Classic glass morphism with blur and displacement
-        </p>
-      </div>
-      <Button {...args} />
-    </div>
-  ),
-};
-
-// Glass Mode Variants - Polar
-export const GlassModePolar: Story = {
-  args: {
-    label: 'Polar Glass Mode',
-    variant: 'secondary',
-    glass: {
-      mode: 'polar',
-      displacementScale: 80,
-      blurAmount: 1.5,
-      saturation: 180,
-      aberrationIntensity: 3,
-      cornerRadius: 12,
-    },
-  },
-  render: args => (
-    <div
-      style={{
-        background: 'url(https://images.unsplash.com/photo-1557683316-973673baf926?w=1920)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        borderRadius: '12px',
-        display: 'flex',
-        gap: '2rem',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: '95vw',
-        minHeight: '95vh',
-      }}
-    >
-      <div style={{ textAlign: 'center', color: 'white', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
-        <h3 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>Polar Glass Mode</h3>
-        <p style={{ fontSize: '0.875rem', opacity: 0.9 }}>Radial distortion effect from center</p>
-      </div>
-      <Button {...args} />
+/**
+ * Button composed with other components
+ */
+export const WithOtherComponents: Story = {
+  render: () => (
+    <div className="u-flex u-items-center u-gap-2">
+      <Button label="Previous" variant="secondary" />
+      <span className="u-text-sm">Page 1 of 10</span>
+      <Button label="Next" variant="primary" />
     </div>
   ),
 };
 
-// Glass Mode Variants - Prominent
-export const GlassModeProminent: Story = {
-  args: {
-    label: 'Prominent Glass Mode',
-    variant: 'success',
-    glass: {
-      mode: 'prominent',
-      displacementScale: 100,
-      blurAmount: 2.5,
-      saturation: 200,
-      aberrationIntensity: 4,
-      cornerRadius: 12,
-    },
-  },
-  render: args => (
-    <div
-      style={{
-        background: 'url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=1920)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        borderRadius: '12px',
-        display: 'flex',
-        gap: '2rem',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: '95vw',
-        minHeight: '95vh',
-      }}
-    >
-      <div style={{ textAlign: 'center', color: 'white', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
-        <h3 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>Prominent Glass Mode</h3>
-        <p style={{ fontSize: '0.875rem', opacity: 0.9 }}>Enhanced distortion with maximum depth</p>
-      </div>
-      <Button {...args} />
-    </div>
-  ),
-};
+// ============================================================================
+// ACCESSIBILITY STORIES
+// ============================================================================
 
-// Glass Mode Variants - Shader
-export const GlassModeShader: Story = {
-  args: {
-    label: 'Shader Glass Mode',
-    variant: 'info',
-    glass: {
-      mode: 'shader',
-      shaderVariant: 'liquidGlass',
-      displacementScale: 70,
-      blurAmount: 1.8,
-      saturation: 170,
-      cornerRadius: 12,
-    },
-  },
-  render: args => (
-    <div
-      style={{
-        background: 'url(https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1920)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        borderRadius: '12px',
-        display: 'flex',
-        gap: '2rem',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: '95vw',
-        minHeight: '95vh',
-      }}
-    >
-      <div style={{ textAlign: 'center', color: 'white', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
-        <h3 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>Shader Glass Mode</h3>
-        <p style={{ fontSize: '0.875rem', opacity: 0.9 }}>GPU-accelerated liquid glass effect</p>
-      </div>
-      <Button {...args} />
-    </div>
-  ),
-};
-
-// All Glass Modes Comparison
-export const AllGlassModes: Story = {
+/**
+ * Shows proper ARIA labels for accessibility
+ */
+export const WithAriaLabels: Story = {
   render: () => (
-    <div
-      style={{
-        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        padding: '3rem',
-        borderRadius: '12px',
-        minHeight: '90vh',
-        minWidth: '90vw',
-      }}
-    >
-      <div style={{ width: '90vw', margin: '0 auto' }}>
-        <h2
-          style={{
-            textAlign: 'center',
-            color: 'white',
-            marginBottom: '3rem',
-            fontSize: '2rem',
-            textShadow: '0 2px 8px rgba(0,0,0,0.5)',
-          }}
-        >
-          Glass Mode Variants Comparison
-        </h2>
-
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
-            gap: '2rem',
-          }}
-        >
-          {/* Standard Mode */}
-          <div
-            style={{
-              background: 'rgba(255,255,255,0.1)',
-              padding: '2rem',
-              borderRadius: '12px',
-              textAlign: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-          >
-            <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.25rem' }}>Standard</h3>
-            <p
-              style={{
-                color: 'rgba(255,255,255,0.8)',
-                fontSize: '0.875rem',
-                marginBottom: '1.5rem',
-              }}
-            >
-              Classic blur and displacement
-            </p>
-            <Button
-              label="Standard Glass"
-              variant="primary"
-              glass={{
-                mode: 'standard',
-                displacementScale: 60,
-                blurAmount: 2,
-                saturation: 160,
-                aberrationIntensity: 2,
-              }}
-            />
-          </div>
-
-          {/* Polar Mode */}
-          <div
-            style={{
-              background: 'rgba(255,255,255,0.1)',
-              padding: '2rem',
-              borderRadius: '12px',
-              textAlign: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-          >
-            <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.25rem' }}>Polar</h3>
-            <p
-              style={{
-                color: 'rgba(255,255,255,0.8)',
-                fontSize: '0.875rem',
-                marginBottom: '1.5rem',
-              }}
-            >
-              Radial distortion effect
-            </p>
-            <Button
-              label="Polar Glass"
-              variant="secondary"
-              glass={{
-                mode: 'polar',
-                displacementScale: 80,
-                blurAmount: 1.5,
-                saturation: 180,
-                aberrationIntensity: 3,
-              }}
-            />
-          </div>
-
-          {/* Prominent Mode */}
-          <div
-            style={{
-              background: 'rgba(255,255,255,0.1)',
-              padding: '2rem',
-              borderRadius: '12px',
-              textAlign: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-          >
-            <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.25rem' }}>Prominent</h3>
-            <p
-              style={{
-                color: 'rgba(255,255,255,0.8)',
-                fontSize: '0.875rem',
-                marginBottom: '1.5rem',
-              }}
-            >
-              Maximum depth and distortion
-            </p>
-            <Button
-              label="Prominent Glass"
-              variant="success"
-              glass={{
-                mode: 'prominent',
-                displacementScale: 100,
-                blurAmount: 2.5,
-                saturation: 200,
-                aberrationIntensity: 4,
-              }}
-            />
-          </div>
-
-          {/* Shader Mode */}
-          <div
-            style={{
-              background: 'rgba(255,255,255,0.1)',
-              padding: '2rem',
-              borderRadius: '12px',
-              textAlign: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-          >
-            <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.25rem' }}>Shader</h3>
-            <p
-              style={{
-                color: 'rgba(255,255,255,0.8)',
-                fontSize: '0.875rem',
-                marginBottom: '1.5rem',
-              }}
-            >
-              GPU-accelerated liquid glass
-            </p>
-            <Button
-              label="Shader Glass"
-              variant="info"
-              glass={{
-                mode: 'shader',
-                shaderVariant: 'liquidGlass',
-                displacementScale: 70,
-                blurAmount: 1.8,
-                saturation: 170,
-              }}
-            />
-          </div>
-        </div>
-
-        {/* All Variants with Different Colors */}
-        <div style={{ marginTop: '3rem' }}>
-          <h3
-            style={{
-              textAlign: 'center',
-              color: 'white',
-              marginBottom: '2rem',
-              fontSize: '1.5rem',
-              textShadow: '0 2px 8px rgba(0,0,0,0.5)',
-            }}
-          >
-            All Color Variants with Glass
-          </h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem', justifyContent: 'center' }}>
-            <Button label="Primary" variant="primary" glass />
-            <Button label="Secondary" variant="secondary" glass />
-            <Button label="Success" variant="success" glass />
-            <Button label="Info" variant="info" glass />
-            <Button label="Warning" variant="warning" glass />
-            <Button label="Error" variant="error" glass />
-            <Button label="Light" variant="light" glass />
-            <Button label="Dark" variant="dark" glass />
-          </div>
-        </div>
-      </div>
+    <div className="u-flex u-flex-column u-gap-2">
+      <Button label="Save" variant="primary" aria-label="Save document" />
+      <Button label="Delete" variant="error" aria-label="Delete item permanently" />
     </div>
   ),
 };
 
-// Glass Button States Showcase
-export const GlassStatesShowcase: Story = {
+/**
+ * Shows button with keyboard navigation support
+ */
+export const WithKeyboardNavigation: Story = {
   render: () => (
-    <div
-      style={{
-        background: 'url(https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        padding: '3rem',
-        borderRadius: '12px',
-        minHeight: '90vh',
-      }}
-    >
-      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
-        <h2
-          style={{
-            textAlign: 'center',
-            color: 'white',
-            marginBottom: '3rem',
-            fontSize: '2rem',
-            textShadow: '0 2px 8px rgba(0,0,0,0.5)',
-          }}
-        >
-          Glass Button States & Interactions
-        </h2>
-
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
-          {/* Sizes */}
-          <div
-            style={{
-              background: 'rgba(255,255,255,0.08)',
-              padding: '2rem',
-              borderRadius: '12px',
-              backdropFilter: 'blur(10px)',
-            }}
-          >
-            <h3 style={{ color: 'white', marginBottom: '1.5rem' }}>Sizes</h3>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
-              <Button label="Small" variant="primary" size="sm" glass={{ cornerRadius: 8 }} />
-              <Button label="Medium" variant="primary" size="md" glass={{ cornerRadius: 12 }} />
-              <Button label="Large" variant="primary" size="lg" glass={{ cornerRadius: 16 }} />
-            </div>
-          </div>
-
-          {/* With Icons */}
-          <div
-            style={{
-              background: 'rgba(255,255,255,0.08)',
-              padding: '2rem',
-              borderRadius: '12px',
-              backdropFilter: 'blur(10px)',
-            }}
-          >
-            <h3 style={{ color: 'white', marginBottom: '1.5rem' }}>With Icons</h3>
-            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-              <Button label="With Icon" variant="primary" icon={<Icon />} glass />
-              <Button label="Icon Only" variant="secondary" icon={<Icon />} iconOnly glass />
-              <Button
-                label="Rounded"
-                variant="success"
-                icon={<Icon />}
-                rounded
-                glass={{ cornerRadius: 24 }}
-              />
-            </div>
-          </div>
-
-          {/* Outline Variants */}
-          <div
-            style={{
-              background: 'rgba(255,255,255,0.08)',
-              padding: '2rem',
-              borderRadius: '12px',
-              backdropFilter: 'blur(10px)',
-            }}
-          >
-            <h3 style={{ color: 'white', marginBottom: '1.5rem' }}>Outline Variants</h3>
-            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-              <Button label="Outline Primary" variant="outline-primary" glass />
-              <Button label="Outline Secondary" variant="outline-secondary" glass />
-              <Button label="Outline Success" variant="outline-success" glass />
-              <Button label="Outline Error" variant="outline-error" glass />
-            </div>
-          </div>
-
-          {/* Disabled State */}
-          <div
-            style={{
-              background: 'rgba(255,255,255,0.08)',
-              padding: '2rem',
-              borderRadius: '12px',
-              backdropFilter: 'blur(10px)',
-            }}
-          >
-            <h3 style={{ color: 'white', marginBottom: '1.5rem' }}>Disabled State</h3>
-            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-              <Button label="Disabled Glass" variant="primary" disabled glass />
-              <Button label="Disabled Outline" variant="outline-primary" disabled glass />
-            </div>
-          </div>
-        </div>
-      </div>
+    <div className="u-flex u-gap-2">
+      <Button label="Button 1" variant="primary" tabIndex={0} />
+      <Button label="Button 2" variant="secondary" tabIndex={0} />
+      <Button label="Button 3" variant="success" tabIndex={0} />
     </div>
   ),
 };
 
 /**
- * Button in loading state - shows loading spinner.
+ * Shows button with screen reader announcements
  */
-export const Loading: Story = {
-  args: {
-    label: 'Save',
-    variant: 'primary',
-    loading: true,
-  },
-};
-
-/**
- * Button in loading state with custom loading text.
- */
-export const LoadingWithText: Story = {
-  args: {
-    label: 'Save',
-    variant: 'primary',
-    loading: true,
-    loadingText: 'Saving...',
-  },
-};
-
-export const LoadingStates: Story = {
+export const WithScreenReader: Story = {
   render: () => (
-    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-      <Button label="Loading Primary" variant="primary" loading />
-      <Button label="Loading Secondary" variant="secondary" loading />
-      <Button label="Saving..." variant="success" loading loadingText="Saving..." />
-      <Button label="Deleting..." variant="error" loading loadingText="Deleting..." />
+    <div className="u-flex u-gap-2">
+      <Button label="Announcement" variant="primary" aria-describedby="announcement-description" />
+      <div id="announcement-description" className="u-sr-only">
+        This button triggers an announcement
+      </div>
     </div>
   ),
 };
 
 /**
- * Full-width button - takes the full width of its container.
+ * Shows button in high contrast theme
  */
-export const FullWidth: Story = {
-  args: {
-    label: 'Full Width Button',
-    variant: 'primary',
-    fullWidth: true,
-  },
-};
-
-export const FullWidthButtons: Story = {
+export const HighContrastMode: Story = {
   render: () => (
-    <div style={{ width: '400px', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <Button label="Full Width Primary" variant="primary" fullWidth />
-      <Button label="Full Width Secondary" variant="secondary" fullWidth />
-      <Button label="Full Width Loading" variant="success" fullWidth loading />
+    <div style={{ backgroundColor: '#000', padding: '1rem' }}>
+      <Button label="High Contrast Button" variant="light" />
     </div>
   ),
 };
 
-/**
- * Block-level button - displays as a block element.
- */
-export const Block: Story = {
-  args: {
-    label: 'Block Button',
-    variant: 'primary',
-    block: true,
-  },
-};
+// ============================================================================
+// PERFORMANCE STORIES
+// ============================================================================
 
 /**
- * Button with icon positioned at the start (left side).
+ * Shows mobile-optimized button configuration
  */
-export const IconStart: Story = {
+export const OptimizedForMobile: Story = {
   args: {
-    label: 'Icon Start',
+    label: 'Touch-Friendly',
     variant: 'primary',
-    icon: <Icon />,
-    iconPosition: 'start',
+    size: 'lg',
   },
 };
 
 /**
- * Button with icon positioned at the end (right side).
+ * Shows multiple button instances together
  */
-export const IconEnd: Story = {
-  args: {
-    label: 'Icon End',
-    variant: 'primary',
-    icon: <Icon />,
-    iconPosition: 'end',
-  },
-};
-
-export const IconPositions: Story = {
+export const WithManyInstances: Story = {
   render: () => (
-    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-      <Button label="Icon Start" variant="primary" icon={<Icon />} iconPosition="start" />
-      <Button label="Icon End" variant="secondary" icon={<Icon />} iconPosition="end" />
-      <Button label="Loading Start" variant="success" loading iconPosition="start" />
+    <div className="u-flex u-flex-wrap u-gap-2">
+      {Array.from({ length: 15 }).map((_, i) => (
+        <Button key={i} label={`Button ${i + 1}`} variant="primary" size="sm" />
+      ))}
     </div>
   ),
 };
 
+// ============================================================================
+// GLASS EFFECT STORIES
+// ============================================================================
+
 /**
- * Button in active state - visually indicates active/pressed state.
+ * Shows button with glass effect enabled
  */
-export const Active: Story = {
-  args: {
-    label: 'Active Button',
-    variant: 'primary',
-    active: true,
-  },
+export const WithGlassEffect: Story = {
+  render: () => (
+    <div
+      className="u-bg-cover u-bg-center u-p-10 u-rounded-xl"
+      style={{
+        backgroundImage:
+          'url(https://cdn.pixabay.com/photo/2022/10/02/17/23/mushroom-7494046_1280.jpg)',
+      }}
+    >
+      <div className="u-flex u-flex-wrap u-gap-2">
+        {THEME_COLORS.map(color => (
+          <Button key={color} label={color} variant={color as any} glass={true} />
+        ))}
+      </div>
+    </div>
+  ),
 };
 
 /**
- * Button in selected state - visually indicates selected state.
+ * Shows button with custom glass settings
  */
-export const Selected: Story = {
+export const WithCustomGlassSettings: Story = {
   args: {
-    label: 'Selected Button',
+    label: 'Custom Glass',
     variant: 'primary',
-    selected: true,
-  },
-};
-
-/**
- * Comprehensive example showcasing multiple button features and states.
- */
-export const Comprehensive: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'A comprehensive example demonstrating various button features including loading states, layout variants, icon positioning, and different states all in one view.',
-      },
+    size: 'md',
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 1,
+      cornerRadius: 16,
+      mode: 'polar',
     },
   },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', maxWidth: '600px' }}>
-      <div>
-        <h3 style={{ marginBottom: '1rem' }}>Loading States</h3>
-        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-          <Button label="Save" variant="primary" loading />
-          <Button label="Delete" variant="error" loading loadingText="Deleting..." />
-        </div>
-      </div>
-
-      <div>
-        <h3 style={{ marginBottom: '1rem' }}>Layout Variants</h3>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-          <Button label="Full Width Button" variant="primary" fullWidth />
-          <Button label="Block Button" variant="secondary" block />
-        </div>
-      </div>
-
-      <div>
-        <h3 style={{ marginBottom: '1rem' }}>Icon Positioning</h3>
-        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-          <Button label="Icon Start" variant="primary" icon={<Icon />} iconPosition="start" />
-          <Button label="Icon End" variant="secondary" icon={<Icon />} iconPosition="end" />
-        </div>
-      </div>
-
-      <div>
-        <h3 style={{ marginBottom: '1rem' }}>States</h3>
-        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-          <Button label="Active" variant="primary" active />
-          <Button label="Selected" variant="success" selected />
-          <Button label="Loading" variant="info" loading />
-          <Button label="Disabled" variant="warning" disabled />
-        </div>
-      </div>
-    </div>
-  ),
+  decorators: [
+    withBackground('https://cdn.pixabay.com/photo/2021/06/14/22/46/milky-way-6337038_1280.jpg'),
+  ],
 };