[*] Select: typed interface, hybrid search, displays.

- Added AdaptiveKeyboard system supporting universal language matching -
Implemented 4-tier hybrid matching strategy with priority ordering -
Added support for non-Latin scripts (Cyrillic, Arabic, CJK, Indic,
Greek) - Enhanced with smart features including automatic keyboard
layout detection - Implemented self-improving system through adaptive
learning - Added typo tolerance with keyboard-aware substitution costs -
Enabled mixed-script matching capabilities

Matching strategy priority: 1. Learned patterns (user corrections,
highest priority) 2. Physical key distance (layout-independent
proximity) 3. Unicode similarity (codepoint-based matching) 4. Phonetic
groups (cross-script phonetic similarity)

- Fixed select button to show proper capitalized display text - Enhanced
separation between machine-readable values and human-readable display -
Added proper display text preservation between selections - Implemented
clean fallback to formatted value when display not provided

Before: Selects "Apple" → Button shows "apple" After: Selects "Apple" →
Button shows "Apple"

- Fixed type inference errors with explicit generic annotations - Added
required on_display_change callback to demo examples - Improved
documentation with clear value vs display usage examples - Enhanced all
SelectOption components with proper display props - Updated all code
examples to show best practices

- Moved tests from dedicated files into modules where they belong -
Added comprehensive multi-language test coverage (17 tests total) -
Added test scenarios for adaptive learning and user corrections - Added
physical key distance and unicode similarity tests - Added cross-script
phonetic matching test cases - Verified all existing functionality
preserved with full regression testing

Author: npatsakula

preview/src/components/select/variants/main/mod.rs

@@ -10,10 +10,11 @@ pub fn Demo() -> Element {
             rel: "stylesheet",
             href: asset!("/src/components/select/variants/main/style.css"),
         }
-        Select {
+        Select::<String> {
             class: "select",
             placeholder: "Select a fruit...",
-            SelectTrigger {
+            on_display_change: |_| {},
+            SelectTrigger::<String> {
                 class: "select-trigger",
                 aria_label: "Select Trigger",
                 width: "12rem",
@@ -24,19 +25,20 @@ pub fn Demo() -> Element {
                     polyline { points: "6 9 12 15 18 9" }
                 }
             }
-            SelectList {
+            SelectList::<String> {
                 class: "select-list",
                 aria_label: "Select Demo",
-                SelectGroup {
+                SelectGroup::<String> {
                     class: "select-group",
                     SelectGroupLabel {
                         class: "select-group-label",
                         "Fruits"
                     }
-                    SelectOption {
+                    SelectOption::<String> {
                         index: 0usize,
                         class: "select-option",
                         value: "apple".to_string(),
+                        display: "Apple".to_string(),
                         "Apple"
                         SelectItemIndicator {
                             svg {
@@ -47,10 +49,11 @@ pub fn Demo() -> Element {
                             }
                         }
                     }
-                    SelectOption {
+                    SelectOption::<String> {
                         index: 1usize,
                         class: "select-option",
                         value: "banana".to_string(),
+                        display: "Banana".to_string(),
                         "Banana"
                         SelectItemIndicator {
                             svg {
@@ -61,10 +64,11 @@ pub fn Demo() -> Element {
                             }
                         }
                     }
-                    SelectOption {
+                    SelectOption::<String> {
                         index: 2usize,
                         class: "select-option",
                         value: "orange".to_string(),
+                        display: "Orange".to_string(),
                         "Orange"
                         SelectItemIndicator {
                             svg {
@@ -75,10 +79,11 @@ pub fn Demo() -> Element {
                             }
                         }
                     }
-                    SelectOption {
+                    SelectOption::<String> {
                         index: 3usize,
                         class: "select-option",
                         value: "strawberry".to_string(),
+                        display: "Strawberry".to_string(),
                         "Strawberry"
                         SelectItemIndicator {
                             svg {
@@ -89,10 +94,11 @@ pub fn Demo() -> Element {
                             }
                         }
                     }
-                    SelectOption {
+                    SelectOption::<String> {
                         index: 4usize,
                         class: "select-option",
                         value: "watermelon".to_string(),
+                        display: "Watermelon".to_string(),
                         "Watermelon"
                         SelectItemIndicator {
                             svg {
@@ -104,16 +110,17 @@ pub fn Demo() -> Element {
                         }
                     }
                 }
-                SelectGroup {
+                SelectGroup::<String> {
                     class: "select-group",
                     SelectGroupLabel {
                         class: "select-group-label",
                         "Other"
                     }
-                    SelectOption {
+                    SelectOption::<String> {
                         index: 5usize,
                         class: "select-option",
                         value: "other".to_string(),
+                        display: "Other".to_string(),
                         "Other"
                         SelectItemIndicator {
                             svg {

primitives/src/lib.rs

@@ -61,7 +61,10 @@ fn use_unique_id() -> Signal<String> {
 }
 
 // Elements can only have one id so if the user provides their own, we must use it as the aria id.
-fn use_id_or<T: Clone + PartialEq + 'static>(mut gen_id: Signal<T>, user_id: ReadOnlySignal<Option<T>>) -> Memo<T> {
+fn use_id_or<T: Clone + PartialEq + 'static>(
+    mut gen_id: Signal<T>,
+    user_id: ReadOnlySignal<Option<T>>,
+) -> Memo<T> {
     // First, check if we have a user-provided ID
     let has_user_id = use_memo(move || user_id().is_some());