@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-table.js

@@ -0,0 +1,270 @@
+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 } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import "./tt-table-row.js";
+import "./tt-table-cell.js";
+/**
+ * A read-only table, written one of two ways.
+ *
+ * DATA: pass `columns` and `rows` and it draws a real table element.
+ * Fastest for text, and what every reference table in the docs uses.
+ *
+ * COMPOSED: leave `columns` empty and put `tt-table-row` elements inside,
+ * each holding `tt-table-cell` elements. A cell takes any component, so
+ * a checkbox, a badge or a button goes exactly where it is wanted.
+ *
+ * Both look the same. Columns win when both are given.
+ */
+let TTTable = class TTTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Generic so the same table renders properties, events and slots.
+        // Empty by default: a table guessing at columns is a docs table
+        // pretending to be a generic one.
+        this.columns = [];
+        this.rows = [];
+        /*
+          The table's name for screen readers, which announce it on entering
+          ("Team members, table, 4 rows"). Optional: a heading right above the
+          table does the same job for sighted readers only.
+        */
+        this.label = "";
+        /*
+          How many columns the composed grid has: the most cells in any row.
+          CSS cannot count, and a subgrid row can only span tracks its table
+          has declared, so the number has to be written into the template.
+        */
+        this.columnCount = 1;
+        /*
+          Rows and cells come and go in the light DOM, two levels down. A
+          slotchange only reports the first level (rows), so a cell added to
+          a row would go unnoticed; a subtree observer sees both.
+        */
+        this.observer = new MutationObserver(() => this.countColumns());
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.countColumns();
+        this.observer.observe(this, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observer.disconnect();
+    }
+    countColumns() {
+        let most = 1;
+        for (const row of this.children) {
+            if (row.localName === "tt-table-row")
+                most = Math.max(most, row.children.length);
+        }
+        this.columnCount = most;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+
+      /*
+        Not inherited, in effect. Set on this table it sizes this table's
+        columns; a table nested inside a cell would otherwise take its
+        parent's track list too. A value set on the element from outside
+        still wins, because outside rules beat :host.
+      */
+      --tt-table-columns: initial;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    .wrap {
+      width: 100%;
+      overflow-x: auto;
+      box-sizing: border-box;
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-lg);
+
+      -webkit-overflow-scrolling: touch;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    table,
+    .grid {
+      background: var(--tt-card);
+      color: var(--tt-muted-foreground);
+
+      font-size: var(--tt-text-sm);
+    }
+
+    /*
+      The composed table. Every row spans all the tracks and lays its
+      cells on them with subgrid, so a column is as wide as its widest
+      cell in any row. auto tracks share the spare width, and never
+      shrink below their content: past that, .wrap scrolls sideways.
+    */
+    .grid {
+      display: grid;
+      grid-template-columns: var(--tt-table-columns, repeat(var(--_columns), auto));
+
+      /* Grows with columns that cannot shrink, so the surface and the
+         row borders reach the last column while scrolling. */
+      min-width: min-content;
+    }
+
+    /* Rows, and anything else put in, run the full width. */
+    ::slotted(*) {
+      grid-column: 1 / -1;
+    }
+
+    th {
+      text-align: left;
+
+      /* Its own pair of tokens (tokens.css), so a colour theme can tint
+         the header without tinting every muted surface on the page. */
+      background: var(--tt-table-header);
+      color: var(--tt-table-header-foreground);
+
+      padding: var(--tt-space-3) var(--tt-space-4);
+
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+
+      white-space: nowrap;
+    }
+
+    td {
+      padding: var(--tt-space-3) var(--tt-space-4);
+
+      border-top: 1px solid var(--tt-border);
+
+      color: var(--tt-muted-foreground);
+
+      vertical-align: top;
+    }
+
+    tbody tr:hover {
+      background: var(--tt-accent);
+    }
+
+    /* First column identifies the row. */
+    td:first-child {
+      color: var(--tt-foreground);
+      font-weight: var(--tt-weight-semibold);
+    }
+
+    code {
+      font-family: var(--tt-font-mono);
+      font-size: var(--tt-text-xs);
+
+      background: var(--tt-muted);
+      color: var(--tt-foreground);
+
+      /* A chip: half a step tall, a full step wide, FIXED sm corners. */
+      padding: calc(var(--tt-space-1) / 2) var(--tt-space-2);
+      border-radius: var(--tt-radius-sm);
+
+      white-space: nowrap;
+    }
+
+    .muted {
+      opacity: 0.6;
+    }
+
+    @media (max-width: 480px) {
+      th,
+      td {
+        padding: var(--tt-space-2) var(--tt-space-3);
+      }
+
+      table,
+      .grid {
+        font-size: var(--tt-text-xs);
+      }
+    }
+  `; }
+    renderCell(column, row) {
+        const value = row[column.key];
+        if (value === undefined || value === "") {
+            return html `<span class="muted">-</span>`;
+        }
+        return column.code ? html `<code>${value}</code>` : value;
+    }
+    renderData() {
+        return html `
+      <table part="table" aria-label=${this.label || nothing}>
+        <thead>
+          <tr>
+            ${this.columns.map((column) => html `<th>${column.label}</th>`)}
+          </tr>
+        </thead>
+
+        <tbody>
+          ${this.rows.map((row) => html `
+              <tr>
+                ${this.columns.map((column) => html `<td>${this.renderCell(column, row)}</td>`)}
+              </tr>
+            `)}
+        </tbody>
+      </table>
+    `;
+    }
+    /*
+      A div with table roles rather than a table element. The HTML parser
+      moves a slot out of a table element, and a table's rows must be tr
+      elements anyway, so the rows and cells carry their roles on their
+      own hosts and this supplies the one that holds them.
+    */
+    renderComposed() {
+        return html `
+      <div
+        class="grid"
+        part="table"
+        role="table"
+        aria-label=${this.label || nothing}
+        style=${styleMap({ "--_columns": String(this.columnCount) })}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div class="wrap" part="wrap">
+        ${this.columns.length > 0 ? this.renderData() : this.renderComposed()}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTTable.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array })
+], TTTable.prototype, "rows", void 0);
+__decorate([
+    property({ type: String })
+], TTTable.prototype, "label", void 0);
+__decorate([
+    state()
+], TTTable.prototype, "columnCount", void 0);
+TTTable = __decorate([
+    customElement("tt-table")
+], TTTable);
+export { TTTable };
+//# sourceMappingURL=tt-table.js.map

