@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/cjs/pf-table.cjs.entry.js

@@ -0,0 +1,145 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+//#region src/table.ts
+/**
+* Normalises a cell's value to something comparable: a `Date` becomes its
+* time, a number stays one, and everything else becomes text — with nothing
+* at all becoming the empty string, so a missing cell sorts to one end rather
+* than throwing.
+*/
+/**
+* The sort state a click on `key` produces.
+*
+* A new column starts ascending — which is what a reader expects of a column
+* they have just asked about — and clicking the current column turns it round.
+*/
+function nextSortState(current, key) {
+	if (current?.key !== key) return {
+		key,
+		direction: "asc"
+	};
+	return {
+		key,
+		direction: current.direction === "asc" ? "desc" : "asc"
+	};
+}
+/** The `aria-sort` value for a column, given the table's sort state. */
+function ariaSortFor(current, key) {
+	if (current?.key !== key) return "none";
+	return current.direction === "asc" ? "ascending" : "descending";
+}
+
+const pfTableCss = () => `:host{background:var(--pf-table-bg);border:1px solid var(--pf-table-border);border-radius:var(--radius-md);display:block;overflow:auto}:host([hidden]){display:none}:host{--pf-table-cell-padding-block:14px;--pf-table-head-position:static;--pf-table-row-stripe:transparent;--pf-table-row-hover:transparent}:host([dense]){--pf-table-cell-padding-block:var(--space-3)}:host([sticky-header]){--pf-table-head-position:sticky}:host([striped]){--pf-table-row-stripe:color-mix(in srgb, var(--pf-table-bg-subtle) 55%, transparent)}:host([hoverable]){--pf-table-row-hover:color-mix(in srgb, var(--pf-table-bg-subtle) 70%, transparent)}.caption{align-items:center;border-bottom:1px solid var(--pf-table-border);color:var(--pf-table-text-muted);display:flex;font-size:var(--font-size-sm);min-height:56px;padding:var(--space-3) var(--space-4)}.caption.empty{display:none}.table{border-collapse:separate;border-spacing:0;display:table;min-width:620px;width:100%}.empty{caption-side:bottom;color:var(--pf-table-text-muted);display:table-caption;font-size:var(--font-size-sm);padding:var(--pf-table-cell-padding-block) var(--space-3);text-align:center}@media (min-width: 768px){.empty{padding-inline:var(--space-4)}}`;
+
+const PfTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfSortChange = index.createEvent(this, "pfSortChange");
+    }
+    get el() { return index.getElement(this); }
+    /** 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 (index.h(index.Host, { key: 'ee37a1921fc3c15710ec40a9844c4b2853efeecd' }, index.h("div", { key: 'ff1f94910828762a875636ff68e6dd60facaf495', class: { caption: true, empty: !this.hasCaption }, part: "caption" }, index.h("slot", { key: 'f00c8a4351194b4af24c78dbdddbb66bcbdb9b57', name: "caption", onSlotchange: () => this.refresh() })), index.h("div", { key: '28f6a3886f9452a0b36603d6d052dc1048045282', class: "table", part: "table", role: "table", "aria-label": this.label }, index.h("slot", { key: '17c9ce7882488a06f7b0a74c473cb60939883905', onSlotchange: () => this.refresh() }), this.isEmpty && (index.h("div", { key: '4171c08a6fa2ad54b18431b9ea279517385970bf', class: "empty", part: "empty", role: "row" }, index.h("span", { key: 'a0b1638b64394db3cdcd4a29fabe77fbe4b6e222', role: "cell" }, index.h("slot", { key: '9b0d26c64c13e136bc8f3a05b0bbfec8c750833d', name: "empty" }, "No data available.")))))));
+    }
+    static get watchers() { return {
+        "sortKey": [{
+                "handleSortChange": 0
+            }],
+        "sortDirection": [{
+                "handleSortChange": 0
+            }]
+    }; }
+};
+PfTable.style = pfTableCss();
+
+exports.pf_table = PfTable;
+//# sourceMappingURL=pf-table.entry.cjs.js.map
+
+//# sourceMappingURL=pf-table.cjs.entry.js.map

package/dist/cjs/pf-table.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-table.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["../core/dist/table.js","src/components/pf-table/pf-table.css?tag=pf-table&encapsulation=shadow","src/components/pf-table/pf-table.tsx"],"sourcesContent":["//#region src/table.ts\n/**\n* Normalises a cell's value to something comparable: a `Date` becomes its\n* time, a number stays one, and everything else becomes text — with nothing\n* at all becoming the empty string, so a missing cell sorts to one end rather\n* than throwing.\n*/\nfunction normalizeSortValue(value) {\n\tif (value instanceof Date) return value.getTime();\n\tif (typeof value === \"number\") return value;\n\treturn value === null || value === void 0 ? \"\" : String(value);\n}\n/**\n* Compares two cell values in `direction`.\n*\n* Two numbers compare numerically; anything else goes through\n* `localeCompare` with `numeric: true` and a base sensitivity, which is what\n* sorts \"Item 2\" before \"Item 10\" and ignores case and accents. The two rules\n* together are why this is shared: a table that collated differently from its\n* own documentation would be worse than one that did not sort at all.\n*/\nfunction compareSortValues(left, right, direction = \"asc\") {\n\tconst factor = direction === \"asc\" ? 1 : -1;\n\tconst a = normalizeSortValue(left);\n\tconst b = normalizeSortValue(right);\n\tif (typeof a === \"number\" && typeof b === \"number\") return (a - b) * factor;\n\treturn String(a).localeCompare(String(b), void 0, {\n\t\tnumeric: true,\n\t\tsensitivity: \"base\"\n\t}) * factor;\n}\n/**\n* The sort state a click on `key` produces.\n*\n* A new column starts ascending — which is what a reader expects of a column\n* they have just asked about — and clicking the current column turns it round.\n*/\nfunction nextSortState(current, key) {\n\tif (current?.key !== key) return {\n\t\tkey,\n\t\tdirection: \"asc\"\n\t};\n\treturn {\n\t\tkey,\n\t\tdirection: current.direction === \"asc\" ? \"desc\" : \"asc\"\n\t};\n}\n/** The `aria-sort` value for a column, given the table's sort state. */\nfunction ariaSortFor(current, key) {\n\tif (current?.key !== key) return \"none\";\n\treturn current.direction === \"asc\" ? \"ascending\" : \"descending\";\n}\n/**\n* Sorts rows by a column, without disturbing the array it was given.\n*\n* `getValue` is the caller's, because only it knows where a cell's value\n* lives — a row object's key in React, a cell element's text in the custom\n* element.\n*/\nfunction sortRowsBy(rows, getValue, direction) {\n\treturn [...rows].sort((left, right) => compareSortValues(getValue(left), getValue(right), direction));\n}\n//#endregion\nexport { ariaSortFor, compareSortValues, nextSortState, normalizeSortValue, sortRowsBy };\n",":host {\n  background: var(--pf-table-bg);\n  border: 1px solid var(--pf-table-border);\n  border-radius: var(--radius-md);\n  display: block;\n  overflow: auto;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The cells read these rather than being told: a custom property inherits\n * through the shadow boundary, so one declaration here reaches every cell in\n * every row without the table walking them. The pf-option bridge again.\n */\n:host {\n  --pf-table-cell-padding-block: 14px;\n  --pf-table-head-position: static;\n  --pf-table-row-stripe: transparent;\n  --pf-table-row-hover: transparent;\n}\n\n:host([dense]) {\n  --pf-table-cell-padding-block: var(--space-3);\n}\n\n:host([sticky-header]) {\n  --pf-table-head-position: sticky;\n}\n\n:host([striped]) {\n  --pf-table-row-stripe: color-mix(in srgb, var(--pf-table-bg-subtle) 55%, transparent);\n}\n\n:host([hoverable]) {\n  --pf-table-row-hover: color-mix(in srgb, var(--pf-table-bg-subtle) 70%, transparent);\n}\n\n.caption {\n  align-items: center;\n  border-bottom: 1px solid var(--pf-table-border);\n  color: var(--pf-table-text-muted);\n  display: flex;\n  font-size: var(--font-size-sm);\n  min-height: 56px;\n  padding: var(--space-3) var(--space-4);\n}\n\n/*\n * Hidden when nothing is slotted into it, from the class the component sets:\n * `:has(slot)` would always match, and two classes deep so this beats the\n * `display: flex` above whatever the order.\n */\n.caption.empty {\n  display: none;\n}\n\n.table {\n  border-collapse: separate;\n  border-spacing: 0;\n  display: table;\n  min-width: 620px;\n  width: 100%;\n}\n\n/*\n * The one box in a CSS table that spans every column. There is no `colspan`\n * outside a real <table>, and a block child of a table box is wrapped in an\n * anonymous cell in the first column instead of stretching across.\n */\n.empty {\n  caption-side: bottom;\n  color: var(--pf-table-text-muted);\n  display: table-caption;\n  font-size: var(--font-size-sm);\n  padding: var(--pf-table-cell-padding-block) var(--space-3);\n  text-align: center;\n}\n\n@media (--md) {\n  .empty {\n    padding-inline: var(--space-4);\n  }\n}\n","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"],"version":3}

