@keenmate/pure-admin-core 1.3.0 → 1.4.0

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

@@ -149,12 +149,12 @@
       // Align first/last column with card header/footer padding
       th:first-child,
       td:first-child {
-        padding-left: $card-header-padding-h;
+        padding-inline-start: $card-header-padding-h; // RTL: flips to padding-right
       }
 
       th:last-child,
       td:last-child {
-        padding-right: $card-header-padding-h;
+        padding-inline-end: $card-header-padding-h; // RTL: flips to padding-left
       }
 
       // Remove bottom border from last row (card border handles it)
@@ -167,8 +167,8 @@
   &__footer {
     padding: $card-footer-padding-v $card-footer-padding-h;
     border-top: $border-width-base solid var(--pa-border-color);
-    border-bottom-left-radius: $card-border-radius;
-    border-bottom-right-radius: $card-border-radius;
+    border-end-start-radius: $card-border-radius; // RTL: bottom-right in RTL
+    border-end-end-radius: $card-border-radius;   // RTL: bottom-left in RTL
     background: var(--pa-card-footer-bg);
     display: flex;
     justify-content: space-between;
@@ -260,8 +260,7 @@
       background: transparent;
       border-bottom: none;
       border-radius: 0;
-      padding-left: 0;
-      padding-right: 0;
+      padding-inline: 0;
     }
 
     // Footer in plain mode
@@ -269,8 +268,7 @@
       background: transparent;
       border-top: none;
       border-radius: 0;
-      padding-left: 0;
-      padding-right: 0;
+      padding-inline: 0;
     }
   }
 }
@@ -284,7 +282,7 @@
   th,
   td {
     padding: $table-padding-base-v $table-padding-base-h;
-    text-align: left;
+    text-align: start; // RTL: flips to right
     border-bottom: $border-width-base solid var(--pa-border-color);
     vertical-align: middle;
     line-height: $line-height-tight;
@@ -379,13 +377,13 @@
 
   // Hover effects
   @if $table-hover-accent-width > 0 {
-    // Header alignment - add padding-left instead of border
+    // Header alignment - add padding to match hover accent border
     th:first-child {
-      padding-left: $table-hover-accent-width + $table-padding-base-h;
+      padding-inline-start: $table-hover-accent-width + $table-padding-base-h; // RTL: flips to padding-right
     }
 
     tbody tr {
-      border-#{$table-hover-accent-position}: #{$table-hover-accent-width} solid transparent;
+      border-inline-start: #{$table-hover-accent-width} solid transparent; // RTL: flips to border-right
       transition: border-color $transition-normal $easing-smooth;
     }
   }
@@ -395,7 +393,7 @@
 
     // Apply hover accent if enabled
     @if $table-hover-accent-width > 0 {
-      border-#{$table-hover-accent-position}-color: var(--pa-table-hover-accent-color);
+      border-inline-start-color: var(--pa-table-hover-accent-color); // RTL: flips to border-right-color
     }
   }
 
@@ -547,7 +545,7 @@
   &__count {
     color: var(--pa-text-color-2);
     font-size: $font-size-xs;
-    margin-left: $spacing-xs;
+    margin-inline-start: $spacing-xs; // RTL: flips to margin-right
   }
 }
 
@@ -575,13 +573,13 @@
 .pa-virtual-table__header-cell {
   padding: $virtual-table-cell-padding-v $virtual-table-cell-padding-h;
   font-weight: $font-weight-semibold;
-  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
   background: var(--pa-table-header-bg);
   color: var(--pa-text-color-1);
 }
 
 .pa-virtual-table__header-cell:last-child {
-  border-right: none;
+  border-inline-end: none;
 }
 
 .pa-virtual-table__body {
@@ -596,7 +594,7 @@
 
   // Setup for hover accent border (same as pa-table)
   @if $table-hover-accent-width > 0 {
-    border-#{$table-hover-accent-position}: #{$table-hover-accent-width} solid transparent;
+    border-inline-start: #{$table-hover-accent-width} solid transparent; // RTL: flips to border-right
     transition: border-color $transition-normal $easing-smooth;
   }
 }
