@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/esm/pf-toolbar-separator.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfToolbarSeparatorCss = () => `:host{background:var(--pf-toolbar-separator);flex-shrink:0;margin:var(--space-1)}:host([hidden]){display:none}:host([orientation='horizontal']){align-self:stretch;width:1px}:host([orientation='vertical']){height:1px}`;
+
+const PfToolbarSeparator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The axis of the toolbar this sits in. Reflected for the stylesheet. */
+    orientation = 'horizontal';
+    render() {
+        return h(Host, { key: 'b6a69e325252e5807d813d6b7d95a4d0cd915148', role: "separator", "aria-orientation": this.orientation });
+    }
+};
+PfToolbarSeparator.style = pfToolbarSeparatorCss();
+
+export { PfToolbarSeparator as pf_toolbar_separator };
+//# sourceMappingURL=pf-toolbar-separator.entry.js.map
+
+//# sourceMappingURL=pf-toolbar-separator.entry.js.map

package/dist/esm/pf-toolbar-separator.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-toolbar-separator.entry.js","sources":["src/components/pf-toolbar-separator/pf-toolbar-separator.css?tag=pf-toolbar-separator&encapsulation=shadow","src/components/pf-toolbar-separator/pf-toolbar-separator.tsx"],"sourcesContent":[":host {\n  background: var(--pf-toolbar-separator);\n  flex-shrink: 0;\n  margin: var(--space-1);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* A horizontal toolbar is divided by a vertical hairline, and vice versa. */\n:host([orientation='horizontal']) {\n  align-self: stretch;\n  width: 1px;\n}\n\n:host([orientation='vertical']) {\n  height: 1px;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfToolbarSeparatorOrientation = 'horizontal' | 'vertical';\n\n/**\n * A rule between groups of toolbar controls.\n *\n * `orientation` describes the toolbar it sits in, not the rule's own shape: a\n * horizontal toolbar gets a vertical hairline. `pf-toolbar` sets it on every\n * separator it contains, so a consumer does not have to — and cannot leave one\n * pointing the wrong way.\n */\n@Component({\n  tag: 'pf-toolbar-separator',\n  styleUrl: 'pf-toolbar-separator.css',\n  shadow: true,\n})\nexport class PfToolbarSeparator {\n  /** The axis of the toolbar this sits in. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) orientation: PfToolbarSeparatorOrientation = 'horizontal';\n\n  render() {\n    return <Host role=\"separator\" aria-orientation={this.orientation} />;\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,wNAAwN,CAAC;;MCiBjP,kBAAkB,GAAA,MAAA;;;;;IAEJ,WAAW,GAAkC,YAAY;IAElF,MAAM,GAAA;QACJ,OAAO,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,WAAW,EAAA,kBAAA,EAAmB,IAAI,CAAC,WAAW,EAAA,CAAI;;;;;;;"}

package/dist/esm/pf-toolbar.entry.js

@@ -0,0 +1,73 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { r as resolveListMove } from './navigation-CAz7-p8y.js';
+import { s as syncRovingTabIndex, g as getRovingItems, r as resolveRovingKey } from './roving-BzRAGyFO.js';
+import './keys-g4FlTDZx.js';
+
+const pfToolbarCss = () => `:host{align-items:center;background:var(--pf-toolbar-bg);border:1px solid var(--pf-toolbar-border);border-radius:var(--radius-md);display:flex;gap:var(--space-1);padding:var(--space-1)}:host([hidden]){display:none}:host([orientation='horizontal']){flex-direction:row}:host([orientation='vertical']){align-items:stretch;flex-direction:column;width:fit-content}`;
+
+const PfToolbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Layout and arrow-key axis. Reflected so the stylesheet can select on it. */
+    orientation = 'horizontal';
+    componentDidLoad() {
+        this.sync();
+    }
+    /**
+     * A separator cannot see which way its toolbar runs: `:host-context()` is the
+     * only selector that would reach out of its shadow root, and it is not
+     * supported in Firefox or Safari. So the toolbar pushes its own orientation
+     * down instead, which also means a consumer never has to set it twice.
+     */
+    sync() {
+        syncRovingTabIndex(getRovingItems(this.el));
+        for (const separator of Array.from(this.el.querySelectorAll('pf-toolbar-separator'))) {
+            separator.setAttribute('orientation', this.orientation);
+        }
+    }
+    /**
+     * Keeps the tab stop on whatever the user actually focused, however they got
+     * there — a click, a Tab from outside, or a script.
+     *
+     * `focusin` rather than `focus` because it bubbles, and it crosses a shadow
+     * boundary with its target retargeted to the host, which is exactly the
+     * element in the item list.
+     */
+    handleFocusIn(event) {
+        syncRovingTabIndex(getRovingItems(this.el), event.target);
+    }
+    handleKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const action = resolveRovingKey(event.key, this.orientation);
+        if (!action)
+            return;
+        const items = getRovingItems(this.el);
+        // activeElement reports the shallowest host, which is the item itself even
+        // when focus has been delegated into its shadow root.
+        const currentIndex = items.indexOf(document.activeElement);
+        if (currentIndex === -1)
+            return;
+        const nextIndex = resolveListMove(action, items.map((_, index) => index), currentIndex);
+        if (nextIndex >= 0) {
+            event.preventDefault();
+            items[nextIndex].focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'f0a26b6f3d74719af7dbefc0eb21a957502427f6', role: "toolbar", "aria-orientation": this.orientation }, h("slot", { key: '0e557bef8da2b0e344541975284be29d647dec34', onSlotchange: () => this.sync() })));
+    }
+    static get watchers() { return {
+        "orientation": [{
+                "sync": 0
+            }]
+    }; }
+};
+PfToolbar.style = pfToolbarCss();
+
+export { PfToolbar as pf_toolbar };
+//# sourceMappingURL=pf-toolbar.entry.js.map
+
+//# sourceMappingURL=pf-toolbar.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-toolbar.entry.js","sources":["src/components/pf-toolbar/pf-toolbar.css?tag=pf-toolbar&encapsulation=shadow","src/components/pf-toolbar/pf-toolbar.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  background: var(--pf-toolbar-bg);\n  border: 1px solid var(--pf-toolbar-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  gap: var(--space-1);\n  padding: var(--space-1);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  flex-direction: row;\n}\n\n:host([orientation='vertical']) {\n  align-items: stretch;\n  flex-direction: column;\n  width: fit-content;\n}\n","import {\n  getRovingItems,\n  resolveListMove,\n  resolveRovingKey,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\nexport type PfToolbarOrientation = 'horizontal' | 'vertical';\n\n/**\n * A group of controls that is one tab stop from outside and navigated\n * internally with the arrow keys.\n *\n * Items are matched in the light DOM, so a native `button`, `a[href]` or form\n * control works with no ceremony. A custom element is not a native control and\n * has to opt in with `data-toolbar-item` — `<pf-button data-toolbar-item>`.\n * Focusing it still reaches the real button inside, because `pf-button`\n * delegates focus.\n *\n * @slot - the toolbar's controls, and any `pf-toolbar-separator` between them.\n */\n@Component({\n  tag: 'pf-toolbar',\n  styleUrl: 'pf-toolbar.css',\n  shadow: true,\n})\nexport class PfToolbar {\n  @Element() el!: HTMLElement;\n\n  /** Layout and arrow-key axis. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfToolbarOrientation = 'horizontal';\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * A separator cannot see which way its toolbar runs: `:host-context()` is the\n   * only selector that would reach out of its shadow root, and it is not\n   * supported in Firefox or Safari. So the toolbar pushes its own orientation\n   * down instead, which also means a consumer never has to set it twice.\n   */\n  @Watch('orientation')\n  sync() {\n    syncRovingTabIndex(getRovingItems(this.el));\n\n    for (const separator of Array.from(this.el.querySelectorAll('pf-toolbar-separator'))) {\n      separator.setAttribute('orientation', this.orientation);\n    }\n  }\n\n  /**\n   * Keeps the tab stop on whatever the user actually focused, however they got\n   * there — a click, a Tab from outside, or a script.\n   *\n   * `focusin` rather than `focus` because it bubbles, and it crosses a shadow\n   * boundary with its target retargeted to the host, which is exactly the\n   * element in the item list.\n   */\n  @Listen('focusin')\n  handleFocusIn(event: FocusEvent) {\n    syncRovingTabIndex(getRovingItems(this.el), event.target as HTMLElement);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const action = resolveRovingKey(event.key, this.orientation);\n    if (!action) return;\n\n    const items = getRovingItems(this.el);\n    // activeElement reports the shallowest host, which is the item itself even\n    // when focus has been delegated into its shadow root.\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    if (currentIndex === -1) return;\n\n    const nextIndex = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex >= 0) {\n      event.preventDefault();\n      items[nextIndex].focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"toolbar\" aria-orientation={this.orientation}>\n        <slot onSlotchange={() => this.sync()} />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,uWAAuW,CAAC;;MC2BvX,SAAS,GAAA,MAAA;;;;;;IAIK,WAAW,GAAyB,YAAY;IAEzE,gBAAgB,GAAA;QACd,IAAI,CAAC,IAAI,EAAE;;AAGb;;;;;AAKG;IAEH,IAAI,GAAA;QACF,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,QAAA,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,EAAE;YACpF,SAAS,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC;;;AAI3D;;;;;;;AAOG;AAEH,IAAA,aAAa,CAAC,KAAiB,EAAA;AAC7B,QAAA,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,MAAqB,CAAC;;AAI1E,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,IAAI,KAAK,CAAC,gBAAgB;YAAE;AAE5B,QAAA,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC;AAC5D,QAAA,IAAI,CAAC,MAAM;YAAE;QAEb,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;;;QAGrC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAA4B,CAAC;QACzE,IAAI,YAAY,KAAK,EAAE;YAAE;QAEzB,MAAM,SAAS,GAAG,eAAe,CAC/B,MAAM,EACN,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,CAAC,EAC9B,YAAY,CACb;AACD,QAAA,IAAI,SAAS,IAAI,CAAC,EAAE;YAClB,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE;;;IAI5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,SAAS,EAAA,kBAAA,EAAmB,IAAI,CAAC,WAAW,EAAA,EACrD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAAA,CAAI,CACpC;;;;;;;;;;;;"}

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

