@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-toaster.js","sourceRoot":"","sources":["../../../src/components/pf-toaster/pf-toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { LiveRegionVariant } from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type PfToasterPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n\nexport interface PfToastOptions {\n  variant?: LiveRegionVariant;\n  heading?: string;\n  description?: string;\n  /** Milliseconds before it dismisses itself. `0` keeps it until dismissed. */\n  duration?: number;\n  /** Render the dismiss button. Defaults to true. */\n  dismissable?: boolean;\n}\n\ninterface Entry extends PfToastOptions {\n  id: string;\n}\n\n/**\n * The region toasts appear in, and the queue behind them.\n *\n * This is the one place the elements layer takes options rather than child\n * elements, against the rule in `WEB-COMPONENTS-PLAN.md` §2.1 — because a\n * toast is not data the consumer is rendering, it is an event that happened.\n * React expresses that with a context provider and a module-level `toast()`;\n * the equivalent for a custom element is a method on the region, since a\n * consumer calling `toast()` three times from an event handler cannot\n * reasonably be asked to maintain a list of children for it.\n *\n * Declarative use still works: anything slotted in is laid out in the stack\n * alongside the queue, which is how a notification that is part of the page\n * rather than a response to an action is placed here.\n *\n * The region itself is not a live region. Each `pf-notification` is one\n * already, so marking the container as well would announce every toast twice.\n *\n * @slot - notifications placed in the stack declaratively.\n * @part stack - the positioned container.\n */\n@Component({\n  tag: 'pf-toaster',\n  styleUrl: 'pf-toaster.css',\n  shadow: true,\n})\nexport class PfToaster {\n  @Element() el!: HTMLElement;\n\n  /** Which corner the stack sits in. Reflected; the stylesheet positions on it. */\n  @Prop({ reflect: true }) placement: PfToasterPlacement = 'top-right';\n\n  /** Auto-dismiss delay for toasts that do not set their own. `0` disables it. */\n  @Prop() duration = 4000;\n\n  /** Fires when a toast has left, with the id `toast()` returned. */\n  @Event() pfToastDismiss!: EventEmitter<{ id: string }>;\n\n  @State() entries: Entry[] = [];\n\n  private timers = new Map<string, ReturnType<typeof setTimeout>>();\n  private sequence = 0;\n\n  disconnectedCallback() {\n    for (const timer of this.timers.values()) clearTimeout(timer);\n    this.timers.clear();\n  }\n\n  /**\n   * Shows a toast and returns its id.\n   *\n   * Newest first, matching the React provider, so a stack in a top corner\n   * grows downwards away from the corner.\n   */\n  @Method()\n  async toast(options: PfToastOptions = {}): Promise<string> {\n    const id = `pf-toast-${(this.sequence += 1)}`;\n    this.entries = [{ ...options, id }, ...this.entries];\n\n    const duration = options.duration ?? this.duration;\n    if (duration > 0) {\n      this.timers.set(\n        id,\n        setTimeout(() => {\n          this.timers.delete(id);\n          void this.dismiss(id);\n        }, duration),\n      );\n    }\n\n    return id;\n  }\n\n  /** Dismisses one toast by the id `toast()` returned. */\n  @Method()\n  async dismiss(id: string): Promise<void> {\n    this.clearTimer(id);\n    /*\n     * Typed structurally rather than as `HTMLPfNotificationElement`: that\n     * interface is generated by the build, so naming it here makes the first\n     * build of a new element fail on the type it is about to produce.\n     */\n    const element = this.el.shadowRoot?.querySelector(`pf-notification[data-id=\"${id}\"]`) as\n      (HTMLElement & { dismiss(): Promise<void> }) | null;\n\n    // Play the exit animation if it is still mounted; remove it either way.\n    if (element) await element.dismiss();\n    this.remove(id);\n  }\n\n  /** Dismisses everything currently showing. */\n  @Method()\n  async dismissAll(): Promise<void> {\n    await Promise.all(this.entries.map((entry) => this.dismiss(entry.id)));\n  }\n\n  private clearTimer(id: string) {\n    const timer = this.timers.get(id);\n    if (timer) clearTimeout(timer);\n    this.timers.delete(id);\n  }\n\n  private remove(id: string) {\n    if (!this.entries.some((entry) => entry.id === id)) return;\n    this.entries = this.entries.filter((entry) => entry.id !== id);\n    this.pfToastDismiss.emit({ id });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stack\" part=\"stack\">\n          {this.entries.map((entry) => (\n            <pf-notification\n              key={entry.id}\n              data-id={entry.id}\n              variant={entry.variant ?? 'info'}\n              heading={entry.heading}\n              description={entry.description}\n              dismissable={entry.dismissable ?? true}\n              /*\n               * The notification owns its own exit, and tells us when it is\n               * over. Removing it on the click instead would cut the animation\n               * off at the first frame.\n               */\n              onPfDismiss={() => this.remove(entry.id)}\n            ></pf-notification>\n          ))}\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,23 @@
+: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;
+}

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

@@ -0,0 +1,131 @@
+import { getRovingItems, resolveListMove, resolveRovingKey, syncRovingTabIndex, } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A group of controls that is one tab stop from outside and navigated
+ * internally with the arrow keys.
+ *
+ * Items are matched in the light DOM, so a native `button`, `a[href]` or form
+ * control works with no ceremony. A custom element is not a native control and
+ * has to opt in with `data-toolbar-item` — `<pf-button data-toolbar-item>`.
+ * Focusing it still reaches the real button inside, because `pf-button`
+ * delegates focus.
+ *
+ * @slot - the toolbar's controls, and any `pf-toolbar-separator` between them.
+ */
+export class PfToolbar {
+    el;
+    /** 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 is() { return "pf-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-toolbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-toolbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfToolbarOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "PfToolbarOrientation": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-toolbar/pf-toolbar.tsx",
+                            "id": "src/components/pf-toolbar/pf-toolbar.tsx::PfToolbarOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout and arrow-key axis. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "orientation",
+                "methodName": "sync"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "handleFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-toolbar.js","sourceRoot":"","sources":["../../../src/components/pf-toolbar/pf-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIjF;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,SAAS;IACT,EAAE,CAAe;IAE5B,+EAA+E;IACtD,WAAW,GAAyB,YAAY,CAAC;IAE1E,gBAAgB;QACd,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED;;;;;OAKG;IAEH,IAAI;QACF,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAE5C,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,EAAE,CAAC;YACrF,SAAS,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAED;;;;;;;OAOG;IAEH,aAAa,CAAC,KAAiB;QAC7B,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,MAAqB,CAAC,CAAC;IAC3E,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,gBAAgB;YAAE,OAAO;QAEnC,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7D,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACtC,2EAA2E;QAC3E,sDAAsD;QACtD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAA4B,CAAC,CAAC;QAC1E,IAAI,YAAY,KAAK,CAAC,CAAC;YAAE,OAAO;QAEhC,MAAM,SAAS,GAAG,eAAe,CAC/B,MAAM,EACN,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAC9B,YAAY,CACb,CAAC;QACF,IAAI,SAAS,IAAI,CAAC,EAAE,CAAC;YACnB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS,sBAAmB,IAAI,CAAC,WAAW;YACrD,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,GAAI,CACpC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/pf-toolbar-separator/pf-toolbar-separator.css

@@ -0,0 +1,19 @@
+:host {
+  background: var(--pf-toolbar-separator);
+  flex-shrink: 0;
+  margin: var(--space-1);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* A horizontal toolbar is divided by a vertical hairline, and vice versa. */
+:host([orientation='horizontal']) {
+  align-self: stretch;
+  width: 1px;
+}
+
+:host([orientation='vertical']) {
+  height: 1px;
+}

package/dist/collection/components/pf-toolbar-separator/pf-toolbar-separator.js

@@ -0,0 +1,59 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A rule between groups of toolbar controls.
+ *
+ * `orientation` describes the toolbar it sits in, not the rule's own shape: a
+ * horizontal toolbar gets a vertical hairline. `pf-toolbar` sets it on every
+ * separator it contains, so a consumer does not have to — and cannot leave one
+ * pointing the wrong way.
+ */
+export class PfToolbarSeparator {
+    /** 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 });
+    }
+    static get is() { return "pf-toolbar-separator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-toolbar-separator.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-toolbar-separator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfToolbarSeparatorOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "PfToolbarSeparatorOrientation": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-toolbar-separator/pf-toolbar-separator.tsx",
+                            "id": "src/components/pf-toolbar-separator/pf-toolbar-separator.tsx::PfToolbarSeparatorOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The axis of the toolbar this sits in. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-toolbar-separator.js.map

package/dist/collection/components/pf-toolbar-separator/pf-toolbar-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-toolbar-separator.js","sourceRoot":"","sources":["../../../src/components/pf-toolbar-separator/pf-toolbar-separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;;;GAOG;AAMH,MAAM,OAAO,kBAAkB;IAC7B,0EAA0E;IACjD,WAAW,GAAkC,YAAY,CAAC;IAEnF,MAAM;QACJ,OAAO,EAAC,IAAI,qDAAC,IAAI,EAAC,WAAW,sBAAmB,IAAI,CAAC,WAAW,GAAI,CAAC;IACvE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1,51 @@
+:host {
+  display: inline-flex;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/*
+ * `popover` puts this in the top layer, so it escapes any ancestor's overflow
+ * and stacking context. left/top come from the observer.
+ */
+/*
+ * `inset: auto` and `margin: 0` are essential, not tidying -- see
+ * `src/place-popover.ts`, which sets the same two inline and explains the
+ * measurement. They are declared in both places deliberately: here so the
+ * cascade carries them for the whole life of the panel, and inline so a panel
+ * is still positioned where this stylesheet has not been applied.
+ */
+.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 {
+  /* Fade in from the side it sits on. */
+  animation: pf-tooltip-in var(--duration-fast) var(--easing-decelerate);
+}
+
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-tooltip-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip:popover-open {
+    animation: none;
+  }
+}

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