@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-alert.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+import "./tt-icon.js";
+/** "info" is the old name of "neutral" and still works. */
+export type AlertVariant = "neutral" | "info" | "success" | "warning" | "danger";
+/**
+ * A message that stays on the page, in context.
+ *
+ * Not the same thing as tt-toast. A toast is transient and global: "saved".
+ * An alert is persistent and local: it sits next to the thing it is about
+ * and stays until the situation changes. Use an alert for "this listing is
+ * unverified" or "your trial ends in 3 days".
+ */
+export declare class TTAlert extends LitElement {
+    variant: AlertVariant;
+    heading: string;
+    closable: boolean;
+    private close;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-alert": TTAlert;
+    }
+}
+//# sourceMappingURL=tt-alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-alert.d.ts","sourceRoot":"","sources":["../src/tt-alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,cAAc,CAAC;AAEtB,2DAA2D;AAC3D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEjF;;;;;;;GAOG;AACH,qBACa,OAAQ,SAAQ,UAAU;IAIrC,OAAO,EAAE,YAAY,CAAa;IAEN,OAAO,SAAM;IAEZ,QAAQ,UAAS;IAE9C,OAAO,CAAC,KAAK;IAMb,MAAM,CAAC,MAAM,0BA2FX;IAEF,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/tt-alert.js

@@ -0,0 +1,165 @@
+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";
+import "./tt-icon.js";
+/**
+ * A message that stays on the page, in context.
+ *
+ * Not the same thing as tt-toast. A toast is transient and global: "saved".
+ * An alert is persistent and local: it sits next to the thing it is about
+ * and stays until the situation changes. Use an alert for "this listing is
+ * unverified" or "your trial ends in 3 days".
+ */
+let TTAlert = class TTAlert extends LitElement {
+    constructor() {
+        super(...arguments);
+        // "neutral", as on tt-badge and tt-toast (Oct 2026). It was "info"
+        // here only, for the same grey accent; "info" is kept as an alias.
+        this.variant = "neutral";
+        this.heading = "";
+        this.closable = false;
+    }
+    close() {
+        this.dispatchEvent(new CustomEvent("tt-close", { bubbles: true, composed: true }));
+    }
+    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;
+      font-family: var(--tt-font-sans);
+
+      --_accent: var(--tt-muted-foreground);
+    }
+
+    /* The neutral accent. It borrowed --tt-chart-2, a chart SERIES
+       colour, which happened to be grey; a themed chart palette would
+       have recoloured every neutral alert with it. */
+    :host([variant="neutral"]),
+    :host([variant="info"])    { --_accent: var(--tt-muted-foreground); }
+    :host([variant="success"]) { --_accent: var(--tt-success); }
+    :host([variant="warning"]) { --_accent: var(--tt-warning); }
+    :host([variant="danger"])  { --_accent: var(--tt-destructive); }
+
+    .alert {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--tt-space-3);
+
+      padding: var(--tt-space-3) var(--tt-space-4);
+
+      border: 1px solid color-mix(
+        in srgb,
+        var(--_accent) 30%,
+        var(--tt-border)
+      );
+      border-left-width: 3px;
+      border-left-color: var(--_accent);
+      border-radius: var(--tt-radius);
+
+      background: color-mix(in srgb, var(--_accent) 8%, transparent);
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-normal);
+    }
+
+    .body {
+      flex: 1;
+      min-width: 0;
+      overflow-wrap: anywhere;
+      color: var(--tt-foreground);
+    }
+
+    .heading {
+      margin-bottom: 2px;
+      font-weight: var(--tt-weight-semibold);
+    }
+
+    ::slotted(a) {
+      color: inherit;
+    }
+
+    ::slotted(*) {
+      margin: 0;
+    }
+
+    .close {
+      flex: 0 0 auto;
+
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      margin: -1px -4px 0 0;
+
+      border: none;
+      background: transparent;
+      color: var(--tt-muted-foreground);
+
+      font: inherit;
+      line-height: 1;
+      cursor: pointer;
+      border-radius: var(--tt-radius-sm);
+    }
+
+    .close:hover {
+      color: var(--tt-foreground);
+    }
+
+    .close:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+  `; }
+    render() {
+        return html `
+      <!--
+        role=alert only for danger. It interrupts a screen reader
+        immediately, which is right for an error and rude for a tip.
+      -->
+      <div
+        class="alert"
+        part="alert"
+        role=${this.variant === "danger" ? "alert" : "status"}
+      >
+        <div class="body">
+          ${this.heading
+            ? html `<div class="heading" part="heading">${this.heading}</div>`
+            : ""}
+
+          <slot></slot>
+        </div>
+
+        ${this.closable
+            ? html `
+              <button class="close" part="close" aria-label="Dismiss" @click=${this.close}>
+                <tt-icon name="x" size="16px"></tt-icon>
+              </button>
+            `
+            : ""}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTAlert.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], TTAlert.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTAlert.prototype, "closable", void 0);
+TTAlert = __decorate([
+    customElement("tt-alert")
+], TTAlert);
+export { TTAlert };
+//# sourceMappingURL=tt-alert.js.map

