@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,323 @@
+import { Keys, observeSidePosition } from "@pitchfork-ui/core";
+import { placePopover } from "../../place-popover";
+import { h, Host } from "@stencil/core";
+/**
+ * A tooltip anchored to whatever is slotted into it.
+ *
+ * The panel is a `popover`, which is how it escapes an ancestor's `overflow`
+ * and stacking context — the thing `createPortal` does for the React
+ * component, and the only equivalent available from inside a shadow root.
+ * Verified: a popover opened from a shadow root inside an `overflow: hidden`
+ * container beats a `z-index: 999` sibling, where a plain absolute element in
+ * the same place loses.
+ *
+ * @slot - the trigger.
+ * @slot content - the tooltip's content. Its text also becomes the trigger's
+ * accessible description.
+ * @part tooltip - the floating panel.
+ */
+export class PfTooltip {
+    el;
+    /** 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 is() { return "pf-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Side",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "Side": {
+                            "location": "import",
+                            "path": "@pitchfork-ui/core",
+                            "id": "../core/dist/index.d.ts::Side",
+                            "referenceLocation": "Side"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preferred side. Reflected so the stylesheet can place the arrow."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'top'"
+            },
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Milliseconds to wait before showing on hover or focus."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delay",
+                "defaultValue": "120"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Force the tooltip open or closed, rather than letting it react."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Never show. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "resolvedSide": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "syncOpen"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerenter",
+                "method": "handlePointerEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "pointerleave",
+                "method": "handlePointerLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "focusin",
+                "method": "handleFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "handleFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-tooltip.js.map

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

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

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

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