tyrell-components 1.0.0-TC29 → 1.0.0-TC31

package/lib/components/select.js

@@ -39,10 +39,12 @@
  * ```
  */
 import { ensureStyles } from "../utils/styles.js";
-import { multiselectStyles } from "../styles/multiselect.js";
+import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
+import { selectBaseStyles, selectCustomFlavorCss } from "../styles/select-base.js";
 import { selectStyles } from "../styles/select.js";
 import { getLoaderSvg } from "../utils/loader-registry.js";
 import { lockScroll, unlockScroll } from "../utils/scroll-lock.js";
+import { computeAnchoredPosition } from "../utils/positioning.js";
 import { isMobileTouch } from "../utils/mobile.js";
 import { TyComponent } from "../base/ty-component.js";
 import { CustomScrollbar, isCustomScrollbarEnabled, } from "../utils/custom-scrollbar.js";
@@ -76,10 +78,7 @@ function getElementHash(element) {
 // ============================================================================
 // SVG Icons
 // ============================================================================
-/**
- * Required indicator SVG icon (from Lucide)
- */
-const REQUIRED_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>`;
+import { REQUIRED_ICON_SVG } from "../utils/icons.js";
 /**
  * Chevron down icon SVG
  */
@@ -91,6 +90,19 @@ const CHEVRON_DOWN_SVG = `<svg viewBox="0 0 20 20" fill="currentColor">
  * Short lists scan faster than they search — native <select> has no search.
  */
 const SEARCH_AUTO_THRESHOLD = 7;
+/**
+ * create-transform="slug": lowercase, spaces → '_', strip anything else
+ * non-alphanumeric, collapse/trim stray underscores.
+ */
+function slugify(text) {
+    return text
+        .trim()
+        .toLowerCase()
+        .replace(/\s+/g, "_")
+        .replace(/[^a-z0-9_]/g, "")
+        .replace(/_+/g, "_")
+        .replace(/^_|_$/g, "");
+}
 /**
  * Search (magnifier) icon SVG — popup search input adornment (from Lucide)
  */
@@ -98,7 +110,7 @@ const SEARCH_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentCol
   <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
 </svg>`;
 /**
- * Ty Multiselect Component
+ * Ty Select Component
  */
 export class TySelect extends TyComponent {
     constructor() {
@@ -115,6 +127,8 @@ export class TySelect extends TyComponent {
         this._readonly = false;
         this._required = false;
         this._externalSearch = false;
+        this._allowCreate = false;
+        this._createTransform = "none";
         this._searchable = "auto";
         this._loading = false;
         this._scrollLockId = null;
@@ -147,8 +161,9 @@ export class TySelect extends TyComponent {
         // Last single-select display clone — survives external-search option swaps
         // that remove the matching option (and often the clone itself) from the DOM.
         this._selectedClone = null;
+        this._customFlavorSheet = null;
         const shadow = this.shadowRoot;
-        ensureStyles(shadow, { css: multiselectStyles, id: "ty-select-base" });
+        ensureStyles(shadow, { css: selectBaseStyles, id: "ty-select-base" });
         ensureStyles(shadow, { css: selectStyles, id: "ty-select" });
         // DON'T render here - wait for onConnect() to initialize values first
         // This matches dropdown.ts pattern and prevents showing empty state
@@ -179,6 +194,7 @@ export class TySelect extends TyComponent {
         // (only acts on tags whose desired-vs-actual selected state differs), so
         // spurious firings caused by our own re-slot work are no-ops.
         this._childObserver = new MutationObserver(() => {
+            this.ensureOptionRoles();
             if (this._state.selectedValues.length > 0) {
                 this.syncSelectedTags(this._state.selectedValues);
             }
@@ -190,6 +206,14 @@ export class TySelect extends TyComponent {
             this.updateSelectionDisplay();
         });
         this._childObserver.observe(this, { childList: true });
+        // MutationObserver only fires on FUTURE mutations — cover the initial
+        // set of options too (the common case: none selected yet at connect).
+        this.ensureOptionRoles();
+        this._syncCustomFlavor();
+    }
+    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
+    _syncCustomFlavor() {
+        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.getProperty("flavor"), ({ base }) => selectCustomFlavorCss(base));
     }
     /**
      * Called when component is disconnected from DOM
@@ -244,6 +268,9 @@ export class TySelect extends TyComponent {
                 case "name":
                     this._name = newValue || "";
                     break;
+                case "flavor":
+                    this._syncCustomFlavor();
+                    break;
                 case "multiple":
                     this._multiple = newValue;
                     // Dropping to single with a multi selection: keep only the first
@@ -279,6 +306,14 @@ export class TySelect extends TyComponent {
                     if (this.isConnected && this.shadowRoot)
                         this.updateSearchVisibility();
                     break;
+                case "allowCreate":
+                    this._allowCreate = newValue;
+                    if (this.isConnected && this.shadowRoot)
+                        this.updateSearchVisibility();
+                    break;
+                case "createTransform":
+                    this._createTransform = newValue;
+                    break;
                 case "size":
                     this._size = newValue;
                     break;
@@ -342,7 +377,7 @@ export class TySelect extends TyComponent {
         return null;
     }
     /**
-     * Parse multiselect value (comma-separated string to array)
+     * Parse select value (comma-separated string to array)
      */
     parseValue(value) {
         // Defensive check: ensure value is actually a string before calling .trim()
@@ -446,6 +481,24 @@ export class TySelect extends TyComponent {
             else if (!shouldBeSelected && isSelected) {
                 this.deselectTag(tag);
             }
+            // ARIA listbox pattern: every option reports its live selected state,
+            // not just ones that changed this pass — cheap (idempotent setAttribute).
+            tag.setAttribute("aria-selected", String(shouldBeSelected));
+        });
+    }
+    /**
+     * role="option" for every current option/tag — separate from
+     * syncSelectedTags (which only runs when the `value` property changes)
+     * so it also covers the "nothing selected yet, value never touched"
+     * startup case. Idempotent; cheap to call from the child MutationObserver
+     * on every light-DOM change.
+     */
+    ensureOptionRoles() {
+        this.getTagElements().forEach((tag) => {
+            if (!tag.hasAttribute("role"))
+                tag.setAttribute("role", "option");
+            if (!tag.hasAttribute("aria-selected"))
+                tag.setAttribute("aria-selected", "false");
         });
     }
     /**
@@ -499,13 +552,11 @@ export class TySelect extends TyComponent {
      */
     calculatePosition() {
         const shadow = this.shadowRoot;
-        const stub = shadow.querySelector(".multiselect-stub");
+        const stub = shadow.querySelector(".select-stub");
         const dialog = shadow.querySelector(".dropdown-dialog");
         if (!stub || !dialog)
             return;
         const stubRect = stub.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const viewportWidth = window.innerWidth;
         // Get dialog dimensions (it's already shown with showModal).
         // Cap the estimate: with hundreds of options the raw measurement can be
         // the uncapped content height, which made "fits below?" always false.
@@ -513,7 +564,6 @@ export class TySelect extends TyComponent {
         const MAX_POPUP_ESTIMATE = 440;
         const dialogRect = dialog.getBoundingClientRect();
         const estimatedHeight = Math.min(dialogRect.height || 200, MAX_POPUP_ESTIMATE);
-        const padding = 8;
         const wrapPadding = 20;
         // Popup width is independent of the trigger — a small button trigger still
         // gets a usable list. Overridable via --ty-select-popup-width.
@@ -521,20 +571,15 @@ export class TySelect extends TyComponent {
         const popupWidth = !isNaN(cssWidth)
             ? cssWidth
             : Math.max(stubRect.width, 320);
-        // Available space calculations
-        const spaceBelow = viewportHeight - stubRect.bottom;
-        const spaceAbove = stubRect.top;
-        // Smart direction logic: below when it fits — and when neither side
-        // fits, take the side with MORE room instead of blindly flipping up
-        // (a field near the viewport top used to clip the popup off-screen).
-        const positionBelow = spaceBelow >= estimatedHeight + padding || spaceBelow >= spaceAbove;
-        // Anchor to the trigger's left edge, clamped into the viewport
-        const x = Math.max(padding - wrapPadding, Math.min(stubRect.left - wrapPadding, viewportWidth - popupWidth - wrapPadding - padding));
-        // Open below (or above) the trigger — never covering it
-        const gap = 4;
-        const y = positionBelow
-            ? stubRect.bottom + gap - wrapPadding
-            : viewportHeight - stubRect.top + gap - wrapPadding;
+        const pos = computeAnchoredPosition({
+            anchorRect: stubRect,
+            popupWidth,
+            popupHeight: estimatedHeight,
+        });
+        const positionBelow = pos.below;
+        // Shift by the dialog's transparent wrap (room for shadows)
+        const x = pos.x - wrapPadding;
+        const y = (positionBelow ? pos.topY : pos.bottomY) - wrapPadding;
         const width = popupWidth + wrapPadding + wrapPadding;
         // Set CSS variables for positioning
         this.style.setProperty("--dropdown-x", `${x}px`);
@@ -596,8 +641,11 @@ export class TySelect extends TyComponent {
         const dialog = shadow.querySelector(".dropdown-dialog");
         if (!dialog)
             return;
+        const stubEl = shadow.querySelector(".select-stub");
+        if (stubEl)
+            stubEl.setAttribute("aria-expanded", "true");
         // Lock body scroll while dropdown is open
-        const lockId = `multiselect-${this.id || "anon"}-${getElementHash(this)}`;
+        const lockId = `select-${this.id || "anon"}-${getElementHash(this)}`;
         this._scrollLockId = lockId;
         lockScroll(lockId);
         // Show modal
@@ -638,6 +686,9 @@ export class TySelect extends TyComponent {
         const dialog = shadow.querySelector(".dropdown-dialog");
         if (!dialog)
             return;
+        const stubEl = shadow.querySelector(".select-stub");
+        if (stubEl)
+            stubEl.setAttribute("aria-expanded", "false");
         // Destroy custom scrollbar
         this._destroyOptionsScrollbar();
         // Close dialog
@@ -699,8 +750,11 @@ export class TySelect extends TyComponent {
         const dialog = shadow.querySelector(".mobile-dialog");
         if (!dialog)
             return;
+        const stubEl = shadow.querySelector(".select-stub");
+        if (stubEl)
+            stubEl.setAttribute("aria-expanded", "true");
         // Lock body scroll while mobile modal is open
-        const lockId = `multiselect-${this.id || "anon"}-${getElementHash(this)}`;
+        const lockId = `select-${this.id || "anon"}-${getElementHash(this)}`;
         this._scrollLockId = lockId;
         lockScroll(lockId);
         // Show dialog using native API (handles z-index automatically)
@@ -733,6 +787,9 @@ export class TySelect extends TyComponent {
         const dialog = shadow.querySelector(".mobile-dialog");
         if (!dialog)
             return;
+        const stubEl = shadow.querySelector(".select-stub");
+        if (stubEl)
+            stubEl.setAttribute("aria-expanded", "false");
         // Close immediately — ::backdrop doesn't support transitions
         dialog.classList.remove("open");
         dialog.close();
@@ -781,6 +838,22 @@ export class TySelect extends TyComponent {
         }
         this.openDropdown();
     }
+    /**
+     * Keyboard-open the (closed) stub. The stub is a plain div with
+     * tabindex="0", not a native <button> — Enter/Space don't turn into
+     * click events on their own the way they do for real form controls, and
+     * without this a keyboard-only user could Tab to the field but never
+     * open it. document-level handleKeyboard() only runs once already open
+     * (it early-returns on !this._state.open), so this is the other half.
+     */
+    handleStubKeydown(e) {
+        if (this._disabled || this._readonly || this._state.open)
+            return;
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+            e.preventDefault();
+            this.openDropdown();
+        }
+    }
     handleTagClick(e) {
         const target = e.target;
         // Find the option element (ty-option or ty-tag)
@@ -789,6 +862,16 @@ export class TySelect extends TyComponent {
             return;
         e.preventDefault();
         e.stopPropagation();
+        this.selectByTag(tag);
+    }
+    /**
+     * Select/toggle a tag by element — the part of handleTagClick that has no
+     * dependency on a real DOM event, so keyboard/programmatic callers (Enter
+     * on a highlighted option, allow-create's exact-match dedup) can call it
+     * directly instead of faking an Event object just to satisfy
+     * preventDefault()/stopPropagation().
+     */
+    selectByTag(tag) {
         const tagValue = this.getTagData(tag).value;
         const currentValues = this.getSelectedValues();
         // Single select: picking replaces the selection and closes the popup
@@ -812,6 +895,88 @@ export class TySelect extends TyComponent {
             this.updateComponentValue([...currentValues, tagValue], true, "add", tagValue);
         }
     }
+    /**
+     * allow-create: Enter with unmatched search text mints a new option.
+     * Returns true if it handled the key (created, or selected an existing
+     * exact match instead of duplicating) — false if there's nothing to do
+     * (blank query, or allow-create is off), so the caller's normal Enter
+     * handling (select highlighted, or no-op) proceeds.
+     */
+    tryCreateFromSearch() {
+        if (!this._allowCreate)
+            return false;
+        const query = (this._state.search || "").trim();
+        if (!query)
+            return false;
+        const queryLower = query.toLowerCase();
+        const allTags = this.getTagElements().map((el) => this.getTagData(el));
+        // Dedup: typed text exactly matches an existing option (by value or
+        // display text) — select it instead of minting a duplicate.
+        const existing = allTags.find((t) => t.value.toLowerCase() === queryLower ||
+            t.text.toLowerCase() === queryLower);
+        if (existing) {
+            this.selectByTag(existing.element);
+            return true;
+        }
+        const rawLabel = query;
+        const defaultValue = this._createTransform === "slug" ? slugify(rawLabel) : rawLabel;
+        if (!defaultValue)
+            return true; // slugified to nothing — handled no-op
+        const detail = { value: defaultValue, label: rawLabel };
+        const event = new CustomEvent("create", {
+            detail,
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+        });
+        this.dispatchEvent(event);
+        if (event.defaultPrevented)
+            return true; // consumer takes over entirely
+        const finalValue = detail.value;
+        const option = document.createElement("ty-option");
+        option.setAttribute("value", finalValue);
+        option.textContent = rawLabel;
+        this.appendChild(option);
+        if (!this._multiple) {
+            this.updateComponentValue([finalValue], true, "create", finalValue);
+            if (this._state.mode === "mobile") {
+                this.closeMobileModal();
+            }
+            else {
+                this.closeDropdown();
+            }
+            return true;
+        }
+        const currentValues = this.getSelectedValues();
+        this.updateComponentValue([...currentValues, finalValue], true, "create", finalValue);
+        this.clearSearchAfterCreate();
+        return true;
+    }
+    /**
+     * Multiple + allow-create: clear the search box and re-show the full
+     * (now-longer) option list so the next tag can be typed immediately —
+     * the tags-input pattern.
+     */
+    clearSearchAfterCreate() {
+        this._state.search = "";
+        this._state.highlightedIndex = -1;
+        const shadow = this.shadowRoot;
+        if (!shadow)
+            return;
+        const desktopInput = shadow.querySelector(".dropdown-search-input");
+        const mobileInput = shadow.querySelector(".mobile-search-input");
+        if (desktopInput)
+            desktopInput.value = "";
+        if (mobileInput)
+            mobileInput.value = "";
+        const allTags = this.getTagElements().map((el) => this.getTagData(el));
+        this._state.filteredTags = allTags;
+        this.updateTagVisibility(allTags, allTags);
+        this.updateOptionsVisibility(true);
+        this.clearHighlights(allTags);
+        this.updateMobileSelectedState();
+        (desktopInput ?? mobileInput)?.focus();
+    }
     blockSearchClick(e) {
         e.stopPropagation();
         e.preventDefault();
@@ -868,11 +1033,14 @@ export class TySelect extends TyComponent {
             case "Enter":
                 e.preventDefault();
                 e.stopPropagation();
-                // Select highlighted tag if any
+                // A highlighted (arrowed-to) option always wins — the user picked
+                // it explicitly, so allow-create must not shadow it with a new one.
                 if (currentHighlightedIndex >= 0 &&
                     currentHighlightedIndex < tagsCount) {
-                    const tag = filteredTags[currentHighlightedIndex];
-                    this.handleTagClick({ target: tag.element });
+                    this.selectByTag(filteredTags[currentHighlightedIndex].element);
+                }
+                else {
+                    this.tryCreateFromSearch();
                 }
                 break;
             case "ArrowUp":
@@ -1078,7 +1246,7 @@ export class TySelect extends TyComponent {
      */
     setupTriggerSlot() {
         const shadow = this.shadowRoot;
-        const stub = shadow.querySelector(".multiselect-stub");
+        const stub = shadow.querySelector(".select-stub");
         const slot = shadow.querySelector('slot[name="trigger"]');
         if (!stub || !slot)
             return;
@@ -1091,12 +1259,13 @@ export class TySelect extends TyComponent {
      */
     setupEventListeners() {
         const shadow = this.shadowRoot;
-        const stub = shadow.querySelector(".multiselect-stub");
+        const stub = shadow.querySelector(".select-stub");
         const optionsSlot = shadow.querySelector("#options-slot");
         const searchInput = shadow.querySelector(".dropdown-search-input");
         if (stub) {
             this._stubClickHandler = this.handleStubClick.bind(this);
             stub.addEventListener("click", this._stubClickHandler);
+            stub.addEventListener("keydown", this.handleStubKeydown.bind(this));
         }
         this.setupTriggerSlot();
         // Add tag click handler to slot
@@ -1143,11 +1312,13 @@ export class TySelect extends TyComponent {
     renderDesktop() {
         const shadow = this.shadowRoot;
         // Only set innerHTML and setup listeners if container doesn't exist
-        if (!shadow.querySelector(".multiselect-container")) {
+        if (!shadow.querySelector(".select-container")) {
             const stubClasses = this.buildStubClasses();
+            const listboxId = `select-listbox-${getElementHash(this)}`;
+            const labelId = `select-label-${getElementHash(this)}`;
             const labelHtml = this._label
                 ? `
-        <label class="ty-field-label">
+        <label class="ty-field-label" id="${labelId}">
           ${this._label}
           ${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ""}
         </label>
@@ -1155,11 +1326,17 @@ export class TySelect extends TyComponent {
                 : "";
             const searchPlaceholder = "Search...";
             shadow.innerHTML = `
-        <div class="multiselect-container dropdown-mode-desktop">
+        <div class="select-container dropdown-mode-desktop">
           ${labelHtml}
           <div class="dropdown-wrapper">
-            <div class="dropdown-stub multiselect-stub ${stubClasses}"
-                 ${this._disabled ? "disabled" : ""}>
+            <div class="dropdown-stub select-stub ${stubClasses}"
+                 role="combobox"
+                 aria-haspopup="listbox"
+                 aria-expanded="false"
+                 aria-controls="${listboxId}"
+                 ${this._label ? `aria-labelledby="${labelId}"` : ""}
+                 tabindex="${this._disabled ? "-1" : "0"}"
+                 ${this._disabled ? 'disabled aria-disabled="true"' : ""}>
               <slot name="trigger">
                 <slot name="start"></slot>
                 <slot name="selected"></slot>
@@ -1187,7 +1364,7 @@ export class TySelect extends TyComponent {
                 </div>
               </div>
               <div class="dropdown-options-wrapper">
-                <div class="dropdown-options">
+                <div class="dropdown-options" id="${listboxId}" role="listbox" ${this._multiple ? 'aria-multiselectable="true"' : ""}>
                   <slot id="options-slot"></slot>
                 </div>
                 <div class="dropdown-loading" aria-hidden="true">
@@ -1216,11 +1393,13 @@ export class TySelect extends TyComponent {
     renderMobile() {
         const shadow = this.shadowRoot;
         // Only set innerHTML and setup listeners if container doesn't exist
-        if (!shadow.querySelector(".multiselect-container")) {
+        if (!shadow.querySelector(".select-container")) {
             const stubClasses = this.buildStubClasses();
+            const listboxId = `select-listbox-${getElementHash(this)}`;
+            const labelId = `select-label-${getElementHash(this)}`;
             const labelHtml = this._label
                 ? `
-        <label class="ty-field-label">
+        <label class="ty-field-label" id="${labelId}">
           ${this._label}
           ${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ""}
         </label>
@@ -1256,11 +1435,17 @@ export class TySelect extends TyComponent {
         </div>
       `;
             shadow.innerHTML = `
-        <div class="multiselect-container dropdown-mode-mobile">
+        <div class="select-container dropdown-mode-mobile">
           ${labelHtml}
           <div class="dropdown-wrapper">
-            <div class="dropdown-stub multiselect-stub ${stubClasses}"
-                 ${this._disabled ? "disabled" : ""}>
+            <div class="dropdown-stub select-stub ${stubClasses}"
+                 role="combobox"
+                 aria-haspopup="listbox"
+                 aria-expanded="false"
+                 aria-controls="${listboxId}"
+                 ${this._label ? `aria-labelledby="${labelId}"` : ""}
+                 tabindex="${this._disabled ? "-1" : "0"}"
+                 ${this._disabled ? 'disabled aria-disabled="true"' : ""}>
               <slot name="trigger">
                 <slot name="start"></slot>
                 <slot name="selected"></slot>
@@ -1287,7 +1472,7 @@ export class TySelect extends TyComponent {
                     <div class="section-header">
                       <span class="section-title">${this._availableLabel}</span>
                     </div>
-                    <div class="section-content dropdown-options-wrapper">
+                    <div class="section-content dropdown-options-wrapper" id="${listboxId}" role="listbox" ${this._multiple ? 'aria-multiselectable="true"' : ""}>
                       <slot id="options-slot"></slot>
                       <div class="empty-state">${this._noOptionsMessage}</div>
                       <div class="dropdown-loading" aria-hidden="true">
@@ -1317,13 +1502,14 @@ export class TySelect extends TyComponent {
      */
     setupMobileEventListeners() {
         const shadow = this.shadowRoot;
-        const stub = shadow.querySelector(".multiselect-stub");
+        const stub = shadow.querySelector(".select-stub");
         const optionsSlot = shadow.querySelector("#options-slot");
         const searchInput = shadow.querySelector(".mobile-search-input");
         const closeButton = shadow.querySelector(".mobile-close-button");
         const dialog = shadow.querySelector(".mobile-dialog");
         if (stub) {
             stub.addEventListener("click", (e) => this.handleMobileStubClick(e));
+            stub.addEventListener("keydown", (e) => this.handleMobileStubKeydown(e));
         }
         this.setupTriggerSlot();
         // Add tag click handler to slot
@@ -1365,6 +1551,15 @@ export class TySelect extends TyComponent {
         }
         this.openMobileModal();
     }
+    /** Keyboard-open the (closed) mobile stub — see handleStubKeydown for why this is needed. */
+    handleMobileStubKeydown(e) {
+        if (this._disabled || this._readonly || this._state.open)
+            return;
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+            e.preventDefault();
+            this.openMobileModal();
+        }
+    }
     /**
      * Handle mobile tag click - select and potentially close
      */
@@ -1403,6 +1598,9 @@ export class TySelect extends TyComponent {
     shouldShowSearch() {
         if (this._externalSearch)
             return true;
+        // allow-create's only input mechanism IS the search box.
+        if (this._allowCreate)
+            return true;
         if (this._searchable === "always")
             return true;
         if (this._searchable === "never")
@@ -1438,7 +1636,7 @@ export class TySelect extends TyComponent {
      */
     updateSelectionDisplay() {
         const shadow = this.shadowRoot;
-        const stub = shadow.querySelector(".multiselect-stub");
+        const stub = shadow.querySelector(".select-stub");
         if (!stub)
             return;
         // Selection comes from STATE, not from scanning option elements —
@@ -1610,6 +1808,12 @@ export class TySelect extends TyComponent {
     set size(value) {
         this.setProperty("size", value);
     }
+    get flavor() {
+        return this.getProperty("flavor");
+    }
+    set flavor(value) {
+        this.setProperty("flavor", value);
+    }
     get form() {
         return this._internals.form;
     }
@@ -1685,6 +1889,24 @@ TySelect.properties = {
         default: false,
         aliases: { "external-search": true },
     },
+    // Enter on unmatched search text mints a new <ty-option> — forces the
+    // search row on (same as external-search: the input IS the mechanism).
+    allowCreate: {
+        type: "boolean",
+        visual: true,
+        default: false,
+        aliases: { "allow-create": true },
+    },
+    // Opt-in normalizer for the value minted by allow-create (label/display
+    // text is always kept verbatim). 'none' (default): value === typed text.
+    // 'slug': lowercase, spaces → '_', strips anything else non-alphanumeric.
+    createTransform: {
+        type: "string",
+        visual: false,
+        default: "none",
+        aliases: { "create-transform": true },
+        coerce: (v) => (v === "slug" ? "slug" : "none"),
+    },
     // Search row visibility: 'auto' (default) shows it only for long option
     // lists; searchable / searchable="true" forces it on, searchable="false"
     // off. external-search always shows it (the input IS the mechanism).
@@ -1704,8 +1926,13 @@ TySelect.properties = {
         type: "string",
         visual: true,
         default: "md",
+        // Fields come in exactly three sizes; legacy xs/xl map to sm/lg.
         validate: (v) => ["sm", "md", "lg"].includes(v),
         coerce: (v) => {
+            if (v === "xs")
+                return "sm";
+            if (v === "xl")
+                return "lg";
             if (!["sm", "md", "lg"].includes(v)) {
                 console.warn(`[ty-select] Invalid size. Using md.`);
                 return "md";
@@ -1739,6 +1966,14 @@ TySelect.properties = {
         visual: true,
         default: false,
     },
+    // Any string is accepted: built-ins get static CSS, other identifiers
+    // become custom flavors (see _syncCustomFlavor), garbage degrades to
+    // the default look.
+    flavor: {
+        type: "string",
+        visual: true,
+        default: "neutral",
+    },
 };
 // Register the custom element
 if (!customElements.get("ty-select")) {