package/dist/tt-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-alert.js","sourceRoot":"","sources":["../src/tt-alert.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;AAE5D,OAAO,cAAc,CAAC;AAKtB;;;;;;;GAOG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACL,mEAAmE;QACnE,mEAAmE;QAEnE,YAAO,GAAiB,SAAS,CAAC;QAEN,YAAO,GAAG,EAAE,CAAC;QAEZ,aAAQ,GAAG,KAAK,CAAC;IAkIhD,CAAC;IAhIS,KAAK;QACX,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC/D,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FlB,AA3FY,CA2FX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;eAQA,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;;YAGjD,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,OAAO,QAAQ;YACjE,CAAC,CAAC,EAAE;;;;;UAKN,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA;+EAC+D,IAAI,CAAC,KAAK;;;aAG5E;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AArID;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACR;AAEN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAc;AAEZ;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAkB;AARnC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0InB"}

package/dist/tt-aspect-ratio.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+/**
+ * Holds a box at a fixed width-to-height ratio.
+ *
+ * For anything whose height must be known before its content arrives: a
+ * video embed, a map, an image placeholder, a chart. Without it the page
+ * reflows the moment the content loads, which is the single largest
+ * cause of layout shift on a media-heavy page.
+ *
+ * ---------------------------------------------------------------------
+ * WHY THIS IS NOT JUST `aspect-ratio` IN YOUR OWN CSS.
+ *
+ * It nearly is, and if you control the CSS you should write it yourself.
+ * This exists for the case where you do not: slotted content, a block
+ * someone copied, a cell inside a grid. It also solves the part people
+ * get wrong, which is that `aspect-ratio` alone does nothing unless the
+ * CHILD is told to fill the box. That is the `::slotted` rule below and
+ * it is the whole reason this is a component.
+ *
+ * ---------------------------------------------------------------------
+ * ON THE `ratio` FORMAT.
+ *
+ * Takes "16/9" or "1.777". Both land in the same CSS property, which
+ * accepts either. The string form is kept because "16/9" is what the
+ * ratio is CALLED, and a reader recognising it at a glance is worth more
+ * than saving a division.
+ */
+export declare class TTAspectRatio extends LitElement {
+    ratio: string;
+    willUpdate(changed: PropertyValues): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-aspect-ratio": TTAspectRatio;
+    }
+}
+//# sourceMappingURL=tt-aspect-ratio.d.ts.map

package/dist/tt-aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-aspect-ratio.d.ts","sourceRoot":"","sources":["../src/tt-aspect-ratio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAAU;IAE3C,UAAU,CAAC,OAAO,EAAE,cAAc;IAYlC,MAAM,CAAC,MAAM,0BAmCX;IAEF,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/tt-aspect-ratio.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 { property, customElement } from "lit/decorators.js";
+/**
+ * Holds a box at a fixed width-to-height ratio.
+ *
+ * For anything whose height must be known before its content arrives: a
+ * video embed, a map, an image placeholder, a chart. Without it the page
+ * reflows the moment the content loads, which is the single largest
+ * cause of layout shift on a media-heavy page.
+ *
+ * ---------------------------------------------------------------------
+ * WHY THIS IS NOT JUST `aspect-ratio` IN YOUR OWN CSS.
+ *
+ * It nearly is, and if you control the CSS you should write it yourself.
+ * This exists for the case where you do not: slotted content, a block
+ * someone copied, a cell inside a grid. It also solves the part people
+ * get wrong, which is that `aspect-ratio` alone does nothing unless the
+ * CHILD is told to fill the box. That is the `::slotted` rule below and
+ * it is the whole reason this is a component.
+ *
+ * ---------------------------------------------------------------------
+ * ON THE `ratio` FORMAT.
+ *
+ * Takes "16/9" or "1.777". Both land in the same CSS property, which
+ * accepts either. The string form is kept because "16/9" is what the
+ * ratio is CALLED, and a reader recognising it at a glance is worth more
+ * than saving a division.
+ */
+let TTAspectRatio = class TTAspectRatio extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.ratio = "16/9";
+    }
+    willUpdate(changed) {
+        if (changed.has("ratio")) {
+            /*
+              Written as a custom property rather than interpolated into the
+              stylesheet, because a Lit `static styles` block is created once
+              per CLASS, not per instance. Two aspect ratios on one page would
+              share whichever value rendered last.
+            */
+            this.style.setProperty("--_ratio", this.ratio || "16/9");
+        }
+    }
+    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;
+
+      /* The fallback matters: an invalid or empty ratio would otherwise
+         make the whole declaration invalid and the box would collapse to
+         its content height, which is the bug this component exists to
+         prevent. */
+      aspect-ratio: var(--_ratio, 16/9);
+
+      width: 100%;
+      overflow: hidden;
+    }
+
+    /*
+      The part people miss. Setting aspect-ratio on the container is only
+      half of it: an <img> or <iframe> inside keeps its own intrinsic
+      size and either overflows or leaves a gap. This makes the child
+      fill the box it was given.
+
+      object-fit: cover so an image crops rather than distorting. A
+      squashed face is worse than a cropped one.
+    */
+    ::slotted(*) {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTAspectRatio.prototype, "ratio", void 0);
+TTAspectRatio = __decorate([
+    customElement("tt-aspect-ratio")
+], TTAspectRatio);
+export { TTAspectRatio };
+//# sourceMappingURL=tt-aspect-ratio.js.map

