tyrell-components 1.0.0-TC25 → 1.0.0-TC27

package/lib/components/{multiselect.d.ts → select.d.ts}

@@ -1,48 +1,46 @@
 /**
- * TyMultiselect Web Component
- * PORTED FROM: clj/ty/components/multiselect.cljs
+ * TySelect Web Component
  *
- * A multiselect dropdown component using ty-tag for selections with:
- * - Tag-only options (only ty-tag elements supported)
- * - Multiple selection with visual tags
- * - Desktop mode with smart positioning
- * - Mobile mode with full-screen modal
- * - Search and filtering capabilities
- * - Keyboard navigation
- * - Form association for native form submission with multiple values
- * - Scroll locking when dropdown is open
- * - Outside click to close
+ * The select control — replaces ty-dropdown and ty-multiselect.
+ *
+ * Cardinality (native <select> semantics):
+ * - default: SINGLE select — scalar value, picking an option closes the popup
+ * - `multiple`: multi select — comma value / repeated FormData entries,
+ *   options toggle and the popup stays open
+ *
+ * Skins:
+ * - default: form FIELD — full width, --ty-input-* tokens, matches ty-input;
+ *   shows the selected label(s) inline
+ * - `compact`: content-hugging trigger for toolbars/filter bars; single shows
+ *   the selected label, multiple shows placeholder + count badge (pair with
+ *   <ty-selected-tags>)
+ * - slot="trigger": consumer skin — replaces field/compact chrome entirely,
+ *   behavior/ARIA/form participation unchanged
+ *
+ * - ty-option children (ty-tag also accepted)
+ * - Desktop popup with smart positioning, mobile full-screen modal
+ * - Search / external-search / debounce, keyboard navigation
+ * - Form association: single submits one entry, multiple submits repeated
+ *   `name=` entries (HTMX-ready)
+ * - change event detail: { value, values, items: [{value, label, flavor}], action, item }
+ *   (`value` is a scalar for single, array for multiple)
  *
  * @example
  * ```html
- * <!-- Basic multiselect -->
- * <ty-multiselect label="Skills" placeholder="Select skills" required>
- *   <ty-tag value="js">JavaScript</ty-tag>
- *   <ty-tag value="ts">TypeScript</ty-tag>
- *   <ty-tag value="py">Python</ty-tag>
- * </ty-multiselect>
+ * <!-- Single select, field skin -->
+ * <ty-select label="Robot" name="robot">
+ *   <ty-option value="bobo">Bobo Robot</ty-option>
+ *   <ty-option value="eywa">EYWA Dataset Example</ty-option>
+ * </ty-select>
  *
- * <!-- With pre-selected values -->
- * <ty-multiselect value="js,ts">
- *   <ty-tag value="js">JavaScript</ty-tag>
- *   <ty-tag value="ts">TypeScript</ty-tag>
- *   <ty-tag value="py">Python</ty-tag>
- * </ty-multiselect>
- *
- * <!-- With rich tag content -->
- * <ty-multiselect label="Team Members">
- *   <ty-tag value="1" flavor="primary">
- *     <div class="flex items-center gap-2">
- *       <img src="avatar1.jpg" class="w-6 h-6 rounded-full" />
- *       <span>John Doe</span>
- *     </div>
- *   </ty-tag>
- * </ty-multiselect>
+ * <!-- Multi select, compact skin + out-of-band chips -->
+ * <ty-select multiple compact label="Robots" name="robots" id="robots">...</ty-select>
+ * <ty-selected-tags for="robots"></ty-selected-tags>
  * ```
  */
-import type { Flavor, Size } from '../types/common.js';
-import { TyComponent } from '../base/ty-component.js';
-import type { PropertyChange } from '../utils/property-manager.js';
+import type { Size } from "../types/common.js";
+import { TyComponent } from "../base/ty-component.js";
+import type { PropertyChange } from "../utils/property-manager.js";
 /**
  * Tag data structure
  */
@@ -60,12 +58,12 @@ interface MultiselectState {
     highlightedIndex: number;
     filteredTags: TagData[];
     selectedValues: string[];
-    mode: 'desktop' | 'mobile';
+    mode: "desktop" | "mobile";
 }
 /**
  * Ty Multiselect Component
  */
