@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-comparison-table.js

@@ -0,0 +1,441 @@
+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";
+import { srOnly } from "./sr-only.js";
+/**
+ * Puts several things side by side against the same set of attributes.
+ *
+ * Most directories make you open two tabs and look back and forth. This
+ * is the component that removes that, which the notes call out as a
+ * genuine differentiator, and it generalises well beyond suppliers:
+ * pricing tiers, product specs, plan features.
+ *
+ * TWO THINGS MAKE IT ACTUALLY USEFUL rather than just a table turned on
+ * its side.
+ *
+ * First, the ROW LABELS ARE THE FIRST COLUMN and they stick while you
+ * scroll sideways. Comparing is a horizontal act, and a comparison where
+ * you lose track of which attribute you are reading is worse than two
+ * tabs.
+ *
+ * Second, `differencesOnly` hides every row where all items agree. On a
+ * profile with thirty attributes, the four that differ are the entire
+ * question, and they are invisible among the twenty-six that do not.
+ *
+ * Booleans render as a tick or a dash rather than the words true and
+ * false, because a column of ticks is scannable and a column of "true" is
+ * not.
+ */
+let TTComparisonTable = class TTComparisonTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.rows = [];
+        this.items = [];
+        this.differencesOnly = false;
+        // Show a remove control on each column header.
+        this.removable = false;
+        this.emptyText = "Nothing to compare yet";
+    }
+    /*
+      Rows where every item agrees. Compared as JSON because a value may be
+      a number, a boolean or a string and they must compare consistently;
+      a TemplateResult never equals another, so any row holding one is
+      always treated as differing, which is the safe direction.
+    */
+    get visibleRows() {
+        if (!this.differencesOnly || this.items.length < 2)
+            return this.rows;
+        return this.rows.filter((row) => {
+            const first = JSON.stringify(this.items[0].values[row.key] ?? null);
+            return this.items.some((item) => JSON.stringify(item.values[row.key] ?? null) !== first);
+        });
+    }
+    // removeItem, not remove: Element.remove() already exists, and
+    // shadowing a built-in DOM member breaks the element type outright.
+    removeItem(item, index, event) {
+        // Only when the button really had focus. Safari does not focus a
+        // clicked button, and focus that is not ours is not ours to move.
+        if (this.shadowRoot?.activeElement === event.currentTarget) {
+            this.pendingFocus = { id: item.id, index };
+        }
+        this.dispatchEvent(new CustomEvent("tt-remove", {
+            detail: { id: item.id },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /*
+      The tick and the dash are drawn for the eye and hidden from the screen
+      reader, and the words are the other way round. aria-label on the icon
+      or on a plain <span> does nothing: neither has a role, and ARIA does
+      not let an element with no role carry a name. tt-icon also hides its
+      own SVG. Real text is the only thing that is always read.
+    */
+    updated(changed) {
+        if (!changed.has("items") || !this.pendingFocus)
+            return;
+        const { id, index } = this.pendingFocus;
+        this.pendingFocus = undefined;
+        // The parent kept the column, so the button and its focus are still
+        // there. Nothing to repair.
+        if (this.items.some((item) => item.id === id))
+            return;
+        // The column that slid into the removed one's place, or the new last
+        // one; with no columns left, the empty message.
+        const buttons = this.renderRoot.querySelectorAll(".remove");
+        const next = buttons[Math.min(index, buttons.length - 1)] ??
+            this.renderRoot.querySelector(".empty");
+        next?.focus();
+    }
+    renderValue(value) {
+        if (value === true) {
+            return html `<tt-icon class="yes" name="check" size="16px"></tt-icon
+        ><span class="sr-only">Yes</span>`;
+        }
+        if (value === false) {
+            return html `<span class="no" aria-hidden="true">&mdash;</span
+        ><span class="sr-only">No</span>`;
+        }
+        // Null and empty mean "not stated", which is different from "no" and
+        // should not be dressed up as either.
+        if (value === null || value === undefined || value === "") {
+            return html `<span class="unknown">Not stated</span>`;
+        }
+        return value;
+    }
+    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);
+    }
+
+    .wrap {
+      width: 100%;
+      overflow-x: auto;
+      box-sizing: border-box;
+
+      background: var(--tt-card);
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-lg);
+
+      -webkit-overflow-scrolling: touch;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      font-size: var(--tt-text-sm);
+    }
+
+    th,
+    td {
+      padding: var(--tt-space-3) var(--tt-space-4);
+      text-align: left;
+      vertical-align: top;
+      border-bottom: 1px solid var(--tt-border);
+    }
+
+    /*
+      The attribute column sticks. Comparing is a sideways act, and losing
+      track of which row you are reading defeats the whole component.
+      z-index keeps it above the scrolling cells; the background is
+      required or they show through underneath it.
+    */
+    .attr {
+      position: sticky;
+      left: 0;
+      z-index: 2;
+
+      min-width: 140px;
+      background: var(--tt-card);
+      border-right: 1px solid var(--tt-border);
+
+      /* Reads as pinned rather than as a column that happens to be
+         first, and makes it obvious content is passing underneath. A
+         token, because a fixed 8% black vanished on the dark theme. */
+      box-shadow: var(--tt-shadow-pinned);
+    }
+
+    thead .attr {
+      z-index: 3;
+    }
+
+    /* Pins only when ::part(wrap) has a max-height. See the same rule in
+       tt-data-table for why it cannot pin to the page. */
+    thead th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+
+      background: var(--tt-muted);
+      vertical-align: bottom;
+    }
+
+    thead .attr {
+      background: var(--tt-muted);
+    }
+
+    .item-head {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--tt-space-2);
+      min-width: 160px;
+    }
+
+    .item-title {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-width: 0;
+    }
+
+    .item-label {
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-semibold);
+      color: var(--tt-foreground);
+      overflow-wrap: anywhere;
+    }
+
+    .item-meta {
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-regular);
+      color: var(--tt-muted-foreground);
+    }
+
+    .attr-label {
+      font-weight: var(--tt-weight-medium);
+      color: var(--tt-foreground);
+    }
+
+    .attr-hint {
+      display: block;
+      margin-top: 2px;
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-regular);
+      color: var(--tt-muted-foreground);
+    }
+
+    .yes {
+      color: var(--tt-success);
+    }
+
+    .no {
+      color: var(--tt-muted-foreground);
+    }
+
+    /* Absent is not the same as no, and should not look like it. */
+    .unknown {
+      font-size: var(--tt-text-xs);
+      font-style: italic;
+      color: var(--tt-muted-foreground);
+    }
+
+    .remove {
+      flex: 0 0 auto;
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      /* Same size rule as tt-search's clear button: a square inside a
+         small control, so it grows with the touch and density tokens
+         instead of staying a 22px target on a phone. */
+      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);
+
+      cursor: pointer;
+    }
+
+    .remove:hover {
+      background: var(--tt-accent);
+      color: var(--tt-foreground);
+    }
+
+    .remove:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    .empty {
+      padding: var(--tt-space-8);
+      text-align: center;
+      font-size: var(--tt-text-sm);
+      color: var(--tt-muted-foreground);
+    }
+
+    /*
+      Takes focus when the last column is removed, so it shows the ring
+      like anything else with focus. Drawn INSIDE the edge: the scrolling
+      .wrap clips anything outside its box, so the usual positive offset
+      would be cut off completely.
+    */
+    .empty:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    tbody tr:last-child th,
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+
+    /*
+      MOBILE. The sticky column was eating the screen.
+
+      At 140px min-width plus space-4 padding on both sides it took about
+      172px of a 360px phone, and each item column then wanted 192px - so
+      one column filled the remaining space and nothing else was legible.
+      A comparison you can only see one side of is not a comparison.
+
+      Everything here buys horizontal room back: tighter padding, a
+      smaller floor on both columns, and smaller type in the attribute
+      column, whose labels can wrap onto two lines quite happily. The
+      target is that the second item column is partly visible, because a
+      half-visible column is what tells you to swipe.
+
+      768px, the library's tablet breakpoint, not a one-off value.
+    */
+    @media (max-width: 768px) {
+      th,
+      td {
+        padding: var(--tt-space-2) var(--tt-space-3);
+      }
+
+      .attr {
+        min-width: 92px;
+        width: 92px;
+      }
+
+      .attr-label {
+        font-size: var(--tt-text-xs);
+      }
+
+      .item-head {
+        min-width: 118px;
+      }
+
+      .item-label {
+        font-size: var(--tt-text-xs);
+      }
+
+      table {
+        font-size: var(--tt-text-xs);
+      }
+    }
+  `,
+    ]; }
+    render() {
+        if (this.items.length === 0) {
+            return html `<div class="wrap">
+        <div class="empty" part="empty" tabindex="-1">${this.emptyText}</div>
+      </div>`;
+        }
+        const rows = this.visibleRows;
+        return html `
+      <div class="wrap" part="wrap">
+        <table part="table">
+          <thead>
+            <tr>
+              <th class="attr" scope="col">
+                <span class="attr-label">Compare</span>
+              </th>
+
+              ${this.items.map((item, index) => html `
+                  <th scope="col">
+                    <div class="item-head">
+                      <span class="item-title">
+                        <span class="item-label">${item.label}</span>
+                        ${item.meta
+            ? html `<span class="item-meta">${item.meta}</span>`
+            : ""}
+                      </span>
+
+                      ${this.removable
+            ? html `
+                            <button
+                              class="remove"
+                              type="button"
+                              aria-label=${`Remove ${item.label}`}
+                              @click=${(e) => this.removeItem(item, index, e)}
+                            >
+                              <tt-icon name="x" size="14px"></tt-icon>
+                            </button>
+                          `
+            : ""}
+                    </div>
+                  </th>
+                `)}
+            </tr>
+          </thead>
+
+          <tbody>
+            ${rows.length === 0
+            ? html `
+                  <tr>
+                    <td class="empty" colspan=${this.items.length + 1}>
+                      These are identical on every attribute.
+                    </td>
+                  </tr>
+                `
+            : rows.map((row) => html `
+                    <tr>
+                      <th class="attr" scope="row">
+                        <span class="attr-label">${row.label}</span>
+                        ${row.hint
+                ? html `<span class="attr-hint">${row.hint}</span>`
+                : ""}
+                      </th>
+
+                      ${this.items.map((item) => html `
+                          <td>${this.renderValue(item.values[row.key] ?? null)}</td>
+                        `)}
+                    </tr>
+                  `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTComparisonTable.prototype, "rows", void 0);
+__decorate([
+    property({ type: Array })
+], TTComparisonTable.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "differences-only" })
+], TTComparisonTable.prototype, "differencesOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTComparisonTable.prototype, "removable", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-text" })
+], TTComparisonTable.prototype, "emptyText", void 0);
+TTComparisonTable = __decorate([
+    customElement("tt-comparison-table")
+], TTComparisonTable);
+export { TTComparisonTable };
+//# sourceMappingURL=tt-comparison-table.js.map

