@smilodon/core 1.3.4 → 1.3.6

package/README.md

@@ -216,21 +216,280 @@ const filtered = select.getFilteredItems();
 
 ### Custom Styling
 
-Smilodon uses CSS custom properties for theming:
+Smilodon uses CSS custom properties (CSS variables) for easy theming and customization. The default theme is **light mode** with a clean white background.
 
+#### Basic Customization
+
+```css
+enhanced-select {
+  /* Options styling */
+  --select-option-bg: #ffffff;
+  --select-option-color: #1f2937;
+  --select-option-padding: 8px 12px;
+  
+  /* Hover state */
+  --select-option-hover-bg: #f3f4f6;
+  --select-option-hover-color: #1f2937;
+  
+  /* Selected state */
+  --select-option-selected-bg: #e0e7ff;
+  --select-option-selected-color: #4338ca;
+  
+  /* Active/focused state */
+  --select-option-active-bg: #f3f4f6;
+  --select-option-active-color: #1f2937;
+  
+  /* Dropdown */
+  --select-dropdown-bg: white;
+  --select-dropdown-border: #ccc;
+  --select-dropdown-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+```
+
+#### Dark Mode (Opt-in)
+
+Dark mode is **opt-in only** and can be enabled by adding a class or data attribute:
+
+```html
+<!-- Using class -->
+<enhanced-select class="dark-mode"></enhanced-select>
+
+<!-- Using data attribute -->
+<enhanced-select data-theme="dark"></enhanced-select>
+```
+
+```css
+/* Custom dark mode colors */
+enhanced-select.dark-mode {
+  --select-dark-bg: #1f2937;
+  --select-dark-text: #f9fafb;
+  --select-dark-border: #4b5563;
+  --select-dark-dropdown-bg: #1f2937;
+  --select-dark-option-color: #f9fafb;
+  --select-dark-option-bg: #1f2937;
+  --select-dark-option-hover-bg: #374151;
+  --select-dark-option-selected-bg: #3730a3;
+}
+```
+
+#### Available CSS Variables
+
+**Light Mode (Default)**
+```css
+--select-options-bg           /* Options container background (white) */
+--select-option-color          /* Option text color (#1f2937) */
+--select-option-bg             /* Option background (white) */
+--select-option-padding        /* Option padding (8px 12px) */
+--select-option-hover-bg       /* Hover background (#f3f4f6) */
+--select-option-hover-color    /* Hover text color (#1f2937) */
+--select-option-selected-bg    /* Selected background (#e0e7ff) */
+--select-option-selected-color /* Selected text color (#4338ca) */
+--select-option-active-bg      /* Active background (#f3f4f6) */
+--select-option-active-color   /* Active text color (#1f2937) */
+--select-dropdown-bg           /* Dropdown background (white) */
+--select-dropdown-border       /* Dropdown border color (#ccc) */
+--select-dropdown-shadow       /* Dropdown shadow */
+```
+
+**Dark Mode (Opt-in)**
+```css
+--select-dark-bg               /* Dark input background (#1f2937) */
+--select-dark-text             /* Dark text color (#f9fafb) */
+--select-dark-border           /* Dark border color (#4b5563) */
+--select-dark-dropdown-bg      /* Dark dropdown background (#1f2937) */
+--select-dark-options-bg       /* Dark options container bg (#1f2937) */
+--select-dark-option-color     /* Dark option text (#f9fafb) */
+--select-dark-option-bg        /* Dark option background (#1f2937) */
+--select-dark-option-hover-bg  /* Dark hover background (#374151) */
+--select-dark-option-selected-bg /* Dark selected bg (#3730a3) */
+```
+
+**Complete CSS Variables List (60+ variables)**
+
+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)
+
+#### Highlighted Customization Features
+
+**Separator Line Between Input and Arrow**
+The vertical separator line that appears between the input area and the dropdown arrow is fully customizable:
+
+```css
+enhanced-select {
+  /* Customize the separator line */
+  --select-separator-width: 2px;           /* Line thickness */
+  --select-separator-height: 80%;          /* Line height */
+  --select-separator-position: 40px;       /* Distance from right edge */
+  --select-separator-gradient: linear-gradient(
+    to bottom,
+    transparent 0%,
+    #3b82f6 20%,
+    #3b82f6 80%,
+    transparent 100%
+  );
+}
+```
+
+**Badge Remove/Delete Button (Multi-Select)**
+The × button that removes selected items in multi-select mode is fully customizable:
+
+```css
+enhanced-select {
+  /* Customize badge appearance */
+  --select-badge-bg: #10b981;              /* Badge background */
+  --select-badge-color: white;             /* Badge text color */
+  --select-badge-padding: 6px 10px;        /* Badge spacing */
+  
+  /* Customize the × (remove/delete) button */
+  --select-badge-remove-size: 18px;        /* Button size */
+  --select-badge-remove-bg: rgba(255, 255, 255, 0.3);  /* Button background */
+  --select-badge-remove-color: white;      /* × symbol color */
+  --select-badge-remove-font-size: 18px;   /* × symbol size */
+  --select-badge-remove-hover-bg: rgba(255, 255, 255, 0.6);  /* Hover state */
+}
+```
+
+#### Real-World Customization Examples
+
+**Example 1: Bootstrap-style Select**
+```css
+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-option-hover-bg: #e9ecef;
+  --select-option-selected-bg: #0d6efd;
+  --select-option-selected-color: white;
+  --select-badge-bg: #0d6efd;
+}
+```
+
+**Example 2: Material Design**
+```css
+enhanced-select {
+  --select-input-border-radius: 4px;
+  --select-input-focus-border: #1976d2;
+  --select-input-focus-shadow: none;
+  --select-option-padding: 16px;
+  --select-option-hover-bg: rgba(0, 0, 0, 0.04);
+  --select-option-selected-bg: #e3f2fd;
+  --select-option-selected-color: #1976d2;
+  --select-badge-bg: #1976d2;
+  --select-badge-border-radius: 16px;
+}
+```
+
+**Example 3: Tailwind-style**
+```css
+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-option-padding: 0.5rem 0.75rem;
+  --select-option-hover-bg: #f3f4f6;
+  --select-option-selected-bg: #dbeafe;
+  --select-option-selected-color: #1e40af;
+}
+```
+
+**Example 4: Custom Brand Colors**
 ```css
-smilodon-select {
-  --smilodon-border-color: #d1d5db;
-  --smilodon-focus-color: #3b82f6;
-  --smilodon-bg-color: #ffffff;
-  --smilodon-text-color: #1f2937;
-  --smilodon-hover-bg: #f3f4f6;
-  --smilodon-selected-bg: #dbeafe;
-  --smilodon-font-family: system-ui, -apple-system, sans-serif;
-  --smilodon-border-radius: 0.375rem;
+enhanced-select {
+  /* Your brand colors */
+  --select-input-focus-border: #ff6b6b;
+  --select-arrow-color: #ff6b6b;
+  --select-badge-bg: #ff6b6b;
+  --select-option-selected-bg: #ffe0e0;
+  --select-option-selected-color: #c92a2a;
+  --select-button-border: 1px solid #ff6b6b;
+  --select-button-color: #ff6b6b;
+  --select-button-hover-bg: #ff6b6b;
+}
+```
+
+#### Framework-Specific Examples
+
+**React - Customizing Separator & Badge Remove Button**
+```jsx
+import { Select } from '@smilodon/react';
+
+function App() {
+  return (
+    <Select
+      items={items}
+      multiple
+      style={{
+        '--select-option-hover-bg': '#2563eb',
+        '--select-option-padding': '12px 16px',
+        '--select-badge-bg': '#3b82f6',
+        '--select-badge-remove-bg': 'rgba(255, 255, 255, 0.4)',
+        '--select-badge-remove-hover-bg': 'rgba(255, 255, 255, 0.7)',
+        '--select-separator-gradient': 'linear-gradient(to bottom, transparent 0%, #3b82f6 20%, #3b82f6 80%, transparent 100%)'
+      }}
+    />
+  );
 }
 ```
 