@@ -610,13 +608,13 @@
 
   // Apply hover accent if enabled (same as pa-table)
   @if $table-hover-accent-width > 0 {
-    border-#{$table-hover-accent-position}-color: var(--pa-table-hover-accent-color);
+    border-inline-start-color: var(--pa-table-hover-accent-color); // RTL: flips to border-right-color
   }
 }
 
 .pa-virtual-table__cell {
   padding: $virtual-table-cell-padding-v $virtual-table-cell-padding-h;
-  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
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -625,7 +623,7 @@
 }
 
 .pa-virtual-table__cell:last-child {
-  border-right: none;
+  border-inline-end: none;
 }
 
 // Responsive Tables - Stackable Layout
@@ -637,8 +635,7 @@
     -webkit-overflow-scrolling: touch; // Smooth scrolling on iOS
 
     // Show subtle scroll hint with border
-    border-left: $border-width-base solid var(--pa-border-color);
-    border-right: $border-width-base solid var(--pa-border-color);
+    border-inline: $border-width-base solid var(--pa-border-color); // RTL: no change needed (symmetric)
   }
 
   // Mobile: Stack into cards
@@ -658,7 +655,7 @@
 
       // Reset hover accent border for mobile
       @if $table-hover-accent-width > 0 {
-        border-#{$table-hover-accent-position}: $border-width-base solid var(--pa-border-color) !important;
+        border-inline-start: $border-width-base solid var(--pa-border-color) !important; // RTL: flips
       }
 
       &:last-child {
@@ -669,7 +666,7 @@
     // Make each cell a row within the card
     tbody td {
       display: block;
-      text-align: right;
+      text-align: end; // RTL: flips to left (value on end side)
       padding: $table-responsive-card-padding;
       position: relative;
       border-bottom: $border-width-base solid var(--pa-border-color);
@@ -683,15 +680,15 @@
       &::before {
         content: attr(data-label);
         position: absolute;
-        left: $table-responsive-card-padding;
+        inset-inline-start: $table-responsive-card-padding; // RTL: flips to right
         top: $table-responsive-card-padding;
         font-weight: $table-responsive-label-font-weight;
-        text-align: left;
+        text-align: start; // RTL: flips to right
         width: $table-responsive-label-width;
       }
 
-      // Value aligned to the right
-      padding-left: calc($table-responsive-label-width + $table-responsive-card-padding * 2);
+      // Value aligned to the end (leave space for label on start side)
+      padding-inline-start: calc($table-responsive-label-width + $table-responsive-card-padding * 2); // RTL: flips
     }
 
     // Disable col-auto effect in responsive view
@@ -730,8 +727,7 @@
     display: block;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-    border-left: $border-width-base solid var(--pa-border-color);
-    border-right: $border-width-base solid var(--pa-border-color);
+    border-inline: $border-width-base solid var(--pa-border-color); // RTL: no change needed (symmetric)
   }
 
   // Mobile: CSS Grid layout

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

@@ -119,19 +119,22 @@
   &--vertical {
     flex-direction: column;
     border-bottom: none;
-    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
     gap: 0;
     margin-bottom: 0;
-    padding-right: 0;
+    padding-inline-end: 0; // RTL: flips to padding-left
     width: fit-content;
     min-width: max-content;
 
     .pa-tabs__item {
       justify-content: flex-start;
       border-bottom: none;
-      border-right: $border-width-medium solid transparent;
+      border-inline-end: $border-width-medium solid transparent; // RTL: flips to border-left
       padding: $spacing-sm;
-      border-radius: $border-radius 0 0 $border-radius;
+      border-start-start-radius: $border-radius; // RTL: top-right in RTL
+      border-end-start-radius: $border-radius;   // RTL: bottom-right in RTL
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
       gap: $tabs-vertical-item-gap;
       white-space: nowrap;
       min-height: 4rem; // Default height for vertical tabs
@@ -141,7 +144,7 @@
       }
 
       &--active {
-        border-right-color: $accent-color;
+        border-inline-end-color: $accent-color; // RTL: flips to border-left-color
         background-color: rgba($accent-color, $tabs-vertical-active-opacity);
       }
 
@@ -224,14 +227,24 @@
         background: linear-gradient(to right, var(--pa-main-bg), color-mix(in srgb, var(--pa-main-bg) 80%, transparent));
       }
 