package/dist/tt-table.js.map

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

package/dist/tt-tabs.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from "lit";
+export interface TabItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Tabbed sections. Panels are slotted by id, so the content lives with
+ * whoever is using the tabs rather than being passed in as data:
+ *
+ *   <tt-tabs .tabs=${[{ id: "about", label: "About" }]} active="about">
+ *     <div slot="about">...</div>
+ *   </tt-tabs>
+ *
+ * Owns nothing. `active` comes in, a click emits the id you asked for.
+ */
+export declare class TTTabs extends LitElement {
+    tabs: TabItem[];
+    active: string;
+    private get current();
+    private select;
+    private handleKeydown;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-tabs": TTTabs;
+    }
+}
+//# sourceMappingURL=tt-tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-tabs.d.ts","sourceRoot":"","sources":["../src/tt-tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,qBACa,MAAO,SAAQ,UAAU;IACT,IAAI,EAAE,OAAO,EAAE,CAAM;IAEpB,MAAM,SAAM;IAExC,OAAO,KAAK,OAAO,GAKlB;IAED,OAAO,CAAC,MAAM;IAiBd,OAAO,CAAC,aAAa;IA0CrB,MAAM,CAAC,MAAM,0BAoFX;IAEF,MAAM;CAgDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/tt-tabs.js

