@keenmate/pure-admin-core 1.2.0 → 1.4.0

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

@@ -8,8 +8,7 @@
 .pa-navbar {
   position: fixed;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0; // RTL: works for both LTR and RTL
   height: $header-height;
   background-color: var(--pa-header-bg);
   border-bottom: $border-width-base solid var(--pa-header-border-color);
@@ -23,42 +22,32 @@
 // Body class is just a marker, no width styles on body itself
 body.pa-container-sm .pa-navbar {
   max-width: $layout-container-sm;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
+  inset-inline: 0; // RTL: works for both LTR and RTL
+  margin-inline: auto; // RTL: centers in both directions
 }
 
 body.pa-container-md .pa-navbar {
   max-width: $layout-container-md;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
+  inset-inline: 0;
+  margin-inline: auto;
 }
 
 body.pa-container-lg .pa-navbar {
   max-width: $layout-container-lg;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
+  inset-inline: 0;
+  margin-inline: auto;
 }
 
 body.pa-container-xl .pa-navbar {
   max-width: $layout-container-xl;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
+  inset-inline: 0;
+  margin-inline: auto;
 }
 
 body.pa-container-2xl .pa-navbar {
   max-width: $layout-container-2xl;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
+  inset-inline: 0;
+  margin-inline: auto;
 }
 
 // Navbar inner content

package/src/scss/core-components/layout/_sidebar-states.scss

@@ -10,7 +10,7 @@
     width: 0;
     opacity: 0;
     overflow: hidden;
-    border-right: none;
+    border-inline-end: none; // RTL: flips to border-left
   }
 
   // Icon-collapse mode: show narrow icon-only bar when hidden
@@ -19,7 +19,7 @@
     opacity: 1; // Override parent opacity: 0 to make icons visible
     overflow: visible !important; // Allow flyout to show outside sidebar
     z-index: 1050; // Higher than content area (950) for flyouts
-    border-right: $border-width-base solid $border-color; // Restore border
+    border-inline-end: $border-width-base solid $border-color; // RTL: flips to border-left
 
     // Enable positioning for flyouts
     .pa-sidebar__item {
@@ -64,14 +64,17 @@
         width: auto;
         overflow: visible; // Remove overflow hidden
         position: absolute;
-        left: 100%;
+        inset-inline-start: 100%; // RTL: flips to right: 100%
         top: 0;
         bottom: 0;
         padding: $spacing-sm $spacing-base;
         background-color: var(--pa-sidebar-bg);
         border: $border-width-base solid var(--pa-border-color);
-        border-left: none;
-        border-radius: 0 $border-radius $border-radius 0;
+        border-inline-start: none; // RTL: flips to border-right: none
+        border-start-start-radius: 0;
+        border-start-end-radius: $border-radius;
+        border-end-end-radius: $border-radius;
+        border-end-start-radius: 0;
         box-shadow: $shadow-md;
         white-space: nowrap;
         z-index: 10; // Relative to parent
@@ -87,7 +90,7 @@
       max-height: none !important;
       overflow: visible !important;
       position: absolute;
-      left: 100%;
+      inset-inline-start: 100%; // RTL: flips to right: 100%
       top: 0;
       min-width: 12rem;
       margin: 0;
@@ -95,8 +98,11 @@
       list-style: none;
       background-color: var(--pa-sidebar-submenu-bg);
       border: $border-width-base solid var(--pa-border-color);
-      border-left: none;
-      border-radius: 0 $border-radius $border-radius 0;
+      border-inline-start: none; // RTL: flips to border-right: none
+      border-start-start-radius: 0;
+      border-start-end-radius: $border-radius;
+      border-end-end-radius: $border-radius;
+      border-end-start-radius: 0;
       box-shadow: $shadow-md;
       z-index: 1001; // Higher than parent
 
@@ -140,8 +146,8 @@
 
       .pa-sidebar__chevron {
         display: inline;
-        margin-left: auto;
-        transform: none !important; // Always point right in flyout menus (never rotate down)
+        margin-inline-start: auto; // RTL: flips to margin-right: auto
+        transform: none !important; // Always point end direction in flyout menus
       }
 
       // Nested submenu flyout (level 3)
@@ -155,7 +161,7 @@
         max-height: none !important;
         overflow: visible !important;
         position: absolute;
-        left: 100%;
+        inset-inline-start: 100%; // RTL: flips to right: 100%
         top: 0;
         min-width: 19.2rem;
         margin: 0;
@@ -163,8 +169,11 @@
         list-style: none;
         background-color: var(--pa-sidebar-submenu-bg);
         border: $border-width-base solid var(--pa-border-color);
-        border-left: none;
-        border-radius: 0 $border-radius $border-radius 0;
+        border-inline-start: none; // RTL: flips to border-right: none
+        border-start-start-radius: 0;
+        border-start-end-radius: $border-radius;
+        border-end-end-radius: $border-radius;
+        border-end-start-radius: 0;
         box-shadow: $shadow-md;
         z-index: 1002; // Higher than parent submenu
 
@@ -174,7 +183,7 @@
         }
 
         .pa-sidebar__chevron {
-          transform: none !important; // Always point right in nested flyout menus
+          transform: none !important; // Always point end direction in nested flyout menus
         }
       }
     }