@@ -0,0 +1,177 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { a as observeSidePosition, p as placePopover } from './place-popover-CC7AyfOt.js';
+import { K as Keys } from './keys-g4FlTDZx.js';
+
+const pfTooltipCss = () => `:host{display:inline-flex}:host([hidden]){display:none}.tooltip{inset:auto;margin:0;background:var(--pf-tooltip-bg);border:0;border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--pf-tooltip-text);font-size:var(--font-size-sm);line-height:1.4;max-width:260px;padding:var(--space-2) var(--space-3);width:max-content}.tooltip:popover-open{animation:pf-tooltip-in var(--duration-fast) var(--easing-decelerate)}@keyframes pf-tooltip-in{from{opacity:0}}@media (prefers-reduced-motion: reduce){.tooltip:popover-open{animation:none}}`;
+
+const PfTooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Preferred side. Reflected so the stylesheet can place the arrow. */
+    placement = 'top';
+    /** Milliseconds to wait before showing on hover or focus. */
+    delay = 120;
+    /** Force the tooltip open or closed, rather than letting it react. */
+    open;
+    /** Never show. Reflected so the stylesheet can select on it. */
+    disabled = false;
+    /** The side actually in use, which the arrow follows. */
+    resolvedSide = 'top';
+    showTimer;
+    stopObserving;
+    contentObserver;
+    componentDidLoad() {
+        this.watchContent();
+        this.syncDescription();
+        if (this.open)
+            this.show();
+    }
+    disconnectedCallback() {
+        this.clearTimer();
+        this.stopObserving?.();
+        this.contentObserver?.disconnect();
+    }
+    /**
+     * `slotchange` fires when the *assignment* changes, not when text inside an
+     * already-assigned node is edited — so a consumer setting
+     * `span.textContent = 'Changed'` would update the visible tooltip and leave
+     * the trigger's accessible description stale. That is a silent
+     * accessibility bug rather than a cosmetic one, which is what earns the
+     * observer.
+     */
+    watchContent() {
+        this.contentObserver?.disconnect();
+        this.contentObserver = new MutationObserver(() => this.syncDescription());
+        this.contentObserver.observe(this.el, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    /**
+     * The trigger's accessible description, copied as text.
+     *
+     * It cannot be an IDREF: `aria-describedby` does not cross a shadow
+     * boundary, and `ariaDescribedByElements` silently reads back empty when
+     * handed an element from a root the trigger does not own — both measured.
+     * `aria-description` is a plain string, so it crosses nothing, and the
+     * accessibility tree reports it identically to a same-root IDREF.
+     */
+    syncDescription() {
+        const trigger = this.el.firstElementChild;
+        if (!trigger)
+            return;
+        const slot = this.el.shadowRoot?.querySelector('slot[name="content"]');
+        const text = slot
+            ?.assignedNodes({ flatten: true })
+            .map((node) => node.textContent ?? '')
+            .join(' ')
+            .trim();
+        if (text)
+            trigger.setAttribute('aria-description', text);
+        else
+            trigger.removeAttribute('aria-description');
+    }
+    syncOpen(next) {
+        if (next)
+            this.show();
+        else if (next === false)
+            this.hide();
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="tooltip"]') ?? null;
+    }
+    clearTimer() {
+        if (this.showTimer !== undefined) {
+            window.clearTimeout(this.showTimer);
+            this.showTimer = undefined;
+        }
+    }
+    show() {
+        const panel = this.panel;
+        if (this.disabled || !panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        /*
+         * Positioning waits until the panel is open, because the side is chosen by
+         * how the panel's own size fits the viewport and a closed popover has no
+         * size at all.
+         */
+        this.stopObserving?.();
+        this.stopObserving = observeSidePosition({
+            getAnchor: () => this.el.firstElementChild,
+            getFloating: () => panel,
+            side: this.placement,
+            onChange: ({ side, left, top }) => {
+                this.resolvedSide = side;
+                placePopover(panel, left, top);
+            },
+        });
+    }
+    hide() {
+        this.clearTimer();
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    /** Controlled mode means the consumer decides; hover and focus do nothing. */
+    get isControlled() {
+        return this.open !== undefined;
+    }
+    scheduleShow = () => {
+        if (this.disabled || this.isControlled)
+            return;
+        this.clearTimer();
+        this.showTimer = window.setTimeout(() => this.show(), this.delay);
+    };
+    cancel = () => {
+        if (this.isControlled)
+            return;
+        this.hide();
+    };
+    handlePointerEnter() {
+        this.scheduleShow();
+    }
+    handlePointerLeave() {
+        this.cancel();
+    }
+    /** `focusin`/`focusout` rather than `focus`/`blur`, so they bubble. */
+    handleFocusIn() {
+        this.scheduleShow();
+    }
+    handleFocusOut() {
+        this.cancel();
+    }
+    /**
+     * Escape dismisses even in controlled mode. A tooltip covering the content
+     * you are trying to read is not something to need a prop for, and WAI-ARIA
+     * requires it of any tooltip.
+     */
+    handleKeyDown(event) {
+        if (event.key !== Keys.Escape)
+            return;
+        const panel = this.panel;
+        if (!panel?.matches(':popover-open'))
+            return;
+        event.stopPropagation();
+        this.hide();
+    }
+    render() {
+        return (h(Host, { key: 'e127ade47feddf8eb99405236f4f97f4fc7d9068' }, h("slot", { key: '28fc4e44a6bfe2060386f9454592b306bc1b2756', onSlotchange: () => this.syncDescription() }), h("div", { key: '6a2f2cc60d2ecc38188a7084cae5a86c496fabda', class: "tooltip", part: "tooltip", popover: "manual", role: "tooltip", "data-side": this.resolvedSide }, h("slot", { key: 'ef1b81321a49e69741bd8fe7f400838c399ccb18', name: "content", onSlotchange: () => this.syncDescription() }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfTooltip.style = pfTooltipCss();
+
+export { PfTooltip as pf_tooltip };
+//# sourceMappingURL=pf-tooltip.entry.js.map
+
+//# sourceMappingURL=pf-tooltip.entry.js.map

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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"}