@keenmate/pure-admin-core 2.8.0 → 2.9.0-rc03

package/snippets/splitter.html

@@ -0,0 +1,210 @@
+<!-- ================================
+     SPLITTER
+     Pure Admin Visual Framework
+
+     Resizable container with two or more panes. Drag a gutter to resize,
+     double-click to collapse / restore, arrow keys nudge size when the
+     gutter is focused.
+
+     CSS + structure here; drag, keyboard, persistence behaviour is wired up
+     by packages/core/src/js/splitter.js. The script auto-initializes on
+     [data-pa-splitter] at DOMContentLoaded.
+
+     Two markup flavours:
+       * 2-pane shorthand — uses --start / --end modifiers and root-level
+         min-start / max-start / default attributes (sections 1–3 below).
+       * N-pane (N ≥ 2) — generic panes with per-pane size / min / max
+         attributes (section 4 below). Use this when you have 3+ panes
+         or want more than one minimizable pane.
+
+     Orientation modifiers (match flexbox direction of the panes):
+       --horizontal   panes side-by-side, vertical gutter (default)
+       --vertical     panes stacked, horizontal gutter
+
+     The splitter takes whatever width/height its parent gives it — make
+     sure the parent has a sized cross axis (height for --horizontal,
+     width for --vertical) or the panes will collapse.
+     ================================ -->
+
+
+<!-- ================================
+     HORIZONTAL SPLIT
+     Side-by-side panes; vertical gutter. Start pane has a 200px floor
+     and 60% ceiling, defaults to 280px, persists under "demo-sidebar".
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--horizontal"
+     data-pa-splitter
+     data-pa-splitter-id="demo-sidebar"
+     data-pa-splitter-min-start="200px"
+     data-pa-splitter-max-start="60%"
+     data-pa-splitter-default="280px"
+     style="height: 400px;">
+    <div class="pa-splitter__pane pa-splitter__pane--start">
+        <!-- Your sidebar / list / nav content -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane pa-splitter__pane--end">
+        <!-- Your main / detail content -->
+    </div>
+</div>
+
+
+<!-- ================================
+     VERTICAL SPLIT
+     Stacked panes; horizontal gutter. Useful for editor + console / log
+     pane patterns.
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--vertical"
+     data-pa-splitter
+     data-pa-splitter-id="demo-console"
+     data-pa-splitter-min-start="80px"
+     data-pa-splitter-max-start="80%"
+     data-pa-splitter-default="60%"
+     style="height: 400px;">
+    <div class="pa-splitter__pane pa-splitter__pane--start">
+        <!-- Editor / primary content -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="horizontal"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane pa-splitter__pane--end">
+        <!-- Console / log / secondary -->
+    </div>
+</div>
+
+
+<!-- ================================
+     SPACED CARDS
+     Set `gap` on the splitter root to put breathing room between the
+     panes and the gutter — the JS subtracts it from the available
+     space so percent constraints still resolve correctly. Override
+     gutter thickness via the --pa-splitter-gutter-size custom property.
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--horizontal"
+     data-pa-splitter
+     style="height: 280px; gap: 1.6rem; --pa-splitter-gutter-size: 1rem;">
+    <div class="pa-splitter__pane pa-splitter__pane--start" style="padding: 0;">
+        <div class="pa-card" style="height: 100%; margin: 0;">…</div>
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane pa-splitter__pane--end" style="padding: 0;">
+        <div class="pa-card" style="height: 100%; margin: 0;">…</div>
+    </div>
+</div>
+
+
+<!-- ================================
+     N-PANE LAYOUT (3 panes — sidebar + content + inspector)
+     Per-pane attributes replace the root-level --start ones. Only the
+     first and last panes honour the minimize marker. Panes without a
+     data-pa-splitter-size share the leftover equally.
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--horizontal"
+     data-pa-splitter
+     data-pa-splitter-id="demo-three-pane"
+     style="height: 400px;">
+    <div class="pa-splitter__pane"
+         data-pa-splitter-size="240px"
+         data-pa-splitter-min="180px"
+         data-pa-splitter-max="360px"
+         data-pa-splitter-minimize>
+        <!-- File tree / nav (minimizable to a left rail) -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane"
+         data-pa-splitter-min="240px">
+        <!-- Editor / main content (fills the rest) -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane"
+         data-pa-splitter-size="280px"
+         data-pa-splitter-min="220px"
+         data-pa-splitter-max="420px"
+         data-pa-splitter-minimize>
+        <!-- Inspector / detail (minimizable to a right rail) -->
+    </div>
+</div>
+
+
+<!-- ================================
+     DATA ATTRIBUTES — root (both modes)
+       data-pa-splitter                     marker; required
+       data-pa-splitter-id                  enables localStorage persistence
+                                            under "pa-splitter:<id>"
+       data-pa-splitter-step                keyboard step in px (default: 10)
+       data-pa-splitter-rail-size           rail width in px (default: 40)
+       data-pa-splitter-minimize-threshold  drag-to-rail snap ratio (default: 0.40)
+
+     DATA ATTRIBUTES — root (legacy 2-pane only)
+       data-pa-splitter-min-start   "200px" or "20%" (default: 0)
+       data-pa-splitter-max-start   "60%" or "800px" (default: available)
+       data-pa-splitter-default     initial size when no saved state
+       data-pa-splitter-minimize    "start" or "end" — opt into rail collapse
+
+     DATA ATTRIBUTES — per pane (N-pane only)
+       data-pa-splitter-size        "240px" or "30%" (default: shared leftover)
+       data-pa-splitter-min         "150px" or "10%" (default: 0)
+       data-pa-splitter-max         "400px" or "50%" (default: available)
+       data-pa-splitter-minimize    marker — only honoured on the first
+                                    and last panes
+
+     CHILD ATTRIBUTES (both modes)
+       data-pa-splitter-toggle      put on any element inside the splitter
+                                    (typically a button in the card header)
+                                    to trigger collapse / restore on click.
+                                    In N-pane mode, toggles the enclosing
+                                    pane (if it's minimizable).
+
+     RAIL-TITLE HOOK (non-card content)
+       Any element marked with `[data-pa-splitter-rail-title]` inside a
+       minimized pane rotates to vertical writing (sideways-rl). Use this
+       when you put plain content (not a `.pa-card`) in a minimizable pane:
+
+         <div class="pa-splitter__pane" data-pa-splitter-minimize>
+           <div data-pa-splitter-rail-title>📁 Files</div>
+           <!-- The rest of your pane content here -->
+         </div>
+
+       Cards adapt automatically — `_cards.scss` rotates the card header
+       inside any `.pa-splitter__pane--minimized` without needing the
+       attribute. No markup change needed for the card snippets above.
+
+     CSS CUSTOMIZATION
+       --pa-splitter-gutter-size    gutter thickness (default: 6px)
+       --pa-splitter-rail-size      rail width when a pane is minimized
+                                    (default: 40px / $splitter-rail-size).
+                                    JS picks this up via getComputedStyle, so
+                                    setting it on `:root` or per-instance via
+                                    inline style overrides the rail width
+                                    without also setting the data-attr.
+       gap                          space between panes and gutter
+                                    (native flexbox property)
+
+     MODIFIER CLASSES
+       pa-splitter--minimize-mirror flip the minimized title 180°
+                                    (transform: scale(-1,-1) on the heading
+                                     inside any `[data-pa-splitter-rail-title]`
+                                     or `.pa-card__header`)
+
+     JAVASCRIPT API (window.PaSplitter)
+       PaSplitter.init(el)          initialize a single element (idempotent)
+       PaSplitter.initAll(root?)    initialize all uninitialized splitters
+                                    under root (default: document)
+     ================================ -->

package/src/scss/_base-css-variables.scss

@@ -47,14 +47,6 @@
   --base-disabled-bg: #{$base-disabled-bg};
   --base-elevated-bg: #{$base-elevated-bg};
 
-  // === Background Colors (legacy aliases) ===
-  --base-surface-1: #{$base-surface-1};
-  --base-surface-2: #{$base-surface-2};
-  --base-surface-3: #{$base-surface-3};
-  --base-surface-inverse: #{$base-surface-inverse};
-  --base-primary-bg: #{$base-primary-bg};
-  --base-primary-bg-hover: #{$base-primary-bg-hover};
-
   // === Border Colors ===
   --base-border-color: #{$base-border-color};
   --base-border: #{$base-border};
@@ -265,6 +257,18 @@
 // ============================================================================
 
 @mixin output-pa-css-variables {
+  // =========================================================================
+  // COLOR SCHEME SIGNAL
+  // Tells the browser whether this scope is light or dark so native UA
+  // elements (scrollbars, form controls) and `light-dark()` resolve
+  // correctly. Drives web components (e.g. <web-multiselect>) that ship
+  // adaptive palettes via `light-dark()`. Override $theme-color-scheme
+  // before importing variables for always-dark themes; for dual-mode
+  // themes leave default `light` here and add `color-scheme: dark;` to
+  // the `.pa-mode-dark` block.
+  // =========================================================================
+  color-scheme: #{$theme-color-scheme};
+
   // =========================================================================
   // CORE COLORS
   // =========================================================================

package/src/scss/_core.scss

@@ -111,6 +111,9 @@
 // Settings Panel
 @use 'core-components/settings-panel' as *;
 
+// Splitter (resizable two-pane container)
+@use 'core-components/splitter' as *;
+
 // Data Display (read-only fields)
 @use 'core-components/data-display' as *;
 

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

@@ -44,6 +44,21 @@
     }
   }
 
