@keenmate/pure-admin-core 2.0.2 → 2.1.0

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

@@ -423,5 +423,102 @@
     position: relative;
     z-index: $z-index-modal;
   }
+
+}
+
+// === Split Button (primary action + dropdown toggle) ===
+.pa-btn-split {
+  position: relative;
+  display: inline-flex;
+
+  // RTL: reverse order so toggle is on inline-start side
+  [dir="rtl"] & {
+    flex-direction: row-reverse;
+  }
+
+  // Joined buttons with no gap
+  .pa-btn {
+    border-radius: 0;
+
+    &:first-child {
+      border-start-start-radius: $border-radius;
+      border-end-start-radius: $border-radius;
+      border-inline-end: none;
+    }
+  }
+
+  // Toggle button (chevron) - fixed square width
+  &__toggle {
+    border-start-end-radius: $border-radius;
+    border-end-end-radius: $border-radius;
+    border-inline-start: $border-width-base solid rgba(255, 255, 255, 0.25);
+    border-inline-end: none;
+    padding-inline: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $btn-height-base;
+    min-width: $btn-height-base;
+
+    &.pa-btn--xs { width: $btn-height-xs; min-width: $btn-height-xs; }
+    &.pa-btn--sm { width: $btn-height-sm; min-width: $btn-height-sm; }
+    &.pa-btn--lg { width: $btn-height-lg; min-width: $btn-height-lg; }
+    &.pa-btn--xl { width: $btn-height-xl; min-width: $btn-height-xl; }
+  }
+
+  // Chevron icon - opt-in rotation on open
+  &__chevron {
+    transition: transform $transition-fast $easing-snappy;
+  }
+
+  &--open &__chevron {
+    transform: rotate(180deg);
+  }
+
+  // Dropdown menu (moved to body and positioned by Floating UI)
+  &__menu {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: max-content;
+    background: var(--pa-card-bg);
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: $border-radius;
+    box-shadow: $shadow-2xl;
+    z-index: $z-index-dropdown;
+    padding: $spacing-xs 0;
+
+    &--open {
+      display: block;
+    }
+  }
+
+  // Menu items
+  &__item {
+    display: block;
+    width: 100%;
+    padding: $spacing-sm $spacing-base;
+    border: none;
+    background: none;
+    text-align: start;
+    font-size: $font-size-sm;
+    color: var(--pa-text-color);
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: var(--pa-accent-hover);
+    }
+
+    &--danger {
+      color: var(--pa-btn-danger-bg);
+
+      &:hover {
+        background-color: var(--pa-btn-danger-bg);
+        color: var(--pa-btn-danger-text);
+      }
+    }
+  }
 }
 

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

@@ -14,6 +14,7 @@
   transition: box-shadow $transition-fast $easing-snappy;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 
   &:hover {
     box-shadow: $shadow-lg;
@@ -64,14 +65,17 @@
       font-size: $font-size-base;
     }
 
-    // Direct heading children - don't shrink (for three-part layout)
+    // Direct heading children - truncate when card is narrow
     > h1,
     > h2,
     > h3,
     > h4,
     > h5,
     > h6 {
-      flex-shrink: 0;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     // Description paragraphs - flexible middle, truncate with ellipsis
@@ -155,10 +159,16 @@
       }
     }
 
-    // Wrap modifier - allow description to wrap (for mobile or long descriptions)
+    // Wrap modifier - allow heading and description to wrap instead of truncating
     &--wrap {
       flex-wrap: wrap;
 
+      > h1, > h2, > h3, > h4, > h5, > h6 {
+        white-space: normal;
+        overflow: visible;
+        text-overflow: clip;
+      }
+
       > p {
         white-space: normal;
         flex-basis: 100%;

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

@@ -556,6 +556,15 @@
     justify-content: center; // when --middle makes it flex
   }
 
+  // Value horizontal alignment
+  &--value-end &__value {
+    text-align: end;
+  }
+
+  &--value-center &__value {
+    text-align: center;
+  }
+
   // Truncate: single-line ellipsis on labels and values
   &--truncate &__label,
   &--truncate &__value {
@@ -581,6 +590,26 @@
     }
   }
 