package/dist/tt-aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-aspect-ratio.js","sourceRoot":"","sources":["../src/tt-aspect-ratio.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACuB,UAAK,GAAG,MAAM,CAAC;IAsD7C,CAAC;IApDC,UAAU,CAAC,OAAuB;QAChC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB;;;;;cAKE;YACF,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmClB,AAnCY,CAmCX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AArD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAgB;AADhC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAuDzB"}

package/dist/tt-auth.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from "lit";
+import "./tt-card.js";
+import "./tt-form.js";
+import "./tt-input.js";
+import "./tt-checkbox.js";
+import "./tt-button.js";
+import "./tt-alert.js";
+import "./tt-divider.js";
+import "./tt-icon.js";
+export type AuthMode = "signIn" | "signUp" | "forgotPsw" | "resetPsw";
+/**
+ * The four screens every application needs, as one component.
+ *
+ * One element with a `mode` rather than four elements, the same choice
+ * tt-product and tt-profile-card make with `orientation`. All four share
+ * a card, a heading, an error region and a footer; only the fields and
+ * the event differ. Four components would repeat that shell four times
+ * and let it drift.
+ *
+ * IT NEVER TALKS TO A SERVER AND NEVER DECIDES ANYTHING. It reports what
+ * was typed and what was asked for. Whether the credentials are valid,
+ * whether the account exists, and what happens next all belong to
+ * whoever is using it. That is what keeps it usable against any backend.
+ *
+ * The events, for the custom-elements manifest. Its analyzer reads event
+ * names from string literals at the dispatch site, and these are chosen at
+ * run time, so without the tags the manifest listed a bogus event instead.
+ * @fires tt-sign-in - { email, password, remember } from the sign-in form.
+ * @fires tt-sign-up - { name, email, password, accepted } from the sign-up form.
+ * @fires tt-forgot - { email } from the forgot-password form.
+ * @fires tt-reset - { password } from the reset form.
+ * @fires tt-mode - { mode }, when a footer link asks for another screen.
+ */
+export declare class TTAuth extends LitElement {
+    mode: AuthMode;
+    heading: string;
+    description: string;
+    submitLabel: string;
+    emailLabel: string;
+    passwordLabel: string;
+    nameLabel: string;
+    email: string;
+    name: string;
+    rememberMe: boolean;
+    loading: boolean;
+    sent: boolean;
+    error: string;
+    private confirmError;
+    private get copy();
+    private get resolvedHeading();
+    private get resolvedSubmit();
+    private get resolvedDescription();
+    private handleSubmit;
+    private emit;
+    private goTo;
+    private renderEmail;
+    private renderPassword;
+    private renderConfirm;
+    private renderSubmit;
+    private link;
+    private renderShell;
+    private renderSignIn;
+    private renderSignUp;
+    private renderSent;
+    private renderForgot;
+    private renderReset;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-auth": TTAuth;
+    }
+}
+//# sourceMappingURL=tt-auth.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-auth.d.ts","sourceRoot":"","sources":["../src/tt-auth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AACxB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;AAmCtE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,CAAY;IAG1B,OAAO,SAAM;IACb,WAAW,SAAM;IACU,WAAW,SAAM;IAElB,UAAU,SAAW;IAClB,aAAa,SAAc;IAC/B,SAAS,SAAe;IAGjD,KAAK,SAAM;IACX,IAAI,SAAM;IAEiB,UAAU,UAAS;IAE7C,OAAO,UAAS;IAShB,IAAI,UAAS;IAId,KAAK,SAAM;IAS9B,OAAO,CAAC,YAAY,CAAM;IAEnC,OAAO,KAAK,IAAI,GAEf;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAUD,OAAO,CAAC,YAAY;IA+CpB,OAAO,CAAC,IAAI;IAaZ,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,YAAY;IA2BpB,OAAO,CAAC,YAAY;IAuCpB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW;IAYnB,MAAM,CAAC,MAAM,0BA4GX;IAEF,MAAM;CAeP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}