@keenmate/pure-admin-core 1.1.2 → 1.2.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.).
@@ -151,6 +152,10 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 - `.pa-card__header` - Card header
 - `.pa-card__body` - Card body
 - `.pa-card__footer` - Card footer
+- **Semantic variants:** `.pa-card--primary/success/danger/warning`
+- **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
 
 ### Layout & Sidebar
 - `.pa-layout` - Main layout container
@@ -230,7 +235,9 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 ### Tooltips & Popovers
 - `.pa-tooltip` - Base tooltip (pure CSS, no JS required)
 - `.pa-tooltip--top/right/bottom/left` - Positioning
-- `.pa-tooltip--primary/success/warning/danger` - Variants
+- `.pa-tooltip--primary/success/warning/danger` - Semantic variants
+- `.pa-tooltip--color-1` through `.pa-tooltip--color-9` - Theme color variants
+  - Text color automatically adjusts via `--pa-color-N-text` for readability
 - `.pa-tooltip--multiline` - Multiline tooltips
 - `.pa-popover` - Base popover (requires JavaScript)
 - `.pa-popover--sm/md/lg` - Sizes
@@ -304,6 +311,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
@@ -342,12 +369,16 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 - `.pa-bg-color-1` through `.pa-bg-color-9` - Background color slots
 - `.pa-text-color-1` through `.pa-text-color-9` - Text color slots
 - `.pa-border-color-1` through `.pa-border-color-9` - Border color slots
+- **CSS Variables:**
+  - `--pa-color-1` through `--pa-color-9` - Background colors (theme-defined)
+  - `--pa-color-1-text` through `--pa-color-9-text` - Contrast text colors for readability on colored backgrounds
 
 ## SCSS Variables
 
 All components use SCSS variables with `!default` flags, making them fully customizable:
 
 - **Colors**: `$main-bg`, `$page-bg`, `$subtle-bg`, `$accent-color`, `$text-color-1`, `$text-color-2`, etc.
+- **Theme Color Slots**: `$color-1` through `$color-9` (background colors), `$color-1-text` through `$color-9-text` (contrast text colors)
 - **Spacing**: `$spacing-xs` through `$spacing-2xl`
 - **Typography**: `$font-size-*`, `$line-height-*`, `$font-weight-*`
 - **Components**: `$btn-*`, `$card-*`, `$table-*`, etc.

package/dist/css/main.css

