@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-table/pf-table.js

@@ -0,0 +1,353 @@
+import { ariaSortFor, nextSortState } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * A table over `pf-table-row` and `pf-table-cell` children.
+ *
+ * **It reports a sort rather than performing one.** The rows are the
+ * consumer's — they wrote the loop — and reordering them would mean moving
+ * elements in their DOM, which their framework would undo on its next render
+ * and which would break its reconciliation on the way. So this element owns
+ * the header buttons, `aria-sort` and the indicator, and emits `pfSortChange`
+ * for the consumer to sort their own data with. `compareSortValues` and
+ * `sortRowsBy` are in core precisely so that the order they produce matches
+ * the React `Table`, which does sort for itself.
+ *
+ * The layout is CSS tables rather than a grid, which is what lets a row be a
+ * box: a grid needs its rows to be `display: contents` for the cells to line
+ * up in columns, and an element with no box takes no `:hover` and no
+ * background — so striping and row hover would both have to be pushed down in
+ * JS. `display: table-row` gives them for nothing, and column widths size
+ * themselves.
+ *
+ * @slot caption - a heading above the table.
+ * @slot - the `pf-table-row` children.
+ * @slot empty - what to show when there are no body rows.
+ * @part caption - the caption's box.
+ * @part table - the table itself.
+ * @part empty - the box holding the empty slot.
+ */
+export class PfTable {
+    el;
+    /** Tighter rows. Reflected, and bridged down to the cells' padding. */
+    dense = false;
+    /** Shade every other body row. Reflected, and bridged down. */
+    striped = false;
+    /** Shade the row under the pointer. Reflected, and bridged down. */
+    hoverable = true;
+    /** Keep the header visible while the body scrolls. Reflected and bridged. */
+    stickyHeader = false;
+    /** The column being sorted on, by its `sort-key`. */
+    sortKey;
+    /** Which way that column is sorted. */
+    sortDirection = 'asc';
+    /** The table's accessible name, for a table whose caption is not enough. */
+    label;
+    /**
+     * Fires when a header is clicked, with the sort the table has moved to.
+     * Sorting the rows is the consumer's to do.
+     */
+    pfSortChange;
+    /** Whether there are any body rows, which decides the empty state. */
+    isEmpty = false;
+    /**
+     * Whether anything is slotted into the caption, which decides whether its
+     * box is drawn. Asked in JS because a box around a slot cannot be collapsed
+     * from CSS: `:has(slot)` always matches, since the slot is itself a child.
+     */
+    hasCaption = false;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    handleSortChange() {
+        this.sync();
+    }
+    /** Re-reads the rows, for a consumer who changed one through a property. */
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only: a nested table owns its own rows. */
+    get rows() {
+        return Array.from(this.el.querySelectorAll('pf-table-row')).filter((row) => row.parentElement === this.el);
+    }
+    isHead(row) {
+        return row.head ?? row.hasAttribute('head');
+    }
+    sync() {
+        const rows = this.rows;
+        const bodyRows = rows.filter((row) => !this.isHead(row));
+        this.isEmpty = bodyRows.length === 0;
+        this.hasCaption = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'caption');
+        /*
+         * Striping and the last row are the table's to work out: a row cannot
+         * count its siblings without assuming where the header is, and the last
+         * body row is the one whose cells drop their bottom border so the rule
+         * does not double up with the table's own.
+         */
+        for (const [index, row] of bodyRows.entries()) {
+            const node = row;
+            node.odd = index % 2 === 1;
+            node.last = index === bodyRows.length - 1;
+        }
+        const current = this.sortKey === undefined ? undefined : { key: this.sortKey, direction: this.sortDirection };
+        for (const row of rows.filter((candidate) => this.isHead(candidate))) {
+            for (const cell of Array.from(row.querySelectorAll('pf-table-cell'))) {
+                const node = cell;
+                const key = cell.sortKey;
+                node.sort = key ? ariaSortFor(current, key) : 'none';
+            }
+        }
+    }
+    /**
+     * A header asking to sort. The table decides which way — core's rule: a new
+     * column starts ascending and the current one turns round — and reports it.
+     */
+    handleSort(event) {
+        event.stopPropagation();
+        const current = this.sortKey === undefined ? undefined : { key: this.sortKey, direction: this.sortDirection };
+        const next = nextSortState(current, event.detail.key);
+        this.sortKey = next.key;
+        this.sortDirection = next.direction;
+        this.sync();
+        this.pfSortChange.emit(next);
+    }
+    render() {
+        return (h(Host, { key: 'ee37a1921fc3c15710ec40a9844c4b2853efeecd' }, h("div", { key: 'ff1f94910828762a875636ff68e6dd60facaf495', class: { caption: true, empty: !this.hasCaption }, part: "caption" }, h("slot", { key: 'f00c8a4351194b4af24c78dbdddbb66bcbdb9b57', name: "caption", onSlotchange: () => this.refresh() })), h("div", { key: '28f6a3886f9452a0b36603d6d052dc1048045282', class: "table", part: "table", role: "table", "aria-label": this.label }, h("slot", { key: '17c9ce7882488a06f7b0a74c473cb60939883905', onSlotchange: () => this.refresh() }), this.isEmpty && (h("div", { key: '4171c08a6fa2ad54b18431b9ea279517385970bf', class: "empty", part: "empty", role: "row" }, h("span", { key: 'a0b1638b64394db3cdcd4a29fabe77fbe4b6e222', role: "cell" }, h("slot", { key: '9b0d26c64c13e136bc8f3a05b0bbfec8c750833d', name: "empty" }, "No data available.")))))));
+    }
+    static get is() { return "pf-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dense": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tighter rows. Reflected, and bridged down to the cells' padding."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dense",
+                "defaultValue": "false"
+            },
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shade every other body row. Reflected, and bridged down."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "striped",
+                "defaultValue": "false"
+            },
+            "hoverable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shade the row under the pointer. Reflected, and bridged down."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hoverable",
+                "defaultValue": "true"
+            },
+            "stickyHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keep the header visible while the body scrolls. Reflected and bridged."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sticky-header",
+                "defaultValue": "false"
+            },
+            "sortKey": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The column being sorted on, by its `sort-key`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sort-key"
+            },
+            "sortDirection": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SortDirection",
+                    "resolved": "\"asc\" | \"desc\"",
+                    "references": {
+                        "SortDirection": {
+                            "location": "import",
+                            "path": "@pitchfork-ui/core",
+                            "id": "../core/dist/index.d.ts::SortDirection",
+                            "referenceLocation": "SortDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which way that column is sorted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sort-direction",
+                "defaultValue": "'asc'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The table's accessible name, for a table whose caption is not enough."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isEmpty": {},
+            "hasCaption": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfSortChange",
+                "name": "pfSortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a header is clicked, with the sort the table has moved to.\nSorting the rows is the consumer's to do."
+                },
+                "complexType": {
+                    "original": "SortState",
+                    "resolved": "SortState",
+                    "references": {
+                        "SortState": {
+                            "location": "import",
+                            "path": "@pitchfork-ui/core",
+                            "id": "../core/dist/index.d.ts::SortState",
+                            "referenceLocation": "SortState"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Re-reads the rows, for a consumer who changed one through a property.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "sortKey",
+                "methodName": "handleSortChange"
+            }, {
+                "propName": "sortDirection",
+                "methodName": "handleSortChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pfTableSort",
+                "method": "handleSort",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-table.js.map

package/dist/collection/components/pf-table/pf-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-table.js","sourceRoot":"","sources":["../../../src/components/pf-table/pf-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ariaSortFor, nextSortState, type SortDirection, type SortState } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A table over `pf-table-row` and `pf-table-cell` children.\n *\n * **It reports a sort rather than performing one.** The rows are the\n * consumer's — they wrote the loop — and reordering them would mean moving\n * elements in their DOM, which their framework would undo on its next render\n * and which would break its reconciliation on the way. So this element owns\n * the header buttons, `aria-sort` and the indicator, and emits `pfSortChange`\n * for the consumer to sort their own data with. `compareSortValues` and\n * `sortRowsBy` are in core precisely so that the order they produce matches\n * the React `Table`, which does sort for itself.\n *\n * The layout is CSS tables rather than a grid, which is what lets a row be a\n * box: a grid needs its rows to be `display: contents` for the cells to line\n * up in columns, and an element with no box takes no `:hover` and no\n * background — so striping and row hover would both have to be pushed down in\n * JS. `display: table-row` gives them for nothing, and column widths size\n * themselves.\n *\n * @slot caption - a heading above the table.\n * @slot - the `pf-table-row` children.\n * @slot empty - what to show when there are no body rows.\n * @part caption - the caption's box.\n * @part table - the table itself.\n * @part empty - the box holding the empty slot.\n */\n@Component({\n  tag: 'pf-table',\n  styleUrl: 'pf-table.css',\n  shadow: true,\n})\nexport class PfTable {\n  @Element() el!: HTMLElement;\n\n  /** Tighter rows. Reflected, and bridged down to the cells' padding. */\n  @Prop({ reflect: true }) dense = false;\n\n  /** Shade every other body row. Reflected, and bridged down. */\n  @Prop({ reflect: true }) striped = false;\n\n  /** Shade the row under the pointer. Reflected, and bridged down. */\n  @Prop({ reflect: true }) hoverable = true;\n\n  /** Keep the header visible while the body scrolls. Reflected and bridged. */\n  @Prop({ reflect: true }) stickyHeader = false;\n\n  /** The column being sorted on, by its `sort-key`. */\n  @Prop({ mutable: true, reflect: true }) sortKey?: string;\n\n  /** Which way that column is sorted. */\n  @Prop({ mutable: true, reflect: true }) sortDirection: SortDirection = 'asc';\n\n  /** The table's accessible name, for a table whose caption is not enough. */\n  @Prop() label?: string;\n\n  /**\n   * Fires when a header is clicked, with the sort the table has moved to.\n   * Sorting the rows is the consumer's to do.\n   */\n  @Event() pfSortChange!: EventEmitter<SortState>;\n\n  /** Whether there are any body rows, which decides the empty state. */\n  @State() isEmpty = false;\n\n  /**\n   * Whether anything is slotted into the caption, which decides whether its\n   * box is drawn. Asked in JS because a box around a slot cannot be collapsed\n   * from CSS: `:has(slot)` always matches, since the slot is itself a child.\n   */\n  @State() hasCaption = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('sortKey')\n  @Watch('sortDirection')\n  handleSortChange() {\n    this.sync();\n  }\n\n  /** Re-reads the rows, for a consumer who changed one through a property. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested table owns its own rows. */\n  private get rows(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-table-row')).filter(\n      (row) => row.parentElement === this.el,\n    );\n  }\n\n  private isHead(row: HTMLElement) {\n    return (row as HTMLElement & { head?: boolean }).head ?? row.hasAttribute('head');\n  }\n\n  private sync() {\n    const rows = this.rows;\n    const bodyRows = rows.filter((row) => !this.isHead(row));\n    this.isEmpty = bodyRows.length === 0;\n\n    this.hasCaption = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'caption',\n    );\n\n    /*\n     * Striping and the last row are the table's to work out: a row cannot\n     * count its siblings without assuming where the header is, and the last\n     * body row is the one whose cells drop their bottom border so the rule\n     * does not double up with the table's own.\n     */\n    for (const [index, row] of bodyRows.entries()) {\n      const node = row as HTMLElement & { odd: boolean; last: boolean };\n      node.odd = index % 2 === 1;\n      node.last = index === bodyRows.length - 1;\n    }\n\n    const current: SortState | undefined =\n      this.sortKey === undefined ? undefined : { key: this.sortKey, direction: this.sortDirection };\n\n    for (const row of rows.filter((candidate) => this.isHead(candidate))) {\n      for (const cell of Array.from(row.querySelectorAll<HTMLElement>('pf-table-cell'))) {\n        const node = cell as HTMLElement & { sort: 'ascending' | 'descending' | 'none' };\n        const key = (cell as HTMLElement & { sortKey?: string }).sortKey;\n        node.sort = key ? ariaSortFor(current, key) : 'none';\n      }\n    }\n  }\n\n  /**\n   * A header asking to sort. The table decides which way — core's rule: a new\n   * column starts ascending and the current one turns round — and reports it.\n   */\n  @Listen('pfTableSort')\n  handleSort(event: CustomEvent<{ key: string }>) {\n    event.stopPropagation();\n\n    const current: SortState | undefined =\n      this.sortKey === undefined ? undefined : { key: this.sortKey, direction: this.sortDirection };\n    const next = nextSortState(current, event.detail.key);\n\n    this.sortKey = next.key;\n    this.sortDirection = next.direction;\n    this.sync();\n    this.pfSortChange.emit(next);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ caption: true, empty: !this.hasCaption }} part=\"caption\">\n          <slot name=\"caption\" onSlotchange={() => this.refresh()} />\n        </div>\n        <div class=\"table\" part=\"table\" role=\"table\" aria-label={this.label}>\n          <slot onSlotchange={() => this.refresh()} />\n          {/*\n            `display: table-caption` with `caption-side: bottom`, which is the\n            one box in a CSS table that spans every column — there is no\n            `colspan` outside a real <table>. It stays inside the role=\"table\"\n            element, so a screen reader still finds it in the table.\n          */}\n          {this.isEmpty && (\n            <div class=\"empty\" part=\"empty\" role=\"row\">\n              <span role=\"cell\">\n                <slot name=\"empty\">No data available.</slot>\n              </span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-table-cell/pf-table-cell.css

@@ -0,0 +1,77 @@
+:host {
+  border-bottom: 1px solid var(--pf-table-border);
+  color: var(--pf-table-text);
+  display: table-cell;
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  padding: var(--pf-table-cell-padding-block, 14px) var(--space-3);
+  vertical-align: middle;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  :host {
+    padding-inline: var(--space-4);
+  }
+}
+
+:host([head]) {
+  background: var(--pf-table-bg-subtle);
+  color: var(--pf-table-text-muted);
+  font-weight: var(--font-weight-semibold);
+  /*
+   * Read from the table rather than told: `sticky` only when the table asked
+   * for a sticky header, `static` otherwise.
+   */
+  position: var(--pf-table-head-position, static);
+  top: 0;
+  z-index: 1;
+}
+
+/* The table's own border is the rule under the last row. */
+:host([last]) {
+  border-bottom: 0;
+}
+
+:host([align='left']) {
+  text-align: start;
+}
+
+:host([align='center']) {
+  text-align: center;
+}
+
+:host([align='right']) {
+  text-align: end;
+}
+
+.sort {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  gap: var(--space-2);
+  /* Follows the cell's own alignment rather than fighting it. */
+  justify-content: inherit;
+  padding: 0;
+  width: 100%;
+}
+
+.sort:hover,
+.sort:focus-visible {
+  color: var(--pf-table-text);
+  outline: none;
+}
+
+.indicator {
+  display: inline-flex;
+  font-size: var(--font-size-2xs);
+  line-height: 1;
+  opacity: 0.7;
+}

package/dist/collection/components/pf-table-cell/pf-table-cell.js

@@ -0,0 +1,226 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One cell of a `pf-table` row.
+ *
+ * A header cell carries `columnheader` rather than `cell`, which the row tells
+ * it; `sortable` turns the label into a button that asks the table to sort.
+ * The table answers by writing `sort` back, which is what `aria-sort` and the
+ * indicator read — the ask and the answer kept apart, as everywhere else here.
+ *
+ * @slot - the cell's content.
+ * @part sort - the header's sort button, when `sortable` is set.
+ * @part indicator - the sort indicator inside that button.
+ */
+export class PfTableCell {
+    /** Set by the row: a header cell. Reflected, so the stylesheet reads it. */
+    head = false;
+    /** Set by the row: a cell in the last body row, which drops its rule. */
+    last = false;
+    /** Which way the content sits. Reflected for the stylesheet. */
+    align = 'left';
+    /** A column width, as any CSS length. Only a header cell's is read. */
+    width;
+    /**
+     * Identifies the column in the table's sort state. A header cell with one
+     * and `sortable` set is the only thing that can be sorted on.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-table-cell[sort-key="..."]` finds
+     * nothing. The table reads the property.
+     */
+    sortKey;
+    /** Offer to sort on this column. Reflected for the stylesheet. */
+    sortable = false;
+    /** Set by the table: how this column is sorted, if it is. */
+    sort = 'none';
+    /** Asks the table to sort on this column. The table decides which way. */
+    pfTableSort;
+    onSort = () => {
+        if (!this.sortKey)
+            return;
+        this.pfTableSort.emit({ key: this.sortKey });
+    };
+    render() {
+        const sortable = this.head && this.sortable && Boolean(this.sortKey);
+        return (h(Host, { key: '419a9736fa82721764ea58179c56000a4eed5c25', role: this.head ? 'columnheader' : 'cell', "aria-sort": sortable ? this.sort : null, style: this.width ? { width: this.width } : undefined }, sortable ? (h("button", { type: "button", class: "sort", part: "sort", onClick: this.onSort }, h("span", { class: "label" }, h("slot", null)), h("span", { class: "indicator", part: "indicator", "aria-hidden": "true" }, this.sort === 'ascending' ? '^' : this.sort === 'descending' ? 'v' : '-'))) : (h("slot", null))));
+    }
+    static get is() { return "pf-table-cell"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-table-cell.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-table-cell.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "head": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the row: a header cell. Reflected, so the stylesheet reads it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "head",
+                "defaultValue": "false"
+            },
+            "last": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the row: a cell in the last body row, which drops its rule."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "last",
+                "defaultValue": "false"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfTableCellAlign",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {
+                        "PfTableCellAlign": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-table-cell/pf-table-cell.tsx",
+                            "id": "src/components/pf-table-cell/pf-table-cell.tsx::PfTableCellAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which way the content sits. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align",
+                "defaultValue": "'left'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A column width, as any CSS length. Only a header cell's is read."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "sortKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies the column in the table's sort state. A header cell with one\nand `sortable` set is the only thing that can be sorted on.\n\nReflected because the generated bindings set props as properties, so\nwithout it a consumer selecting `pf-table-cell[sort-key=\"...\"]` finds\nnothing. The table reads the property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sort-key"
+            },
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offer to sort on this column. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sortable",
+                "defaultValue": "false"
+            },
+            "sort": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'ascending' | 'descending' | 'none'",
+                    "resolved": "\"ascending\" | \"descending\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the table: how this column is sorted, if it is."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sort",
+                "defaultValue": "'none'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfTableSort",
+                "name": "pfTableSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Asks the table to sort on this column. The table decides which way."
+                },
+                "complexType": {
+                    "original": "{ key: string }",
+                    "resolved": "{ key: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pf-table-cell.js.map