@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-switcher.js

@@ -0,0 +1,203 @@
+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";
+import "./tt-button.js";
+import "./tt-code-block.js";
+let TTSwitcher = class TTSwitcher extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.activeIndex = 0;
+    }
+    // When the row is scrolled, the selected tab can sit off-screen after a
+    // change made in code rather than by a click. Bring it back into view.
+    updated(changed) {
+        if (!changed.has("activeIndex"))
+            return;
+        const tab = this.renderRoot.querySelectorAll("tt-button")[this.activeIndex];
+        tab?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+    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%;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-4);
+      width: 100%;
+    }
+
+    /*
+      The tab row turns into a horizontal slider on its own once the tabs
+      no longer fit. overflow-x does the scrolling, but it only kicks in
+      because the tabs refuse to shrink (see .tabs > tt-button below) -
+      flex items shrink by default, so without that they would squash to
+      fit and nothing would ever overflow.
+    */
+    .tabs {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      width: 100%;
+
+      overflow-x: auto;
+      overflow-y: hidden;
+
+      /* Room for the scrollbar so it never overlaps the tabs. */
+      padding-bottom: var(--tt-space-2);
+
+      /* Slider feel: snap to whole tabs, animate programmatic scrolls,
+         and keep a horizontal swipe from triggering browser back. */
+      scroll-snap-type: x proximity;
+      scroll-behavior: smooth;
+      scroll-padding-inline: var(--tt-space-1);
+      overscroll-behavior-x: contain;
+      -webkit-overflow-scrolling: touch;
+
+      /* A visible bar, so the row is obviously draggable with a mouse.
+         It only appears when the tabs actually overflow. Firefox. */
+      scrollbar-width: thin;
+      scrollbar-color: var(--tt-border) transparent;
+    }
+
+    /* Chromium and Safari */
+    .tabs::-webkit-scrollbar {
+      height: 8px;
+    }
+
+    .tabs::-webkit-scrollbar-track {
+      background: var(--tt-muted);
+      border-radius: var(--tt-radius-full);
+    }
+
+    .tabs::-webkit-scrollbar-thumb {
+      background: color-mix(
+        in srgb,
+        var(--tt-muted-foreground) 45%,
+        transparent
+      );
+      border-radius: var(--tt-radius-full);
+    }
+
+    .tabs::-webkit-scrollbar-thumb:hover {
+      background: var(--tt-muted-foreground);
+    }
+
+    /* Keep each tab at its natural width so the row can overflow. */
+    .tabs > tt-button {
+      flex: 0 0 auto;
+      scroll-snap-align: start;
+    }
+
+    /* Not a duration, so tokens cannot reach it: smooth scrolling is its own
+       property. Everything else is handled centrally in tokens.css. */
+    @media (prefers-reduced-motion: reduce) {
+      .tabs {
+        scroll-behavior: auto;
+      }
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-3);
+      width: 100%;
+    }
+
+    .description {
+      margin: 0;
+      color: var(--tt-muted-foreground);
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-relaxed);
+    }
+
+    tt-code-block {
+      display: block;
+      width: 100%;
+    }
+
+    @media (max-width: 480px) {
+      .container {
+        gap: var(--tt-space-3);
+      }
+
+      .tabs {
+        gap: 4px;
+      }
+    }
+  `; }
+    render() {
+        const activeItem = this.items[this.activeIndex];
+        return html `
+      <div class="container">
+
+        <!--
+          Not a tablist: role="tab" was set on the tt-button HOST, which
+          wraps a real <button>, so a screen reader met a "tab" with a
+          button inside it and none of the tab keyboard behaviour. The
+          chosen one is marked current on the inner button instead.
+        -->
+        <div class="tabs" part="tabs" role="group" aria-label="Examples">
+          ${this.items.map((item, index) => html `
+              <tt-button
+                variant=${index === this.activeIndex ? "primary" : "secondary"}
+                size="small"
+                current=${index === this.activeIndex ? "true" : ""}
+                @tt-button-click=${() => (this.activeIndex = index)}
+              >
+                ${item.title}
+              </tt-button>
+            `)}
+        </div>
+
+        ${activeItem
+            ? html `
+              <div class="content" part="content">
+                ${activeItem.description
+                ? html `
+                      <p class="description">${activeItem.description}</p>
+                    `
+                : ""}
+
+                ${activeItem.code
+                ? html `
+                      <tt-code-block show-line-numbers
+                        .code=${activeItem.code}
+                        language=${activeItem.language ?? ""}
+                      ></tt-code-block>
+                    `
+                : ""}
+              </div>
+            `
+            : ""}
+
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTSwitcher.prototype, "items", void 0);
+__decorate([
+    property({ type: Number, attribute: "active-index" })
+], TTSwitcher.prototype, "activeIndex", void 0);
+TTSwitcher = __decorate([
+    customElement("tt-switcher")
+], TTSwitcher);
+export { TTSwitcher };
+//# sourceMappingURL=tt-switcher.js.map

