@keenmate/pure-admin-core 1.1.0 → 1.1.2

package/README.md

@@ -189,6 +189,14 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 - `.pa-textarea` - Textareas
 - `.pa-checkbox` - Checkboxes
 - `.pa-radio` - Radio buttons
+- **Size modifiers:** `--xs`, `--sm`, `--lg`, `--xl`
+- **Validation states:** `--success`, `--warning`, `--error`
+- **Color variants:** `--color-1` through `--color-9` (theme color slots)
+- `.pa-form-group` - Form group wrapper
+- `.pa-form-group--horizontal` - Horizontal label/input layout
+- `.pa-form-help` - Help text below inputs
+  - `--success`, `--warning`, `--error` - Validation state colors
+  - `--color-1` through `--color-9` - Theme color variants
 
 ### Tables
 - `.pa-table` - Base table

package/dist/css/main.css

@@ -8410,6 +8410,34 @@ a.pa-card p {
   font-size: 1.8rem;
 }
 
+.pa-textarea--xs {
+  height: 4rem;
+  min-height: 4rem;
+  padding: 0.6rem 0.8rem;
+  font-size: 1.2rem;
+}
+
+.pa-textarea--sm {
+  height: 6rem;
+  min-height: 6rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.4rem;
+}
+
+.pa-textarea--lg {
+  height: 12rem;
+  min-height: 12rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.6rem;
+}
+
+.pa-textarea--xl {
+  height: 16rem;
+  min-height: 16rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.8rem;
+}
+
 .pa-mode-dark input[type=date]::-webkit-calendar-picker-indicator,
 .pa-mode-dark input[type=time]::-webkit-calendar-picker-indicator,
 .pa-mode-dark input[type=datetime-local]::-webkit-calendar-picker-indicator,
