@keenmate/pure-admin-core 2.9.0-rc04 → 2.9.0-rc05

package/README.md

@@ -2,6 +2,12 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
+## What's New in 2.9.0-rc05
+
+- **Card header — one canonical structure (`.pa-card__title` + new `.pa-card__description`).** The header no longer has two blessed title shapes (bare `<h3>` vs `.pa-card__title`); `.pa-card__title` is now *the* title contract for every card, with the icon optional inside `.pa-card__title-icon` — so a `<Card>` component emits one DOM tree instead of branching on whether an icon was passed. The description is promoted from a bare `<p>` to a real `.pa-card__description` element, making the header fully `title` / `description` / `actions`.
+- **Card footer — reuses `.pa-card__actions`, auto-pinned to the trailing edge.** Footer buttons go in the same actions slot as the header and hug the right automatically, with or without leading meta/text — no more empty spacer `<div>` to right-align them, and no bare buttons scattering to opposite corners.
+- **Header polish: `--pa-card-description-offset-y` token + descender fix.** The (smaller) description now sits on the title's baseline via a per-theme-tunable nudge, and the title's `line-height` was corrected so glyph descenders (g / y / p) are no longer clipped by the header's overflow.
+
 ## What's New in 2.9.0-rc04
 
 - **New: Range Group — a compact multi-range filter (`.pa-range-group` + a reusable `.pa-range` slider).** One toggle summarises several numeric filters inline (`AGE 25–60 / SALARY $40,000–$200,000 / CHILDREN 2+`) and expands into a Floating-UI panel with one slider per dimension — standing in for a row of separate sliders in a filter bar. Per-row dual-thumb range or single-thumb threshold, RTL-correct by construction, with a `--pa-range-*` theming token namespace and a bubbling `change` / `apply` / `reset` event contract keyed by dimension.
@@ -14,15 +20,6 @@ Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as defau
 - **`.pa-splitter` — tap-without-drag on the gutter no longer restores a rail'd pane.** Restore gestures are now: rail-body click, dblclick on the gutter, focus + `Enter`/`Space`, `[data-pa-splitter-toggle]` button, or drag outward past the snap threshold. Users expected drag-to-be-explicit and didn't connect "tap the gutter" with the rail-pane body as a restore surface.
 - **`.pa-splitter` — per-pane orientation class** (`pa-splitter__pane--horizontal` / `--vertical`) stamped at registration. Forward-compat hook for theme authors writing nested-splitter-safe rail CSS without walking the DOM to figure out the enclosing splitter's orientation.
 
