@keenmate/pure-admin-core 2.3.6 → 2.5.0

package/snippets/tabs.html

@@ -200,7 +200,7 @@
       <span>Notifications</span>
     </button>
   </div>
-  <div class="pa-tabs__content" class="flex-grow-1">
+  <div class="pa-tabs__content flex-grow-1">
     <div class="pa-tabs__panel pa-tabs__panel--active" id="vert-1">
       Account settings
     </div>
@@ -226,7 +226,7 @@
       <i class="fa-solid fa-gear"></i>
     </button>
   </div>
-  <div class="pa-tabs__content" class="flex-grow-1">
+  <div class="pa-tabs__content flex-grow-1">
     <div class="pa-tabs__panel pa-tabs__panel--active" id="vert-c-1">
       Dashboard content
     </div>
@@ -582,7 +582,7 @@
       <i class="fa-solid fa-envelope"></i>
     </button>
   </div>
-  <div class="pa-tabs__content" class="flex-grow-1">
+  <div class="pa-tabs__content flex-grow-1">
     <div class="pa-tabs__panel pa-tabs__panel--active" id="vicon1">
       Home content
     </div>
@@ -680,20 +680,20 @@
 <!-- Vertical Standalone Tabs - Sidebar Style Navigation (use vertical layout wrapper) -->
 <div class="pa-tabs__vertical-layout">
   <div class="pa-tabs pa-tabs--vertical">
-    <button class="pa-tabs__item pa-tabs__item--h-3x pa-tabs__item--active">
+    <button class="pa-tabs__item minhr-3 pa-tabs__item--active">
       <i class="fa-solid fa-house"></i>
       <span>Dashboard</span>
     </button>
-    <button class="pa-tabs__item pa-tabs__item--h-3x">
+    <button class="pa-tabs__item minhr-3">
       <i class="fa-solid fa-chart-bar"></i>
       <span>Analytics</span>
     </button>
-    <button class="pa-tabs__item pa-tabs__item--h-3x">
+    <button class="pa-tabs__item minhr-3">
       <i class="fa-solid fa-users"></i>
       <span>Users</span>
     </button>
   </div>
-  <div class="pa-tabs__content" class="flex-grow-1">
+  <div class="pa-tabs__content flex-grow-1">
     <div class="pa-tabs__panel pa-tabs__panel--active" id="sav1">
       <div class="pa-card">
         <div class="pa-card__header">
@@ -743,20 +743,20 @@
 <!-- Bordered Vertical Tabs - Card-Like Wrapper -->
 <div class="pa-tabs__vertical-layout pa-tabs__vertical-layout--bordered">
   <div class="pa-tabs pa-tabs--vertical">
-    <button class="pa-tabs__item pa-tabs__item--h-3x pa-tabs__item--active">
+    <button class="pa-tabs__item minhr-3 pa-tabs__item--active">
       <i class="fa-solid fa-gauge"></i>
       <span>Overview</span>
     </button>
-    <button class="pa-tabs__item pa-tabs__item--h-3x">
+    <button class="pa-tabs__item minhr-3">
       <i class="fa-solid fa-chart-pie"></i>
       <span>Reports</span>
     </button>
-    <button class="pa-tabs__item pa-tabs__item--h-3x">
+    <button class="pa-tabs__item minhr-3">
       <i class="fa-solid fa-gear"></i>
       <span>Settings</span>
     </button>
   </div>
-  <div class="pa-tabs__content" class="flex-grow-1">
+  <div class="pa-tabs__content flex-grow-1">
     <div class="pa-tabs__panel pa-tabs__panel--active" id="bv1">
       Overview - bordered vertical tabs with divider
     </div>
@@ -770,9 +770,72 @@
 </div>
 
 
+<!-- ================================
+     CARD-HEADER TABS (pa-tabs__container--card)
+     Makes the tab row look and sit like a pa-card__header — same
+     height, same padding, same background. Useful when the tabs ARE
+     the header of a card-shaped section, not just navigation above it.
+
+     Built-in overflow behaviour: when the tab row can't fit all tabs,
+     a .pa-tabs__overflow menu on the inline-end side holds the
+     overflowing ones. The toggle carries --has-active when the hidden
+     tab is the active one (adds an accent underline to the toggle).
+     ================================ -->
+
+<div class="pa-tabs__container pa-tabs__container--card">
+  <div class="pa-tabs">
+    <button class="pa-tabs__item pa-tabs__item--active">Overview</button>
+    <button class="pa-tabs__item">Analytics</button>
+    <button class="pa-tabs__item">Logs</button>
+
+    <!-- Overflow affordance — toggle + dropdown menu.
+         Flipped open/closed by adding pa-tabs__overflow-menu--open on
+         the menu. Add pa-tabs__overflow-toggle--has-active on the
+         toggle when the hidden tab currently has --active. -->
+    <div class="pa-tabs__overflow">
+      <button class="pa-tabs__overflow-toggle" onclick="toggleTabOverflow(this)" aria-label="More tabs">
+        <i class="fa-solid fa-ellipsis"></i>
+      </button>
+      <div class="pa-tabs__overflow-menu">
+        <button class="pa-tabs__item">Archived</button>
+        <button class="pa-tabs__item">Deleted</button>
+        <button class="pa-tabs__item">Audit Trail</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="pa-tabs__content">
+    <div class="pa-tabs__panel pa-tabs__panel--active" id="cardtabs-1">
+      Overview content — tab row renders at $card-header-min-height with
+      $card-header-padding, matching adjacent pa-card headers cleanly.
+    </div>
+    <div class="pa-tabs__panel" id="cardtabs-2">Analytics content</div>
+    <div class="pa-tabs__panel" id="cardtabs-3">Logs content</div>
+  </div>
+</div>
+
+
 <!-- JAVASCRIPT FOR TAB SWITCHING -->
 
 <script>