@@ -8494,6 +8522,153 @@ a.pa-card p {
 .pa-form-help--success {
   color: var(--pa-success-bg);
 }
+.pa-form-help--warning {
+  color: var(--pa-warning-bg);
+}
+
+.pa-form-help--color-1 {
+  color: var(--pa-color-1);
+}
+
+.pa-form-help--color-2 {
+  color: var(--pa-color-2);
+}
+
+.pa-form-help--color-3 {
+  color: var(--pa-color-3);
+}
+
+.pa-form-help--color-4 {
+  color: var(--pa-color-4);
+}
+
+.pa-form-help--color-5 {
+  color: var(--pa-color-5);
+}
+
+.pa-form-help--color-6 {
+  color: var(--pa-color-6);
+}
+
+.pa-form-help--color-7 {
+  color: var(--pa-color-7);
+}
+
+.pa-form-help--color-8 {
+  color: var(--pa-color-8);
+}
+
+.pa-form-help--color-9 {
+  color: var(--pa-color-9);
+}
+
+.pa-input--color-1,
+.pa-select--color-1,
+.pa-textarea--color-1 {
+  border-color: var(--pa-color-1);
+}
+.pa-input--color-1:focus,
+.pa-select--color-1:focus,
+.pa-textarea--color-1:focus {
+  border-color: var(--pa-color-1);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-1) 25%, transparent);
+}
+
+.pa-input--color-2,
+.pa-select--color-2,
+.pa-textarea--color-2 {
+  border-color: var(--pa-color-2);
+}
+.pa-input--color-2:focus,
+.pa-select--color-2:focus,
+.pa-textarea--color-2:focus {
+  border-color: var(--pa-color-2);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-2) 25%, transparent);
+}
+
+.pa-input--color-3,
+.pa-select--color-3,
+.pa-textarea--color-3 {
+  border-color: var(--pa-color-3);
+}
+.pa-input--color-3:focus,
+.pa-select--color-3:focus,
+.pa-textarea--color-3:focus {
+  border-color: var(--pa-color-3);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-3) 25%, transparent);
+}
+
+.pa-input--color-4,
+.pa-select--color-4,
+.pa-textarea--color-4 {
+  border-color: var(--pa-color-4);
+}
+.pa-input--color-4:focus,
+.pa-select--color-4:focus,
+.pa-textarea--color-4:focus {
+  border-color: var(--pa-color-4);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-4) 25%, transparent);
+}
+
+.pa-input--color-5,
+.pa-select--color-5,
+.pa-textarea--color-5 {
+  border-color: var(--pa-color-5);
+}
+.pa-input--color-5:focus,
+.pa-select--color-5:focus,
+.pa-textarea--color-5:focus {
+  border-color: var(--pa-color-5);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-5) 25%, transparent);
+}
+
+.pa-input--color-6,
+.pa-select--color-6,
+.pa-textarea--color-6 {
+  border-color: var(--pa-color-6);
+}
+.pa-input--color-6:focus,
+.pa-select--color-6:focus,
+.pa-textarea--color-6:focus {
+  border-color: var(--pa-color-6);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-6) 25%, transparent);
+}
+
+.pa-input--color-7,
+.pa-select--color-7,
+.pa-textarea--color-7 {
+  border-color: var(--pa-color-7);
+}
+.pa-input--color-7:focus,
+.pa-select--color-7:focus,
+.pa-textarea--color-7:focus {
+  border-color: var(--pa-color-7);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-7) 25%, transparent);
+}
+
+.pa-input--color-8,
+.pa-select--color-8,
+.pa-textarea--color-8 {
+  border-color: var(--pa-color-8);
+}
+.pa-input--color-8:focus,
+.pa-select--color-8:focus,
+.pa-textarea--color-8:focus {
+  border-color: var(--pa-color-8);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-8) 25%, transparent);
+}
+
+.pa-input--color-9,
+.pa-select--color-9,
+.pa-textarea--color-9 {
+  border-color: var(--pa-color-9);
+}
+.pa-input--color-9:focus,
+.pa-select--color-9:focus,
+.pa-textarea--color-9:focus {
+  border-color: var(--pa-color-9);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-9) 25%, transparent);
+}
 
 /* ========================================
    Input Groups
@@ -9120,235 +9295,21 @@ input:indeterminate + .pa-checkbox__box::after {
  * Maps Pure Admin SCSS variables to web component CSS custom properties
  *
  * @keenmate/web-multiselect: Uses --base-* variables from _base-css-variables.scss
- * @keenmate/web-daterangepicker: Uses --drp-* variables defined below
- */
-/*
+ * @keenmate/web-daterangepicker: Uses --base-* variables from _base-css-variables.scss
+ *
+ * NOTE: Both components use the --base-* CSS variable system with built-in fallback chains:
+ *   1. External override: --ms-accent-color: #custom
+ *   2. Theme base value: var(--base-accent-color)
+ *   3. Hardcoded default: #3b82f6
+ *
+ * This means Pure Admin only needs to set --base-* variables (via the
+ * output-base-css-variables mixin) and the components will automatically
+ * pick up the theme colors.
  */