+**Vue - Complete Customization**
+```vue
+<template>
+  <Select
+    :items="items"
+    multiple
+    :style="{
+      '--select-option-hover-bg': '#2563eb',
+      '--select-option-padding': '12px 16px',
+      '--select-badge-bg': '#3b82f6',
+      '--select-badge-remove-size': '20px',
+      '--select-badge-remove-bg': 'rgba(255, 255, 255, 0.4)',
+      '--select-separator-width': '2px',
+      '--select-separator-height': '70%'
+    }"
+  />
+</template>
+```
+
+**Svelte - Themed Components**
+```svelte
+<script>
+  import { Select } from '@smilodon/svelte';
+</script>
+
+<Select
+  items={items}
+  multiple
+  style="
+    --select-badge-bg: #10b981;
+    --select-badge-remove-bg: rgba(255, 255, 255, 0.3);
+    --select-badge-remove-hover-bg: rgba(255, 255, 255, 0.6);
+    --select-separator-gradient: linear-gradient(to bottom, transparent, #10b981, transparent);
+  "
+/>
+```
+
+**Vanilla JS - Dynamic Styling**
+```javascript
+const select = document.querySelector('enhanced-select');
+
+// Apply custom separator and badge styles
+select.style.setProperty('--select-separator-width', '2px');
+select.style.setProperty('--select-separator-gradient', 'linear-gradient(to bottom, transparent, #ff6b6b, transparent)');
+select.style.setProperty('--select-badge-bg', '#ff6b6b');
+select.style.setProperty('--select-badge-remove-size', '18px');
+select.style.setProperty('--select-badge-remove-bg', 'rgba(255, 255, 255, 0.3)');
+```
+
 ### Server-Side Rendering (SSR)
 
 Smilodon gracefully handles SSR environments:

