@tartaguti/ui-components 0.1.0 → 0.3.0

package/dist/tt-scroller.js

@@ -0,0 +1,525 @@
+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, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import "./tt-icon.js";
+/*
+  What the browser can focus by itself, for "does the row hold anything
+  that Tab reaches?" (holdsFocusable, below).
+*/
+const FOCUSABLE = [
+    "a[href]",
+    "area[href]",
+    "button:not([disabled])",
+    "input:not([disabled]):not([type='hidden'])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "summary",
+    "iframe",
+    "[contenteditable]:not([contenteditable='false'])",
+    "[tabindex]:not([tabindex='-1'])",
+].join(", ");
+/**
+ * Whether an element, or anything inside it, takes focus with Tab. Walks
+ * into open shadow roots too, because a tt-button's real <button> is in
+ * its shadow root, not among its children.
+ */
+function holdsFocusable(element) {
+    if (element.matches(FOCUSABLE))
+        return true;
+    const inside = element.shadowRoot ? [...element.shadowRoot.children] : [];
+    return [...inside, ...element.children].some(holdsFocusable);
+}
+/** A mouse press on an arrow does not move focus away from where it is. */
+const keepFocus = (event) => event.preventDefault();
+/**
+ * A row of children side by side that scrolls sideways when they do not
+ * fit, with no scrollbar.
+ *
+ * With the bar gone, two things say there is more: the edge that has
+ * more to scroll fades out, by as much as is hidden there up to the fade
+ * width, so the fade grows in as you scroll rather than snapping on; and,
+ * with `controls`, an arrow button on each side that has more.
+ *
+ * The arrows only appear where a pointer can hover. A finger swipes the
+ * row natively, which is what people do on a phone, and two 44px circles
+ * would cover a third of a phone's row. A mouse with a plain wheel has no
+ * sideways scroll at all, which is who the arrows are for.
+ *
+ * LEFT AND RIGHT ARE PHYSICAL ON PURPOSE. Everything about the layout
+ * follows the writing direction (the row starts on the right in a
+ * right-to-left page), but an arrow points at a side of the screen, and
+ * "Scroll left" names that side, so the fades and arrows are measured
+ * physically and stay right in both directions.
+ */
+let TTScroller = class TTScroller extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Names the row for a screen reader. Given a label, the row is a named group. */
+        this.label = "";
+        /*
+          Reflected, like tt-stack's: these are :host([attr]) rules, and a
+          selector matches an attribute, never a property.
+        */
+        this.gap = "medium";
+        /** Lands on a whole child after a swipe or an arrow: its start or its centre. */
+        this.snap = "none";
+        /** Arrow buttons on the sides that have more, for a mouse. */
+        this.controls = false;
+        /**
+         * Every child's width, as a CSS length ("240px", "80%"). Empty: each
+         * child keeps its own width, which is right for chips but makes a card
+         * as wide as its longest line.
+         */
+        this.itemWidth = "";
+        /** How much of the row is out of sight past each physical edge, in pixels. */
+        this.hiddenLeft = 0;
+        this.hiddenRight = 0;
+        /** Whether anything inside takes focus with Tab (a button, a link). */
+        this.holdsFocus = false;
+        // A child that changes size (a font loading, its text edited) can make
+        // the row start or stop overflowing without the row itself resizing,
+        // so the children are observed as well as the row.
+        this.resize = new ResizeObserver(() => this.measure(true));
+        this.focusTimer = 0;
+        // Scroll events already come at most once a frame.
+        this.onScroll = () => this.measure();
+        this.onSlotChange = () => {
+            this.observe();
+        };
+        /*
+          Tab onto a child near an edge: the browser scrolls it into view, but
+          only just, or not at all, so it can land under a fade or an arrow.
+          The browser scrolls after the focus events, so this runs a task
+          later and has the last word: the child moves fully clear.
+        */
+        this.onFocusIn = (event) => {
+            const items = this.items();
+            const item = event
+                .composedPath()
+                .find((node) => node instanceof Element && items.includes(node));
+            if (!item)
+                return;
+            clearTimeout(this.focusTimer);
+            this.focusTimer = window.setTimeout(() => this.bringIntoView(item));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Moved in the page: observing stopped when it was taken out.
+        if (this.hasUpdated)
+            this.observe();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resize.disconnect();
+        clearTimeout(this.focusTimer);
+    }
+    firstUpdated() {
+        this.observe();
+    }
+    /**
+     * Scrolls the row, and only the row, until `item` is fully in sight,
+     * clear of the fades and arrows. An item wider than the row shows its
+     * start. Unlike `scrollIntoView()`, the page itself never moves.
+     */
+    async scrollToItem(item, behavior = "auto") {
+        await this.updateComplete;
+        await this.childrenRendered();
+        this.bringIntoView(item, behavior);
+    }
+    /*
+      The row's items: its children, or, when another component puts its
+      own <slot> in here (tt-dock does), what that slot passes on. Read
+      flattened, because a slot element is display: contents and has no
+      box to measure or scroll to.
+    */
+    items() {
+        return this.slotEl?.assignedElements({ flatten: true }) ?? [...this.children];
+    }
+    /*
+      A tt-* child has no size until its own first render, which comes
+      after the row's, so the first measure is taken again once they have
+      rendered. Awaited rather than left to the ResizeObserver: a page in a
+      background tab gets no observer callbacks and no animation frames,
+      and the row would show no arrows until it was visible.
+    */
+    async childrenRendered() {
+        await Promise.all(this.items().map((child) => child.updateComplete));
+    }
+    async observe() {
+        const viewport = this.viewport;
+        if (!viewport)
+            return;
+        this.resize.disconnect();
+        this.resize.observe(viewport);
+        for (const child of this.items())
+            this.resize.observe(child);
+        // After the update that called this, so the measure starts a new one.
+        await this.updateComplete;
+        this.measure(true);
+        await this.childrenRendered();
+        this.measure(true);
+    }
+    /** What is hidden past each edge, and, when `children` changed, what inside takes focus. */
+    measure(children = false) {
+        const viewport = this.viewport;
+        if (!viewport)
+            return;
+        const max = viewport.scrollWidth - viewport.clientWidth;
+        // Right to left, scrollLeft is 0 at the start and goes negative.
+        const rtl = getComputedStyle(viewport).direction === "rtl";
+        const fromLeft = rtl ? viewport.scrollLeft + max : viewport.scrollLeft;
+        // A pixel of slack: zoom and fractional layout leave sub-pixel scroll.
+        const left = max > 1 && fromLeft > 1 ? Math.round(fromLeft) : 0;
+        const right = max > 1 && max - fromLeft > 1 ? Math.round(max - fromLeft) : 0;
+        if (left !== this.hiddenLeft)
+            this.hiddenLeft = left;
+        if (right !== this.hiddenRight)
+            this.hiddenRight = right;
+        if (children) {
+            const holds = this.items().some(holdsFocusable);
+            if (holds !== this.holdsFocus)
+                this.holdsFocus = holds;
+        }
+    }
+    bringIntoView(target, behavior = "auto") {
+        const viewport = this.viewport;
+        // The child of the row that holds it: the whole card, not its button.
+        const items = this.items();
+        let item = target;
+        while (item && !items.includes(item))
+            item = item.parentElement;
+        if (!viewport || !item)
+            return;
+        const view = viewport.getBoundingClientRect();
+        const box = item.getBoundingClientRect();
+        const style = getComputedStyle(viewport);
+        // The fade, or the arrow when there is one: the scroll padding.
+        const inset = parseFloat(style.scrollPaddingLeft) || 0;
+        const start = view.left + inset;
+        const end = view.right - inset;
+        const rtl = style.direction === "rtl";
+        // Where it begins: its right edge in a right-to-left row.
+        const toStart = rtl ? box.right - end : box.left - start;
+        let delta = 0;
+        if (box.width > end - start) {
+            // Too wide to fit: show where it begins.
+            delta = toStart;
+        }
+        else if (box.left < start || box.right > end) {
+            /*
+              With snapping on, the row has to come to rest on a snap position,
+              and one that cuts this child off would undo the scroll. So it goes
+              to its OWN snap position, which always shows it whole. Without
+              snapping, it moves only as far as it must.
+            */
+            if (this.snap === "start")
+                delta = toStart;
+            else if (this.snap === "center")
+                delta = box.left + box.width / 2 - (view.left + view.width / 2);
+            else
+                delta = box.left < start ? box.left - start : box.right - end;
+        }
+        // scrollBy clamps at both ends, so the first item still sits flush.
+        if (Math.abs(delta) >= 1)
+            viewport.scrollBy({ left: delta, behavior });
+    }
+    /** About one row's width, less the edges, so the cut-off child comes fully into sight. */
+    page(direction) {
+        const viewport = this.viewport;
+        if (!viewport)
+            return;
+        const inset = parseFloat(getComputedStyle(viewport).scrollPaddingLeft) || 0;
+        const step = Math.max(viewport.clientWidth - 2 * inset, viewport.clientWidth / 2);
+        viewport.scrollBy({ left: direction * step });
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      /* Usually a flex or grid item, which refuses to shrink below its
+         content without this, and then nothing would ever overflow. */
+      min-width: 0;
+    }
+
+    /* The browser's own [hidden] rule loses to any :host display. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    .frame {
+      /* The arrows' size. The fade reads it too, so it lives on both
+         their parent. */
+      --_control: var(--tt-control-sm);
+
+      /* Its own formatting context, so the row's negative margins stay
+         inside it instead of collapsing out through the host. */
+      display: flow-root;
+      position: relative;
+    }
+
+    .viewport {
+      /* How far a fade reaches, and how far a child is kept from an edge. */
+      --_fade: var(--tt-space-8);
+      /* Room for a child's focus ring above and below. */
+      --_ring: calc(var(--tt-ring-width) + var(--tt-ring-offset));
+
+      display: flex;
+      align-items: stretch;
+      gap: var(--tt-space-4);
+
+      overflow-x: auto;
+      overflow-y: hidden;
+
+      /* overflow clips everything outside the box, focus rings included,
+         so the box is a ring taller on each side, and the negative margin
+         gives the room back: the row is exactly as tall as its children. */
+      padding-block: var(--_ring);
+      margin-block: calc(var(--_ring) * -1);
+
+      /* No bar, in every engine. Firefox and current Chromium read the
+         property; Safari still needs the pseudo-element below. */
+      scrollbar-width: none;
+
+      scroll-behavior: smooth;
+      scroll-padding-inline: var(--_fade);
+      /* A sideways swipe at the end stays in the row, instead of going
+         back a page in the browser's history. */
+      overscroll-behavior-x: contain;
+      outline: none;
+    }
+
+    .viewport::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* The mask would cut the ring off the row itself, so the frame,
+       which is not masked, draws it. */
+    .frame:has(> .viewport:focus-visible) {
+      border-radius: var(--tt-radius-md);
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    :host([gap="none"]) .viewport {
+      gap: 0;
+    }
+    :host([gap="small"]) .viewport {
+      gap: var(--tt-space-2);
+    }
+    :host([gap="large"]) .viewport {
+      gap: var(--tt-space-6);
+    }
+
+    /*
+      Children keep their own width, or the item width, and never shrink:
+      a flex item shrinks by default, and a row that squashes to fit never
+      overflows. Three longhands rather than flex, so an item width that
+      is not a length falls back to auto and the row still scrolls.
+    */
+    ::slotted(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: var(--_item-width, auto);
+      min-width: 0;
+    }
+
+    :host([snap="start"]) .viewport,
+    :host([snap="center"]) .viewport {
+      scroll-snap-type: x mandatory;
+    }
+    :host([snap="start"]) ::slotted(*) {
+      scroll-snap-align: start;
+    }
+    :host([snap="center"]) ::slotted(*) {
+      scroll-snap-align: center;
+    }
+
+    /* Smooth scrolling is its own property, which the duration tokens in
+       tokens.css cannot reach. */
+    @media (prefers-reduced-motion: reduce) {
+      .viewport {
+        scroll-behavior: auto;
+      }
+    }
+
+    .control {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+
+      display: none;
+      place-items: center;
+      width: var(--_control);
+      height: var(--_control);
+      padding: 0;
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-card);
+      color: var(--tt-foreground);
+      box-shadow: var(--tt-elevation-1);
+      cursor: pointer;
+
+      --tt-icon-size: 16px;
+
+      transition:
+        background var(--tt-duration-fast) var(--tt-ease-out),
+        color var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    .control.left {
+      left: 0;
+    }
+    .control.right {
+      right: 0;
+    }
+
+    .control:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    /* Only with a pointer that hovers: see the class comment. */
+    @media (hover: hover) {
+      .control:not([hidden]) {
+        display: grid;
+      }
+
+      /* With arrows, the fade reaches past them, and a child is kept
+         clear of them, not only of the fade. */
+      :host([controls]) .viewport {
+        --_fade: calc(var(--_control) + var(--tt-space-2));
+      }
+
+      .control:hover {
+        background: var(--tt-accent);
+        color: var(--tt-accent-foreground);
+      }
+    }
+
+    /* A touchscreen laptop: the pointer hovers, but a finger may press. */
+    @media (any-pointer: coarse) {
+      .frame {
+        --_control: max(var(--tt-control-md), 2.75rem);
+      }
+    }
+  `; }
+    render() {
+        const overflows = this.hiddenLeft > 0 || this.hiddenRight > 0;
+        /*
+          Each side fades by as much as is hidden past it, up to --_fade, so a
+          row at rest has no fade at its start and the fade grows in as it
+          scrolls. A mask reads only the alpha of its colour, so the black is
+          never seen: transparent lets the surface behind show through, on
+          any surface and in either theme. Written here rather than as custom
+          properties in the styles: those inherit, so every child would
+          restyle on every frame of a scroll, and mask-image does not.
+        */
+        const fade = (hidden) => `min(var(--_fade), ${hidden}px)`;
+        const mask = overflows
+            ? `linear-gradient(to right, transparent, #000 ${fade(this.hiddenLeft)}, #000 calc(100% - ${fade(this.hiddenRight)}), transparent)`
+            : undefined;
+        return html `
+      <div class="frame">
+        <div
+          class="viewport"
+          part="viewport"
+          role=${this.label ? "group" : nothing}
+          aria-label=${this.label || nothing}
+          tabindex=${
+        /*
+          A row that scrolls must be reachable by keyboard. When
+          something inside takes focus, Tab already reaches it all
+          (each focused child is scrolled into view), so the row stays
+          out of the Tab order, as Chrome decides for any scroller;
+          -1 also stops Firefox adding a stop of its own. With nothing
+          focusable inside, the row is the stop, and the arrow keys
+          scroll it.
+        */
+        overflows ? (this.holdsFocus ? "-1" : "0") : nothing}
+          style=${styleMap({
+            "mask-image": mask,
+            "--_item-width": this.itemWidth || undefined,
+        })}
+          @scroll=${this.onScroll}
+          @focusin=${this.onFocusIn}
+        >
+          <slot @slotchange=${this.onSlotChange}></slot>
+        </div>
+
+        ${this.controls
+            ? html `
+              <!-- Out of the Tab order: Tab and the arrow keys already
+                   scroll the row, so these are for a mouse. A screen
+                   reader still finds them by name. -->
+              <button
+                type="button"
+                class="control left"
+                part="control control-left"
+                tabindex="-1"
+                aria-label="Scroll left"
+                ?hidden=${this.hiddenLeft === 0}
+                @mousedown=${keepFocus}
+                @click=${() => this.page(-1)}
+              >
+                <tt-icon name="chevron-left"></tt-icon>
+              </button>
+              <button
+                type="button"
+                class="control right"
+                part="control control-right"
+                tabindex="-1"
+                aria-label="Scroll right"
+                ?hidden=${this.hiddenRight === 0}
+                @mousedown=${keepFocus}
+                @click=${() => this.page(1)}
+              >
+                <tt-icon name="chevron-right"></tt-icon>
+              </button>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTScroller.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTScroller.prototype, "gap", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTScroller.prototype, "snap", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTScroller.prototype, "controls", void 0);
+__decorate([
+    property({ type: String, attribute: "item-width" })
+], TTScroller.prototype, "itemWidth", void 0);
+__decorate([
+    state()
+], TTScroller.prototype, "hiddenLeft", void 0);
+__decorate([
+    state()
+], TTScroller.prototype, "hiddenRight", void 0);
+__decorate([
+    state()
+], TTScroller.prototype, "holdsFocus", void 0);
+__decorate([
+    query(".viewport")
+], TTScroller.prototype, "viewport", void 0);
+__decorate([
+    query("slot")
+], TTScroller.prototype, "slotEl", void 0);
+TTScroller = __decorate([
+    customElement("tt-scroller")
+], TTScroller);
+export { TTScroller };
+//# sourceMappingURL=tt-scroller.js.map

package/dist/tt-scroller.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"tt-search.d.ts","sourceRoot":"","sources":["../src/tt-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;GAcG;AACH,qBACa,QAAS,SAAQ,UAAU;IACV,WAAW,SAAY;IAEvB,KAAK,SAAM;IAEK,QAAQ,UAAS;IAKlB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CACnE;IAIkC,WAAW,UAAS;IAEpC,QAAQ,SAAO;IAEU,SAAS,SAAK;IAE1D,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,aAAa,CAAC,CAAgC;IAEtD,oBAAoB;IAKpB,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,UAAU;IAMlB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,MAAM,CAAC,MAAM,0BA0JX;IAEF,OAAO,CAAC,WAAW;IAqCnB,MAAM;CA0BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"tt-search.d.ts","sourceRoot":"","sources":["../src/tt-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;GAcG;AACH,qBACa,QAAS,SAAQ,UAAU;IACV,WAAW,SAAY;IAEvB,KAAK,SAAM;IAEK,QAAQ,UAAS;IAKlB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CACnE;IAIkC,WAAW,UAAS;IAEpC,QAAQ,SAAO;IAEU,SAAS,SAAK;IAE1D,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,aAAa,CAAC,CAAgC;IAEtD,oBAAoB;IAKpB,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,UAAU;IAMlB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,MAAM,CAAC,MAAM,0BA+JX;IAEF,OAAO,CAAC,WAAW;IAqCnB,MAAM;CA0BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/tt-search.js

@@ -174,9 +174,12 @@ let TTSearch = class TTSearch extends LitElement {
       user-select: none;
     }
 
-    .clear:hover {
-      background: var(--tt-accent);
-      color: var(--tt-foreground);
+    /* Only where a pointer can hover: a tap would leave this on. */
+    @media (hover: hover) {
+      .clear:hover {
+        background: var(--tt-accent);
+        color: var(--tt-foreground);
+      }
     }
 
     .clear:focus-visible {
@@ -212,8 +215,10 @@ let TTSearch = class TTSearch extends LitElement {
       user-select: none;
     }
 
-    .toggle:hover {
-      background: var(--tt-accent);
+    @media (hover: hover) {
+      .toggle:hover {
+        background: var(--tt-accent);
+      }
     }
 
     .toggle:focus-visible {

package/dist/tt-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"tt-search.js","sourceRoot":"","sources":["../src/tt-search.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;GAcG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACuB,gBAAW,GAAG,QAAQ,CAAC;QAEvB,UAAK,GAAG,EAAE,CAAC;QAEK,aAAQ,GAAG,KAAK,CAAC;QAE7D,iEAAiE;QACjE,wEAAwE;QACxE,mEAAmE;QACxB,SAAI,GAC7C,OAAO,CAAC;QAEV,sEAAsE;QACtE,sBAAsB;QACsB,gBAAW,GAAG,KAAK,CAAC;QAEpC,aAAQ,GAAG,GAAG,CAAC;QAEU,cAAS,GAAG,CAAC,CAAC;QAElD,aAAQ,GAAG,KAAK,CAAC;IAwTpC,CAAC;IApTC,oBAAoB;QAClB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,WAAW,CAAC,KAAkB;QACpC,oEAAoE;QACpE,oEAAoE;QACpE,qEAAqE;QACrE,qDAAqD;QACrD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC;QAEvC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAEjC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;YACnC,kEAAkE;YAClE,mEAAmE;YACnE,gEAAgE;YAChE,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS;gBAAE,OAAO;YAExE,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YAChD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,KAAK;QACX,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAEhB,qEAAqE;QACrE,gDAAgD;QAChD,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,IAAI,CAAC,SAAS,EAAE,CAAC;QAEjB,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAErB,iDAAiD;QACjD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAC/C,CAAC;IAEO,UAAU;QAChB,qEAAqE;QACrE,0BAA0B;QAC1B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE;YAAE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACnE,CAAC;IAED,KAAK,CAAC,OAAsB;QAC1B,IAAI,CAAC,UAAU,EAAE,aAAa,CAAc,UAAU,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC1E,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0JlB,AA1JY,CA0JX;IAEM,WAAW;QACjB,OAAO,IAAI,CAAA;;;eAGA,IAAI,CAAC,IAAI;;sBAEF,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,WAAW,IAAI,QAAQ;;iBAE3B,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,WAAW;qBACf,CAAC,KAAY,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE;mBAC3C,IAAI,CAAC,aAAa;oBACjB,IAAI,CAAC,UAAU;;;;;;UAMzB,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;;;;;yBAMS,IAAI,CAAC,KAAK;;;;aAItB;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;;;;8BAMgB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;0BACpC,IAAI,CAAC,QAAQ;uBAChB,IAAI,CAAC,MAAM;;;;WAIvB;YACH,CAAC,CAAC,EAAE;;;uBAGW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;UAG5C,IAAI,CAAC,WAAW,EAAE;;KAEvB,CAAC;IACJ,CAAC;;AA3U2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAY;AAEK;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAKlB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAChC;AAIkC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAqB;AAEpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAgB;AAEU;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CAAe;AAElD;IAAhB,KAAK,EAAE;0CAA0B;AArBvB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA6UpB"}
+{"version":3,"file":"tt-search.js","sourceRoot":"","sources":["../src/tt-search.ts"],"names":[],"mappings":"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"}

package/dist/tt-select.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import type { PropertyValues } from "lit";
 import "./tt-icon.js";
+import type { TTStrings } from "./strings.js";
 export type SelectSize = "small" | "medium" | "large";
 export interface SelectOption {
     value: string;
@@ -12,6 +13,12 @@ export declare class TTSelect extends LitElement {
     private internals;
     name: string;
     value: string;
+    multiple: boolean;
+    /** The chosen values while `multiple` is on, in the options' order. */
+    values: string[];
+    /** This component's own text, over setStrings() (see strings.ts). */
+    strings: Partial<TTStrings>;
+    private text;
     placeholder: string;
     options: SelectOption[];
     label: string;
@@ -38,6 +45,8 @@ export declare class TTSelect extends LitElement {
     updated(changed: PropertyValues): void;
     private syncFormState;
     private get selectedOption();
+    private isChosen;
+    private get triggerText();
     private openList;
     private closeList;
     private removeGlobalListeners;

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

@@ -1 +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"}
+{"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;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,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;IAOK,QAAQ,UAAS;IAE7D,uEAAuE;IAC5C,MAAM,EAAE,MAAM,EAAE,CAAM;IAEjD,qEAAqE;IACrC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,CAAM;IAEjE,OAAO,CAAC,IAAI,CAA+B;IACf,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;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,OAAO,EAAE,cAAc;IAkB/B,OAAO,CAAC,aAAa;IAwBrB,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,CAAC,QAAQ;IAQhB,OAAO,KAAK,WAAW,GAOtB;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;IA2BpB,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,aAAa;IAiErB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,YAAY;IASpB,MAAM,CAAC,MAAM,4BAoQV;IAIH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,MAAM;CAmGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}