@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["../../../src/components/pf-tooltip/pf-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Keys, observeSidePosition, type Side } from '@pitchfork-ui/core';\n\nimport { placePopover } from '../../place-popover';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\n/**\n * A tooltip anchored to whatever is slotted into it.\n *\n * The panel is a `popover`, which is how it escapes an ancestor's `overflow`\n * and stacking context — the thing `createPortal` does for the React\n * component, and the only equivalent available from inside a shadow root.\n * Verified: a popover opened from a shadow root inside an `overflow: hidden`\n * container beats a `z-index: 999` sibling, where a plain absolute element in\n * the same place loses.\n *\n * @slot - the trigger.\n * @slot content - the tooltip's content. Its text also becomes the trigger's\n * accessible description.\n * @part tooltip - the floating panel.\n */\n@Component({\n  tag: 'pf-tooltip',\n  styleUrl: 'pf-tooltip.css',\n  shadow: true,\n})\nexport class PfTooltip {\n  @Element() el!: HTMLElement;\n\n  /** Preferred side. Reflected so the stylesheet can place the arrow. */\n  @Prop({ reflect: true }) placement: Side = 'top';\n\n  /** Milliseconds to wait before showing on hover or focus. */\n  @Prop() delay = 120;\n\n  /** Force the tooltip open or closed, rather than letting it react. */\n  @Prop() open?: boolean;\n\n  /** Never show. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The side actually in use, which the arrow follows. */\n  @State() resolvedSide: Side = 'top';\n\n  private showTimer?: number;\n  private stopObserving?: () => void;\n  private contentObserver?: MutationObserver;\n\n  componentDidLoad() {\n    this.watchContent();\n    this.syncDescription();\n    if (this.open) this.show();\n  }\n\n  disconnectedCallback() {\n    this.clearTimer();\n    this.stopObserving?.();\n    this.contentObserver?.disconnect();\n  }\n\n  /**\n   * `slotchange` fires when the *assignment* changes, not when text inside an\n   * already-assigned node is edited — so a consumer setting\n   * `span.textContent = 'Changed'` would update the visible tooltip and leave\n   * the trigger's accessible description stale. That is a silent\n   * accessibility bug rather than a cosmetic one, which is what earns the\n   * observer.\n   */\n  private watchContent() {\n    this.contentObserver?.disconnect();\n    this.contentObserver = new MutationObserver(() => this.syncDescription());\n    this.contentObserver.observe(this.el, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  /**\n   * The trigger's accessible description, copied as text.\n   *\n   * It cannot be an IDREF: `aria-describedby` does not cross a shadow\n   * boundary, and `ariaDescribedByElements` silently reads back empty when\n   * handed an element from a root the trigger does not own — both measured.\n   * `aria-description` is a plain string, so it crosses nothing, and the\n   * accessibility tree reports it identically to a same-root IDREF.\n   */\n  private syncDescription() {\n    const trigger = this.el.firstElementChild;\n    if (!trigger) return;\n\n    const slot = this.el.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"content\"]');\n    const text = slot\n      ?.assignedNodes({ flatten: true })\n      .map((node) => node.textContent ?? '')\n      .join(' ')\n      .trim();\n\n    if (text) trigger.setAttribute('aria-description', text);\n    else trigger.removeAttribute('aria-description');\n  }\n\n  @Watch('open')\n  syncOpen(next?: boolean) {\n    if (next) this.show();\n    else if (next === false) this.hide();\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"tooltip\"]') ?? null;\n  }\n\n  private clearTimer() {\n    if (this.showTimer !== undefined) {\n      window.clearTimeout(this.showTimer);\n      this.showTimer = undefined;\n    }\n  }\n\n  private show() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    /*\n     * Positioning waits until the panel is open, because the side is chosen by\n     * how the panel's own size fits the viewport and a closed popover has no\n     * size at all.\n     */\n    this.stopObserving?.();\n    this.stopObserving = observeSidePosition({\n      getAnchor: () => this.el.firstElementChild as HTMLElement | null,\n      getFloating: () => panel,\n      side: this.placement,\n      onChange: ({ side, left, top }) => {\n        this.resolvedSide = side;\n        placePopover(panel, left, top);\n      },\n    });\n  }\n\n  private hide() {\n    this.clearTimer();\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  /** Controlled mode means the consumer decides; hover and focus do nothing. */\n  private get isControlled() {\n    return this.open !== undefined;\n  }\n\n  private scheduleShow = () => {\n    if (this.disabled || this.isControlled) return;\n    this.clearTimer();\n    this.showTimer = window.setTimeout(() => this.show(), this.delay);\n  };\n\n  private cancel = () => {\n    if (this.isControlled) return;\n    this.hide();\n  };\n\n  @Listen('pointerenter')\n  handlePointerEnter() {\n    this.scheduleShow();\n  }\n\n  @Listen('pointerleave')\n  handlePointerLeave() {\n    this.cancel();\n  }\n\n  /** `focusin`/`focusout` rather than `focus`/`blur`, so they bubble. */\n  @Listen('focusin')\n  handleFocusIn() {\n    this.scheduleShow();\n  }\n\n  @Listen('focusout')\n  handleFocusOut() {\n    this.cancel();\n  }\n\n  /**\n   * Escape dismisses even in controlled mode. A tooltip covering the content\n   * you are trying to read is not something to need a prop for, and WAI-ARIA\n   * requires it of any tooltip.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== Keys.Escape) return;\n    const panel = this.panel;\n    if (!panel?.matches(':popover-open')) return;\n    event.stopPropagation();\n    this.hide();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot onSlotchange={() => this.syncDescription()} />\n        <div\n          class=\"tooltip\"\n          part=\"tooltip\"\n          popover=\"manual\"\n          role=\"tooltip\"\n          data-side={this.resolvedSide}\n        >\n          <slot name=\"content\" onSlotchange={() => this.syncDescription()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-tree-item/pf-tree-item.css

@@ -0,0 +1,115 @@
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/*
+ * The indent comes from the nesting rather than from a level pushed into a
+ * custom property: the items are nested in the DOM, so one rule here indents
+ * every depth, and there is no number to keep in step with the markup.
+ */
+.children {
+  padding-inline-start: var(--space-4);
+}
+
+.children[hidden] {
+  display: none;
+}
+
+.row {
+  align-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--pf-treeview-text-muted);
+  cursor: pointer;
+  display: grid;
+  gap: var(--space-2);
+  grid-template-columns: 24px auto 1fr auto;
+  min-height: 34px;
+  min-width: 0;
+  padding-inline-end: var(--space-2);
+}
+
+/* No icon slotted in, no column for one: the grid closes up. */
+:host(:not([icon])) .row {
+  grid-template-columns: 24px 1fr auto;
+}
+
+.row:hover {
+  background: var(--pf-treeview-bg-subtle);
+  color: var(--pf-treeview-text);
+}
+
+/*
+ * The ring marks the item the keyboard is on, and the tree decides whether to
+ * draw one at all: it is the thing with the focus, and it turns the ring on
+ * through `--pf-tree-active-ring` only while it is focused.
+ */
+:host([active]) .row {
+  box-shadow: var(--pf-tree-active-ring, none);
+}
+
+:host([selected]) .row {
+  background: var(--pf-treeview-bg-subtle);
+  color: var(--pf-treeview-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+:host([disabled]) .row {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.twisty {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  width: 24px;
+}
+
+.toggle {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-treeview-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  height: 24px;
+  justify-content: center;
+  padding: 0;
+  width: 24px;
+}
+
+.toggle:hover {
+  background: var(--pf-treeview-bg-subtle);
+  color: var(--pf-treeview-text);
+}
+
+.icon {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+/* Two classes deep, because the box sets its own `display` above. */
+.badge.empty {
+  display: none;
+}

package/dist/collection/components/pf-tree-item/pf-tree-item.js

@@ -0,0 +1,315 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One item in a `pf-tree-view`, with its own items nested inside it.
+ *
+ * The host is the `treeitem`, and it is never focused: the tree keeps the
+ * focus and names the active item with `aria-activedescendant`, because a
+ * nested host cannot take a roving tabindex at all — measured, and explained
+ * on `pf-tree-view`. So the row inside is a plain box rather than a button,
+ * and the twisty is the only focusable thing in here, kept out of the tab
+ * order.
+ *
+ * `level`, `selected`, `expanded` and `hasChildren` are the group's to set:
+ * only it can see the whole tree.
+ *
+ * @slot label - the item's label.
+ * @slot badge - small trailing content, a count or a status.
+ * @slot - the nested `pf-tree-item` children.
+ * @part row - the item's own row, without its children.
+ * @part toggle - the twisty, on an item that has children.
+ * @part label - the label's box.
+ * @part children - the box holding the nested items.
+ */
+export class PfTreeItem {
+    el;
+    /**
+     * Identifies the item in the tree's selection and open set.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-tree-item[value="..."]` finds
+     * nothing. The tree reads the property.
+     */
+    value = '';
+    /** Reflected; the stylesheet and the tree's own filtering both read it. */
+    disabled = false;
+    /** An icon name from the same registry as `pf-icon`. */
+    icon;
+    /** Set by the tree: how deep this item sits, counting from 1. */
+    level = 1;
+    /** Set by the tree. Reflected, so the stylesheet can mark the item. */
+    selected = false;
+    /** Set by the tree: whether this branch is open. Reflected. */
+    expanded = false;
+    /** Set by the tree: whether there is anything to open. Reflected. */
+    hasChildren = false;
+    /**
+     * Set by the tree: the item the keyboard is on, which is not always the
+     * selected one. Reflected, because the ring is drawn from it.
+     */
+    active = false;
+    /** Asks the tree to select this item. The tree decides. */
+    pfTreeSelect;
+    /** Asks the tree to open or close this branch. */
+    pfTreeToggle;
+    /**
+     * Tells the tree that the items inside this one have changed.
+     *
+     * `slotchange` does not cross a shadow boundary — it is not composed — so a
+     * tree cannot hear its grandchildren arrive. Without this, an item appended
+     * to a branch is never given a level, an id or a place in the keyboard
+     * order; a browser test adds one.
+     */
+    pfTreeStructure;
+    /** Whether anything is slotted into the badge, which carries layout. */
+    hasBadge = false;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad() {
+        this.read();
+    }
+    read = () => {
+        this.hasBadge = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'badge');
+    };
+    onRowClick = () => {
+        if (this.disabled)
+            return;
+        this.pfTreeSelect.emit({ value: this.value });
+    };
+    onToggleClick = (event) => {
+        // The twisty opens the branch without also selecting the item.
+        event.stopPropagation();
+        this.pfTreeToggle.emit({ value: this.value });
+    };
+    render() {
+        return (h(Host, { key: '88ecc1b46b8a27da4032a95a5dc61a5c26aaada0', role: "treeitem", "aria-level": String(this.level), "aria-selected": this.selected ? 'true' : 'false', "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : null, "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '9b01234883116846b26e5cd5565fb40612b81370', class: "row", part: "row", onClick: this.onRowClick }, h("span", { key: '25d5ca0c4ca422a00061eda5f2811328cfc54a5c', class: "twisty", "aria-hidden": "true" }, this.hasChildren && (h("button", { key: '3cb856498ec1506de4026c6a9115e4a86add6a23', type: "button", class: "toggle", part: "toggle", tabindex: "-1", onClick: this.onToggleClick }, this.expanded ? '▾' : '▸'))), this.icon && h("pf-icon", { key: 'd0730491a865b2b2f59e0fcb0adf7cac6db8d4cc', class: "icon", name: this.icon, "aria-hidden": "true" }), h("span", { key: '60a592334f70f944b7d5b8355e0ea6ade902492f', class: "label", part: "label" }, h("slot", { key: '7b00850cd21475d567b0c80d4537f2a8bf0dc24c', name: "label" })), h("span", { key: '641b9658b88ee4760067db4bc0a63ef992c83b4a', class: { badge: true, empty: !this.hasBadge } }, h("slot", { key: 'fffbfbe5f68e1bf85d171b29e6473ef35f11a176', name: "badge", onSlotchange: this.read }))), h("div", { key: '7679e1668cb704b25a5f27f1d896a77b97fb4e90', class: "children", part: "children", role: "group", hidden: !this.expanded }, h("slot", { key: '6b9182c724d033d3f3eb0e3977b2c54a8748f793', onSlotchange: () => this.pfTreeStructure.emit() }))));
+    }
+    static get is() { return "pf-tree-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-tree-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-tree-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies the item in the tree's selection and open set.\n\nReflected because the generated bindings set props as properties, so\nwithout it a consumer selecting `pf-tree-item[value=\"...\"]` finds\nnothing. The tree reads the property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflected; the stylesheet and the tree's own filtering both read it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An icon name from the same registry as `pf-icon`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "level": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the tree: how deep this item sits, counting from 1."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "1"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the tree. Reflected, so the stylesheet can mark the item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the tree: whether this branch is open. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "hasChildren": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the tree: whether there is anything to open. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "has-children",
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the tree: the item the keyboard is on, which is not always the\nselected one. Reflected, because the ring is drawn from it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasBadge": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfTreeSelect",
+                "name": "pfTreeSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Asks the tree to select this item. The tree decides."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfTreeToggle",
+                "name": "pfTreeToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Asks the tree to open or close this branch."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfTreeStructure",
+                "name": "pfTreeStructure",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tells the tree that the items inside this one have changed.\n\n`slotchange` does not cross a shadow boundary \u2014 it is not composed \u2014 so a\ntree cannot hear its grandchildren arrive. Without this, an item appended\nto a branch is never given a level, an id or a place in the keyboard\norder; a browser test adds one."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-tree-item.js.map

package/dist/collection/components/pf-tree-item/pf-tree-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tree-item.js","sourceRoot":"","sources":["../../../src/components/pf-tree-item/pf-tree-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * One item in a `pf-tree-view`, with its own items nested inside it.\n *\n * The host is the `treeitem`, and it is never focused: the tree keeps the\n * focus and names the active item with `aria-activedescendant`, because a\n * nested host cannot take a roving tabindex at all — measured, and explained\n * on `pf-tree-view`. So the row inside is a plain box rather than a button,\n * and the twisty is the only focusable thing in here, kept out of the tab\n * order.\n *\n * `level`, `selected`, `expanded` and `hasChildren` are the group's to set:\n * only it can see the whole tree.\n *\n * @slot label - the item's label.\n * @slot badge - small trailing content, a count or a status.\n * @slot - the nested `pf-tree-item` children.\n * @part row - the item's own row, without its children.\n * @part toggle - the twisty, on an item that has children.\n * @part label - the label's box.\n * @part children - the box holding the nested items.\n */\n@Component({\n  tag: 'pf-tree-item',\n  styleUrl: 'pf-tree-item.css',\n  shadow: true,\n})\nexport class PfTreeItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Identifies the item in the tree's selection and open set.\n   *\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-tree-item[value=\"...\"]` finds\n   * nothing. The tree reads the property.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Reflected; the stylesheet and the tree's own filtering both read it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** An icon name from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /** Set by the tree: how deep this item sits, counting from 1. */\n  @Prop({ mutable: true }) level = 1;\n\n  /** Set by the tree. Reflected, so the stylesheet can mark the item. */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /** Set by the tree: whether this branch is open. Reflected. */\n  @Prop({ mutable: true, reflect: true }) expanded = false;\n\n  /** Set by the tree: whether there is anything to open. Reflected. */\n  @Prop({ mutable: true, reflect: true }) hasChildren = false;\n\n  /**\n   * Set by the tree: the item the keyboard is on, which is not always the\n   * selected one. Reflected, because the ring is drawn from it.\n   */\n  @Prop({ mutable: true, reflect: true }) active = false;\n\n  /** Asks the tree to select this item. The tree decides. */\n  @Event() pfTreeSelect!: EventEmitter<{ value: string }>;\n\n  /** Asks the tree to open or close this branch. */\n  @Event() pfTreeToggle!: EventEmitter<{ value: string }>;\n\n  /**\n   * Tells the tree that the items inside this one have changed.\n   *\n   * `slotchange` does not cross a shadow boundary — it is not composed — so a\n   * tree cannot hear its grandchildren arrive. Without this, an item appended\n   * to a branch is never given a level, an id or a place in the keyboard\n   * order; a browser test adds one.\n   */\n  @Event() pfTreeStructure!: EventEmitter<void>;\n\n  /** Whether anything is slotted into the badge, which carries layout. */\n  @State() hasBadge = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    this.hasBadge = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'badge',\n    );\n  };\n\n  private onRowClick = () => {\n    if (this.disabled) return;\n    this.pfTreeSelect.emit({ value: this.value });\n  };\n\n  private onToggleClick = (event: MouseEvent) => {\n    // The twisty opens the branch without also selecting the item.\n    event.stopPropagation();\n    this.pfTreeToggle.emit({ value: this.value });\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"treeitem\"\n        aria-level={String(this.level)}\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-expanded={this.hasChildren ? (this.expanded ? 'true' : 'false') : null}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        {/*\n          A click surface rather than a button: the host is the treeitem, and\n          the tree holds the keys — a second focusable thing in here would be\n          a tab stop inside a treeitem, which the pattern does not have.\n        */}\n        <div class=\"row\" part=\"row\" onClick={this.onRowClick}>\n          <span class=\"twisty\" aria-hidden=\"true\">\n            {this.hasChildren && (\n              <button\n                type=\"button\"\n                class=\"toggle\"\n                part=\"toggle\"\n                tabindex=\"-1\"\n                onClick={this.onToggleClick}\n              >\n                {this.expanded ? '▾' : '▸'}\n              </button>\n            )}\n          </span>\n\n          {this.icon && <pf-icon class=\"icon\" name={this.icon} aria-hidden=\"true\"></pf-icon>}\n\n          <span class=\"label\" part=\"label\">\n            <slot name=\"label\" />\n          </span>\n\n          <span class={{ badge: true, empty: !this.hasBadge }}>\n            <slot name=\"badge\" onSlotchange={this.read} />\n          </span>\n        </div>\n\n        {/*\n          The nested items stay in the tree when the branch is closed and are\n          hidden instead: a slot that is not rendered never fires `slotchange`,\n          so an item added to a closed branch would stay invisible for good.\n          `role=\"group\"` is what makes the nesting a tree to a screen reader.\n        */}\n        <div class=\"children\" part=\"children\" role=\"group\" hidden={!this.expanded}>\n          <slot onSlotchange={() => this.pfTreeStructure.emit()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-tree-view/pf-tree-view.css

@@ -0,0 +1,26 @@
+:host {
+  background: var(--pf-treeview-bg);
+  border: 1px solid var(--pf-treeview-border);
+  border-radius: var(--radius-md);
+  display: block;
+  padding: var(--space-2);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/*
+ * The tree is the tab stop, so the ring belongs to whichever item the keyboard
+ * is on — and only while the tree itself has focus. A custom property is how
+ * that reaches the item: it inherits through the shadow boundary, where
+ * `:host-context()` would not work in Firefox or Safari.
+ */
+:host {
+  --pf-tree-active-ring: none;
+  outline: none;
+}
+
+:host(:focus-visible) {
+  --pf-tree-active-ring: var(--pf-treeview-focus-ring, var(--pf-focus-ring));
+}