@@ -210,13 +219,13 @@ body:not(.sidebar-hidden) {
     // Restore submenu indentation for level 2
     .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__link,
     .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__toggle {
-      padding-left: $sidebar-submenu-indent;
+      padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
     }
 
     // Restore submenu indentation for level 3
     .pa-sidebar__submenu .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__link,
     .pa-sidebar__submenu .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__toggle {
-      padding-left: calc($sidebar-submenu-indent * $sidebar-submenu-indent-multiplier);
+      padding-inline-start: calc($sidebar-submenu-indent * $sidebar-submenu-indent-multiplier); // RTL: flips
     }
 
     // Icon maintains same position in both states

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

@@ -18,7 +18,7 @@
 
 .pa-layout__sidebar {
   background-color: var(--pa-sidebar-bg);
-  border-right: $border-width-base solid var(--pa-border-color);
+  border-inline-end: $border-width-base solid var(--pa-border-color); // RTL: flips to border-left
   flex-shrink: 0;
   position: relative;
 }
@@ -27,7 +27,7 @@
 .pa-sidebar-resize {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0; // RTL: flips to left
   width: 6px;
   height: 100%;
   cursor: ew-resize;
@@ -38,7 +38,7 @@
     content: '';
     position: absolute;
     top: 0;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
     width: 2px;
     height: 100%;
@@ -66,7 +66,7 @@ body.pa-sidebar-resizing {
 body.pa-layout--sticky .pa-layout__sidebar {
   overflow-y: auto;
   overflow-y: overlay; // Chromium: scrollbar overlays content, doesn't reduce width
-  overflow-x: visible; // Allow tooltips to escape right
+  overflow-x: visible; // Allow tooltips to escape (right in LTR, left in RTL)
 }
 
 // Sidebar component (separate BEM block)
@@ -93,7 +93,7 @@ body.pa-layout--sticky .pa-layout__sidebar {
     color: var(--pa-sidebar-text-secondary);
     text-decoration: none;
     font-weight: $font-weight-medium;
-    border-right: $border-width-thick solid transparent; // Reserve space to prevent shift on active
+    border-inline-end: $border-width-thick solid transparent; // RTL: flips to border-left
 
     body.loaded & {
       transition: all $transition-fast $easing-snappy;
@@ -107,8 +107,8 @@ body.pa-layout--sticky .pa-layout__sidebar {
     &--active {
       color: var(--pa-sidebar-text);
       background-color: var(--pa-accent-hover);
-      border-right-color: var(--pa-accent); // Only change color, not width
-      font-weight: $font-weight-semibold; // Make active item bolder
+      border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
+      font-weight: $font-weight-semibold;
     }
   }
 
@@ -122,7 +122,7 @@ body.pa-layout--sticky .pa-layout__sidebar {
     background: none;
     border: none;
     width: 100%;
-    text-align: left;
+    text-align: start; // RTL: flips to right
     font-weight: $font-weight-medium;
     cursor: pointer;
 
@@ -181,9 +181,9 @@ body.pa-layout--sticky .pa-layout__sidebar {
 
   // Level 2 submenu links
   &__submenu > &__item > &__link {
-    padding-left: $sidebar-submenu-indent;
+    padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
     font-size: $font-size-md;
-    border-right: $border-width-medium solid transparent; // Reserve space to prevent shift on active
+    border-inline-end: $border-width-medium solid transparent; // RTL: flips to border-left
 
     &:hover {
       background-color: var(--pa-sidebar-submenu-hover-bg);
@@ -191,38 +191,44 @@ body.pa-layout--sticky .pa-layout__sidebar {
 
     &--active {
       background-color: var(--pa-sidebar-submenu-active-bg);
-      border-right-color: var(--pa-accent); // Only change color, not width
+      border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
     }
   }
 
   // Level 2 submenu toggles (for third level)
   &__submenu > &__item > &__toggle {
-    padding-left: $sidebar-submenu-indent;
+    padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
     font-size: $font-size-md;
   }
 
   // Level 3 submenu links
   &__submenu &__submenu > &__item > &__link {
-    padding-left: calc($sidebar-submenu-indent * $sidebar-submenu-indent-multiplier);
+    padding-inline-start: calc($sidebar-submenu-indent * $sidebar-submenu-indent-multiplier); // RTL: flips
     font-size: $font-size-sm;
-    border-right: $border-width-base solid transparent; // Reserve space to prevent shift on active
+    border-inline-end: $border-width-base solid transparent; // RTL: flips to border-left
 
     &--active {
-      border-right-color: var(--pa-accent); // Only change color, not width
+      border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
     }
   }
 
   // Chevron icon for toggle buttons
   &__chevron {
-    margin-left: auto;
+    margin-inline-start: auto; // RTL: flips to margin-right: auto
     font-size: $font-size-xs;
 
     body.loaded & {
       transition: transform $transition-fast $easing-snappy;
     }
 
+    // Chevron points right (›) in LTR, left (‹) in RTL
+    // When open, rotates 90deg clockwise in LTR, -90deg (counter-clockwise) in RTL
     .pa-sidebar__item--open & {
       transform: rotate(90deg);
     }
+
+    [dir="rtl"] .pa-sidebar__item--open & {
+      transform: rotate(-90deg);
+    }
   }
 }

package/src/scss/variables/_components.scss

@@ -555,3 +555,30 @@ $timeline-feed-time-width: 50px !default;
 $timeline-feed-time-font-size: $font-size-xs !default;
 $timeline-feed-time-padding-top: 6px !default;
 $timeline-feed-scroll-container-max-height: 400px !default;
+
+// ============================================================================
+// DATA DISPLAY (READ-ONLY FIELDS)
+// ============================================================================
+$field-label-font-size: $font-size-xs !default;
+$field-label-font-weight: $font-weight-semibold !default;
+$field-label-opacity: 0.55 !default;
+$field-value-font-size: $font-size-sm !default;
+$field-gap: $spacing-xs !default;
+$field-horizontal-label-width: 14rem !default;
+$fields-gap: $spacing-base !default;
+$fields-relaxed-gap: $spacing-lg !default;
+$fields-bordered-padding: $spacing-sm !default;
+$fields-bordered-border-color: $border-color !default;
+$fields-striped-bg: $table-stripe !default;
+$fields-cols-gap: $spacing-base !default;
+$fields-border-left: 3px solid $accent-color !default;
+$fields-padding-left: $spacing-base !default;
+$fields-filled-bg: rgba(128, 128, 128, 0.06) !default;
+$fields-filled-padding: $spacing-base !default;
+
+// Field group (labeled section of fields)
+$field-group-gap: $spacing-sm !default;
+$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;