+  // Responsive: stack label above value in very narrow containers
+  @container (max-width: 300px) {
+    &, &--cols-2, &--fixed, &--fixed#{&}--cols-2 {
+      grid-template-columns: 1fr;
+    }
+
+    .pa-desc-table__label {
+      border-inline-end: none;
+      border-bottom: none;
+    }
+
+    .pa-desc-table__value {
+      border-inline-end: none;
+    }
+
+    .pa-desc-table__value--full {
+      grid-column: 1;
+    }
+  }
+
   // Media fallback (for desc-tables outside a container context)
   @media (max-width: $mobile-breakpoint) {
     &, &--cols-2 {
@@ -876,8 +905,12 @@
   }
 
   // Label horizontal alignment
-  &--label-end &__label { justify-content: flex-end; }
-  &--label-center &__label { justify-content: center; }
+  &--label-end &__label { justify-content: flex-end; text-align: end; }
+  &--label-center &__label { justify-content: center; text-align: center; }
+
+  // Value horizontal alignment
+  &--value-end &__value { justify-content: flex-end; text-align: end; }
+  &--value-center &__value { justify-content: center; text-align: center; }
 
   // Truncate: single-line ellipsis on both labels and values
   &--truncate &__label,

package/src/scss/core-components/_filter-card.scss

@@ -0,0 +1,58 @@
+/* ========================================
+   Filter Card
+   Expandable filter card with inline filters and collapsible advanced section
+   Based on table-filters pattern from pure-admin demos
+   ======================================== */
+
+@use '../variables' as *;
+
+.pa-filter-card__row {
+  display: flex;
+  gap: $spacing-sm;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.pa-filter-card__filters {
+  display: flex;
+  gap: $spacing-sm;
+  align-items: center;
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+
+  > * {
+    flex: 1;
+    min-width: 200px;
+  }
+}
+
+.pa-filter-card__actions {
+  display: flex;
+  gap: $spacing-xs;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.pa-filter-card__advanced {
+  margin-top: $spacing-md;
+  padding-top: $spacing-md;
+  border-top: $border-width-base solid var(--pa-border-color);
+}
+
+.pa-filter-card__advanced-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-sm;
+  margin-top: $spacing-md;
+}
+
+.pa-filter-card--loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.pa-filter-card--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}

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

@@ -891,6 +891,10 @@
       background-color: transparent;
       box-shadow: $shadow-sm;
     }
+
+    tbody tr:hover td {
+      background-color: transparent;
+    }
   }
 }
 

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

@@ -557,8 +557,8 @@
       font-size: $timeline-feed-time-font-size;
       color: var(--pa-text-color-2);
       font-weight: $font-weight-medium;
-      text-align: right;
-      padding-right: $spacing-sm;
+      text-align: end;
+      padding-inline-end: $spacing-sm;
       padding-top: $timeline-feed-time-padding-top;
     }
   }

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

@@ -21,6 +21,12 @@
     cursor: help;
   }
 
+  // Keyword modifier - dotted underline for inline term explanations
+  &--keyword {
+    border-bottom: $border-width-base dotted currentColor;
+    cursor: help;
+  }
+
   &::before,
   &::after {
     position: absolute;
@@ -91,25 +97,38 @@
     transform: translateX(-50%) translateY(0);
   }
 