+  // Chromeless action button — no fill, no border, just the label / icon.
+  // Used for inline affordances inside dense surfaces (card-header actions,
+  // notification dismiss, toast close, splitter minimize) where a full button
+  // would compete with the content.
+  &--ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--pa-text-secondary);
+
+    &:hover {
+      background-color: var(--pa-surface-hover);
+      color: var(--pa-text-color-1);
+    }
+  }
+
   &--xs {
     height: $btn-height-xs;
     padding: $btn-padding-xs-v $btn-padding-xs-h;

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

@@ -23,8 +23,13 @@
   &__header {
     padding: $card-header-padding-v $card-header-padding-h;
     min-height: $card-header-min-height;
-    border-top-left-radius: $card-border-radius;
-    border-top-right-radius: $card-border-radius;
+    // No own border-top-radius — the card's `overflow: hidden` + outer
+    // border-radius clips the header's square top corners to match. Setting
+    // a radius here makes the header curve at 8px while the card's INNER
+    // corner is ~7px (outer 8px minus the 1px border), leaving a thin
+    // wedge of card background visible at each top corner — most obvious
+    // on coloured variants (--primary/--success/--warning/--danger/--color-*)
+    // where the wedge shows as a white sliver against the variant colour.
     border-bottom: $border-width-base solid var(--pa-border-color);
     background: var(--pa-card-header-bg);
     display: flex;
@@ -95,6 +100,24 @@
       flex-shrink: 0;
     }
 
+    // …unless it's the progressive-overflow variant, which intentionally
+    // shrinks below content so the JS can read `scrollWidth > clientWidth`
+    // as the "needs overflow" signal. Nested under `&__header` so the
+    // selector matches `.pa-card__header .pa-card__actions--overflow` —
+    // the same specificity as the rule above, but later in source order
+    // and explicit on the modifier.
+    .pa-card__actions--overflow {
+      flex-shrink: 1;
+    }
+
+    // When the actions wrapper can shrink (overflow variant), give the title
+    // a floor so it can't be squeezed to 0 — icon + a few chars + ellipsis
+    // stay visible no matter how narrow. `:has()` scopes the override so
+    // ordinary cards keep `min-width: 0` and their full ellipsis range.
+    &:has(> .pa-card__actions--overflow) > .pa-card__title {
+      min-width: 6rem;
+    }
+
     // Buttons in card headers - negative margin to prevent header height growth
     .pa-btn {
       margin-top: -0.25rem;
@@ -232,6 +255,61 @@
     display: flex;
     gap: $spacing-sm;
     align-items: center;
+
+    // Responsive actions — render both the spread button list AND a
+    // collapsed split-button form; a container query on the header swaps
+    // which is visible. Stays CSS-only (no ResizeObserver / layout reads)
+    // but the markup carries both forms.
+    //
+    //   <div class="pa-card__header">
+    //     <div class="pa-card__title">…</div>
+    //     <div class="pa-card__actions pa-card__actions--responsive">
+    //       <div class="pa-card__actions-full">
+    //         …spread buttons…
+    //       </div>
+    //       <div class="pa-card__actions-collapsed">
+    //         <div class="pa-btn-split">…same actions as a menu…</div>
+    //       </div>
+    //     </div>
+    //   </div>
+    //
+    // Container is the header; threshold is $card-actions-collapse-at.
+    // Wired up via :has() (Baseline 2023) so authors don't need a second
+    // modifier on the header.
+    &--responsive {
+      > .pa-card__actions-full {
+        display: flex;
+        gap: $spacing-sm;
+        align-items: center;
+      }
+      > .pa-card__actions-collapsed {
+        display: none;
+      }
+    }
+
+    // Progressive overflow variant — driven by card-actions-overflow.js.
+    // `min-width: 0` lets flex shrink the wrapper below its content; with
+    // `overflow: hidden` the wrapper clips its children when narrow, which
+    // is what makes `scrollWidth > clientWidth` a reliable overflow signal
+    // for the JS. Buttons themselves get `flex-shrink: 0` so they don't
+    // squeeze to fit — they either fit fully or get moved to the menu.
+    &--overflow {
+      min-width: 0;
+      overflow: hidden;
+
+      > * {
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  // Enable the container query on any header that contains a responsive
+  // actions wrapper. Container query rule itself is emitted at the bottom
+  // of this file (outside the .pa-card block) since `@container` can't
+  // hide inside an arbitrarily-nested selector cleanly.
+  &__header:has(> .pa-card__actions--responsive) {
+    container-type: inline-size;
+    container-name: pa-card-header;
   }
 
   &__meta {
@@ -240,11 +318,15 @@
   }
 
   // Card variants
+  // Coloured variants override the header's border-bottom-color to match the
+  // variant — otherwise the default light-gray hairline shows as a visible
+  // strip against the coloured surroundings (header bg + card border above).
   &--primary {
     border-color: var(--pa-accent);
 
     .pa-card__header {
       background-color: var(--pa-accent);
+      border-bottom-color: var(--pa-accent);
       color: var(--pa-btn-primary-text);
 
       h1,
@@ -263,6 +345,7 @@
 
     .pa-card__header {
       background-color: var(--pa-success-bg);
+      border-bottom-color: var(--pa-success-bg);
       color: var(--pa-btn-success-text);
 
       h1,
@@ -281,6 +364,7 @@
 
     .pa-card__header {
       background-color: var(--pa-warning-bg);
+      border-bottom-color: var(--pa-warning-bg);
       color: var(--pa-btn-warning-text);
 
       h1,
@@ -299,6 +383,7 @@
 
     .pa-card__header {
       background-color: var(--pa-danger-bg);
+      border-bottom-color: var(--pa-danger-bg);
       color: var(--pa-btn-danger-text);
 
       h1,
@@ -366,6 +451,7 @@
 
       .pa-card__header {
         background-color: var(--pa-color-#{$i});
+        border-bottom-color: var(--pa-color-#{$i});
         color: var(--pa-color-#{$i}-text);
 
         h1,
@@ -486,3 +572,79 @@ a.pa-card {
   border-bottom: $border-width-medium solid var(--pa-accent);
   padding-bottom: $spacing-sm;
 }
+
+// Responsive card actions — container query for the spread/collapsed swap.
+// Container context set by `.pa-card__header:has(> .pa-card__actions--responsive)`
+// above. Threshold needs explicit interpolation in `@container` (the Sass
+// auto-interpolation that works in `@media` doesn't apply here).
+@container pa-card-header (max-width: #{$card-actions-collapse-at}) {
+  .pa-card__actions--responsive {
+    > .pa-card__actions-full {
+      display: none;
+    }
+    > .pa-card__actions-collapsed {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+// Card adaptation inside a minimized splitter pane.
+// Lives here (not in `_splitter.scss`) so the splitter stays unaware of card
+// internals — the rotation hook on the splitter side is `[data-pa-splitter-rail-title]`
+// and this rule applies that attribute's contract to the card header.
+//
+// Layout: pa-card already has `height: 100%` etc., we just hide body/footer,
+// promote the header to fill the rail, and pin the title to the top.
+.pa-splitter__pane--minimized > .pa-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+
+  > .pa-card__body,
+  > .pa-card__footer {
+    display: none;
+  }
+
+  > .pa-card__header {
+    flex: 1 1 auto;
+    // Pin title to the rail's top (inline-start in sideways-rl writing mode).
+    justify-content: flex-start;
+    writing-mode: sideways-rl;
+
+    // Icons reset to natural orientation (descendant combinator covers both
+    // flat markup and the BEM `pa-card__title > i` nesting).
+    i,
+    svg {
+      writing-mode: initial;
+    }
+
+    // Vertically align the icon between expanded and minimized states.
+    // In expanded mode, `align-items: center` centers the title vertically
+    // (icon center at header-min-height / 2 from top). In minimized mode,
+    // `justify-content: flex-start` pins the title to the rail's top edge.
+    // Push the title down by the difference so the icon sits at the same
+    // visual y-position in both states — no "jump" when toggling.
+    .pa-card__title {
+      padding-top: calc((#{$card-header-min-height} - #{$font-size-base}) / 2 - #{$card-header-padding-v});
+    }
+
+    // Hide interactive controls inside the header — they'd be sideways and
+    // unreadable. The list here is intentional: cards know their own header
+    // contents better than the splitter ever could.
+    .pa-btn,
+    .pa-btn-group,
+    button,
+    input {
+      display: none;
+    }
+  }
+}
+
+// Mirror modifier — when the splitter root carries `pa-splitter--minimize-mirror`,
+// the card heading flips 180° (matches the generic mirror behaviour, scoped
+// to the card title heading).
+.pa-splitter--minimize-mirror .pa-splitter__pane--minimized > .pa-card > .pa-card__header :is(h1, h2, h3, h4, h5, h6) {
+  transform: scale(-1, -1);
+}

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

@@ -162,20 +162,12 @@
     white-space: nowrap;
   }
 
-  &__role {
-    display: inline-block;
-    padding: $btn-padding-v $btn-padding-h;
-    // Tinted bg derived from the header's name color so it reads on any
-    // header — dark or light. Fallback kept for older browsers.
-    background-color: var(--pa-accent-light);
-    background-color: color-mix(in srgb, var(--pa-header-profile-name-color) 15%, transparent);
-    color: var(--pa-header-profile-name-color);
-    font-size: $font-size-xs;
-    font-weight: $font-weight-medium;
-    border-radius: var(--pa-border-radius);
-    text-transform: uppercase;
-    letter-spacing: $profile-role-letter-spacing;
-  }
+  // Role badge: use the standard `.pa-badge` component in markup instead of
+  // a custom `__role` element. Previously this declared its own bg/colour/
+  // padding/uppercase styling — duplicating badge work that already existed
+  // in the framework, and coupling to `--pa-header-profile-name-color` which
+  // went invisible inside dark-mode panel bodies. Snippets and demo markup
+  // updated accordingly in 2.9.0.
 
   &__close {
     position: absolute;