package/dist/tt-comparison-table.js.map

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

package/dist/tt-component-doc.d.ts

@@ -0,0 +1,63 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+import "./tt-page.js";
+import "./tt-section.js";
+import "./tt-preview.js";
+import "./tt-example.js";
+import "./tt-code-block.js";
+import "./tt-table.js";
+import "./tt-icon.js";
+import type { TableRow } from "./tt-table.js";
+export interface DocExample {
+    title: string;
+    description?: string;
+    preview: TemplateResult;
+    code: string;
+    language?: string;
+    align?: "center" | "start" | "stretch";
+}
+export interface DocGuidelines {
+    use?: string[];
+    avoid?: string[];
+}
+export interface DocKeyBinding {
+    keys: string;
+    action: string;
+}
+export interface DocAccessibility {
+    keys?: DocKeyBinding[];
+    notes?: string[];
+}
+export interface DocRelated {
+    label: string;
+    doc: string;
+    reason?: string;
+}
+export declare class TTComponentDoc extends LitElement {
+    heading: string;
+    description: string;
+    code: string;
+    props: TableRow[];
+    events: TableRow[];
+    methods: TableRow[];
+    slots: TableRow[];
+    parts: TableRow[];
+    cssProperties: TableRow[];
+    importPath: string;
+    anatomy: string;
+    examples: DocExample[];
+    guidelines: DocGuidelines | null;
+    accessibility: DocAccessibility | null;
+    related: DocRelated[];
+    private openDoc;
+    static styles: import("lit").CSSResult;
+    private renderGuidelines;
+    private renderAccessibility;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-component-doc": TTComponentDoc;
+    }
+}
+//# sourceMappingURL=tt-component-doc.d.ts.map

