@keenmate/pure-admin-core 1.4.1 → 1.5.1

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

@@ -84,6 +84,13 @@
     .pa-table-card__body {
       position: relative;
       overflow: hidden; // Clip detail panel to card boundaries
+      display: flex;
+      flex-direction: column;
+
+      // Detail view stretches to fill body
+      .pa-detail-view {
+        flex: 1;
+      }
     }
   }
 
@@ -481,7 +488,7 @@
   justify-content: center;
 
   // Positioning modifiers
-  &--left {
+  &--start {
     justify-content: flex-start;
   }
 
@@ -489,7 +496,7 @@
     justify-content: center;
   }
 
-  &--right {
+  &--end {
     justify-content: flex-end;
   }
 
@@ -539,7 +546,7 @@
   justify-content: center;
 
   // Positioning modifiers
-  &--left {
+  &--start {
     justify-content: flex-start;
   }
 
@@ -547,7 +554,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

@@ -202,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 {
@@ -367,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;
 }
@@ -464,6 +456,11 @@ $spacers: (
 .minhr-40 { min-height: 40rem !important; }
 .minhr-45 { min-height: 45rem !important; }
 .minhr-50 { 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; }
 
 // Max-height (rem)
 .maxhr-1 { max-height: 1rem !important; }
@@ -733,4 +730,12 @@ $spacers: (
 
 .shadow-lg {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+}
+
+// ============================================================================
+// Container queries
+// ============================================================================
+
+.pa-cq {
+  container-type: inline-size;
 }

package/src/scss/variables/_components.scss

@@ -562,9 +562,21 @@ $timeline-feed-scroll-container-max-height: 400px !default;
 $field-label-font-size: $font-size-xs !default;
 $field-label-font-weight: $font-weight-semibold !default;
 $field-label-opacity: 0.55 !default;
+$field-label-letter-spacing: 0.05em !default;
 $field-value-font-size: $font-size-sm !default;
 $field-gap: $spacing-xs !default;
-$field-horizontal-label-width: 14rem !default;
+$field-horizontal-label-min-width: 8rem !default;
+$field-horizontal-label-max-width: 40% !default;
+
+// Copyable field interactions
+$field-copy-padding: 0.4rem !default;
+$field-copy-opacity: 0.5 !default;
+$field-copy-hover-opacity: 1 !default;
+$field-copy-hover-bg: rgba(128, 128, 128, 0.1) !default;
+$field-copy-transition: 0.15s !default;
+$field-copy-click-hover-opacity: 0.7 !default;
+$field-copy-hint-opacity: 0.6 !default;
+
 $fields-gap: $spacing-base !default;
 $fields-relaxed-gap: $spacing-lg !default;
 $fields-bordered-padding: $spacing-sm !default;
@@ -582,3 +594,88 @@ $field-group-title-font-size: $font-size-sm !default;
 $field-group-title-font-weight: $font-weight-semibold !default;
 $field-group-title-border-color: $border-color !default;
 $field-group-spacing: $spacing-lg !default;
+
+// Descriptions Table (pa-desc-table)
+$desc-table-cols: 3 !default;
+$desc-table-cell-padding-v: 1.2rem !default;
+$desc-table-cell-padding-h: 1.6rem !default;
+$desc-table-font-size: $font-size-sm !default;
+$desc-table-label-bg: $fields-filled-bg !default;
+$desc-table-label-colon-spacing: 2px !default;
+$desc-table-value-font-weight: $font-weight-medium !default;
+$desc-table-label-fixed-width: 14rem !default;
+
+// Dot Leaders (pa-dot-leaders)
+$dot-leaders-item-padding-v: 0.6rem !default;
+$dot-leaders-font-size: $font-size-sm !default;
+$dot-leaders-label-font-weight: $font-weight-medium !default;
+$dot-leaders-value-font-weight: $font-weight-semibold !default;
+$dot-leaders-leader-width: 2px !default;
+$dot-leaders-leader-margin: 0.8rem !default;
+$dot-leaders-leader-min-width: 2rem !default;
+$dot-leaders-total-margin-top: 0.4rem !default;
+$dot-leaders-total-padding-top: 0.8rem !default;
+$dot-leaders-total-border-width: 2px !default;
+$dot-leaders-total-font-size: $font-size-base !default;
+$dot-leaders-total-font-weight: $font-weight-bold !default;
+
+// Property Card (pa-prop-card)
+$prop-card-border-radius: 6px !default;
+$prop-card-header-padding-v: 1rem !default;
+$prop-card-header-padding-h: 1.6rem !default;
+$prop-card-header-font-size: 1.3rem !default;
+$prop-card-header-font-weight: $font-weight-semibold !default;
+$prop-card-header-letter-spacing: 0.04em !default;
+$prop-card-header-bg: rgba(128, 128, 128, 0.04) !default;
+$prop-card-row-padding-v: 1rem !default;
+$prop-card-row-padding-h: 1.6rem !default;
+$prop-card-row-font-size: $font-size-sm !default;
+$prop-card-row-gap: 1.6rem !default;
+$prop-card-row-divider-color: rgba(128, 128, 128, 0.08) !default;
+
+// Fields Linear modifier (pa-fields--linear)
+$fields-linear-gap: $spacing-sm !default;
+$fields-linear-font-size: $font-size-sm !default;
+$fields-linear-min-height: 2.8rem !default;
+$fields-linear-label-width: 10rem !default;
+$fields-linear-field-gap: 1.2rem !default;
+
+// Fields Chips modifier (pa-fields--chips)
+$fields-chips-gap-v: 0.6rem !default;
+$fields-chips-gap-h: 1.4rem !default;
+$fields-chips-padding-v: 0.4rem !default;
+$fields-chips-font-size: $font-size-sm !default;
+$fields-chips-field-gap: 0.5rem !default;
+$fields-chips-value-padding-v: 0.2rem !default;
+$fields-chips-value-padding-h: 0.8rem !default;
+$fields-chips-value-font-size: 1.3rem !default;
+$fields-chips-value-font-weight: $font-weight-medium !default;
+$fields-chips-value-bg: rgba(128, 128, 128, 0.1) !default;
+$fields-chips-value-border-radius: 4px !default;
+
+// Banded Rows (pa-banded)
+$banded-font-size: $font-size-sm !default;
+$banded-label-width: 14rem !default;
+$banded-label-width-narrow: 10rem !default;
+$banded-label-width-wide: 20rem !default;
+$banded-label-padding-v: 0.8rem !default;
+$banded-label-padding-h: 1.2rem !default;
+$banded-label-bg: $fields-filled-bg !default;
+$banded-label-font-weight: $font-weight-medium !default;
+$banded-value-padding-v: 0.8rem !default;
+$banded-value-padding-h: 1.2rem !default;
+
+// Accent Grid (pa-accent-grid)
+$accent-grid-min-col: 20rem !default;
+$accent-grid-gap: 0.8rem !default;
+$accent-grid-item-padding-v: 0.8rem !default;
+$accent-grid-item-padding-h: 1.2rem !default;
+$accent-grid-item-padding-start: 1.4rem !default;
+$accent-grid-border-width: 3px !default;
+$accent-grid-label-font-size: 1.1rem !default;
+$accent-grid-label-font-weight: $font-weight-medium !default;
+$accent-grid-label-letter-spacing: 0.03em !default;
+$accent-grid-label-margin-bottom: 0.2rem !default;
+$accent-grid-value-font-size: $font-size-md !default;
+$accent-grid-value-font-weight: $font-weight-semibold !default;
+$accent-grid-value-line-height: $line-height-tight !default;