-/* ========================================
-   Date Range Picker Variables (--drp-*)
-   v1.3.0+ Semantic Variable Architecture
-
-   NOTE: Variables set directly on web-daterangepicker
-   element to pierce shadow DOM (custom properties
-   cascade into shadow DOM when set on host element)
-   ======================================== */
-web-daterangepicker {
-  /* ===== BASE PRIMITIVES ===== */
-  /* Colors */
-  --drp-accent-color: #007bff;
-  --drp-primary-bg: #007bff;
-  --drp-primary-bg-hover: rgb(51, 149.4, 255);
-  --drp-text-primary: var(--pa-text-color-1);
-  --drp-text-secondary: var(--pa-text-color-2);
-  --drp-border-color: #e1e5e9;
-  --drp-card-bg: var(--pa-card-bg);
-  --drp-hover-bg: #f8f9fa;
-  /* Spacing */
-  --drp-spacing-xs: 0.4rem;
-  --drp-spacing-sm: 0.8rem;
-  --drp-spacing-md: 1.2rem;
-  --drp-spacing-base: 1.6rem;
-  --drp-spacing-lg: 2.4rem;
-  --drp-spacing-xl: 3.2rem;
-  /* Typography */
-  --drp-font-size-xs: 1.2rem;
-  --drp-font-size-sm: 1.4rem;
-  --drp-font-size-base: 1.6rem;
-  --drp-font-size-lg: 1.8rem;
-  --drp-font-weight-normal: 400;
-  --drp-font-weight-medium: 500;
-  --drp-font-weight-semibold: 600;
-  /* Animations */
-  --drp-transition-fast: 0.1s;
-  --drp-transition-normal: 0.15s;
-  --drp-easing-snappy: ease-out;
-  --drp-easing-smooth: ease;
-  /* Shadows */
-  --drp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --drp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --drp-shadow-xl: 0 0 60px rgba(0, 0, 0, 0.12);
-  /* Border radius */
-  --drp-border-radius: 4px;
-  --drp-border-radius-sm: 2px;
-  --drp-border-radius-lg: 8px;
-  /* Border width */
-  --drp-border-width-base: 1px;
-  --drp-border-width-medium: 2px;
-  /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
-  /* Input colors */
-  --drp-input-background: var(--pa-input-bg);
-  --drp-input-color: var(--pa-text-color-1);
-  --drp-input-border-color: #ced4da;
-  --drp-input-border-color-hover: #007bff;
-  --drp-input-border-color-focus: #007bff;
-  --drp-input-placeholder-color: var(--pa-text-color-2);
-  --drp-input-disabled-background: var(--pa-input-bg);
-  --drp-input-disabled-color: var(--pa-text-color-2);
-  /* Input focus effects */
-  --drp-input-focus-shadow-color: rgba(0, 123, 255, 0.05);
-  --drp-input-focus-shadow-size: 3px;
-  /* Input icon */
-  --drp-input-icon-color: var(--pa-text-color-2);
-  --drp-input-icon-opacity: 1;
-  /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
-     Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
-  /* Extra Small (31px) */
-  --drp-input-size-xs-font: 1.2rem;
-  --drp-input-size-xs-padding-v: 0.8rem;
-  --drp-input-size-xs-padding-h: 0.8rem;
-  --drp-input-size-xs-height: 3.1rem; /* 31px (10px base) */
-  --drp-input-size-xs-icon-size: 1.2rem; /* 12px (10px base) */
-  /* Small (33px - same height as xs, slightly larger icon) */
-  --drp-input-size-sm-font: 1.2rem;
-  --drp-input-size-sm-padding-v: 0.8rem;
-  --drp-input-size-sm-padding-h: 0.8rem;
-  --drp-input-size-sm-height: 3.3rem; /* 33px (10px base) */
-  --drp-input-size-sm-icon-size: 1.4rem; /* 14px (10px base) */
-  /* Medium/Default (maps to pa-input: 35px) */
-  --drp-input-size-md-font: 1.4rem;
-  --drp-input-size-md-padding-v: 0.8rem;
-  --drp-input-size-md-padding-h: 0.8rem;
-  --drp-input-size-md-height: 3.5rem; /* 35px (10px base) */
-  --drp-input-size-md-icon-size: 1.6rem; /* 16px (10px base) */
-  /* Large (maps to pa-input--lg: 38px) */
-  --drp-input-size-lg-font: 1.6rem;
-  --drp-input-size-lg-padding-v: 0.8rem;
-  --drp-input-size-lg-padding-h: 0.8rem;
-  --drp-input-size-lg-height: 3.8rem; /* 38px (10px base) */
-  --drp-input-size-lg-icon-size: 1.8rem; /* 18px (10px base) */
-  /* Extra Large (maps to pa-input--xl: 41px) */
-  --drp-input-size-xl-font: 1.8rem;
-  --drp-input-size-xl-padding-v: 0.8rem;
-  --drp-input-size-xl-padding-h: 0.8rem;
-  --drp-input-size-xl-height: 4.1rem; /* 41px (10px base) */
-  --drp-input-size-xl-icon-size: 2rem; /* 20px (10px base) */
-  /* ===== CALENDAR CONTAINER ===== */
-  --drp-calendar-bg: var(--pa-card-bg);
-  --drp-calendar-border: #e1e5e9;
-  --drp-calendar-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
-  --drp-calendar-border-radius: 4px;
-  --drp-calendar-padding: 1.6rem;
-  --drp-calendar-z-index: 1000;
-  /* ===== HEADER ===== */
-  --drp-header-padding: 0.8rem 1.2rem;
-  --drp-header-font-size: 1.6rem;
-  --drp-header-font-weight: 600;
-  --drp-header-text-color: var(--pa-text-color-1);
-  --drp-header-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-header-bg-active: rgba(0, 123, 255, 0.05);
-  /* ===== NAVIGATION ===== */
-  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
-  --drp-nav-text-color: var(--pa-text-color-1);
-  --drp-nav-border-color: #e1e5e9;
-  --drp-nav-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-nav-bg-active: rgba(0, 123, 255, 0.05);
-  --drp-nav-border-hover: #007bff;
-  /* ===== WEEKDAY HEADER ===== */
-  --drp-weekday-font-size: 1.2rem;
-  --drp-weekday-font-weight: 600;
-  --drp-weekday-color: var(--pa-text-color-2);
-  --drp-weekday-padding: 0.4rem;
-  /* ===== CALENDAR GRID ===== */
-  --drp-day-size: 3.6rem; /* 36px (10px base) */
-  --drp-day-font-size: 1.4rem;
-  --drp-day-border-radius: 2px;
-  /* Day states */
-  --drp-day-text-color: var(--pa-text-color-1);
-  --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-day-border-hover: transparent;
-  /* Today indicator */
-  --drp-day-today-border: #007bff;
-  /* Selected state */
-  --drp-day-selected-bg: #007bff;
-  --drp-day-selected-color: #ffffff;
-  /* Range state */
-  --drp-day-range-bg: rgba(0, 123, 255, 0.05);
-  --drp-day-range-text: var(--pa-text-color-1);
-  /* Focused state */
-  --drp-day-focused-outline: #007bff;
-  /* Disabled state */
-  --drp-day-disabled-color: var(--pa-text-color-2);
-  --drp-day-disabled-opacity: 0.65;
-  /* Other month */
-  --drp-day-other-month-color: var(--pa-text-color-2);
-  --drp-day-other-month-opacity: 0.5;
-  /* ===== BADGES ===== */
-  /* Dot badges (original style) */
-  --drp-badge-size: 0.6rem; /* 6px (10px base) */
-  --drp-badge-primary: #007bff;
-  --drp-badge-success: #28a745;
-  --drp-badge-warning: #ffc107;
-  --drp-badge-danger: #dc3545;
-  --drp-badge-info: #17a2b8;
-  /* Number badges */
-  --drp-badge-number-bg: #dc3545;
-  --drp-badge-number-color: #ffffff;
-  /* Count badges */
-  --drp-badge-count-bg: #007bff;
-  --drp-badge-count-color: #ffffff;
-  /* Text badges */
-  --drp-badge-text-bg: rgba(0, 123, 255, 0.05);
-  --drp-badge-text-color: var(--pa-text-color-1);
-  /* ===== SUMMARY BAR ===== */
-  --drp-summary-bg: #f8f9fa;
-  --drp-summary-border-color: #e1e5e9;
-  --drp-summary-text-color: var(--pa-text-color-1);
-  --drp-summary-count-color: #007bff;
-  --drp-summary-padding: 0.8rem 1.2rem;
-  --drp-summary-font-size: 1.4rem;
-  --drp-summary-font-weight: 500;
-  /* ===== BUTTONS ===== */
-  /* Today button */
-  --drp-button-today-bg: #6c757d;
-  --drp-button-today-bg-hover: #545b62;
-  --drp-button-today-color: #ffffff;
-  --drp-button-today-border: #e1e5e9;
-  /* Clear button */
-  --drp-button-clear-bg: #6c757d;
-  --drp-button-clear-bg-hover: #545b62;
-  --drp-button-clear-color: #ffffff;
-  --drp-button-clear-border: #e1e5e9;
-  /* Cancel button */
-  --drp-button-cancel-bg: #6c757d;
-  --drp-button-cancel-bg-hover: #545b62;
-  --drp-button-cancel-color: #ffffff;
-  --drp-button-cancel-border: #e1e5e9;
-  /* Apply button */
-  --drp-button-apply-bg: #007bff;
-  --drp-button-apply-bg-hover: rgb(51, 149.4, 255);
-  --drp-button-apply-color: #ffffff;
-  --drp-button-apply-border: #007bff;
-  /* Button sizing */
-  --drp-button-padding: 0.8rem 1rem;
-  --drp-button-font-size: 1.4rem;
-  --drp-button-border-radius: 4px;
-  --drp-button-gap: 0.8rem;
-  /* ===== UNIFIED NAVIGATION ===== */
-  /* Range selectors in unified nav */
-  --drp-unified-range-text-color: var(--pa-text-color-1);
-  --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-unified-range-bg-active: rgba(0, 123, 255, 0.05);
-  /* Month/Year display */
-  --drp-unified-month-color: var(--pa-text-color-1);
-  /* Rolling selector disabled state */
-  --drp-unified-rolling-disabled-color: var(--pa-text-color-2);
-  /* ===== ROLLING SELECTOR ===== */
-  --drp-rolling-bg: var(--pa-card-bg);
-  --drp-rolling-border: #e1e5e9;
-  --drp-rolling-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-rolling-item-hover-bg: rgba(0, 123, 255, 0.12);
-  --drp-rolling-item-selected-bg: #007bff;
-  --drp-rolling-item-selected-text: #ffffff;
-  --drp-rolling-font-size: 1.4rem;
-  --drp-rolling-item-text-color: var(--pa-text-color-1);
-  --drp-rolling-item-disabled-color: var(--pa-text-color-2);
-  /* ===== LOADING OVERLAY ===== */
-  --drp-loading-bg: rgba(255, 255, 255, 0.8);
-  --drp-loading-spinner-color: #007bff;
-  --drp-loading-spinner-size: 1.6rem;
-  /* ===== MULTIPLE MONTHS ===== */
-  --drp-months-gap: 2.4rem;
+/* Web Multiselect - Group label styling */
+web-multiselect {
+  --ms-group-label-color: var(--base-text-color-1);
+  --ms-group-label-font-weight: 600;
 }
 
 .pa-file-input {
@@ -13816,6 +13777,14 @@ html.font-size-4xl {
   white-space: nowrap;
 }
 
+.pa-link {
+  color: #007bff;
+  text-decoration: none;
+}
+.pa-link:hover {
+  text-decoration: underline;
+}
+
 .component-showcase {
   display: flex;
   flex-wrap: wrap;

package/package.json

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

package/snippets/buttons.html

@@ -248,6 +248,18 @@
   Continue
 </button>
 
+<!-- Fixed Width with Truncation -->
+<!-- Use minwr-* + maxwr-* to constrain width, text-truncate on inner span for ellipsis -->
+<button class="pa-btn pa-btn--primary minwr-10 maxwr-10">
+  <span class="pa-btn__icon">✓</span>
+  <span class="text-truncate">Save All Changes</span>
+</button>
+
+<button class="pa-btn pa-btn--secondary minwr-10 maxwr-10">
+  <span class="pa-btn__icon">×</span>
+  <span class="text-truncate">Cancel and Go Back</span>
+</button>
+
 
 <!-- BUTTON ALIGNMENT -->
 

package/snippets/forms.html

@@ -78,15 +78,62 @@
 <!-- Success State -->
 <div class="pa-form-group pa-form-group--success">
   <label class="pa-form-label" for="valid-input">Valid Input</label>
-  <input type="text" class="pa-input pa-input--success" id="valid-input" value="Valid value">
-  <small class="pa-form-text pa-form-text--success">Looks good!</small>
+  <input type="text" class="pa-input" id="valid-input" value="Valid value">
+  <small class="pa-form-help pa-form-help--success">Looks good!</small>
+</div>
+
+<!-- Warning State -->
+<div class="pa-form-group pa-form-group--warning">
+  <label class="pa-form-label" for="warning-input">Warning Input</label>
+  <input type="text" class="pa-input" id="warning-input" value="Check this">
+  <small class="pa-form-help pa-form-help--warning">Please verify this field.</small>
 </div>
 
 <!-- Error State -->
 <div class="pa-form-group pa-form-group--error">
   <label class="pa-form-label" for="invalid-input">Invalid Input</label>
-  <input type="text" class="pa-input pa-input--error" id="invalid-input" value="Invalid value">
-  <small class="pa-form-text pa-form-text--error">Please provide a valid value.</small>
+  <input type="text" class="pa-input" id="invalid-input" value="Invalid value">
+  <small class="pa-form-help pa-form-help--error">Please provide a valid value.</small>
+</div>
+
+
+<!-- THEME COLOR VARIANTS -->
+<!-- Use --pa-color-1 through --pa-color-9 CSS variables (set by theme) -->
+
+<!-- Color 1 with matching help text -->
+<div class="pa-form-group">
+  <label class="pa-form-label" for="color1-input">Color 1</label>
+  <input type="text" class="pa-input pa-input--color-1" id="color1-input" value="Color 1 input">
+  <small class="pa-form-help pa-form-help--color-1">Colored help text</small>
+</div>
+
+<!-- Color 2 with matching help text -->
+<div class="pa-form-group">
+  <label class="pa-form-label" for="color2-input">Color 2</label>
+  <input type="text" class="pa-input pa-input--color-2" id="color2-input" value="Color 2 input">
+  <small class="pa-form-help pa-form-help--color-2">Colored help text</small>
+</div>
+
+<!-- Color 3 with gray help text (no color class) -->
+<div class="pa-form-group">
+  <label class="pa-form-label" for="color3-input">Color 3</label>
+  <input type="text" class="pa-input pa-input--color-3" id="color3-input" value="Color 3 input">
+  <small class="pa-form-help">Gray help text (no color class)</small>
+</div>
+
+<!-- Select with color variant -->
+<div class="pa-form-group">
+  <label class="pa-form-label" for="color-select">Color Select</label>
+  <select class="pa-select pa-select--color-1" id="color-select">
+    <option>Option 1</option>
+    <option>Option 2</option>
+  </select>
+</div>
+
+<!-- Textarea with color variant -->
+<div class="pa-form-group">
+  <label class="pa-form-label" for="color-textarea">Color Textarea</label>
+  <textarea class="pa-textarea pa-textarea--color-2" id="color-textarea">Color 2 textarea</textarea>
 </div>
 
 
@@ -433,19 +480,27 @@ FORM ELEMENTS:
 - .pa-form-group--required: Shows required indicator
 - .pa-form-group--horizontal: Label-left, input-right layout
 - .pa-form-group--success: Success validation state
+- .pa-form-group--warning: Warning validation state
 - .pa-form-group--error: Error validation state
 - .pa-form-label: Form label
 
 INPUTS:
 - .pa-input: Text input base class
 - .pa-input--xs, --sm, --lg, --xl: Size variants
-- .pa-input--success, --error: Validation states
+- .pa-input--success, --warning, --error: Validation states
+- .pa-input--color-1 through --color-9: Theme color variants
 
 TEXTAREA:
 - .pa-textarea: Textarea element
+- .pa-textarea--xs, --sm, --lg, --xl: Size variants
+- .pa-textarea--success, --warning, --error: Validation states
+- .pa-textarea--color-1 through --color-9: Theme color variants
 
 SELECT:
 - .pa-select: Select dropdown
+- .pa-select--xs, --sm, --lg, --xl: Size variants
+- .pa-select--success, --warning, --error: Validation states
+- .pa-select--color-1 through --color-9: Theme color variants
 
 CHECKBOXES (custom tri-state):
 - .pa-checkbox: Checkbox wrapper label
@@ -466,9 +521,11 @@ INPUT GROUPS:
 - .pa-input-group__button: Button addon
 
 HELP TEXT:
-- .pa-form-text: Help/hint text below inputs
-- .pa-form-text--success: Success message
-- .pa-form-text--error: Error message
+- .pa-form-help: Help/hint text below inputs
+- .pa-form-help--success: Success message
+- .pa-form-help--warning: Warning message
+- .pa-form-help--error: Error message
+- .pa-form-help--color-1 through --color-9: Theme color variants
 
 GRID LAYOUT (for multi-column forms):
 - .pa-row: Row container (flexbox)