-      &--left {
-        left: 0;
+      &--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);
+
+        [dir="rtl"] & {
+          background: linear-gradient(to left, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
+        }
       }
 
-      &--right {
-        right: 0;
+      &--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);
+
+        [dir="rtl"] & {
+          background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
+        }
       }
 
       &--visible {
@@ -373,7 +386,7 @@
       // Overflow toggle for tabs that don't fit
       .pa-tabs__overflow {
         position: relative;
-        margin-left: auto;
+        margin-inline-start: auto; // RTL: flips to margin-right
         flex-shrink: 0;
       }
 
@@ -390,7 +403,7 @@
         color: var(--pa-text-color-2);
         cursor: pointer;
         transition: all $transition-fast $easing-snappy;
-        border-left: $border-width-base solid var(--pa-border-color);
+        border-inline-start: $border-width-base solid var(--pa-border-color); // RTL: flips to border-right
         margin: (-$card-header-padding-v) (-$card-header-padding-h) (-$card-header-padding-v) 0;
         box-sizing: content-box;
         height: $card-header-min-height;
@@ -423,7 +436,7 @@
       .pa-tabs__overflow-menu {
         position: absolute;
         top: $card-header-min-height;
-        right: 0;
+        inset-inline-end: 0; // RTL: flips to left
         min-width: 15rem;
         background: var(--pa-card-bg);
         border: $card-border-width solid var(--pa-border-color);
@@ -443,7 +456,7 @@
           border: none;
           border-bottom: none;
           border-radius: 0;
-          text-align: left;
+          text-align: start; // RTL: flips to right
           white-space: nowrap;
 
           &:hover {
@@ -480,7 +493,7 @@
 
       // Add divider between tabs and content (gap already provides spacing)
       .pa-tabs--vertical {
-        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
 
         // Make tab items full width so active border reaches divider
         .pa-tabs__item {

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

@@ -13,11 +13,11 @@
     position: relative;
   }
 
-  // Variant 1: Simple left-aligned timeline (like Timeline #1)
+  // Variant 1: Simple start-aligned timeline (like Timeline #1)
   &--simple {
-    border-left: $timeline-simple-line-width solid var(--pa-border-color);
-    margin-left: $timeline-simple-margin-left;
-    padding-left: $timeline-simple-padding-left;
+    border-inline-start: $timeline-simple-line-width solid var(--pa-border-color); // RTL: flips to right
+    margin-inline-start: $timeline-simple-margin-left; // RTL: flips to right
+    padding-inline-start: $timeline-simple-padding-left; // RTL: flips to right
 
     .pa-timeline__item {
       padding-bottom: $spacing-lg;
@@ -32,7 +32,7 @@
       &::before {
         content: '';
         position: absolute;
-        left: $timeline-simple-dot-offset;
+        inset-inline-start: $timeline-simple-dot-offset; // RTL: flips to right
         top: 0;
         width: $timeline-simple-dot-size;
         height: $timeline-simple-dot-size;

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

@@ -15,38 +15,47 @@
   flex-direction: column;
   gap: $spacing-md;
 
-  // Position variations
-  &--top-right {
+  // Position variations - using logical properties for RTL support
+  &--top-end {
     top: $spacing-lg;
-    right: $spacing-lg;
+    inset-inline-end: $spacing-lg; // RTL: flips to left
   }
 
-  &--top-left {
+  &--top-start {
     top: $spacing-lg;
-    left: $spacing-lg;
+    inset-inline-start: $spacing-lg; // RTL: flips to right
   }
 
-  &--bottom-right {
+  &--bottom-end {
     bottom: $spacing-lg;
-    right: $spacing-lg;
+    inset-inline-end: $spacing-lg; // RTL: flips to left
   }
 
-  &--bottom-left {
+  &--bottom-start {
     bottom: $spacing-lg;
-    left: $spacing-lg;
+    inset-inline-start: $spacing-lg; // RTL: flips to right
   }
 
   &--top-center {
     top: $spacing-lg;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
+
+    [dir="rtl"] & {
+      transform: translateX(50%);
+    }
   }
 
   &--bottom-center {
     bottom: $spacing-lg;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
+
+    [dir="rtl"] & {
+      transform: translateX(50%);
+    }
   }
+
 }
 
 // ===== TOAST ITEM =====
@@ -81,9 +90,37 @@
     transform: translateX(100%);
   }
 
-  // Left position animations
-  .pa-toast-container--top-left &,
-  .pa-toast-container--bottom-left & {
+  // Start position animations (left in LTR, right in RTL)
+  .pa-toast-container--top-start &,
+  .pa-toast-container--bottom-start & {
+    transform: translateX(-100%);
+
+    &.pa-toast--show {
+      transform: translateX(0);
+    }
+
+    &.pa-toast--hide {
+      transform: translateX(-100%);
+    }
+  }
+
+  // RTL: reverse animation direction for start positions
+  [dir="rtl"] .pa-toast-container--top-start &,
+  [dir="rtl"] .pa-toast-container--bottom-start & {
+    transform: translateX(100%);
+
+    &.pa-toast--show {
+      transform: translateX(0);
+    }
+
+    &.pa-toast--hide {
+      transform: translateX(100%);
+    }
+  }
+
+  // RTL: reverse animation direction for end positions
+  [dir="rtl"] .pa-toast-container--top-end &,
+  [dir="rtl"] .pa-toast-container--bottom-end & {
     transform: translateX(-100%);
 
     &.pa-toast--show {
@@ -175,7 +212,7 @@
 .pa-toast__progress {
   position: absolute;
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0; // RTL: flips to right
   height: $toast-progress-height;
   background-color: currentColor;
   opacity: 0.3;
@@ -258,18 +295,17 @@
 
 @media (max-width: $mobile-breakpoint) {
   .pa-toast-container {
-    left: $spacing-md !important;
-    right: $spacing-md !important;
+    inset-inline: $spacing-md !important; // RTL: full width on mobile
     transform: none !important;
 
-    &--top-right,
-    &--top-left,
+    &--top-end,
+    &--top-start,
     &--top-center {
       top: $spacing-md;
     }
 
-    &--bottom-right,
-    &--bottom-left,
+    &--bottom-end,
+    &--bottom-start,
     &--bottom-center {
       bottom: $spacing-md;
     }

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

@@ -48,7 +48,7 @@
   // Multiline tooltip variant
   &--multiline::before {
     white-space: normal;
-    text-align: left;
+    text-align: start; // RTL: flips to right
     width: $tooltip-multiline-width;
     max-width: $tooltip-multiline-width;
     line-height: $line-height-base;
@@ -414,7 +414,7 @@
     font-size: $font-size-sm;
     line-height: $line-height-base;
     color: var(--pa-text-color-1);
-    text-align: left; // Reset inherited alignment for rich content
+    text-align: start; // RTL: flips to right
 
     p {
       margin: 0 0 $spacing-sm 0;
@@ -435,7 +435,7 @@
 
     ul, ol {
       margin: $spacing-sm 0;
-      padding-left: $spacing-lg;
+      padding-inline-start: $spacing-lg; // RTL: flips to padding-right
     }
 
     code {
@@ -485,11 +485,16 @@
     text-align: center;
   }
 
-  &--right &__body {
-    text-align: right;
+  &--end &__body {
+    text-align: end; // RTL: flips to left
   }
 }
 
+// Legacy class for backward compatibility
+.pa-popover--right .pa-popover__body {
+  text-align: end;
+}
+
 // ========================================
 // Floating UI Tooltip (Portal Rendering)
 // ========================================
@@ -510,7 +515,7 @@
   // Multiline variant
   &.pa-tooltip--multiline {
     white-space: normal;
-    text-align: left;
+    text-align: start; // RTL: flips to right
     max-width: $tooltip-multiline-max-width;
   }
 

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

@@ -5,45 +5,24 @@
 @use '../variables' as *;
 
 // Font size classes - Apply to <html> element for proportional scaling of all rem units
+// These use absolute px values because rem would be calculated against browser default (16px),
+// not the framework's 10px base. Scaling the html font-size scales all rem values proportionally.
 // Example: document.documentElement.classList.add('font-size-large');
-html.font-size-2xs {
-  font-size: $font-size-2xs;
-}
-
-html.font-size-xs {
-  font-size: $font-size-xs;
-}
 
 html.font-size-small {
-  font-size: $font-size-sm;
-}
-
-html.font-size-medium {
-  font-size: $font-size-md;
+  font-size: 9px;   // ~14px body text (9 * 1.6 = 14.4px)
 }
 
 html.font-size-default {
-  font-size: $font-size-base;
+  font-size: 10px;  // 16px body text (default, same as html base)
 }
 
 html.font-size-large {
-  font-size: $font-size-lg;
+  font-size: 11px;  // ~18px body text (11 * 1.6 = 17.6px)
 }
 
 html.font-size-xlarge {
-  font-size: $font-size-xl;
-}
-
-html.font-size-2xl {
-  font-size: $font-size-2xl;
-}
-
-html.font-size-3xl {
-  font-size: $font-size-3xl;
-}
-
-html.font-size-4xl {
-  font-size: $font-size-4xl;
+  font-size: 12px;  // ~19px body text (12 * 1.6 = 19.2px)
 }
 
 // Font family utilities
@@ -186,17 +165,26 @@ html.font-size-4xl {
     color: var(--pa-text-color-2);
   }
 
-  // Alignment modifiers
-  &--left {
-    text-align: left;
+  // Alignment modifiers (logical properties for RTL support)
+  &--start {
+    text-align: start; // RTL: flips to right
   }
 
   &--center {
     text-align: center;
   }
 
+  &--end {
+    text-align: end; // RTL: flips to left
+  }
+
+  // Legacy aliases for backward compatibility
+  &--left {
+    text-align: start;
+  }
+
   &--right {
-    text-align: right;
+    text-align: end;
   }
 
   // Semantic variants (compound styles)
@@ -322,3 +310,40 @@ html.font-size-4xl {
   .pa-border-color-#{$i} { border-color: var(--pa-color-#{$i}); }
 }
 
+// ========================================
+// Logical Spacing Utilities (RTL-aware)
+// ms = margin-inline-start, me = margin-inline-end
+// ps = padding-inline-start, pe = padding-inline-end
+// ========================================
+
+// Margin inline-start (ms-*) - RTL: flips to margin-right
+@each $name, $value in $semantic-spacers {
+  .ms-#{$name} { margin-inline-start: #{$value}; }
+}
+.ms-auto { margin-inline-start: auto; }
+
+// Margin inline-end (me-*) - RTL: flips to margin-left
+@each $name, $value in $semantic-spacers {
+  .me-#{$name} { margin-inline-end: #{$value}; }
+}
+.me-auto { margin-inline-end: auto; }
+
+// Padding inline-start (ps-*) - RTL: flips to padding-right
+@each $name, $value in $semantic-spacers {
+  .ps-#{$name} { padding-inline-start: #{$value}; }
+}
+
+// Padding inline-end (pe-*) - RTL: flips to padding-left
+@each $name, $value in $semantic-spacers {
+  .pe-#{$name} { padding-inline-end: #{$value}; }
+}
+
+// Text alignment utilities (RTL-aware)
+.text-start { text-align: start; } // RTL: flips to right
+.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; }
+