@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapGraph/USE_CASES.md

@@ -1,66 +0,0 @@
-# Test Cases: CapGraph (Antd v3→v6)
-
-**Component**: CapGraph  
-**Complexity**: medium (≤20 test cases)  
-**Source**: blaze-ui/components/CapGraph/
-
----
-
-## Use cases (for Storybook & migration validation)
-
-| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
-|----|----------|--------------|---------------------------|----------|-----------------|--------|
-| UC-001 | All core prop variants | `data`, `xAxis`, `yAxis`, `graphList` (type, groupBy, colors, shape, showlabel, label), `legend` (marker, position, title), `size`, `scale`, `height` | Chart renders with correct axes, series, legend, and dimensions | P1 | PropVariants | Grouped size, scale, legend, graphList config |
-| UC-002 | Visual states | Default; `showGuide` + `guide`; `coord`; `y1Axis` + `y1AxisProps`; `graphList: []` | Optional sections (guide, second axis, coord) show/hide; empty graphList renders chart shell without Geoms | P1 | VisualStates | Grouped optional visual features |
-| UC-003 | Tooltip behavior and styling | Default tooltip; `containerTemplate`, `itemTemplate`; `g2Tooltip`, `g2TooltipList`, `g2TooltipListItem`; `tooltipData`; `showTooltip`/`tooltipDisable` on graphList item | Tooltip appears on hover with correct content and custom styles; can be disabled or fully custom per series | P0 | Tooltip | Grouped all tooltip props and behavior |
-| UC-004 | Content variants | Normal `data`; `data: []`; long data (many points) | Chart renders; empty data handled without crash; long data doesn’t break layout/performance | P1 | ContentVariants | Grouped normal/empty/long content |
-| UC-005 | Styling and chart config | `height`, `chartProps`, `guide.style` | Chart height and BizCharts options applied; guide text uses custom style | P2 | Styling | Grouped height + chartProps + guide style |
-| UC-006 | Axis configuration | `xAxisProps`, `yAxisProps`, `y1AxisProps` | Axis labels, ticks, and scale config applied for x, y, and optional y1 | P1 | AxisConfig | Grouped all axis prop overrides |
-| UC-007 | Coord and Guide | `coord` (e.g. polar); `showGuide` with `guide` (position, content, style) | Coord transforms chart (e.g. polar); guide text renders at given positions with content/style | P2 | CoordAndGuide | Grouped coord + guide usage |
-| UC-008 | Legend variants | `legend`: marker type (e.g. circle), position (e.g. bottom-center), title, spread `legendProps` | Legend renders with correct marker, position, and title | P1 | LegendVariants | Grouped legend options |
-| UC-009 | Geom types and options | `graphList`: type (line/bar/area/etc), `groupBy`, `colors`, `shape`; `showlabel` + `label` | Correct geometry and optional labels per series | P1 | GeomTypes | Grouped Geom type and label config |
-| UC-010 | Edge cases | `graphList: []`; omit optional props (use defaults); `data` with missing or partial keys for xAxis/yAxis | No crash; default height/empty graphList; graceful handling of malformed data | P0 | EdgeCases | Production-breaking only |
-| UC-011 | Tooltip template callback | `containerTemplate(tooltipData, tooltipIndex)` | Custom template receives current tooltipData and tooltipIndex (hovered point) | P2 | TooltipTemplate | Events/callbacks grouped |
-| UC-012 | Migration parity (v3 → v6) | Same props used in v3 and v6 (BizCharts/Chart) | Same visual and tooltip behavior after upgrade | P1 | MigrationParity | v3 vs v6 parity check |
-
----
-
-## Summary
-
-- **Total**: 12 use cases (within medium limit of 20).
-- **P0**: UC-003 (Tooltip), UC-010 (Edge cases).
-- **P1**: UC-001, UC-002, UC-004, UC-006, UC-008, UC-009, UC-012.
-- **P2**: UC-005, UC-007, UC-011.
-
-## Testing notes (from command)
-
-- Use **React Testing Library** with **Jest**.
-- Prefer `data-testid` for querying (add to CapGraph wrapper/container if needed).
-- Do **not** mock Cap UI Library components unless instructed.
-- Avoid `getByRole` for chart internals; query by testid or container.
-- Keep tests focused; merge scenarios to stay within limits.
-
----
-
-## Google Sheets payload (for `GOOGLESHEETS_VALUES_UPDATE`)
-
-**Spreadsheet ID**: `1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg`  
-**Range**: `CapGraph!A1`
-
-```json
-[
-  ["ID", "Use Case", "Props/Config", "Expected Visual/Behavior", "Priority", "Storybook Story", "Notes"],
-  ["UC-001", "All core prop variants", "data, xAxis, yAxis, graphList (type, groupBy, colors, shape, showlabel, label), legend (marker, position, title), size, scale, height", "Chart renders with correct axes, series, legend, and dimensions", "P1", "PropVariants", "Grouped size, scale, legend, graphList config"],
-  ["UC-002", "Visual states", "Default; showGuide + guide; coord; y1Axis + y1AxisProps; graphList: []", "Optional sections (guide, second axis, coord) show/hide; empty graphList renders chart shell without Geoms", "P1", "VisualStates", "Grouped optional visual features"],
-  ["UC-003", "Tooltip behavior and styling", "Default tooltip; containerTemplate, itemTemplate; g2Tooltip, g2TooltipList, g2TooltipListItem; tooltipData; showTooltip/tooltipDisable on graphList item", "Tooltip appears on hover with correct content and custom styles; can be disabled or fully custom per series", "P0", "Tooltip", "Grouped all tooltip props and behavior"],
-  ["UC-004", "Content variants", "Normal data; data: []; long data (many points)", "Chart renders; empty data handled without crash; long data doesn't break layout/performance", "P1", "ContentVariants", "Grouped normal/empty/long content"],
-  ["UC-005", "Styling and chart config", "height, chartProps, guide.style", "Chart height and BizCharts options applied; guide text uses custom style", "P2", "Styling", "Grouped height + chartProps + guide style"],
-  ["UC-006", "Axis configuration", "xAxisProps, yAxisProps, y1AxisProps", "Axis labels, ticks, and scale config applied for x, y, and optional y1", "P1", "AxisConfig", "Grouped all axis prop overrides"],
-  ["UC-007", "Coord and Guide", "coord (e.g. polar); showGuide with guide (position, content, style)", "Coord transforms chart (e.g. polar); guide text renders at given positions with content/style", "P2", "CoordAndGuide", "Grouped coord + guide usage"],
-  ["UC-008", "Legend variants", "legend: marker type (e.g. circle), position (e.g. bottom-center), title, spread legendProps", "Legend renders with correct marker, position, and title", "P1", "LegendVariants", "Grouped legend options"],
-  ["UC-009", "Geom types and options", "graphList: type (line/bar/area/etc), groupBy, colors, shape; showlabel + label", "Correct geometry and optional labels per series", "P1", "GeomTypes", "Grouped Geom type and label config"],
-  ["UC-010", "Edge cases", "graphList: []; omit optional props (use defaults); data with missing or partial keys for xAxis/yAxis", "No crash; default height/empty graphList; graceful handling of malformed data", "P0", "EdgeCases", "Production-breaking only"],
-  ["UC-011", "Tooltip template callback", "containerTemplate(tooltipData, tooltipIndex)", "Custom template receives current tooltipData and tooltipIndex (hovered point)", "P2", "TooltipTemplate", "Events/callbacks grouped"],
-  ["UC-012", "Migration parity (v3 → v6)", "Same props used in v3 and v6 (BizCharts/Chart)", "Same visual and tooltip behavior after upgrade", "P1", "MigrationParity", "v3 vs v6 parity check"]
-]
-```