-  // Right position
-  &--right::before {
+  // End position (inline-end: right in LTR, left in RTL)
+  &--end::before {
     bottom: auto;
-    left: calc(100% + $tooltip-distance);
+    left: auto;
+    inset-inline-start: calc(100% + $tooltip-distance);
     top: 50%;
     transform: translateX(-$tooltip-offset) translateY(-50%);
   }
 
-  &--right::after {
+  &--end::after {
     bottom: auto;
-    left: calc(100% + ($tooltip-arrow-size - 2px));
+    left: auto;
+    inset-inline-start: calc(100% + ($tooltip-arrow-size - 2px));
     top: 50%;
     transform: translateX(-$tooltip-offset) translateY(-50%);
     border-top-color: transparent;
-    border-right-color: var(--pa-tooltip-bg);
+    border-inline-end-color: var(--pa-tooltip-bg);
   }
 
-  &--right:hover::before,
-  &--right:hover::after {
+  &--end:hover::before,
+  &--end:hover::after {
+    transform: translateX(0) translateY(-50%);
+  }
+
+  // RTL: reverse slide direction for end position
+  [dir="rtl"] &--end::before,
+  [dir="rtl"] &--end::after {
+    transform: translateX($tooltip-offset) translateY(-50%);
+  }
+
+  [dir="rtl"] &--end:hover::before,
+  [dir="rtl"] &--end:hover::after {
     transform: translateX(0) translateY(-50%);
   }
 
@@ -135,27 +154,38 @@
     transform: translateX(-50%) translateY(0);
   }
 
-  // Left position
-  &--left::before {
+  // Start position (inline-start: left in LTR, right in RTL)
+  &--start::before {
     bottom: auto;
     left: auto;
-    right: calc(100% + $tooltip-distance);
+    inset-inline-end: calc(100% + $tooltip-distance);
     top: 50%;
     transform: translateX($tooltip-offset) translateY(-50%);
   }
 
-  &--left::after {
+  &--start::after {
     bottom: auto;
     left: auto;
-    right: calc(100% + ($tooltip-arrow-size - 2px));
+    inset-inline-end: calc(100% + ($tooltip-arrow-size - 2px));
     top: 50%;
     transform: translateX($tooltip-offset) translateY(-50%);
     border-top-color: transparent;
-    border-left-color: var(--pa-tooltip-bg);
+    border-inline-start-color: var(--pa-tooltip-bg);
+  }
+
+  &--start:hover::before,
+  &--start:hover::after {
+    transform: translateX(0) translateY(-50%);
+  }
+
+  // RTL: reverse slide direction for start position
+  [dir="rtl"] &--start::before,
+  [dir="rtl"] &--start::after {
+    transform: translateX(-$tooltip-offset) translateY(-50%);
   }
 
-  &--left:hover::before,
-  &--left:hover::after {
+  [dir="rtl"] &--start:hover::before,
+  [dir="rtl"] &--start:hover::after {
     transform: translateX(0) translateY(-50%);
   }
 
@@ -166,17 +196,17 @@
   &--primary::after {
     border-top-color: var(--pa-btn-primary-bg);
   }
-  &--primary.pa-tooltip--right::after {
+  &--primary.pa-tooltip--end::after {
     border-top-color: transparent;
-    border-right-color: var(--pa-btn-primary-bg);
+    border-inline-end-color: var(--pa-btn-primary-bg);
   }
   &--primary.pa-tooltip--bottom::after {
     border-top-color: transparent;
     border-bottom-color: var(--pa-btn-primary-bg);
   }
-  &--primary.pa-tooltip--left::after {
+  &--primary.pa-tooltip--start::after {
     border-top-color: transparent;
-    border-left-color: var(--pa-btn-primary-bg);
+    border-inline-start-color: var(--pa-btn-primary-bg);
   }
 
   &--success::before {
@@ -185,17 +215,17 @@
   &--success::after {
     border-top-color: var(--pa-btn-success-bg);
   }
-  &--success.pa-tooltip--right::after {
+  &--success.pa-tooltip--end::after {
     border-top-color: transparent;
-    border-right-color: var(--pa-btn-success-bg);
+    border-inline-end-color: var(--pa-btn-success-bg);
   }
   &--success.pa-tooltip--bottom::after {
     border-top-color: transparent;
     border-bottom-color: var(--pa-btn-success-bg);
   }
-  &--success.pa-tooltip--left::after {
+  &--success.pa-tooltip--start::after {
     border-top-color: transparent;
-    border-left-color: var(--pa-btn-success-bg);
+    border-inline-start-color: var(--pa-btn-success-bg);
   }
 
   &--warning::before {
@@ -205,17 +235,17 @@
   &--warning::after {
     border-top-color: var(--pa-btn-warning-bg);
   }
-  &--warning.pa-tooltip--right::after {
+  &--warning.pa-tooltip--end::after {
     border-top-color: transparent;
-    border-right-color: var(--pa-btn-warning-bg);
+    border-inline-end-color: var(--pa-btn-warning-bg);
   }
   &--warning.pa-tooltip--bottom::after {
     border-top-color: transparent;
     border-bottom-color: var(--pa-btn-warning-bg);
   }
-  &--warning.pa-tooltip--left::after {
+  &--warning.pa-tooltip--start::after {
     border-top-color: transparent;
-    border-left-color: var(--pa-btn-warning-bg);
+    border-inline-start-color: var(--pa-btn-warning-bg);
   }
 
   &--danger::before {
@@ -224,17 +254,17 @@
   &--danger::after {
     border-top-color: var(--pa-btn-danger-bg);
   }
-  &--danger.pa-tooltip--right::after {
+  &--danger.pa-tooltip--end::after {
     border-top-color: transparent;
-    border-right-color: var(--pa-btn-danger-bg);
+    border-inline-end-color: var(--pa-btn-danger-bg);
   }
   &--danger.pa-tooltip--bottom::after {
     border-top-color: transparent;
     border-bottom-color: var(--pa-btn-danger-bg);
   }
-  &--danger.pa-tooltip--left::after {
+  &--danger.pa-tooltip--start::after {
     border-top-color: transparent;
-    border-left-color: var(--pa-btn-danger-bg);
+    border-inline-start-color: var(--pa-btn-danger-bg);
   }
 
   // Numbered color variants (color-1 through color-9)
@@ -247,17 +277,17 @@
     &--color-#{$i}::after {
       border-top-color: var(--pa-color-#{$i});
     }
-    &--color-#{$i}.pa-tooltip--right::after {
+    &--color-#{$i}.pa-tooltip--end::after {
       border-top-color: transparent;
-      border-right-color: var(--pa-color-#{$i});
+      border-inline-end-color: var(--pa-color-#{$i});
     }
     &--color-#{$i}.pa-tooltip--bottom::after {
       border-top-color: transparent;
       border-bottom-color: var(--pa-color-#{$i});
     }
-    &--color-#{$i}.pa-tooltip--left::after {
+    &--color-#{$i}.pa-tooltip--start::after {
       border-top-color: transparent;
-      border-left-color: var(--pa-color-#{$i});
+      border-inline-start-color: var(--pa-color-#{$i});
     }
   }
 
@@ -304,43 +334,69 @@
     transform: translateX(-50%) translateY(0) !important;
   }
 
-  // Auto-flip from left to right
-  &--auto-flip-right::before {
-    left: calc(100% + $tooltip-distance) !important;
+  // Auto-flip from start to end
+  &--auto-flip-end::before {
+    left: auto !important;
     right: auto !important;
+    inset-inline-start: calc(100% + $tooltip-distance) !important;
     transform: translateX(-$tooltip-offset) translateY(-50%) !important;
   }
 
-  &--auto-flip-right::after {
-    left: calc(100% + ($tooltip-arrow-size - 2px)) !important;
+  &--auto-flip-end::after {
+    left: auto !important;
     right: auto !important;
+    inset-inline-start: calc(100% + ($tooltip-arrow-size - 2px)) !important;
     transform: translateX(-$tooltip-offset) translateY(-50%) !important;
-    border-left-color: transparent !important;
-    border-right-color: var(--pa-tooltip-bg) !important;
+    border-inline-start-color: transparent !important;
+    border-inline-end-color: var(--pa-tooltip-bg) !important;
+  }
+
+  &--auto-flip-end:hover::before,
+  &--auto-flip-end:hover::after {
+    transform: translateX(0) translateY(-50%) !important;
+  }
+
+  // RTL: reverse slide direction for auto-flip-end
+  [dir="rtl"] &--auto-flip-end::before,
+  [dir="rtl"] &--auto-flip-end::after {
+    transform: translateX($tooltip-offset) translateY(-50%) !important;
   }
 
-  &--auto-flip-right:hover::before,
-  &--auto-flip-right:hover::after {
+  [dir="rtl"] &--auto-flip-end:hover::before,
+  [dir="rtl"] &--auto-flip-end:hover::after {
     transform: translateX(0) translateY(-50%) !important;
   }
 
-  // Auto-flip from right to left
-  &--auto-flip-left::before {
-    right: calc(100% + $tooltip-distance) !important;
+  // Auto-flip from end to start
+  &--auto-flip-start::before {
     left: auto !important;
+    right: auto !important;
+    inset-inline-end: calc(100% + $tooltip-distance) !important;
     transform: translateX($tooltip-offset) translateY(-50%) !important;
   }
 
-  &--auto-flip-left::after {
-    right: calc(100% + ($tooltip-arrow-size - 2px)) !important;
+  &--auto-flip-start::after {
     left: auto !important;
+    right: auto !important;
+    inset-inline-end: calc(100% + ($tooltip-arrow-size - 2px)) !important;
     transform: translateX($tooltip-offset) translateY(-50%) !important;
-    border-right-color: transparent !important;
-    border-left-color: var(--pa-tooltip-bg) !important;
+    border-inline-end-color: transparent !important;
+    border-inline-start-color: var(--pa-tooltip-bg) !important;
+  }
+
+  &--auto-flip-start:hover::before,
+  &--auto-flip-start:hover::after {
+    transform: translateX(0) translateY(-50%) !important;
+  }
+
+  // RTL: reverse slide direction for auto-flip-start
+  [dir="rtl"] &--auto-flip-start::before,
+  [dir="rtl"] &--auto-flip-start::after {
+    transform: translateX(-$tooltip-offset) translateY(-50%) !important;
   }
 
-  &--auto-flip-left:hover::before,
-  &--auto-flip-left:hover::after {
+  [dir="rtl"] &--auto-flip-start:hover::before,
+  [dir="rtl"] &--auto-flip-start:hover::after {
     transform: translateX(0) translateY(-50%) !important;
   }
 }

package/src/scss/core-components/badges/_badge-base.scss

@@ -13,7 +13,7 @@
   background-color: var(--pa-btn-secondary-bg);
   color: var(--pa-btn-secondary-text);
   font-size: $font-size-xs;
-  font-weight: $font-weight-semibold;
+
   line-height: 1;
   text-align: center;
   white-space: nowrap;
@@ -102,9 +102,20 @@
     border-color: var(--pa-btn-dark-bg);
   }
 
-  // Left-side ellipsis for paths/hierarchies where end is important
-  &--ellipsis-left {
+  // When truncation is needed, switch from inline-flex to inline-block
+  // (text-overflow: ellipsis doesn't work on flex containers)
+  &.text-truncate {
+    display: inline-block;
+  }
+
+  // Start-side ellipsis for paths/hierarchies where end is important
+  &--ellipsis-start {
     direction: rtl;
     text-align: left;
+
+    [dir="rtl"] & {
+      direction: ltr;
+      text-align: right;
+    }
   }
 }