@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/esm/pf-tooltip.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tooltip.entry.js","sources":["src/components/pf-tooltip/pf-tooltip.css?tag=pf-tooltip&encapsulation=shadow","src/components/pf-tooltip/pf-tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * `popover` puts this in the top layer, so it escapes any ancestor's overflow\n * and stacking context. left/top come from the observer.\n */\n/*\n * `inset: auto` and `margin: 0` are essential, not tidying -- see\n * `src/place-popover.ts`, which sets the same two inline and explains the\n * measurement. They are declared in both places deliberately: here so the\n * cascade carries them for the whole life of the panel, and inline so a panel\n * is still positioned where this stylesheet has not been applied.\n */\n.tooltip {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-tooltip-bg);\n  border: 0;\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n  color: var(--pf-tooltip-text);\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  max-width: 260px;\n  padding: var(--space-2) var(--space-3);\n  width: max-content;\n}\n\n.tooltip:popover-open {\n  /* Fade in from the side it sits on. */\n  animation: pf-tooltip-in var(--duration-fast) var(--easing-decelerate);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-tooltip-in {\n  from {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tooltip:popover-open {\n    animation: none;\n  }\n}\n","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"],"names":[],"mappings":"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"}

package/dist/esm/pf-tree-item.entry.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfTreeItemCss = () => `:host{display:block;min-width:0}:host([hidden]){display:none}.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)}:host(:not([icon])) .row{grid-template-columns:24px 1fr auto}.row:hover{background:var(--pf-treeview-bg-subtle);color:var(--pf-treeview-text)}: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}.badge.empty{display:none}`;
+
+const PfTreeItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfTreeSelect = createEvent(this, "pfTreeSelect");
+        this.pfTreeToggle = createEvent(this, "pfTreeToggle");
+        this.pfTreeStructure = createEvent(this, "pfTreeStructure");
+    }
+    get el() { return getElement(this); }
+    /**
+     * 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() }))));
+    }
+};
+PfTreeItem.style = pfTreeItemCss();
+
+export { PfTreeItem as pf_tree_item };
+//# sourceMappingURL=pf-tree-item.entry.js.map
+
+//# sourceMappingURL=pf-tree-item.entry.js.map

package/dist/esm/pf-tree-item.entry.js.map

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

package/dist/esm/pf-tree-view.entry.js

@@ -0,0 +1,340 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { p as parseValueList, f as formatValueList } from './value-list-BmcsJLdy.js';
+
+//#region src/tree.ts
+/**
+* The nodes a reader can actually see, in the order they are rendered —
+* depth-first, with a closed branch's children left out.
+*
+* One flat list rather than a recursive walk per key, because every one of the
+* keyboard rules is "the next visible node" or "the previous" one, and those
+* are neighbours here.
+*/
+function flattenVisibleTree(nodes, expanded, level = 1, parentValue) {
+	const open = expanded instanceof Set ? expanded : new Set(expanded);
+	const flattened = [];
+	for (const node of nodes) {
+		const hasChildren = Boolean(node.children && node.children.length > 0);
+		const isExpanded = hasChildren && open.has(node.value);
+		flattened.push({
+			node,
+			level,
+			parentValue,
+			hasChildren,
+			expanded: isExpanded
+		});
+		if (isExpanded) flattened.push(...flattenVisibleTree(node.children, open, level + 1, node.value));
+	}
+	return flattened;
+}
+/** The first node a reader can select, looking into closed branches too. */
+function firstEnabledTreeValue(nodes) {
+	for (const node of nodes) {
+		if (!node.disabled) return node.value;
+		if (node.children && node.children.length > 0) {
+			const inside = firstEnabledTreeValue(node.children);
+			if (inside) return inside;
+		}
+	}
+}
+/** Every node that has children, which is what "expand all" opens. */
+function expandableTreeValues(nodes) {
+	const values = [];
+	for (const node of nodes) if (node.children && node.children.length > 0) {
+		values.push(node.value);
+		values.push(...expandableTreeValues(node.children));
+	}
+	return values;
+}
+/**
+* What a key does, given the visible list and where the focus is — or `null`
+* when the key is not the tree's to handle.
+*
+* Returned as an intent rather than performed, so both layers share every
+* rule and differ only in how they move focus and set state. The two rules
+* worth stating are the horizontal ones, which are the ARIA pattern:
+*
+* - Right opens a closed branch, and on an open one moves to its first child.
+*   On a leaf it does nothing, rather than skipping to the next sibling.
+* - Left closes an open branch, and on anything else moves out to the parent.
+*
+* Enter and Space select, and also toggle a branch — which is the React
+* component's behaviour, and the reason this returns one intent at a time:
+* the caller does the selection itself and asks again for the toggle.
+*/
+function resolveTreeKey(key, flattened, currentIndex) {
+	const current = flattened[currentIndex];
+	if (!current) return null;
+	const at = (index) => flattened[index]?.node.value;
+	switch (key) {
+		case "ArrowDown": {
+			const next = at(currentIndex + 1);
+			return next ? {
+				type: "focus",
+				value: next
+			} : null;
+		}
+		case "ArrowUp": {
+			const previous = at(currentIndex - 1);
+			return previous ? {
+				type: "focus",
+				value: previous
+			} : null;
+		}
+		case "ArrowRight": {
+			if (!current.hasChildren) return null;
+			if (!current.expanded) return {
+				type: "expand",
+				value: current.node.value
+			};
+			const child = flattened[currentIndex + 1];
+			return child && child.parentValue === current.node.value ? {
+				type: "focus",
+				value: child.node.value
+			} : null;
+		}
+		case "ArrowLeft":
+			if (current.hasChildren && current.expanded) return {
+				type: "collapse",
+				value: current.node.value
+			};
+			return current.parentValue ? {
+				type: "focus",
+				value: current.parentValue
+			} : null;
+		case "Home": {
+			const first = at(0);
+			return first ? {
+				type: "focus",
+				value: first
+			} : null;
+		}
+		case "End": {
+			const last = at(flattened.length - 1);
+			return last ? {
+				type: "focus",
+				value: last
+			} : null;
+		}
+		case "Enter":
+		case " ": return {
+			type: "activate",
+			value: current.node.value
+		};
+		default: return null;
+	}
+}
+
+const pfTreeViewCss = () => `: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}:host{--pf-tree-active-ring:none;outline:none}:host(:focus-visible){--pf-tree-active-ring:var(--pf-treeview-focus-ring, var(--pf-focus-ring))}`;
+
+/**
+ * Distinguishes the ids a tree generates for its items. 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.
+ */
+let instances = 0;
+const PfTreeView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfChange = createEvent(this, "pfChange");
+        this.pfExpandedChange = createEvent(this, "pfExpandedChange");
+    }
+    get el() { return getElement(this); }
+    /** The selected item's value. */
+    value = '';
+    /** The open branches, as one comma-separated string. */
+    expanded = '';
+    /** The tree's accessible name. */
+    label;
+    /** Fires when the selection changes. */
+    pfChange;
+    /** Fires when a branch opens or closes, with the open set. */
+    pfExpandedChange;
+    /**
+     * The item the keyboard is on, which is not always the selected one — the
+     * arrows move it, Enter selects. Starts on the selection, so tabbing in
+     * lands where the reader left off.
+     */
+    activeValue = '';
+    /** Distinguishes the ids this tree generates for its light-DOM items. */
+    uid = ++instances;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        if (!this.value)
+            this.value = firstEnabledTreeValue(this.tree) ?? '';
+        this.activeValue = this.value;
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    handleStateChange() {
+        this.sync();
+    }
+    /** Re-reads the tree, for a consumer who changed an item through a property. */
+    async refresh() {
+        this.sync();
+    }
+    /** Opens every branch. */
+    async expandAll() {
+        this.setExpanded(expandableTreeValues(this.tree));
+    }
+    /** Closes every branch. */
+    async collapseAll() {
+        this.setExpanded([]);
+    }
+    /** The nested items, as the tree core's rules walk. */
+    get tree() {
+        const read = (container) => Array.from(container.querySelectorAll('pf-tree-item'))
+            .filter((item) => item.parentElement === container)
+            .map((item) => ({
+            el: item,
+            value: item.value ?? item.getAttribute('value') ?? '',
+            disabled: item.disabled ??
+                item.hasAttribute('disabled'),
+            children: read(item),
+        }));
+        return read(this.el);
+    }
+    get openValues() {
+        return parseValueList(this.expanded);
+    }
+    get visible() {
+        return flattenVisibleTree(this.tree, this.openValues);
+    }
+    /**
+     * Pushes the tree's state onto the items: how deep each one is, whether it
+     * is selected, open, or the one the keyboard is on — and an id, because the
+     * active item is named by an IDREF from the host.
+     */
+    sync() {
+        const open = new Set(this.openValues);
+        let index = 0;
+        const walk = (nodes, level) => {
+            for (const node of nodes) {
+                const item = node.el;
+                // The ids go on light-DOM children, so they share the document's
+                // namespace with every other tree on the page.
+                if (!node.el.id)
+                    node.el.id = `pf-tree-${this.uid}-item-${(index += 1)}`;
+                item.level = level;
+                item.selected = node.value === this.value;
+                item.hasChildren = node.children.length > 0;
+                item.expanded = node.children.length > 0 && open.has(node.value);
+                item.active = node.value === this.activeValue;
+                walk(node.children, level + 1);
+            }
+        };
+        walk(this.tree, 1);
+        /*
+         * An item inside a closed branch cannot be the active one: the reader
+         * cannot see it, and `aria-activedescendant` pointing at it would tell a
+         * screen reader otherwise. Collapsing a branch therefore moves the
+         * keyboard back out to it.
+         */
+        const visible = this.visible;
+        if (visible.length === 0)
+            return;
+        if (!visible.some((item) => item.node.value === this.activeValue)) {
+            const fallback = visible.find((item) => item.node.value === this.value) ?? visible[0];
+            this.activeValue = fallback.node.value;
+            this.sync();
+        }
+    }
+    /** The active item's id, which is what the host points `aria-activedescendant` at. */
+    get activeId() {
+        const active = this.visible.find((item) => item.node.value === this.activeValue);
+        return active?.node.el.id || undefined;
+    }
+    setExpanded(next) {
+        const value = formatValueList(next);
+        if (value === this.expanded)
+            return;
+        this.expanded = value;
+        this.sync();
+        this.pfExpandedChange.emit({ value, values: next });
+    }
+    toggle(value, open) {
+        const current = new Set(this.openValues);
+        const shouldOpen = open ?? !current.has(value);
+        if (shouldOpen)
+            current.add(value);
+        else
+            current.delete(value);
+        this.setExpanded(Array.from(current));
+    }
+    select(value) {
+        const node = this.visible.find((item) => item.node.value === value)?.node;
+        if (!node || node.disabled)
+            return;
+        // The keyboard follows the selection, however it was made.
+        this.activeValue = value;
+        if (value === this.value) {
+            this.sync();
+            return;
+        }
+        this.value = value;
+        this.sync();
+        this.pfChange.emit({ value });
+    }
+    /** An item asking to be selected. The group decides. */
+    handleSelect(event) {
+        event.stopPropagation();
+        this.select(event.detail.value);
+    }
+    /** An item's twisty asking to open or close it. */
+    handleToggle(event) {
+        event.stopPropagation();
+        this.toggle(event.detail.value);
+    }
+    /**
+     * Every key rule is core's; this only carries the intent out. A key core
+     * does not claim is left to the browser.
+     */
+    handleKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const visible = this.visible;
+        const currentIndex = visible.findIndex((item) => item.node.value === this.activeValue);
+        const intent = resolveTreeKey(event.key, visible, currentIndex);
+        if (!intent)
+            return;
+        event.preventDefault();
+        if (intent.type === 'focus') {
+            // The keyboard moves without any DOM focus moving: the tree keeps it.
+            this.activeValue = intent.value;
+            this.sync();
+            return;
+        }
+        if (intent.type === 'expand' || intent.type === 'collapse') {
+            this.toggle(intent.value, intent.type === 'expand');
+            return;
+        }
+        // Activation both selects and toggles, as a click on each half would.
+        this.select(intent.value);
+        if (visible[currentIndex]?.hasChildren)
+            this.toggle(intent.value);
+    }
+    /** An item's own slot changed, so the tree below it has moved. */
+    handleStructureChange(event) {
+        event.stopPropagation();
+        this.sync();
+    }
+    render() {
+        return (h(Host, { key: 'a39e6df109c516369723544040b29914e5ba596d', role: "tree", tabindex: "0", "aria-label": this.label, "aria-activedescendant": this.activeId }, h("slot", { key: 'e50cbfba93aadd34fefad3399af4ecc7aa468fdf', onSlotchange: () => this.refresh() })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleStateChange": 0
+            }],
+        "expanded": [{
+                "handleStateChange": 0
+            }]
+    }; }
+};
+PfTreeView.style = pfTreeViewCss();
+
+export { PfTreeView as pf_tree_view };
+//# sourceMappingURL=pf-tree-view.entry.js.map
+
+//# sourceMappingURL=pf-tree-view.entry.js.map

