@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-search.js

@@ -0,0 +1,360 @@
+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 } from "lit/decorators.js";
+import "./tt-input.js";
+import "./tt-icon.js";
+/**
+ * A search field.
+ *
+ * One field, with the magnifier INSIDE it and a clear button that appears
+ * only when there is something to clear. There is no separate submit
+ * button, because search is not a form you submit: results follow typing.
+ * The old layout put a filled button beside the input, which read as two
+ * controls and made the field look like it needed permission to run.
+ * Enter still fires tt-search for anyone who expects it to.
+ *
+ * `collapsible` is opt-in, and off by default. Collapsing to an icon on a
+ * phone is right in a navbar, where the row is fighting for space, and
+ * wrong in a page toolbar, where the field is the main control on screen.
+ * Only the host knows which it is, so the host decides.
+ */
+let TTSearch = class TTSearch extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.placeholder = "Search";
+        this.value = "";
+        this.disabled = false;
+        // Handed to the field inside. Small by default, unlike tt-input,
+        // because a search lives in toolbars and navbars beside small controls;
+        // every use in this repo is small. Set medium to match a form row.
+        this.size = "small";
+        // On narrow screens, shrink to an icon that expands into a full-width
+        // field. For navbars.
+        this.collapsible = false;
+        this.debounce = 250;
+        this.minLength = 0;
+        this.expanded = false;
+    }
+    disconnectedCallback() {
+        clearTimeout(this.debounceTimer);
+        super.disconnectedCallback();
+    }
+    emitInput() {
+        this.dispatchEvent(new CustomEvent("tt-search-input", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleInput(event) {
+        // The inner tt-input's own event, stopped here like tt-filter stops
+        // its group's: tt-search speaks through tt-search-input, and a page
+        // listening for tt-input on a container would otherwise hear a stray
+        // one from inside the search box on every keystroke.
+        event.stopPropagation();
+        this.value = event.detail?.value ?? "";
+        clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => {
+            // A partial query below minLength is not worth a round trip. Zero
+            // length is exempt: clearing the box has to reach the consumer, or
+            // the results stay filtered by a query that is no longer there.
+            if (this.value.length > 0 && this.value.length < this.minLength)
+                return;
+            this.emitInput();
+        }, this.debounce);
+    }
+    handleKeydown(event) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            this.emitSearch();
+        }
+        if (event.key === "Escape" && this.value !== "") {
+            event.preventDefault();
+            this.clear();
+        }
+    }
+    emitSearch() {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent("tt-search", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    clear() {
+        this.value = "";
+        // Immediate, not debounced. Clearing is a deliberate act and waiting
+        // 250ms to see the full list back feels broken.
+        clearTimeout(this.debounceTimer);
+        this.emitInput();
+        this.focus();
+    }
+    expand() {
+        if (this.disabled)
+            return;
+        this.expanded = true;
+        // After the field exists in the DOM, not before.
+        this.updateComplete.then(() => this.focus());
+    }
+    handleBlur() {
+        // Collapse again only if nothing was typed, so a query is never lost
+        // to a stray tap outside.
+        if (this.collapsible && this.value === "")
+            this.expanded = false;
+    }
+    focus(options) {
+        this.renderRoot?.querySelector("tt-input")?.focus(options);
+    }
+    static { this.styles = 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 {
+      display: block;
+      width: 100%;
+      font-family: var(--tt-font-sans);
+
+      --_h: var(--tt-control-md);
+    }
+
+    :host([size="small"]) {
+      --_h: var(--tt-control-sm);
+    }
+
+    :host([size="large"]) {
+      --_h: var(--tt-control-lg);
+    }
+
+    :host([collapsible]) {
+      width: auto;
+    }
+
+    .icon {
+      display: inline-flex;
+      color: var(--tt-muted-foreground);
+    }
+
+    /*
+      Sized off the control height so it stays a square target, and given
+      no border of its own: it lives inside the field's border already.
+    */
+    .clear {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      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);
+
+      font: inherit;
+      font-size: var(--tt-text-md);
+      line-height: 1;
+
+      cursor: pointer;
+      /* Long-press should activate the control, not start selecting
+         its label. The other half of the mobile blue flash: the tap
+         highlight is the flash, this is the drag-select. */
+      -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);
+    }
+
+    /* The collapsed trigger. Only ever rendered when collapsible. */
+    .toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      /* The same height as the field it opens, per size. It was always
+         the medium height, so a small or large search changed height
+         the moment it expanded. */
+      box-sizing: border-box;
+      width: var(--_h);
+      height: var(--_h);
+
+      padding: 0;
+      border: 1px solid transparent;
+      border-radius: var(--tt-radius);
+
+      background: transparent;
+      color: var(--tt-foreground);
+
+      cursor: pointer;
+      /* Long-press should activate the control, not start selecting
+         its label. The other half of the mobile blue flash: the tap
+         highlight is the flash, this is the drag-select. */
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .toggle:hover {
+      background: var(--tt-accent);
+    }
+
+    .toggle:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    .field {
+      display: block;
+    }
+
+    /*
+      The field is ALWAYS rendered, and CSS decides whether it shows. The
+      first version only rendered it once expanded, which meant that on a
+      desktop, where the toggle is hidden, there was nothing left to see.
+      Rendering is not the place to make a responsive decision: a media
+      query knows the viewport, a template does not.
+    */
+    @media (max-width: 768px) {
+      :host([collapsible]) .field {
+        display: none;
+      }
+
+      /*
+        Expanded, the field spans the row. Absolute against the host would
+        only cover the host's own width, which collapsed is one icon, so
+        it stretches across the nearest positioned ancestor instead.
+      */
+      :host([collapsible]) .field.expanded {
+        display: block;
+
+        position: absolute;
+        left: var(--tt-space-3);
+        right: var(--tt-space-3);
+
+        z-index: var(--tt-z-dropdown);
+      }
+    }
+
+    /* Above the breakpoint collapsible is ignored: there is room for the
+       field, so hiding it behind a tap helps nobody. */
+    @media (min-width: 769px) {
+      :host([collapsible]) {
+        width: 100%;
+        max-width: 320px;
+      }
+
+      :host([collapsible]) .toggle {
+        display: none;
+      }
+    }
+  `; }
+    renderField() {
+        return html `
+      <tt-input
+        full-width
+        size=${this.size}
+        part="input"
+        placeholder=${this.placeholder}
+        label=${this.placeholder || "Search"}
+        label-hidden
+        .value=${this.value}
+        ?disabled=${this.disabled}
+        @tt-input=${this.handleInput}
+        @tt-change=${(event) => event.stopPropagation()}
+        @keydown=${this.handleKeydown}
+        @focusout=${this.handleBlur}
+      >
+        <span class="icon" slot="prefix" aria-hidden="true">
+          <tt-icon name="search" size="16px"></tt-icon>
+        </span>
+
+        ${this.value
+            ? html `
+              <button
+                class="clear"
+                slot="suffix"
+                type="button"
+                aria-label="Clear search"
+                @click=${this.clear}
+              >
+                <tt-icon name="x" size="14px"></tt-icon>
+              </button>
+            `
+            : ""}
+      </tt-input>
+    `;
+    }
+    render() {
+        return html `
+      ${this.collapsible
+            ? html `
+            <button
+              class="toggle"
+              part="toggle"
+              type="button"
+              aria-label="Search"
+              aria-expanded=${this.expanded ? "true" : "false"}
+              ?disabled=${this.disabled}
+              @click=${this.expand}
+            >
+              <tt-icon name="search" size="20px"></tt-icon>
+            </button>
+          `
+            : ""}
+
+      <div
+        class="field ${this.expanded ? "expanded" : ""}"
+        part="search"
+      >
+        ${this.renderField()}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTSearch.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], TTSearch.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTSearch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTSearch.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTSearch.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Number })
+], TTSearch.prototype, "debounce", void 0);
+__decorate([
+    property({ type: Number, attribute: "min-length" })
+], TTSearch.prototype, "minLength", void 0);
+__decorate([
+    state()
+], TTSearch.prototype, "expanded", void 0);
+TTSearch = __decorate([
+    customElement("tt-search")
+], TTSearch);
+export { TTSearch };
+//# sourceMappingURL=tt-search.js.map