package/CapHamburgerMenu/README.md

@@ -1,234 +0,0 @@
-# CapHamburgerMenu
-
-A hamburger menu component for mobile view that provides a drawer-based navigation menu with organization selection, product switching, and sidebar content.
-
-## Migration from Ant Design v3 to v6
-
-This component has been migrated from Ant Design v3 to v6 with the following changes:
-
-### Breaking Changes
-
-#### 1. Component Structure Changes
-
-| Change | Description | Migration Guide |
-|--------|-------------|-----------------|
-| Class Component → Functional Component | Component converted from class to functional component | No API changes required, internal refactoring only |
-| PropTypes → TypeScript | All PropTypes removed, replaced with TypeScript interfaces | No migration needed, types are now in `types.ts` |
-| styled-components → CSS Modules | Removed styled-components dependency, using CSS Modules | No API changes, styling approach updated internally |
-
-#### 2. Ant Design Drawer Component API Changes
-
-The component uses `CapDrawer` which handles the `visible` → `open` prop migration internally. No changes needed in consumer code.
-
-### Backward Compatibility
-
-The component maintains full backward compatibility:
-- All props remain the same
-- Component behavior is unchanged
-- Internal implementation updated to use modern React patterns
-
-### Style Changes
-
-**Approach**: Most styling uses CSS Modules with design tokens. Some Ant Design overrides remain due to structural requirements:
-
-- **Drawer width (75% viewport)**: Cannot be tokenized, uses `:global` override with comment
-- **Custom padding values**: Cannot use single-value tokens, uses CSS Modules
-- **Layout positioning**: Footer positioning requires structural overrides
-
-All overrides include `// OVERRIDE:` comments explaining why tokenization is not possible.
-
-### Code Improvements
-
-1. **Removed PropTypes**: Replaced with TypeScript interfaces in `types.ts`
-2. **Removed defaultProps**: Using destructuring with default values in function arguments
-3. **Converted to functional component**: Modern React hooks (`useState`, `useEffect`, `useMemo`)
-4. **Removed styled-components**: Replaced with CSS Modules
-5. **TypeScript support**: Full type definitions for all props and internal structures
-6. **Improved state management**: Using React hooks for cleaner state handling
-
-### What Stayed the Same
-
-- All component props and API
-- Component behavior and functionality
-- Sidebar menu structure
-- Organization selection logic
-- Product switching functionality
-- Visual appearance (styling preserved)
-
-### What Changed
-
-- **Removed**: `PropTypes` (replaced with TypeScript types)
-- **Removed**: `styled-components` dependency (replaced with CSS Modules)
-- **Removed**: Class component syntax (converted to functional component)
-- **Updated**: State management (using React hooks)
-- **Added**: TypeScript type definitions in `types.ts`
-- **Added**: CSS Modules with `styles[classname]` syntax
-
-## Props
-
-### Standard Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `goToHome` | `() => void` | - | Function to navigate to home page |
-| `placement` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'left'` | Drawer placement |
-| `productName` | `string` | - | Product name to display in drawer header |
-| `userData` | `UserData` | `{}` | User data including organization and module information |
-| `loadStorageItem` | `(key: string) => string \| number \| null` | - | Function to load item from storage |
-| `changeOrgEntity` | `(orgId: number, ouId?: number) => void` | - | Function to change organization entity |
-| `selectOrganization` | `string` | - | Text for organization selection label |
-| `sidebarContent` | `SidebarMenuItem[]` | `[]` | Sidebar menu content items |
-| `selectedSidebarItem` | `string` | - | Currently selected sidebar item value |
-| `onSidebarClick` | `(item: SidebarMenuItem) => void` | - | Handler for sidebar item click |
-| `noResultsText` | `string` | - | Text to display when no results found |
-| `footer` | `React.ReactElement` | - | Footer element to display in drawer |
-| `screenHeight` | `number` | - | Screen height in pixels (for virtualized list) |
-| `screenWidth` | `number` | - | Screen width in pixels (for virtualized list) |
-| `insights` | `string` | - | Insights product name (for internationalization) |
-| `selectProduct` | `string` | - | Text for product selection label |
-| `defaultSelectedProduct` | `string` | - | Default selected product value |
-
-### Type Definitions
-
-#### SidebarMenuItem
-
-```typescript
-interface SidebarMenuItem {
-  label: string;
-  value: string;
-  children?: SidebarMenuItem[];
-}
-```
-
-#### UserData
-
-```typescript
-interface UserData {
-  user?: {
-    loginName?: string;
-    org_id?: string | number;
-    proxyOrgList?: Array<{
-      orgID: string | number;
-      orgName: string;
-      ouList?: Array<{
-        ouName: string;
-        ouID: string | number;
-      }>;
-    }>;
-    accessibleOUList?: Record<string, string | number>;
-  };
-  currentOrgDetails?: {
-    module_details?: Array<{
-      name: string;
-      namespace: string;
-      url: string;
-      code: string;
-    }>;
-  };
-  orgDetails?: {
-    name?: string;
-    org_id?: string | number;
-  };
-}
-```
-
-## Usage
-
-### Basic Example
-
-```tsx
-import CapHamburgerMenu from '@capillarytech/blaze-ui/components/CapHamburgerMenu';
-
-const MyComponent = () => {
-  const sidebarContent = [
-    {
-      label: 'Dashboard',
-      value: 'dashboard',
-    },
-    {
-      label: 'Reports',
-      value: 'reports',
-      children: [
-        { label: 'Sales Report', value: 'sales-report' },
-        { label: 'Customer Report', value: 'customer-report' },
-      ],
-    },
-  ];
-
-  return (
-    <CapHamburgerMenu
-      productName="My Product"
-      sidebarContent={sidebarContent}
-      userData={{
-        user: {
-          loginName: 'john.doe',
-        },
-      }}
-      loadStorageItem={(key) => localStorage.getItem(key)}
-      changeOrgEntity={(orgId, ouId) => {
-        console.log('Changed org:', orgId, ouId);
-      }}
-      selectOrganization="Select Organization"
-      onSidebarClick={(item) => {
-        console.log('Clicked:', item.value);
-      }}
-    />
-  );
-};
-```
-
-### With Organization Selection
-
-```tsx
-<CapHamburgerMenu
-  productName="Analytics"
-  userData={{
-    user: {
-      loginName: 'user@example.com',
-      proxyOrgList: [
-        {
-          orgID: 1,
-          orgName: 'Organization 1',
-        },
-        {
-          orgID: 2,
-          orgName: 'Organization 2',
-        },
-      ],
-    },
-    orgDetails: {
-      name: 'Organization 1',
-      org_id: 1,
-    },
-  }}
-  loadStorageItem={(key) => {
-    const value = localStorage.getItem(key);
-    return value ? parseInt(value, 10) : null;
-  }}
-  changeOrgEntity={(orgId, ouId) => {
-    localStorage.setItem('orgID', String(orgId));
-    if (ouId) {
-      localStorage.setItem('ouId', String(ouId));
-    }
-  }}
-  selectOrganization="Select Organization"
-  screenHeight={window.innerHeight}
-  screenWidth={window.innerWidth}
-/>
-```
-
-## Dependencies
-
-The component uses the following external packages (already included in `blaze-ui` dependencies):
-
-- `react-virtualized`: For virtualized list rendering
-- `semantic-ui-react`: For List component
-- `lodash`: For utility functions (peer dependency)
-
-## Notes
-
-- The component is designed for mobile views
-- Organization selection uses virtualized lists for performance
-- Product switching navigates to different module URLs
-- Sidebar menu supports nested items with expand/collapse functionality
-- Component uses CSS Modules for styling with design tokens where possible

package/CapHamburgerMenu/USE_CASES.md

@@ -1,48 +0,0 @@
-# Test Cases: CapHamburgerMenu (Antd v3→v6)
-
-## Use Cases
-
-| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
-|----|----------|--------------|-------------------------|----------|-----------------|-------|
-| UC-001 | Drawer open/close interactions | Click hamburger icon | Drawer opens from left side, clicking icon again closes drawer, clicking outside closes drawer | P0 | DrawerInteractions | Core functionality - drawer toggle |
-| UC-002 | Sidebar content rendering - empty state | sidebarContent: [] or undefined | No menu items displayed, only header with logo and user info | P1 | EmptySidebar | Empty state handling |
-| UC-003 | Sidebar content rendering - flat menu items | sidebarContent: [{label: "Item1", value: "1"}, {label: "Item2", value: "2"}] | Menu items render as flat list without expand/collapse icons | P0 | FlatMenuItems | Basic menu rendering |
-| UC-004 | Sidebar content rendering - nested menu items | sidebarContent: [{label: "Parent", children: [{label: "Child1", value: "c1"}]}] | Parent item shows chevron icon, first parent expanded by default, children render when expanded | P0 | NestedMenuItems | Expandable menu structure |
-| UC-005 | Menu item expansion/collapse | Click parent menu item with children | Parent item toggles expanded state, chevron icon changes (up/down), children show/hide | P0 | MenuExpansion | Interactive menu behavior |
-| UC-006 | Sidebar item selection | selectedSidebarItem: "item1", onSidebarClick handler | Selected item shows selected styling (blue background, left border), clicking different item calls onSidebarClick, clicking same item does nothing | P0 | SidebarSelection | Selection state and callbacks |
-| UC-007 | Organization selection display - no selection | loadStorageItem returns null/undefined | Shows "Select Organization" placeholder text with logo icon | P1 | OrgDisplayNoSelection | Default state |
-| UC-008 | Organization selection display - org only | loadStorageItem('orgID') returns valid org, no OU | Shows organization name with logo icon, chevron-right icon | P0 | OrgDisplayOrgOnly | Basic org display |
-| UC-009 | Organization selection display - org with OU | loadStorageItem returns org and OU | Shows OU name as primary label, org name as secondary label below, both with ellipsis for overflow | P0 | OrgDisplayWithOU | Nested org structure |
-| UC-010 | Organization selection box open/close | Click organization selection area | Opens CapSlideBox with search input and org list, back button closes slidebox | P0 | OrgSelectionBox | Slidebox interaction |
-| UC-011 | Organization search functionality | Type in search input, orgSearchText state updates | Filters org list by label (case-insensitive), filters OU list within orgs, shows filtered results | P0 | OrgSearch | Search filtering |
-| UC-012 | Organization search - no results | Search query matches no orgs/OUs | Shows no results state with alert icon and noResultsText message | P1 | OrgSearchNoResults | Empty search state |
-| UC-013 | Organization selection - org without OUs | Click org item without accessibleOus | Calls changeOrgEntity with orgID, closes slidebox, updates selected org display | P0 | OrgSelectionSimple | Basic org selection |
-| UC-014 | Organization selection - org with OUs | Click org item with accessibleOus, then click OU | Shows OU list under org, clicking OU calls changeOrgEntity with orgID and ouId, updates display to show OU | P0 | OrgSelectionWithOU | Nested selection flow |
-| UC-015 | Product list display | Click more applications icon | Opens CapSlideBox with product list from module_details, excludes "masters" product, shows insights+ product | P0 | ProductListDisplay | Product list rendering |
-| UC-016 | Product change | Click product item in list | If product.url differs from current pathname, navigates to product.url, closes product list | P0 | ProductChange | Navigation behavior |
-| UC-017 | Product list - selected product | defaultSelectedProduct matches product value | Selected product shows selected styling (blue background, left border) | P1 | ProductSelection | Visual selection state |
-| UC-018 | Header content display | productName, userData.user.loginName provided | Shows more applications icon, logo with productName, user loginName below logo, organization selection | P0 | HeaderContent | Header rendering |
-| UC-019 | Footer display | footer prop provided as React element | Footer renders at bottom of drawer when drawer is open, shows ant-drawer-footer styling | P1 | FooterDisplay | Footer rendering |
-| UC-020 | Placement and styling props | placement: "left" | "right", screenHeight, screenWidth, className | Drawer opens from specified side, org list height calculated from screenHeight, search width from screenWidth, custom className applied | P1 | PlacementAndStyling | Layout and positioning |
-
-## Grouping Rationale
-
-- **UC-001**: Grouped all drawer open/close interactions (icon click, outside click, toggle)
-- **UC-002-004**: Grouped all sidebar content rendering scenarios (empty, flat, nested)
-- **UC-005**: Single test for expansion/collapse toggle behavior
-- **UC-006**: Single test for selection state and callback handling
-- **UC-007-009**: Grouped all organization display variants (no selection, org only, org+OU)
-- **UC-010**: Single test for slidebox open/close
-- **UC-011-012**: Grouped search functionality and empty state
-- **UC-013-014**: Grouped organization selection scenarios (simple and with OUs)
-- **UC-015-017**: Grouped product list display, change, and selection
-- **UC-018**: Single test for all header content
-- **UC-019**: Single test for footer
-- **UC-020**: Grouped all layout/styling props
-
-## Migration Notes (v3→v6)
-
-- CapDrawer uses `visible` prop (v3) vs `open` prop (v6) - verify prop name migration
-- Virtualized.List from react-virtualized used for org list - verify if needs migration to react-window or similar
-- Semantic UI List component used - verify if needs migration to Ant Design List
-- componentWillReceiveProps deprecated - verify migration to componentDidUpdate or getDerivedStateFromProps

package/CapHeader/Status.md

@@ -1,41 +0,0 @@
-# Migration Status: CapHeader
-
-**Last Updated**: 2026-01-29 10:15:36
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [x] **Step 3**: Migration Prompt 3 (Unit tests)
-- [x] **Step 4**: Migration Prompt 4 (Visual test cases)
-- [x] **Step 5**: Linting (ESLint)
-- [x] **Step 6**: Pre-build Validation
-- [x] **Step 7**: Build blaze-ui
-- [x] **Step 8**: Visual Testing
-- [x] **Step 9**: CSS Analysis (if mismatches found)
-- [x] **Step 9.5**: CSS Analysis Completed
-- [x] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [x] **Step 11**: Create Pull Request
-
-## Visual Testing Results
-
-**Last Test**: 2026-01-29 10:15:36
-**Maximum Mismatch**: 4.69%
-
-### Mismatched Variants:
-- ✅ All variants match perfectly!
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-29 10:15:36
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapHeader/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._
-

package/CapHeading/README.md

@@ -1,220 +0,0 @@
-# CapHeading Migration Guide
-
-## Summary
-
-CapHeading has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
-
-- Converted from styled-components to SCSS modules
-- Converted from JavaScript to TypeScript
-- Added TypeScript interfaces for props
-- Added ref forwarding support
-- Maintained backward compatibility with the existing API
-
-## Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-The API remains identical to the original implementation.
-
-## Prop Changes
-
-| Prop | Type | Default | Status | Notes |
-|------|------|---------|--------|-------|
-| `type` | `CapHeadingType` | `'h5'` | Unchanged | Now TypeScript union type |
-| `children` | `React.ReactNode` | - | Unchanged | - |
-| `className` | `string` | `''` | Added | For custom styling |
-| `style` | `React.CSSProperties` | `{}` | Added | For inline styles |
-
-### New TypeScript Types
-
-```typescript
-type CapHeadingType = 
-  | 'h0' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'h8' | 'h9' | 'h10'
-  | 'label1' | 'label2' | 'label3' | 'label4' | 'label5' | 'label6';
-
-interface CapHeadingProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-  type?: CapHeadingType;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-interface CapHeadingSpanProps extends React.HTMLAttributes<HTMLSpanElement> {
-  children?: React.ReactNode;
-  type?: CapHeadingType;
-  className?: string;
-  style?: React.CSSProperties;
-}
-```
-
-## API Changes
-
-### Ref Forwarding (New)
-
-The component now supports ref forwarding:
-
-```tsx
-const headingRef = React.createRef<HTMLDivElement>();
-<CapHeading ref={headingRef}>Content</CapHeading>
-
-const spanRef = React.createRef<HTMLSpanElement>();
-<CapHeading.CapHeadingSpan ref={spanRef}>Content</CapHeading.CapHeadingSpan>
-```
-
-### HTML Attributes (New)
-
-All standard HTML div/span attributes are now supported:
-
-```tsx
-<CapHeading
-  data-testid="my-heading"
-  aria-label="Section heading"
-  onClick={handleClick}
->
-  Content
-</CapHeading>
-```
-
-## Behavioral Changes
-
-None. The component behaves identically to the original implementation.
-
-## Migration Steps
-
-### 1. Update Import
-
-```tsx
-// Before (cap-ui-library)
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-
-// After (blaze-ui)
-import { CapHeading } from '@capillarytech/blaze-ui';
-// or
-import CapHeading from '@capillarytech/blaze-ui/CapHeading';
-```
-
-### 2. Usage (No Changes Required)
-
-```tsx
-// Both work exactly the same
-<CapHeading type="h1">Main Heading</CapHeading>
-<CapHeading type="label1">Label Text</CapHeading>
-
-// Span variant
-<CapHeading.CapHeadingSpan type="h4">Inline Heading</CapHeading.CapHeadingSpan>
-```
-
-### 3. TypeScript (New Benefit)
-
-If using TypeScript, you now get full type checking:
-
-```tsx
-import { CapHeading, CapHeadingProps, CapHeadingType } from '@capillarytech/blaze-ui';
-
-// Type-safe props
-const props: CapHeadingProps = {
-  type: 'h1', // TypeScript will autocomplete and validate
-  children: 'Heading'
-};
-
-// Type-safe heading type
-const headingType: CapHeadingType = 'h2';
-```
-
-## Heading Type Reference
-
-| Type | Font Size | Font Weight | Color | Line Height | Use Case |
-|------|-----------|-------------|-------|-------------|----------|
-| h0 | 28px (2rem) | 500 | #091e42 | 36px | Extra large heading |
-| h1 | 24px (1.714rem) | 500 | #091e42 | 32px | Main heading |
-| h2 | 20px (1.429rem) | 500 | #091e42 | 28px | Section heading |
-| h3 | 16px (1.143rem) | 500 | #091e42 | 24px | Sub-section heading |
-| h4 | 14px (1rem) | 500 | #091e42 | 20px | Minor heading (medium) |
-| h5 | 14px (1rem) | 400 | #091e42 | 20px | Minor heading (normal) - DEFAULT |
-| h6 | 14px (1rem) | 400 | #5e6c84 | 20px | Secondary text |
-| h7 | 20px (1.429rem) | 500 | #5e6c84 | 28px | Section heading (secondary) |
-| h8 | 14px (1rem) | 400 | #091e42 | 20px | Body text style |
-| h9 | 14px (1rem) | 500 | #ffffff | 20px | White text (dark bg) |
-| h10 | 12px (0.857rem) | 500 | #091e42 | 16px | Small heading |
-| label1 | 12px (0.857rem) | 400 | #5e6c84 | 20px | Standard label |
-| label2 | 12px (0.857rem) | 400 | #091e42 | 20px | Primary color label |
-| label3 | 12px (0.857rem) | 400 | #97a0af | 20px | Muted label |
-| label4 | 12px (0.857rem) | 400 | #5e6c84 | 16px | Compact label |
-| label5 | 16px (1.143rem) | 400 | #5e6c84 | 24px | Large label |
-| label6 | 16px (1.143rem) | 400 | #091e42 | 24px | Large primary label |
-
-## Examples
-
-### Basic Usage
-
-```tsx
-import { CapHeading } from '@capillarytech/blaze-ui';
-
-function App() {
-  return (
-    <div>
-      <CapHeading type="h1">Page Title</CapHeading>
-      <CapHeading type="h2">Section Title</CapHeading>
-      <CapHeading type="label1">Form Label</CapHeading>
-    </div>
-  );
-}
-```
-
-### Inline Heading with CapHeadingSpan
-
-```tsx
-import { CapHeading } from '@capillarytech/blaze-ui';
-
-function App() {
-  return (
-    <p>
-      This paragraph contains an{' '}
-      <CapHeading.CapHeadingSpan type="h4">
-        inline heading
-      </CapHeading.CapHeadingSpan>{' '}
-      inside it.
-    </p>
-  );
-}
-```
-
-### With Accessibility Attributes
-
-```tsx
-import { CapHeading } from '@capillarytech/blaze-ui';
-
-function App() {
-  return (
-    <CapHeading 
-      type="h1" 
-      role="heading" 
-      aria-level={1}
-    >
-      Accessible Main Heading
-    </CapHeading>
-  );
-}
-```
-
-### With Ref
-
-```tsx
-import { CapHeading } from '@capillarytech/blaze-ui';
-import { useRef, useEffect } from 'react';
-
-function App() {
-  const headingRef = useRef<HTMLDivElement>(null);
-  
-  useEffect(() => {
-    headingRef.current?.focus();
-  }, []);
-  
-  return (
-    <CapHeading ref={headingRef} tabIndex={-1}>
-      Focusable Heading
-    </CapHeading>
-  );
-}
-```
-

package/CapHeading/Status.md

@@ -1,41 +0,0 @@
-# Migration Status: CapHeading
-
-**Last Updated**: 2026-01-25 04:03:57
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [x] **Step 3**: Migration Prompt 3 (Unit tests)
-- [x] **Step 4**: Migration Prompt 4 (Visual test cases)
-- [x] **Step 5**: Linting (ESLint)
-- [x] **Step 6**: Pre-build Validation
-- [x] **Step 7**: Build blaze-ui
-- [x] **Step 8**: Visual Testing
-- [x] **Step 9**: CSS Analysis (if mismatches found)
-- [x] **Step 9.5**: CSS Analysis Completed
-- [x] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [x] **Step 11**: Create Pull Request
-
-## Visual Testing Results
-
-**Last Test**: 2026-01-25 04:03:57
-**Maximum Mismatch**: 2.95%
-
-### Mismatched Variants:
-- ✅ All variants match perfectly!
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-25 04:03:57
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapHeading/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._
-