@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-data-table.js

@@ -0,0 +1,542 @@
+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";
+import "./tt-checkbox.js";
+import "./tt-skeleton.js";
+import "./tt-empty-state.js";
+import "./tt-dropdown-menu.js";
+import "./tt-icon.js";
+import { srOnly } from "./sr-only.js";
+/**
+ * Working table: sorting, selection, row actions, sticky header, and
+ * loading and empty states.
+ *
+ * It owns nothing. Sort state and selection come in as properties and
+ * changes go out as events, so the page stays the single source of truth
+ * and can put either in a URL. Sorting itself is the page's job too: it
+ * knows whether the data is an in-memory array or a server query.
+ */
+let TTDataTable = class TTDataTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.rows = [];
+        /*
+          The table's name for screen readers, announced on entering it
+          ("Team members, table"). Same word and job as tt-table's label. A
+          heading above the table names it for sighted readers only.
+        */
+        this.label = "";
+        this.selectable = false;
+        this.selected = [];
+        // Same menu on every row. Leave empty for no actions column.
+        this.rowActions = [];
+        this.loading = false;
+        this.loadingRows = 5;
+        this.emptyHeading = "Nothing here yet";
+        this.emptyDescription = "";
+        // Rows respond to clicks. Only set this when there is somewhere to go.
+        this.clickableRows = false;
+    }
+    /*
+      What a row's selection checkbox is called.
+  
+      "Select row" repeated twenty times tells a screen-reader user which
+      control they are on but nothing about what it does. The first column
+      is the closest thing to a row's name that a generic table can know,
+      so "Select Adriatik" comes out of the data rather than a guess.
+    */
+    rowLabel(row) {
+        const name = this.rowName(row);
+        return name ? `Select ${name}` : "Select row";
+    }
+    /*
+      Only plain text names a row. A rich first cell (a template with an
+      avatar and two lines) stringified to "[object Object]", which a screen
+      reader then read out on every row.
+    */
+    rowName(row) {
+        const first = this.columns[0];
+        const value = first ? row[first.key] : undefined;
+        return typeof value === "string" || typeof value === "number" ? String(value) : "";
+    }
+    get hasActions() {
+        return this.rowActions.length > 0;
+    }
+    get columnCount() {
+        return (this.columns.length + (this.selectable ? 1 : 0) + (this.hasActions ? 1 : 0));
+    }
+    /*
+      Both answer for the rows ON SCREEN, compared by id, never by count.
+  
+      `selected` can hold ids that are not in `rows`: picked before a filter
+      hid them, or on another page. Comparing lengths then lies. Pick three
+      rows, filter to three different ones, and the header claimed "all
+      selected" while nothing visible was ticked.
+    */
+    get allSelected() {
+        return (this.rows.length > 0 &&
+            this.rows.every((row) => this.selected.includes(row.id)));
+    }
+    get someSelected() {
+        return (!this.allSelected &&
+            this.rows.some((row) => this.selected.includes(row.id)));
+    }
+    emitSelection(next) {
+        this.dispatchEvent(new CustomEvent("tt-selection-change", {
+            detail: { selected: next },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    toggleAll(event) {
+        // tt-checkbox emits its own composed tt-change. Without this it would
+        // reach the page too, arriving after ours with no `selected` in it.
+        event.stopPropagation();
+        /*
+          Select-all applies to what is currently on screen, which is what a
+          user means by "all" when a filter is active. It adds or removes ONLY
+          those rows: a selection made before the filter, now hidden, is not
+          the header checkbox's to throw away.
+        */
+        const visible = this.rows.map((r) => r.id);
+        this.emitSelection(this.allSelected
+            ? this.selected.filter((id) => !visible.includes(id))
+            : [...this.selected, ...visible.filter((id) => !this.selected.includes(id))]);
+    }
+    toggleRow(id, event) {
+        event.stopPropagation();
+        this.emitSelection(this.selected.includes(id)
+            ? this.selected.filter((s) => s !== id)
+            : [...this.selected, id]);
+    }
+    /*
+      Cycles ascending, descending, then off. The third state matters: once
+      sorted there is otherwise no way back to the original order, which is
+      usually meaningful (newest first, or whatever the server chose).
+    */
+    toggleSort(column) {
+        if (!column.sortable)
+            return;
+        let next;
+        if (this.sort?.key !== column.key) {
+            next = { key: column.key, direction: "asc" };
+        }
+        else if (this.sort.direction === "asc") {
+            next = { key: column.key, direction: "desc" };
+        }
+        else {
+            next = undefined;
+        }
+        this.dispatchEvent(new CustomEvent("tt-sort", {
+            detail: { sort: next },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    clickRow(row) {
+        if (!this.clickableRows)
+            return;
+        this.dispatchEvent(new CustomEvent("tt-row-click", {
+            detail: { row },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    chooseAction(row, event) {
+        // The menu's tt-menu-select is generic. Re-emit it as something the page
+        // can act on: which action, on which row.
+        event.stopPropagation();
+        const { value } = event.detail;
+        this.dispatchEvent(new CustomEvent("tt-row-action", {
+            detail: { action: value, row },
+            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);
+    }
+
+    .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: collapse;
+      font-size: var(--tt-text-sm);
+    }
+
+    /*
+      Sticky header: the column labels stay put while the body scrolls,
+      so you never lose track of what a column means in a long list.
+
+      It sticks to .wrap, not to the page. overflow-x: auto turns .wrap
+      into a scroll container on BOTH axes, and sticky always pins to the
+      nearest one. So it only works once the consumer gives the wrap a
+      height (::part(wrap) { max-height }). There is no way to scroll
+      sideways inside a box AND stick to the page's scroll; that is CSS,
+      not a choice made here.
+    */
+    thead th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+
+      /* The same pair as tt-table, so a colour theme tints every table header. */
+      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-align: left;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      white-space: nowrap;
+    }
+
+    th.end,
+    td.end {
+      text-align: right;
+    }
+
+    td {
+      padding: var(--tt-space-3) var(--tt-space-4);
+      border-top: 1px solid var(--tt-border);
+      color: var(--tt-foreground);
+      line-height: var(--tt-leading-snug);
+      vertical-align: middle;
+    }
+
+    tbody tr {
+      transition: background var(--tt-duration-fast) var(--tt-ease);
+    }
+
+    tbody tr:hover {
+      background: var(--tt-accent);
+    }
+
+    tbody tr.clickable {
+      cursor: pointer;
+    }
+
+    /* Selected sits after hover so it wins, and gets its own darker
+       hover so a selected row still reacts to the pointer. */
+    tbody tr.selected {
+      background: color-mix(in srgb, var(--tt-primary) 8%, transparent);
+    }
+
+    tbody tr.selected:hover {
+      background: color-mix(in srgb, var(--tt-primary) 14%, transparent);
+    }
+
+    tbody tr:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    /* Sort controls are real buttons so the header is keyboard reachable.
+       A th with a click handler is not. */
+    .sort {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--tt-space-1);
+
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: inherit;
+
+      font: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      text-transform: inherit;
+
+      cursor: pointer;
+    }
+
+    .sort:hover {
+      color: var(--tt-foreground);
+    }
+
+    .sort:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+      border-radius: var(--tt-radius-sm);
+    }
+
+    /* Reserve the arrow's space always, so a header does not shift
+       sideways the moment you sort by it. The icon is always rendered and
+       only faded, so it holds its own width. */
+    .arrow {
+      display: inline-flex;
+      opacity: 0;
+    }
+
+    .sorted {
+      color: var(--tt-foreground);
+    }
+
+    .sorted .arrow {
+      opacity: 1;
+    }
+
+    /* width:1% on a table cell means "as narrow as the content allows".
+       The other columns absorb the leftover space. */
+    .select-cell,
+    .actions-cell {
+      width: 1%;
+      white-space: nowrap;
+    }
+
+    .select-cell {
+      padding-right: 0;
+    }
+
+    .actions-cell {
+      text-align: right;
+    }
+
+    .state {
+      padding: var(--tt-space-6);
+    }
+
+  `,
+    ]; }
+    renderHeader() {
+        return html `
+      <thead>
+        <tr>
+          ${this.selectable
+            ? html `
+                <th class="select-cell">
+                  <!--
+                    The checkbox names ITSELF, but its label lives in a
+                    nested shadow root, and a table header cell is judged
+                    on its own text. Same pattern as the actions column
+                    above: the column gets a name, the control gets a name,
+                    and they are not the same sentence.
+                  -->
+                  <span class="sr-only">Select</span>
+                  <tt-checkbox
+                    label="Select all rows"
+                    label-hidden
+                    .checked=${this.allSelected}
+                    .indeterminate=${this.someSelected}
+                    @tt-change=${this.toggleAll}
+                  ></tt-checkbox>
+                </th>
+              `
+            : ""}
+          ${this.columns.map((column) => {
+            const isSorted = this.sort?.key === column.key;
+            const direction = this.sort?.direction;
+            return html `
+              <th
+                class=${column.align === "end" ? "end" : ""}
+                style=${ifDefined(column.width ? `width:${column.width}` : undefined)}
+                aria-sort=${ifDefined(!column.sortable
+                ? undefined
+                : !isSorted
+                    ? "none"
+                    : direction === "asc"
+                        ? "ascending"
+                        : "descending")}
+              >
+                ${column.sortable
+                ? html `
+                      <button
+                        class="sort ${isSorted ? "sorted" : ""}"
+                        type="button"
+                        @click=${() => this.toggleSort(column)}
+                      >
+                        ${column.label}
+                        <span class="arrow" aria-hidden="true">
+                          <tt-icon
+                            name=${direction === "desc" ? "arrow-down" : "arrow-up"}
+                            size="12px"
+                          ></tt-icon>
+                        </span>
+                      </button>
+                    `
+                : column.label}
+              </th>
+            `;
+        })}
+          ${this.hasActions
+            ? html `<th class="actions-cell">
+                <span class="sr-only">Actions</span>
+              </th>`
+            : ""}
+        </tr>
+      </thead>
+    `;
+    }
+    renderLoading() {
+        return html `
+      <tbody aria-busy="true">
+        ${Array.from({ length: this.loadingRows }, () => html `
+            <tr>
+              <td colspan=${this.columnCount}>
+                <tt-skeleton variant="text"></tt-skeleton>
+              </td>
+            </tr>
+          `)}
+      </tbody>
+    `;
+    }
+    renderRow(row) {
+        const isSelected = this.selected.includes(row.id);
+        return html `
+      <tr
+        class="${this.clickableRows ? "clickable" : ""} ${isSelected
+            ? "selected"
+            : ""}"
+        tabindex=${ifDefined(this.clickableRows ? 0 : undefined)}
+        @click=${() => this.clickRow(row)}
+        @keydown=${(e) => {
+            /*
+              Only a key pressed on the row ITSELF. Keys bubble, so Enter on
+              the row's checkbox or its actions menu reaches this handler
+              too, and opening the menu would also navigate away. target is
+              where the key was pressed; currentTarget is this <tr>.
+            */
+            if (e.target !== e.currentTarget)
+                return;
+            if (this.clickableRows && e.key === "Enter")
+                this.clickRow(row);
+        }}
+      >
+        ${this.selectable
+            ? html `
+              <td class="select-cell" @click=${(e) => e.stopPropagation()}>
+                <tt-checkbox
+                  .label=${this.rowLabel(row)}
+                  label-hidden
+                  .checked=${isSelected}
+                  @tt-change=${(e) => this.toggleRow(row.id, e)}
+                ></tt-checkbox>
+              </td>
+            `
+            : ""}
+        ${this.columns.map((column) => html `
+            <td class=${column.align === "end" ? "end" : ""}>
+              ${row[column.key] ?? ""}
+            </td>
+          `)}
+        ${this.hasActions
+            ? html `
+              <td
+                class="actions-cell"
+                @click=${(e) => e.stopPropagation()}
+              >
+                <tt-dropdown-menu
+                  .items=${this.rowActions}
+                  label=${this.rowName(row) ? `Actions for ${this.rowName(row)}` : "Actions"}
+                  @tt-menu-select=${(e) => this.chooseAction(row, e)}
+                ></tt-dropdown-menu>
+              </td>
+            `
+            : ""}
+      </tr>
+    `;
+    }
+    render() {
+        return html `
+      <div class="wrap" part="wrap">
+        <table part="table" aria-label=${ifDefined(this.label || undefined)}>
+          ${this.renderHeader()}
+          ${this.loading
+            ? this.renderLoading()
+            : html `
+                <tbody>
+                  ${this.rows.length === 0
+                ? html `
+                        <tr>
+                          <td class="state" colspan=${this.columnCount}>
+                            <tt-empty-state
+                              heading=${this.emptyHeading}
+                              description=${this.emptyDescription}
+                            >
+                              <slot name="empty-actions" slot="actions"></slot>
+                            </tt-empty-state>
+                          </td>
+                        </tr>
+                      `
+                : this.rows.map((row) => this.renderRow(row))}
+                </tbody>
+              `}
+        </table>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTDataTable.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array })
+], TTDataTable.prototype, "rows", void 0);
+__decorate([
+    property({ type: String })
+], TTDataTable.prototype, "label", void 0);
+__decorate([
+    property({ type: Object })
+], TTDataTable.prototype, "sort", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTDataTable.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Array })
+], TTDataTable.prototype, "selected", void 0);
+__decorate([
+    property({ type: Array, attribute: "row-actions" })
+], TTDataTable.prototype, "rowActions", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTDataTable.prototype, "loading", void 0);
+__decorate([
+    property({ type: Number, attribute: "loading-rows" })
+], TTDataTable.prototype, "loadingRows", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-heading" })
+], TTDataTable.prototype, "emptyHeading", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-description" })
+], TTDataTable.prototype, "emptyDescription", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "clickable-rows" })
+], TTDataTable.prototype, "clickableRows", void 0);
+TTDataTable = __decorate([
+    customElement("tt-data-table")
+], TTDataTable);
+export { TTDataTable };
+//# sourceMappingURL=tt-data-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-data-table.js","sourceRoot":"","sources":["../src/tt-data-table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAwBtC;;;;;;;;GAQG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACsB,YAAO,GAAiB,EAAE,CAAC;QAE3B,SAAI,GAAc,EAAE,CAAC;QAEhD;;;;UAIE;QAC0B,UAAK,GAAG,EAAE,CAAC;QA4BV,eAAU,GAAG,KAAK,CAAC;QAErB,aAAQ,GAAa,EAAE,CAAC;QAEnD,6DAA6D;QACR,eAAU,GAAiB,EAAE,CAAC;QAEtD,YAAO,GAAG,KAAK,CAAC;QAEU,gBAAW,GAAG,CAAC,CAAC;QAEf,iBAAY,GAAG,kBAAkB,CAAC;QAE9B,qBAAgB,GAAG,EAAE,CAAC;QAElF,uEAAuE;QACb,kBAAa,GAAG,KAAK,CAAC;IAgelF,CAAC;IA1gBC;;;;;;;MAOE;IACM,QAAQ,CAAC,GAAY;QAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;IAChD,CAAC;IAED;;;;MAIE;IACM,OAAO,CAAC,GAAY;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACjD,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACrF,CAAC;IAsBD,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;IACpC,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,CACL,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5E,CAAC;IACJ,CAAC;IAED;;;;;;;MAOE;IACF,IAAY,WAAW;QACrB,OAAO,CACL,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;YACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CACzD,CAAC;IACJ,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,CACL,CAAC,IAAI,CAAC,WAAW;YACjB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CACxD,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,IAAc;QAClC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;YACrC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC1B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,SAAS,CAAC,KAAY;QAC5B,sEAAsE;QACtE,oEAAoE;QACpE,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB;;;;;UAKE;QACF,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAE3C,IAAI,CAAC,aAAa,CAChB,IAAI,CAAC,WAAW;YACd,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACrD,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAC/E,CAAC;IACJ,CAAC;IAEO,SAAS,CAAC,EAAU,EAAE,KAAY;QACxC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,aAAa,CAChB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACxB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;YACvC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3B,CAAC;IACJ,CAAC;IAED;;;;MAIE;IACM,UAAU,CAAC,MAAkB;QACnC,IAAI,CAAC,MAAM,CAAC,QAAQ;YAAE,OAAO;QAE7B,IAAI,IAA2B,CAAC;QAEhC,IAAI,IAAI,CAAC,IAAI,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,EAAE,CAAC;YAClC,IAAI,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QAC/C,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YACzC,IAAI,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;QAChD,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,SAAS,EAAE;YACzB,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACtB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,QAAQ,CAAC,GAAY;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QAEhC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE,EAAE,GAAG,EAAE;YACf,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,GAAY,EAAE,KAAY;QAC7C,yEAAyE;QACzE,0CAA0C;QAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,EAAE,KAAK,EAAE,GAAI,KAAwC,CAAC,MAAM,CAAC;QAEnE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG;QACd,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuKJ;KACA,AA1KY,CA0KX;IAEM,YAAY;QAClB,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;+BAaa,IAAI,CAAC,WAAW;qCACV,IAAI,CAAC,YAAY;iCACrB,IAAI,CAAC,SAAS;;;eAGhC;YACH,CAAC,CAAC,EAAE;YACJ,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,CAAC;YAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC;YAEvC,OAAO,IAAI,CAAA;;wBAEC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;wBACnC,SAAS,CACf,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CACnD;4BACW,SAAS,CACnB,CAAC,MAAM,CAAC,QAAQ;gBACd,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,CAAC,QAAQ;oBACT,CAAC,CAAC,MAAM;oBACR,CAAC,CAAC,SAAS,KAAK,KAAK;wBACnB,CAAC,CAAC,WAAW;wBACb,CAAC,CAAC,YAAY,CACrB;;kBAEC,MAAM,CAAC,QAAQ;gBACf,CAAC,CAAC,IAAI,CAAA;;sCAEc,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;iCAE7B,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;;0BAEpC,MAAM,CAAC,KAAK;;;mCAGH,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;;;;;qBAK9D;gBACH,CAAC,CAAC,MAAM,CAAC,KAAK;;aAEnB,CAAC;QACJ,CAAC,CAAC;YACA,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;oBAEE;YACR,CAAC,CAAC,EAAE;;;KAGX,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAA;;UAEL,KAAK,CAAC,IAAI,CACV,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,EAC5B,GAAG,EAAE,CAAC,IAAI,CAAA;;4BAEQ,IAAI,CAAC,WAAW;;;;WAIjC,CACF;;KAEJ,CAAC;IACJ,CAAC;IAEO,SAAS,CAAC,GAAY;QAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAElD,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,UAAU;YAC1D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;mBACK,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;iBAC/C,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;mBACtB,CAAC,CAAgB,EAAE,EAAE;YAC9B;;;;;cAKE;YACF,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;gBAAE,OAAO;YACzC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAClE,CAAC;;UAEC,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;+CAC+B,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;2BAErD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;;6BAEhB,UAAU;+BACR,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;;;aAGzD;YACH,CAAC,CAAC,EAAE;UACJ,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAA;wBACF,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;gBAC3C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE;;WAE1B,CACF;UACC,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;;yBAGS,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;2BAG/B,IAAI,CAAC,UAAU;0BAChB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;oCACxD,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC;;;aAG9D;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;yCAE0B,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC;YAC/D,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;YACtB,CAAC,CAAC,IAAI,CAAA;;oBAEE,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;gBACtB,CAAC,CAAC,IAAI,CAAA;;sDAE4B,IAAI,CAAC,WAAW;;wCAE9B,IAAI,CAAC,YAAY;4CACb,IAAI,CAAC,gBAAgB;;;;;;uBAM1C;gBACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;;eAElD;;;KAGV,CAAC;IACJ,CAAC;;AAphB0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAA4B;AAE3B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCAAsB;AAOpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAY;AA0BX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AAEhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAoB;AAErB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAAyB;AAGE;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAA+B;AAEtD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAiB;AAEU;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDAAiB;AAEf;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDAAmC;AAE9B;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;qDAAuB;AAGxB;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAAuB;AAtDrE,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAshBvB"}