package/dist/cjs/pf-tabs.cjs.entry.js

@@ -0,0 +1,342 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var navigation = require('./navigation-CZce-g58.js');
+var roving = require('./roving-BNDruU3m.js');
+require('./keys-S3YTuCcn.js');
+
+//#region src/tabs.ts
+/**
+* The tab a given value selects: the enabled tab carrying it, or the first
+* enabled tab when no such tab exists.
+*
+* That fallback covers three cases with one rule — no value asked for at all,
+* a value no tab carries, and a value belonging to a disabled tab — because a
+* tablist with nothing selected shows no panel, which reads as broken. It
+* returns `undefined` only when every tab is disabled or there are none, which
+* are the two cases where there is genuinely nothing to show.
+*/
+function resolveSelectedTab(tabs, value) {
+	return tabs.find((tab) => tab.value === value && !tab.disabled) ?? tabs.find((tab) => !tab.disabled);
+}
+
+const pfTabsCss = () => `:host{display:grid;gap:var(--space-3)}:host([hidden]){display:none}@media (min-width: 768px){:host{gap:var(--space-4)}}.list{display:flex;min-width:0;overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-width:none}.list::-webkit-scrollbar{display:none}:host([full-width]) .list{width:100%}:host([variant='underline']) .list{border-bottom:1px solid var(--pf-tabs-border);gap:var(--space-1)}:host([variant='pills']) .list{background:var(--pf-tabs-bg-subtle);border-radius:var(--radius-md);gap:var(--space-1);padding:var(--space-1)}.indicator{pointer-events:none;position:absolute;transition:left var(--pf-transition-medium),     width var(--pf-transition-medium),     top var(--pf-transition-medium),     height var(--pf-transition-medium)}.indicator[hidden]{display:none}:host([variant='underline']) .indicator{background:var(--pf-tabs-text);border-radius:var(--radius-full);bottom:0;height:var(--pf-tabs-underline-width)}:host([variant='pills']) .indicator{background:var(--pf-tabs-bg);border-radius:var(--radius-sm);box-shadow:var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));z-index:0}.panels{min-width:0}.panels>slot::slotted(pf-tab){display:none}@media (prefers-reduced-motion: reduce){.indicator{transition:none}}`;
+
+/**
+ * Distinguishes the ids this element generates. Not `useId`, which has no
+ * equivalent here, and not a shadow-scoped literal either: these ids go on
+ * *light-DOM* children, so they share the document's namespace with every
+ * other tab set on the page.
+ */
+let instances = 0;
+/**
+ * The property if the element has been upgraded, the attribute if it has not.
+ *
+ * `componentWillLoad` runs before the children's own upgrade on a page that
+ * parsed them as plain HTML, so the first sync can only read attributes; after
+ * that the property is the truth, because the generated bindings set props as
+ * properties and leave no attribute behind for an unreflected one.
+ */
+const readValue = (el) => el.value ?? el.getAttribute('value') ?? '';
+const readDisabled = (el) => el.disabled ?? el.hasAttribute('disabled');
+const ensureId = (el, fallback) => {
+    if (!el.id)
+        el.id = fallback;
+    return el.id;
+};
+const PfTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+    }
+    get el() { return index.getElement(this); }
+    uid = ++instances;
+    listEl;
+    indicatorEl;
+    observer;
+    observed = [];
+    /**
+     * The selected tab's value.
+     *
+     * Left exactly as the consumer set it, as the React component leaves its
+     * state: a value no tab carries still *shows* the first enabled tab, but it
+     * is not silently rewritten here, so a consumer holding `value` sees only
+     * the changes they made.
+     */
+    value = '';
+    /** Underline or pills. Reflected, and pushed down onto every tab. */
+    variant = 'underline';
+    /** Tab padding and type scale. Reflected, and pushed down onto every tab. */
+    size = 'md';
+    /** Stretch the tabs to fill the strip. Reflected, and pushed down. */
+    fullWidth = false;
+    /** Fires when the selected tab changes, however it was chosen. */
+    pfChange;
+    /**
+     * The light DOM is readable here, so first paint already has the right tab
+     * selected and the other panels hidden — the mock DOM never fires
+     * `slotchange`, and a real one fires it after the first render.
+     */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    /**
+     * The indicator is placed from measurements, so it can only be done once the
+     * shadow DOM and the slotted tabs have been laid out.
+     */
+    componentDidRender() {
+        this.placeIndicator();
+        this.observe();
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        this.observer = undefined;
+        this.observed = [];
+    }
+    handleStateChange() {
+        this.sync();
+        this.placeIndicator();
+    }
+    /**
+     * Re-reads the children.
+     *
+     * Needed because a consumer can change a tab through its *property* —
+     * `tab.disabled = true` — which leaves no attribute, moves no node and so
+     * fires neither `slotchange` nor any watcher here.
+     */
+    async refresh() {
+        this.sync();
+        this.placeIndicator();
+    }
+    /** Direct children only: a nested tab set owns its own tabs. */
+    get tabs() {
+        return Array.from(this.el.querySelectorAll('pf-tab')).filter((tab) => tab.parentElement === this.el);
+    }
+    get panels() {
+        return Array.from(this.el.querySelectorAll('pf-tab-panel')).filter((panel) => panel.parentElement === this.el);
+    }
+    get descriptors() {
+        return this.tabs.map((el, index) => ({
+            el,
+            index,
+            value: readValue(el),
+            disabled: readDisabled(el),
+        }));
+    }
+    /**
+     * The value actually on show: core's rule, so the React `Tabs` falls back to
+     * the same tab for a value no tab carries or one that is disabled.
+     */
+    get selectedValue() {
+        return resolveSelectedTab(this.descriptors, this.value)?.value ?? '';
+    }
+    /**
+     * Pushes the group's state down onto the children: which tab is selected,
+     * which panel is shown, the id wiring between the two, and one tab stop.
+     *
+     * The ids go on light-DOM children, which is why they can be referenced at
+     * all: tab and panel share the consumer's tree, so `aria-controls` and
+     * `aria-labelledby` resolve. The pair an overlay cannot have — a trigger
+     * outside pointing at a panel in a shadow root — is the opposite case, and
+     * is why `pf-tooltip` copies its text instead.
+     */
+    sync() {
+        const descriptors = this.descriptors;
+        const panels = this.panels;
+        const selected = this.selectedValue;
+        for (const { el, index, value, disabled } of descriptors) {
+            const tabId = ensureId(el, `pf-tabs-${this.uid}-tab-${index}`);
+            const panel = panels.find((candidate) => readValue(candidate) === value);
+            if (panel) {
+                const panelId = ensureId(panel, `pf-tabs-${this.uid}-panel-${index}`);
+                el.setAttribute('aria-controls', panelId);
+                panel.setAttribute('aria-labelledby', tabId);
+            }
+            const tab = el;
+            tab.selected = value === selected && !disabled;
+            /*
+             * Pushed down rather than selected on from above: `:host-context()` is
+             * the only selector that would let a tab see its group's variant, and it
+             * is in neither Firefox nor Safari. Same reason `pf-toolbar` writes its
+             * orientation onto its separators.
+             */
+            tab.variant = this.variant;
+            tab.size = this.size;
+            tab.fullWidth = this.fullWidth;
+        }
+        for (const panel of panels) {
+            panel.active = readValue(panel) === selected;
+        }
+        this.syncTabIndex(descriptors, selected);
+    }
+    /**
+     * One tab stop for the whole strip, on the selected tab.
+     *
+     * The ARIA tabs pattern puts it there rather than on whichever tab was
+     * focused last, so tabbing in lands on the panel being shown. The React
+     * `Tabs` instead leaves every tab tabbable, which is a gap recorded in
+     * `todo.md` — the arrows already move selection in both.
+     */
+    syncTabIndex(descriptors, selected) {
+        const enabled = descriptors.filter((descriptor) => !descriptor.disabled);
+        if (enabled.length === 0)
+            return;
+        const current = enabled.find((descriptor) => descriptor.value === selected);
+        roving.syncRovingTabIndex(enabled.map((descriptor) => descriptor.el), (current ?? enabled[0]).el);
+        for (const { el, disabled } of descriptors) {
+            if (disabled)
+                el.tabIndex = -1;
+        }
+    }
+    /**
+     * Puts the indicator under (or behind) the selected tab.
+     *
+     * Measured with rects rather than `offsetLeft`, which the React component
+     * can use and this one cannot: a slotted element's `offsetParent` is
+     * resolved in its *own* node tree, so it is the nearest positioned ancestor
+     * in the consumer's document and never the shadow box the element is
+     * actually laid out in. Measured twice. Inside a `position: relative`
+     * wrapper the selected tab reported `offsetParent: #wrapper` and
+     * `offsetLeft: 196` where its offset within the strip was 186 — the
+     * wrapper's own padding folded in. And with this placed from `offsetLeft`
+     * in a real build, the indicator painted at 64 against a tab starting at
+     * 32, which is what `scripts/smoke-consumer.mjs` now catches.
+     *
+     * Adding back `scrollLeft` is what makes the result scroll-invariant: the
+     * indicator is a child of the scrolling strip, so it has to be placed in the
+     * strip's scroll coordinates, and both rects move together when it scrolls.
+     */
+    placeIndicator() {
+        const list = this.listEl;
+        const indicator = this.indicatorEl;
+        if (!list || !indicator)
+            return;
+        const selected = this.selectedValue;
+        const tab = this.descriptors.find((descriptor) => descriptor.value === selected)?.el;
+        if (!tab) {
+            indicator.setAttribute('hidden', '');
+            return;
+        }
+        indicator.removeAttribute('hidden');
+        const listRect = list.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        indicator.style.left = `${tabRect.left - listRect.left + list.scrollLeft}px`;
+        indicator.style.width = `${tabRect.width}px`;
+        if (this.variant === 'pills') {
+            indicator.style.top = `${tabRect.top - listRect.top + list.scrollTop}px`;
+            indicator.style.height = `${tabRect.height}px`;
+        }
+        else {
+            // The underline's own box comes from the stylesheet; an inline value set
+            // by the pills variant would outrank it for good.
+            indicator.style.top = '';
+            indicator.style.height = '';
+        }
+    }
+    /**
+     * Re-measures when the strip or the selected tab changes size.
+     *
+     * `document.fonts.ready` as well, because a web font loading can change a
+     * *sibling* tab's width and so move the selected one without resizing it —
+     * which a ResizeObserver on the two of them alone would miss.
+     */
+    observe() {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const selected = this.selectedValue;
+        const tab = this.descriptors.find((descriptor) => descriptor.value === selected)?.el;
+        const next = [this.listEl, tab].filter((node) => Boolean(node));
+        const unchanged = next.length === this.observed.length && next.every((node, i) => node === this.observed[i]);
+        if (this.observer && unchanged)
+            return;
+        this.observer?.disconnect();
+        this.observer = new ResizeObserver(() => this.placeIndicator());
+        for (const node of next)
+            this.observer.observe(node);
+        this.observed = next;
+        document.fonts?.ready.then(() => this.placeIndicator());
+    }
+    select(next, { focus = false } = {}) {
+        const descriptor = this.descriptors.find((candidate) => candidate.value === next);
+        if (!descriptor || descriptor.disabled)
+            return;
+        /*
+         * Against the tab actually on show, not against `value`: with `value`
+         * unset the first enabled tab is already selected, and clicking it would
+         * otherwise report a change from '' to its value — a `pfChange` for a
+         * selection that never moved. `value` is still written, so a consumer
+         * reading it back sees what the user picked.
+         *
+         * The React `Tabs` has no such guard and calls `onValueChange` for a
+         * re-click of the selected tab; recorded in `todo.md`.
+         */
+        const changed = next !== this.selectedValue;
+        this.value = next;
+        this.sync();
+        this.placeIndicator();
+        if (focus)
+            descriptor.el.focus();
+        if (changed)
+            this.pfChange.emit({ value: next });
+    }
+    /**
+     * A tab asking to be selected — by click, or by Enter or Space on itself.
+     * The group decides, exactly as `pf-radio-group` does for its radios.
+     */
+    handleTabSelect(event) {
+        event.stopPropagation();
+        this.select(event.detail.value);
+    }
+    /**
+     * The arrows move *and* select, which the ARIA tabs pattern calls automatic
+     * activation and allows when the panels are already rendered. Home and End
+     * jump to the first and last enabled tab; a disabled tab is skipped rather
+     * than focused, because unlike a calendar's blocked day there is nothing
+     * behind it to reach.
+     */
+    handleKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const action = roving.resolveRovingKey(event.key, 'horizontal');
+        if (!action)
+            return;
+        const enabled = this.descriptors.filter((descriptor) => !descriptor.disabled);
+        if (enabled.length === 0)
+            return;
+        // `activeElement` reports the shallowest host, which is the tab itself.
+        const currentIndex = enabled.findIndex((descriptor) => descriptor.el === document.activeElement);
+        if (currentIndex === -1)
+            return;
+        const nextIndex = navigation.resolveListMove(action, enabled.map((_, index) => index), currentIndex);
+        if (nextIndex < 0)
+            return;
+        event.preventDefault();
+        this.select(enabled[nextIndex].value, { focus: true });
+    }
+    render() {
+        return (index.h(index.Host, { key: 'fba4350cf1bc8d7c9a3373b26c4a174606d097bf' }, index.h("div", { key: '2ab8f90a922b2e5f0bcbc6d3fb5ed9537b4111ae', class: "list", part: "list", role: "tablist", "aria-orientation": "horizontal", ref: (el) => (this.listEl = el) }, index.h("span", { key: '82efc96d0d645dd1fb728124032ad838b6b466b1', class: "indicator", part: "indicator", "aria-hidden": "true", ref: (el) => (this.indicatorEl = el) }), index.h("slot", { key: '444830fe87ecf929115ec3f39824f3c4d3bbd297', name: "tab", onSlotchange: () => this.refresh() })), index.h("div", { key: 'ce4636d0e2eca6db497ea9c1547e0100c3f53454', class: "panels", part: "panels" }, index.h("slot", { key: '4b62a691759a5706f133fb0631f912f3d0874b7d', onSlotchange: () => this.refresh() }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleStateChange": 0
+            }],
+        "variant": [{
+                "handleStateChange": 0
+            }],
+        "size": [{
+                "handleStateChange": 0
+            }],
+        "fullWidth": [{
+                "handleStateChange": 0
+            }]
+    }; }
+};
+PfTabs.style = pfTabsCss();
+
+exports.pf_tabs = PfTabs;
+//# sourceMappingURL=pf-tabs.entry.cjs.js.map
+
+//# sourceMappingURL=pf-tabs.cjs.entry.js.map

