@keenmate/pure-admin-core 2.0.0 → 2.0.2

package/dist/css/main.css

@@ -3631,6 +3631,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   display: flex;
   flex-wrap: wrap;
   margin-inline: -0.8rem;
+  row-gap: 0.8rem;
 }
 .pa-row .pa-row {
   margin-inline: 0;
@@ -5329,6 +5330,63 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
     flex: 0 0 100%;
     max-width: 100%;
   }
+  .pa-offset-5 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-10 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-15 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-20 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-25 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-30 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-35 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-40 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-45 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-50 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-55 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-60 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-65 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-70 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-75 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-80 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-85 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-90 {
+    margin-inline-start: 0;
+  }
+  .pa-offset-95 {
+    margin-inline-start: 0;
+  }
 }
 /* ========================================
    Card Components
@@ -5376,6 +5434,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header fieldset {
   margin: 0;
   padding: 0;
+  border-bottom: none;
 }
 .pa-card__header h1,
 .pa-card__header h2,
@@ -5412,6 +5471,49 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   margin-bottom: -0.25rem;
   flex-shrink: 0;
 }
+.pa-card__header--underlined h1, .pa-card__header--underlined h2, .pa-card__header--underlined h3, .pa-card__header--underlined h4, .pa-card__header--underlined h5, .pa-card__header--underlined h6 {
+  border-bottom: 2px solid var(--pa-accent);
+  padding-bottom: 0.8rem;
+}
+.pa-card__header--underlined.pa-card__header--underline-success h1, .pa-card__header--underlined.pa-card__header--underline-success h2, .pa-card__header--underlined.pa-card__header--underline-success h3, .pa-card__header--underlined.pa-card__header--underline-success h4, .pa-card__header--underlined.pa-card__header--underline-success h5, .pa-card__header--underlined.pa-card__header--underline-success h6 {
+  border-bottom-color: var(--pa-success-bg);
+}
+.pa-card__header--underlined.pa-card__header--underline-warning h1, .pa-card__header--underlined.pa-card__header--underline-warning h2, .pa-card__header--underlined.pa-card__header--underline-warning h3, .pa-card__header--underlined.pa-card__header--underline-warning h4, .pa-card__header--underlined.pa-card__header--underline-warning h5, .pa-card__header--underlined.pa-card__header--underline-warning h6 {
+  border-bottom-color: var(--pa-warning-bg);
+}
+.pa-card__header--underlined.pa-card__header--underline-danger h1, .pa-card__header--underlined.pa-card__header--underline-danger h2, .pa-card__header--underlined.pa-card__header--underline-danger h3, .pa-card__header--underlined.pa-card__header--underline-danger h4, .pa-card__header--underlined.pa-card__header--underline-danger h5, .pa-card__header--underlined.pa-card__header--underline-danger h6 {
+  border-bottom-color: var(--pa-danger-bg);
+}
+.pa-card__header--underlined.pa-card__header--underline-info h1, .pa-card__header--underlined.pa-card__header--underline-info h2, .pa-card__header--underlined.pa-card__header--underline-info h3, .pa-card__header--underlined.pa-card__header--underline-info h4, .pa-card__header--underlined.pa-card__header--underline-info h5, .pa-card__header--underlined.pa-card__header--underline-info h6 {
+  border-bottom-color: var(--pa-info-bg);
+}
+.pa-card__header--underlined.pa-card__header--underline-color-1 h1, .pa-card__header--underlined.pa-card__header--underline-color-1 h2, .pa-card__header--underlined.pa-card__header--underline-color-1 h3, .pa-card__header--underlined.pa-card__header--underline-color-1 h4, .pa-card__header--underlined.pa-card__header--underline-color-1 h5, .pa-card__header--underlined.pa-card__header--underline-color-1 h6 {
+  border-bottom-color: var(--pa-color-1);
+}
+.pa-card__header--underlined.pa-card__header--underline-color-2 h1, .pa-card__header--underlined.pa-card__header--underline-color-2 h2, .pa-card__header--underlined.pa-card__header--underline-color-2 h3, .pa-card__header--underlined.pa-card__header--underline-color-2 h4, .pa-card__header--underlined.pa-card__header--underline-color-2 h5, .pa-card__header--underlined.pa-card__header--underline-color-2 h6 {
+  border-bottom-color: var(--pa-color-2);
+}
+.pa-card__header--underlined.pa-card__header--underline-color-3 h1, .pa-card__header--underlined.pa-card__header--underline-color-3 h2, .pa-card__header--underlined.pa-card__header--underline-color-3 h3, .pa-card__header--underlined.pa-card__header--underline-color-3 h4, .pa-card__header--underlined.pa-card__header--underline-color-3 h5, .pa-card__header--underlined.pa-card__header--underline-color-3 h6 {
+  border-bottom-color: var(--pa-color-3);
+}
+.pa-card__header--underlined.pa-card__header--underline-color-4 h1, .pa-card__header--underlined.pa-card__header--underline-color-4 h2, .pa-card__header--underlined.pa-card__header--underline-color-4 h3, .pa-card__header--underlined.pa-card__header--underline-color-4 h4, .pa-card__header--underlined.pa-card__header--underline-color-4 h5, .pa-card__header--underlined.pa-card__header--underline-color-4 h6 {
+  border-bottom-color: var(--pa-color-4);
+}
+.pa-card__header--underlined.pa-card__header--underline-color-5 h1, .pa-card__header--underlined.pa-card__header--underline-color-5 h2, .pa-card__header--underlined.pa-card__header--underline-color-5 h3, .pa-card__header--underlined.pa-card__header--underline-color-5 h4, .pa-card__header--underlined.pa-card__header--underline-color-5 h5, .pa-card__header--underlined.pa-card__header--underline-color-5 h6 {
+  border-bottom-color: var(--pa-color-5);
+}
+.pa-card__header--underlined.pa-card__header--underline-color-6 h1, .pa-card__header--underlined.pa-card__header--underline-color-6 h2, .pa-card__header--underlined.pa-card__header--underline-color-6 h3, .pa-card__header--underlined.pa-card__header--underline-color-6 h4, .pa-card__header--underlined.pa-card__header--underline-color-6 h5, .pa-card__header--underlined.pa-card__header--underline-color-6 h6 {
+  border-bottom-color: var(--pa-color-6);
+}
+.pa-card__header--underlined.pa-card__header--underline-color-7 h1, .pa-card__header--underlined.pa-card__header--underline-color-7 h2, .pa-card__header--underlined.pa-card__header--underline-color-7 h3, .pa-card__header--underlined.pa-card__header--underline-color-7 h4, .pa-card__header--underlined.pa-card__header--underline-color-7 h5, .pa-card__header--underlined.pa-card__header--underline-color-7 h6 {
+  border-bottom-color: var(--pa-color-7);
+}
+.pa-card__header--underlined.pa-card__header--underline-color-8 h1, .pa-card__header--underlined.pa-card__header--underline-color-8 h2, .pa-card__header--underlined.pa-card__header--underline-color-8 h3, .pa-card__header--underlined.pa-card__header--underline-color-8 h4, .pa-card__header--underlined.pa-card__header--underline-color-8 h5, .pa-card__header--underlined.pa-card__header--underline-color-8 h6 {
+  border-bottom-color: var(--pa-color-8);
+}
+.pa-card__header--underlined.pa-card__header--underline-color-9 h1, .pa-card__header--underlined.pa-card__header--underline-color-9 h2, .pa-card__header--underlined.pa-card__header--underline-color-9 h3, .pa-card__header--underlined.pa-card__header--underline-color-9 h4, .pa-card__header--underlined.pa-card__header--underline-color-9 h5, .pa-card__header--underlined.pa-card__header--underline-color-9 h6 {
+  border-bottom-color: var(--pa-color-9);
+}
 .pa-card__header--wrap {
   flex-wrap: wrap;
 }
@@ -5774,7 +5876,7 @@ a.pa-card p {
 .pa-section {
   margin-bottom: 3.2rem;
 }
-.pa-section h3 {
+.pa-section > h3 {
   color: var(--pa-text-color-1);
   margin-bottom: 1.6rem;
   border-bottom: 2px solid var(--pa-accent);
@@ -7301,6 +7403,8 @@ a.pa-card p {
 .pa-btn--loading {
   position: relative;
   pointer-events: none;
+  -webkit-text-fill-color: transparent;
+  transition: none;
 }
 .pa-btn--loading .pa-btn__spinner {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

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

@@ -214,6 +214,8 @@
   &--loading {
     position: relative;
     pointer-events: none;
+    -webkit-text-fill-color: transparent;  // Hide text but preserve layout and currentColor for spinner
+    transition: none;
 
     .pa-btn__spinner {
       position: absolute;

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

@@ -32,7 +32,8 @@
     gap: $spacing-base; // Gap between header elements (title, description, actions)
     min-width: 0; // Enable text truncation
 
-    // Reset margins/paddings for all native elements
+    // Reset margins/paddings/borders for all native elements
+    // (border-bottom reset prevents .pa-section h3 rule from bleeding in)
     h1,
     h2,
     h3,
@@ -49,6 +50,7 @@
     fieldset {
       margin: 0;
       padding: 0;
+      border-bottom: none;
     }
 
     // Specific heading styles
@@ -96,6 +98,63 @@
       flex-shrink: 0;
     }
 
+    // Underline modifier - accent border under heading inside card header
+    &--underlined {
+      h1, h2, h3, h4, h5, h6 {
+        border-bottom: $border-width-medium solid var(--pa-accent);
+        padding-bottom: $spacing-sm;
+      }
+
+      // Semantic color variants
+      &.pa-card__header--underline-success h1,
+      &.pa-card__header--underline-success h2,
+      &.pa-card__header--underline-success h3,
+      &.pa-card__header--underline-success h4,
+      &.pa-card__header--underline-success h5,
+      &.pa-card__header--underline-success h6 {
+        border-bottom-color: var(--pa-success-bg);
+      }
+
+      &.pa-card__header--underline-warning h1,
+      &.pa-card__header--underline-warning h2,
+      &.pa-card__header--underline-warning h3,
+      &.pa-card__header--underline-warning h4,
+      &.pa-card__header--underline-warning h5,
+      &.pa-card__header--underline-warning h6 {
+        border-bottom-color: var(--pa-warning-bg);
+      }
+
+      &.pa-card__header--underline-danger h1,
+      &.pa-card__header--underline-danger h2,
+      &.pa-card__header--underline-danger h3,
+      &.pa-card__header--underline-danger h4,
+      &.pa-card__header--underline-danger h5,
+      &.pa-card__header--underline-danger h6 {
+        border-bottom-color: var(--pa-danger-bg);
+      }
+
+      &.pa-card__header--underline-info h1,
+      &.pa-card__header--underline-info h2,
+      &.pa-card__header--underline-info h3,
+      &.pa-card__header--underline-info h4,
+      &.pa-card__header--underline-info h5,
+      &.pa-card__header--underline-info h6 {
+        border-bottom-color: var(--pa-info-bg);
+      }
+
+      // Theme color slots (1-9)
+      @for $i from 1 through 9 {
+        &.pa-card__header--underline-color-#{$i} h1,
+        &.pa-card__header--underline-color-#{$i} h2,
+        &.pa-card__header--underline-color-#{$i} h3,
+        &.pa-card__header--underline-color-#{$i} h4,
+        &.pa-card__header--underline-color-#{$i} h5,
+        &.pa-card__header--underline-color-#{$i} h6 {
+          border-bottom-color: var(--pa-color-#{$i});
+        }
+      }
+    }
+
     // Wrap modifier - allow description to wrap (for mobile or long descriptions)
     &--wrap {
       flex-wrap: wrap;
@@ -407,7 +466,7 @@ a.pa-card {
 .pa-section {
   margin-bottom: $section-margin-v;
 
-  h3 {
+  > h3 {
     color: var(--pa-text-color-1);
     margin-bottom: $spacing-base;
     border-bottom: $border-width-medium solid var(--pa-accent);

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

@@ -48,6 +48,7 @@ $grid-columns-fractions: (
   display: flex;
   flex-wrap: wrap;
   margin-inline: -$grid-gutter; // RTL: flips automatically
+  row-gap: $grid-gutter; // Vertical gap when columns wrap (half the horizontal gutter total)
 
   // Nested rows reset margins
   .pa-row {
@@ -279,5 +280,14 @@ $grid-columns-fractions: (
       max-width: 100%;
     }
   }
+
+  // Reset base offsets when stacking
+  @each $size in $grid-columns-5 {
+    @if $size < 100 {
+      .pa-offset-#{$size} {
+        margin-inline-start: 0;
+      }
+    }
+  }
 }