@smilodon/core 1.4.12 → 1.4.13

package/README.md

@@ -20,9 +20,10 @@ Additional references:
 - **Performance Runbook**: [`docs/PERFORMANCE-RUNBOOK.md`](../../docs/PERFORMANCE-RUNBOOK.md)
 - **Performance Guide**: [`docs/PERFORMANCE.md`](../../docs/PERFORMANCE.md)
 - **Known Limitations**: [`docs/KNOWN-LIMITATIONS.md`](../../docs/KNOWN-LIMITATIONS.md)
+- **Build Tool Integration**: [`docs/BUILD-TOOL-INTEGRATION.md`](../../docs/BUILD-TOOL-INTEGRATION.md)
 
 The complete guide includes:
-- ✅ All 60+ CSS variables for complete customization
+- ✅ Complete styling token coverage for colors, layout, chips, motion, and accessibility
 - ✅ Vanilla JavaScript patterns (DOM manipulation, event listeners)
 - ✅ Complete API reference with all properties and methods
 - ✅ CDN usage and module bundler integration
@@ -702,18 +703,20 @@ enhanced-select.dark-mode {
 --select-dark-group-header-bg    /* Dark header background */
 ```
 
-**Complete CSS Variables List (60+ variables)**
+**Complete CSS Variables Reference**
 
-See the [full CSS variables reference](https://github.com/navidrezadoost/smilodon/blob/main/CHANGELOG.md#135---2026-02-09) for all 60+ customizable properties including:
-- Input container (gap, padding, height, borders, focus states)
-- Input field (width, padding, font, colors)
-- Arrow/icon (size, color, hover states, position)
-- **Separator line** (width, height, gradient, position)
-- **Selection badges** (padding, colors, **remove/delete button**)
-- Dropdown (margins, max-height, borders, shadows)
-- Options (font size, line height, borders, transitions)
-- Load more button (padding, borders, colors, hover states)
-- Loading/empty states (padding, colors, backgrounds, spinner)
+The canonical styling inventory now lives in:
+
+- [docs/STYLING.md](../../docs/STYLING.md) for strategy and examples
+- [docs/STYLING-TOKENS.md](../../docs/STYLING-TOKENS.md) for the exhaustive token table
+
+That reference covers:
+
+- Theme foundation tokens (palette, shadows, radii, timing)
+- Input shell, separator, arrow, and clear-control hooks
+- Multi-select chip structure, remove-button states, and badge motion
+- Dropdown, scrollbar, group-header, and option-state hooks
+- Empty, loading, searching, error, reduced-motion, and high-contrast hooks
 
 #### Highlighted Customization Features
 
@@ -778,7 +781,7 @@ enhanced-select {
   --select-input-border: 1px solid #ced4da;
   --select-input-border-radius: 0.375rem;
   --select-input-focus-border: #86b7fe;
-  --select-input-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  --select-shadow-focus: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
   --select-option-hover-bg: #e9ecef;
   --select-option-selected-bg: #0d6efd;
   --select-option-selected-color: white;
@@ -791,7 +794,7 @@ enhanced-select {
 enhanced-select {
   --select-input-border-radius: 4px;
   --select-input-focus-border: #1976d2;
-  --select-input-focus-shadow: none;
+  --select-shadow-focus: none;
   --select-option-padding: 16px;
   --select-option-hover-bg: rgba(0, 0, 0, 0.04);
   --select-option-selected-bg: #e3f2fd;
@@ -807,7 +810,7 @@ enhanced-select {
   --select-input-border: 1px solid #e5e7eb;
   --select-input-border-radius: 0.5rem;
   --select-input-focus-border: #3b82f6;
-  --select-input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  --select-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.1);
   --select-option-padding: 0.5rem 0.75rem;
   --select-option-hover-bg: #f3f4f6;
   --select-option-selected-bg: #dbeafe;
@@ -815,6 +818,8 @@ enhanced-select {
 }
 ```
 
+Framework compatibility guidance also lives in [../../docs/CSS-FRAMEWORK-COMPATIBILITY.md](../../docs/CSS-FRAMEWORK-COMPATIBILITY.md).
+
 **Example 4: Custom Brand Colors**
 ```css
 enhanced-select {