@keenmate/pure-admin-core 2.4.0 → 2.5.0

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

@@ -7,14 +7,18 @@
 // Alerts
 .pa-alert {
   position: relative;
-  padding: $card-footer-padding-v $card-footer-padding-h;
+  padding: $alert-padding-v $alert-padding-h;
   margin-bottom: $spacing-base;
   border: $border-width-base solid transparent;
   border-radius: var(--pa-border-radius);
   font-size: $font-size-sm;
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-start;
+  // Centre by default — keeps icon + single-line content vertically
+  // aligned with the text glyph (the most common case). Opt out with
+  // .pa-alert--multiline when you have icon + multi-line __content
+  // and need the icon to stick to the top with the heading.
+  align-items: center;
 
   // Remove margins when first/last child in card body
   .pa-card__body &:first-child {
@@ -121,15 +125,17 @@
     }
   }
 
-  // Alert sizes (size modifiers only change font-size, padding controlled by theme)
+  // Alert sizes — both padding AND font-size step at each size.
+  // See $alert-padding-{sm,lg}-{v,h} and $alert-font-size-{sm,lg} in
+  // variables/_components.scss for theme-overridable scales.
   &--sm {
-    padding: $alert-padding-v $alert-padding-h;
-    font-size: $font-size-sm;
+    padding: $alert-padding-sm-v $alert-padding-sm-h;
+    font-size: $alert-font-size-sm;
   }
 
   &--lg {
-    padding: $alert-padding-v $alert-padding-h;
-    font-size: $font-size-base;
+    padding: $alert-padding-lg-v $alert-padding-lg-h;
+    font-size: $alert-font-size-lg;
   }
 
   // Dismissible alerts
@@ -137,6 +143,17 @@
     padding-inline-end: $alert-dismissible-padding-right; // RTL: flips to padding-left
   }
 
+  // Multiline content modifier — opt out of the default `align-items: center`
+  // so that an icon next to a multi-line .pa-alert__content (heading +
+  // paragraph + actions, etc.) stays top-aligned with the heading instead
+  // of floating in the vertical middle of the stack.
+  // Pure structural stacks without an icon don't need this — their children
+  // get `flex-basis: 100%` (one per row) so the alert's `align-items` is
+  // visually irrelevant for them.
+  &--multiline {
+    align-items: flex-start;
+  }
+
   // Alert components
   &__icon {
     flex-shrink: 0;
@@ -146,24 +163,46 @@
 
   &__content {
     flex: 1;
+    min-width: 0; // allow long content to shrink + wrap rather than overflow
+  }
+
+  // Force structural sub-elements + top-level <p> / <hr> onto their own row
+  // in the alert's flex-wrap layout. Without this, they sit at content width
+  // beside each other (heading next to body, actions next to list, …).
+  &__heading,
+  &__list,
+  &__actions,
+  > p,
+  > hr {
+    flex-basis: 100%;
   }
 
   &__heading {
-    margin: 0 0 $spacing-sm 0;
+    margin: 0; // alert flex-gap supplies the spacing — don't double up
     color: inherit;
-    font-size: $font-size-lg;
     font-weight: $font-weight-semibold;
+    // No explicit font-size — inherits the alert's body font-size ($font-size-sm)
+    // so heading + body read at the same scale (compact look). Add --lg to opt
+    // into the bigger, "punchy" presentation when the alert needs deliberate
+    // attention.
+
+    &--lg {
+      font-size: $font-size-lg;
+    }
   }
 
   &__list {
-    margin: $spacing-sm 0;
+    margin: 0; // alert flex-gap supplies the spacing
     padding-inline-start: $alert-list-padding-left; // RTL: flips to padding-right
   }
 
   &__actions {
-    margin-top: $alert-list-item-margin-top;
+    margin-top: 0; // alert flex-gap supplies the spacing above the divider
+    padding-top: $spacing-base;
+    border-top: $border-width-base solid rgba(0, 0, 0, $opacity-light);
     display: flex;
     gap: $spacing-sm;
+    flex-wrap: wrap;
   }
 
   &__close {
@@ -171,7 +210,7 @@
     top: 0;
     inset-inline-end: 0; // RTL: flips to left
     z-index: $focus-outline-width;
-    padding: $card-footer-padding-v $card-footer-padding-h;
+    padding: $alert-padding-v $alert-padding-h; // matches the alert body's padding
     background: none;
     border: none;
     font-size: $font-size-xl;

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

@@ -124,7 +124,7 @@
     width: $spinner-size;
     height: $spinner-size;
     border: $spinner-border-width solid var(--pa-border-color);
-    border-top: $spinner-border-width solid $accent-color;
+    border-top: $spinner-border-width solid var(--pa-accent);
     border-radius: 50%;
   }
 

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

@@ -98,59 +98,81 @@
 }
 
 // ====================