package/dist/tt-search.js.map

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

package/dist/tt-section.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+export declare class TTSection extends LitElement {
+    heading: string;
+    description: string;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-section": TTSection;
+    }
+}
+//# sourceMappingURL=tt-section.d.ts.map

package/dist/tt-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-section.d.ts","sourceRoot":"","sources":["../src/tt-section.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,SAAU,SAAQ,UAAU;IAIvC,OAAO,SAAM;IAGb,WAAW,SAAM;IAEjB,MAAM,CAAC,MAAM,0BAgDX;IAEF,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/tt-section.js

@@ -0,0 +1,98 @@
+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 } from "lit/decorators.js";
+let TTSection = class TTSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Named `heading` rather than `title` so it cannot collide with the
+        // global HTML title attribute (which renders a native tooltip).
+        this.heading = "";
+        this.description = "";
+    }
+    static { this.styles = 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;
+    }
+
+    /* No outer margin - the parent owns spacing between siblings. */
+    :host {
+      display: block;
+
+      font-family: var(--tt-font-sans);
+
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+    }
+
+    .title {
+      margin-bottom: var(--tt-space-1);
+
+      color: var(--tt-foreground);
+
+      font-size: var(--tt-text-lg);
+      font-weight: var(--tt-weight-semibold);
+      line-height: var(--tt-leading-tight);
+      letter-spacing: -0.01em;
+    }
+
+    .description {
+      max-width: 62ch;
+
+      margin-bottom: var(--tt-space-4);
+
+      color: var(--tt-muted-foreground);
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-relaxed);
+    }
+
+    .content {
+      display: block;
+    }
+
+    @media (max-width: 480px) {
+      .title {
+        font-size: var(--tt-text-md);
+      }
+    }
+  `; }
+    render() {
+        return html `
+      <section part="section">
+        ${this.heading
+            ? html `<div class="title" part="heading">${this.heading}</div>`
+            : ""}
+
+        ${this.description
+            ? html `
+              <div class="description" part="description">
+                ${this.description}
+              </div>
+            `
+            : ""}
+
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+      </section>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTSection.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTSection.prototype, "description", void 0);
+TTSection = __decorate([
+    customElement("tt-section")
+], TTSection);
+export { TTSection };
+//# sourceMappingURL=tt-section.js.map

