@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-rating.js

@@ -0,0 +1,312 @@
+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, svg, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+/**
+ * A star rating, readable or settable.
+ *
+ * The library already had tt-product, tt-profile-card and tt-company-card
+ * and no way to say how good any of them were, which is the one number
+ * every listing, review and directory entry eventually needs.
+ *
+ * TWO COMPONENTS IN ONE, ON PURPOSE. A rating is displayed far more often
+ * than it is set, and the two cases want different semantics rather than
+ * different elements. Read-only is a single image with a text
+ * alternative, because a screen reader needs "4.5 out of 5", not five
+ * separate stars it has to add up. Interactive is a slider, which is the
+ * pattern that already works with arrow keys everywhere else.
+ *
+ * Fractions are supported for the read-only case only. An average of many
+ * ratings is 4.3; nobody has ever meant to award 4.3 themselves.
+ */
+let TTRating = class TTRating extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Stars filled. Fractional values are drawn as partial stars. */
+        this.value = 0;
+        this.max = 5;
+        this.label = "";
+        /** Show the number beside the stars. An average is easier to read as digits. */
+        this.showValue = false;
+        /** Let the user set it. Off by default: display is the common case. */
+        this.interactive = false;
+        this.size = "18px";
+        /**
+         * Colour by value rather than always gold. Off by default, because a
+         * product rating is gold everywhere and a red two-star review would
+         * look like an error state rather than a low score.
+         */
+        this.grade = false;
+    }
+    get shown() {
+        const v = this.hovered ?? this.value;
+        return Math.min(this.max, Math.max(0, v));
+    }
+    get tone() {
+        if (!this.grade || this.max <= 0)
+            return "";
+        const ratio = this.shown / this.max;
+        if (ratio < 0.4)
+            return "low";
+        if (ratio < 0.7)
+            return "mid";
+        return "high";
+    }
+    /** "4.5" but "4", because a whole number with a trailing .0 reads as noise. */
+    get printed() {
+        return Number.isInteger(this.value)
+            ? String(this.value)
+            : this.value.toFixed(1);
+    }
+    commit(next) {
+        const clamped = Math.min(this.max, Math.max(0, Math.round(next)));
+        if (clamped === this.value)
+            return;
+        this.value = clamped;
+        /*
+          Namespaced, bubbling and composed, so a form or a card two shadow
+          roots up can listen for it without knowing this element exists.
+        */
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { value: clamped },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    onKey(event) {
+        if (!this.interactive)
+            return;
+        const step = {
+            ArrowRight: 1,
+            ArrowUp: 1,
+            ArrowLeft: -1,
+            ArrowDown: -1,
+        };
+        if (event.key in step) {
+            event.preventDefault();
+            this.commit(this.value + step[event.key]);
+            return;
+        }
+        // Home and End are what a slider is expected to answer to, and they
+        // are the only way to reach zero without arrowing down from five.
+        if (event.key === "Home") {
+            event.preventDefault();
+            this.commit(0);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            this.commit(this.max);
+        }
+    }
+    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: inline-flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+
+      font-family: var(--tt-font-sans);
+
+      --_size: 18px;
+      /* No hex fallback: a fixed gold would ignore dark mode and any
+         theme, and the library does not run without tokens.css anyway. */
+      --_on: var(--tt-warning);
+      --_off: var(--tt-border);
+    }
+
+    :host([interactive]) .stars {
+      cursor: pointer;
+    }
+
+    .stars {
+      display: inline-flex;
+      gap: 2px;
+      line-height: 0;
+    }
+
+    .stars:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+      border-radius: var(--tt-radius-sm);
+    }
+
+    /*
+      One star is two stacked copies: an empty one, and a filled one
+      clipped to a percentage width. That is what makes half stars work
+      without a second icon or an SVG mask.
+    */
+    .star {
+      position: relative;
+
+      width: var(--_size);
+      height: var(--_size);
+    }
+
+    .star svg {
+      display: block;
+
+      width: var(--_size);
+      height: var(--_size);
+    }
+
+    .off {
+      color: var(--_off);
+    }
+
+    .on {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+
+      color: var(--_on);
+    }
+
+    :host(:not([interactive])) .stars {
+      transition: none;
+    }
+
+    .low  { --_on: var(--tt-destructive); }
+    .mid  { --_on: var(--tt-warning); }
+    .high { --_on: var(--tt-success); }
+
+    .text {
+      display: inline-flex;
+      align-items: baseline;
+      gap: var(--tt-space-1);
+
+      font-size: var(--tt-text-sm);
+      font-variant-numeric: tabular-nums;
+      color: var(--tt-foreground);
+    }
+
+    .count,
+    .label {
+      color: var(--tt-muted-foreground);
+    }
+
+    .label {
+      font-size: var(--tt-text-sm);
+    }
+  `; }
+    star(index) {
+        const shown = this.shown;
+        /*
+          How much of THIS star is filled, 0 to 100. Star three of a 2.4
+          rating is 40% full; star two is 100% and star four is 0%.
+        */
+        const fill = Math.min(1, Math.max(0, shown - index)) * 100;
+        const path = svg `
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path
+          d="M12 2.5l2.9 5.9 6.5.95-4.7 4.6 1.1 6.5-5.8-3.05-5.8 3.05 1.1-6.5-4.7-4.6 6.5-.95z"
+        />
+      </svg>
+    `;
+        return html `
+      <span
+        class="star"
+        @mouseenter=${this.interactive
+            ? () => (this.hovered = index + 1)
+            : undefined}
+        @click=${this.interactive ? () => this.commit(index + 1) : undefined}
+      >
+        <span class="off">${path}</span>
+        <span
+          class="on ${this.tone}"
+          style=${`width:${fill}%`}
+        >
+          ${path}
+        </span>
+      </span>
+    `;
+    }
+    render() {
+        const stars = Array.from({ length: Math.max(0, this.max) }, (_, i) => this.star(i));
+        const readable = (this.label ? this.label + ": " : "") +
+            this.printed +
+            " out of " +
+            this.max;
+        return html `
+      <!--
+        As a slider the NAME stays fixed and the value goes in
+        aria-valuetext. The name used to contain the value too, so every
+        arrow press changed the control's name and a screen reader read
+        the whole sentence twice: "Quality: 3 out of 5, 3 out of 5".
+      -->
+      <span
+        class="stars"
+        part="stars"
+        style=${`--_size:${this.size}`}
+        role=${this.interactive ? "slider" : "img"}
+        tabindex=${ifDefined(this.interactive ? 0 : undefined)}
+        aria-label=${this.interactive ? this.label || "Rating" : readable}
+        aria-valuenow=${ifDefined(this.interactive ? this.value : undefined)}
+        aria-valuemin=${ifDefined(this.interactive ? 0 : undefined)}
+        aria-valuemax=${ifDefined(this.interactive ? this.max : undefined)}
+        aria-valuetext=${ifDefined(this.interactive ? readable : undefined)}
+        @keydown=${this.onKey}
+        @mouseleave=${this.interactive
+            ? () => (this.hovered = undefined)
+            : undefined}
+      >
+        ${stars}
+      </span>
+
+      ${this.showValue || this.count !== undefined
+            ? html `
+            <span class="text" part="text">
+              ${this.showValue ? html `<span>${this.printed}</span>` : nothing}
+              ${this.count !== undefined
+                ? html `<span class="count">(${this.count})</span>`
+                : nothing}
+            </span>
+          `
+            : nothing}
+      ${this.label
+            ? html `<span class="label" part="label">${this.label}</span>`
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], TTRating.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], TTRating.prototype, "max", void 0);
+__decorate([
+    property({ type: String })
+], TTRating.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-value" })
+], TTRating.prototype, "showValue", void 0);
+__decorate([
+    property({ type: Number })
+], TTRating.prototype, "count", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTRating.prototype, "interactive", void 0);
+__decorate([
+    property({ type: String })
+], TTRating.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTRating.prototype, "grade", void 0);
+__decorate([
+    state()
+], TTRating.prototype, "hovered", void 0);
+TTRating = __decorate([
+    customElement("tt-rating")
+], TTRating);
+export { TTRating };
+//# sourceMappingURL=tt-rating.js.map

package/dist/tt-rating.js.map

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

package/dist/tt-search.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from "lit";
+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.
+ */
+export declare class TTSearch extends LitElement {
+    placeholder: string;
+    value: string;
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+    collapsible: boolean;
+    debounce: number;
+    minLength: number;
+    private expanded;
+    private debounceTimer?;
+    disconnectedCallback(): void;
+    private emitInput;
+    private handleInput;
+    private handleKeydown;
+    private emitSearch;
+    private clear;
+    private expand;
+    private handleBlur;
+    focus(options?: FocusOptions): void;
+    static styles: import("lit").CSSResult;
+    private renderField;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-search": TTSearch;
+    }
+}
+//# sourceMappingURL=tt-search.d.ts.map

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

@@ -0,0 +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"}