@keenmate/pure-admin-core 1.4.0 → 1.5.0

package/snippets/layout.html

@@ -45,7 +45,7 @@
     <!-- Three-section layout: Left / Center / Right -->
     <footer class="pa-layout__footer">
         <!-- Left Section (stays anchored left) -->
-        <div class="pa-footer__left">
+        <div class="pa-footer__start">
             <p>&copy; 2024 Pure Admin Framework</p>
         </div>
 
@@ -55,7 +55,7 @@
         </div>
 
         <!-- Right Section (stays anchored right) -->
-        <div class="pa-footer__right">
+        <div class="pa-footer__end">
             <span>App version: 1.2.1</span>
             <span>Database version: 2.3.1</span>
             <a href="#">Open Source Licenses</a>
@@ -435,7 +435,7 @@ NOTE: Fixed width (.wr-*) overrides both default and resizable width.
 <nav class="pa-navbar">
     <div class="pa-navbar__inner">
         <!-- Left Section: Burger, Brand, Left Nav (stays anchored left) -->
-        <div class="pa-header__left">
+        <div class="pa-header__start">
             <!-- Hamburger Menu (burger) -->
             <button class="pa-header__burger burger-menu" onclick="toggleSidebar()" aria-label="Toggle sidebar">
                 <span></span>
@@ -449,7 +449,7 @@ NOTE: Fixed width (.wr-*) overrides both default and resizable width.
             </div>
 
             <!-- Left Navigation Links -->
-            <nav class="pa-header__nav pa-header__nav--left">
+            <nav class="pa-header__nav pa-header__nav--start">
                 <ul>
                     <li><a href="/">Dashboard</a></li>
                     <li><a href="/components">Components</a></li>
@@ -466,9 +466,9 @@ NOTE: Fixed width (.wr-*) overrides both default and resizable width.
         </div>
 
         <!-- Right Section: Right Nav, Notifications, Profile (stays anchored right) -->
-        <div class="pa-header__right">
+        <div class="pa-header__end">
             <!-- Right Navigation Links -->
-            <nav class="pa-header__nav pa-header__nav--right">
+            <nav class="pa-header__nav pa-header__nav--end">
                 <ul>
                     <li><a href="/alerts">Alerts</a></li>
                     <li><a href="/tables">Tables</a></li>
@@ -596,16 +596,16 @@ NAVBAR CLASSES:
 - .pa-navbar__inner - Navbar inner container
 
 HEADER SECTION CONTAINERS (inside pa-navbar__inner):
-- .pa-header__left - Left section (burger, brand, nav--left) - stays anchored left
+- .pa-header__start - Start section (burger, brand, nav--start) - stays anchored to start
 - .pa-header__center - Center section (title) - flexible, fills space
-- .pa-header__right - Right section (nav--right, notifications, profile) - stays anchored right
+- .pa-header__end - End section (nav--end, notifications, profile) - stays anchored to end
 
 HEADER/NAVBAR ELEMENT CLASSES (inside section containers):
 - .pa-header__burger - Burger menu button
 - .burger-menu - Burger menu class (same as __burger)
 - .pa-header__brand - Brand/logo area
 - .pa-header__nav - Navigation container
-- .pa-header__nav--left/right - Navigation alignment
+- .pa-header__nav--start/right - Navigation alignment
 - .pa-header__title - Page title area (flexible, with ellipsis)
 - .pa-notifications - Notification bell container
 - .pa-header__profile-btn - Profile button
@@ -621,9 +621,9 @@ LAYOUT CLASSES:
 - .pa-layout__footer - Footer container
 
 FOOTER SECTION CONTAINERS (inside pa-layout__footer):
-- .pa-footer__left - Left section (copyright, etc.) - stays anchored left
+- .pa-footer__start - Start section (copyright, etc.) - stays anchored to start
 - .pa-footer__center - Center section (optional) - flexible, fills space