package/dist/tt-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-section.js","sourceRoot":"","sources":["../src/tt-section.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACL,oEAAoE;QACpE,gEAAgE;QAEhE,YAAO,GAAG,EAAE,CAAC;QAGb,gBAAW,GAAG,EAAE,CAAC;IAyEnB,CAAC;aAvEQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDlB,AAhDY,CAgDX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,qCAAqC,IAAI,CAAC,OAAO,QAAQ;YAC/D,CAAC,CAAC,EAAE;;UAEJ,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;kBAEE,IAAI,CAAC,WAAW;;aAErB;YACH,CAAC,CAAC,EAAE;;;;;;KAMT,CAAC;IACJ,CAAC;;AA3ED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACV;AAPN,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAgFrB"}

package/dist/tt-select.d.ts

@@ -0,0 +1,62 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-icon.js";
+export type SelectSize = "small" | "medium" | "large";
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export declare class TTSelect extends LitElement {
+    static formAssociated: boolean;
+    private internals;
+    name: string;
+    value: string;
+    placeholder: string;
+    options: SelectOption[];
+    label: string;
+    error: string;
+    disabled: boolean;
+    required: boolean;
+    size: SelectSize;
+    labelHidden: boolean;
+    private open;
+    private activeIndex;
+    private trigger;
+    private list;
+    private untrack?;
+    private instanceId;
+    private listId;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    updated(changed: PropertyValues): void;
+    private syncFormState;
+    private get selectedOption();
+    private openList;
+    private closeList;
+    private removeGlobalListeners;
+    private toggleOpen;
+    private handleDocumentClick;
+    private handleReposition;
+    private selectOption;
+    private moveActive;
+    private scrollActiveIntoView;
+    private handleKeydown;
+    private syncPopover;
+    private positionList;
+    static styles: import("lit").CSSResult[];
+    focus(options?: FocusOptions): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-select": TTSelect;
+    }
+}
+//# sourceMappingURL=tt-select.d.ts.map

package/dist/tt-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-select.d.ts","sourceRoot":"","sources":["../src/tt-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO1C,OAAO,cAAc,CAAC;AAItB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,SAAS,CAA0B;IAYA,IAAI,SAAM;IACzB,KAAK,SAAM;IACX,WAAW,SAAsB;IAClC,OAAO,EAAE,YAAY,EAAE,CAAM;IAC5B,KAAK,SAAM;IACX,KAAK,SAAM;IACK,QAAQ,UAAS;IAChC,QAAQ,UAAS;IAIH,IAAI,EAAE,UAAU,CAAY;IAKvE,WAAW,UAAS;IAEX,OAAO,CAAC,IAAI,CAAS;IAIrB,OAAO,CAAC,WAAW,CAAM;IAEjB,OAAO,CAAC,OAAO,CAAqB;IACxC,OAAO,CAAC,IAAI,CAAoB;IAI7C,OAAO,CAAC,OAAO,CAAC,CAAa;IAE7B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,MAAM,CAAuC;IAErD,IAAI,IAAI,2BAEP;IAED,IAAI,QAAQ,kBAEX;IACD,aAAa;IAIb,cAAc;IAId,iBAAiB;IAKjB,oBAAoB;IAKpB,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,OAAO,EAAE,cAAc;IAY/B,OAAO,CAAC,aAAa;IAkBrB,OAAO,KAAK,cAAc,GAEzB;IAID,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,mBAAmB,CAMzB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAIF,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,aAAa;IAiErB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,YAAY;IASpB,MAAM,CAAC,MAAM,4BAkPV;IAIH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,MAAM;CA8FP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}