@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,499 @@
+import { resolveListMove, resolveRovingKey, resolveSelectedTab, syncRovingTabIndex, } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * 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;
+};
+/**
+ * A tab set: a strip of `pf-tab` children over a stack of `pf-tab-panel`
+ * children.
+ *
+ * Children rather than an `items` array (WEB-COMPONENTS-PLAN.md §2.1), because
+ * the React `TabsItem` carries a `label` and a `content` that are both
+ * `ReactNode` — neither crosses the HTML boundary, so a consumer nests instead
+ * and loops in their own template.
+ *
+ * A `pf-tab` puts itself in the `tab` slot, so the two kinds of child can be
+ * written interleaved — one `pf-tab` and one `pf-tab-panel` per item, which is
+ * what a loop over data wants — and still land in the right box.
+ *
+ * The group owns everything the children cannot see on their own: which one is
+ * selected, the single tab stop, the id wiring in both directions, and the
+ * sliding indicator. Each `pf-tab` only reports that it was chosen, as
+ * `pf-radio-button` does to its group.
+ *
+ * @slot tab - the `pf-tab` children. They assign themselves to it.
+ * @slot - the `pf-tab-panel` children.
+ * @part list - the tab strip, which is the `tablist`.
+ * @part indicator - the bar or pill that slides to the selected tab.
+ * @part panels - the box the panels are slotted into.
+ */
+export class PfTabs {
+    el;
+    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);
+        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 = 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 = resolveListMove(action, enabled.map((_, index) => index), currentIndex);
+        if (nextIndex < 0)
+            return;
+        event.preventDefault();
+        this.select(enabled[nextIndex].value, { focus: true });
+    }
+    render() {
+        return (h(Host, { key: 'fba4350cf1bc8d7c9a3373b26c4a174606d097bf' }, h("div", { key: '2ab8f90a922b2e5f0bcbc6d3fb5ed9537b4111ae', class: "list", part: "list", role: "tablist", "aria-orientation": "horizontal", ref: (el) => (this.listEl = el) }, h("span", { key: '82efc96d0d645dd1fb728124032ad838b6b466b1', class: "indicator", part: "indicator", "aria-hidden": "true", ref: (el) => (this.indicatorEl = el) }), h("slot", { key: '444830fe87ecf929115ec3f39824f3c4d3bbd297', name: "tab", onSlotchange: () => this.refresh() })), h("div", { key: 'ce4636d0e2eca6db497ea9c1547e0100c3f53454', class: "panels", part: "panels" }, h("slot", { key: '4b62a691759a5706f133fb0631f912f3d0874b7d', onSlotchange: () => this.refresh() }))));
+    }
+    static get is() { return "pf-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected tab's value.\n\nLeft exactly as the consumer set it, as the React component leaves its\nstate: a value no tab carries still *shows* the first enabled tab, but it\nis not silently rewritten here, so a consumer holding `value` sees only\nthe changes they made."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfTabsVariant",
+                    "resolved": "\"pills\" | \"underline\"",
+                    "references": {
+                        "PfTabsVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-tabs/pf-tabs.tsx",
+                            "id": "src/components/pf-tabs/pf-tabs.tsx::PfTabsVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Underline or pills. Reflected, and pushed down onto every tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'underline'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfTabsSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "PfTabsSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-tabs/pf-tabs.tsx",
+                            "id": "src/components/pf-tabs/pf-tabs.tsx::PfTabsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tab padding and type scale. Reflected, and pushed down onto every tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretch the tabs to fill the strip. Reflected, and pushed down."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the selected tab changes, however it was chosen."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    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 children.\n\nNeeded because a consumer can change a tab through its *property* \u2014\n`tab.disabled = true` \u2014 which leaves no attribute, moves no node and so\nfires neither `slotchange` nor any watcher here.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "variant",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "size",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "fullWidth",
+                "methodName": "handleStateChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pfTabSelect",
+                "method": "handleTabSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-tabs.js.map

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

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

package/dist/collection/components/pf-tag/pf-tag.css

@@ -0,0 +1,71 @@
+:host {
+  align-items: center;
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  gap: var(--space-1);
+  min-height: 26px;
+  padding: 0 var(--space-2);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+}
+
+:host([variant='neutral']) {
+  background: var(--pf-tag-neutral-bg);
+  color: var(--pf-tag-neutral-text);
+}
+
+:host([variant='brand']) {
+  background: var(--pf-tag-brand-bg);
+  color: var(--pf-tag-brand-text);
+}
+
+:host([variant='success']) {
+  background: var(--pf-tag-success-bg);
+  color: var(--pf-tag-success-text);
+}
+
+:host([variant='warning']) {
+  background: var(--pf-tag-warning-bg);
+  color: var(--pf-tag-warning-text);
+}
+
+:host([variant='danger']) {
+  background: var(--pf-tag-danger-bg);
+  color: var(--pf-tag-danger-text);
+}
+
+.dismiss {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-full);
+  color: currentColor;
+  cursor: pointer;
+  display: inline-flex;
+  height: 18px;
+  justify-content: center;
+  margin-inline-end: -2px;
+  padding: 0;
+  width: 18px;
+}
+
+.dismiss:hover {
+  background: var(--pf-tag-subtle-hover-overlay, var(--pf-subtle-hover-overlay));
+}
+
+.dismiss:focus-visible {
+  box-shadow: var(--pf-tag-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.dismiss pf-icon {
+  font-size: 12px;
+}