-- .pa-footer__right - Right section (version info, links) - stays anchored right
+- .pa-footer__end - End section (version info, links) - stays anchored to end
 
 LAYOUT WIDTH VARIANTS (applied to body tag):
 - No class - Fluid layout (full width)

package/snippets/tables.html

@@ -231,7 +231,7 @@
 </div>
 
 <!-- Left-Aligned Pager -->
-<div class="pa-pager pa-pager--left">
+<div class="pa-pager pa-pager--start">
   <div class="pa-pager__container">
     <div class="pa-pager__controls">
       <button class="pa-btn pa-btn--sm pa-btn--secondary">« First</button>
@@ -243,7 +243,7 @@
 </div>
 
 <!-- Right-Aligned Pager -->
-<div class="pa-pager pa-pager--right">
+<div class="pa-pager pa-pager--end">
   <div class="pa-pager__container">
     <span class="pa-pager__text">Showing 1-25 of 250</span>
     <div class="pa-pager__controls">
@@ -273,14 +273,14 @@
 </div>
 
 <!-- Left-Aligned Load More -->
-<div class="pa-load-more pa-load-more--left">
+<div class="pa-load-more pa-load-more--start">
   <button class="pa-load-more__button">
     <span class="pa-load-more__text">Show More Items</span>
   </button>
 </div>
 
 <!-- Right-Aligned Load More -->
-<div class="pa-load-more pa-load-more--right">
+<div class="pa-load-more pa-load-more--end">
   <button class="pa-load-more__button">
     <span class="pa-load-more__text">Load Previous</span>
   </button>
@@ -306,14 +306,14 @@ HELPERS:
 
 PAGER:
 - pa-pager (center aligned by default)
-- pa-pager--left (left aligned)
-- pa-pager--right (right aligned)
+- pa-pager--start (start aligned)
+- pa-pager--end (end aligned)
 - pa-pager__container, __controls, __info, __input, __text
 
 LOAD MORE:
 - pa-load-more (center aligned by default)
-- pa-load-more--left (left aligned)
-- pa-load-more--right (right aligned)
+- pa-load-more--start (start aligned)
+- pa-load-more--end (end aligned)
 - pa-load-more__button, __spinner, __text, __count
 - pa-load-more__button--loading (loading state)
 -->

package/snippets/tabs.html

@@ -454,7 +454,7 @@
 
 <!-- Scrollable Tabs - Underline Style -->
 <div class="pa-tabs pa-tabs--scrollable" data-tabs-scroll>
-  <button class="pa-tabs__scroll-btn pa-tabs__scroll-btn--left" onclick="scrollTabs(this, 'left')">
+  <button class="pa-tabs__scroll-btn pa-tabs__scroll-btn--start" onclick="scrollTabs(this, 'left')">
     <i class="fa-solid fa-chevron-left"></i>
   </button>
   <div class="pa-tabs__scroll-container">
@@ -464,7 +464,7 @@
     <button class="pa-tabs__item">Reports & Analytics</button>
     <button class="pa-tabs__item">Settings & Configuration</button>
   </div>
-  <button class="pa-tabs__scroll-btn pa-tabs__scroll-btn--right" onclick="scrollTabs(this, 'right')">
+  <button class="pa-tabs__scroll-btn pa-tabs__scroll-btn--end" onclick="scrollTabs(this, 'right')">
     <i class="fa-solid fa-chevron-right"></i>
   </button>
 </div>
@@ -480,7 +480,7 @@
 
 <!-- Scrollable Pills -->
 <div class="pa-tabs pa-tabs--pills pa-tabs--scrollable" data-tabs-scroll>
-  <button class="pa-tabs__scroll-btn pa-tabs__scroll-btn--left" onclick="scrollTabs(this, 'left')">
+  <button class="pa-tabs__scroll-btn pa-tabs__scroll-btn--start" onclick="scrollTabs(this, 'left')">
     <i class="fa-solid fa-chevron-left"></i>
   </button>
   <div class="pa-tabs__scroll-container">
