@keenmate/pure-admin-core 1.5.0 → 2.0.0

package/README.md

@@ -150,7 +150,8 @@ Sizes: `0`, `xs`, `sm`, `md`, `base`, `lg`, `xl`, `2xl`, `auto`
   - `.pa-col-1-5` (20%), `.pa-col-2-5` (40%), `.pa-col-3-5` (60%), `.pa-col-4-5` (80%)
   - `.pa-col-1-6` (16.7%), `.pa-col-5-6` (83.3%)
   - `.pa-col-1-12` (8.3%), `.pa-col-5-12` (41.7%), `.pa-col-7-12` (58.3%), `.pa-col-11-12` (91.7%)
-- **Responsive breakpoints:** `.pa-col-sm-*`, `.pa-col-md-*`, `.pa-col-lg-*`, `.pa-col-xl-*`
+- **Responsive breakpoints (container-query based):** `.pa-col-sm-*`, `.pa-col-md-*`, `.pa-col-lg-*`, `.pa-col-xl-*`
+  - These respond to the **container width**, not the viewport. Requires a containment context ancestor: `.pa-layout__main` (automatic) or `.pa-cq`
 - **Offsets:** `.pa-offset-5`, `.pa-offset-10`, ... `.pa-offset-95`
 - **Row modifiers:**
   - `.pa-row--no-gutter` - Remove column gutters
@@ -180,6 +181,18 @@ Sizes: `0`, `xs`, `sm`, `md`, `base`, `lg`, `xl`, `2xl`, `auto`
 - **Theme color variants:** `.pa-card--color-1` through `.pa-card--color-9`
   - Uses `--pa-color-N` for header background and border
   - Text color automatically adjusts via `--pa-color-N-text` for readability
+- `.pa-card--ghost` - Invisible container (no background, border, or shadow) — layout wrapper only
+- `.pa-card--stat` - Compact padding for stat cards
+- **Live-data states** (persistent tinted background for real-time dashboards):
+  - `.pa-card--live-up` - Green tint (value increased)
+  - `.pa-card--live-down` - Red tint (value decreased)
+  - `.pa-card--live-neutral` - Returns to default card background
+  - Smooth 0.3s transition between states; JS swaps the class on each data update
+- **Card tabs:**
+  - `.pa-card__tabs` - Tab navigation below header
+  - `.pa-card__tab` / `.pa-card__tab--active` - Tab buttons
+  - `.pa-card__tab-content` / `.pa-card__tab-content--active` - Tab panels
+  - `.pa-card__tabs--inline` - Pill-style tabs inside header
 
 ### Layout & Sidebar
 - `.pa-layout` - Main layout container
@@ -328,9 +341,10 @@ Works with both `pa-table` and `web-grid` component. First/last columns automati
 - `.pa-stat__content` - Content wrapper
 - `.pa-stat__number` - Large number display
 - `.pa-stat__label` - Label text
-- **Hero variant:** `.pa-stat--hero` - Large centered stat with value and change indicator
+- **Hero variant:** `.pa-stat--hero` - Compact centered stat with large number (~45px), tight padding, and change indicator
   - `.pa-stat__value` - Hero number
   - `.pa-stat__change` - Change indicator (`--positive/negative/neutral`)
+  - `.pa-stat--hero-compact` - Alias (identical to `--hero`)
 - **Square variant:** `.pa-stat--square` - Colored square KPI card
   - `.pa-stat__symbol` - Background symbol
   - Color modifiers: `.pa-stat--primary/success/info/warning/danger/secondary`
@@ -380,6 +394,98 @@ Works with both `pa-table` and `web-grid` component. First/last columns automati
 - `.pa-profile-panel__favorite-item` - Favorite link (with remove button)
 - `.pa-profile-panel__actions` - Action buttons (Sign Out, etc.)
 