package/dist/index.cjs

@@ -1668,19 +1668,19 @@ class EnhancedSelect extends HTMLElement {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        gap: 6px;
-        padding: 6px 52px 6px 8px;
-        min-height: 44px;
-        background: white;
-        border: 1px solid #d1d5db;
-        border-radius: 6px;
+        gap: var(--select-input-gap, 6px);
+        padding: var(--select-input-padding, 6px 52px 6px 8px);
+        min-height: var(--select-input-min-height, 44px);
+        background: var(--select-input-bg, white);
+        border: var(--select-input-border, 1px solid #d1d5db);
+        border-radius: var(--select-input-border-radius, 6px);
         box-sizing: border-box;
         transition: all 0.2s ease;
       }
       
       .input-container:focus-within {
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--select-input-focus-border, #667eea);
+        box-shadow: var(--select-input-focus-shadow, 0 0 0 3px rgba(102, 126, 234, 0.1));
       }
       
       /* Gradient separator before arrow */
@@ -1688,17 +1688,17 @@ class EnhancedSelect extends HTMLElement {
         content: '';
         position: absolute;
         top: 50%;
-        right: 40px;
+        right: var(--select-separator-position, 40px);
         transform: translateY(-50%);
-        width: 1px;
-        height: 60%;
-        background: linear-gradient(
+        width: var(--select-separator-width, 1px);
+        height: var(--select-separator-height, 60%);
+        background: var(--select-separator-gradient, linear-gradient(
           to bottom,
           transparent 0%,
           rgba(0, 0, 0, 0.1) 20%,
           rgba(0, 0, 0, 0.1) 80%,
           transparent 100%
-        );
+        ));
         pointer-events: none;
         z-index: 1;
       }
@@ -1708,30 +1708,30 @@ class EnhancedSelect extends HTMLElement {
         top: 0;
         right: 0;
         bottom: 0;
-        width: 40px;
+        width: var(--select-arrow-width, 40px);
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: background-color 0.2s ease;
-        border-radius: 0 4px 4px 0;
+        border-radius: var(--select-arrow-border-radius, 0 4px 4px 0);
         z-index: 2;
       }
       
       .dropdown-arrow-container:hover {
-        background-color: rgba(102, 126, 234, 0.08);
+        background-color: var(--select-arrow-hover-bg, rgba(102, 126, 234, 0.08));
       }
       
       .dropdown-arrow {
-        width: 16px;
-        height: 16px;
-        color: #667eea;
+        width: var(--select-arrow-size, 16px);
+        height: var(--select-arrow-size, 16px);
+        color: var(--select-arrow-color, #667eea);
         transition: transform 0.2s ease, color 0.2s ease;
         transform: translateY(0);
       }
       
       .dropdown-arrow-container:hover .dropdown-arrow {
-        color: #667eea;
+        color: var(--select-arrow-hover-color, #667eea);
       }
       
       .dropdown-arrow.open {
@@ -1740,31 +1740,32 @@ class EnhancedSelect extends HTMLElement {
       
       .select-input {
         flex: 1;
-        min-width: 120px;
-        padding: 4px;
+        min-width: var(--select-input-min-width, 120px);
+        padding: var(--select-input-field-padding, 4px);
         border: none;
-        font-size: 14px;
-        line-height: 1.5;
-        color: #1f2937;
+        font-size: var(--select-input-font-size, 14px);
+        line-height: var(--select-input-line-height, 1.5);
+        color: var(--select-input-color, #1f2937);
         background: transparent;
         box-sizing: border-box;
         outline: none;
+        font-family: var(--select-font-family, inherit);
       }
       
       .select-input::placeholder {
-        color: #9ca3af;
+        color: var(--select-input-placeholder-color, #9ca3af);
       }
       
       .selection-badge {
         display: inline-flex;
         align-items: center;
-        gap: 4px;
-        padding: 4px 8px;
-        margin: 2px;
-        background: #667eea;
-        color: white;
-        border-radius: 4px;
-        font-size: 13px;
+        gap: var(--select-badge-gap, 4px);
+        padding: var(--select-badge-padding, 4px 8px);
+        margin: var(--select-badge-margin, 2px);
+        background: var(--select-badge-bg, #667eea);
+        color: var(--select-badge-color, white);
+        border-radius: var(--select-badge-border-radius, 4px);
+        font-size: var(--select-badge-font-size, 13px);
         line-height: 1;
       }
       
@@ -1772,22 +1773,22 @@ class EnhancedSelect extends HTMLElement {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 16px;
-        height: 16px;
+        width: var(--select-badge-remove-size, 16px);
+        height: var(--select-badge-remove-size, 16px);
         padding: 0;
         margin-left: 4px;
-        background: rgba(255, 255, 255, 0.3);
+        background: var(--select-badge-remove-bg, rgba(255, 255, 255, 0.3));
         border: none;
         border-radius: 50%;
-        color: white;
-        font-size: 16px;
+        color: var(--select-badge-remove-color, white);
+        font-size: var(--select-badge-remove-font-size, 16px);
         line-height: 1;
         cursor: pointer;
         transition: background 0.2s;
       }
       
       .badge-remove:hover {
-        background: rgba(255, 255, 255, 0.5);
+        background: var(--select-badge-remove-hover-bg, rgba(255, 255, 255, 0.5));
       }
       
       .select-input:disabled {
@@ -1801,19 +1802,19 @@ class EnhancedSelect extends HTMLElement {
         top: 100%;
         left: 0;
         right: 0;
-        margin-top: 4px;
-        max-height: 300px;
+        margin-top: var(--select-dropdown-margin-top, 4px);
+        max-height: var(--select-dropdown-max-height, 300px);
         overflow: hidden;
         background: var(--select-dropdown-bg, white);
-        border: 1px solid var(--select-dropdown-border, #ccc);
-        border-radius: var(--select-border-radius, 4px);
+        border: var(--select-dropdown-border, 1px solid #ccc);
+        border-radius: var(--select-dropdown-border-radius, 4px);
         box-shadow: var(--select-dropdown-shadow, 0 4px 6px rgba(0,0,0,0.1));
         z-index: var(--select-dropdown-z-index, 1000);
       }
       
       .options-container {
         position: relative;
-        max-height: 300px;
+        max-height: var(--select-options-max-height, 300px);
         overflow: auto;
         transition: opacity 0.2s ease-in-out;
         background: var(--select-options-bg, white);
@@ -1824,8 +1825,11 @@ class EnhancedSelect extends HTMLElement {
         cursor: pointer;
         color: var(--select-option-color, #1f2937);
         background: var(--select-option-bg, white);
-        transition: background-color 0.15s ease;
+        transition: var(--select-option-transition, background-color 0.15s ease);
         user-select: none;
+        font-size: var(--select-option-font-size, 14px);
+        line-height: var(--select-option-line-height, 1.5);
+        border-bottom: var(--select-option-border-bottom, none);
       }
 
       .option:hover {
@@ -1836,7 +1840,7 @@ class EnhancedSelect extends HTMLElement {
       .option.selected {
         background-color: var(--select-option-selected-bg, #e0e7ff);
         color: var(--select-option-selected-color, #4338ca);
-        font-weight: 500;
+        font-weight: var(--select-option-selected-weight, 500);
       }
 
       .option.active {
@@ -1845,19 +1849,21 @@ class EnhancedSelect extends HTMLElement {
       }
       
       .load-more-container {
-        padding: 12px;
+        padding: var(--select-load-more-padding, 12px);
         text-align: center;
-        border-top: 1px solid var(--select-divider-color, #e0e0e0);
+        border-top: var(--select-divider-border, 1px solid #e0e0e0);
+        background: var(--select-load-more-bg, white);
       }
       
       .load-more-button {
-        padding: 8px 16px;
-        border: 1px solid var(--select-button-border, #1976d2);
+        padding: var(--select-button-padding, 8px 16px);
+        border: var(--select-button-border, 1px solid #1976d2);
         background: var(--select-button-bg, white);
         color: var(--select-button-color, #1976d2);
-        border-radius: 4px;
+        border-radius: var(--select-button-border-radius, 4px);
         cursor: pointer;
-        font-size: 14px;
+        font-size: var(--select-button-font-size, 14px);
+        font-family: var(--select-font-family, inherit);
         transition: all 0.2s ease;
       }
       
@@ -1867,21 +1873,23 @@ class EnhancedSelect extends HTMLElement {
       }
       
       .load-more-button:disabled {
-        opacity: 0.5;
+        opacity: var(--select-button-disabled-opacity, 0.5);
         cursor: not-allowed;
       }
       
       .busy-bucket {
-        padding: 16px;
+        padding: var(--select-busy-padding, 16px);
         text-align: center;
         color: var(--select-busy-color, #666);
+        background: var(--select-busy-bg, white);
+        font-size: var(--select-busy-font-size, 14px);
       }
       
       .spinner {
         display: inline-block;
-        width: 20px;
-        height: 20px;
-        border: 2px solid var(--select-spinner-color, #ccc);
+        width: var(--select-spinner-size, 20px);
+        height: var(--select-spinner-size, 20px);
+        border: var(--select-spinner-border, 2px solid #ccc);
         border-top-color: var(--select-spinner-active-color, #1976d2);
         border-radius: 50%;
         animation: spin 0.6s linear infinite;
@@ -1892,16 +1900,20 @@ class EnhancedSelect extends HTMLElement {
       }
       
       .empty-state {
-        padding: 24px;
+        padding: var(--select-empty-padding, 24px);
         text-align: center;
         color: var(--select-empty-color, #999);
+        font-size: var(--select-empty-font-size, 14px);
+        background: var(--select-empty-bg, white);
       }
       
       .searching-state {
-        padding: 24px;
+        padding: var(--select-searching-padding, 24px);
         text-align: center;
-        color: #667eea;
+        color: var(--select-searching-color, #667eea);
+        font-size: var(--select-searching-font-size, 14px);
         font-style: italic;
+        background: var(--select-searching-bg, white);
         animation: pulse 1.5s ease-in-out infinite;
       }