package/dist/tt-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-switcher.js","sourceRoot":"","sources":["../src/tt-switcher.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,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAUrB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAEL,UAAK,GAAmB,EAAE,CAAC;QAG3B,gBAAW,GAAG,CAAC,CAAC;IAyLlB,CAAC;IAvLC,wEAAwE;IACxE,uEAAuE;IACvE,OAAO,CAAC,OAAuB;QAC7B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC;YAAE,OAAO;QAExC,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC,CACvD,IAAI,CAAC,WAAW,CACjB,CAAC;QAEF,GAAG,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAC/D,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsHlB,AAtHY,CAsHX;IAEF,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEhD,OAAO,IAAI,CAAA;;;;;;;;;;YAUH,IAAI,CAAC,KAAK,CAAC,GAAG,CACd,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;0BAEP,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;;0BAEpD,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;mCAC/B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;;kBAEjD,IAAI,CAAC,KAAK;;aAEf,CACF;;;UAGD,UAAU;YACV,CAAC,CAAC,IAAI,CAAA;;kBAEE,UAAU,CAAC,WAAW;gBACtB,CAAC,CAAC,IAAI,CAAA;+CACuB,UAAU,CAAC,WAAW;qBAChD;gBACH,CAAC,CAAC,EAAE;;kBAEJ,UAAU,CAAC,IAAI;gBACf,CAAC,CAAC,IAAI,CAAA;;gCAEQ,UAAU,CAAC,IAAI;mCACZ,UAAU,CAAC,QAAQ,IAAI,EAAE;;qBAEvC;gBACH,CAAC,CAAC,EAAE;;aAET;YACH,CAAC,CAAC,EAAE;;;KAGT,CAAC;IACJ,CAAC;;AA3LD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCACC;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;+CACtC;AALL,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA8LtB"}

package/dist/tt-table-cell.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+export type TableCellAlign = "start" | "center" | "end";
+/**
+ * One cell of a composed `tt-table`, inside a `tt-table-row`.
+ *
+ * It takes anything: text, a badge, a checkbox, a button, another
+ * component. The cell only supplies what every cell needs, the padding,
+ * the vertical centring and the alignment, so the content never has to
+ * know it is in a table.
+ *
+ * `header` makes it a column heading, for screen readers as well as on
+ * screen, the same as a th in a plain table.
+ */
+export declare class TTTableCell extends LitElement {
+    header: boolean;
+    align: TableCellAlign;
+    protected willUpdate(): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-table-cell": TTTableCell;
+    }
+}
+//# sourceMappingURL=tt-table-cell.d.ts.map

package/dist/tt-table-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-table-cell.d.ts","sourceRoot":"","sources":["../src/tt-table-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD;;;;;;;;;;GAUG;AACH,qBACa,WAAY,SAAQ,UAAU;IAMzC,MAAM,UAAS;IAOf,KAAK,EAAE,cAAc,CAAW;IAEhC,SAAS,CAAC,UAAU;IAYpB,MAAM,CAAC,MAAM,0BA6DX;IAEF,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/tt-table-cell.js