+### Data Display
+
+Read-only label-value patterns for displaying structured data. All patterns support RTL via CSS logical properties and respond to container width via CSS Container Queries.
+
+#### Fields (label-value pairs)
+- `.pa-field` - Single label-value pair
+- `.pa-field__label` - Label element
+- `.pa-field__value` - Value element
+- `.pa-fields` - Container for multiple fields (stacked list)
+- `.pa-fields--cols-2/3/4` - Multi-column grid layout
+- `.pa-fields--horizontal` - Side-by-side label/value layout
+- `.pa-fields--table` - Table-like alignment with fixed label width
+- `.pa-fields--bordered` - Bottom borders between fields
+- `.pa-fields--striped` - Alternating row backgrounds
+- `.pa-fields--compact` - Reduced spacing
+- `.pa-fields--inline` - Inline horizontal flow
+- `.pa-fields--relaxed` - Extra spacing
+- `.pa-fields--row` - Horizontal row with wrapping
+- `.pa-fields--filled` - Tinted label backgrounds
+- `.pa-fields--no-border` - Remove all borders
+- `.pa-fields--linear` - Underline-style fields (label above, value with bottom border)
+- `.pa-fields--chips` - Chip/tag style values with color variants
+- `.pa-fields--color-1` through `--color-9` - Theme color accents
+- `.pa-field--full` - Full-width field spanning all columns
+- `.pa-field--copy-btn/--copy-click/--copy-hover` - Copy-to-clipboard patterns
+- `.pa-field-group` - Group fields under a titled section
+- `.pa-field__value--success/warning/danger` - Semantic chip color variants (with `--chips`)
+
+#### Desc Table (CSS Grid description list)
+- `.pa-desc-table` - Grid-based label-value table (auto label width)
+- `.pa-desc-table--cols-2` - Two-column layout
+- `.pa-desc-table--fixed` - Fixed label width (configurable via `--label-width`)
+- `.pa-desc-table--middle` - Vertically center labels and values
+- `.pa-desc-table--label-end` - Right-align labels
+- `.pa-desc-table--label-center` - Center-align labels
+- `.pa-desc-table--truncate` - Truncate overflow with ellipsis
+- `.pa-desc-table__label` - Label cell
+- `.pa-desc-table__value` - Value cell
+- `.pa-desc-table__value--full` - Value spanning full row width
+
+#### Dot Leaders (receipt/invoice style)
+- `.pa-dot-leaders` - Container for dot-leader items
+- `.pa-dot-leaders__item` - Single row
+- `.pa-dot-leaders__item--total` - Bold total row with top border
+- `.pa-dot-leaders__label` - Label text
+- `.pa-dot-leaders__leader` - Dotted fill between label and value
+- `.pa-dot-leaders__value` - Right-aligned value
+
+#### Property Card (grouped key-value card)
+- `.pa-prop-card` - Self-contained card with header + rows
+- `.pa-prop-card__header` - Colored header bar
+- `.pa-prop-card__row` - Key-value row with bottom border
+- `.pa-prop-card__label` - Row label
+- `.pa-prop-card__value` - Row value
+- `.pa-prop-card__value--bold` - Bold value text
+
+#### Banded (label column with tinted background)
+- `.pa-banded` - Container for banded rows
+- `.pa-banded__row` - Horizontal label-value row
+- `.pa-banded__label` - Label with tinted background band
+- `.pa-banded__value` - Value cell
+- `.pa-banded--narrow` - Narrower label column
+- `.pa-banded--wide` - Wider label column
+- `.pa-banded--middle` - Vertically center content
+- `.pa-banded--label-end` - Right-align labels
+- `.pa-banded--label-center` - Center-align labels
+- `.pa-banded--truncate` - Truncate overflow with ellipsis
+
+#### Accent Grid (color-coded items)
+- `.pa-accent-grid` - Grid container with color-coded left borders
+- `.pa-accent-grid__item` - Grid item with accent border
+- `.pa-accent-grid__item--success/warning/danger/info` - Semantic color variants
+- `.pa-accent-grid__label` - Item label
+- `.pa-accent-grid__value` - Item value
+
+#### Bar List (horizontal bar chart)
+- `.pa-bar-list` - Container for labeled horizontal bar chart items
+- `.pa-bar-list__item` - Single row (header + bar)
+- `.pa-bar-list__header` - Flex row with label and value
+- `.pa-bar-list__label` - Left-aligned label text
+- `.pa-bar-list__value` - Right-aligned value text
+- `.pa-bar-list__bar` - Proportional bar (set width via `style="--value: 75%"`)
+- `.pa-bar-list--compact` - Tighter spacing and smaller text
+- Color variants: `.pa-bar-list--success/warning/danger/info`
+
+#### Container Query Wrappers
+Wrap data display components in these containers to enable responsive behavior based on the container width (not viewport):
+- `.pa-fields-container` - Container for `.pa-fields` (collapses multi-column to single column)
+- `.pa-desc-container` - Container for `.pa-desc-table` (collapses to narrower layout)
+- `.pa-banded-container` - Container for `.pa-banded` (stacks label above value)
+- `.pa-cq` - General-purpose container query utility (`container-type: inline-size`)
+
 ## Utility Classes
 
 ### Flexbox Alignment