@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-image.js

@@ -0,0 +1,314 @@
+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, state, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "./tt-icon.js";
+/**
+ * An image in a box the PARENT sizes.
+ *
+ * Six properties, and each one answers a question you actually have when
+ * you place an image: how big is the box (ratio), what happens to a photo
+ * that is not that shape (fit), what are the corners (radius), and is
+ * this the one image worth loading early (priority).
+ *
+ * There is deliberately no size scale. The host is a block that fills its
+ * container, so a card wanting a 34px logo says 34px in its own CSS and
+ * wins, because rules from the tree that owns an element beat that
+ * element's :host. A fixed scale here (icon, profile, small, medium,
+ * large) was five pixel values from one app baked into a library meant
+ * for apps that do not exist yet, and three consumers ended up reaching
+ * through ::part just to undo it.
+ *
+ * The other half of the job is that real images fail, arrive late, or
+ * arrive already cached, so the load is treated as state: a skeleton
+ * while it downloads, a fallback if it never arrives.
+ *
+ * @fires tt-load - When the image has loaded.
+ * @fires tt-error - { src } when it failed and the fallback is showing.
+ * (Declared here because the analyzer does not see dispatches inside
+ * arrow-function fields, so the manifest left both out.)
+ */
+let TTImage = class TTImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.src = "";
+        /** Describe the picture, or pass "" when it is decorative. */
+        this.alt = "";
+        /** Any CSS aspect-ratio: "16 / 9", "4 / 5", "1". Empty means intrinsic. */
+        this.ratio = "";
+        this.fit = "cover";
+        this.radius = "medium";
+        /**
+         * Above the fold. Loads eagerly and asks the browser to prioritise the
+         * fetch, which a hero image needs and a thumbnail never does.
+         */
+        this.priority = false;
+        this.status = "loading";
+        this.handleLoad = () => {
+            this.status = "loaded";
+            this.dispatchEvent(new CustomEvent("tt-load", { bubbles: true, composed: true }));
+        };
+        this.handleError = () => {
+            this.status = "error";
+            this.dispatchEvent(new CustomEvent("tt-error", {
+                detail: { src: this.src },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    get showFallback() {
+        return this.src === "" || this.status === "error";
+    }
+    willUpdate(changed) {
+        /*
+          A new source is a new load. Without this one broken URL would
+          poison every image that element ever showed afterwards.
+    
+          No source at all is not "loading", it is already settled: there is
+          nothing on its way and the fallback is the final answer. Saying
+          loading there left the frame wearing the loading class forever,
+          which is a lie any consumer styling on it would inherit.
+        */
+        if (changed.has("src")) {
+            this.status = this.src === "" ? "loaded" : "loading";
+        }
+        if (changed.has("ratio")) {
+            this.style.setProperty("--_ratio", this.ratio || "auto");
+        }
+    }
+    updated() {
+        /*
+          A cached image can finish decoding before Lit attaches the load
+          listener, so the event never fires and the skeleton stays up
+          forever. `complete` is the browser saying it already happened.
+    
+          Through the handlers, not by assigning status: setting it here
+          would fix the visuals and silently skip tt-load / tt-error, so a
+          caller waiting on the event would hang on exactly the images that
+          resolved fastest.
+        */
+        const img = this.img;
+        if (img?.complete && this.status === "loading") {
+            if (img.naturalWidth > 0)
+                this.handleLoad();
+            else
+                this.handleError();
+        }
+    }
+    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%;
+
+      /*
+        The ratio lives on the HOST, not on the frame inside it. On the
+        frame it was height:100%, so as soon as anything gave the host a
+        definite height the frame's height became definite too, and
+        aspect-ratio is ignored once both axes already resolve.
+
+        Here it behaves the way a caller would predict: set only a width
+        and the ratio decides the height; set a height as well and the
+        height wins, because at that point you said it twice.
+      */
+      aspect-ratio: var(--_ratio, auto);
+
+      --_radius: var(--tt-radius-md);
+
+      /*
+        The corners live on the host, and the frame inherits them. A rule
+        from outside beats :host, so a container that shapes its image
+        wins: tt-card's image slot rounds only the top, to the card's own
+        curve. On the frame alone, the frame kept its all-round radius
+        there and left a notch at each bottom corner.
+      */
+      border-radius: var(--_radius);
+    }
+
+    :host([radius="none"]) {
+      --_radius: 0;
+    }
+    :host([radius="small"]) {
+      --_radius: var(--tt-radius-sm);
+    }
+    :host([radius="large"]) {
+      --_radius: var(--tt-radius-lg);
+    }
+    :host([radius="xlarge"]) {
+      --_radius: var(--tt-radius-xl);
+    }
+    :host([radius="2xlarge"]) {
+      --_radius: var(--tt-radius-2xl);
+    }
+    :host([radius="full"]) {
+      --_radius: var(--tt-radius-full);
+    }
+
+    .frame {
+      position: relative;
+
+      display: block;
+      overflow: hidden;
+
+      width: 100%;
+      height: 100%;
+
+      border-radius: inherit;
+
+      background: var(--tt-muted);
+    }
+
+    img {
+      display: block;
+
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+
+      /* Fades in over the skeleton rather than replacing it in one frame. */
+      opacity: 0;
+      transition: opacity var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    :host([fit="contain"]) img {
+      object-fit: contain;
+    }
+
+    .loaded img {
+      opacity: 1;
+    }
+
+    /*
+      Drawn here rather than by composing tt-skeleton: it has to sit
+      absolutely inside this frame and carries no semantics, which makes
+      it a background, not a component.
+    */
+    .skeleton {
+      position: absolute;
+      inset: 0;
+
+      background: linear-gradient(
+        90deg,
+        var(--tt-muted) 0%,
+        var(--tt-accent) 50%,
+        var(--tt-muted) 100%
+      );
+      background-size: 200% 100%;
+
+      animation: shimmer 1200ms linear infinite;
+    }
+
+    @keyframes shimmer {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
+      }
+    }
+
+    .fallback {
+      position: absolute;
+      inset: 0;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      background: var(--tt-muted);
+      color: var(--tt-muted-foreground);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      img {
+        transition: none;
+      }
+
+      .skeleton {
+        animation: none;
+      }
+    }
+  `; }
+    render() {
+        return html `
+      <div part="frame" class="frame ${this.status}">
+        ${this.status === "loading" && !this.showFallback
+            ? html `<div class="skeleton" part="skeleton" aria-hidden="true"></div>`
+            : nothing}
+        ${this.showFallback
+            ? html `
+              <!--
+                A decorative image whose source failed is still decorative,
+                so it announces nothing. One that meant something keeps its
+                description, because the meaning did not go away with the
+                pixels.
+              -->
+              <div
+                class="fallback"
+                part="fallback"
+                role=${ifDefined(this.alt ? "img" : undefined)}
+                aria-label=${this.alt || nothing}
+                aria-hidden=${ifDefined(this.alt ? undefined : "true")}
+              >
+                <slot name="fallback">
+                  <tt-icon name="image" size="24px"></tt-icon>
+                </slot>
+              </div>
+            `
+            : html `
+              <img
+                part="image"
+                src=${this.src}
+                alt=${this.alt}
+                loading=${this.priority ? "eager" : "lazy"}
+                .fetchPriority=${this.priority ? "high" : "auto"}
+                decoding="async"
+                @load=${this.handleLoad}
+                @error=${this.handleError}
+              />
+            `}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTImage.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], TTImage.prototype, "alt", void 0);
+__decorate([
+    property({ type: String })
+], TTImage.prototype, "ratio", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTImage.prototype, "fit", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTImage.prototype, "radius", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTImage.prototype, "priority", void 0);
+__decorate([
+    state()
+], TTImage.prototype, "status", void 0);
+__decorate([
+    query('img[part="image"]')
+], TTImage.prototype, "img", void 0);
+TTImage = __decorate([
+    customElement("tt-image")
+], TTImage);
+export { TTImage };
+//# sourceMappingURL=tt-image.js.map

package/dist/tt-image.js.map

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

package/dist/tt-inbox.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from "lit";
+import "./tt-avatar.js";
+import "./tt-empty-state.js";
+export interface Conversation {
+    id: string;
+    name: string;
+    avatar?: string;
+    subject?: string;
+    preview?: string;
+    timestamp?: string;
+    unread?: boolean;
+}
+/**
+ * The list side of a messaging surface: who wrote, about what, when, and
+ * whether it has been read.
+ *
+ * Pairs with tt-thread, which is the reading side. Split in two because
+ * they live in different places on screen - side by side on a desktop,
+ * two separate routes on a phone - and a single component would have to
+ * own that layout decision on the app's behalf.
+ *
+ * It owns nothing. `selected` comes in, `tt-conversation-select` goes out.
+ * That matters more here than usual: which conversation is open is the
+ * kind of state that belongs in the URL, so a thread can be linked to.
+ *
+ * UNREAD IS THE ONLY THING IT EMPHASISES. An inbox is read by scanning
+ * for what is new, so unread rows carry weight and a dot, and everything
+ * else stays quiet. Styling the sender, the subject and the time all
+ * strongly would leave nothing for the eye to catch.
+ */
+export declare class TTInbox extends LitElement {
+    conversations: Conversation[];
+    selected: string;
+    emptyHeading: string;
+    emptyDescription: string;
+    private select;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-inbox": TTInbox;
+    }
+}
+//# sourceMappingURL=tt-inbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-inbox.d.ts","sourceRoot":"","sources":["../src/tt-inbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,gBAAgB,CAAC;AAExB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IAEX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACV,aAAa,EAAE,YAAY,EAAE,CAAM;IAElC,QAAQ,SAAM;IAEc,YAAY,SAAiB;IAEzB,gBAAgB,SAAM;IAElF,OAAO,CAAC,MAAM;IAUd,MAAM,CAAC,MAAM,4BAgJV;IAEH,MAAM;CAsEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/tt-inbox.js

