@keenmate/pure-admin-core 1.3.0 → 1.4.1

package/src/scss/core-components/_data-display.scss

@@ -79,7 +79,7 @@
         content: 'Click to copy';
         font-size: $font-size-2xs;
         opacity: 0;
-        margin-left: $spacing-sm;
+        margin-inline-start: $spacing-sm; // RTL: flips to right
         transition: opacity 0.15s;
       }
 
@@ -167,8 +167,8 @@
   display: flex;
   flex-direction: column;
   gap: $fields-gap;
-  border-left: $fields-border-left;
-  padding-left: $fields-padding-left;
+  border-inline-start: $fields-border-left; // RTL: flips to right
+  padding-inline-start: $fields-padding-left; // RTL: flips to right
 
   // ------------------------------------------------------------------
   // GRID COLUMNS: multi-column layouts using CSS grid
@@ -338,10 +338,10 @@
   }
 
   // ------------------------------------------------------------------
-  // NO BORDER: remove left border
+  // NO BORDER: remove start border
   // ------------------------------------------------------------------
   &--no-border {
-    border-left: none;
-    padding-left: 0;
+    border-inline-start: none; // RTL: flips to right
+    padding-inline-start: 0; // RTL: flips to right
   }
 }

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

@@ -33,20 +33,20 @@
     overflow: auto;
   }
 
-  // Right side: detail panel (hidden by default)
+  // End side: detail panel (hidden by default, right in LTR, left in RTL)
   &__panel {
     width: 0;
     min-width: 0;
     overflow: hidden;
     flex-shrink: 0;
-    border-left: 0 solid var(--pa-border-color);
+    border-inline-start: 0 solid var(--pa-border-color); // RTL: flips to right
 
     // Open state: show panel with configured width
     &--open {
       width: var(--pa-local-detail-panel-width);
       min-width: $detail-panel-min-width;
       max-width: var(--pa-local-detail-panel-max-width);
-      border-left-width: $border-width-base;
+      border-inline-start-width: $border-width-base; // RTL: flips to right
       overflow: visible;
     }
   }
@@ -64,21 +64,23 @@
   .pa-detail-view__panel {
     position: absolute;
     top: 0;
-    right: 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
+    }
   }
 }
 
 // Backdrop for card overlay mode
 .pa-detail-view__overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  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;
@@ -96,9 +98,7 @@
 
 .pa-detail-panel--overlay {
   position: fixed;
-  top: 0;
-  right: 0;
-  height: 100vh;
+  inset: 0; // Cover full viewport for backdrop
   z-index: var(--pa-detail-panel-z-index);
   pointer-events: none;
   opacity: 0;
@@ -127,26 +127,36 @@
   background-color: var(--pa-card-bg);
   position: relative;
 
-  // In overlay mode: slide-in from right
+  // In overlay mode: slide-in from end side (right in LTR, left in RTL)
   .pa-detail-panel--overlay & {
     position: absolute;
     top: 0;
     right: 0;
+    left: auto;
     height: 100vh;
     width: var(--pa-local-detail-panel-width);
     max-width: var(--pa-local-detail-panel-max-width);
     box-shadow: $detail-panel-shadow;
     transform: translateX(100%);
   }
+
+  // RTL: position on left and slide from left
+  [dir="rtl"] .pa-detail-panel--overlay & {
+    right: auto;
+    left: 0;
+    transform: translateX(-100%);
+  }
+
+  // RTL open state
+  [dir="rtl"] .pa-detail-panel--overlay.pa-detail-panel--open & {
+    transform: translateX(0);
+  }
 }
 
 // Backdrop overlay (overlay mode only)
 .pa-detail-panel__overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+  inset: 0; // Covers full viewport
   background-color: var(--pa-detail-panel-overlay-bg);
   cursor: pointer;
 }