package/dist/cjs/pf-tabs.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-tabs.cjs.entry.js","mappings":"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","names":["syncRovingTabIndex","resolveRovingKey","resolveListMove","h","Host"],"sources":["../core/dist/tabs.js","src/components/pf-tabs/pf-tabs.css?tag=pf-tabs&encapsulation=shadow","src/components/pf-tabs/pf-tabs.tsx"],"sourcesContent":["//#region src/tabs.ts\n/**\n* The tab a given value selects: the enabled tab carrying it, or the first\n* enabled tab when no such tab exists.\n*\n* That fallback covers three cases with one rule — no value asked for at all,\n* a value no tab carries, and a value belonging to a disabled tab — because a\n* tablist with nothing selected shows no panel, which reads as broken. It\n* returns `undefined` only when every tab is disabled or there are none, which\n* are the two cases where there is genuinely nothing to show.\n*/\nfunction resolveSelectedTab(tabs, value) {\n\treturn tabs.find((tab) => tab.value === value && !tab.disabled) ?? tabs.find((tab) => !tab.disabled);\n}\n//#endregion\nexport { resolveSelectedTab };\n",":host {\n  display: grid;\n  gap: var(--space-3);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--md) {\n  :host {\n    gap: var(--space-4);\n  }\n}\n\n.list {\n  display: flex;\n  /*\n   * As a grid item the strip defaults to `min-width: auto`, which refuses to\n   * shrink below its content width -- so it would overflow the viewport\n   * instead of scrolling inside itself.\n   */\n  min-width: 0;\n  /*\n   * Horizontal scroll only. Without pinning overflow-y, `overflow-x: auto`\n   * forces it to compute to `auto` too, so a horizontal scrollbar eats\n   * vertical space and triggers a phantom vertical one.\n   */\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n  /* Hidden so it never draws over the underline; the indicator is the cue. */\n  scrollbar-width: none;\n}\n\n.list::-webkit-scrollbar {\n  display: none;\n}\n\n:host([full-width]) .list {\n  width: 100%;\n}\n\n:host([variant='underline']) .list {\n  border-bottom: 1px solid var(--pf-tabs-border);\n  gap: var(--space-1);\n}\n\n:host([variant='pills']) .list {\n  background: var(--pf-tabs-bg-subtle);\n  border-radius: var(--radius-md);\n  gap: var(--space-1);\n  padding: var(--space-1);\n}\n\n/*\n * One indicator for the whole strip, placed from measurements in\n * `placeIndicator` so it slides between tabs. `left`/`width` (and `top`/\n * `height` for a pill) are written inline; everything else is here.\n */\n.indicator {\n  pointer-events: none;\n  position: absolute;\n  transition:\n    left var(--pf-transition-medium),\n    width var(--pf-transition-medium),\n    top var(--pf-transition-medium),\n    height var(--pf-transition-medium);\n}\n\n.indicator[hidden] {\n  display: none;\n}\n\n:host([variant='underline']) .indicator {\n  background: var(--pf-tabs-text);\n  border-radius: var(--radius-full);\n  bottom: 0;\n  height: var(--pf-tabs-underline-width);\n}\n\n:host([variant='pills']) .indicator {\n  background: var(--pf-tabs-bg);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));\n  z-index: 0;\n}\n\n.panels {\n  min-width: 0;\n}\n\n/*\n * A `pf-tab` assigns itself to the `tab` slot in `connectedCallback`, but a\n * tab added later is briefly assigned to the default slot before that runs.\n * Hiding it there keeps it from flashing in the panel stack. `::slotted` after\n * the slot selector is what scopes this to the default slot's assignments --\n * the `tab` slot's own are untouched.\n */\n.panels > slot::slotted(pf-tab) {\n  display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .indicator {\n    transition: none;\n  }\n}\n","import {\n  resolveListMove,\n  resolveRovingKey,\n  resolveSelectedTab,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfTabsVariant = 'underline' | 'pills';\nexport type PfTabsSize = 'sm' | 'md';\n\n/** One `pf-tab`, read the way the group needs it. */\ninterface TabDescriptor {\n  el: HTMLElement;\n  index: number;\n  value: string;\n  disabled: boolean;\n}\n\n/**\n * Distinguishes the ids this element generates. Not `useId`, which has no\n * equivalent here, and not a shadow-scoped literal either: these ids go on\n * *light-DOM* children, so they share the document's namespace with every\n * other tab set on the page.\n */\nlet instances = 0;\n\n/**\n * The property if the element has been upgraded, the attribute if it has not.\n *\n * `componentWillLoad` runs before the children's own upgrade on a page that\n * parsed them as plain HTML, so the first sync can only read attributes; after\n * that the property is the truth, because the generated bindings set props as\n * properties and leave no attribute behind for an unreflected one.\n */\nconst readValue = (el: HTMLElement) =>\n  (el as HTMLElement & { value?: string }).value ?? el.getAttribute('value') ?? '';\n\nconst readDisabled = (el: HTMLElement) =>\n  (el as HTMLElement & { disabled?: boolean }).disabled ?? el.hasAttribute('disabled');\n\nconst ensureId = (el: HTMLElement, fallback: string) => {\n  if (!el.id) el.id = fallback;\n  return el.id;\n};\n\n/**\n * A tab set: a strip of `pf-tab` children over a stack of `pf-tab-panel`\n * children.\n *\n * Children rather than an `items` array (WEB-COMPONENTS-PLAN.md §2.1), because\n * the React `TabsItem` carries a `label` and a `content` that are both\n * `ReactNode` — neither crosses the HTML boundary, so a consumer nests instead\n * and loops in their own template.\n *\n * A `pf-tab` puts itself in the `tab` slot, so the two kinds of child can be\n * written interleaved — one `pf-tab` and one `pf-tab-panel` per item, which is\n * what a loop over data wants — and still land in the right box.\n *\n * The group owns everything the children cannot see on their own: which one is\n * selected, the single tab stop, the id wiring in both directions, and the\n * sliding indicator. Each `pf-tab` only reports that it was chosen, as\n * `pf-radio-button` does to its group.\n *\n * @slot tab - the `pf-tab` children. They assign themselves to it.\n * @slot - the `pf-tab-panel` children.\n * @part list - the tab strip, which is the `tablist`.\n * @part indicator - the bar or pill that slides to the selected tab.\n * @part panels - the box the panels are slotted into.\n */\n@Component({\n  tag: 'pf-tabs',\n  styleUrl: 'pf-tabs.css',\n  shadow: true,\n})\nexport class PfTabs {\n  @Element() el!: HTMLElement;\n\n  private uid = ++instances;\n  private listEl?: HTMLElement;\n  private indicatorEl?: HTMLElement;\n  private observer?: ResizeObserver;\n  private observed: HTMLElement[] = [];\n\n  /**\n   * The selected tab's value.\n   *\n   * Left exactly as the consumer set it, as the React component leaves its\n   * state: a value no tab carries still *shows* the first enabled tab, but it\n   * is not silently rewritten here, so a consumer holding `value` sees only\n   * the changes they made.\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /** Underline or pills. Reflected, and pushed down onto every tab. */\n  @Prop({ reflect: true }) variant: PfTabsVariant = 'underline';\n\n  /** Tab padding and type scale. Reflected, and pushed down onto every tab. */\n  @Prop({ reflect: true }) size: PfTabsSize = 'md';\n\n  /** Stretch the tabs to fill the strip. Reflected, and pushed down. */\n  @Prop({ reflect: true }) fullWidth = false;\n\n  /** Fires when the selected tab changes, however it was chosen. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The light DOM is readable here, so first paint already has the right tab\n   * selected and the other panels hidden — the mock DOM never fires\n   * `slotchange`, and a real one fires it after the first render.\n   */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * The indicator is placed from measurements, so it can only be done once the\n   * shadow DOM and the slotted tabs have been laid out.\n   */\n  componentDidRender() {\n    this.placeIndicator();\n    this.observe();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.observer = undefined;\n    this.observed = [];\n  }\n\n  @Watch('value')\n  @Watch('variant')\n  @Watch('size')\n  @Watch('fullWidth')\n  handleStateChange() {\n    this.sync();\n    this.placeIndicator();\n  }\n\n  /**\n   * Re-reads the children.\n   *\n   * Needed because a consumer can change a tab through its *property* —\n   * `tab.disabled = true` — which leaves no attribute, moves no node and so\n   * fires neither `slotchange` nor any watcher here.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n    this.placeIndicator();\n  }\n\n  /** Direct children only: a nested tab set owns its own tabs. */\n  private get tabs(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-tab')).filter(\n      (tab) => tab.parentElement === this.el,\n    );\n  }\n\n  private get panels(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-tab-panel')).filter(\n      (panel) => panel.parentElement === this.el,\n    );\n  }\n\n  private get descriptors(): TabDescriptor[] {\n    return this.tabs.map((el, index) => ({\n      el,\n      index,\n      value: readValue(el),\n      disabled: readDisabled(el),\n    }));\n  }\n\n  /**\n   * The value actually on show: core's rule, so the React `Tabs` falls back to\n   * the same tab for a value no tab carries or one that is disabled.\n   */\n  private get selectedValue(): string {\n    return resolveSelectedTab(this.descriptors, this.value)?.value ?? '';\n  }\n\n  /**\n   * Pushes the group's state down onto the children: which tab is selected,\n   * which panel is shown, the id wiring between the two, and one tab stop.\n   *\n   * The ids go on light-DOM children, which is why they can be referenced at\n   * all: tab and panel share the consumer's tree, so `aria-controls` and\n   * `aria-labelledby` resolve. The pair an overlay cannot have — a trigger\n   * outside pointing at a panel in a shadow root — is the opposite case, and\n   * is why `pf-tooltip` copies its text instead.\n   */\n  private sync() {\n    const descriptors = this.descriptors;\n    const panels = this.panels;\n    const selected = this.selectedValue;\n\n    for (const { el, index, value, disabled } of descriptors) {\n      const tabId = ensureId(el, `pf-tabs-${this.uid}-tab-${index}`);\n      const panel = panels.find((candidate) => readValue(candidate) === value);\n      if (panel) {\n        const panelId = ensureId(panel, `pf-tabs-${this.uid}-panel-${index}`);\n        el.setAttribute('aria-controls', panelId);\n        panel.setAttribute('aria-labelledby', tabId);\n      }\n\n      const tab = el as HTMLElement & {\n        selected: boolean;\n        variant: PfTabsVariant;\n        size: PfTabsSize;\n        fullWidth: boolean;\n      };\n      tab.selected = value === selected && !disabled;\n      /*\n       * Pushed down rather than selected on from above: `:host-context()` is\n       * the only selector that would let a tab see its group's variant, and it\n       * is in neither Firefox nor Safari. Same reason `pf-toolbar` writes its\n       * orientation onto its separators.\n       */\n      tab.variant = this.variant;\n      tab.size = this.size;\n      tab.fullWidth = this.fullWidth;\n    }\n\n    for (const panel of panels) {\n      (panel as HTMLElement & { active: boolean }).active = readValue(panel) === selected;\n    }\n\n    this.syncTabIndex(descriptors, selected);\n  }\n\n  /**\n   * One tab stop for the whole strip, on the selected tab.\n   *\n   * The ARIA tabs pattern puts it there rather than on whichever tab was\n   * focused last, so tabbing in lands on the panel being shown. The React\n   * `Tabs` instead leaves every tab tabbable, which is a gap recorded in\n   * `todo.md` — the arrows already move selection in both.\n   */\n  private syncTabIndex(descriptors: TabDescriptor[], selected: string) {\n    const enabled = descriptors.filter((descriptor) => !descriptor.disabled);\n    if (enabled.length === 0) return;\n\n    const current = enabled.find((descriptor) => descriptor.value === selected);\n    syncRovingTabIndex(\n      enabled.map((descriptor) => descriptor.el),\n      (current ?? enabled[0]).el,\n    );\n    for (const { el, disabled } of descriptors) {\n      if (disabled) el.tabIndex = -1;\n    }\n  }\n\n  /**\n   * Puts the indicator under (or behind) the selected tab.\n   *\n   * Measured with rects rather than `offsetLeft`, which the React component\n   * can use and this one cannot: a slotted element's `offsetParent` is\n   * resolved in its *own* node tree, so it is the nearest positioned ancestor\n   * in the consumer's document and never the shadow box the element is\n   * actually laid out in. Measured twice. Inside a `position: relative`\n   * wrapper the selected tab reported `offsetParent: #wrapper` and\n   * `offsetLeft: 196` where its offset within the strip was 186 — the\n   * wrapper's own padding folded in. And with this placed from `offsetLeft`\n   * in a real build, the indicator painted at 64 against a tab starting at\n   * 32, which is what `scripts/smoke-consumer.mjs` now catches.\n   *\n   * Adding back `scrollLeft` is what makes the result scroll-invariant: the\n   * indicator is a child of the scrolling strip, so it has to be placed in the\n   * strip's scroll coordinates, and both rects move together when it scrolls.\n   */\n  private placeIndicator() {\n    const list = this.listEl;\n    const indicator = this.indicatorEl;\n    if (!list || !indicator) return;\n\n    const selected = this.selectedValue;\n    const tab = this.descriptors.find((descriptor) => descriptor.value === selected)?.el;\n    if (!tab) {\n      indicator.setAttribute('hidden', '');\n      return;\n    }\n    indicator.removeAttribute('hidden');\n\n    const listRect = list.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    indicator.style.left = `${tabRect.left - listRect.left + list.scrollLeft}px`;\n    indicator.style.width = `${tabRect.width}px`;\n\n    if (this.variant === 'pills') {\n      indicator.style.top = `${tabRect.top - listRect.top + list.scrollTop}px`;\n      indicator.style.height = `${tabRect.height}px`;\n    } else {\n      // The underline's own box comes from the stylesheet; an inline value set\n      // by the pills variant would outrank it for good.\n      indicator.style.top = '';\n      indicator.style.height = '';\n    }\n  }\n\n  /**\n   * Re-measures when the strip or the selected tab changes size.\n   *\n   * `document.fonts.ready` as well, because a web font loading can change a\n   * *sibling* tab's width and so move the selected one without resizing it —\n   * which a ResizeObserver on the two of them alone would miss.\n   */\n  private observe() {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const selected = this.selectedValue;\n    const tab = this.descriptors.find((descriptor) => descriptor.value === selected)?.el;\n    const next = [this.listEl, tab].filter((node): node is HTMLElement => Boolean(node));\n    const unchanged =\n      next.length === this.observed.length && next.every((node, i) => node === this.observed[i]);\n    if (this.observer && unchanged) return;\n\n    this.observer?.disconnect();\n    this.observer = new ResizeObserver(() => this.placeIndicator());\n    for (const node of next) this.observer.observe(node);\n    this.observed = next;\n\n    document.fonts?.ready.then(() => this.placeIndicator());\n  }\n\n  private select(next: string, { focus = false } = {}) {\n    const descriptor = this.descriptors.find((candidate) => candidate.value === next);\n    if (!descriptor || descriptor.disabled) return;\n\n    /*\n     * Against the tab actually on show, not against `value`: with `value`\n     * unset the first enabled tab is already selected, and clicking it would\n     * otherwise report a change from '' to its value — a `pfChange` for a\n     * selection that never moved. `value` is still written, so a consumer\n     * reading it back sees what the user picked.\n     *\n     * The React `Tabs` has no such guard and calls `onValueChange` for a\n     * re-click of the selected tab; recorded in `todo.md`.\n     */\n    const changed = next !== this.selectedValue;\n    this.value = next;\n    this.sync();\n    this.placeIndicator();\n    if (focus) descriptor.el.focus();\n    if (changed) this.pfChange.emit({ value: next });\n  }\n\n  /**\n   * A tab asking to be selected — by click, or by Enter or Space on itself.\n   * The group decides, exactly as `pf-radio-group` does for its radios.\n   */\n  @Listen('pfTabSelect')\n  handleTabSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.select(event.detail.value);\n  }\n\n  /**\n   * The arrows move *and* select, which the ARIA tabs pattern calls automatic\n   * activation and allows when the panels are already rendered. Home and End\n   * jump to the first and last enabled tab; a disabled tab is skipped rather\n   * than focused, because unlike a calendar's blocked day there is nothing\n   * behind it to reach.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const action = resolveRovingKey(event.key, 'horizontal');\n    if (!action) return;\n\n    const enabled = this.descriptors.filter((descriptor) => !descriptor.disabled);\n    if (enabled.length === 0) return;\n\n    // `activeElement` reports the shallowest host, which is the tab itself.\n    const currentIndex = enabled.findIndex(\n      (descriptor) => descriptor.el === (document.activeElement as HTMLElement),\n    );\n    if (currentIndex === -1) return;\n\n    const nextIndex = resolveListMove(\n      action,\n      enabled.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex < 0) return;\n\n    event.preventDefault();\n    this.select(enabled[nextIndex].value, { focus: true });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"list\"\n          part=\"list\"\n          role=\"tablist\"\n          aria-orientation=\"horizontal\"\n          ref={(el) => (this.listEl = el)}\n        >\n          <span\n            class=\"indicator\"\n            part=\"indicator\"\n            aria-hidden=\"true\"\n            ref={(el) => (this.indicatorEl = el)}\n          />\n          <slot name=\"tab\" onSlotchange={() => this.refresh()} />\n        </div>\n        <div class=\"panels\" part=\"panels\">\n          <slot onSlotchange={() => this.refresh()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}