@@ -0,0 +1,275 @@
+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-avatar.js";
+import { srOnly } from "./sr-only.js";
+import "./tt-empty-state.js";
+/**
+ * The list side of a messaging surface: who wrote, about what, when, and
+ * whether it has been read.
+ *
+ * Pairs with tt-thread, which is the reading side. Split in two because
+ * they live in different places on screen - side by side on a desktop,
+ * two separate routes on a phone - and a single component would have to
+ * own that layout decision on the app's behalf.
+ *
+ * It owns nothing. `selected` comes in, `tt-conversation-select` goes out.
+ * That matters more here than usual: which conversation is open is the
+ * kind of state that belongs in the URL, so a thread can be linked to.
+ *
+ * UNREAD IS THE ONLY THING IT EMPHASISES. An inbox is read by scanning
+ * for what is new, so unread rows carry weight and a dot, and everything
+ * else stays quiet. Styling the sender, the subject and the time all
+ * strongly would leave nothing for the eye to catch.
+ */
+let TTInbox = class TTInbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.conversations = [];
+        this.selected = "";
+        this.emptyHeading = "No messages";
+        this.emptyDescription = "";
+    }
+    select(conversation) {
+        this.dispatchEvent(new CustomEvent("tt-conversation-select", {
+            detail: { id: conversation.id },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    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 {
+      display: block;
+      font-family: var(--tt-font-sans);
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    /*
+      A real button per row. A div with a click handler is invisible to
+      the keyboard, and an inbox is exactly the surface people drive with
+      arrow keys and Enter.
+    */
+    .row {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--tt-space-3);
+
+      width: 100%;
+      box-sizing: border-box;
+
+      padding: var(--tt-space-3) var(--tt-space-4);
+
+      border: none;
+      border-bottom: 1px solid var(--tt-border);
+      border-left: 2px solid transparent;
+
+      background: transparent;
+      color: inherit;
+
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+
+      transition: background var(--tt-duration-fast) var(--tt-ease);
+    }
+
+    .row:hover {
+      background: var(--tt-accent);
+    }
+
+    .row:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    /* The open conversation is marked on the leading edge rather than by
+       a fill, so it stays distinguishable from hover. */
+    .row.selected {
+      background: var(--tt-accent);
+      border-left-color: var(--tt-primary);
+    }
+
+    .body {
+      flex: 1;
+      min-width: 0;
+
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .top {
+      display: flex;
+      align-items: baseline;
+      gap: var(--tt-space-2);
+    }
+
+    /*
+      min-width:0 plus the ellipsis is what keeps a long name from pushing
+      the timestamp off the row. Flex items will not shrink below their
+      content without it.
+    */
+    .name {
+      flex: 1;
+      min-width: 0;
+
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+      color: var(--tt-foreground);
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .row.unread .name {
+      font-weight: var(--tt-weight-bold);
+    }
+
+    .time {
+      flex: 0 0 auto;
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .subject {
+      font-size: var(--tt-text-sm);
+      color: var(--tt-foreground);
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .row.unread .subject {
+      font-weight: var(--tt-weight-semibold);
+    }
+
+    .preview {
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .dot {
+      flex: 0 0 auto;
+
+      width: 8px;
+      height: 8px;
+      margin-top: 6px;
+
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-primary);
+    }
+
+    .state {
+      padding: var(--tt-space-8) var(--tt-space-4);
+    }
+
+  `]; }
+    render() {
+        if (this.conversations.length === 0) {
+            return html `
+        <div class="state">
+          <tt-empty-state
+            heading=${this.emptyHeading}
+            description=${this.emptyDescription}
+          >
+            <slot name="empty-actions" slot="actions"></slot>
+          </tt-empty-state>
+        </div>
+      `;
+        }
+        return html `
+      <!--
+        A list of buttons, not a listbox. role="listbox" promises ONE Tab
+        stop with arrow keys between options, and every row here is its
+        own button in the Tab order. A screen reader user following the
+        listbox instructions pressed arrows and got nothing. The selected
+        conversation is the current one, which aria-current says natively.
+      -->
+      <ul part="list" aria-label="Conversations">
+        ${this.conversations.map((conversation) => {
+            const isSelected = conversation.id === this.selected;
+            return html `
+            <li>
+              <button
+                class="row ${isSelected ? "selected" : ""} ${conversation.unread
+                ? "unread"
+                : ""}"
+                part="row"
+                type="button"
+                aria-current=${isSelected ? "true" : "false"}
+                @click=${() => this.select(conversation)}
+              >
+                <tt-avatar
+                  size="small"
+                  src=${conversation.avatar ?? ""}
+                  name=${conversation.name}
+                ></tt-avatar>
+
+                <span class="body">
+                  <span class="top">
+                    <span class="name">${conversation.name}</span>
+                    ${conversation.timestamp
+                ? html `<span class="time">${conversation.timestamp}</span>`
+                : ""}
+                  </span>
+
+                  ${conversation.subject
+                ? html `<span class="subject">${conversation.subject}</span>`
+                : ""}
+                  ${conversation.preview
+                ? html `<span class="preview">${conversation.preview}</span>`
+                : ""}
+                </span>
+
+                ${conversation.unread
+                ? html `<span class="dot" aria-hidden="true"></span
+                      ><span class="sr-only">Unread</span>`
+                : ""}
+              </button>
+            </li>
+          `;
+        })}
+      </ul>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTInbox.prototype, "conversations", void 0);
+__decorate([
+    property({ type: String })
+], TTInbox.prototype, "selected", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-heading" })
+], TTInbox.prototype, "emptyHeading", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-description" })
+], TTInbox.prototype, "emptyDescription", void 0);
+TTInbox = __decorate([
+    customElement("tt-inbox")
+], TTInbox);
+export { TTInbox };
+//# sourceMappingURL=tt-inbox.js.map

package/dist/tt-inbox.js.map

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

package/dist/tt-input.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+export type InputSize = "small" | "medium" | "large";
+export type AutoCompleteToken = "on" | "off" | "name" | "given-name" | "family-name" | "nickname" | "username" | "new-password" | "current-password" | "organization" | "organization-title" | "street-address" | "address-line1" | "address-line2" | "address-level1" | "address-level2" | "country" | "country-name" | "postal-code" | "email" | "tel" | "url" | "bday" | "cc-name" | "cc-number" | "cc-exp" | "cc-csc";
+export type InputType = "text" | "email" | "password" | "search" | "tel" | "url" | "number" | "date" | "time" | "datetime-local" | "month" | "week";
+export declare class TTInput extends LitElement {
+    static formAssociated: boolean;
+    private internals;
+    label: string;
+    placeholder: string;
+    value: string;
+    name: string;
+    type: InputType;
+    autocomplete?: AutoCompleteToken;
+    size: InputSize;
+    disabled: boolean;
+    required: boolean;
+    fullWidth: boolean;
+    error: string;
+    labelHidden: boolean;
+    private inputId;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    connectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    private syncFormState;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    private handleInput;
+    private handleChange;
+    focus(options?: FocusOptions): void;
+    private focusFromBox;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-input": TTInput;
+    }
+}
+//# sourceMappingURL=tt-input.d.ts.map