-export declare class TyMultiselect extends TyComponent<MultiselectState> {
+export declare class TySelect extends TyComponent<MultiselectState> {
     protected static properties: {
         value: {
             type: "string";
@@ -79,6 +77,16 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
             type: "string";
             default: string;
         };
+        multiple: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        compact: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
         placeholder: {
             type: "string";
             visual: boolean;
@@ -109,17 +117,16 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
             visual: boolean;
             default: boolean;
             aliases: {
-                'external-search': boolean;
+                "external-search": boolean;
             };
         };
-        size: {
+        searchable: {
             type: "string";
             visual: boolean;
             default: string;
-            validate: (v: any) => boolean;
-            coerce: (v: any) => any;
+            coerce: (v: any) => "auto" | "always" | "never";
         };
-        flavor: {
+        size: {
             type: "string";
             visual: boolean;
             default: string;
@@ -132,17 +139,12 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
             validate: (v: any) => boolean;
             coerce: (v: any) => number;
         };
-        'selected-label': {
-            type: "string";
-            visual: boolean;
-            default: string;
-        };
-        'available-label': {
+        "available-label": {
             type: "string";
             visual: boolean;
             default: string;
         };
-        'no-options-message': {
+        "no-options-message": {
             type: "string";
             visual: boolean;
             default: string;
@@ -154,22 +156,23 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
         };
     };
     private _name;
+    private _multiple;
+    private _compact;
     private _placeholder;
     private _label;
     private _disabled;
     private _readonly;
     private _required;
     private _externalSearch;
+    private _searchable;
     private _loading;
     private _scrollLockId;
     private _size;
-    private _selectedLabel;
     private _availableLabel;
     private _noOptionsMessage;
     private _state;
     private _stubClickHandler;
     private _tagClickHandler;
-    private _tagDismissHandler;
     private _searchInputHandler;
     private _blockSearchClick;
     private _keyboardHandler;
@@ -177,6 +180,7 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
     private _searchDebounceTimer;
     private _optionsScrollbar;
     private _childObserver;
+    private _selectedClone;
     constructor();
     /**
      * Called when component is connected to DOM
@@ -215,7 +219,7 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
      */
     private initializeState;
     /**
-     * Get all ty-tag elements from the component (ALL slots)
+     * Get all option elements from the component (ty-option preferred, ty-tag accepted)
      */
     private getTagElements;
     /**
@@ -223,21 +227,18 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
      */
     private getTagData;
     /**
-     * Select a tag - set selected state, move to selected slot, make dismissible
+     * Select an option - attribute only. The option stays in the list with
+     * selected styling; chips are rendered out-of-band (ty-selected-tags).
      */
     private selectTag;
     /**
-     * Deselect a tag - remove selected state, remove from selected slot, remove dismissible
+     * Deselect an option - attribute only.
      */
     private deselectTag;
     /**
      * Get array of currently selected values from tags (ALWAYS reads from DOM)
      */
     private getSelectedValues;
-    /**
-     * Check if all available tags are selected
-     */
-    private allTagsSelected;
     /**
      * Sync tag selection states with desired values
      */
@@ -247,6 +248,10 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
      * Uses TyComponent's property system for proper lifecycle
      */
     private updateComponentValue;
+    /**
+     * Build rich item info for values, read off the matching option elements
+     */
+    private getSelectedItems;
     /**
      * Calculate and set dropdown position with smart direction detection
      */
@@ -279,7 +284,6 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
     private closeMobileModal;
     private handleStubClick;
     private handleTagClick;
-    private handleTagDismiss;
     private blockSearchClick;
     private handleSearchInput;
     private handleKeyboard;
@@ -328,6 +332,11 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
      * Delegates to mode-specific renderer
      */
     protected render(): void;
+    /**
+     * When a consumer slots their own trigger (slot="trigger"), strip the
+     * default field chrome so the trigger is styled entirely by the consumer.
+     */
+    private setupTriggerSlot;
     /**
      * Setup event listeners
      */
@@ -359,18 +368,52 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
      */
     private handleMobileTagClick;
     /**
-     * Update mobile selected section state (collapsed view, empty states, etc.)
+     * Update mobile options section state (count, empty state)
      */
     private updateMobileSelectedState;
     /**
-     * Update selection display (show/hide placeholder)
-     * Matches dropdown.ts pattern - uses CSS via has-selection class
+     * Update selection display: count badge next to the placeholder
+     */
+    /**
+     * Should the popup show a search row? external-search always (the input is
+     * the mechanism); searchable always/never wins otherwise; 'auto' shows it
+     * only when the option list is long enough to need filtering.
+     */
+    private shouldShowSearch;
+    /**
+     * Toggle the search row (desktop header / mobile input) per shouldShowSearch.
+     */
+    private updateSearchVisibility;
+    /**
+     * Selection summary appropriate to cardinality × skin:
+     * - single (field or compact): the selected OPTION itself — cloned into
+     *   slot="selected" so rich HTML options display intact (dropdown parity);
+     *   placeholder when empty
+     * - multiple + field: joined labels (ellipsis via CSS), or placeholder
+     * - multiple + compact: placeholder + count badge
      */
     private updateSelectionDisplay;
+    /**
+     * Keep exactly one display clone (slot="selected", marked `cloned`) in our
+     * light DOM matching the given value — or none. The clone never counts as
+     * an option (getTagElements filters [cloned]) and ty-option's own
+     * :host([cloned]) styling strips its list-row chrome.
+     */
+    private syncSelectedClone;
+    /**
+     * Deselect a value programmatically WITH a change event.
+     * Used by out-of-band chip displays (ty-selected-tags) so dismissing a chip
+     * fires change like any in-popup interaction (HTMX hx-trigger="change" etc.).
+     */
+    deselectValue(value: string): void;
     get value(): string;
     set value(val: string);
     get name(): string;
     set name(val: string);
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    get compact(): boolean;
+    set compact(value: boolean);
     get placeholder(): string;
     set placeholder(val: string);
     get label(): string;
@@ -383,15 +426,15 @@ export declare class TyMultiselect extends TyComponent<MultiselectState> {
     set readonly(value: boolean);
     get required(): boolean;
     set required(value: boolean);
+    get searchable(): "auto" | "always" | "never";
+    set searchable(value: "auto" | "always" | "never" | boolean);
     get externalSearch(): boolean;
     set externalSearch(value: boolean);
     get debounce(): number;
     set debounce(value: number | string);
     get size(): Size;
     set size(value: Size);
-    get flavor(): Flavor;
-    set flavor(value: Flavor);
     get form(): HTMLFormElement | null;
 }
 export {};
-//# sourceMappingURL=multiselect.d.ts.map
+//# sourceMappingURL=select.d.ts.map

package/lib/components/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.ts"],"names":[],"mappings":"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"}