-## What's New in 2.9.0-rc03
-
-- **`.pa-splitter` drag model reworked to "rebalance-on-drag".** Each gutter now resizes only its primary neighbour (edge-closer side, LTR/RTL tiebreaker on ties); the matching delta is absorbed by the immediate adjacent non-rail pane (classic boundary feel), or — when the adjacent pane is rail — tunnels through the rail wall to the contiguous non-rail block beyond. Eliminates the "boundary locks when both sides are rail" deadlock from the prior model — drag-from-rail with a railed neighbour now grows the primary by pulling room from the next section.
-- **Middle panes can now minimize to rail** (previously first / last only). Any pane with `data-pa-splitter-minimize` collapses on toggle / dblclick / drag-snap regardless of position. Snap-into-rail enforces an "at least one expanded pane" invariant — you can't drag the last visible pane to rail and end up with nothing to grab.
-- **Restoring a minimized pane reclaims layout gaps cleanly.** When a prior minimize hit an absorber's `max` cap and left empty space in the layout, restoring the pane now reaches its remembered size by drawing from the gap (not just from other panes' shrink headroom) — fixes the "restored pane stuck at min width" surprise. Conversely, restoring no longer aggressively inflates a sibling pane to fill remaining gap — empty space stays as empty space and gets consumed as more panes restore. No more "sibling pane suddenly jumps" UX.
-- **Rail width in `--pa-splitter-rail-size` now correctly resolves `rem` / non-px units.** Previously `parseFloat("4rem")` returned `4` and snapped rail panes to 4px-wide strips; rebuilt via a hidden probe element so the browser does the unit resolution. The three-step fallback chain (per-instance attribute → CSS var → literal 40) still applies.
-- **Gutter highlighting now isolates the dragged gutter only.** During a drag, the splitter `--dragging` modifier suppresses `:hover` / `:focus-visible` on sibling gutters so they don't light up as the cursor passes over them or as a stale focus ring lingers — only the active gutter carries the highlight.
-- **Splitter padding subtracted from available space.** Flex children sit inside the splitter's content box but `clientWidth` includes padding — without subtracting it the last pane's `flex-basis` overflowed and got clipped by `overflow: hidden`. Visible in the N-pane demo where the rightmost rail's right edge touched the splitter border.
-
 ## Installation
 
 ```bash

package/dist/css/main.css

@@ -5471,7 +5471,8 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.pa-card__header > p {
+.pa-card__header > p,
+.pa-card__header > .pa-card__description {
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -5479,6 +5480,8 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   white-space: nowrap;
   color: var(--pa-text-color-2);
   font-size: 1.4rem;
+  position: relative;
+  top: var(--pa-card-description-offset-y, 1px);
 }
 .pa-card__header .pa-card__actions,
 .pa-card__header .pa-btn-group {
@@ -5559,12 +5562,14 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header--wrap {
   flex-wrap: wrap;
 }
-.pa-card__header--wrap > h1, .pa-card__header--wrap > h2, .pa-card__header--wrap > h3, .pa-card__header--wrap > h4, .pa-card__header--wrap > h5, .pa-card__header--wrap > h6 {
+.pa-card__header--wrap > h1, .pa-card__header--wrap > h2, .pa-card__header--wrap > h3, .pa-card__header--wrap > h4, .pa-card__header--wrap > h5, .pa-card__header--wrap > h6,
+.pa-card__header--wrap > .pa-card__title .pa-card__title-text {
   white-space: normal;
   overflow: visible;
   text-overflow: clip;
 }
-.pa-card__header--wrap > p {
+.pa-card__header--wrap > p,
+.pa-card__header--wrap > .pa-card__description {
   white-space: normal;
   flex-basis: 100%;
   order: 1;
@@ -5575,7 +5580,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   align-items: center;
   gap: 0.8rem;
   min-width: 0;
-  flex: 1;
+  flex: 0 1 auto;
 }
 .pa-card__title-icon {
   flex-shrink: 0;
@@ -5590,7 +5595,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   color: var(--pa-text-color-1);
   font-size: 1.6rem;
   font-weight: 600;
-  line-height: 1;
+  line-height: 1.4;
 }
 .pa-card__body {
   padding: 1.6rem 1rem;
@@ -5611,6 +5616,10 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 0.8rem;
+}
+.pa-card__footer .pa-card__actions {
+  margin-inline-start: auto;
 }
 .pa-card__actions {
   display: flex;

package/package.json

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

package/snippets/cards.html

@@ -11,10 +11,16 @@
 </div>
 
 
-<!-- CARD WITH HEADER -->
+<!-- CARD WITH HEADER
+     The title ALWAYS uses .pa-card__title > .pa-card__title-text (the icon
+     span is optional). This is the one canonical header title structure —
+     a bare <h3> in the header still renders, but is legacy tolerance, not
+     the documented shape. -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Card Title</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Card Title</h3>
+    </div>
   </div>
   <div class="pa-card__body">
     Card content goes here.
@@ -28,7 +34,9 @@
     Card content goes here.
   </div>
   <div class="pa-card__footer">
-    <button class="pa-btn pa-btn--primary">Action</button>
+    <div class="pa-card__actions">
+      <button class="pa-btn pa-btn--primary">Action</button>
+    </div>
   </div>
 </div>
 
@@ -36,31 +44,37 @@
 <!-- COMPLETE CARD (header + body + footer) -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Complete Card</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Complete Card</h3>
+    </div>
   </div>
   <div class="pa-card__body">
     <p>This card has all three sections: header, body, and footer.</p>
   </div>
   <div class="pa-card__footer">
-    <button class="pa-btn pa-btn--secondary">Cancel</button>
-    <button class="pa-btn pa-btn--primary">Save</button>
+    <div class="pa-card__actions">
+      <button class="pa-btn pa-btn--secondary">Cancel</button>
+      <button class="pa-btn pa-btn--primary">Save</button>
+    </div>
   </div>
 </div>
 
 
 <!-- ================================
      THREE-PART HEADER LAYOUT
-     .pa-card__header is a flex row with automatic behaviour:
-       [title (truncates)] — [description <p> (flexes and truncates)] — [actions (fixed)]
-     Any h1..h6 / <p> children get ellipsis on overflow so narrow cards
+     .pa-card__header is a flex row with three canonical slots:
+       [.pa-card__title (truncates)] — [.pa-card__description (flexes, truncates)] — [.pa-card__actions (fixed)]
+     The title-text and description get ellipsis on overflow so narrow cards
      never push content out of the header. Use .pa-card__header--wrap
      if you'd rather have the text wrap to multiple lines instead.
      ================================ -->
 
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Dashboard</h3>
-    <p>Live metrics across every connected service — updated every 30 seconds.</p>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Dashboard</h3>
+    </div>
+    <p class="pa-card__description">Live metrics across every connected service — updated every 30 seconds.</p>
     <div class="pa-card__actions">
       <button class="pa-btn pa-btn--sm pa-btn--secondary">Refresh</button>
     </div>
@@ -71,8 +85,10 @@
 <!-- Wrap instead of truncate -->
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--wrap">
-    <h3>Wrapping Header</h3>
-    <p>This description wraps to multiple lines when the header gets narrow, instead of being clipped with an ellipsis.</p>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Wrapping Header</h3>
+    </div>
+    <p class="pa-card__description">This description wraps to multiple lines when the header gets narrow, instead of being clipped with an ellipsis.</p>
     <div class="pa-card__actions">
       <button class="pa-btn pa-btn--sm pa-btn--secondary">Action</button>
     </div>
@@ -90,7 +106,9 @@
 <!-- Default (accent-coloured underline) -->
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--underlined">
-    <h3>Section</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Section</h3>
+    </div>
   </div>
   <div class="pa-card__body">Body content.</div>
 </div>
@@ -98,14 +116,18 @@
 <!-- Semantic colour variants -->
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--underlined pa-card__header--underline-success">
-    <h3>Success underline</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Success underline</h3>
+    </div>
   </div>
   <div class="pa-card__body">Body.</div>
 </div>
 
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--underlined pa-card__header--underline-danger">
-    <h3>Danger underline</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Danger underline</h3>
+    </div>
   </div>
   <div class="pa-card__body">Body.</div>
 </div>
@@ -113,7 +135,9 @@
 <!-- Theme colour slot (1..9) -->
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--underlined pa-card__header--underline-color-3">
-    <h3>Theme colour 3 underline</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Theme colour 3 underline</h3>
+    </div>
   </div>
   <div class="pa-card__body">Body.</div>
 </div>
@@ -124,7 +148,7 @@
 -->
 
 
-<!-- CARD WITH TITLE COMPONENTS (icon + truncating text) -->
+<!-- CARD WITH TITLE ICON (the icon span is the only optional part) -->
 <div class="pa-card">
   <div class="pa-card__header">
     <div class="pa-card__title">
@@ -136,8 +160,9 @@
     </div>
   </div>
   <div class="pa-card__body">
-    Use .pa-card__title when you need the title-icon combo + __actions
-    alignment; h3 alone works too when no icon is needed.
+    The title always uses .pa-card__title > .pa-card__title-text; add the
+    .pa-card__title-icon span when you want a leading icon. Same structure
+    with or without the icon — never a bare <h3>.
   </div>
 </div>
 
@@ -145,7 +170,9 @@
 <!-- CARD WITH METADATA -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Article Title</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Article Title</h3>
+    </div>
     <span class="pa-card__meta">Published 2 hours ago</span>
   </div>
   <div class="pa-card__body">Article content.</div>
@@ -159,7 +186,9 @@
      Reach for this by default. -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Card with Actions</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Card with Actions</h3>
+    </div>
     <div class="pa-card__actions">
       <button class="pa-btn pa-btn--sm pa-btn--secondary">Cancel</button>
       <button class="pa-btn pa-btn--sm pa-btn--success">Save</button>
@@ -176,7 +205,9 @@
      the attached-button styling in whether you want it or not. -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Card with Segmented Actions</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Card with Segmented Actions</h3>
+    </div>
     <div class="pa-card__actions">
       <div class="pa-btn-group">
         <button class="pa-btn pa-btn--sm pa-btn--secondary">Day</button>
@@ -192,11 +223,12 @@
 <!-- CARD WITH FOOTER ACTIONS -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Form Card</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Form Card</h3>
+    </div>
   </div>
   <div class="pa-card__body">Form content here.</div>
   <div class="pa-card__footer">
-    <div></div>
     <div class="pa-card__actions">
       <button class="pa-btn pa-btn--secondary">Cancel</button>
       <button class="pa-btn pa-btn--success">Save</button>
@@ -208,7 +240,9 @@
 <!-- CARD WITH NO-PADDING BODY (for flush tables / lists) -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>User List</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">User List</h3>
+    </div>
   </div>
   <div class="pa-card__body pa-card__body--no-padding">
     <table class="pa-table">
@@ -378,7 +412,9 @@
 <!-- Inline tabs — pills that live in the header row -->
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Sales</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Sales</h3>
+    </div>
     <div class="pa-card__tabs pa-card__tabs--inline">
       <button class="pa-card__tab pa-card__tab--active">Day</button>
       <button class="pa-card__tab">Week</button>
@@ -396,7 +432,9 @@
      identical, but the entire area becomes clickable. -->
 <a href="/products/42" class="pa-card">
   <div class="pa-card__header">
-    <h3>Widget Pro</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Widget Pro</h3>
+    </div>
   </div>
   <div class="pa-card__body">
     <p>Click anywhere on this card to navigate.</p>
@@ -498,12 +536,23 @@ CLICKABLE CARD:
                                looks identical to a regular card.
 
 SUB-ELEMENTS:
-- .pa-card__header             Flex row: [title] — [description] — [actions].
-                               Direct h1..h6 and <p> children auto-truncate.
-                               Native tags inside get margin/padding/border
-                               reset so they inherit the header layout cleanly.
+- .pa-card__header             Flex row of three canonical slots:
+                               [.pa-card__title] — [.pa-card__description] —
+                               [.pa-card__actions]. (Bare h1..h6 / <p> children
+                               still render + auto-truncate as legacy tolerance,
+                               but the documented shape is the slots above —
+                               one structure, so a <Card> wrapper emits one tree.)
+- .pa-card__description        Muted, flexing, truncating description line —
+                               the header's middle slot. Bare <p> tolerated.
 - .pa-card__body               flex: 1; standard padding.
 - .pa-card__footer             Border-top + footer background; flex row.
+                               Canonical content: optional leading text /
+                               .pa-card__meta on the left + .pa-card__actions
+                               on the right. The actions slot auto-pins to the
+                               trailing edge (no empty spacer <div> needed),
+                               with or without leading content. Always put
+                               footer buttons inside .pa-card__actions so they
+                               don't scatter to opposite corners.
 - .pa-card__actions            THE canonical header actions slot. Button/
                                control container (gap + align-center);
                                flex-shrink: 0 inside header. Use this for any
@@ -514,11 +563,14 @@ SUB-ELEMENTS:
                                the actions slot).
 - .pa-card__meta               Muted secondary text (dates, byline, etc.).
 
-TITLE SUB-COMPONENT:
-- .pa-card__title              Flex row wrapping icon + text; flex: 1 so
-                               the actions sibling stays on the right.
-- .pa-card__title-icon         Fixed-size icon.
-- .pa-card__title-text         Truncates with ellipsis on overflow.
+TITLE SUB-COMPONENT (the canonical header title — use it for EVERY card):
+- .pa-card__title              Flex row wrapping the optional icon + text;
+                               flex: 0 1 auto (natural width) so a sibling
+                               .pa-card__description gets the free space and
+                               .pa-card__actions stays right. Always present,
+                               with or without an icon — never a bare <h3>.
+- .pa-card__title-icon         Fixed-size leading icon (optional).
+- .pa-card__title-text         The heading (h1..h6); truncates with ellipsis.
 
 BODY MODIFIER:
 - .pa-card__body--no-padding   Strips body padding (for tables / lists
@@ -556,10 +608,9 @@ SECTION WRAPPERS (lighter than a card, for heading-only groupings):
                                underline, no container behaviour.
 
 IMPLICIT BEHAVIOURS:
-- The header is flex with auto-truncation: direct h1..h6 and <p>
-  children get white-space: nowrap + text-overflow: ellipsis. This
-  is why long card titles look "cut off" in narrow columns — use
-  --wrap to opt out.
+- The header truncates: .pa-card__title-text and .pa-card__description
+  get white-space: nowrap + text-overflow: ellipsis. This is why long
+  card titles look "cut off" in narrow columns — use --wrap to opt out.
 - Buttons inside the header get -0.25rem vertical margin so they
   don't grow the header height past $card-header-min-height.
 - Card body :first-child gets margin-top: 0 to avoid double-spacing
@@ -570,8 +621,10 @@ STRUCTURE PATTERNS:
 Card with three-part header:
 <div class="pa-card">
   <div class="pa-card__header">
-    <h3>Title</h3>
-    <p>Description (truncates)</p>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Title</h3>
+    </div>
+    <p class="pa-card__description">Description (truncates)</p>
     <div class="pa-card__actions">
       <button class="pa-btn pa-btn--sm">Action</button>
     </div>
@@ -582,7 +635,9 @@ Card with three-part header:
 Card with underlined header (semantic variant):
 <div class="pa-card">
   <div class="pa-card__header pa-card__header--underlined pa-card__header--underline-danger">
-    <h3>Critical Settings</h3>
+    <div class="pa-card__title">
+      <h3 class="pa-card__title-text">Critical Settings</h3>
+    </div>
   </div>
   <div class="pa-card__body">…</div>
 </div>

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

@@ -83,8 +83,11 @@
       white-space: nowrap;
     }
 
-    // Description paragraphs - flexible middle, truncate with ellipsis
-    > p {
+    // Description - flexible middle, truncate with ellipsis.
+    // `.pa-card__description` is the canonical element; bare `> p` is kept as
+    // legacy tolerance so hand-written markup doesn't break.
+    > p,
+    > .pa-card__description {
       flex: 1;
       min-width: 0;
       overflow: hidden;
@@ -92,6 +95,12 @@
       white-space: nowrap;
       color: var(--pa-text-color-2);
       font-size: $font-size-sm;
+      // Nudge the smaller description onto the title's baseline (see
+      // $card-description-offset-y). `position: relative` keeps it in flow —
+      // truncation/flex sizing are unaffected — it only shifts the paint.
+      // Font-metric dependent, so themes can retune via the CSS variable.
+      position: relative;
+      top: var(--pa-card-description-offset-y, #{$card-description-offset-y});
     }
 
     // Actions container - fixed, doesn't shrink
@@ -243,13 +252,18 @@
     &--wrap {
       flex-wrap: wrap;
 
-      > h1, > h2, > h3, > h4, > h5, > h6 {
+      // Un-truncate both the bare-heading shorthand AND the canonical
+      // `.pa-card__title` > `.pa-card__title-text` so titles wrap (not
+      // ellipsis) in wrap mode regardless of which header shape is used.
+      > h1, > h2, > h3, > h4, > h5, > h6,
+      > .pa-card__title .pa-card__title-text {
         white-space: normal;
         overflow: visible;
         text-overflow: clip;
       }
 
-      > p {
+      > p,
+      > .pa-card__description {
         white-space: normal;
         flex-basis: 100%;
         order: 1;
@@ -263,7 +277,11 @@
     align-items: center;
     gap: $spacing-sm;
     min-width: 0; // Enable text truncation
-    flex: 1;
+    // Natural width (like a bare heading), shrinkable, no grow — so a sibling
+    // `.pa-card__description` gets the free space instead of the title hogging
+    // half the row. `justify-content: space-between` on the header still pins
+    // `.pa-card__actions` to the right.
+    flex: 0 1 auto;
 
     &-icon {
       flex-shrink: 0;
@@ -279,7 +297,9 @@
       color: var(--pa-text-color-1);
       font-size: $font-size-base;
       font-weight: $font-weight-semibold;
-      line-height: 1;
+      // Not `1` — line-height 1 clips glyph descenders (g, y, p) under
+      // `overflow: hidden`. Matches the room bare headings already leave.
+      line-height: 1.4;
     }
   }
 
@@ -306,6 +326,18 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: $spacing-sm;
+
+    // Canonical footer content model (mirrors the header): optional leading
+    // content on the left — text or `.pa-card__meta` — plus `.pa-card__actions`
+    // on the right. The auto inline-start margin pins the actions slot to the
+    // trailing edge whether or not there's leading content, so an actions-only
+    // footer no longer needs an empty spacer `<div>` to fight `space-between`.
+    // Buttons live inside `.pa-card__actions` (the same slot as the header) so
+    // they never scatter to opposite corners the way bare footer buttons do.
+    .pa-card__actions {
+      margin-inline-start: auto;
+    }
   }
 
   &__actions {

package/src/scss/variables/_components.scss

@@ -176,6 +176,13 @@ $card-body-padding-h: 1rem !default;       // 10px horizontal
 $card-header-padding-v: 0.5rem !default;   // 5px vertical
 $card-header-padding-h: 1rem !default;     // 10px horizontal - matches body
 $card-header-min-height: 4rem !default;    // 40px - fits xs buttons (32px) with padding
+// Vertical nudge that drops the (smaller) header description onto the title's
+// baseline. Under the header's center alignment a 16px title and 14px
+// description don't share a baseline, leaving the description ~1px high. The
+// exact correction is font-metric dependent, so it's exposed as a variable
+// (SCSS default here + `--pa-card-description-offset-y` at runtime) that themes
+// with a different font can retune. Set to 0 to disable the nudge entirely.
+$card-description-offset-y: 1px !default;
 $card-footer-padding-v: 1.2rem !default;   // 12px vertical
 $card-footer-padding-h: 1rem !default;     // 10px horizontal - matches body
 $card-grid-min-width: 280px !default;