---
status: historical
created: 2025-06-13
archived: 2026-07-08
reason: "Migration summary; v2 is the only implementation."
---

# Lit Migration Summary

TODO(ui-migration-doc-cleanup): Remove this migration summary when migration
notes no longer belong in the component source tree.

## Components Migrated (12 total)

### Layout Components (4)

1. **cf-vgroup** - Vertical group with gap management
2. **cf-hgroup** - Horizontal group with gap management
3. **cf-hscroll** - Horizontal scroll container with fade edges
4. **cf-vscroll** - Vertical scroll container with fade edges

### Form/Input Components (5)

1. **cf-aspect-ratio** - Maintains aspect ratio for content
2. **cf-collapsible** - Expandable/collapsible content section
3. **cf-progress** - Progress bar with determinate/indeterminate states
4. **cf-input-otp** - One-time password input with individual digits
5. **cf-radio-group** - Radio button group container

### Interactive Components (3)

1. **cf-toggle** - Toggle button with pressed state
2. **cf-toggle-group** - Toggle group for single/multiple selection
3. **cf-scroll-area** - Custom scrollable area with styled scrollbars

## Migration Pattern Applied

For each component, the following changes were made:

1. **Imports**
   - Added Lit imports: `html`, `css`, `PropertyValues`
   - Added decorators: `@property`, `@query`, `@state`
   - Added directives as needed: `classMap`, `styleMap`, `repeat`

2. **Class Declaration**
   - Component files export their classes
   - Component directory `index.ts` files register elements
   - Changed styles to static with `css` template literal
   - Removed `observedAttributes` (handled by `@property`)

3. **Properties**
   - Converted getters/setters to `@property` with `accessor` keyword
   - Added appropriate types and options (reflect, attribute names)
   - Removed manual attribute management

4. **Lifecycle Methods**
   - `onConnect()` → `connectedCallback()` + `firstUpdated()`
   - `onDisconnect()` → `disconnectedCallback()`
   - `onAttributeChange()` → `updated(changedProperties)`
   - `onRender()` → `firstUpdated()` or `updated()`

5. **Templates**
   - `template()` → `render()` with `html` template literal
   - String concatenation → template expressions
   - Class manipulation → `classMap` directive
   - Style manipulation → `styleMap` directive
   - Array rendering → `repeat` directive where appropriate

6. **Event Handling**
   - Preserved all event handlers
   - Updated property references from `this._prop` to `this.prop`
   - Maintained custom event emission with `this.emit()`

7. **DOM Queries**
   - Manual queries → `@query` decorator for persistent references
   - `@queryAll` for NodeLists

## Benefits Achieved

1. **Type Safety** - Full TypeScript support with decorators
2. **Reactive Updates** - Automatic re-rendering on property changes
3. **Better Performance** - Lit's efficient rendering and diffing
4. **Cleaner Code** - Less boilerplate, more declarative
5. **Standard Compliance** - Following web component best practices