package/dist/esm/pf-tree-view.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tree-view.entry.js","sources":["../core/dist/tree.js","src/components/pf-tree-view/pf-tree-view.css?tag=pf-tree-view&encapsulation=shadow","src/components/pf-tree-view/pf-tree-view.tsx"],"sourcesContent":["//#region src/tree.ts\n/**\n* The nodes a reader can actually see, in the order they are rendered —\n* depth-first, with a closed branch's children left out.\n*\n* One flat list rather than a recursive walk per key, because every one of the\n* keyboard rules is \"the next visible node\" or \"the previous\" one, and those\n* are neighbours here.\n*/\nfunction flattenVisibleTree(nodes, expanded, level = 1, parentValue) {\n\tconst open = expanded instanceof Set ? expanded : new Set(expanded);\n\tconst flattened = [];\n\tfor (const node of nodes) {\n\t\tconst hasChildren = Boolean(node.children && node.children.length > 0);\n\t\tconst isExpanded = hasChildren && open.has(node.value);\n\t\tflattened.push({\n\t\t\tnode,\n\t\t\tlevel,\n\t\t\tparentValue,\n\t\t\thasChildren,\n\t\t\texpanded: isExpanded\n\t\t});\n\t\tif (isExpanded) flattened.push(...flattenVisibleTree(node.children, open, level + 1, node.value));\n\t}\n\treturn flattened;\n}\n/** The first node a reader can select, looking into closed branches too. */\nfunction firstEnabledTreeValue(nodes) {\n\tfor (const node of nodes) {\n\t\tif (!node.disabled) return node.value;\n\t\tif (node.children && node.children.length > 0) {\n\t\t\tconst inside = firstEnabledTreeValue(node.children);\n\t\t\tif (inside) return inside;\n\t\t}\n\t}\n}\n/** Every node that has children, which is what \"expand all\" opens. */\nfunction expandableTreeValues(nodes) {\n\tconst values = [];\n\tfor (const node of nodes) if (node.children && node.children.length > 0) {\n\t\tvalues.push(node.value);\n\t\tvalues.push(...expandableTreeValues(node.children));\n\t}\n\treturn values;\n}\n/**\n* What a key does, given the visible list and where the focus is — or `null`\n* when the key is not the tree's to handle.\n*\n* Returned as an intent rather than performed, so both layers share every\n* rule and differ only in how they move focus and set state. The two rules\n* worth stating are the horizontal ones, which are the ARIA pattern:\n*\n* - Right opens a closed branch, and on an open one moves to its first child.\n*   On a leaf it does nothing, rather than skipping to the next sibling.\n* - Left closes an open branch, and on anything else moves out to the parent.\n*\n* Enter and Space select, and also toggle a branch — which is the React\n* component's behaviour, and the reason this returns one intent at a time:\n* the caller does the selection itself and asks again for the toggle.\n*/\nfunction resolveTreeKey(key, flattened, currentIndex) {\n\tconst current = flattened[currentIndex];\n\tif (!current) return null;\n\tconst at = (index) => flattened[index]?.node.value;\n\tswitch (key) {\n\t\tcase \"ArrowDown\": {\n\t\t\tconst next = at(currentIndex + 1);\n\t\t\treturn next ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: next\n\t\t\t} : null;\n\t\t}\n\t\tcase \"ArrowUp\": {\n\t\t\tconst previous = at(currentIndex - 1);\n\t\t\treturn previous ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: previous\n\t\t\t} : null;\n\t\t}\n\t\tcase \"ArrowRight\": {\n\t\t\tif (!current.hasChildren) return null;\n\t\t\tif (!current.expanded) return {\n\t\t\t\ttype: \"expand\",\n\t\t\t\tvalue: current.node.value\n\t\t\t};\n\t\t\tconst child = flattened[currentIndex + 1];\n\t\t\treturn child && child.parentValue === current.node.value ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: child.node.value\n\t\t\t} : null;\n\t\t}\n\t\tcase \"ArrowLeft\":\n\t\t\tif (current.hasChildren && current.expanded) return {\n\t\t\t\ttype: \"collapse\",\n\t\t\t\tvalue: current.node.value\n\t\t\t};\n\t\t\treturn current.parentValue ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: current.parentValue\n\t\t\t} : null;\n\t\tcase \"Home\": {\n\t\t\tconst first = at(0);\n\t\t\treturn first ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: first\n\t\t\t} : null;\n\t\t}\n\t\tcase \"End\": {\n\t\t\tconst last = at(flattened.length - 1);\n\t\t\treturn last ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: last\n\t\t\t} : null;\n\t\t}\n\t\tcase \"Enter\":\n\t\tcase \" \": return {\n\t\t\ttype: \"activate\",\n\t\t\tvalue: current.node.value\n\t\t};\n\t\tdefault: return null;\n\t}\n}\n//#endregion\nexport { expandableTreeValues, firstEnabledTreeValue, flattenVisibleTree, resolveTreeKey };\n",":host {\n  background: var(--pf-treeview-bg);\n  border: 1px solid var(--pf-treeview-border);\n  border-radius: var(--radius-md);\n  display: block;\n  padding: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The tree is the tab stop, so the ring belongs to whichever item the keyboard\n * is on — and only while the tree itself has focus. A custom property is how\n * that reaches the item: it inherits through the shadow boundary, where\n * `:host-context()` would not work in Firefox or Safari.\n */\n:host {\n  --pf-tree-active-ring: none;\n  outline: none;\n}\n\n:host(:focus-visible) {\n  --pf-tree-active-ring: var(--pf-treeview-focus-ring, var(--pf-focus-ring));\n}\n","import {\n  expandableTreeValues,\n  firstEnabledTreeValue,\n  type FlatTreeNode,\n  flattenVisibleTree,\n  formatValueList,\n  parseValueList,\n  resolveTreeKey,\n  type TreeNodeLike,\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  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * Distinguishes the ids a tree generates for its items. Not `useId`, which has\n * no equivalent here, and not a shadow-scoped literal either: these ids go on\n * *light-DOM* children, so they share the document's namespace.\n */\nlet instances = 0;\n\n/** A `pf-tree-item` read the way core's rules need it. */\ninterface ItemNode extends TreeNodeLike {\n  el: HTMLElement;\n  children: ItemNode[];\n}\n\n/**\n * A tree over nested `pf-tree-item` children.\n *\n * Nesting rather than a `nodes` array, which is what a tree looks like in a\n * consumer's template anyway — and the labels are nodes, so they could not\n * cross the HTML boundary.\n *\n * The group owns what no single item can see: which one is selected, which\n * are open, the one tab stop, and the keyboard. Every rule the keyboard\n * follows is core's `resolveTreeKey`, so this and the React `TreeView` answer\n * the arrows identically.\n *\n * **The tree itself is the tab stop, not the items.** The ARIA tree pattern\n * allows either a roving tabindex or a managed `aria-activedescendant`, and\n * here only the second one works: measured in Chromium, a `tabindex=\"0\"` host\n * slotted into another host's shadow tree is skipped by sequential navigation\n * entirely when the outer host's tabindex is negative — which is exactly a\n * nested `pf-tree-item` under a roving tabindex. So the tree takes the focus\n * and tracks the active item with an IDREF, which resolves because the items\n * are its own light-DOM descendants.\n *\n * The React `TreeView` makes every visible item a tab stop, which is a gap\n * recorded in `todo.md`.\n *\n * @slot - the `pf-tree-item` children.\n */\n@Component({\n  tag: 'pf-tree-view',\n  styleUrl: 'pf-tree-view.css',\n  shadow: true,\n})\nexport class PfTreeView {\n  @Element() el!: HTMLElement;\n\n  /** The selected item's value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The open branches, as one comma-separated string. */\n  @Prop({ mutable: true, reflect: true }) expanded = '';\n\n  /** The tree's accessible name. */\n  @Prop() label?: string;\n\n  /** Fires when the selection changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires when a branch opens or closes, with the open set. */\n  @Event() pfExpandedChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  /**\n   * The item the keyboard is on, which is not always the selected one — the\n   * arrows move it, Enter selects. Starts on the selection, so tabbing in\n   * lands where the reader left off.\n   */\n  @State() activeValue = '';\n\n  /** Distinguishes the ids this tree generates for its light-DOM items. */\n  private uid = ++instances;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    if (!this.value) this.value = firstEnabledTreeValue(this.tree) ?? '';\n    this.activeValue = this.value;\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('value')\n  @Watch('expanded')\n  handleStateChange() {\n    this.sync();\n  }\n\n  /** Re-reads the tree, for a consumer who changed an item through a property. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Opens every branch. */\n  @Method()\n  async expandAll() {\n    this.setExpanded(expandableTreeValues(this.tree));\n  }\n\n  /** Closes every branch. */\n  @Method()\n  async collapseAll() {\n    this.setExpanded([]);\n  }\n\n  /** The nested items, as the tree core's rules walk. */\n  private get tree(): ItemNode[] {\n    const read = (container: HTMLElement): ItemNode[] =>\n      Array.from(container.querySelectorAll<HTMLElement>('pf-tree-item'))\n        .filter((item) => item.parentElement === container)\n        .map((item) => ({\n          el: item,\n          value:\n            (item as HTMLElement & { value?: string }).value ?? item.getAttribute('value') ?? '',\n          disabled:\n            (item as HTMLElement & { disabled?: boolean }).disabled ??\n            item.hasAttribute('disabled'),\n          children: read(item),\n        }));\n\n    return read(this.el);\n  }\n\n  private get openValues(): string[] {\n    return parseValueList(this.expanded);\n  }\n\n  private get visible(): FlatTreeNode<ItemNode>[] {\n    return flattenVisibleTree(this.tree, this.openValues);\n  }\n\n  /**\n   * Pushes the tree's state onto the items: how deep each one is, whether it\n   * is selected, open, or the one the keyboard is on — and an id, because the\n   * active item is named by an IDREF from the host.\n   */\n  private sync() {\n    const open = new Set(this.openValues);\n    let index = 0;\n\n    const walk = (nodes: ItemNode[], level: number) => {\n      for (const node of nodes) {\n        const item = node.el as HTMLElement & {\n          level: number;\n          selected: boolean;\n          expanded: boolean;\n          hasChildren: boolean;\n          active: boolean;\n        };\n        // The ids go on light-DOM children, so they share the document's\n        // namespace with every other tree on the page.\n        if (!node.el.id) node.el.id = `pf-tree-${this.uid}-item-${(index += 1)}`;\n        item.level = level;\n        item.selected = node.value === this.value;\n        item.hasChildren = node.children.length > 0;\n        item.expanded = node.children.length > 0 && open.has(node.value);\n        item.active = node.value === this.activeValue;\n        walk(node.children, level + 1);\n      }\n    };\n    walk(this.tree, 1);\n\n    /*\n     * An item inside a closed branch cannot be the active one: the reader\n     * cannot see it, and `aria-activedescendant` pointing at it would tell a\n     * screen reader otherwise. Collapsing a branch therefore moves the\n     * keyboard back out to it.\n     */\n    const visible = this.visible;\n    if (visible.length === 0) return;\n    if (!visible.some((item) => item.node.value === this.activeValue)) {\n      const fallback = visible.find((item) => item.node.value === this.value) ?? visible[0];\n      this.activeValue = fallback.node.value;\n      this.sync();\n    }\n  }\n\n  /** The active item's id, which is what the host points `aria-activedescendant` at. */\n  private get activeId(): string | undefined {\n    const active = this.visible.find((item) => item.node.value === this.activeValue);\n    return active?.node.el.id || undefined;\n  }\n\n  private setExpanded(next: string[]) {\n    const value = formatValueList(next);\n    if (value === this.expanded) return;\n\n    this.expanded = value;\n    this.sync();\n    this.pfExpandedChange.emit({ value, values: next });\n  }\n\n  private toggle(value: string, open?: boolean) {\n    const current = new Set(this.openValues);\n    const shouldOpen = open ?? !current.has(value);\n\n    if (shouldOpen) current.add(value);\n    else current.delete(value);\n\n    this.setExpanded(Array.from(current));\n  }\n\n  private select(value: string) {\n    const node = this.visible.find((item) => item.node.value === value)?.node;\n    if (!node || node.disabled) return;\n\n    // The keyboard follows the selection, however it was made.\n    this.activeValue = value;\n    if (value === this.value) {\n      this.sync();\n      return;\n    }\n\n    this.value = value;\n    this.sync();\n    this.pfChange.emit({ value });\n  }\n\n  /** An item asking to be selected. The group decides. */\n  @Listen('pfTreeSelect')\n  handleSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.select(event.detail.value);\n  }\n\n  /** An item's twisty asking to open or close it. */\n  @Listen('pfTreeToggle')\n  handleToggle(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.toggle(event.detail.value);\n  }\n\n  /**\n   * Every key rule is core's; this only carries the intent out. A key core\n   * does not claim is left to the browser.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const visible = this.visible;\n    const currentIndex = visible.findIndex((item) => item.node.value === this.activeValue);\n    const intent = resolveTreeKey(event.key, visible, currentIndex);\n    if (!intent) return;\n\n    event.preventDefault();\n\n    if (intent.type === 'focus') {\n      // The keyboard moves without any DOM focus moving: the tree keeps it.\n      this.activeValue = intent.value;\n      this.sync();\n      return;\n    }\n    if (intent.type === 'expand' || intent.type === 'collapse') {\n      this.toggle(intent.value, intent.type === 'expand');\n      return;\n    }\n\n    // Activation both selects and toggles, as a click on each half would.\n    this.select(intent.value);\n    if (visible[currentIndex]?.hasChildren) this.toggle(intent.value);\n  }\n\n  /** An item's own slot changed, so the tree below it has moved. */\n  @Listen('pfTreeStructure')\n  handleStructureChange(event: CustomEvent<void>) {\n    event.stopPropagation();\n    this.sync();\n  }\n\n  render() {\n    return (\n      <Host role=\"tree\" tabindex=\"0\" aria-label={this.label} aria-activedescendant={this.activeId}>\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-utility-button.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfUtilityButtonCss = () => `:host{display:inline-flex}:host([hidden]){display:none}[part='button']{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--space-1);justify-content:center;line-height:1;white-space:nowrap;transition:background-color 120ms ease,     border-color 120ms ease,     color 120ms ease,     box-shadow 120ms ease;width:100%}[part='button']:focus-visible{box-shadow:var(--pf-utilitybutton-focus-ring, var(--pf-focus-ring));outline:none}[part='button']:disabled{cursor:not-allowed;opacity:0.55}:host([size='sm']) [part='button']{min-height:32px;padding:0 var(--space-2)}:host([size='md']) [part='button']{min-height:36px;padding:0 var(--space-3)}:host([variant='neutral']) [part='button']{background:var(--pf-utility-btn-neutral-bg);border-color:var(--pf-utility-btn-neutral-border);color:var(--pf-utility-btn-neutral-text)}:host([variant='neutral']) [part='button']:hover:not(:disabled){background:var(--pf-utility-btn-neutral-bg-hover);border-color:var(--pf-utility-btn-neutral-border-hover)}:host([variant='brand']) [part='button']{background:var(--pf-utility-btn-brand-bg);border-color:var(--pf-utility-btn-brand-border);color:var(--pf-utility-btn-brand-text)}:host([variant='brand']) [part='button']:hover:not(:disabled){background:var(--pf-utility-btn-brand-bg-hover)}:host([variant='destructive']) [part='button']{background:var(--pf-utility-btn-destructive-bg);border-color:var(--pf-utility-btn-destructive-border);color:var(--pf-utility-btn-destructive-text)}:host([variant='destructive']) [part='button']:hover:not(:disabled){background:var(--pf-utility-btn-destructive-bg-hover)}slot[name='icon']::slotted(*){display:block;flex:0 0 auto;height:16px;width:16px}@media (prefers-reduced-motion: reduce){[part='button']{transition:none}}`;
+
+const PfUtilityButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Colour treatment. Reflected so the stylesheet can select on it. */
+    variant = 'neutral';
+    /** Control size. Reflected so the stylesheet can select on it. */
+    size = 'md';
+    /** Disable the button. Reflected so the stylesheet can select on it. */
+    disabled = false;
+    /** Mirrors the native attribute. */
+    type = 'button';
+    /**
+     * Accessible name. Required for an icon-only button, and also used as the
+     * native tooltip unless `tooltip` says otherwise.
+     */
+    label;
+    /** Native tooltip text. Defaults to `label`. */
+    tooltip;
+    /**
+     * An icon-only button with no name is invisible to a screen reader, and it is
+     * the mistake this component invites.
+     *
+     * Once per element, in `componentDidLoad`. `pf-icon` dedupes its own warning
+     * by icon name, but there is no equivalent key here, and a module-level flag
+     * would make the warning depend on what else happened to render first. Fifty
+     * nameless buttons are fifty real defects, and the React component is noisier
+     * still -- it warns from the render body, so once per render.
+     */
+    componentDidLoad() {
+        if (this.label || this.el.getAttribute('aria-label'))
+            return;
+        const hasText = Array.from(this.el.childNodes).some((node) => (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) ||
+            (node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') !== 'icon'));
+        if (hasText)
+            return;
+        console.warn('[pf-utility-button] An icon-only button needs a `label` (or an `aria-label`) — this one has no accessible name.');
+    }
+    render() {
+        return (h(Host, { key: '7086ccf4c93129e544c160cf2c4815f2a3c61484' }, h("button", { key: 'd938e6170a19ef49c2af1d9e784e42f4192bc530', part: "button", type: this.type, disabled: this.disabled, "aria-label": this.label, title: this.tooltip ?? this.label }, h("slot", { key: 'e59b5b03a80eecd37990c89bad5435c4cc0cc7f9', name: "icon" }), h("slot", { key: 'ad287e4e52742a5c44eea10745163f065c79af07' }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+PfUtilityButton.style = pfUtilityButtonCss();
+
+export { PfUtilityButton as pf_utility_button };
+//# sourceMappingURL=pf-utility-button.entry.js.map
+
+//# sourceMappingURL=pf-utility-button.entry.js.map

package/dist/esm/pf-utility-button.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-utility-button.entry.js","sources":["src/components/pf-utility-button/pf-utility-button.css?tag=pf-utility-button&encapsulation=shadow","src/components/pf-utility-button/pf-utility-button.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n[part='button'] {\n  align-items: center;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  gap: var(--space-1);\n  justify-content: center;\n  line-height: 1;\n  white-space: nowrap;\n  transition:\n    background-color 120ms ease,\n    border-color 120ms ease,\n    color 120ms ease,\n    box-shadow 120ms ease;\n  width: 100%;\n}\n\n[part='button']:focus-visible {\n  box-shadow: var(--pf-utilitybutton-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n[part='button']:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n:host([size='sm']) [part='button'] {\n  min-height: 32px;\n  padding: 0 var(--space-2);\n}\n\n:host([size='md']) [part='button'] {\n  min-height: 36px;\n  padding: 0 var(--space-3);\n}\n\n:host([variant='neutral']) [part='button'] {\n  background: var(--pf-utility-btn-neutral-bg);\n  border-color: var(--pf-utility-btn-neutral-border);\n  color: var(--pf-utility-btn-neutral-text);\n}\n\n:host([variant='neutral']) [part='button']:hover:not(:disabled) {\n  background: var(--pf-utility-btn-neutral-bg-hover);\n  border-color: var(--pf-utility-btn-neutral-border-hover);\n}\n\n:host([variant='brand']) [part='button'] {\n  background: var(--pf-utility-btn-brand-bg);\n  border-color: var(--pf-utility-btn-brand-border);\n  color: var(--pf-utility-btn-brand-text);\n}\n\n:host([variant='brand']) [part='button']:hover:not(:disabled) {\n  background: var(--pf-utility-btn-brand-bg-hover);\n}\n\n:host([variant='destructive']) [part='button'] {\n  background: var(--pf-utility-btn-destructive-bg);\n  border-color: var(--pf-utility-btn-destructive-border);\n  color: var(--pf-utility-btn-destructive-text);\n}\n\n:host([variant='destructive']) [part='button']:hover:not(:disabled) {\n  background: var(--pf-utility-btn-destructive-bg-hover);\n}\n\n/*\n * Sizes the icon the consumer slots in. The React library reaches it with a\n * descendant selector (`.pf-utility-button__icon svg`); across a shadow\n * boundary only `::slotted` can, and it reaches the assigned node itself\n * rather than inside it -- so a slotted `pf-icon` is sized here and sizes its\n * own svg.\n */\nslot[name='icon']::slotted(*) {\n  display: block;\n  flex: 0 0 auto;\n  height: 16px;\n  width: 16px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [part='button'] {\n    transition: none;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type PfUtilityButtonVariant = 'neutral' | 'brand' | 'destructive';\nexport type PfUtilityButtonSize = 'sm' | 'md';\n\n/**\n * A compact button for toolbars and table rows, where the affordance is often\n * an icon alone.\n *\n * @slot - the button's label. Omit it for an icon-only button, and give a\n * `label` so the button still has an accessible name.\n * @slot icon - a leading icon, usually `pf-icon`.\n * @part button - the native button element.\n */\n@Component({\n  tag: 'pf-utility-button',\n  styleUrl: 'pf-utility-button.css',\n  // delegatesFocus so focusing <pf-utility-button> reaches the real button and\n  // :focus-visible lands on the element the stylesheet rings.\n  shadow: { delegatesFocus: true },\n})\nexport class PfUtilityButton {\n  @Element() el!: HTMLElement;\n\n  /** Colour treatment. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) variant: PfUtilityButtonVariant = 'neutral';\n\n  /** Control size. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfUtilityButtonSize = 'md';\n\n  /** Disable the button. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Mirrors the native attribute. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Accessible name. Required for an icon-only button, and also used as the\n   * native tooltip unless `tooltip` says otherwise.\n   */\n  @Prop() label?: string;\n\n  /** Native tooltip text. Defaults to `label`. */\n  @Prop() tooltip?: string;\n\n  /**\n   * An icon-only button with no name is invisible to a screen reader, and it is\n   * the mistake this component invites.\n   *\n   * Once per element, in `componentDidLoad`. `pf-icon` dedupes its own warning\n   * by icon name, but there is no equivalent key here, and a module-level flag\n   * would make the warning depend on what else happened to render first. Fifty\n   * nameless buttons are fifty real defects, and the React component is noisier\n   * still -- it warns from the render body, so once per render.\n   */\n  componentDidLoad() {\n    if (this.label || this.el.getAttribute('aria-label')) return;\n    const hasText = Array.from(this.el.childNodes).some(\n      (node) =>\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) ||\n        (node.nodeType === Node.ELEMENT_NODE && (node as Element).getAttribute('slot') !== 'icon'),\n    );\n    if (hasText) return;\n    console.warn(\n      '[pf-utility-button] An icon-only button needs a `label` (or an `aria-label`) — this one has no accessible name.',\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          part=\"button\"\n          type={this.type}\n          disabled={this.disabled}\n          aria-label={this.label}\n          title={this.tooltip ?? this.label}\n        >\n          {/*\n            The slots sit directly in the flex container rather than inside\n            wrapper spans. A `slot` is `display: contents` per the UA\n            stylesheet, so an empty one contributes no flex item and the\n            button's `gap` does not open beside it -- which a wrapper span\n            would, being a zero-width item that still counts. There is no\n            emptiness to detect.\n          */}\n          <slot name=\"icon\" />\n          <slot />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,s3DAAs3D,CAAC;;MCqB54D,eAAe,GAAA,MAAA;;;;;;IAID,OAAO,GAA2B,SAAS;;IAG3C,IAAI,GAAwB,IAAI;;IAGhC,QAAQ,GAAG,KAAK;;IAGjC,IAAI,GAAkC,QAAQ;AAEtD;;;AAGG;AACK,IAAA,KAAK;;AAGL,IAAA,OAAO;AAEf;;;;;;;;;AASG;IACH,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC;YAAE;AACtD,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CACjD,CAAC,IAAI,KACH,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE;AAC7D,aAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,IAAK,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,CAC7F;AACD,QAAA,IAAI,OAAO;YAAE;AACb,QAAA,OAAO,CAAC,IAAI,CACV,iHAAiH,CAClH;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,EAAA,EAUjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,CACJ;;;;;;;;"}