@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-combobox.js

@@ -0,0 +1,816 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { srOnly } from "./sr-only.js";
+import { trackAnchor, placeBelow } from "./floating.js";
+import "./tt-icon.js";
+let uid = 0;
+/**
+ * A select you can type into.
+ *
+ * WHERE IT SITS. tt-select is right up to roughly twenty options: you open
+ * it, you look, you pick. Past that, looking stops working and you need to
+ * narrow the list by typing. That is the only difference in intent, but it
+ * changes the control's shape: the trigger becomes a text input rather
+ * than a button, which brings a filtering state, a no-results state, and
+ * the problem below. Keeping tt-select simple was worth a second component.
+ *
+ * THE AWKWARD BIT, which every combobox has to answer. One input has two
+ * jobs: it displays the current selection, and it holds what you are
+ * typing. Those conflict the moment you type, because the selection is
+ * still set but the text no longer shows it.
+ *
+ * This resolves it by treating the two as different modes rather than one
+ * value. Closed, the input shows the selected option's label. Open, it
+ * shows the query, which starts empty so the whole list is visible. Close
+ * without choosing and the query is discarded, so the field can never be
+ * left displaying text that is not the actual value. The selection only
+ * ever changes by choosing an option.
+ */
+let TTCombobox = class TTCombobox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this.attachInternals();
+        /* See tt-quantity: a form-associated element submits under its name
+           CONTENT ATTRIBUTE, so this has to reflect. */
+        this.name = "";
+        this.value = "";
+        this.options = [];
+        this.label = "";
+        this.placeholder = "Search or select";
+        this.emptyText = "No matches";
+        this.error = "";
+        this.disabled = false;
+        this.required = false;
+        // small | medium | large, as on tt-input (Oct 2026), so a row of
+        // fields can share one height. Reflected: the sizes are :host rules.
+        this.size = "medium";
+        // Named for a screen reader, invisible on screen. Same contract as
+        // tt-input and tt-checkbox.
+        this.labelHidden = false;
+        // Offer a clear button once something is chosen.
+        this.clearable = false;
+        this.open = false;
+        // What has been typed this session. Never the selection.
+        this.query = "";
+        // Where the arrow keys are. Not the selection: you can move the cursor
+        // over an option without choosing it.
+        this.activeIndex = -1;
+        this.instanceId = ++uid;
+        this.listId = `tt-combobox-list-${this.instanceId}`;
+        this.handleDocumentClick = (event) => {
+            if (!event.composedPath().includes(this))
+                this.closeList(false);
+        };
+        this.reposition = () => {
+            if (this.open)
+                this.position();
+        };
+    }
+    static { this.formAssociated = true; }
+    get form() {
+        return this.internals.form;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncFormState();
+    }
+    disconnectedCallback() {
+        this.removeGlobalListeners();
+        super.disconnectedCallback();
+    }
+    formResetCallback() {
+        this.value = "";
+        this.query = "";
+    }
+    formStateRestoreCallback(state) {
+        this.value = state ?? "";
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value);
+        if (this.required && !this.value) {
+            this.internals.setValidity({ valueMissing: true }, "Please choose an option.", this.input ?? undefined);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    /* ---- derived ---- */
+    get selected() {
+        return this.options.find((o) => o.value === this.value);
+    }
+    /*
+      Named "filtered", not "matches". Element already has a matches()
+      method, and shadowing a built-in DOM member breaks the element type
+      outright - the same trap as naming a property "title".
+  
+      Substring, case-insensitive, on the label. Deliberately not fuzzy
+      matching: fuzzy ranks results in an order the user cannot predict,
+      which is fine for a command palette and wrong for a field where they
+      already know the name of the thing they want.
+    */
+    /*
+      Matches are RANKED by where they hit, not just whether they hit.
+  
+      A plain `label.includes(q)` is fine for a list of twelve and useless
+      for a list of hundreds: in a car catalogue, typing "a" matched 181 of
+      248 options, because almost every label contains an "a" somewhere, and
+      they came back in whatever order the consumer happened to supply. The
+      first keystroke should narrow the list, not shuffle it.
+  
+      Four tiers, and the order between them is the whole point. An exact
+      label beats a label that starts with the query, which beats a label
+      where some WORD starts with it ("x5" finding "BMW X5"), which beats a
+      match buried mid-word. Ties keep the order the consumer gave, which is
+      usually already meaningful - most popular first, say - so the sort has
+      to be stable, and Array.prototype.sort is only stable with respect to
+      the input order. Mapping to indexed pairs first is what guarantees it.
+    */
+    score(label, q) {
+        const l = label.toLowerCase();
+        if (l === q)
+            return 4;
+        if (l.startsWith(q))
+            return 3;
+        // \b would not fire after "-" or "/", which is exactly where model
+        // names break: "E-Class", "CR-V".
+        if (l.split(/[\s\-/(),.]+/).some((word) => word.startsWith(q)))
+            return 2;
+        if (l.includes(q))
+            return 1;
+        return 0;
+    }
+    get filtered() {
+        const q = this.query.trim().toLowerCase();
+        if (q === "")
+            return this.options;
+        return this.options
+            .map((option, index) => ({ option, index, score: this.score(option.label, q) }))
+            .filter((entry) => entry.score > 0)
+            .sort((a, b) => b.score - a.score || a.index - b.index)
+            .map((entry) => entry.option);
+    }
+    /* ---- open / close ---- */
+    openList() {
+        if (this.disabled || this.open)
+            return;
+        this.open = true;
+        // Empty, so opening shows everything. Pre-filling with the current
+        // label would filter the list down to the thing already chosen, which
+        // is the least useful list possible.
+        this.query = "";
+        this.activeIndex = this.filtered.findIndex((o) => o.value === this.value);
+        document.addEventListener("click", this.handleDocumentClick);
+        this.untrack = trackAnchor(this, this.reposition);
+    }
+    closeList(refocus = true) {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.activeIndex = -1;
+        // Discard the query. The input goes back to showing the selection, so
+        // it can never be left displaying something that is not the value.
+        this.query = "";
+        this.removeGlobalListeners();
+        if (refocus)
+            this.input?.focus();
+    }
+    removeGlobalListeners() {
+        document.removeEventListener("click", this.handleDocumentClick);
+        this.untrack?.();
+        this.untrack = undefined;
+    }
+    /**
+     * Clicking the field opens the list. FOCUS DOES NOT.
+     *
+     * This looks like a downgrade and is the opposite. Opening on focus
+     * creates a loop that is invisible until somebody uses a real mouse:
+     * choosing an option calls closeList, closeList returns focus to the
+     * input so a keyboard user does not lose their place, that focus fires
+     * the focus handler, and the list reopens the instant it closes. The
+     * chosen value is set correctly, so it looks purely like a broken menu.
+     *
+     * It survived a headless test because a synthetic .click() never moves
+     * focus off the input, so the focus() inside closeList is a no-op and
+     * dispatches nothing. Only a real pointer, which blurs the input on
+     * mousedown, makes it fire.
+     *
+     * Every way a person actually asks for the list is still covered: click
+     * the field here, type (handleInput opens), or press ArrowDown/ArrowUp.
+     * Only tabbing THROUGH the field no longer explodes a listbox open,
+     * which matches the ARIA combobox pattern anyway.
+     */
+    handleFieldClick() {
+        if (this.disabled)
+            return;
+        this.input?.focus();
+        // The list is a sibling of the field, not a child, so an option click
+        // never bubbles back through here and cannot re-open what it closed.
+        this.openList();
+    }
+    /* ---- selection ---- */
+    choose(option) {
+        if (option.disabled)
+            return;
+        this.value = option.value;
+        this.closeList();
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.value = "";
+        this.query = "";
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { value: "" },
+            bubbles: true,
+            composed: true,
+        }));
+        this.input?.focus();
+    }
+    /* ---- input ---- */
+    handleInput(event) {
+        if (!this.open)
+            this.openList();
+        this.query = event.target.value;
+        // Typing invalidates wherever the cursor was, so put it on the best
+        // remaining candidate rather than leaving it pointing at nothing.
+        this.activeIndex = this.filtered.length > 0 ? 0 : -1;
+    }
+    move(delta) {
+        const list = this.filtered;
+        if (list.length === 0)
+            return;
+        let next = this.activeIndex;
+        for (let i = 0; i < list.length; i++) {
+            next = (next + delta + list.length) % list.length;
+            if (!list[next].disabled)
+                break;
+        }
+        this.activeIndex = next;
+        this.scrollActiveIntoView();
+    }
+    scrollActiveIntoView() {
+        this.updateComplete.then(() => {
+            const items = this.list?.querySelectorAll("li");
+            items?.[this.activeIndex]?.scrollIntoView({ block: "nearest" });
+        });
+    }
+    handleKeydown(event) {
+        if (this.disabled)
+            return;
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                if (this.open)
+                    this.move(1);
+                else
+                    this.openList();
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                if (!this.open)
+                    this.openList();
+                this.move(-1);
+                break;
+            case "Home":
+                if (this.open) {
+                    event.preventDefault();
+                    this.activeIndex = -1;
+                    this.move(1);
+                }
+                break;
+            case "End":
+                if (this.open) {
+                    event.preventDefault();
+                    this.activeIndex = 0;
+                    this.move(-1);
+                }
+                break;
+            case "Enter": {
+                // Only swallow Enter while a choice is actually pending, so the
+                // key still submits the surrounding form the rest of the time.
+                const option = this.filtered[this.activeIndex];
+                if (this.open && option) {
+                    event.preventDefault();
+                    this.choose(option);
+                }
+                break;
+            }
+            case "Escape":
+                if (this.open) {
+                    event.preventDefault();
+                    this.closeList();
+                }
+                break;
+            case "Tab":
+                this.closeList(false);
+                break;
+        }
+    }
+    /* ---- positioning ---- */
+    updated(changed) {
+        if (changed.has("value") || changed.has("required")) {
+            this.syncFormState();
+        }
+        if (changed.has("open") || (this.open && changed.has("query"))) {
+            this.syncPopover();
+        }
+    }
+    syncPopover() {
+        const list = this.list;
+        if (!list)
+            return;
+        if (this.open) {
+            if (!list.matches(":popover-open"))
+                list.showPopover();
+            this.position();
+        }
+        else if (list.matches(":popover-open")) {
+            list.hidePopover();
+        }
+    }
+    position() {
+        if (!this.field || !this.list)
+            return;
+        // A field's dropdown should be exactly as wide as the field, which is
+        // the one thing placeBelow does not decide for you. Set BEFORE placing:
+        // the width decides how options wrap, so the height placeBelow
+        // measures to choose above or below was the previous width's.
+        this.list.style.width = `${this.field.getBoundingClientRect().width}px`;
+        placeBelow(this.field, this.list, { align: "start" });
+    }
+    focus(options) {
+        this.input?.focus(options);
+    }
+    static { this.styles = [srOnly, css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      /* A grid or flex item defaults to min-width: auto, which floors it at
+         its MIN-CONTENT width. See tt-input for what that broke. */
+      min-width: 0;
+
+      display: block;
+      width: 100%;
+      font-family: var(--tt-font-sans);
+    }
+
+    .wrap {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-2);
+    }
+
+    .label {
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+      color: var(--tt-foreground);
+    }
+
+    .req {
+      margin-left: 2px;
+      color: var(--tt-destructive);
+    }
+
+    /* Matches tt-input's control box, because this IS a field. The border
+       lives here so the icons sit inside it. */
+    .field {
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+
+      min-height: var(--tt-control-md);
+      padding: 0 13px;
+      box-sizing: border-box;
+
+      border: 1px solid var(--tt-input);
+      border-radius: var(--tt-group-radius, var(--tt-radius));
+
+      background: var(--tt-field);
+      color: var(--tt-foreground);
+
+      cursor: text;
+
+      transition: border-color var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    /* The same three steps as tt-input. */
+    :host([size="small"]) .field {
+      min-height: var(--tt-control-sm);
+      padding: 0 11px;
+    }
+
+    :host([size="large"]) .field {
+      min-height: var(--tt-control-lg);
+      padding: 0 16px;
+    }
+
+    :host([size="large"]) input {
+      font-size: var(--tt-text-md);
+    }
+
+    /* iOS zooms the viewport when a focused field is under 16px. tt-input
+       and tt-textarea guarded against it; this field did not. */
+    @media (max-width: 480px) {
+      input,
+      :host([size="large"]) input {
+        font-size: 16px;
+      }
+    }
+
+    .field:hover:not(.disabled):not(.error) {
+      border-color: var(--tt-border-strong);
+    }
+
+    .field:focus-within {
+      border-color: var(--tt-ring);
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    .field.error {
+      border-color: var(--tt-destructive);
+    }
+
+    .field.error:focus-within {
+      outline-color: var(--tt-destructive);
+    }
+
+    /*
+      A disabled FIELD does not fade. It takes the muted surface and muted
+      text, the same as tt-input and tt-textarea, so a disabled row of
+      fields reads as one state. It used to fade the whole host as well,
+      which made a disabled select look different from a disabled input
+      beside it.
+    */
+    .field.disabled {
+      background: var(--tt-muted);
+      color: var(--tt-muted-foreground);
+      cursor: not-allowed;
+    }
+
+    input {
+      flex: 1;
+      min-width: 0;
+
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: inherit;
+
+      font: inherit;
+      font-size: var(--tt-text-sm);
+      /* font: inherit also brings the PAGE's line-height in. Inside a
+         paragraph at line-height 2 the input was 28px tall, and a compact
+         small combobox grew to 30px beside 28px controls. normal is what
+         tt-input's input keeps. */
+      line-height: normal;
+
+      cursor: inherit;
+    }
+
+    input:focus {
+      outline: none;
+    }
+
+    input::placeholder {
+      color: var(--tt-muted-foreground);
+    }
+
+    .chevron {
+      color: var(--tt-muted-foreground);
+      transition: transform var(--tt-duration-fast) var(--tt-ease);
+    }
+
+    /* Keyed off a class, not :host([open]). The open flag is @state, so it
+       never reaches the DOM and :host([open]) can never match. */
+    .field.open .chevron {
+      transform: rotate(180deg);
+    }
+
+    .clear {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      /* Same size as tt-search's clear button: two fields, one clear
+         control. It was 20px here and 24px there. */
+      width: calc(var(--tt-control-sm) - 8px);
+      height: calc(var(--tt-control-sm) - 8px);
+
+      padding: 0;
+      border: none;
+      border-radius: var(--tt-radius-full);
+
+      background: transparent;
+      color: var(--tt-muted-foreground);
+
+      cursor: pointer;
+
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .clear:hover {
+      background: var(--tt-accent);
+      color: var(--tt-foreground);
+    }
+
+    .clear:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    /* Top layer, so no ancestor's overflow can clip it. Position and
+       width both come from script. */
+    ul {
+      position: fixed;
+      margin: 0;
+      padding: var(--tt-space-1);
+
+      max-height: 260px;
+      overflow-y: auto;
+      box-sizing: border-box;
+
+      list-style: none;
+
+      background: var(--tt-popover);
+      color: var(--tt-popover-foreground);
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius);
+      box-shadow: var(--tt-elevation-2);
+    }
+
+    /* In and out of the top layer, as on tt-dropdown-menu: see the note
+       there for why display and overlay ride along, and why translate. */
+    ul {
+      transition:
+        opacity var(--tt-duration-fast) var(--tt-ease-in),
+        translate var(--tt-duration-fast) var(--tt-ease-in),
+        overlay var(--tt-duration-fast) allow-discrete,
+        display var(--tt-duration-fast) allow-discrete;
+    }
+
+    ul:popover-open {
+      transition-duration: var(--tt-duration-slow);
+      transition-timing-function: var(--tt-ease-out);
+    }
+
+    @starting-style {
+      ul:popover-open {
+        opacity: 0;
+        translate: 0 -4px;
+      }
+    }
+
+    /* Closed, and closing: clicks during the fade reach the page. */
+    ul:not(:popover-open) {
+      display: none;
+      opacity: 0;
+      translate: 0 -4px;
+      pointer-events: none;
+    }
+
+    li {
+      padding: var(--tt-space-2) var(--tt-space-3);
+      border-radius: var(--tt-radius-sm);
+
+      font-size: var(--tt-text-sm);
+      cursor: pointer;
+
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    li[aria-selected="true"] {
+      font-weight: var(--tt-weight-semibold);
+    }
+
+    li.active {
+      background: var(--tt-accent);
+      color: var(--tt-accent-foreground);
+    }
+
+    li[aria-disabled="true"] {
+      opacity: var(--tt-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    .empty {
+      padding: var(--tt-space-3);
+      font-size: var(--tt-text-sm);
+      color: var(--tt-muted-foreground);
+      text-align: center;
+      cursor: default;
+    }
+
+    .error-text {
+      color: var(--tt-destructive);
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+    }
+
+  `]; }
+    render() {
+        const filtered = this.filtered;
+        const errorId = this.error ? `tt-combobox-error-${this.instanceId}` : undefined;
+        const labelId = `tt-combobox-label-${this.instanceId}`;
+        // Open means "showing the query", closed means "showing the value".
+        const shown = this.open ? this.query : (this.selected?.label ?? "");
+        return html `
+      <div class="wrap">
+        ${this.label
+            ? html `
+              <span
+                class="label ${this.labelHidden ? "sr-only" : ""}"
+                part="label"
+                id=${labelId}
+              >
+                ${this.label}
+                ${this.required
+                ? html `<span class="req" aria-hidden="true">*</span>`
+                : ""}
+              </span>
+            `
+            : ""}
+
+        <div
+          class="field ${this.open ? "open" : ""} ${this.error
+            ? "error"
+            : ""} ${this.disabled ? "disabled" : ""}"
+          part="field"
+          @click=${this.handleFieldClick}
+        >
+          <input
+            part="input"
+            type="text"
+            role="combobox"
+            aria-labelledby=${ifDefined(this.label ? labelId : undefined)}
+            autocomplete="off"
+            spellcheck="false"
+            .value=${shown}
+            placeholder=${this.selected && !this.open
+            ? this.selected.label
+            : this.placeholder}
+            aria-expanded=${this.open ? "true" : "false"}
+            aria-controls=${this.listId}
+            aria-autocomplete="list"
+            aria-activedescendant=${this.open && this.activeIndex >= 0
+            ? `${this.listId}-${this.activeIndex}`
+            : ""}
+            aria-required=${this.required ? "true" : "false"}
+          aria-invalid=${this.error ? "true" : "false"}
+            aria-describedby=${errorId ?? ""}
+            ?disabled=${this.disabled}
+            @input=${this.handleInput}
+            @keydown=${this.handleKeydown}
+          />
+
+          ${this.clearable && this.value && !this.disabled
+            ? html `
+                <button
+                  class="clear"
+                  type="button"
+                  aria-label="Clear selection"
+                  @click=${this.clear}
+                >
+                  <tt-icon name="x" size="14px"></tt-icon>
+                </button>
+              `
+            : ""}
+
+          <tt-icon
+            class="chevron"
+            name="chevron-down"
+            size="16px"
+          ></tt-icon>
+        </div>
+
+        <ul part="list" id=${this.listId} popover="manual" role="listbox">
+          ${filtered.length === 0
+            ? html `<li class="empty" role="presentation">${this.emptyText}</li>`
+            : filtered.map((option, index) => html `
+                  <li
+                    id=${`${this.listId}-${index}`}
+                    role="option"
+                    class=${index === this.activeIndex ? "active" : ""}
+                    aria-selected=${option.value === this.value
+                ? "true"
+                : "false"}
+                    aria-disabled=${option.disabled ? "true" : "false"}
+                    @click=${() => this.choose(option)}
+                    @mousemove=${() => (this.activeIndex = index)}
+                  >
+                    ${option.label}
+                  </li>
+                `)}
+        </ul>
+
+        <!--
+          The list changes as you type, and nothing said so. Focus stays in
+          the input, so a screen-reader user typed into silence, and an
+          empty result ("No matches") was never spoken at all. Polite, and
+          only while there is a query, so opening the list stays quiet.
+        -->
+        <span class="sr-only" role="status">
+          ${this.open && this.query.trim()
+            ? filtered.length === 0
+                ? this.emptyText
+                : `${filtered.length} ${filtered.length === 1 ? "result" : "results"}`
+            : ""}
+        </span>
+
+        ${this.error
+            ? html `
+              <span id=${ifDefined(errorId)} class="error-text" role="alert">
+                ${this.error}
+              </span>
+            `
+            : ""}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTCombobox.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TTCombobox.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], TTCombobox.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], TTCombobox.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TTCombobox.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-text" })
+], TTCombobox.prototype, "emptyText", void 0);
+__decorate([
+    property({ type: String })
+], TTCombobox.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTCombobox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTCombobox.prototype, "required", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTCombobox.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "label-hidden", reflect: true })
+], TTCombobox.prototype, "labelHidden", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTCombobox.prototype, "clearable", void 0);
+__decorate([
+    state()
+], TTCombobox.prototype, "open", void 0);
+__decorate([
+    state()
+], TTCombobox.prototype, "query", void 0);
+__decorate([
+    state()
+], TTCombobox.prototype, "activeIndex", void 0);
+__decorate([
+    query("input")
+], TTCombobox.prototype, "input", void 0);
+__decorate([
+    query(".field")
+], TTCombobox.prototype, "field", void 0);
+__decorate([
+    query("ul")
+], TTCombobox.prototype, "list", void 0);
+TTCombobox = __decorate([
+    customElement("tt-combobox")
+], TTCombobox);
+export { TTCombobox };
+//# sourceMappingURL=tt-combobox.js.map