@keenmate/pure-admin-core 1.4.0 → 1.5.0

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

@@ -21,7 +21,7 @@
   justify-content: center;
 
   // Positioning modifiers
-  &--left {
+  &--start {
     justify-content: flex-start;
   }
 
@@ -29,7 +29,7 @@
     justify-content: center;
   }
 
-  &--right {
+  &--end {
     justify-content: flex-end;
   }
 
@@ -79,7 +79,7 @@
   justify-content: center;
 
   // Positioning modifiers
-  &--left {
+  &--start {
     justify-content: flex-start;
   }
 
@@ -87,7 +87,7 @@
     justify-content: center;
   }
 
-  &--right {
+  &--end {
     justify-content: flex-end;
   }
 

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;
@@ -431,7 +481,7 @@
   justify-content: center;
 
   // Positioning modifiers
-  &--left {
+  &--start {
     justify-content: flex-start;
   }
 
@@ -439,7 +489,7 @@
     justify-content: center;
   }
 
-  &--right {
+  &--end {
     justify-content: flex-end;
   }
 
@@ -489,7 +539,7 @@
   justify-content: center;
 
   // Positioning modifiers
-  &--left {
+  &--start {
     justify-content: flex-start;
   }
 
@@ -497,7 +547,7 @@
     justify-content: center;
   }
 
-  &--right {
+  &--end {
     justify-content: flex-end;
   }
 

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

@@ -227,7 +227,6 @@
         background: linear-gradient(to right, var(--pa-main-bg), color-mix(in srgb, var(--pa-main-bg) 80%, transparent));
       }
 
-      &--left,
       &--start {
         inset-inline-start: 0; // RTL: flips to right
         background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
@@ -237,7 +236,6 @@
         }
       }
 
-      &--right,
       &--end {
         inset-inline-end: 0; // RTL: flips to left
         background: linear-gradient(to left, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);

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

@@ -375,8 +375,8 @@
       }
     }
 
-    // Modifier: All items on left side
-    &.pa-timeline--left {
+    // Modifier: All items on start side
+    &.pa-timeline--start {
       &::after {
         left: $timeline-block-responsive-line-left;
       }
@@ -412,8 +412,8 @@
       }
     }
 
-    // Modifier: All items on right side
-    &.pa-timeline--right {
+    // Modifier: All items on end side
+    &.pa-timeline--end {
       &::after {
         right: $timeline-block-responsive-line-left;
         left: auto;

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

@@ -490,8 +490,7 @@
   }
 }
 
-// Legacy class for backward compatibility
-.pa-popover--right .pa-popover__body {
+.pa-popover--end .pa-popover__body {
   text-align: end;
 }
 

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; }
@@ -178,14 +202,6 @@ html.font-size-xlarge {
     text-align: end; // RTL: flips to left
   }
 
-  // Legacy aliases for backward compatibility
-  &--left {
-    text-align: start;
-  }
-
-  &--right {
-    text-align: end;
-  }
 
   // Semantic variants (compound styles)
   &--caption {
@@ -343,7 +359,4 @@ html.font-size-xlarge {
 .text-center { text-align: center; }
 .text-end { text-align: end; } // RTL: flips to left
 
-// Legacy text alignment (maps to logical properties)
-.text-left { text-align: start; }
-.text-right { text-align: end; }
 

package/src/scss/core-components/layout/_layout-container.scss

@@ -105,8 +105,8 @@ body.pa-layout--sticky .pa-layout__inner {
   gap: $spacing-base;
 }
 
-// Footer sections - Left/Center/Right layout (mirrors navbar structure)
-.pa-footer__left {
+// Footer sections - Start/Center/End layout (mirrors navbar structure)
+.pa-footer__start {
   display: flex;
   align-items: center;
   gap: $spacing-base;
@@ -121,7 +121,7 @@ body.pa-layout--sticky .pa-layout__inner {
   justify-content: center;
 }
 
-.pa-footer__right {
+.pa-footer__end {
   display: flex;
   align-items: center;
   gap: $spacing-base;
@@ -142,14 +142,14 @@ body.pa-layout--sticky .pa-layout__inner {
     padding: $spacing-sm $spacing-base;
   }
 
-  .pa-footer__left,
+  .pa-footer__start,
   .pa-footer__center,
-  .pa-footer__right {
+  .pa-footer__end {
     flex-shrink: 1;
     min-width: 0;
   }
 
-  .pa-footer__left {
+  .pa-footer__start {
     flex: 1 1 auto;
   }
 
@@ -157,7 +157,7 @@ body.pa-layout--sticky .pa-layout__inner {
     display: none; // Hide empty center on mobile
   }
 
-  .pa-footer__right {
+  .pa-footer__end {
     flex: 0 1 auto;
 
     &--vertical {

package/src/scss/core-components/layout/_navbar-elements.scss

@@ -60,13 +60,13 @@
       }
     }
 
-    // Note: margin auto no longer needed with pa-header__left/center/right structure
-    &--left {
-      // Elements in left section
+    // Note: margin auto no longer needed with pa-header__start/center/end structure
+    &--start {
+      // Elements in start section
     }
 
-    &--right {
-      // Elements in right section
+    &--end {
+      // Elements in end section
     }
   }
 

package/src/scss/core-components/layout/_navbar.scss

@@ -59,8 +59,8 @@ body.pa-container-2xl .pa-navbar {
   gap: $spacing-base;
 }
 
-// Header sections - Left/Center/Right layout
-.pa-header__left {
+// Header sections - Start/Center/End layout
+.pa-header__start {
   display: flex;
   align-items: center;
   gap: $spacing-base;
@@ -75,7 +75,7 @@ body.pa-container-2xl .pa-navbar {
   justify-content: center;
 }
 
-.pa-header__right {
+.pa-header__end {
   display: flex;
   align-items: center;
   gap: $spacing-base;

package/src/scss/utilities.scss

@@ -256,18 +256,10 @@ $spacers: (
 }
 
 // Text utilities
-.text-left {
-  text-align: left !important;
-}
-
 .text-center {
   text-align: center !important;
 }
 
-.text-right {
-  text-align: right !important;
-}
-
 .text-nowrap {
   white-space: nowrap !important;
 }

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;