@keenmate/pure-admin-core 1.4.0 → 1.4.1

package/dist/css/main.css

@@ -5340,6 +5340,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 1.6rem;
   min-width: 0;
 }
 .pa-card__header h1,
@@ -5368,9 +5369,40 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   color: var(--pa-text-color-1);
   font-size: 1.6rem;
 }
+.pa-card__header > h1,
+.pa-card__header > h2,
+.pa-card__header > h3,
+.pa-card__header > h4,
+.pa-card__header > h5,
+.pa-card__header > h6 {
+  flex-shrink: 0;
+}
+.pa-card__header > p {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--pa-text-color-2);
+  font-size: 1.4rem;
+}
+.pa-card__header .pa-card__actions,
+.pa-card__header .pa-btn-group {
+  flex-shrink: 0;
+}
 .pa-card__header .pa-btn {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
+  flex-shrink: 0;
+}
+.pa-card__header--wrap {
+  flex-wrap: wrap;
+}
+.pa-card__header--wrap > p {
+  white-space: normal;
+  flex-basis: 100%;
+  order: 1;
+  margin-top: 0.4rem;
 }
 .pa-card__title {
   display: flex;
@@ -10501,6 +10533,10 @@ web-multiselect {
 .pa-table-card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
+.pa-table-card:has(.pa-detail-view) .pa-table-card__body {
+  position: relative;
+  overflow: hidden;
+}
 .pa-table-card__header {
   padding: 0.5rem 1rem;
   min-height: 4rem;
@@ -10569,6 +10605,27 @@ web-multiselect {
 .pa-table-card__body .pa-table tbody tr:last-child td {
   border-bottom: none;
 }
+.pa-table-card__body .pa-detail-view {
+  height: 100%;
+}
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table {
+  border-radius: 0;
+}
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table th:first-child,
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table td:first-child {
+  padding-inline-start: 1rem;
+}
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table th:last-child,
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table td:last-child {
+  padding-inline-end: 1rem;
+}
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.pa-table-card__body .pa-detail-view .pa-detail-view__main web-grid {
+  --wg-cell-padding-left: 1rem;
+  --wg-cell-padding-right: 1rem;
+}
 .pa-table-card__footer {
   padding: 1.2rem 1rem;
   border-top: 1px solid var(--pa-border-color);
@@ -10724,6 +10781,10 @@ web-multiselect {
   border-radius: 0;
   padding-inline: 0;
 }
+.pa-table-card--plain .pa-table-card__body:has(.pa-detail-view--overlay) {
+  position: relative;
+  overflow: hidden;
+}
 .pa-table-card--plain .pa-table-card__footer {
   background: transparent;
   border-top: none;
@@ -13771,14 +13832,17 @@ code {
   top: 0;
   inset-inline-end: 0;
   height: 100%;
-  z-index: 2;
+  z-index: 3501;
+}
+.pa-detail-view--overlay .pa-detail-view__panel--open {
+  max-width: 100%;
 }
 
 .pa-detail-view__overlay {
   position: absolute;
   inset: 0;
   background-color: var(--pa-detail-panel-overlay-bg);
-  z-index: 1;
+  z-index: 3500;
   opacity: 0;
   visibility: hidden;
   cursor: pointer;
@@ -14559,6 +14623,62 @@ html.font-size-xlarge {
   max-height: 50rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
+.max-h-screen {
+  max-height: 100vh;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-initial {
+  flex: 0 1 auto;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
+.flex-shrink {
+  flex-shrink: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -14594,6 +14714,10 @@ html.font-size-xlarge {
   overflow-x: overlay;
 }
 
+.pa-scroll-lock {
+  overflow: hidden !important;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {
@@ -38,7 +38,7 @@
     "components",
     "ui-kit"
   ],
-  "author": "Pure Admin",
+  "author": "KeenMate",
   "license": "MIT",
   "peerDependencies": {
     "sass": "^1.0.0"
@@ -48,12 +48,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/pure-admin/core.git"
+    "url": "git+https://github.com/KeenMate/pure-admin.git",
+    "directory": "packages/core"
   },
   "bugs": {
-    "url": "https://github.com/pure-admin/core/issues"
+    "url": "https://github.com/KeenMate/pure-admin/issues"
   },
-  "homepage": "https://github.com/pure-admin/core#readme",
+  "homepage": "https://github.com/KeenMate/pure-admin#readme",
   "publishConfig": {
     "access": "public"
   }

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

@@ -29,6 +29,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: $spacing-base; // Gap between header elements (title, description, actions)
     min-width: 0; // Enable text truncation
 
     // Reset margins/paddings for all native elements
@@ -61,10 +62,50 @@
       font-size: $font-size-base;
     }
 
+    // Direct heading children - don't shrink (for three-part layout)
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+      flex-shrink: 0;
+    }
+
+    // Description paragraphs - flexible middle, truncate with ellipsis
+    > p {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--pa-text-color-2);
+      font-size: $font-size-sm;
+    }
+
+    // Actions container - fixed, doesn't shrink
+    .pa-card__actions,
+    .pa-btn-group {
+      flex-shrink: 0;
+    }
+
     // Buttons in card headers - negative margin to prevent header height growth
     .pa-btn {
       margin-top: -0.25rem;
       margin-bottom: -0.25rem;
+      flex-shrink: 0;
+    }
+
+    // Wrap modifier - allow description to wrap (for mobile or long descriptions)
+    &--wrap {
+      flex-wrap: wrap;
+
+      > p {
+        white-space: normal;
+        flex-basis: 100%;
+        order: 1;
+        margin-top: $spacing-xs;
+      }
     }
   }
 

package/src/scss/core-components/_detail-panel.scss

@@ -66,7 +66,12 @@
     top: 0;
     inset-inline-end: 0; // RTL: flips to left
     height: 100%;
-    z-index: 2;
+    z-index: $z-index-detail-panel-card + 1; // 3501 - Below header (4000)
+
+    // In card overlay mode, constrain panel width to container
+    &--open {
+      max-width: 100%; // Don't exceed container width
+    }
   }
 }
 
@@ -75,7 +80,7 @@
   position: absolute;
   inset: 0; // Covers full container
   background-color: var(--pa-detail-panel-overlay-bg);
-  z-index: 1;
+  z-index: $z-index-detail-panel-card; // 3500 - Below panel and header
   opacity: 0;
   visibility: hidden;
   cursor: pointer;

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

@@ -79,6 +79,14 @@
     box-shadow: $shadow-lg;
   }
 
+  // When containing a detail view, allow body to establish positioning context
+  &:has(.pa-detail-view) {
+    .pa-table-card__body {
+      position: relative;
+      overflow: hidden; // Clip detail panel to card boundaries
+    }
+  }
+
   &__header {
     padding: $card-header-padding-v $card-header-padding-h;
     min-height: $card-header-min-height;
@@ -162,6 +170,39 @@
         border-bottom: none;
       }
     }
+
+    // Detail view inside table card body
+    // Supports both inline split-view and overlay modes
+    .pa-detail-view {
+      height: 100%;
+
+      // Table inside detail view main area
+      .pa-detail-view__main {
+        .pa-table {
+          border-radius: 0;
+
+          th:first-child,
+          td:first-child {
+            padding-inline-start: $card-header-padding-h;
+          }
+
+          th:last-child,
+          td:last-child {
+            padding-inline-end: $card-header-padding-h;
+          }
+
+          tbody tr:last-child td {
+            border-bottom: none;
+          }
+        }
+
+        // web-grid inside detail view
+        web-grid {
+          --wg-cell-padding-left: #{$card-header-padding-h};
+          --wg-cell-padding-right: #{$card-header-padding-h};
+        }
+      }
+    }
   }
 
   &__footer {
@@ -263,6 +304,15 @@
       padding-inline: 0;
     }
 
+    // Body in plain mode with detail view - ensure proper containment
+    .pa-table-card__body {
+      // When containing overlay detail view, establish positioning context
+      &:has(.pa-detail-view--overlay) {
+        position: relative;
+        overflow: hidden;
+      }
+    }
+
     // Footer in plain mode
     .pa-table-card__footer {
       background: transparent;

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

@@ -94,6 +94,24 @@ html.font-size-xlarge {
 .max-h-40x { max-height: 40rem; } // 640px
 .max-h-50x { max-height: 50rem; } // 800px
 
+// Percentage-based height utilities - for filling available space
+.h-full { height: 100%; }
+.h-screen { height: 100vh; }
+.min-h-full { min-height: 100%; }
+.min-h-screen { min-height: 100vh; }
+.max-h-full { max-height: 100%; }
+.max-h-screen { max-height: 100vh; }
+
+// Flex utilities - for filling available space in flex containers
+.flex-1 { flex: 1 1 0%; }           // Grow and shrink equally, ignore content size
+.flex-auto { flex: 1 1 auto; }      // Grow and shrink, based on content size
+.flex-initial { flex: 0 1 auto; }   // Shrink but don't grow (default)
+.flex-none { flex: none; }          // Don't grow or shrink
+.flex-grow { flex-grow: 1; }        // Grow to fill space
+.flex-grow-0 { flex-grow: 0; }      // Don't grow
+.flex-shrink { flex-shrink: 1; }    // Allow shrinking
+.flex-shrink-0 { flex-shrink: 0; }  // Don't shrink
+
 // Overflow utilities - pair with height/max-height for scrollable content
 .overflow-auto { overflow: auto; }
 .overflow-y-auto { overflow-y: auto; }
@@ -118,6 +136,12 @@ html.font-size-xlarge {
   overflow-x: overlay;
 }
 
+// Scroll lock - prevents body scrolling when overlays are open
+// Apply to <body> element via JavaScript
+.pa-scroll-lock {
+  overflow: hidden !important;
+}
+
 // Cursor utilities
 .cursor-pointer { cursor: pointer; }
 .cursor-help { cursor: help; }

package/src/scss/variables/_system.scss

@@ -8,6 +8,7 @@ $z-index-base: 0 !default;
 $z-index-content: 1000 !default;
 $z-index-sidebar: 2000 !default;
 $z-index-sidebar-fixed: 3000 !default;
+$z-index-detail-panel-card: 3500 !default;  // Card overlay detail panel (below header)
 $z-index-header: 4000 !default;
 $z-index-profile-panel: 5000 !default;
 $z-index-modal-backdrop: 6000 !default;