@@ -0,0 +1,223 @@
+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 { ifDefined } from "lit/directives/if-defined.js";
+/**
+ * Tabbed sections. Panels are slotted by id, so the content lives with
+ * whoever is using the tabs rather than being passed in as data:
+ *
+ *   <tt-tabs .tabs=${[{ id: "about", label: "About" }]} active="about">
+ *     <div slot="about">...</div>
+ *   </tt-tabs>
+ *
+ * Owns nothing. `active` comes in, a click emits the id you asked for.
+ */
+let TTTabs = class TTTabs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tabs = [];
+        this.active = "";
+    }
+    get current() {
+        // Fall back to the first tab, so an unset or stale id still renders
+        // something rather than an empty panel.
+        if (this.tabs.some((t) => t.id === this.active))
+            return this.active;
+        return this.tabs[0]?.id ?? "";
+    }
+    select(tab) {
+        if (tab.disabled || tab.id === this.current)
+            return;
+        this.dispatchEvent(new CustomEvent("tt-tab-change", {
+            detail: { id: tab.id },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /*
+      Arrow keys move between tabs, Home and End jump to the ends. This is
+      the expected behaviour for a tablist and it is what makes the
+      component usable without a mouse.
+    */
+    handleKeydown(event) {
+        const keys = ["ArrowRight", "ArrowLeft", "Home", "End"];
+        if (!keys.includes(event.key))
+            return;
+        event.preventDefault();
+        const index = this.tabs.findIndex((t) => t.id === this.current);
+        if (index === -1)
+            return;
+        let next = index;
+        if (event.key === "Home")
+            next = -1;
+        if (event.key === "End")
+            next = this.tabs.length;
+        const step = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0;
+        if (step !== 0) {
+            for (let i = 0; i < this.tabs.length; i++) {
+                next = (next + step + this.tabs.length) % this.tabs.length;
+                if (!this.tabs[next].disabled)
+                    break;
+            }
+        }
+        else {
+            // Home and End walk inward until they find an enabled tab.
+            const dir = event.key === "Home" ? 1 : -1;
+            do {
+                next += dir;
+            } while (this.tabs[next]?.disabled);
+        }
+        const tab = this.tabs[next];
+        if (!tab)
+            return;
+        this.select(tab);
+        this.updateComplete.then(() => {
+            const tabs = this.renderRoot?.querySelectorAll('[role="tab"]');
+            tabs?.[next]?.focus();
+        });
+    }
+    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);
+    }
+
+    .list {
+      display: flex;
+      gap: var(--tt-space-1);
+
+      /* The line runs the full width behind the tabs, so the active tab
+         reads as sitting on top of it rather than floating. */
+      border-bottom: 1px solid var(--tt-border);
+
+      overflow-x: auto;
+
+      /* Setting overflow on one axis makes the other compute to auto, so
+         the tabs' -1px bottom margin was enough to raise a vertical
+         scrollbar. Pin it shut. */
+      overflow-y: hidden;
+
+      scrollbar-width: thin;
+    }
+
+    .tab {
+      position: relative;
+      flex: 0 0 auto;
+
+      padding: var(--tt-space-3) var(--tt-space-4);
+      margin-bottom: -1px;
+
+      border: none;
+      border-bottom: 2px solid transparent;
+      background: transparent;
+      color: var(--tt-muted-foreground);
+
+      font: inherit;
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+
+      cursor: pointer;
+      white-space: nowrap;
+
+      transition:
+        color var(--tt-duration-normal) var(--tt-ease),
+        border-color var(--tt-duration-normal) var(--tt-ease);
+      /* Long-press should activate the control, not start selecting
+         its label. The other half of the mobile blue flash: the tap
+         highlight is the flash, this is the drag-select. */
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .tab:hover:not(:disabled) {
+      color: var(--tt-foreground);
+    }
+
+    .tab[aria-selected="true"] {
+      color: var(--tt-foreground);
+      border-bottom-color: var(--tt-primary);
+      font-weight: var(--tt-weight-semibold);
+    }
+
+    .tab:disabled {
+      opacity: var(--tt-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    .tab:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+      border-radius: var(--tt-radius-sm) var(--tt-radius-sm) 0 0;
+    }
+
+    .panel {
+      padding-top: var(--tt-space-5);
+    }
+
+  `; }
+    render() {
+        const current = this.current;
+        return html `
+      <div
+        class="list"
+        part="list"
+        role="tablist"
+        @keydown=${this.handleKeydown}
+      >
+        ${this.tabs.map((tab) => html `
+            <button
+              class="tab"
+              part="tab"
+              role="tab"
+              id=${`tab-${tab.id}`}
+              aria-selected=${tab.id === current ? "true" : "false"}
+              aria-controls=${ifDefined(tab.id === current ? `panel-${tab.id}` : undefined)}
+              tabindex=${tab.id === current ? 0 : -1}
+              ?disabled=${tab.disabled}
+              @click=${() => this.select(tab)}
+            >
+              ${tab.label}
+            </button>
+          `)}
+      </div>
+
+      <!--
+        Only the active panel is rendered. Rendering all of them and
+        hiding the rest would mean hidden form fields still submitting,
+        and hidden charts still measuring themselves at zero width.
+      -->
+      <div
+        class="panel"
+        part="panel"
+        role="tabpanel"
+        id=${`panel-${current}`}
+        aria-labelledby=${`tab-${current}`}
+        tabindex="0"
+      >
+        <slot name=${current}></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTTabs.prototype, "tabs", void 0);
+__decorate([
+    property({ type: String })
+], TTTabs.prototype, "active", void 0);
+TTTabs = __decorate([
+    customElement("tt-tabs")
+], TTTabs);
+export { TTTabs };
+//# sourceMappingURL=tt-tabs.js.map

package/dist/tt-tabs.js.map

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

package/dist/tt-tag-list.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+import "./tt-badge.js";
+export declare class TTTagList extends LitElement {
+    tags: string[];
+    max: number;
+    expandable: boolean;
+    private expanded;
+    private get visibleTags();
+    private get hiddenCount();
+    private expand;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-tag-list": TTTagList;
+    }
+}
+//# sourceMappingURL=tt-tag-list.d.ts.map

package/dist/tt-tag-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-tag-list.d.ts","sourceRoot":"","sources":["../src/tt-tag-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,eAAe,CAAC;AAEvB,qBACa,SAAU,SAAQ,UAAU;IACZ,IAAI,EAAE,MAAM,EAAE,CAAM;IAKnB,GAAG,SAAK;IAGP,UAAU,UAAS;IAGvC,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,KAAK,WAAW,GAOtB;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,MAAM;IAId,MAAM,CAAC,MAAM,0BA2DX;IAEF,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}