+// Toggle the overflow menu on card-header tabs.
+function toggleTabOverflow(btn) {
+  const menu = btn.nextElementSibling;
+  if (menu && menu.classList.contains('pa-tabs__overflow-menu')) {
+    menu.classList.toggle('pa-tabs__overflow-menu--open');
+  }
+}
+
+// Close the overflow menu when clicking outside
+document.addEventListener('click', (e) => {
+  document.querySelectorAll('.pa-tabs__overflow-menu--open').forEach(menu => {
+    const overflow = menu.closest('.pa-tabs__overflow');
+    if (overflow && !overflow.contains(e.target)) {
+      menu.classList.remove('pa-tabs__overflow-menu--open');
+    }
+  });
+});
+
 // Scrollable tabs functionality
 function scrollTabs(button, direction) {
   const tabsContainer = button.closest('.pa-tabs--scrollable');
@@ -907,46 +970,67 @@ STANDALONE TABS:
 - pa-tabs__panel--active (active panel)
 
 STYLES:
-- pa-tabs--pills (pill-style tabs with rounded backgrounds)
-- pa-tabs--boxed (boxed tabs with container border)
-- pa-tabs--vertical (vertical tab orientation)
+- pa-tabs--pills       (pill-style tabs with rounded backgrounds)
+- pa-tabs--boxed       (boxed tabs with container border)
+- pa-tabs--vertical    (vertical tab orientation; use inside
+                        .pa-tabs__vertical-layout for proper spacing)
+- pa-tabs--border-top  (active indicator on TOP border instead of bottom;
+                        border-bottom is removed on the container)
 
 ALIGNMENT:
-- pa-tabs--centered (center-align tabs)
-- pa-tabs--full (full-width tabs, equal distribution)
+- pa-tabs--centered    (center-align tabs)
+- pa-tabs--full        (full-width tabs, equal distribution)
 
 OVERFLOW HANDLING:
-- (default) (tabs wrap to multiple lines when constrained)
-- pa-tabs--nowrap (prevent wrapping, tabs overflow in single line)
-- pa-tabs--scrollable (horizontal scroll with arrow navigation)
-- pa-tabs--collapse (show only icons, active tab shows full title - requires icons on all tabs)
-- Use for long tab titles in narrow containers
+- (default)            (tabs wrap to multiple lines when constrained)
+- pa-tabs--nowrap      (prevent wrapping, tabs overflow in single line)
+- pa-tabs--scrollable  (horizontal scroll with arrow navigation;
+                        requires .pa-tabs__scroll-container wrap and
+                        .pa-tabs__scroll-btn--start / --end arrows)
+- pa-tabs--collapse    (show only icons, active tab shows full title —
+                        all tabs must have an <i> AND a <span>, since
+                        the SCSS only hides the span)
 
 SIZES:
-- pa-tabs--sm (small tabs with compact padding)
-- (no class) (default size)
-- pa-tabs--lg (large tabs with generous padding)
-
-FIXED WIDTH/HEIGHT (use utility classes):
-- minwr-1 through minwr-25 (min-width in rem)
-- minhr-1 through minhr-25 (min-height in rem)
-- Examples: minwr-6 (6rem), minwr-8 (8rem), minhr-3 (3rem)
-- Use for consistent tab sizing across navigation
-
-LAYOUT WRAPPERS:
-- pa-tabs__container (wrapper for horizontal tabs + content)
-  - pa-tabs__container--bordered (card-like border around entire tabs system)
-- pa-tabs__vertical-layout (flexbox wrapper for vertical tabs + content)
-  - pa-tabs__vertical-layout--bordered (card-like border around entire tabs system)
-- Use wrappers for all vertical tab layouts instead of grid
-- Provides proper spacing and alignment
-
-BORDERED VARIANTS:
-- Add --bordered modifier to wrapper for card-like appearance
-- Wraps entire tab system (navigation + content) in single border
-- Horizontal: pa-tabs__container--bordered
-- Vertical: pa-tabs__vertical-layout--bordered
-- Perfect for standalone tabs that need visual separation
+- pa-tabs--sm          (small tabs with compact padding)
+- (no class)           (default size)
+- pa-tabs--lg          (large tabs with generous padding)
+
+FIXED WIDTH/HEIGHT (utility classes from utilities.scss):
+- minwr-{n} / wr-{n} / maxwr-{n}    (rem width; n = 1..10, 15, 20, 25, 30, 35, 40, 45, 50)
+- minhr-{n} / hr-{n}  / maxhr-{n}   (rem height; same set)
+- Examples: .minwr-6 (6rem), .minwr-8 (8rem), .minhr-3 (3rem)
+- For icon-only vertical tabs, .minwr-3 .minhr-3 produces a 30×30 px square.
+
+LAYOUT WRAPPERS (for pairing tabs + content):
+- pa-tabs__container                    Horizontal wrapper.
+- pa-tabs__container--bordered          Card-like border around the
+                                        whole tabs system; adds a
+                                        divider between nav and content.
+- pa-tabs__container--card              Tab row renders as a
+                                        pa-card__header (same height,
+                                        padding, bg); supports an
+                                        overflow menu on the inline-end.
+                                        Content below uses card body
+                                        padding. Good when tabs ARE the
+                                        section header.
+- pa-tabs__vertical-layout              Vertical wrapper (flex row:
+                                        tabs on start, content on end).
+                                        Content panels get padding-top: 0
+                                        so they align horizontally with
+                                        the tab row.
+- pa-tabs__vertical-layout--bordered    Card-like border with a divider
+                                        between vertical tabs and content.
+
+OVERFLOW MENU (used inside pa-tabs__container--card):
+- pa-tabs__overflow                     Wrapper; sits at the inline-end
+                                        of the tab row.
+- pa-tabs__overflow-toggle              Ellipsis / chevron button.
+- pa-tabs__overflow-toggle--has-active  Adds an accent underline so the
+                                        user knows the active tab is
+                                        currently hidden inside the menu.
+- pa-tabs__overflow-menu                Dropdown <div> hosting tab items.
+- pa-tabs__overflow-menu--open          JS-flipped visibility.
 
 USAGE NOTES:
 - Use pa-card__tabs for tabs integrated into cards

package/snippets/timeline.html

@@ -1,5 +1,18 @@
-<!-- Timeline Component Snippets -->
-<!-- Clean HTML examples for all timeline variants -->
+<!-- ================================
+     TIMELINE SNIPPETS
+     Pure Admin Visual Framework
+
+     Three visual variants, pick one per timeline container:
+       --simple       vertical line + dots on one side (start)
+       --alternating  centered line, items zigzag left/right
+       --feed         activity-feed layout (avatar + text + time)
+
+     The base .pa-timeline class has zero visual styling on its own;
+     each variant adds its own rules. Items can be <li> inside a <ul>
+     (semantic) or <div> inside a <div> (non-semantic) — the SCSS uses
+     :nth-child so either tag works. Use <ul>/<li> when the timeline
+     is a genuine list of events; otherwise <div> is fine.
+     ================================ -->
 
 <!-- ========================================
      Simple Timeline (Start-aligned with dots)
@@ -306,59 +319,113 @@
     </div>
 </div>
 
-<!-- ========================================
-     Complete Component Reference
-     ======================================== -->
+<!-- ================================
+     COMPONENT REFERENCE
+     ================================ -->
+
 <!--
-TIMELINE VARIANTS:
-- 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--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 --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 --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--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--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
-- pa-timeline__item--success: Success color marker
-- pa-timeline__item--warning: Warning color marker
-- pa-timeline__item--danger: Danger color marker
-- pa-timeline__item--info: Info color marker
-- pa-timeline__item--secondary: Secondary color marker
-- pa-timeline__item--filled: Solid filled marker
-
-FEED MODIFIERS:
-- pa-timeline__item--date-header: Date section header
-
-COMPONENTS:
-- pa-timeline__time: Time label
-- pa-timeline__content: Main content area
-- pa-timeline__date: Date label (block variant)
-- pa-timeline__icon: Icon container (block variant)
-- pa-timeline__avatar: Avatar image (feed variant)
-- pa-timeline__comment: Comment bubble (feed variant)
-- pa-timeline__date-icon: Calendar icon (feed date headers)
-- pa-timeline__date-label: Date text (feed date headers)
-
-UTILITIES:
-- pa-timeline__scroll-container: Scrollable container
-- pa-timeline__loader: Loading indicator
-- pa-timeline__loader-text: Loading text
-- pa-timeline__load-more-wrapper: Load more button wrapper
+BASE:
+- .pa-timeline                  Base container; no visual styling on its
+                                own. Pick ONE variant below.
+
+VARIANTS (mutually exclusive):
+- .pa-timeline--simple          Start-aligned: vertical line on the
+                                inline-start edge with dot markers.
+                                Uses logical properties — mirrors in RTL.
+- .pa-timeline--alternating     Centered line; items zigzag to the left
+                                and right side via :nth-child(odd/even).
+                                Max-width capped.
+                                (NOTE: uses physical left/right — does
+                                NOT mirror in RTL.)
+- .pa-timeline--feed            Flex-row per item: time / avatar / body.
+                                Optimised for activity feeds & comments.
+
+SIMPLE ITEM MODIFIERS (dot colour):
+- .pa-timeline__item--primary / --success / --warning / --danger
+                              / --info / --secondary
+- .pa-timeline__item--filled    Solid fill instead of ring. Composes
+                                with a colour modifier to match.
+
+ALTERNATING LAYOUT MODIFIERS:
+- .pa-timeline--start           All items on start side; line on start.
+- .pa-timeline--end             All items on end side; line on end.
+- .pa-timeline--keep-layout     Don't auto-collapse to single column on
+                                mobile (<= 767px). Desktop zigzag stays.
+- .pa-timeline--single-column   Force single-column layout regardless of
+                                screen width. Visually similar to --start
+                                but uses a different specificity path
+                                (does NOT override left with !important,
+                                so odd/even classes on items still apply).
+
+Responsive behaviour (--alternating only):
+  default             zigzag desktop → single column mobile (≤ 767px)
+  + --keep-layout     zigzag stays at all widths
+  + --start           start-aligned desktop → single column mobile
+  + --end             end-aligned desktop → single column mobile
+  (combine --start/--end with --keep-layout to skip the mobile collapse.)
+
+SIMPLE / FEED SUB-ELEMENTS:
+- .pa-timeline__time             Time label (block in --simple; fixed-
+                                 width column in --feed).
+- .pa-timeline__content          Main body text.
+
+ALTERNATING SUB-ELEMENTS:
+- .pa-timeline__date             Accent-coloured date label (uppercase).
+- .pa-timeline__icon             Circular icon badge beside the dot.
+- .pa-timeline__content          Content box (auto-styled h3 + p).
+
+FEED SUB-ELEMENTS:
+- .pa-timeline__avatar           Circular avatar wrapper (inline-block,
+                                 margin-inline-end). Put an <img>
+                                 inside.
+- .pa-timeline__comment          Bordered comment bubble below the
+                                 meta line.
+- .pa-timeline__item--date-header    Section divider (flex row + date
+                                      icon/label, no dot on the line).
+- .pa-timeline__date-icon            Emoji / FA calendar icon.
+- .pa-timeline__date-label           Uppercase date text.
+
+UTILITIES (typically with --simple for interactive log views):
+- .pa-timeline__scroll-container      max-height + overflow-y: auto
+- .pa-timeline__loader                Centred loader wrapper
+- .pa-timeline__loader-text           Muted caption under the spinner
+- .pa-timeline__load-more-wrapper     Centred button wrapper
+
+MARKUP NOTE:
+The SCSS uses :nth-child selectors, so item order comes from DOM order
+regardless of tag. Use <ul>/<li> for semantic lists (preferred for
+event logs / history); <div>/<div> works the same if you don't want
+list semantics.
+
+STRUCTURE PATTERNS:
+
+Simple log (start-aligned, coloured dots):
+<ul class="pa-timeline pa-timeline--simple">
+  <li class="pa-timeline__item pa-timeline__item--success">
+    <div class="pa-timeline__time">14:32</div>
+    <div class="pa-timeline__content">Deploy succeeded</div>
+  </li>
+</ul>
+
+Alternating milestone layout (auto-collapse on mobile):
+<ul class="pa-timeline pa-timeline--alternating">
+  <li class="pa-timeline__item">
+    <div class="pa-timeline__date">Jan 2024</div>
+    <div class="pa-timeline__icon">🚀</div>
+    <div class="pa-timeline__content"><h3>Launch</h3><p>…</p></div>
+  </li>
+</ul>
+
+Activity feed with avatar, comment, and time column:
+<ul class="pa-timeline pa-timeline--feed">
+  <li class="pa-timeline__item">
+    <div class="pa-timeline__time">14:32</div>
+    <div class="pa-timeline__content">
+      <div class="pa-timeline__avatar"><img src="…"></div>
+      <span><a href="#">User</a> commented on <a href="#">Issue #42</a></span>
+      <div class="pa-timeline__comment"><p>Looks good to me.</p></div>
+    </div>
+  </li>
+</ul>
 -->
+