@keenmate/pure-admin-core 1.0.0-rc02 → 1.0.0-rc03

package/README.md

@@ -45,18 +45,6 @@ $btn-primary-bg: #your-button-color;
 @import '@keenmate/pure-admin-core/src/scss/main';
 ```
 
-### JavaScript Utilities
-
-```js
-import { createToast, openModal, closeModal } from '@pure-admin/core';
-
-// Show a success toast
-createToast('top-right', 'success', 'Success!', 'Operation completed');
-
-// Open a modal
-openModal('myModal');
-```
-
 ## Using HTML Snippets
 
 The `snippets/` directory contains clean HTML patterns for all components:
@@ -64,11 +52,13 @@ The `snippets/` directory contains clean HTML patterns for all components:
 - `alerts.html` - Alert components
 - `badges.html` - Badge and composite badge patterns
 - `buttons.html` - All button variants and patterns
+- `callouts.html` - Documentation-style callouts with left border accent
 - `cards.html` - Card layouts
 - `checkbox-lists.html` - Checkbox list patterns
 - `code.html` - Code display blocks
 - `command-palette.html` - Command palette (Ctrl+K)
 - `comparison.html` - Comparison tables
+- `customization.html` - Theme customization examples
 - `forms.html` - Form elements and validation
 - `grid.html` - Grid system layouts
 - `layout.html` - Page layout structure
@@ -83,25 +73,14 @@ The `snippets/` directory contains clean HTML patterns for all components:
 - `timeline.html` - Timeline components
 - `toasts.html` - Toast notifications
 - `tooltips.html` - Tooltips and popovers
+- `typography.html` - Typography styles and headings
 - `utilities.html` - Utility classes
 - `virtual-scroll.html` - Virtual scrolling
+- `web-daterangepicker.html` - Date range picker web component
+- `web-multiselect.html` - Multiselect web component
 
 These snippets are the canonical reference for building framework components in any frontend framework (React, Vue, Svelte, etc.).
 
-## Framework Integration
-
-### Svelte
-
-See `@pure-admin/svelte` package for Svelte component wrappers.
-
-### React
-
-See `@pure-admin/react` package for React component wrappers.
-
-### Vue
-
-See `@pure-admin/vue` package for Vue component wrappers.
-
 ## Themes
 
 Themes are available as separate npm packages:
@@ -165,6 +144,14 @@ The Dark theme supports color accent variants:
 - `.pa-alert--primary/success/danger/warning/info` - Variants
 - `.pa-alert--dismissible` - Closeable alerts
 
+### Callouts
+- `.pa-callout` - Base callout (documentation-style with left border)
+- `.pa-callout--primary/secondary/success/danger/warning/info` - Variants
+- `.pa-callout--sm/lg` - Sizes
+- `.pa-callout__icon` - Icon container
+- `.pa-callout__heading` - Callout heading
+- `.pa-callout__content` - Content wrapper (for icon + text layout)
+
 ### Modals
 - `.pa-modal` - Base modal
 - `.pa-modal__container--sm/md/lg/xl/xxl` - Sizes
@@ -188,6 +175,7 @@ The Dark theme supports color accent variants:
 - `.pa-profile-panel` - Slide-in profile panel
 - `.pa-profile-panel--open` - Open state
 - `.pa-profile-panel__header` - Header with avatar and user info
+- `.pa-profile-panel__header--no-avatar` - Header variant without avatar (for corporate apps)
 - `.pa-profile-panel__tabs` - Tab navigation (Profile/Favorites)
 - `.pa-profile-panel__nav-item` - Navigation link
 - `.pa-profile-panel__favorite-item` - Favorite link (with remove button)

package/dist/css/main.css

@@ -872,26 +872,82 @@
   white-space: nowrap !important;
 }
 
+.w-5 {
+  width: 5% !important;
+}
+
+.w-10 {
+  width: 10% !important;
+}
+
+.w-15 {
+  width: 15% !important;
+}
+
+.w-20 {
+  width: 20% !important;
+}
+
 .w-25 {
   width: 25% !important;
 }
 
-.w-33 {
-  width: 33.333333% !important;
+.w-30 {
+  width: 30% !important;
+}
+
+.w-35 {
+  width: 35% !important;
+}
+
+.w-40 {
+  width: 40% !important;
+}
+
+.w-45 {
+  width: 45% !important;
 }
 
 .w-50 {
   width: 50% !important;
 }
 
-.w-66 {
-  width: 66.666667% !important;
+.w-55 {
+  width: 55% !important;
+}
+
+.w-60 {
+  width: 60% !important;
+}
+
+.w-65 {
+  width: 65% !important;
+}
+
+.w-70 {
+  width: 70% !important;
 }
 
 .w-75 {
   width: 75% !important;
 }
 
+.w-80 {
+  width: 80% !important;
+}
+
+.w-85 {
+  width: 85% !important;
+}
+
+.w-90 {
+  width: 90% !important;
+}
+
+.w-95 {
+  width: 95% !important;
+}
+
 .w-100 {
   width: 100% !important;
 }
@@ -900,20 +956,20 @@
   width: auto !important;
 }
 
-.mw-25 {
-  min-width: 25% !important;
+.w-1-3 {
+  width: 33.333333% !important;
 }
 
-.mw-33 {
-  min-width: 33.333333% !important;
+.w-2-3 {
+  width: 66.666667% !important;
 }
 
-.mw-50 {
-  min-width: 50% !important;
+.mw-25 {
+  min-width: 25% !important;
 }
 
-.mw-66 {
-  min-width: 66.666667% !important;
+.mw-50 {
+  min-width: 50% !important;
 }
 
 .mw-75 {
@@ -928,26 +984,24 @@
   min-width: auto !important;
 }
 
+.mw-1-3 {
+  min-width: 33.333333% !important;
+}
+
+.mw-2-3 {
+  min-width: 66.666667% !important;
+}
+
 .w-25-fixed {
   min-width: 25% !important;
   width: 25% !important;
 }
 
-.w-33-fixed {
-  min-width: 33.333333% !important;
-  width: 33.333333% !important;
-}
-
 .w-50-fixed {
   min-width: 50% !important;
   width: 50% !important;
 }
 
-.w-66-fixed {
-  min-width: 66.666667% !important;
-  width: 66.666667% !important;
-}
-
 .w-75-fixed {
   min-width: 75% !important;
   width: 75% !important;
@@ -958,6 +1012,16 @@
   width: 100% !important;
 }
 
+.w-1-3-fixed {
+  min-width: 33.333333% !important;
+  width: 33.333333% !important;
+}
+
+.w-2-3-fixed {
+  min-width: 66.666667% !important;
+  width: 66.666667% !important;
+}
+
 .h-25 {
   height: 25% !important;
 }
@@ -1038,6 +1102,78 @@
   border-left: 0 !important;
 }
 
+.border-solid {
+  border-style: solid !important;
+}
+
+.border-dashed {
+  border-style: dashed !important;
+}
+
+.border-dotted {
+  border-style: dotted !important;
+}
+
+.border-none {
+  border-style: none !important;
+}
+
+.text-primary {
+  color: var(--pa-accent) !important;
+}
+
+.text-success {
+  color: var(--pa-success-text) !important;
+}
+
+.text-danger {
+  color: var(--pa-danger-text) !important;
+}
+
+.text-warning {
+  color: var(--pa-warning-text) !important;
+}
+
+.text-info {
+  color: var(--pa-info-text) !important;
+}
+
+.text-color-1 {
+  color: var(--pa-color-1) !important;
+}
+
+.text-color-2 {
+  color: var(--pa-color-2) !important;
+}
+
+.text-color-3 {
+  color: var(--pa-color-3) !important;
+}
+
+.text-color-4 {
+  color: var(--pa-color-4) !important;
+}
+
+.text-color-5 {
+  color: var(--pa-color-5) !important;
+}
+
+.text-color-6 {
+  color: var(--pa-color-6) !important;
+}
+
+.text-color-7 {
+  color: var(--pa-color-7) !important;
+}
+
+.text-color-8 {
+  color: var(--pa-color-8) !important;
+}
+
+.text-color-9 {
+  color: var(--pa-color-9) !important;
+}
+
 .rounded {
   border-radius: var(--border-radius) !important;
 }
@@ -6283,6 +6419,112 @@ a.pa-card p {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
+/* ========================================
+   Reset and Base Styles
+   ======================================== */
+/* ========================================
+   Callout Components
+   Documentation-style callouts with left border accent
+   For tips, notes, warnings in content areas
+   ======================================== */
+.pa-callout {
+  position: relative;
+  padding: 1.2rem 1rem;
+  margin-bottom: 1.6rem;
+  border-left: 0.4rem solid var(--pa-border-color);
+  border-radius: 4px;
+  font-size: 1.4rem;
+  background-color: var(--pa-card-bg);
+}
+.pa-card__body .pa-callout:first-child {
+  margin-top: 0;
+}
+.pa-card__body .pa-callout:last-child {
+  margin-bottom: 0;
+}
+.pa-callout--primary {
+  border-left-color: var(--pa-accent);
+  background-color: rgba(0, 123, 255, 0.08);
+}
+.pa-callout--secondary {
+  border-left-color: var(--pa-text-secondary);
+  background-color: color-mix(in srgb, var(--pa-text-secondary) 5%, transparent);
+}
+.pa-callout--success {
+  border-left-color: var(--pa-success-bg);
+  background-color: var(--pa-success-bg-subtle);
+}
+.pa-callout--danger {
+  border-left-color: var(--pa-danger-bg);
+  background-color: var(--pa-danger-bg-subtle);
+}
+.pa-callout--warning {
+  border-left-color: var(--pa-warning-bg);
+  background-color: var(--pa-warning-bg-subtle);
+}
+.pa-callout--info {
+  border-left-color: var(--pa-info-bg);
+  background-color: var(--pa-info-bg-subtle);
+}
+.pa-callout--sm {
+  padding: 0.8rem 1.2rem;
+  font-size: 1.2rem;
+}
+.pa-callout--lg {
+  padding: 2.4rem 3.2rem;
+  font-size: 1.6rem;
+}
+.pa-callout__icon {
+  float: left;
+  margin-right: 0.8rem;
+  font-size: 1.8rem;
+  line-height: 1;
+}
+.pa-callout__heading {
+  margin: 0 0 0.8rem 0;
+  font-size: 1.6rem;
+  font-weight: 600;
+}
+.pa-callout__content::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.pa-callout > *:last-child {
+  margin-bottom: 0;
+}
+.pa-callout p {
+  margin: 0 0 0.8rem 0;
+}
+.pa-callout p:last-child {
+  margin-bottom: 0;
+}
+.pa-callout ul, .pa-callout ol {
+  margin: 0.8rem 0;
+  padding-left: 2.4rem;
+}
+.pa-callout ul:last-child, .pa-callout ol:last-child {
+  margin-bottom: 0;
+}
+.pa-callout code {
+  background-color: rgba(0, 0, 0, 0.08);
+  padding: 0.1em 0.3em;
+  border-radius: 2px;
+  font-size: 0.9em;
+}
+.pa-callout a {
+  color: inherit;
+  text-decoration: underline;
+  font-weight: 500;
+}
+.pa-callout a:hover {
+  text-decoration: none;
+}
+.pa-callout h1, .pa-callout h2, .pa-callout h3, .pa-callout h4, .pa-callout h5, .pa-callout h6 {
+  color: inherit;
+  margin-top: 0;
+}
+
 /* ========================================
    Form Components
    Form groups, inputs, selects, textareas, checkboxes, radio buttons, states
@@ -8632,18 +8874,6 @@ web-daterangepicker {
   }
 }
 
-.text-success {
-  color: var(--pa-success-bg);
-}
-
-.text-danger {
-  color: var(--pa-danger-bg);
-}
-
-.text-warning {
-  color: var(--pa-warning-bg);
-}
-
 /* ========================================
    Reset and Base Styles
    ======================================== */
@@ -9091,12 +9321,15 @@ code {
 .pa-profile-panel__header {
   padding: 2.4rem;
   background-color: var(--pa-header-bg);
-  border-bottom: 1px solid var(--pa-border-color);
+  border-bottom: 1px solid var(--pa-text-primary);
   display: flex;
   align-items: flex-start;
   gap: 1.6rem;
   position: relative;
 }
+.pa-profile-panel__header--no-avatar .pa-profile-panel__avatar {
+  display: none;
+}
 .pa-profile-panel__avatar {
   width: 6.4rem;
   height: 6.4rem;
@@ -9114,12 +9347,16 @@ code {
 .pa-profile-panel__info {
   flex: 1;
   min-width: 0;
+  padding-right: 3.2rem;
 }
 .pa-profile-panel__name {
   margin: 0 0 0.4rem 0;
   font-size: 1.8rem;
   font-weight: 600;
   color: var(--pa-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .pa-profile-panel__email {
   margin: 0 0 0.8rem 0;
@@ -11592,6 +11829,170 @@ html.font-size-4xl {
   line-height: 1.8;
 }
 
+.gap-0 {
+  gap: 0;
+}
+
+.gap-xs {
+  gap: 0.4rem;
+}
+
+.gap-sm {
+  gap: 0.8rem;
+}
+
+.gap-md {
+  gap: 1.2rem;
+}
+
+.gap-base {
+  gap: 1.6rem;
+}
+
+.gap-lg {
+  gap: 2.4rem;
+}
+
+.gap-xl {
+  gap: 3.2rem;
+}
+
+.gap-2xl {
+  gap: 4.8rem;
+}
+
+.gap-1 {
+  gap: 0.1rem;
+}
+
+.gap-2 {
+  gap: 0.2rem;
+}
+
+.gap-3 {
+  gap: 0.3rem;
+}
+
+.gap-4 {
+  gap: 0.4rem;
+}
+
+.gap-5 {
+  gap: 0.5rem;
+}
+
+.gap-6 {
+  gap: 0.6rem;
+}
+
+.gap-8 {
+  gap: 0.8rem;
+}
+
+.gap-10 {
+  gap: 1rem;
+}
+
+.gap-12 {
+  gap: 1.2rem;
+}
+
+.gap-15 {
+  gap: 1.5rem;
+}
+
+.gap-20 {
+  gap: 2rem;
+}
+
+.row-gap-0 {
+  row-gap: 0;
+}
+
+.row-gap-xs {
+  row-gap: 0.4rem;
+}
+
+.row-gap-sm {
+  row-gap: 0.8rem;
+}
+
+.row-gap-md {
+  row-gap: 1.2rem;
+}
+
+.row-gap-base {
+  row-gap: 1.6rem;
+}
+
+.row-gap-lg {
+  row-gap: 2.4rem;
+}
+
+.column-gap-0 {
+  column-gap: 0;
+}
+
+.column-gap-xs {
+  column-gap: 0.4rem;
+}
+
+.column-gap-sm {
+  column-gap: 0.8rem;
+}
+
+.column-gap-md {
+  column-gap: 1.2rem;
+}
+
+.column-gap-base {
+  column-gap: 1.6rem;
+}
+
+.column-gap-lg {
+  column-gap: 2.4rem;
+}
+
+.text-2xs {
+  font-size: 1rem;
+}
+
+.text-xs {
+  font-size: 1.2rem;
+}
+
+.text-sm {
+  font-size: 1.4rem;
+}
+
+.text-md {
+  font-size: 1.5rem;
+}
+
+.text-base {
+  font-size: 1.6rem;
+}
+
+.text-lg {
+  font-size: 1.8rem;
+}
+
+.text-xl {
+  font-size: 2rem;
+}
+
+.text-2xl {
+  font-size: 2.4rem;
+}
+
+.text-3xl {
+  font-size: 2.8rem;
+}
+
+.text-4xl {
+  font-size: 3.2rem;
+}
+
 .component-showcase {
   display: flex;
   flex-wrap: wrap;

package/package.json

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

package/snippets/callouts.html

@@ -0,0 +1,129 @@
+<!-- ========================================
+   Callout Components
+   Documentation-style callouts with left border accent
+   ======================================== -->
+
+<!-- BASIC CALLOUTS -->
+
+<!-- Info Callout -->
+<div class="pa-callout pa-callout--info">
+  <strong>Note:</strong> This is an informational callout for documentation tips and notes.
+</div>
+
+<!-- Success Callout -->
+<div class="pa-callout pa-callout--success">
+  <strong>Success:</strong> Operation completed successfully. Your changes have been saved.
+</div>
+
+<!-- Warning Callout -->
+<div class="pa-callout pa-callout--warning">
+  <strong>Warning:</strong> This action cannot be undone. Please proceed with caution.
+</div>
+
+<!-- Danger Callout -->
+<div class="pa-callout pa-callout--danger">
+  <strong>Important:</strong> This feature is deprecated and will be removed in the next version.
+</div>
+
+<!-- Primary Callout -->
+<div class="pa-callout pa-callout--primary">
+  <strong>Pro Tip:</strong> You can use keyboard shortcuts to speed up your workflow.
+</div>
+
+<!-- Secondary Callout -->
+<div class="pa-callout pa-callout--secondary">
+  <strong>Note:</strong> This is a secondary callout with neutral styling.
+</div>
+
+<!-- ========================================
+   CALLOUTS WITH ICONS
+   ======================================== -->
+
+<!-- Info with Icon -->
+<div class="pa-callout pa-callout--info">
+  <span class="pa-callout__icon">💡</span>
+  <div class="pa-callout__content">
+    <div class="pa-callout__heading">Did you know?</div>
+    <p>You can hover over any element to see its tooltip. Tooltips provide additional context without cluttering the interface.</p>
+  </div>
+</div>
+
+<!-- Warning with Icon -->
+<div class="pa-callout pa-callout--warning">
+  <span class="pa-callout__icon">⚠️</span>
+  <div class="pa-callout__content">
+    <div class="pa-callout__heading">Breaking Change</div>
+    <p>The <code>getData()</code> method now returns a Promise. Update your code to use <code>await</code> or <code>.then()</code>.</p>
+  </div>
+</div>
+
+<!-- Danger with Icon -->
+<div class="pa-callout pa-callout--danger">
+  <span class="pa-callout__icon">🚨</span>
+  <div class="pa-callout__content">
+    <div class="pa-callout__heading">Security Notice</div>
+    <p>Never commit API keys or secrets to version control. Use environment variables instead.</p>
+  </div>
+</div>
+
+<!-- Success with Icon -->
+<div class="pa-callout pa-callout--success">
+  <span class="pa-callout__icon">✅</span>
+  <div class="pa-callout__content">
+    <div class="pa-callout__heading">Best Practice</div>
+    <p>Always validate user input on both client and server side for maximum security.</p>
+  </div>
+</div>
+
+<!-- ========================================
+   CALLOUT SIZES
+   ======================================== -->
+
+<!-- Small Callout -->
+<div class="pa-callout pa-callout--info pa-callout--sm">
+  <strong>Note:</strong> This is a small callout for compact spaces.
+</div>
+
+<!-- Default Callout -->
+<div class="pa-callout pa-callout--info">
+  <strong>Note:</strong> This is a default-sized callout.
+</div>
+
+<!-- Large Callout -->
+<div class="pa-callout pa-callout--info pa-callout--lg">
+  <strong>Note:</strong> This is a large callout for prominent notices.
+</div>
+
+<!-- ========================================
+   CALLOUTS WITH LISTS
+   ======================================== -->
+
+<!-- Callout with Unordered List -->
+<div class="pa-callout pa-callout--info">
+  <div class="pa-callout__heading">Requirements</div>
+  <ul>
+    <li>Node.js version 16 or higher</li>
+    <li>npm version 8 or higher</li>
+    <li>A modern web browser</li>
+  </ul>
+</div>
+
+<!-- Callout with Ordered List -->
+<div class="pa-callout pa-callout--warning">
+  <div class="pa-callout__heading">Migration Steps</div>
+  <ol>
+    <li>Backup your database</li>
+    <li>Update dependencies with <code>npm update</code></li>
+    <li>Run migrations with <code>npm run migrate</code></li>
+    <li>Verify the application starts correctly</li>
+  </ol>
+</div>
+
+<!-- ========================================
+   CALLOUTS WITH CODE
+   ======================================== -->
+
+<!-- Callout with Inline Code -->
+<div class="pa-callout pa-callout--primary">
+  <strong>Tip:</strong> Use <code>console.table()</code> instead of <code>console.log()</code> for arrays and objects to get a nicely formatted table output.
+</div>

package/snippets/profile.html

@@ -25,6 +25,7 @@
      ================================ -->
 
 <!-- Complete Profile Panel (place before closing </body> tag) -->
+<!-- Note: Use title attributes on name/email for tooltips when text may be truncated -->
 <div class="pa-profile-panel" id="profilePanel">
     <div class="pa-profile-panel__overlay" onclick="closeProfilePanel()"></div>
     <div class="pa-profile-panel__content">
@@ -33,8 +34,8 @@
                 <span class="pa-profile-panel__avatar-icon">👤</span>
             </div>
             <div class="pa-profile-panel__info">
-                <h3 class="pa-profile-panel__name">John Doe</h3>
-                <p class="pa-profile-panel__email">john.doe@company.com</p>
+                <h3 class="pa-profile-panel__name" title="John Doe">John Doe</h3>
+                <p class="pa-profile-panel__email" title="john.doe@company.com">john.doe@company.com</p>
                 <span class="pa-profile-panel__role">Administrator</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
@@ -81,6 +82,48 @@
 </div>
 
 
+<!-- ================================
+     PROFILE PANEL - NO AVATAR (CORPORATE)
+     For apps without user photos
+     ================================ -->
+
+<!-- Profile Panel without avatar (for corporate apps that don't have user photos) -->
+<!-- Add --no-avatar modifier to header to hide the avatar -->
+<div class="pa-profile-panel" id="profilePanel">
+    <div class="pa-profile-panel__overlay" onclick="closeProfilePanel()"></div>
+    <div class="pa-profile-panel__content">
+        <div class="pa-profile-panel__header pa-profile-panel__header--no-avatar">
+            <div class="pa-profile-panel__avatar">
+                <span class="pa-profile-panel__avatar-icon">👤</span>
+            </div>
+            <div class="pa-profile-panel__info">
+                <h3 class="pa-profile-panel__name" title="John Doe">John Doe</h3>
+                <p class="pa-profile-panel__email" title="john.doe@company.com">john.doe@company.com</p>
+                <span class="pa-profile-panel__role">Administrator</span>
+            </div>
+            <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
+                ✕
+            </button>
+        </div>
+
+        <div class="pa-profile-panel__body">
+            <nav class="pa-profile-panel__nav">
+                <ul>
+                    <li><a href="#profile" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon">👤</span>
+                        Profile Settings
+                    </a></li>
+                    <li><a href="#logout" class="pa-profile-panel__nav-item">
+                        <span class="pa-profile-panel__nav-icon">🚪</span>
+                        Sign Out
+                    </a></li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</div>
+
+
 <!-- ================================
      PROFILE PANEL - WITH TABS (PROFILE + FAVORITES)
      ================================ -->
@@ -383,11 +426,12 @@ PROFILE PANEL STRUCTURE:
 
 PANEL HEADER:
 - .pa-profile-panel__header - Header container
+- .pa-profile-panel__header--no-avatar - Modifier to hide avatar (for corporate apps)
 - .pa-profile-panel__avatar - Avatar container
 - .pa-profile-panel__avatar-icon - Avatar icon/image
 - .pa-profile-panel__info - User info container
-- .pa-profile-panel__name - User name
-- .pa-profile-panel__email - User email
+- .pa-profile-panel__name - User name (truncates with ellipsis, add title for tooltip)
+- .pa-profile-panel__email - User email (truncates with ellipsis, add title for tooltip)
 - .pa-profile-panel__role - User role badge
 - .pa-profile-panel__close - Close button
 

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

@@ -405,4 +405,18 @@
   --pa-multiselect-option-hover-bg: #{$multiselect-option-hover-bg};
   --pa-multiselect-pill-bg: #{$multiselect-pill-bg};
   --pa-multiselect-pill-border: #{$multiselect-pill-border};
+
+  // =========================================================================
+  // CUSTOM THEME COLORS (1-9)
+  // Themes can override $color-1 through $color-9 to define branded colors
+  // =========================================================================
+  --pa-color-1: #{$color-1};
+  --pa-color-2: #{$color-2};
+  --pa-color-3: #{$color-3};
+  --pa-color-4: #{$color-4};
+  --pa-color-5: #{$color-5};
+  --pa-color-6: #{$color-6};
+  --pa-color-7: #{$color-7};
+  --pa-color-8: #{$color-8};
+  --pa-color-9: #{$color-9};
 }

package/src/scss/_core.scss

@@ -47,6 +47,9 @@
 // Alert components
 @use 'core-components/alerts' as *;
 
+// Callout components (documentation-style)
+@use 'core-components/callouts' as *;
+
 // Form elements
 @use 'core-components/forms' as *;
 

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

@@ -0,0 +1,139 @@
+/* ========================================
+   Callout Components
+   Documentation-style callouts with left border accent
+   For tips, notes, warnings in content areas
+   ======================================== */
+@use '../variables' as *;
+
+// Callout base
+.pa-callout {
+  position: relative;
+  padding: $card-footer-padding-v $card-footer-padding-h;
+  margin-bottom: $spacing-base;
+  border-left: $callout-border-width solid var(--pa-border-color);
+  border-radius: $border-radius;
+  font-size: $font-size-sm;
+  background-color: var(--pa-card-bg);
+
+  // Remove margins when first/last child in card body
+  .pa-card__body &:first-child {
+    margin-top: 0;
+  }
+  .pa-card__body &:last-child {
+    margin-bottom: 0;
+  }
+
+  // Callout variants
+  &--primary {
+    border-left-color: var(--pa-accent);
+    background-color: rgba($accent-color, $opacity-subtle);
+  }
+
+  &--secondary {
+    border-left-color: var(--pa-text-secondary);
+    background-color: color-mix(in srgb, var(--pa-text-secondary) 5%, transparent);
+  }
+
+  &--success {
+    border-left-color: var(--pa-success-bg);
+    background-color: var(--pa-success-bg-subtle);
+  }
+
+  &--danger {
+    border-left-color: var(--pa-danger-bg);
+    background-color: var(--pa-danger-bg-subtle);
+  }
+
+  &--warning {
+    border-left-color: var(--pa-warning-bg);
+    background-color: var(--pa-warning-bg-subtle);
+  }
+
+  &--info {
+    border-left-color: var(--pa-info-bg);
+    background-color: var(--pa-info-bg-subtle);
+  }
+
+  // Callout sizes
+  &--sm {
+    padding: $spacing-sm $spacing-md;
+    font-size: $font-size-xs;
+  }
+
+  &--lg {
+    padding: $spacing-lg $spacing-xl;
+    font-size: $font-size-base;
+  }
+
+  // Callout components
+  &__icon {
+    float: left;
+    margin-right: $spacing-sm;
+    font-size: $font-size-lg;
+    line-height: 1;
+  }
+
+  &__heading {
+    margin: 0 0 $spacing-sm 0;
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+  }
+
+  &__content {
+    // Clearfix for floated icon
+    &::after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+  }
+
+  // Remove margin from last child
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  // Paragraphs inside callouts
+  p {
+    margin: 0 0 $spacing-sm 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Lists inside callouts
+  ul, ol {
+    margin: $spacing-sm 0;
+    padding-left: $spacing-lg;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Code inside callouts
+  code {
+    background-color: rgba(0, 0, 0, $opacity-subtle);
+    padding: 0.1em 0.3em;
+    border-radius: $border-radius-sm;
+    font-size: 0.9em;
+  }
+
+  // Links styling
+  a {
+    color: inherit;
+    text-decoration: underline;
+    font-weight: $font-weight-medium;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Headings inside callouts
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+    margin-top: 0;
+  }
+}

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

@@ -88,11 +88,18 @@
   &__header {
     padding: $spacing-lg;
     background-color: var(--pa-header-bg);
-    border-bottom: $border-width-base solid var(--pa-border-color);
+    border-bottom: 1px solid var(--pa-text-primary);
     display: flex;
     align-items: flex-start;
     gap: $spacing-base;
     position: relative;
+
+    // No-avatar variant for corporate apps without user photos
+    &--no-avatar {
+      .pa-profile-panel__avatar {
+        display: none;
+      }
+    }
   }
 
   &__avatar {
@@ -114,6 +121,7 @@
   &__info {
     flex: 1;
     min-width: 0;
+    padding-right: $profile-close-size; // Space for close button
   }
 
   &__name {
@@ -121,6 +129,10 @@
     font-size: $font-size-lg;
     font-weight: $font-weight-semibold;
     color: var(--pa-text-primary);
+    // Truncate long names
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__email {

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

@@ -540,16 +540,3 @@
   }
 }
 
-// Text utilities for tables
-.text-success {
-  color: var(--pa-success-bg);
-}
-
-.text-danger {
-  color: var(--pa-danger-bg);
-}
-
-.text-warning {
-  color: var(--pa-warning-bg);
-}
-

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

@@ -195,6 +195,59 @@ html.font-size-4xl {
   }
 }
 
+// Gap utilities (10px rem base)
+// Semantic gap classes using spacing variables
+.gap-0 { gap: 0; }
+.gap-xs { gap: $spacing-xs; }     // 0.25rem = 2.5px
+.gap-sm { gap: $spacing-sm; }     // 0.5rem = 5px
+.gap-md { gap: $spacing-md; }     // 0.75rem = 7.5px
+.gap-base { gap: $spacing-base; } // 1rem = 10px
+.gap-lg { gap: $spacing-lg; }     // 1.5rem = 15px
+.gap-xl { gap: $spacing-xl; }     // 2rem = 20px
+.gap-2xl { gap: $spacing-2xl; }   // 3rem = 30px
+
+// Numeric gap classes (in 10px rem units)
+.gap-1 { gap: 0.1rem; }  // 1px
+.gap-2 { gap: 0.2rem; }  // 2px
+.gap-3 { gap: 0.3rem; }  // 3px
+.gap-4 { gap: 0.4rem; }  // 4px
+.gap-5 { gap: 0.5rem; }  // 5px
+.gap-6 { gap: 0.6rem; }  // 6px
+.gap-8 { gap: 0.8rem; }  // 8px
+.gap-10 { gap: 1rem; }   // 10px
+.gap-12 { gap: 1.2rem; } // 12px
+.gap-15 { gap: 1.5rem; } // 15px
+.gap-20 { gap: 2rem; }   // 20px
+
+// Row gap utilities
+.row-gap-0 { row-gap: 0; }
+.row-gap-xs { row-gap: $spacing-xs; }
+.row-gap-sm { row-gap: $spacing-sm; }
+.row-gap-md { row-gap: $spacing-md; }
+.row-gap-base { row-gap: $spacing-base; }
+.row-gap-lg { row-gap: $spacing-lg; }
+
+// Column gap utilities
+.column-gap-0 { column-gap: 0; }
+.column-gap-xs { column-gap: $spacing-xs; }
+.column-gap-sm { column-gap: $spacing-sm; }
+.column-gap-md { column-gap: $spacing-md; }
+.column-gap-base { column-gap: $spacing-base; }
+.column-gap-lg { column-gap: $spacing-lg; }
+
+// Font-size utilities (10px rem base)
+// Direct font-size classes using typography variables
+.text-2xs { font-size: $font-size-2xs; }   // 1rem = 10px
+.text-xs  { font-size: $font-size-xs; }    // 1.2rem = 12px
+.text-sm  { font-size: $font-size-sm; }    // 1.4rem = 14px
+.text-md  { font-size: $font-size-md; }    // 1.5rem = 15px
+.text-base { font-size: $font-size-base; } // 1.6rem = 16px
+.text-lg  { font-size: $font-size-lg; }    // 1.8rem = 18px
+.text-xl  { font-size: $font-size-xl; }    // 2rem = 20px
+.text-2xl { font-size: $font-size-2xl; }   // 2.4rem = 24px
+.text-3xl { font-size: $font-size-3xl; }   // 2.8rem = 28px
+.text-4xl { font-size: $font-size-4xl; }   // 3.2rem = 32px
+
 // Component showcase styling
 .component-showcase {
   display: flex;

package/src/scss/utilities.scss

@@ -254,94 +254,49 @@ $spacers: (
   white-space: nowrap !important;
 }
 
-// Width utilities
-.w-25 {
-  width: 25% !important;
-}
-
-.w-33 {
-  width: 33.333333% !important;
-}
-
-.w-50 {
-  width: 50% !important;
-}
-
-.w-66 {
-  width: 66.666667% !important;
-}
-
-.w-75 {
-  width: 75% !important;
-}
-
-.w-100 {
-  width: 100% !important;
-}
-
-.w-auto {
-  width: auto !important;
-}
+// Width utilities (5% increments)
+.w-5 { width: 5% !important; }
+.w-10 { width: 10% !important; }
+.w-15 { width: 15% !important; }
+.w-20 { width: 20% !important; }
+.w-25 { width: 25% !important; }
+.w-30 { width: 30% !important; }
+.w-35 { width: 35% !important; }
+.w-40 { width: 40% !important; }
+.w-45 { width: 45% !important; }
+.w-50 { width: 50% !important; }
+.w-55 { width: 55% !important; }
+.w-60 { width: 60% !important; }
+.w-65 { width: 65% !important; }
+.w-70 { width: 70% !important; }
+.w-75 { width: 75% !important; }
+.w-80 { width: 80% !important; }
+.w-85 { width: 85% !important; }
+.w-90 { width: 90% !important; }
+.w-95 { width: 95% !important; }
+.w-100 { width: 100% !important; }
+.w-auto { width: auto !important; }
+
+// Width utilities (fractions) - matches grid naming: pa-col-1-3, pa-col-2-3
+.w-1-3 { width: 33.333333% !important; }
+.w-2-3 { width: 66.666667% !important; }
 
 // Min-width utilities
-.mw-25 {
-  min-width: 25% !important;
-}
-
-.mw-33 {
-  min-width: 33.333333% !important;
-}
-
-.mw-50 {
-  min-width: 50% !important;
-}
-
-.mw-66 {
-  min-width: 66.666667% !important;
-}
-
-.mw-75 {
-  min-width: 75% !important;
-}
-
-.mw-100 {
-  min-width: 100% !important;
-}
-
-.mw-auto {
-  min-width: auto !important;
-}
+.mw-25 { min-width: 25% !important; }
+.mw-50 { min-width: 50% !important; }
+.mw-75 { min-width: 75% !important; }
+.mw-100 { min-width: 100% !important; }
+.mw-auto { min-width: auto !important; }
+.mw-1-3 { min-width: 33.333333% !important; }
+.mw-2-3 { min-width: 66.666667% !important; }
 
 // Fixed width utilities (min-width + width locked)
-.w-25-fixed {
-  min-width: 25% !important;
-  width: 25% !important;
-}
-
-.w-33-fixed {
-  min-width: 33.333333% !important;
-  width: 33.333333% !important;
-}
-
-.w-50-fixed {
-  min-width: 50% !important;
-  width: 50% !important;
-}
-
-.w-66-fixed {
-  min-width: 66.666667% !important;
-  width: 66.666667% !important;
-}
-
-.w-75-fixed {
-  min-width: 75% !important;
-  width: 75% !important;
-}
-
-.w-100-fixed {
-  min-width: 100% !important;
-  width: 100% !important;
-}
+.w-25-fixed { min-width: 25% !important; width: 25% !important; }
+.w-50-fixed { min-width: 50% !important; width: 50% !important; }
+.w-75-fixed { min-width: 75% !important; width: 75% !important; }
+.w-100-fixed { min-width: 100% !important; width: 100% !important; }
+.w-1-3-fixed { min-width: 33.333333% !important; width: 33.333333% !important; }
+.w-2-3-fixed { min-width: 66.666667% !important; width: 66.666667% !important; }
 
 // Height utilities
 .h-25 {
@@ -426,6 +381,30 @@ $spacers: (
   border-left: 0 !important;
 }
 
+// Border style utilities
+.border-solid { border-style: solid !important; }
+.border-dashed { border-style: dashed !important; }
+.border-dotted { border-style: dotted !important; }
+.border-none { border-style: none !important; }
+
+// Text color utilities (semantic colors)
+.text-primary { color: var(--pa-accent) !important; }
+.text-success { color: var(--pa-success-text) !important; }
+.text-danger { color: var(--pa-danger-text) !important; }
+.text-warning { color: var(--pa-warning-text) !important; }
+.text-info { color: var(--pa-info-text) !important; }
+
+// Text color utilities (theme custom colors 1-9)
+.text-color-1 { color: var(--pa-color-1) !important; }
+.text-color-2 { color: var(--pa-color-2) !important; }
+.text-color-3 { color: var(--pa-color-3) !important; }
+.text-color-4 { color: var(--pa-color-4) !important; }
+.text-color-5 { color: var(--pa-color-5) !important; }
+.text-color-6 { color: var(--pa-color-6) !important; }
+.text-color-7 { color: var(--pa-color-7) !important; }
+.text-color-8 { color: var(--pa-color-8) !important; }
+.text-color-9 { color: var(--pa-color-9) !important; }
+
 // Rounded utilities
 .rounded {
   border-radius: var(--border-radius) !important;

package/src/scss/variables/_colors.scss

@@ -200,3 +200,18 @@ $code-syntax-property: #dd4a68 !default;
 
 $comparison-accent-pink: #ec4899 !default;
 $comparison-accent-orange: #f97316 !default;
+
+// =============================================================================
+// CUSTOM THEME COLOR SLOTS (1-9)
+// Themes can override these to provide additional branded colors
+// =============================================================================
+
+$color-1: transparent !default;
+$color-2: transparent !default;
+$color-3: transparent !default;
+$color-4: transparent !default;
+$color-5: transparent !default;
+$color-6: transparent !default;
+$color-7: transparent !default;
+$color-8: transparent !default;
+$color-9: transparent !default;

package/src/scss/variables/_components.scss

@@ -266,6 +266,11 @@ $alert-info-bg: $info-bg-subtle !default;
 $alert-info-border: $info-border !default;
 $alert-info-text: $info-bg !default;
 
+// ============================================================================
+// CALLOUT SYSTEM
+// ============================================================================
+$callout-border-width: 0.4rem !default;  // 4px left border accent
+
 // ============================================================================
 // STATS SYSTEM
 // ============================================================================