@keenmate/pure-admin-core 1.1.3 → 1.3.0

package/README.md

@@ -77,6 +77,7 @@ The `snippets/` directory contains clean HTML patterns for all components:
 - `utilities.html` - Utility classes
 - `virtual-scroll.html` - Virtual scrolling
 - `web-daterangepicker.html` - Date range picker web component
+- `detail-panel.html` - Detail panel (inline, overlay, full-screen)
 - `web-multiselect.html` - Multiselect web component
 
 These snippets are the canonical reference for building framework components in any frontend framework (React, Vue, Svelte, etc.).
@@ -205,9 +206,24 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 ### Tables
 - `.pa-table` - Base table
 - `.pa-table--striped` - Striped rows
+- `.pa-table--bordered` - Full cell borders on all sides
 - `.pa-table--hover` - Row hover effects
 - `.pa-table--compact` - Reduced padding
 
+### Table Cards
+Card container specifically designed for tables and web-grids:
+- `.pa-table-card` - Base table card container
+- `.pa-table-card__header` - Header with title and actions
+- `.pa-table-card__body` - Body for table/grid content (no padding)
+- `.pa-table-card__footer` - Footer with summary/actions
+- `.pa-table-card__title` - Title element
+- `.pa-table-card__actions` - Actions container for buttons
+- **Semantic variants:** `.pa-table-card--primary/success/danger/warning`
+- **Theme color variants:** `.pa-table-card--color-1` through `.pa-table-card--color-9`
+- **Plain variant:** `.pa-table-card--plain` - No border/shadow/background, keeps grid behavior
+
+Works with both `pa-table` and `web-grid` component. First/last columns automatically align with header/footer padding.
+
 ### Alerts
 - `.pa-alert` - Base alert
 - `.pa-alert--primary/success/danger/warning/info` - Variants
@@ -310,6 +326,26 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 - `.pa-notifications__time` - Timestamp
 - `.pa-notifications__footer` - Panel footer with "View all" link
 
+### Detail Panel
+- `.pa-detail-view` - Flex wrapper for inline split-view (table + panel side by side)
+- `.pa-detail-view__main` - Left side (table area), `flex: 1`
+- `.pa-detail-view__panel` - Right side panel, hidden by default (`width: 0`)
+- `.pa-detail-view__panel--open` - Shows panel with configured width
+- `.pa-detail-view--overlay` - Card overlay modifier (panel overlays table within card)
+- `.pa-detail-view__overlay` - Backdrop element (click to close), use `--visible` to show
+- `.pa-detail-panel--overlay` - Full-screen overlay mode (fixed position, like profile panel)
+- `.pa-detail-panel--open` - Makes overlay panel visible with slide-in transition
+- `.pa-detail-panel__content` - Panel content wrapper (flex column: header/body/footer)
+- `.pa-detail-panel__header` - Panel header with title, optional action buttons, close button
+- `.pa-detail-panel__title` - Truncated panel title
+- `.pa-detail-panel__close` - Close button
+- `.pa-detail-panel__tabs` - Optional tab navigation (between header and body)
+- `.pa-detail-panel__body` - Scrollable body area
+- `.pa-detail-panel__footer` - Fixed footer with action buttons
+- `.pa-detail-panel__overlay` - Backdrop (overlay mode, click to close)
+- `.pa-detail-panel-resize` - Drag handle on left edge for resizing
+- `.is-selected` - Applied to `<tr>` to highlight selected row
+
 ### Profile Panel
 - `.pa-profile-panel` - Slide-in profile panel
 - `.pa-profile-panel--open` - Open state