@@ -248,7 +258,7 @@
 .pa-detail-panel-resize {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0; // RTL: flips to right
   width: $detail-panel-resize-handle-width;
   height: 100%;
   cursor: col-resize;
@@ -293,9 +303,7 @@
   .pa-detail-panel--mobile-overlay {
     display: block;
     position: fixed;
-    top: 0;
-    right: 0;
-    height: 100vh;
+    inset: 0; // Cover full viewport for backdrop
     z-index: var(--pa-detail-panel-z-index);
     pointer-events: none;
     opacity: 0;
@@ -315,6 +323,7 @@
       position: absolute;
       top: 0;
       right: 0;
+      left: auto;
       height: 100vh;
       width: $detail-panel-mobile-width;
       max-width: none;
@@ -322,12 +331,20 @@
       transform: translateX(100%);
     }
 
+    // RTL: position on left and slide from left
+    [dir="rtl"] & .pa-detail-panel__content {
+      right: auto;
+      left: 0;
+      transform: translateX(-100%);
+    }
+
+    [dir="rtl"] &.pa-detail-panel--open .pa-detail-panel__content {
+      transform: translateX(0);
+    }
+
     .pa-detail-panel__overlay {
       position: absolute;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
+      inset: 0; // Covers full viewport
       background-color: var(--pa-detail-panel-overlay-bg);
       cursor: pointer;
     }

package/src/scss/core-components/_file-selector.scss

@@ -102,7 +102,7 @@
 
     &-icon {
       display: inline-block;
-      margin-right: $spacing-xs;
+      margin-inline-end: $spacing-xs; // RTL: flips to left
       font-size: $font-size-lg;
     }
   }
@@ -374,7 +374,7 @@
     }
 
     th {
-      text-align: left;
+      text-align: start; // RTL: flips to right
       padding: $spacing-xs $spacing-sm;
       border-bottom: $border-width-base solid var(--pa-border-color);
       color: var(--pa-text-color-2);

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

@@ -47,24 +47,20 @@ $grid-columns-fractions: (
 .pa-row {
   display: flex;
   flex-wrap: wrap;
-  margin-left: -$grid-gutter;
-  margin-right: -$grid-gutter;
+  margin-inline: -$grid-gutter; // RTL: flips automatically
 
   // Nested rows reset margins
   .pa-row {
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline: 0;
   }
 }
 
 // Row modifiers
 .pa-row--no-gutter {
-  margin-left: 0;
-  margin-right: 0;
+  margin-inline: 0;
 
   > [class*="pa-col"] {
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
   }
 }
 
@@ -113,8 +109,7 @@ $grid-columns-fractions: (
 // ============================================================================
 .pa-col {
   flex: 1;
-  padding-left: $grid-gutter;
-  padding-right: $grid-gutter;
+  padding-inline: $grid-gutter; // RTL: flips automatically
   min-width: 0; // Prevent content overflow
 }
 
@@ -122,8 +117,7 @@ $grid-columns-fractions: (
 .pa-col-auto {
   flex: 0 0 auto;
   width: auto;
-  padding-left: $grid-gutter;
-  padding-right: $grid-gutter;
+  padding-inline: $grid-gutter;
 }
 
 // ============================================================================
@@ -133,8 +127,7 @@ $grid-columns-fractions: (
   .pa-col-#{$size} {
     flex: 0 0 math.percentage(math.div($size, 100));
     max-width: math.percentage(math.div($size, 100));
-    padding-left: $grid-gutter;
-    padding-right: $grid-gutter;
+    padding-inline: $grid-gutter; // RTL: flips automatically
     min-width: 0; // Prevent content overflow
   }
 }
@@ -146,8 +139,7 @@ $grid-columns-fractions: (
   .pa-col-#{$name} {
     flex: 0 0 $width;
     max-width: $width;
-    padding-left: $grid-gutter;
-    padding-right: $grid-gutter;
+    padding-inline: $grid-gutter; // RTL: flips automatically
     min-width: 0; // Prevent content overflow
   }
 }
@@ -158,7 +150,7 @@ $grid-columns-fractions: (
 @each $size in $grid-columns-5 {
   @if $size < 100 {
     .pa-offset-#{$size} {
-      margin-left: math.percentage(math.div($size, 100));
+      margin-inline-start: math.percentage(math.div($size, 100)); // RTL: flips to margin-right
     }
   }
 }
@@ -173,8 +165,7 @@ $grid-columns-fractions: (
       .pa-col-#{$bp}-#{$size} {
         flex: 0 0 math.percentage(math.div($size, 100));
         max-width: math.percentage(math.div($size, 100));
-        padding-left: $grid-gutter;
-        padding-right: $grid-gutter;
+        padding-inline: $grid-gutter; // RTL: flips automatically
         min-width: 0; // Prevent content overflow
       }
     }
@@ -184,8 +175,7 @@ $grid-columns-fractions: (
       .pa-col-#{$bp}-#{$name} {
         flex: 0 0 $width;
         max-width: $width;
-        padding-left: $grid-gutter;
-        padding-right: $grid-gutter;
+        padding-inline: $grid-gutter; // RTL: flips automatically
         min-width: 0; // Prevent content overflow
       }
     }