@@ -488,7 +488,7 @@
     <button class="pa-tabs__item">User Management System</button>
     <button class="pa-tabs__item">Reports & Analytics</button>
   </div>
-  <button class="pa-tabs__scroll-btn pa-tabs__scroll-btn--right" onclick="scrollTabs(this, 'right')">
+  <button class="pa-tabs__scroll-btn pa-tabs__scroll-btn--end" onclick="scrollTabs(this, 'right')">
     <i class="fa-solid fa-chevron-right"></i>
   </button>
 </div>
@@ -790,8 +790,8 @@ function scrollTabs(button, direction) {
 
 function updateScrollArrows(tabsContainer) {
   const scrollContainer = tabsContainer.querySelector('.pa-tabs__scroll-container');
-  const leftBtn = tabsContainer.querySelector('.pa-tabs__scroll-btn--left');
-  const rightBtn = tabsContainer.querySelector('.pa-tabs__scroll-btn--right');
+  const leftBtn = tabsContainer.querySelector('.pa-tabs__scroll-btn--start');
+  const rightBtn = tabsContainer.querySelector('.pa-tabs__scroll-btn--end');
 
   if (!scrollContainer || !leftBtn || !rightBtn) return;
 

package/snippets/timeline.html

@@ -2,7 +2,7 @@
 <!-- Clean HTML examples for all timeline variants -->
 
 <!-- ========================================
-     Simple Timeline (Left-aligned with dots)
+     Simple Timeline (Start-aligned with dots)
      ======================================== -->
 
 <!-- Basic Simple Timeline -->
@@ -222,14 +222,14 @@
      Alternating Timeline Layout Modifiers (NEW)
      ======================================== -->
 
-<!-- Left-aligned timeline (all items on left side) -->
-<div class="pa-timeline pa-timeline--alternating pa-timeline--left">
+<!-- Start-aligned timeline (all items on left side) -->
+<div class="pa-timeline pa-timeline--alternating pa-timeline--start">
     <div class="pa-timeline__item">
         <div class="pa-timeline__date">Jan 2024</div>
         <div class="pa-timeline__icon">📝</div>
         <div class="pa-timeline__content">
             <h3>Planning</h3>
-            <p>All items aligned to left side with timeline line on left.</p>
+            <p>All items aligned to start side with timeline line on start.</p>
         </div>
     </div>
     <div class="pa-timeline__item">
@@ -237,19 +237,19 @@
         <div class="pa-timeline__icon">🚀</div>
         <div class="pa-timeline__content">
             <h3>Launch</h3>
-            <p>Content blocks stay on left side.</p>
+            <p>Content blocks stay on start side.</p>
         </div>
     </div>
 </div>
 
-<!-- Right-aligned timeline (all items on right side) -->
-<div class="pa-timeline pa-timeline--alternating pa-timeline--right">
+<!-- End-aligned timeline (all items on right side) -->
+<div class="pa-timeline pa-timeline--alternating pa-timeline--end">
     <div class="pa-timeline__item">
         <div class="pa-timeline__date">Jan 2024</div>
         <div class="pa-timeline__icon">📝</div>
         <div class="pa-timeline__content">
             <h3>Planning</h3>
-            <p>All items aligned to right side with timeline line on right.</p>
+            <p>All items aligned to end side with timeline line on end.</p>
         </div>
     </div>
     <div class="pa-timeline__item">
@@ -257,7 +257,7 @@
         <div class="pa-timeline__icon">🚀</div>
         <div class="pa-timeline__content">
             <h3>Launch</h3>
-            <p>Content blocks stay on right side.</p>
+            <p>Content blocks stay on end side.</p>
         </div>
     </div>
 </div>
@@ -282,26 +282,26 @@
     </div>
 </div>
 
-<!-- Combination: Left-aligned + keep layout on mobile -->
-<div class="pa-timeline pa-timeline--alternating pa-timeline--left pa-timeline--keep-layout">
+<!-- Combination: Start-aligned + keep layout on mobile -->
+<div class="pa-timeline pa-timeline--alternating pa-timeline--start pa-timeline--keep-layout">
     <div class="pa-timeline__item">
         <div class="pa-timeline__date">Q1</div>
         <div class="pa-timeline__icon">📊</div>
         <div class="pa-timeline__content">
             <h3>Analysis</h3>
-            <p>Left-aligned on desktop, stays left on mobile.</p>
+            <p>Start-aligned on desktop, stays start on mobile.</p>
         </div>
     </div>
 </div>
 
-<!-- Combination: Right-aligned + keep layout on mobile -->
-<div class="pa-timeline pa-timeline--alternating pa-timeline--right pa-timeline--keep-layout">
+<!-- Combination: End-aligned + keep layout on mobile -->
+<div class="pa-timeline pa-timeline--alternating pa-timeline--end pa-timeline--keep-layout">
     <div class="pa-timeline__item">
         <div class="pa-timeline__date">Q1</div>
         <div class="pa-timeline__icon">📊</div>
         <div class="pa-timeline__content">
             <h3>Analysis</h3>
-            <p>Right-aligned on desktop, stays right on mobile.</p>
+            <p>End-aligned on desktop, stays end on mobile.</p>
         </div>
     </div>
 </div>
@@ -311,28 +311,28 @@
      ======================================== -->
 <!--
 TIMELINE VARIANTS:
-- pa-timeline--simple: Left-aligned with dots
+- pa-timeline--simple: Start-aligned with dots
 - pa-timeline--alternating: Centered zigzag layout
 - pa-timeline--feed: Activity feed with avatars
 
 ALTERNATING LAYOUT MODIFIERS (can be combined):
-- pa-timeline--left: All items on left side (independent of responsive behavior)
-- pa-timeline--right: All items on right side (independent of responsive behavior)
+- pa-timeline--start: All items on start side (independent of responsive behavior)
+- pa-timeline--end: All items on end side (independent of responsive behavior)
 - pa-timeline--keep-layout: Prevent mobile collapse, maintain desktop layout at all widths
-- pa-timeline--single-column: Force single-column layout (alias for --left)
+- pa-timeline--single-column: Force single-column layout (alias for --start)
 
 RESPONSIVE BEHAVIOR:
 - Default: Zigzag on desktop (>767px), auto-collapse to single-column on mobile (≤767px)
 - With --keep-layout: Layout maintained at all screen widths
-- With --left or --right: Aligned layout on desktop, collapses on mobile (unless --keep-layout added)
+- With --start or --end: Aligned layout on desktop, collapses on mobile (unless --keep-layout added)
 
 COMBINATION EXAMPLES:
 - pa-timeline--alternating: Zigzag desktop, single-column mobile (auto-responsive)
-- pa-timeline--alternating pa-timeline--left: All left desktop, single-column mobile
-- pa-timeline--alternating pa-timeline--right: All right desktop, single-column mobile
+- pa-timeline--alternating pa-timeline--start: All start desktop, single-column mobile
+- pa-timeline--alternating pa-timeline--end: All end desktop, single-column mobile
 - pa-timeline--alternating pa-timeline--keep-layout: Zigzag stays zigzag on mobile
-- pa-timeline--alternating pa-timeline--left pa-timeline--keep-layout: Left stays left on mobile
-- pa-timeline--alternating pa-timeline--right pa-timeline--keep-layout: Right stays right on mobile
+- pa-timeline--alternating pa-timeline--start pa-timeline--keep-layout: Start stays start on mobile
+- pa-timeline--alternating pa-timeline--end pa-timeline--keep-layout: End stays end on mobile
 
 ITEM MODIFIERS (simple variant):
 - pa-timeline__item--primary: Primary color marker

package/snippets/tooltips.html

@@ -319,7 +319,7 @@
 </div>
 
 <!-- Right Aligned -->
-<div class="pa-popover pa-popover--right" data-placement="bottom">
+<div class="pa-popover pa-popover--end" data-placement="bottom">
   <button class="pa-popover__trigger">?</button>
   <div class="pa-popover__content">
     <div class="pa-popover__header">
@@ -429,7 +429,7 @@ SIZES:
 
 ALIGNMENT:
 - pa-popover--center (centered body text)
-- pa-popover--right (right-aligned body text)
+- pa-popover--end (end-aligned body text)
 
 COMPONENTS:
 - pa-popover__trigger (button/trigger element)

package/snippets/typography.html

@@ -1,101 +1,101 @@
-<!-- Typography Component (.pa-text)
-     BEM pattern for paragraph text styling
-     ================================================== -->
-
-<!-- Base Text (default: 14px, primary color) -->
-<p class="pa-text">Default paragraph text with 14px font size and primary color.</p>
-
-<!-- Size Modifiers -->
-<p class="pa-text pa-text--xs">Extra small text (10px)</p>
-<p class="pa-text pa-text--sm">Small text (12px)</p>
-<p class="pa-text">Default text (14px)</p>
-<p class="pa-text pa-text--lg">Large text (16px)</p>
-<p class="pa-text pa-text--xl">Extra large text (18px)</p>
-
-<!-- Color Modifiers -->
-<p class="pa-text pa-text--primary">Primary color text</p>
-<p class="pa-text pa-text--secondary">Secondary/muted color text</p>
-
-<!-- Alignment Modifiers -->
-<p class="pa-text pa-text--left">Left aligned text</p>
-<p class="pa-text pa-text--center">Center aligned text</p>
-<p class="pa-text pa-text--right">Right aligned text</p>
-
-<!-- Semantic Variants -->
-
-<!-- Caption: Small secondary text with bottom margin (for hints/descriptions) -->
-<p class="pa-text pa-text--caption">This is a caption - small, secondary, with margin-bottom</p>
-
-<!-- Lead: Larger intro text with relaxed line height -->
-<p class="pa-text pa-text--lead">This is lead text - larger font with relaxed line height for introductory paragraphs.</p>
-
-<!-- Combined Modifiers -->
-<p class="pa-text pa-text--sm pa-text--secondary">Small secondary text</p>
-<p class="pa-text pa-text--lg pa-text--center">Large centered text</p>
-<p class="pa-text pa-text--xs pa-text--right pa-text--secondary">Extra small, right-aligned, secondary</p>
-
-<!-- With Spacing Utilities -->
-<p class="pa-text pa-text--secondary mt-4">Secondary text with top margin</p>
-<p class="pa-text pa-text--caption mb-6">Caption with larger bottom margin</p>
-
-<!-- Practical Examples -->
-
-<!-- Demo/hint text above a component -->
-<h4>Badge Wrapping Demo</h4>
-<p class="pa-text pa-text--caption">29 badges in narrow container</p>
-<div class="pa-badge-group"><!-- badges here --></div>
-
-<!-- Card header description -->
-<div class="pa-card__header">
-    <h3>Feature Title</h3>
-    <p class="pa-text pa-text--secondary">Brief description of this feature or section.</p>
-</div>
-
-<!-- Form helper text -->
-<div class="pa-card__footer">
-    <p class="pa-text pa-text--sm pa-text--secondary" style="margin: 0;">
-        <strong>Note:</strong> Additional information about the form layout.
-    </p>
-</div>
-
-<!-- Centered tab content -->
-<div class="pa-tabs__panel">
-    <p class="pa-text pa-text--center">Feature highlights and capabilities.</p>
-</div>
-
-<!-- Toast/notification helper -->
-<p class="pa-text pa-text--secondary mt-4">
-    Progress bar shows time remaining before auto-dismiss (5 seconds)
-</p>
-
-<!--
-Available Classes Reference:
-============================
-
-Base:
-  .pa-text                    Default (14px, primary color)
-
-Sizes:
-  .pa-text--xs                10px (extra small)
-  .pa-text--sm                12px (small)
-  .pa-text--lg                16px (large)
-  .pa-text--xl                18px (extra large)
-
-Colors:
-  .pa-text--primary           Primary text color
-  .pa-text--secondary         Secondary/muted text color
-
-Alignment:
-  .pa-text--left              Left align
-  .pa-text--center            Center align
-  .pa-text--right             Right align
-
-Semantic:
-  .pa-text--caption           Small + secondary + margin-bottom (for hints)
-  .pa-text--lead              Large + relaxed line-height (for intros)
-
-Combine with spacing utilities:
-  mt-1 through mt-20          Margin top
-  mb-1 through mb-20          Margin bottom
-  (see utilities.scss for full spacing scale)
--->
+<!-- Typography Component (.pa-text)
+     BEM pattern for paragraph text styling
+     ================================================== -->
+
+<!-- Base Text (default: 14px, primary color) -->
+<p class="pa-text">Default paragraph text with 14px font size and primary color.</p>
+
+<!-- Size Modifiers -->
+<p class="pa-text pa-text--xs">Extra small text (10px)</p>
+<p class="pa-text pa-text--sm">Small text (12px)</p>
+<p class="pa-text">Default text (14px)</p>
+<p class="pa-text pa-text--lg">Large text (16px)</p>
+<p class="pa-text pa-text--xl">Extra large text (18px)</p>
+
+<!-- Color Modifiers -->
+<p class="pa-text pa-text--primary">Primary color text</p>
+<p class="pa-text pa-text--secondary">Secondary/muted color text</p>
+
+<!-- Alignment Modifiers -->
+<p class="pa-text pa-text--start">Start aligned text</p>
+<p class="pa-text pa-text--center">Center aligned text</p>
+<p class="pa-text pa-text--end">End aligned text</p>
+
+<!-- Semantic Variants -->
+
+<!-- Caption: Small secondary text with bottom margin (for hints/descriptions) -->
+<p class="pa-text pa-text--caption">This is a caption - small, secondary, with margin-bottom</p>
+
+<!-- Lead: Larger intro text with relaxed line height -->
+<p class="pa-text pa-text--lead">This is lead text - larger font with relaxed line height for introductory paragraphs.</p>
+
+<!-- Combined Modifiers -->
+<p class="pa-text pa-text--sm pa-text--secondary">Small secondary text</p>
+<p class="pa-text pa-text--lg pa-text--center">Large centered text</p>
+<p class="pa-text pa-text--xs pa-text--end pa-text--secondary">Extra small, end-aligned, secondary</p>
+
+<!-- With Spacing Utilities -->
+<p class="pa-text pa-text--secondary mt-4">Secondary text with top margin</p>
+<p class="pa-text pa-text--caption mb-6">Caption with larger bottom margin</p>
+
+<!-- Practical Examples -->
+
+<!-- Demo/hint text above a component -->
+<h4>Badge Wrapping Demo</h4>
+<p class="pa-text pa-text--caption">29 badges in narrow container</p>
+<div class="pa-badge-group"><!-- badges here --></div>
+
+<!-- Card header description -->
+<div class="pa-card__header">
+    <h3>Feature Title</h3>
+    <p class="pa-text pa-text--secondary">Brief description of this feature or section.</p>
+</div>
+
+<!-- Form helper text -->
+<div class="pa-card__footer">
+    <p class="pa-text pa-text--sm pa-text--secondary" style="margin: 0;">
+        <strong>Note:</strong> Additional information about the form layout.
+    </p>
+</div>
+
+<!-- Centered tab content -->
+<div class="pa-tabs__panel">
+    <p class="pa-text pa-text--center">Feature highlights and capabilities.</p>
+</div>
+
+<!-- Toast/notification helper -->
+<p class="pa-text pa-text--secondary mt-4">
+    Progress bar shows time remaining before auto-dismiss (5 seconds)
+</p>
+
+<!--
+Available Classes Reference:
+============================
+
+Base:
+  .pa-text                    Default (14px, primary color)
+
+Sizes:
+  .pa-text--xs                10px (extra small)
+  .pa-text--sm                12px (small)
+  .pa-text--lg                16px (large)
+  .pa-text--xl                18px (extra large)
+
+Colors:
+  .pa-text--primary           Primary text color
+  .pa-text--secondary         Secondary/muted text color
+
+Alignment:
+  .pa-text--start              Start align
+  .pa-text--center            Center align
+  .pa-text--end             End align
+
+Semantic:
+  .pa-text--caption           Small + secondary + margin-bottom (for hints)
+  .pa-text--lead              Large + relaxed line-height (for intros)
+
+Combine with spacing utilities:
+  mt-1 through mt-20          Margin top
+  mb-1 through mb-20          Margin bottom
+  (see utilities.scss for full spacing scale)
+-->

package/snippets/utilities.html

@@ -192,9 +192,9 @@ localStorage.setItem('compact-mode', 'true');
      TEXT UTILITIES
      ================================ -->
 
-<div class="text-left">Left aligned text</div>
+<div class="text-start">Start aligned text</div>
 <div class="text-center">Center aligned text</div>
-<div class="text-right">Right aligned text</div>
+<div class="text-end">End aligned text</div>
 <div class="text-nowrap">Text that doesn't wrap</div>
 <div class="text-truncate" style="width: 200px;">This long text will be truncated with ellipsis...</div>
 
@@ -555,7 +555,7 @@ Align: align-items-start/end/center/baseline/stretch
 Grow/Shrink: flex-fill, flex-grow-0/1, flex-shrink-0/1
 
 TEXT:
-- text-left, text-center, text-right
+- text-start, text-center, text-end
 - text-nowrap, text-truncate
 
 WIDTH/HEIGHT (percentage-based):

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

@@ -330,7 +330,7 @@
   // Button always keeps its horizontal padding (0.75rem on both sides)
   // These classes control content position and remove icon padding on aligned sides
 
-  &--align-left {
+  &--align-start {
     justify-content: flex-start;
 
     .pa-btn__icon {
@@ -338,7 +338,7 @@
     }
   }
 
-  &--align-right {
+  &--align-end {
     justify-content: flex-end;
 
     .pa-btn__icon {

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

@@ -29,6 +29,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: $spacing-base; // Gap between header elements (title, description, actions)
     min-width: 0; // Enable text truncation
 
     // Reset margins/paddings for all native elements
@@ -61,10 +62,50 @@
       font-size: $font-size-base;
     }
 
+    // Direct heading children - don't shrink (for three-part layout)
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+      flex-shrink: 0;
+    }
+
+    // Description paragraphs - flexible middle, truncate with ellipsis
+    > p {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--pa-text-color-2);
+      font-size: $font-size-sm;
+    }
+
+    // Actions container - fixed, doesn't shrink
+    .pa-card__actions,
+    .pa-btn-group {
+      flex-shrink: 0;
+    }
+
     // Buttons in card headers - negative margin to prevent header height growth
     .pa-btn {
       margin-top: -0.25rem;
       margin-bottom: -0.25rem;
+      flex-shrink: 0;
+    }
+
+    // Wrap modifier - allow description to wrap (for mobile or long descriptions)
+    &--wrap {
+      flex-wrap: wrap;
+
+      > p {
+        white-space: normal;
+        flex-basis: 100%;
+        order: 1;
+        margin-top: $spacing-xs;
+      }
     }
   }
 

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

@@ -66,7 +66,12 @@
     top: 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
+    }
   }
 }
 
@@ -75,7 +80,7 @@
   position: absolute;
   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;