# RenDS Patterns Tier
Complex, production-ready organism-level components for application layouts and interactions. Built with modern web standards: Web Components, CSS custom properties, and ARIA accessibility.
## Components
### 1. ren-nav — Responsive Navigation Bar
Responsive navigation with mobile hamburger menu, dropdown support, and sticky variants.
**HTML Usage:**
```html
Brand
```
**CSS Classes:**
- `.ren-nav` — Root container
- `.ren-nav-sticky` — Sticky positioning with blur effect
- `.ren-nav-transparent` — Transparent background
- `.ren-nav-links` — Desktop menu flex layout
- `.ren-nav-link` — Individual nav link
- `.ren-nav-dropdown` — Dropdown menu wrapper
**JavaScript API:**
```javascript
// Set active link by href
nav.setActiveLink('/docs');
// Check if mobile menu is open
if (nav.isOpen) { /* ... */ }
// Events: click triggers ren-nav-dropdown management
```
**Keyboard Navigation:**
- Escape — Close mobile menu
- Tab — Navigate through links
**Accessibility:**
- `aria-expanded` on toggle button
- `aria-current="page"` on active link
- Focus-visible indicators on all interactive elements
---
### 2. ren-sidebar — Collapsible App Sidebar
App layout sidebar with desktop collapse, mobile overlay, state persistence, and tooltips.
**HTML Usage:**
```html
Navigation
```
**CSS Classes:**
- `.ren-sidebar` — Root (uses `data-collapsed`, `data-open`)
- `.ren-sidebar-item` — Nav item with hover states
- `.ren-sidebar-item-icon` — Icon container
- `.ren-sidebar-item-text` — Text (hides when collapsed)
- `.ren-sidebar-section-label` — Section group label
**JavaScript API:**
```javascript
sidebar.toggleMenu(); // Mobile menu toggle
sidebar.setActiveItem('/dashboard'); // Set active nav item
sidebar.openMobileMenu(); // Open mobile overlay
console.log(sidebar.isCollapsed); // Check collapse state
// Event: ren-sidebar-toggle { collapsed: boolean }
```
**Keyboard Navigation:**
- Escape — Close mobile overlay
**Accessibility:**
- `aria-current="page"` on active item
- Tooltips via `data-tooltip` when collapsed
- Focus-visible on all interactive elements
---
### 3. ren-command — Command Palette / Spotlight
Dialog-based command palette with real-time filtering, keyboard navigation, and multi-word search.
**HTML Usage:**
```html
```
**CSS Classes:**
- `.ren-command` — Dialog container with animation
- `.ren-command-input` — Search input
- `.ren-command-item` — Command item (has `data-highlighted`)
- `.ren-command-item-title`, `.ren-command-item-description` — Text content
- `.ren-command-group` — Collapsible group (hides when `data-empty`)
**JavaScript API:**
```javascript
command.open(); // Open palette
command.close(); // Close palette
command.registerAction('save', () => { /* ... */ });
// Event: ren-command-select { item, value, action }
```
**Keyboard Navigation:**
- Ctrl+K / Cmd+K — Global shortcut
- Arrow Up/Down — Navigate items
- Enter — Select item
- Escape — Close
**Accessibility:**
- `aria-expanded` on group headers
- Focus management with auto-focus on open
- Screen reader friendly descriptions
---
### 4. ren-table — Data Table with Sorting, Filtering, Pagination
Comprehensive data table with sort indicators, row selection, column resize, and pagination.
**HTML Usage:**
```html
Name
Email
John Doe
john@example.com
```
**CSS Classes:**
- `.ren-table` — Table element
- `.ren-th-sortable` — Sortable header (gets `data-sort="asc"` or `desc"`)
- `.ren-tr` — Table row (gets `aria-selected`)
- `.ren-td` — Table cell
- `.ren-table-select` — Checkbox column
- `.ren-table-compact`, `.ren-table-comfortable` — Density variants
**JavaScript API:**
```javascript
table.setLoading(true); // Show shimmer overlay
table.setDensity('compact'); // 'default' | 'compact' | 'comfortable'
table.getSelectedRows(); // Array of selected row IDs
table.clearSelection(); // Clear all selections
table.filter(columnIndex, value); // Filter by column
// Events: ren-sort, ren-select, ren-page, ren-filter
```
**Keyboard Navigation:**
- Arrow keys — Navigate cells
- Space — Toggle row selection
- Shift+Click — Range select rows
- Enter — Sort (on header)
**Accessibility:**
- `aria-sort` on sortable headers
- `aria-selected` on selected rows
- Column headers with proper roles
- High contrast support
---
### 5. ren-form — Multi-Step Form with Validation
Form validation system supporting multiple validation modes, field rules, and step-by-step flows.
**HTML Usage:**
```html
```
**CSS Classes:**
- `.ren-form` — Container
- `.ren-form-section` — Grouped fields
- `.ren-form-row` — Horizontal field layout (responsive)
- `.ren-form-step` — Progress indicator (gets `data-active`, `data-completed`, `data-disabled`)
- `.ren-form-error-summary` — Error list (shows when `data-has-errors`)
**Validation Rules:**
`required | email | min:8 | max:50 | pattern:regex | match:fieldName`
**JavaScript API:**
```javascript
form.validate(); // { valid: bool, errors: [] }
form.getValues(); // Form data as object
form.reset(); // Clear form and errors
form.setErrors([{name, message}]); // Server-side errors
form.setFieldError(name, message);
form.nextStep(); // Move to next step
form.prevStep(); // Move to previous step
// Events: ren-submit, ren-invalid, ren-step-change, ren-field-validated
// Custom validators: RenForm.registerValidator('customRule', (value) => null|error)
```
**Keyboard Navigation:**
- Tab — Navigate fields
**Accessibility:**
- `aria-invalid` on invalid fields
- `aria-errormessage` links to error text
- Required field labels marked with `data-required`
- Focus management on error scroll
---
### 6. ren-menubar — Application Menu Bar
Horizontal menu bar with WAI-ARIA menubar pattern, keyboard navigation, checkbox/radio items.
**HTML Usage:**
```html
```
**CSS Classes:**
- `.ren-menubar` — Root container
- `.ren-menubar-trigger` — Top-level menu button
- `.ren-menubar-menu` — Dropdown panel (gets `hidden`)
- `.ren-menubar-item` — Menu item
- `.ren-menubar-separator` — Divider
- `.ren-menubar-submenu` — Item with submenu (has chevron)
- `.ren-menubar-checkbox` — Checkbox item
- `.ren-menubar-radio` — Radio item
**JavaScript API:**
```javascript
menubar.closeAll(); // Close all open menus
menubar.openMenu(triggerIndex); // Open specific menu
// Event: ren-menubar-select { item, value, checked? }
```
**Keyboard Navigation:**
- Arrow Right/Left — Navigate triggers
- Arrow Down/Up — Navigate items
- Enter / Space — Select item
- Escape — Close menu
- Home / End — First/last item
- Typeahead — Type first letter to jump to item
**Accessibility:**
- WAI-ARIA menubar pattern with proper roles
- `aria-expanded` on triggers
- `aria-checked` on checkbox/radio items
- Roving focus with visible indicators
---
### 7. ren-empty-state — Empty State Pattern (CSS-only)
Reusable pattern for empty/no-data states. No JavaScript required.
**HTML Usage:**
```html
📦
No products yet
Add your first product to get started.
```
**CSS Classes:**
- `.ren-empty-state` — Container (centered, with padding)
- `.ren-empty-state-icon` — Icon/illustration (4rem circle)
- `.ren-empty-state-title` — Main heading
- `.ren-empty-state-description` — Supporting text
- `.ren-empty-state-actions` — Button group
- `.ren-empty-state-compact` — Smaller variant
- `.ren-empty-state-bordered` — Dashed border for inline use
**No JavaScript API** — Pure CSS styling.
**Accessibility:**
- Semantic heading structure
- Adequate color contrast
- Text-based messaging (not icon-only)
---
### 8. ren-ai — AI Content Patterns (CSS-only)
Design patterns for AI-generated content, inspired by IBM Carbon for AI.
**HTML Usage:**
```html
AI