@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-select.js

@@ -0,0 +1,662 @@
+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;
+let TTSelect = class TTSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this.attachInternals();
+        /*
+          Reflected, and it has to be.
+      
+          A form-associated custom element is submitted under its name CONTENT
+          ATTRIBUTE, not its JS property. Without reflect, setting .name = "x"
+          from script leaves the attribute absent and the field vanishes from
+          FormData with no error anywhere. It only appeared to work because
+          every call site so far wrote name="x" in markup, which sets the
+          attribute directly.
+        */
+        this.name = "";
+        this.value = "";
+        this.placeholder = "Select an option";
+        this.options = [];
+        this.label = "";
+        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;
+        this.open = false;
+        // Where the arrow keys currently are. Not the same as the selection:
+        // you can move the cursor without choosing anything.
+        this.activeIndex = -1;
+        this.instanceId = ++uid;
+        this.listId = `tt-select-list-${this.instanceId}`;
+        // Arrow function so the reference stays stable and removeEventListener
+        // can find it, and so `this` is the component.
+        this.handleDocumentClick = (event) => {
+            // composedPath sees through shadow boundaries. event.target alone is
+            // retargeted to the host and would report our own clicks as outside.
+            if (!event.composedPath().includes(this)) {
+                this.closeList(false);
+            }
+        };
+        this.handleReposition = () => {
+            if (this.open)
+                this.positionList();
+        };
+    }
+    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 = "";
+    }
+    formStateRestoreCallback(state) {
+        this.value = state ?? "";
+    }
+    updated(changed) {
+        if (changed.has("value") || changed.has("required")) {
+            this.syncFormState();
+        }
+        if (changed.has("open")) {
+            this.syncPopover();
+        }
+    }
+    /* ---- form ---- */
+    syncFormState() {
+        this.internals.setFormValue(this.value);
+        const missing = this.required && !this.value;
+        if (missing) {
+            this.internals.setValidity({ valueMissing: true }, "Please choose an option.", this.trigger ?? undefined);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    /* ---- data ---- */
+    get selectedOption() {
+        return this.options.find((o) => o.value === this.value);
+    }
+    /* ---- open / close ---- */
+    openList() {
+        if (this.disabled || this.open)
+            return;
+        this.open = true;
+        // Start the cursor on the current selection, or the top of the list.
+        const index = this.options.findIndex((o) => o.value === this.value);
+        this.activeIndex = index >= 0 ? index : 0;
+        // The click that opened this is still propagating, but
+        // handleDocumentClick ignores clicks whose path includes this element,
+        // so it will not immediately close again.
+        document.addEventListener("click", this.handleDocumentClick);
+        // See floating.ts: scroll events do not cross shadow boundaries, so a
+        // window listener misses the container that is actually scrolling.
+        this.untrack = trackAnchor(this, this.handleReposition);
+    }
+    closeList(refocus = true) {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.activeIndex = -1;
+        this.removeGlobalListeners();
+        if (refocus)
+            this.trigger?.focus();
+    }
+    removeGlobalListeners() {
+        document.removeEventListener("click", this.handleDocumentClick);
+        this.untrack?.();
+        this.untrack = undefined;
+    }
+    toggleOpen() {
+        if (this.open)
+            this.closeList();
+        else
+            this.openList();
+    }
+    /* ---- selection ---- */
+    selectOption(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,
+        }));
+    }
+    /* ---- keyboard ---- */
+    moveActive(delta) {
+        const count = this.options.length;
+        if (count === 0)
+            return;
+        let next = this.activeIndex;
+        // Step until a non-disabled option is found, at most one full lap.
+        for (let i = 0; i < count; i++) {
+            next = (next + delta + count) % count;
+            if (!this.options[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.moveActive(1);
+                else
+                    this.openList();
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                if (this.open) {
+                    this.moveActive(-1);
+                }
+                else {
+                    this.openList();
+                    this.activeIndex = this.options.length - 1;
+                }
+                break;
+            case "Home":
+                if (this.open) {
+                    event.preventDefault();
+                    this.activeIndex = -1;
+                    this.moveActive(1);
+                }
+                break;
+            case "End":
+                if (this.open) {
+                    event.preventDefault();
+                    this.activeIndex = 0;
+                    this.moveActive(-1);
+                }
+                break;
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                if (this.open) {
+                    const option = this.options[this.activeIndex];
+                    if (option)
+                        this.selectOption(option);
+                }
+                else {
+                    this.openList();
+                }
+                break;
+            case "Escape":
+                if (this.open) {
+                    event.preventDefault();
+                    this.closeList();
+                }
+                break;
+            case "Tab":
+                this.closeList(false);
+                break;
+        }
+    }
+    /* ---- positioning ---- */
+    // The list is rendered in the browser's top layer via the popover API,
+    // so no ancestor's overflow:hidden can clip it. Its position has to be
+    // set from script because the top layer is outside normal flow.
+    syncPopover() {
+        const list = this.list;
+        if (!list)
+            return;
+        if (this.open) {
+            // Shown first: a closed popover is display:none and measures 0x0,
+            // and placeBelow needs the list's real height to decide whether it
+            // fits below the field. Same order as tt-dropdown-menu.
+            if (!list.matches(":popover-open"))
+                list.showPopover();
+            this.positionList();
+        }
+        else if (list.matches(":popover-open")) {
+            list.hidePopover();
+        }
+    }
+    /*
+      The shared placeBelow, like tt-combobox, tt-dropdown-menu and
+      tt-filter. This used to be its own three lines that always opened
+      DOWNWARDS: a select near the bottom of the screen opened its list off
+      the bottom edge, and nothing kept it inside the viewport sideways.
+      Width first, because the width decides how the options wrap, which
+      decides the height placeBelow measures.
+    */
+    positionList() {
+        const trigger = this.trigger;
+        const list = this.list;
+        if (!trigger || !list)
+            return;
+        list.style.width = `${trigger.getBoundingClientRect().width}px`;
+        placeBelow(trigger, list, { align: "start" });
+    }
+    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: inline-block;
+      width: 100%;
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .field {
+      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);
+    }
+
+    /* Styled to match tt-input, not tt-button: this is a field. */
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--tt-space-2);
+
+      width: 100%;
+      box-sizing: border-box;
+      min-height: var(--tt-control-md);
+
+      /* Horizontal only, like tt-input: min-height sets the height. The
+         10px of vertical padding this had was ADDED to the text, so a
+         select measured 41px beside a 36px input in the same row. */
+      padding: 0 13px;
+
+      border: 1px solid var(--tt-input);
+      /* tt-button-group flattens this per position, so controls that
+         sit together share one edge instead of stacking two. */
+      border-radius: var(--tt-group-radius, var(--tt-radius));
+
+      background: var(--tt-field);
+      color: var(--tt-foreground);
+
+      font-family: inherit;
+      font-size: var(--tt-text-sm);
+      text-align: left;
+
+      cursor: pointer;
+
+      transition:
+        border-color var(--tt-duration-normal) var(--tt-ease),
+        box-shadow var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    /* The same three steps as tt-input: height from the control token,
+       horizontal padding only. */
+    :host([size="small"]) button {
+      min-height: var(--tt-control-sm);
+      padding: 0 11px;
+    }
+
+    :host([size="large"]) button {
+      min-height: var(--tt-control-lg);
+      padding: 0 16px;
+      font-size: var(--tt-text-md);
+    }
+
+    button:hover:not(:disabled):not(.error) {
+      border-color: var(--tt-border-strong);
+    }
+
+    button:focus-visible {
+      border-color: var(--tt-ring);
+
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    /*
+      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.
+    */
+    button:disabled {
+      cursor: not-allowed;
+      background: var(--tt-muted);
+      color: var(--tt-muted-foreground);
+    }
+
+    button.error {
+      border-color: var(--tt-destructive);
+    }
+
+    /* The ring carries the error colour too, as on tt-input. */
+    button.error:focus-visible {
+      border-color: var(--tt-destructive);
+      outline-color: var(--tt-destructive);
+    }
+
+    /*
+      One line, cut with an ellipsis. A label longer than the field used
+      to WRAP, and two lines of text made the trigger taller than the
+      control height: 42px beside a 40px input in a narrow column. An
+      <input> never wraps, so a select must not either.
+    */
+    .value {
+      flex: 1;
+      min-width: 0;
+
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .placeholder {
+      color: var(--tt-muted-foreground);
+    }
+
+    .chevron {
+      flex: 0 0 auto;
+      color: var(--tt-muted-foreground);
+      transition: transform var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    /* aria-expanded, not :host([open]). The open flag is @state, so it never
+       reaches the host as an attribute and the old rule never matched:
+       the chevron simply did not turn. */
+    button[aria-expanded="true"] .chevron {
+      transform: rotate(180deg);
+    }
+
+    /* Top layer: position is fixed to the viewport and set from script. */
+    ul {
+      position: fixed;
+      margin: 0;
+      padding: var(--tt-space-1);
+
+      /*
+        positionList() assigns this element the field's exact width, and
+        without border-box that width described the CONTENT only: the 4px
+        padding and 1px border on each side were added on top, so the list
+        hung 10px wider than the field it was supposed to line up with.
+        A 330px field opened a 340px list.
+
+        The app's global reset does not reach in here. Shadow DOM does not
+        inherit a * selector, so every component sets this for itself.
+      */
+      box-sizing: border-box;
+
+      max-height: 260px;
+      overflow-y: auto;
+
+      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);
+
+      z-index: var(--tt-z-dropdown);
+    }
+
+    /* 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;
+
+      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;
+    }
+
+    .error-text {
+      color: var(--tt-destructive);
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+    }
+
+  `]; }
+    // Focus has to be forwarded: focusing the host focuses nothing, since the
+    // control lives in the shadow root. Same as tt-slider and tt-input.
+    focus(options) {
+        this.renderRoot
+            ?.querySelector('button[role="combobox"]')
+            ?.focus(options);
+    }
+    render() {
+        const selected = this.selectedOption;
+        const errorId = this.error
+            ? `tt-select-error-${this.instanceId}`
+            : undefined;
+        /*
+          role="combobox" is NOT a role that takes its name from its content.
+    
+          As a plain <button> the trigger was named by the text inside it.
+          Setting role="combobox" silently removed that, because only certain
+          roles (button, link, heading, option...) support name-from-content
+          and combobox is not one of them. The visible label sits in a
+          sibling span, which names nothing on its own, so the control
+          reached a screen reader as an unnamed combobox.
+        */
+        const labelId = `tt-select-label-${this.instanceId}`;
+        return html `
+      <div class="field">
+        ${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>
+            `
+            : ""}
+
+        <button
+          part="trigger"
+          type="button"
+          class=${this.error ? "error" : ""}
+          role="combobox"
+          aria-labelledby=${ifDefined(this.label ? labelId : undefined)}
+          aria-haspopup="listbox"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls=${this.listId}
+          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}
+          @click=${this.toggleOpen}
+          @keydown=${this.handleKeydown}
+        >
+          <span class="value ${selected ? "" : "placeholder"}">
+            ${selected?.label ?? this.placeholder}
+          </span>
+
+          <tt-icon class="chevron" name="chevron-down" size="16px"></tt-icon>
+        </button>
+
+        <ul
+          part="list"
+          id=${this.listId}
+          popover="manual"
+          role="listbox"
+        >
+          ${this.options.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.selectOption(option)}
+                @mousemove=${() => (this.activeIndex = index)}
+              >
+                ${option.label}
+              </li>
+            `)}
+        </ul>
+
+        ${this.error
+            ? html `
+              <span id=${ifDefined(errorId)} class="error-text" role="alert">
+                ${this.error}
+              </span>
+            `
+            : ""}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTSelect.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TTSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], TTSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Array })
+], TTSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], TTSelect.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TTSelect.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTSelect.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "label-hidden", reflect: true })
+], TTSelect.prototype, "labelHidden", void 0);
+__decorate([
+    state()
+], TTSelect.prototype, "open", void 0);
+__decorate([
+    state()
+], TTSelect.prototype, "activeIndex", void 0);
+__decorate([
+    query("button")
+], TTSelect.prototype, "trigger", void 0);
+__decorate([
+    query("ul")
+], TTSelect.prototype, "list", void 0);
+TTSelect = __decorate([
+    customElement("tt-select")
+], TTSelect);
+export { TTSelect };
+//# sourceMappingURL=tt-select.js.map

package/dist/tt-select.js.map

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

package/dist/tt-skeleton.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from "lit";
+/**
+ * Placeholder shape shown while data loads. Use it in the same layout as
+ * the real content so nothing jumps when the data arrives: a skeleton
+ * that is a different size than what replaces it is worse than a spinner.
+ */
+export declare class TTSkeleton extends LitElement {
+    variant: "text" | "title" | "circle" | "rect";
+    width: string;
+    height: string;
+    lines: number;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-skeleton": TTSkeleton;
+    }
+}
+//# sourceMappingURL=tt-skeleton.d.ts.map