package/dist/tt-component-doc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-component-doc.d.ts","sourceRoot":"","sources":["../src/tt-component-doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,cAAc,CAAC;AACtB,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAe,QAAQ,EAAE,MAAM,eAAe,CAAC;AAO3D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;CACxC;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0CD,qBACa,cAAe,SAAQ,UAAU;IAI5C,OAAO,SAAM;IAGb,WAAW,SAAM;IAGjB,IAAI,SAAM;IAGV,KAAK,EAAE,QAAQ,EAAE,CAAM;IAGvB,MAAM,EAAE,QAAQ,EAAE,CAAM;IAQxB,OAAO,EAAE,QAAQ,EAAE,CAAM;IAGzB,KAAK,EAAE,QAAQ,EAAE,CAAM;IAGvB,KAAK,EAAE,QAAQ,EAAE,CAAM;IAKvB,aAAa,EAAE,QAAQ,EAAE,CAAM;IAI/B,UAAU,SAAM;IAUhB,OAAO,SAAM;IAGb,QAAQ,EAAE,UAAU,EAAE,CAAM;IAG5B,UAAU,EAAE,aAAa,GAAG,IAAI,CAAQ;IAGxC,aAAa,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAG9C,OAAO,EAAE,UAAU,EAAE,CAAM;IAO3B,OAAO,CAAC,OAAO;IAUf,MAAM,CAAC,MAAM,0BAsNX;IAEF,OAAO,CAAC,gBAAgB;IAwDxB,OAAO,CAAC,mBAAmB;IAgC3B,MAAM;CAsJP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}