-// Position Variants
+// Position Variants (logical — mirror in RTL)
 // ====================
 
-// Bottom (default) - arrow on top
+// Bottom — popconfirm below trigger, arrow on top (block-axis; no RTL flip)
 .pa-popconfirm--bottom {
   margin-top: $spacing-sm;
 
   .pa-popconfirm__arrow {
     top: -0.64rem;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%) rotate(45deg);
     border-right: none;
     border-bottom: none;
   }
+
+  // RTL: translateX needs to invert because inset-inline-start flipped sides
+  [dir="rtl"] & .pa-popconfirm__arrow {
+    transform: translateX(50%) rotate(45deg);
+  }
 }
 
-// Top - arrow on bottom
+// Top — popconfirm above trigger, arrow on bottom (block-axis; no RTL flip)
 .pa-popconfirm--top {
   margin-bottom: $spacing-sm;
 
   .pa-popconfirm__arrow {
     bottom: -0.64rem;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%) rotate(45deg);
     border-left: none;
     border-top: none;
   }
+
+  [dir="rtl"] & .pa-popconfirm__arrow {
+    transform: translateX(50%) rotate(45deg);
+  }
 }
 
-// Right - arrow on left
-.pa-popconfirm--right {
-  margin-left: $spacing-sm;
+// End — popconfirm on the inline-end side of trigger (right in LTR, left in RTL)
+// Arrow sits on the inline-start side of the popconfirm, pointing at the trigger.
+.pa-popconfirm--end {
+  margin-inline-start: $spacing-sm;
 
   .pa-popconfirm__arrow {
-    left: -0.64rem;
+    inset-inline-start: -0.64rem;
     top: 50%;
     transform: translateY(-50%) rotate(45deg);
     border-top: none;
     border-right: none;
   }
+
+  // RTL: mirror the rotated arrow via scaleX(-1) so the hidden borders still
+  // mask the side facing the popconfirm body, and the triangle points the
+  // right way (toward the trigger on the visually-right).
+  [dir="rtl"] & .pa-popconfirm__arrow {
+    transform: translateY(-50%) rotate(45deg) scaleX(-1);
+  }
 }
 
-// Left - arrow on right
-.pa-popconfirm--left {
-  margin-right: $spacing-sm;
+// Start — popconfirm on the inline-start side of trigger (left in LTR, right in RTL)
+// Arrow sits on the inline-end side of the popconfirm, pointing at the trigger.
+.pa-popconfirm--start {
+  margin-inline-end: $spacing-sm;
 
   .pa-popconfirm__arrow {
-    right: -0.64rem;
+    inset-inline-end: -0.64rem;
     top: 50%;
     transform: translateY(-50%) rotate(45deg);
     border-bottom: none;
     border-left: none;
   }
+
+  [dir="rtl"] & .pa-popconfirm__arrow {
+    transform: translateY(-50%) rotate(45deg) scaleX(-1);
+  }
 }
 
 // ====================

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

@@ -471,140 +471,8 @@
   }
 }
 