@@ -194,7 +184,7 @@ $grid-columns-fractions: (
     @each $size in $grid-columns-5 {
       @if $size < 100 {
         .pa-offset-#{$bp}-#{$size} {
-          margin-left: math.percentage(math.div($size, 100));
+          margin-inline-start: math.percentage(math.div($size, 100)); // RTL: flips to margin-right
         }
       }
     }
@@ -211,8 +201,7 @@ $grid-columns-fractions: (
 // COLUMN MODIFIERS
 // ============================================================================
 .pa-col--no-padding {
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline: 0;
 }
 
 .pa-col--grow {

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

@@ -7,7 +7,7 @@
 // Basic HTML Lists (ul, ol, dl)
 .pa-list-basic {
   margin: 0;
-  padding-left: $spacing-lg;
+  padding-inline-start: $spacing-lg; // RTL: flips to right
 
   li {
     margin-bottom: $spacing-sm;
@@ -24,12 +24,12 @@
 
   &--unstyled {
     list-style: none;
-    padding-left: 0;
+    padding-inline-start: 0; // RTL: flips to right
   }
 
   &--inline {
     list-style: none;
-    padding-left: 0;
+    padding-inline-start: 0; // RTL: flips to right
     display: flex;
     flex-wrap: wrap;
     gap: $spacing-base;
@@ -37,7 +37,7 @@
 
   &--bordered {
     list-style: none;
-    padding-left: 0;
+    padding-inline-start: 0; // RTL: flips to right
 
     li {
       padding: $spacing-sm $spacing-base;
@@ -51,7 +51,7 @@
 
   &--striped {
     list-style: none;
-    padding-left: 0;
+    padding-inline-start: 0; // RTL: flips to right
 
     li {
       padding: $spacing-sm $spacing-base;
@@ -64,7 +64,7 @@
 
   &--icon {
     list-style: none;
-    padding-left: 0;
+    padding-inline-start: 0; // RTL: flips to right
 
     li {
       display: flex;
@@ -98,12 +98,12 @@
 
 .pa-list-ordered {
   margin: 0;
-  padding-left: $spacing-lg;
+  padding-inline-start: $spacing-lg; // RTL: flips to right
 
   li {
     margin-bottom: $spacing-sm;
     line-height: 1.6;
-    padding-left: $spacing-xs;
+    padding-inline-start: $spacing-xs; // RTL: flips to right
   }
 
   &--roman {
@@ -130,7 +130,7 @@
   }
 
   dd {
-    margin-left: $spacing-lg;
+    margin-inline-start: $spacing-lg; // RTL: flips to right
     margin-bottom: $spacing-sm;
     color: var(--pa-text-color-2);
     line-height: 1.6;
@@ -139,7 +139,7 @@
   &--inline {
     dt {
       display: inline;
-      margin-right: $spacing-xs;
+      margin-inline-end: $spacing-xs; // RTL: flips to left
 
       &::after {
         content: ':';
@@ -148,8 +148,8 @@
 
     dd {
       display: inline;
-      margin-left: 0;
-      margin-right: $spacing-base;
+      margin-inline-start: 0; // RTL: flips to right
+      margin-inline-end: $spacing-base; // RTL: flips to left
 
       &::after {
         content: '';

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

@@ -9,10 +9,7 @@
 // Modal wrapper
 .pa-modal {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0; // RTL: full screen works in both directions
   display: none;
   justify-content: center;
   align-items: center;
@@ -32,10 +29,7 @@
 // Modal backdrop (the dark overlay)
 .pa-modal__backdrop {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0; // RTL: full screen works in both directions
   background-color: var(--pa-modal-overlay-bg);
   z-index: $z-index-modal-backdrop;
 }

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

@@ -135,7 +135,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 right
   }
 }
 

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

@@ -53,7 +53,7 @@
 .pa-profile-panel {
   position: fixed;
   top: 0;
-  right: 0;
+  inset-inline-end: 0; // RTL: flips to left
   height: 100vh;
   z-index: $z-index-profile-panel;
   pointer-events: none;
@@ -75,7 +75,7 @@
   &__overlay {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0; // RTL: flips to right
     width: 100vw;
     height: 100vh;
     background-color: var(--pa-profile-overlay-bg);
@@ -85,7 +85,7 @@
   &__content {
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0; // RTL: flips to left
     height: 100vh;
     background-color: var(--pa-card-bg);
     box-shadow: $shadow-profile-panel;
@@ -94,6 +94,11 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+
+    // RTL: slide from left instead of right
+    [dir="rtl"] & {
+      transform: translateX(-100%);
+    }
   }
 
   &__header {
@@ -132,7 +137,7 @@
   &__info {
     flex: 1;
     min-width: 0;
-    padding-right: $profile-close-size; // Space for close button
+    padding-inline-end: $profile-close-size; // RTL: flips to padding-left (space for close button)
   }
 
   &__name {
@@ -170,7 +175,7 @@
   &__close {
     position: absolute;
     top: $spacing-base;
-    right: $spacing-base;
+    inset-inline-end: $spacing-base; // RTL: flips to left
     width: $profile-close-size;
     height: $profile-close-size;
     background: none;
@@ -357,7 +362,7 @@
   // Favorite remove button
   &__favorite-remove {
     opacity: 0;
-    margin-left: auto;
+    margin-inline-start: auto; // RTL: flips to margin-right
     background: none;
     border: none;
     padding: $spacing-xs;

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

@@ -6,22 +6,25 @@
 
 .pa-settings-panel {
   position: fixed;
-  right: -$profile-panel-width-fixed; // Panel hidden by default
+  inset-inline-end: -$profile-panel-width-fixed; // RTL: flips to left, panel hidden by default
   top: $settings-panel-top; // Position higher up for larger panel
   z-index: 10000;
   width: $profile-panel-width-fixed;
-  transition: right $settings-panel-transition-duration $settings-panel-transition-easing;
+  transition: inset-inline-end $settings-panel-transition-duration $settings-panel-transition-easing;
 
   &__toggle {
     position: absolute;
-    right: $profile-panel-width-fixed; // Position button at the right edge
+    inset-inline-end: $profile-panel-width-fixed; // RTL: flips to left
     top: 0;
     width: $profile-panel-toggle-size;
     height: $profile-panel-toggle-size;
     background: $accent-color;
     color: white;
     border: none;
-    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;
     cursor: pointer;
     font-size: $font-size-xl;
     display: flex;
@@ -33,15 +36,18 @@
     &:hover {
       background: $accent-hover;
       width: $profile-panel-toggle-size-open;
-      right: calc($profile-panel-width-fixed + $settings-panel-hover-offset);
+      inset-inline-end: calc($profile-panel-width-fixed + $settings-panel-hover-offset);
     }
   }
 
   &__content {
     background: var(--pa-subtle-bg);
     border: $border-width-base solid var(--pa-border-color);
-    border-right: none;
-    border-radius: $border-radius 0 0 $border-radius;
+    border-inline-end: none; // RTL: flips to border-left: none
+    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;
     box-shadow: $shadow-sidebar-open;
     padding: $spacing-lg;
     width: 100%;
@@ -93,6 +99,13 @@
     }
   }
 
+  &__hint {
+    display: block;
+    margin-top: $spacing-xs;
+    color: var(--pa-text-color-3);
+    font-size: $font-size-xs;
+  }
+
   &__checkbox-group {
     display: flex;
     flex-direction: column;
@@ -107,7 +120,7 @@
     font-size: $font-size-sm;
 
     input[type="checkbox"] {
-      margin-right: $btn-icon-margin;
+      margin-inline-end: $btn-icon-margin; // RTL: flips to margin-left
       cursor: pointer;
     }
 
@@ -118,7 +131,7 @@
 
   // Panel states
   &--open {
-    right: 0; // Slide panel into view
+    inset-inline-end: 0; // RTL: flips to left: 0, slide panel into view
 
     .pa-settings-panel__toggle {
       background: $accent-hover;