@@ -5385,6 +5385,141 @@ 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--color-1 {
+  border-color: var(--pa-color-1);
+}
+.pa-card--color-1 .pa-card__header {
+  background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
+}
+.pa-card--color-1 .pa-card__header h1,
+.pa-card--color-1 .pa-card__header h2,
+.pa-card--color-1 .pa-card__header h3,
+.pa-card--color-1 .pa-card__header h4,
+.pa-card--color-1 .pa-card__header h5,
+.pa-card--color-1 .pa-card__header h6 {
+  color: var(--pa-color-1-text);
+}
+.pa-card--color-2 {
+  border-color: var(--pa-color-2);
+}
+.pa-card--color-2 .pa-card__header {
+  background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
+}
+.pa-card--color-2 .pa-card__header h1,
+.pa-card--color-2 .pa-card__header h2,
+.pa-card--color-2 .pa-card__header h3,
+.pa-card--color-2 .pa-card__header h4,
+.pa-card--color-2 .pa-card__header h5,
+.pa-card--color-2 .pa-card__header h6 {
+  color: var(--pa-color-2-text);
+}
+.pa-card--color-3 {
+  border-color: var(--pa-color-3);
+}
+.pa-card--color-3 .pa-card__header {
+  background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
+}
+.pa-card--color-3 .pa-card__header h1,
+.pa-card--color-3 .pa-card__header h2,
+.pa-card--color-3 .pa-card__header h3,
+.pa-card--color-3 .pa-card__header h4,
+.pa-card--color-3 .pa-card__header h5,
+.pa-card--color-3 .pa-card__header h6 {
+  color: var(--pa-color-3-text);
+}
+.pa-card--color-4 {
+  border-color: var(--pa-color-4);
+}
+.pa-card--color-4 .pa-card__header {
+  background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
+}
+.pa-card--color-4 .pa-card__header h1,
+.pa-card--color-4 .pa-card__header h2,
+.pa-card--color-4 .pa-card__header h3,
+.pa-card--color-4 .pa-card__header h4,
+.pa-card--color-4 .pa-card__header h5,
+.pa-card--color-4 .pa-card__header h6 {
+  color: var(--pa-color-4-text);
+}
+.pa-card--color-5 {
+  border-color: var(--pa-color-5);
+}
+.pa-card--color-5 .pa-card__header {
+  background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
+}
+.pa-card--color-5 .pa-card__header h1,
+.pa-card--color-5 .pa-card__header h2,
+.pa-card--color-5 .pa-card__header h3,
+.pa-card--color-5 .pa-card__header h4,
+.pa-card--color-5 .pa-card__header h5,
+.pa-card--color-5 .pa-card__header h6 {
+  color: var(--pa-color-5-text);
+}
+.pa-card--color-6 {
+  border-color: var(--pa-color-6);
+}
+.pa-card--color-6 .pa-card__header {
+  background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
+}
+.pa-card--color-6 .pa-card__header h1,
+.pa-card--color-6 .pa-card__header h2,
+.pa-card--color-6 .pa-card__header h3,
+.pa-card--color-6 .pa-card__header h4,
+.pa-card--color-6 .pa-card__header h5,
+.pa-card--color-6 .pa-card__header h6 {
+  color: var(--pa-color-6-text);
+}
+.pa-card--color-7 {
+  border-color: var(--pa-color-7);
+}
+.pa-card--color-7 .pa-card__header {
+  background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
+}
+.pa-card--color-7 .pa-card__header h1,
+.pa-card--color-7 .pa-card__header h2,
+.pa-card--color-7 .pa-card__header h3,
+.pa-card--color-7 .pa-card__header h4,
+.pa-card--color-7 .pa-card__header h5,
+.pa-card--color-7 .pa-card__header h6 {
+  color: var(--pa-color-7-text);
+}
+.pa-card--color-8 {
+  border-color: var(--pa-color-8);
+}
+.pa-card--color-8 .pa-card__header {
+  background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
+}
+.pa-card--color-8 .pa-card__header h1,
+.pa-card--color-8 .pa-card__header h2,
+.pa-card--color-8 .pa-card__header h3,
+.pa-card--color-8 .pa-card__header h4,
+.pa-card--color-8 .pa-card__header h5,
+.pa-card--color-8 .pa-card__header h6 {
+  color: var(--pa-color-8-text);
+}
+.pa-card--color-9 {
+  border-color: var(--pa-color-9);
+}
+.pa-card--color-9 .pa-card__header {
+  background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
+}
+.pa-card--color-9 .pa-card__header h1,
+.pa-card--color-9 .pa-card__header h2,
+.pa-card--color-9 .pa-card__header h3,
+.pa-card--color-9 .pa-card__header h4,
+.pa-card--color-9 .pa-card__header h5,
+.pa-card--color-9 .pa-card__header h6 {
+  color: var(--pa-color-9-text);
+}
 .pa-card__tabs {
   display: flex;
   border-bottom: 1px solid var(--pa-border-color);
@@ -7590,6 +7725,7 @@ a.pa-card p {
 }
 .pa-tooltip--color-1::before {
   background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
 }
 .pa-tooltip--color-1::after {
   border-top-color: var(--pa-color-1);
@@ -7608,6 +7744,7 @@ a.pa-card p {
 }
 .pa-tooltip--color-2::before {
   background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
 }
 .pa-tooltip--color-2::after {
   border-top-color: var(--pa-color-2);
@@ -7626,6 +7763,7 @@ a.pa-card p {
 }
 .pa-tooltip--color-3::before {
   background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
 }
 .pa-tooltip--color-3::after {
   border-top-color: var(--pa-color-3);
@@ -7644,6 +7782,7 @@ a.pa-card p {
 }
 .pa-tooltip--color-4::before {
   background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
 }
 .pa-tooltip--color-4::after {
   border-top-color: var(--pa-color-4);
@@ -7662,6 +7801,7 @@ a.pa-card p {
 }
 .pa-tooltip--color-5::before {
   background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
 }
 .pa-tooltip--color-5::after {
   border-top-color: var(--pa-color-5);
@@ -7680,6 +7820,7 @@ a.pa-card p {
 }
 .pa-tooltip--color-6::before {
   background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
 }
 .pa-tooltip--color-6::after {
   border-top-color: var(--pa-color-6);
@@ -7698,6 +7839,7 @@ a.pa-card p {
 }
 .pa-tooltip--color-7::before {
   background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
 }
 .pa-tooltip--color-7::after {
   border-top-color: var(--pa-color-7);
@@ -7716,6 +7858,7 @@ a.pa-card p {
 }
 .pa-tooltip--color-8::before {
   background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
 }
 .pa-tooltip--color-8::after {
   border-top-color: var(--pa-color-8);
@@ -7734,6 +7877,7 @@ a.pa-card p {
 }
 .pa-tooltip--color-9::before {
   background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
 }
 .pa-tooltip--color-9::after {
   border-top-color: var(--pa-color-9);
@@ -7966,30 +8110,39 @@ a.pa-card p {
 }
 .pa-tooltip-floating.pa-tooltip--color-1 {
   background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
 }
 .pa-tooltip-floating.pa-tooltip--color-2 {
   background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
 }
 .pa-tooltip-floating.pa-tooltip--color-3 {
   background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
 }
 .pa-tooltip-floating.pa-tooltip--color-4 {
   background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
 }
 .pa-tooltip-floating.pa-tooltip--color-5 {
   background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
 }
 .pa-tooltip-floating.pa-tooltip--color-6 {
   background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
 }
 .pa-tooltip-floating.pa-tooltip--color-7 {
   background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
 }
 .pa-tooltip-floating.pa-tooltip--color-8 {
   background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
 }
 .pa-tooltip-floating.pa-tooltip--color-9 {
   background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
 }
 
 /* ========================================
@@ -8710,6 +8863,7 @@ a.pa-card p {
 .pa-input-group__prepend {
   background-color: var(--pa-input-group-prepend-bg);
   color: var(--pa-input-group-prepend-text);
+  border-color: var(--pa-input-group-prepend-bg);
   border-right: none;
 }
 .pa-input-group__prepend:first-child {
@@ -8719,6 +8873,7 @@ a.pa-card p {
 .pa-input-group__append {
   background-color: var(--pa-input-group-append-bg);
   color: var(--pa-input-group-append-text);
+  border-color: var(--pa-input-group-append-bg);
   border-left: none;
 }
 .pa-input-group__append:last-child {
@@ -8726,10 +8881,10 @@ a.pa-card p {
   border-bottom-right-radius: 4px;
 }
 .pa-input-group__prepend + .pa-input-group__prepend {
-  border-left: 1px solid var(--pa-border-color);
+  border-left: 1px solid var(--pa-input-group-prepend-bg);
 }
 .pa-input-group__append + .pa-input-group__append {
-  border-left: 1px solid var(--pa-border-color);
+  border-left: 1px solid var(--pa-input-group-append-bg);
 }
 .pa-input-group:has(.pa-input:focus) .pa-input-group__prepend {
   border-right: 1px solid var(--pa-input-focus-border-color);
@@ -13146,6 +13301,269 @@ code {
   padding: 0.4rem 0.8rem;
 }
 
+/* ========================================
+   Detail Panel Components
+   Inline split-view and overlay detail panels
+   ======================================== */
+:root {
+  --pa-local-detail-panel-width: 40rem;
+  --pa-local-detail-panel-max-width: 64rem;
+}
+
+:where(.pa-detail-view__panel) {
+  width: var(--pa-local-detail-panel-width);
+  max-width: var(--pa-local-detail-panel-max-width);
+}
+
+.pa-detail-view {
+  display: flex;
+  gap: 0;
+  width: 100%;
+}
+.pa-detail-view__main {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+.pa-detail-view__panel {
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
+  flex-shrink: 0;
+  border-left: 0 solid var(--pa-border-color);
+}
+.pa-detail-view__panel--open {
+  width: var(--pa-local-detail-panel-width);
+  min-width: 28rem;
+  max-width: var(--pa-local-detail-panel-max-width);
+  border-left-width: 1px;
+  overflow: visible;
+}
+
+.pa-detail-view--overlay {
+  position: relative;
+  overflow: hidden;
+}
+.pa-detail-view--overlay .pa-detail-view__panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 2;
+}
+
+.pa-detail-view__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--pa-detail-panel-overlay-bg);
+  z-index: 1;
+  opacity: 0;
+  visibility: hidden;
+  cursor: pointer;
+}
+.pa-detail-view__overlay--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.pa-detail-panel--overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  z-index: 4500;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+.pa-detail-panel--overlay.pa-detail-panel--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
+.pa-detail-panel--overlay.pa-detail-panel--open .pa-detail-panel__content {
+  transform: translateX(0);
+}
+
+.pa-detail-panel__content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--pa-card-bg);
+  position: relative;
+}
+.pa-detail-panel--overlay .pa-detail-panel__content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: var(--pa-local-detail-panel-width);
+  max-width: var(--pa-local-detail-panel-max-width);
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+  transform: translateX(100%);
+}
+
+.pa-detail-panel__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--pa-detail-panel-overlay-bg);
+  cursor: pointer;
+}
+
+.pa-detail-panel__header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 1.2rem 1.6rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+  min-height: 0;
+}
+
+.pa-detail-panel__title {
+  flex: 1;
+  margin: 0;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: var(--pa-text-color-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pa-detail-panel__close {
+  width: 3.2rem;
+  height: 3.2rem;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pa-text-color-2);
+  border-radius: 4px;
+}
+.pa-detail-panel__close:hover {
+  background-color: var(--pa-accent-light);
+  color: var(--pa-accent);
+}
+.pa-detail-panel__close:focus {
+  outline: 2px solid var(--pa-accent);
+  outline-offset: 2px;
+}
+
+.pa-detail-panel__tabs {
+  flex-shrink: 0;
+  padding: 0 1.6rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+}
+.pa-detail-panel__tabs .pa-tabs__item {
+  color: var(--pa-text-color-2);
+  border-bottom-color: transparent;
+}
+.pa-detail-panel__tabs .pa-tabs__item:hover {
+  color: var(--pa-text-color-1);
+  background-color: var(--pa-accent-light);
+}
+.pa-detail-panel__tabs .pa-tabs__item--active {
+  color: var(--pa-text-color-1);
+  border-bottom-color: var(--pa-accent);
+}
+
+.pa-detail-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.2rem 1.6rem;
+}
+
+.pa-detail-panel__footer {
+  flex-shrink: 0;
+  padding: 1.2rem 1.6rem;
+  border-top: 1px solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.pa-detail-panel-resize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 1;
+}
+.pa-detail-panel-resize:hover, .pa-detail-panel-resize--active {
+  background-color: var(--pa-accent);
+  opacity: 0.3;
+}
+
+.pa-detail-panel-resizing {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+.pa-table tbody tr.is-selected {
+  background-color: var(--pa-detail-panel-selected-bg);
+}
+.pa-table tbody tr.is-selected:hover {
+  background-color: var(--pa-detail-panel-selected-bg);
+}
+
+@media (max-width: 768px) {
+  .pa-detail-view__panel {
+    display: none;
+  }
+  .pa-detail-panel--mobile-overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    z-index: 4500;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+  .pa-detail-panel--mobile-overlay.pa-detail-panel--open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: all;
+  }
+  .pa-detail-panel--mobile-overlay.pa-detail-panel--open .pa-detail-panel__content {
+    transform: translateX(0);
+  }
+  .pa-detail-panel--mobile-overlay .pa-detail-panel__content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: 90vw;
+    max-width: none;
+    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+    transform: translateX(100%);
+  }
+  .pa-detail-panel--mobile-overlay .pa-detail-panel__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--pa-detail-panel-overlay-bg);
+    cursor: pointer;
+  }
+}
 /* ========================================
    Settings Panel Component
    Floating panel for global settings management

package/package.json

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