-// Pager
-.pa-pager {
-  display: flex;
-  margin: $pager-button-margin 0;
-
-  // Remove margins when first/last child in card body
-  .pa-card__body &:first-child {
-    margin-top: 0;
-  }
-  .pa-card__body &:last-child {
-    margin-bottom: 0;
-  }
-
-  // Default center alignment
-  justify-content: center;
-
-  // Positioning modifiers
-  &--start {
-    justify-content: flex-start;
-  }
-
-  &--center {
-    justify-content: center;
-  }
-
-  &--end {
-    justify-content: flex-end;
-  }
-
-  &__container {
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-    white-space: nowrap;
-  }
-
-  &__controls {
-    display: flex;
-    gap: $pager-controls-gap;
-  }
-
-  &__info {
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-  }
-
-  &__input {
-    width: $pager-input-width !important;
-    text-align: center;
-  }
-
-  &__text {
-    color: var(--pa-text-color-2);
-    font-size: $font-size-sm;
-  }
-}
-
-// Load More
-.pa-load-more {
-  display: flex;
-  margin: $spacing-base 0;
-
-  // Remove margins when first/last child in card body
-  .pa-card__body &:first-child {
-    margin-top: 0;
-  }
-  .pa-card__body &:last-child {
-    margin-bottom: 0;
-  }
-
-  // Default center alignment
-  justify-content: center;
-
-  // Positioning modifiers
-  &--start {
-    justify-content: flex-start;
-  }
-
-  &--center {
-    justify-content: center;
-  }
-
-  &--end {
-    justify-content: flex-end;
-  }
-
-  &__button {
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-    padding: $btn-padding-v $btn-padding-h;
-    background-color: transparent;
-    border: $border-width-base solid var(--pa-border-color);
-    border-radius: var(--pa-border-radius);
-    color: var(--pa-text-color-1);
-    font-size: $font-size-sm;
-    cursor: pointer;
-    transition: all $transition-fast $easing-snappy;
-
-    &:hover {
-      border-color: var(--pa-accent);
-      color: var(--pa-accent);
-      background-color: var(--pa-accent-light);
-    }
-
-    &--loading {
-      pointer-events: none;
-      opacity: 0.7;
-
-      .pa-load-more__spinner {
-        animation: pa-spin 1s linear infinite;
-      }
-    }
-  }
-
-  &__spinner {
-    width: $spinner-size;
-    height: $spinner-size;
-    border: $spinner-border-width solid var(--pa-border-color);
-    border-top: $spinner-border-width solid var(--pa-accent);
-    border-radius: 50%;
-  }
-
-  &__text {
-    color: inherit;
-  }
-
-  &__count {
-    color: var(--pa-text-color-2);
-    font-size: $font-size-xs;
-    margin-inline-start: $spacing-xs; // RTL: flips to margin-right
-  }
-}
+// .pa-pager and .pa-load-more live in _pagers.scss — this file used to
+// duplicate them. Removed so there's a single source of truth.
 
 // Virtual Table Styles
 .pa-virtual-table {

package/src/scss/variables/_components.scss

@@ -295,8 +295,23 @@ $multiselect-selected-popover-width: 32rem !default;  // 320px (was 20rem)
 // ============================================================================
 // ALERT SYSTEM
 // ============================================================================
-$alert-padding-v: $card-footer-padding-v !default;
-$alert-padding-h: $card-footer-padding-h !default;
+// Default alert padding — decoupled from $card-footer-padding so alerts
+// can have their own scale. The previous coupling left default with V
+// padding (1.2rem) bigger than --lg's (1rem) and H padding (1rem) equal
+// to --sm's, so default sat visually outside the size scale instead of
+// in the middle.
+$alert-padding-v: $spacing-md !default;        // 0.75rem
+$alert-padding-h: 1.25rem !default;            // sits between --sm (1rem) and --lg (1.5rem)
+
+// Size-modifier scales — themes can override to tighten/loosen each size
+// independently. V steps 0.5 → 0.75 → 1, H steps 1 → 1.25 → 1.5.
+$alert-padding-sm-v: $spacing-sm !default;     // 0.5rem
+$alert-padding-sm-h: $spacing-base !default;   // 1rem
+$alert-font-size-sm: $font-size-xs !default;   // 1.2rem (12px)
+$alert-padding-lg-v: $spacing-base !default;   // 1rem
+$alert-padding-lg-h: $spacing-lg !default;     // 1.5rem
+$alert-font-size-lg: $font-size-base !default; // 1.6rem (16px)
+
 $alert-dismissible-padding-right: 4.8rem !default;   // 48px (was 3rem)
 $alert-close-opacity: $opacity-muted !default;
 $alert-icon-margin: $spacing-sm !default;