package/dist/tt-divider.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+/**
+ * A separating line, optionally with a label in the middle.
+ *
+ * Trivial, and worth having: without it every page writes its own
+ * border-top with slightly different spacing, and the product drifts.
+ */
+export declare class TTDivider extends LitElement {
+    label: string;
+    vertical: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-divider": TTDivider;
+    }
+}
+//# sourceMappingURL=tt-divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-divider.d.ts","sourceRoot":"","sources":["../src/tt-divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,KAAK,SAAM;IAEK,QAAQ,UAAS;IAE7D,MAAM,CAAC,MAAM,0BAqDX;IAEF,MAAM;CAmBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/tt-divider.js

@@ -0,0 +1,104 @@
+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";
+/**
+ * A separating line, optionally with a label in the middle.
+ *
+ * Trivial, and worth having: without it every page writes its own
+ * border-top with slightly different spacing, and the product drifts.
+ */
+let TTDivider = class TTDivider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.vertical = false;
+    }
+    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);
+    }
+
+    :host([vertical]) {
+      display: inline-block;
+      height: 100%;
+      min-height: 1em;
+    }
+
+    .line {
+      border: none;
+      border-top: 1px solid var(--tt-border);
+      margin: 0;
+    }
+
+    :host([vertical]) .line {
+      height: 100%;
+      border-top: none;
+      border-left: 1px solid var(--tt-border);
+    }
+
+    /* With a label the rule becomes two rules, one either side of the
+       text, using flex rather than any background trickery. */
+    .labelled {
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-3);
+    }
+
+    .labelled::before,
+    .labelled::after {
+      content: "";
+      flex: 1;
+      border-top: 1px solid var(--tt-border);
+    }
+
+    .text {
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--tt-muted-foreground);
+      white-space: nowrap;
+    }
+  `; }
+    render() {
+        if (this.label) {
+            return html `
+        <!-- aria-label, because a separator's children are presentational:
+             the visible text inside is never read, so without this the
+             "or" its docs promise would be skipped. -->
+        <div
+          class="labelled"
+          part="divider"
+          role="separator"
+          aria-label=${this.label}
+        >
+          <span class="text">${this.label}</span>
+        </div>
+      `;
+        }
+        return html `<hr class="line" part="divider" />`;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTDivider.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTDivider.prototype, "vertical", void 0);
+TTDivider = __decorate([
+    customElement("tt-divider")
+], TTDivider);
+export { TTDivider };
+//# sourceMappingURL=tt-divider.js.map

package/dist/tt-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-divider.js","sourceRoot":"","sources":["../src/tt-divider.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;;;;;GAKG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACuB,UAAK,GAAG,EAAE,CAAC;QAEK,aAAQ,GAAG,KAAK,CAAC;IA4E/D,CAAC;aA1EQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDlB,AArDY,CAqDX;IAEF,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAA;;;;;;;;uBAQM,IAAI,CAAC,KAAK;;+BAEF,IAAI,CAAC,KAAK;;OAElC,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA,oCAAoC,CAAC;IAClD,CAAC;;AA7E2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAY;AAEK;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAkB;AAHlD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA+ErB"}