@keenmate/pure-admin-core 1.5.0 → 1.5.1

package/README.md

@@ -180,6 +180,13 @@ 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
+- **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
@@ -380,6 +387,88 @@ 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
+
+#### 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

package/dist/css/main.css

@@ -1935,6 +1935,26 @@
   min-height: 50rem !important;
 }
 
+.minhr-60 {
+  min-height: 60rem !important;
+}
+
+.minhr-70 {
+  min-height: 70rem !important;
+}
+
+.minhr-80 {
+  min-height: 80rem !important;
+}
+
+.minhr-90 {
+  min-height: 90rem !important;
+}
+
+.minhr-100 {
+  min-height: 100rem !important;
+}
+
 .maxhr-1 {
   max-height: 1rem !important;
 }
@@ -2579,6 +2599,10 @@
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
 }
 
+.pa-cq {
+  container-type: inline-size;
+}
+
 /* Pure Admin Visual Framework - Core Styles */
 /* ========================================
    Component Imports
@@ -5514,6 +5538,22 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card--stat .pa-card__body {
   padding: 2.4rem 1.6rem;
 }
+.pa-card--ghost {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+.pa-card--ghost:hover {
+  box-shadow: none !important;
+}
+.pa-card--ghost .pa-card__header {
+  background: transparent !important;
+  border-bottom: none !important;
+}
+.pa-card--ghost .pa-card__footer {
+  background: transparent !important;
+  border-top: none !important;
+}
 .pa-card--color-1 {
   border-color: var(--pa-color-1);
 }
@@ -10528,6 +10568,11 @@ web-multiselect {
 .pa-table-card:has(.pa-detail-view) .pa-table-card__body {
   position: relative;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.pa-table-card:has(.pa-detail-view) .pa-table-card__body .pa-detail-view {
+  flex: 1;
 }
 .pa-table-card__header {
   padding: 0.5rem 1rem;
@@ -13868,6 +13913,9 @@ code {
   background-color: var(--pa-card-bg);
   position: relative;
 }
+.pa-detail-panel__content--bordered {
+  border-block: 1px solid var(--pa-border-color);
+}
 .pa-detail-panel--overlay .pa-detail-panel__content {
   position: absolute;
   top: 0;
@@ -13961,6 +14009,7 @@ code {
 .pa-detail-panel__body {
   flex: 1;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: 1.2rem 1.6rem;
 }
 
@@ -14283,6 +14332,10 @@ code {
   margin-top: 2.4rem;
 }
 
+.pa-fields-container {
+  container-type: inline-size;
+}
+
 .pa-fields {
   display: flex;
   flex-direction: column;
@@ -14303,6 +14356,11 @@ code {
 .pa-fields--cols-4 {
   grid-template-columns: repeat(4, 1fr);
 }
+@container (max-width: 768px) {
+  .pa-fields--cols-2, .pa-fields--cols-3, .pa-fields--cols-4 {
+    grid-template-columns: 1fr;
+  }
+}
 @media (max-width: 768px) {
   .pa-fields--cols-2, .pa-fields--cols-3, .pa-fields--cols-4 {
     grid-template-columns: 1fr;
@@ -14376,6 +14434,11 @@ code {
   flex: 1;
   min-width: 0;
 }
+@container (max-width: 768px) {
+  .pa-fields--row {
+    flex-direction: column;
+  }
+}
 @media (max-width: 768px) {
   .pa-fields--row {
     flex-direction: column;
@@ -14444,6 +14507,374 @@ code {
   border-inline-start: none;
   padding-inline-start: 0;
 }
+.pa-fields--linear {
+  gap: 0.8rem;
+  border-inline-start: none;
+  padding-inline-start: 0;
+}
+.pa-fields--linear .pa-field {
+  flex-direction: row;
+  align-items: center;
+  gap: 1.2rem;
+  font-size: 1.4rem;
+  line-height: 1.5;
+  min-height: 2.8rem;
+}
+.pa-fields--linear .pa-field__label {
+  flex: 0 0 10rem;
+  font-size: 1.4rem;
+  text-transform: none;
+  letter-spacing: normal;
+  opacity: 1;
+  font-weight: 400;
+  color: var(--pa-text-color-2);
+}
+.pa-fields--linear .pa-field__value {
+  flex: 1;
+  min-width: 0;
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: var(--pa-text-color-1);
+}
+.pa-fields--chips {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.6rem 1.4rem;
+  padding: 0.4rem 0;
+  border-inline-start: none;
+  padding-inline-start: 0;
+}
+.pa-fields--chips .pa-field {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.4rem;
+}
+.pa-fields--chips .pa-field__label {
+  font-size: 1.4rem;
+  text-transform: none;
+  letter-spacing: normal;
+  opacity: 1;
+  font-weight: 400;
+  color: var(--pa-text-color-2);
+}
+.pa-fields--chips .pa-field__value {
+  background: rgba(128, 128, 128, 0.1);
+  color: var(--pa-text-color-1);
+  font-weight: 500;
+  padding: 0.2rem 0.8rem;
+  border-radius: 4px;
+  font-size: 1.3rem;
+}
+.pa-fields--chips .pa-field__value--success {
+  background: var(--pa-success-bg-light, rgba(0, 200, 80, 0.12));
+  color: var(--pa-success-color, #28a745);
+}
+.pa-fields--chips .pa-field__value--warning {
+  background: var(--pa-warning-bg-light, rgba(255, 165, 0, 0.12));
+  color: var(--pa-warning-color, #e68a00);
+}
+.pa-fields--chips .pa-field__value--danger {
+  background: var(--pa-danger-bg-light, rgba(255, 0, 0, 0.12));
+  color: var(--pa-danger-color, #dc3545);
+}
+
+.pa-desc-container {
+  container-type: inline-size;
+}
+
+.pa-desc-table {
+  display: grid;
+  grid-template-columns: repeat(3, auto 1fr);
+  border: 1px solid var(--pa-border-color);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.pa-desc-table--cols-2 {
+  grid-template-columns: repeat(2, auto 1fr);
+}
+.pa-desc-table--fixed {
+  grid-template-columns: repeat(3, minmax(0, var(--label-width, 14rem)) minmax(0, 1fr));
+}
+.pa-desc-table--fixed.pa-desc-table--cols-2 {
+  grid-template-columns: repeat(2, minmax(0, var(--label-width, 14rem)) minmax(0, 1fr));
+}
+.pa-desc-table__label, .pa-desc-table__value {
+  padding: 1.2rem 1.6rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  font-size: 1.4rem;
+  line-height: 1.5;
+}
+.pa-desc-table__label {
+  background: rgba(128, 128, 128, 0.06);
+  color: var(--pa-text-color-2);
+  font-weight: 400;
+  white-space: nowrap;
+  border-inline-end: 1px solid var(--pa-border-color);
+}
+.pa-desc-table__label::after {
+  content: ":";
+  margin-inline-start: 2px;
+}
+.pa-desc-table__value {
+  color: var(--pa-text-color-1);
+  font-weight: 500;
+  border-inline-end: 1px solid var(--pa-border-color);
+  min-width: 0;
+}
+.pa-desc-table__value--full {
+  grid-column: 2/-1;
+}
+.pa-desc-table--middle .pa-desc-table__label, .pa-desc-table--middle .pa-desc-table__value {
+  display: flex;
+  align-items: center;
+}
+.pa-desc-table--label-end .pa-desc-table__label {
+  text-align: end;
+  justify-content: flex-end;
+}
+.pa-desc-table--label-center .pa-desc-table__label {
+  text-align: center;
+  justify-content: center;
+}
+.pa-desc-table--truncate .pa-desc-table__label, .pa-desc-table--truncate .pa-desc-table__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@container (max-width: 768px) {
+  .pa-desc-table, .pa-desc-table--cols-2 {
+    grid-template-columns: auto 1fr;
+  }
+  .pa-desc-table--fixed, .pa-desc-table--fixed.pa-desc-table--cols-2 {
+    grid-template-columns: minmax(0, var(--label-width, 14rem)) minmax(0, 1fr);
+  }
+  .pa-desc-table .pa-desc-table__value--full {
+    grid-column: 2;
+  }
+}
+@media (max-width: 768px) {
+  .pa-desc-table, .pa-desc-table--cols-2 {
+    grid-template-columns: auto 1fr;
+  }
+  .pa-desc-table--fixed, .pa-desc-table--fixed.pa-desc-table--cols-2 {
+    grid-template-columns: minmax(0, var(--label-width, 14rem)) minmax(0, 1fr);
+  }
+  .pa-desc-table .pa-desc-table__value--full {
+    grid-column: 2;
+  }
+}
+
+.pa-dot-leaders {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.pa-dot-leaders__item {
+  display: flex;
+  align-items: baseline;
+  padding: 0.6rem 0;
+}
+.pa-dot-leaders__item--total {
+  margin-top: 0.4rem;
+  padding-top: 0.8rem;
+  border-top: 2px solid var(--pa-text-color-1);
+}
+.pa-dot-leaders__label {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: var(--pa-text-color-2);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.pa-dot-leaders__leader {
+  flex: 1;
+  border-bottom: 2px dotted var(--pa-border-color);
+  margin: 0 0.8rem;
+  margin-bottom: 0.25em;
+  min-width: 2rem;
+}
+.pa-dot-leaders__value {
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: var(--pa-text-color-1);
+  white-space: nowrap;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+.pa-dot-leaders__item--total .pa-dot-leaders__label {
+  font-weight: 700;
+  color: var(--pa-text-color-1);
+}
+.pa-dot-leaders__item--total .pa-dot-leaders__value {
+  font-size: 1.6rem;
+  font-weight: 700;
+}
+
+.pa-prop-card {
+  border: 1px solid var(--pa-border-color);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.pa-prop-card__header {
+  padding: 1rem 1.6rem;
+  font-weight: 600;
+  font-size: 1.3rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pa-text-color-2);
+  background: rgba(128, 128, 128, 0.04);
+  border-bottom: 1px solid var(--pa-border-color);
+}
+.pa-prop-card__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.6rem;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
+  font-size: 1.4rem;
+  gap: 1.6rem;
+}
+.pa-prop-card__row:last-child {
+  border-bottom: none;
+}
+.pa-prop-card__label {
+  color: var(--pa-text-color-2);
+  font-weight: 400;
+  flex-shrink: 0;
+}
+.pa-prop-card__value {
+  color: var(--pa-text-color-1);
+  font-weight: 500;
+  text-align: end;
+  overflow-wrap: anywhere;
+}
+.pa-prop-card__value--bold {
+  font-weight: 700;
+}
+
+.pa-banded-container {
+  container-type: inline-size;
+}
+
+.pa-banded {
+  border: 1px solid var(--pa-border-color);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.pa-banded__row {
+  display: flex;
+  border-bottom: 1px solid var(--pa-border-color);
+  font-size: 1.4rem;
+  align-items: stretch;
+}
+.pa-banded__row:last-child {
+  border-bottom: none;
+}
+.pa-banded__label {
+  flex: 0 0 auto;
+  width: 14rem;
+  padding: 0.8rem 1.2rem;
+  background: rgba(128, 128, 128, 0.06);
+  color: var(--pa-text-color-2);
+  font-weight: 500;
+  border-inline-end: 1px solid var(--pa-border-color);
+  display: flex;
+  align-items: flex-start;
+}
+.pa-banded__value {
+  flex: 1;
+  padding: 0.8rem 1.2rem;
+  color: var(--pa-text-color-1);
+  font-weight: 400;
+  display: flex;
+  align-items: flex-start;
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+.pa-banded--narrow .pa-banded__label {
+  width: 10rem;
+}
+.pa-banded--wide .pa-banded__label {
+  width: 20rem;
+}
+.pa-banded--middle .pa-banded__label, .pa-banded--middle .pa-banded__value {
+  align-items: center;
+}
+.pa-banded--label-end .pa-banded__label {
+  justify-content: flex-end;
+}
+.pa-banded--label-center .pa-banded__label {
+  justify-content: center;
+}
+.pa-banded--truncate .pa-banded__label, .pa-banded--truncate .pa-banded__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@container (max-width: 768px) {
+  .pa-banded__row {
+    flex-direction: column;
+  }
+  .pa-banded .pa-banded__label {
+    width: auto !important;
+    border-inline-end: none;
+    border-bottom: 1px solid var(--pa-border-color);
+  }
+  .pa-banded .pa-banded__label, .pa-banded .pa-banded__value {
+    display: block;
+  }
+}
+@media (max-width: 768px) {
+  .pa-banded__row {
+    flex-direction: column;
+  }
+  .pa-banded .pa-banded__label {
+    width: auto !important;
+    border-inline-end: none;
+    border-bottom: 1px solid var(--pa-border-color);
+  }
+  .pa-banded .pa-banded__label, .pa-banded .pa-banded__value {
+    display: block;
+  }
+}
+
+.pa-accent-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  gap: 0.8rem;
+}
+.pa-accent-grid__item {
+  padding: 0.8rem 1.2rem;
+  padding-inline-start: 1.4rem;
+  border-inline-start: 3px solid var(--pa-accent, #3b82f6);
+}
+.pa-accent-grid__item--success {
+  border-inline-start-color: var(--pa-success-color, #28a745);
+}
+.pa-accent-grid__item--warning {
+  border-inline-start-color: var(--pa-warning-color, #e68a00);
+}
+.pa-accent-grid__item--danger {
+  border-inline-start-color: var(--pa-danger-color, #dc3545);
+}
+.pa-accent-grid__item--info {
+  border-inline-start-color: var(--pa-info-color, #17a2b8);
+}
+.pa-accent-grid__label {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--pa-text-color-2);
+  margin-bottom: 0.2rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.pa-accent-grid__value {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--pa-text-color-1);
+  line-height: 1.2;
+}
 
 /* ========================================
    Utility Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/src/scss/core-components/_cards.scss

@@ -254,6 +254,29 @@
     }
   }
 
+  // Ghost card - invisible container, same spacing/sizing behavior
+  // Uses !important to beat dark-mode scoped overrides like
+  // `.pa-mode-dark .pa-card { box-shadow: ... }` which have (0,2,0) specificity
+  &--ghost {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+
+    &:hover {
+      box-shadow: none !important;
+    }
+
+    .pa-card__header {
+      background: transparent !important;
+      border-bottom: none !important;
+    }
+
+    .pa-card__footer {
+      background: transparent !important;
+      border-top: none !important;
+    }
+  }
+
   // Theme color variants (color-1 through color-9)
   // These use theme-customizable colors from --pa-color-* CSS variables
   @for $i from 1 through 9 {