@@ -0,0 +1,121 @@
+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";
+/**
+ * One cell of a composed `tt-table`, inside a `tt-table-row`.
+ *
+ * It takes anything: text, a badge, a checkbox, a button, another
+ * component. The cell only supplies what every cell needs, the padding,
+ * the vertical centring and the alignment, so the content never has to
+ * know it is in a table.
+ *
+ * `header` makes it a column heading, for screen readers as well as on
+ * screen, the same as a th in a plain table.
+ */
+let TTTableCell = class TTTableCell extends LitElement {
+    constructor() {
+        super(...arguments);
+        /*
+          A column heading. Reflected, because the heading look is a
+          :host([header]) rule and a selector only sees attributes.
+        */
+        this.header = false;
+        /*
+          Where the content sits across the cell. End for numbers, so the
+          digits of a column of amounts line up.
+        */
+        this.align = "start";
+    }
+    willUpdate() {
+        /*
+          The role follows header, so it is set on every update rather than
+          once. Only a role this cell set itself is replaced: an author who
+          wrote role="rowheader" keeps it.
+        */
+        const role = this.getAttribute("role");
+        if (role === null || role === "cell" || role === "columnheader") {
+            this.setAttribute("role", this.header ? "columnheader" : "cell");
+        }
+    }
+    static { this.styles = css `
+    :host {
+      /*
+        Flex only to centre the content vertically. The content itself
+        sits in one wrapper below, so text and inline components keep
+        flowing as one line instead of each becoming a flex item.
+      */
+      display: flex;
+      align-items: center;
+
+      padding: var(--tt-space-3) var(--tt-space-4);
+
+      text-align: start;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    :host([align="center"]) {
+      text-align: center;
+    }
+
+    :host([align="end"]) {
+      text-align: end;
+    }
+
+    /* The first column identifies the row, as in the data table. */
+    :host(:first-child:not([header])) {
+      color: var(--tt-foreground);
+      font-weight: var(--tt-weight-semibold);
+    }
+
+    :host([header]) {
+      /* The same pair as tt-table's data-mode header. */
+      background: var(--tt-table-header);
+      color: var(--tt-table-header-foreground);
+
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+
+      white-space: nowrap;
+    }
+
+    /*
+      Fills the cell, so a block component (a progress bar, a field)
+      takes the column's width and inline ones (a badge, a checkbox)
+      follow text-align.
+    */
+    .content {
+      flex: 1 1 auto;
+    }
+
+    @media (max-width: 480px) {
+      :host {
+        padding: var(--tt-space-2) var(--tt-space-3);
+      }
+    }
+  `; }
+    render() {
+        return html `<div class="content" part="content"><slot></slot></div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTTableCell.prototype, "header", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTTableCell.prototype, "align", void 0);
+TTTableCell = __decorate([
+    customElement("tt-table-cell")
+], TTTableCell);
+export { TTTableCell };
+//# sourceMappingURL=tt-table-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-table-cell.js","sourceRoot":"","sources":["../src/tt-table-cell.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;AAI5D;;;;;;;;;;GAUG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACL;;;UAGE;QAEF,WAAM,GAAG,KAAK,CAAC;QAEf;;;UAGE;QAEF,UAAK,GAAmB,OAAO,CAAC;IAgFlC,CAAC;IA9EW,UAAU;QAClB;;;;UAIE;QACF,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACvC,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,cAAc,EAAE,CAAC;YAChE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DlB,AA7DY,CA6DX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA,yDAAyD,CAAC;IACvE,CAAC;;AAtFD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACV;AAbrB,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA6FvB"}

package/dist/tt-table-row.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from "lit";
+/**
+ * One row of a composed `tt-table`. Holds `tt-table-cell` elements.
+ *
+ * It has no settings. Its whole job is to be a row twice over: a row to
+ * a screen reader (role="row") and a row of the table's grid, through
+ * `grid-template-columns: subgrid`. Subgrid is what makes the columns
+ * line up. Each row lays its cells on the TABLE's column tracks rather
+ * than its own, so a wide cell in one row widens that column in every
+ * row, the way a real table does.
+ *
+ *   <tt-table>
+ *     <tt-table-row>
+ *       <tt-table-cell header>Name</tt-table-cell>
+ *     </tt-table-row>
+ *     <tt-table-row>
+ *       <tt-table-cell>Ada Lovelace</tt-table-cell>
+ *     </tt-table-row>
+ *   </tt-table>
+ */
+export declare class TTTableRow extends LitElement {
+    connectedCallback(): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-table-row": TTTableRow;
+    }
+}
+//# sourceMappingURL=tt-table-row.d.ts.map

package/dist/tt-table-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-table-row.d.ts","sourceRoot":"","sources":["../src/tt-table-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,iBAAiB;IAUjB,MAAM,CAAC,MAAM,0BAwBX;IAEF,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/tt-table-row.js

@@ -0,0 +1,72 @@
+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 } from "lit/decorators.js";
+/**
+ * One row of a composed `tt-table`. Holds `tt-table-cell` elements.
+ *
+ * It has no settings. Its whole job is to be a row twice over: a row to
+ * a screen reader (role="row") and a row of the table's grid, through
+ * `grid-template-columns: subgrid`. Subgrid is what makes the columns
+ * line up. Each row lays its cells on the TABLE's column tracks rather
+ * than its own, so a wide cell in one row widens that column in every
+ * row, the way a real table does.
+ *
+ *   <tt-table>
+ *     <tt-table-row>
+ *       <tt-table-cell header>Name</tt-table-cell>
+ *     </tt-table-row>
+ *     <tt-table-row>
+ *       <tt-table-cell>Ada Lovelace</tt-table-cell>
+ *     </tt-table-row>
+ *   </tt-table>
+ */
+let TTTableRow = class TTTableRow extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        /*
+          The role goes on the host itself, because the host is what sits
+          between the table and its cells in the accessibility tree. An
+          author's own role is left alone.
+        */
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "row");
+    }
+    static { this.styles = css `
+    :host {
+      /*
+        No grid-column here: tt-table places every child it holds, so
+        placement is decided once by the thing that owns the grid.
+      */
+      display: grid;
+      grid-template-columns: subgrid;
+
+      border-top: 1px solid var(--tt-border);
+    }
+
+    /* The table's own border already closes the top edge. */
+    :host(:first-child) {
+      border-top: none;
+    }
+
+    :host(:hover) {
+      background: var(--tt-accent);
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+TTTableRow = __decorate([
+    customElement("tt-table-row")
+], TTTableRow);
+export { TTTableRow };
+//# sourceMappingURL=tt-table-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-table-row.js","sourceRoot":"","sources":["../src/tt-table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IACxC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B;;;;UAIE;QACF,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnE,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBlB,AAxBY,CAwBX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAvCU,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAwCtB"}

package/dist/tt-table.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+import "./tt-table-row.js";
+import "./tt-table-cell.js";
+export interface TableColumn {
+    key: string;
+    label: string;
+    code?: boolean;
+}
+export type TableCell = string | number | TemplateResult;
+export type TableRow = Record<string, TableCell>;
+/**
+ * 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.
+ */
+export declare class TTTable extends LitElement {
+    columns: TableColumn[];
+    rows: TableRow[];
+    label: string;
+    private columnCount;
+    private observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private countColumns;
+    static styles: import("lit").CSSResult;
+    private renderCell;
+    private renderData;
+    private renderComposed;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-table": TTTable;
+    }
+}
+//# sourceMappingURL=tt-table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-table.d.ts","sourceRoot":"","sources":["../src/tt-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,WAAW;IAE1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AACD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,CAAC;AACzD,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,qBACa,OAAQ,SAAQ,UAAU;IAKrC,OAAO,EAAE,WAAW,EAAE,CAAM;IAG5B,IAAI,EAAE,QAAQ,EAAE,CAAM;IAQtB,KAAK,SAAM;IAQX,OAAO,CAAC,WAAW,CAAK;IAOxB,OAAO,CAAC,QAAQ,CAAmD;IAEnE,iBAAiB;IAMjB,oBAAoB;IAKpB,OAAO,CAAC,YAAY;IAQpB,MAAM,CAAC,MAAM,0BAoIX;IAEF,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,cAAc;IActB,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}