docs(html): add bills-data-grid tooltip placement reproduction (issue #2289)

[amir-ba]

Summary

Adds packages/components/src/html/bills-data-grid.html — a minimum-reproduction page served by the Stencil dev-server that recreates the bills/invoices card UI from the issue screenshot using only Scale components.

What this PR adds

A self-contained HTML example showing:

1. Correct placement — scale-tooltip wrapping a single scale-icon-process-sepa-transaction element (SEPA direct-debit icon). For a single-element trigger getBoundingClientRect() returns one rect, so the tooltip anchors 10 px below the trigger — exactly the distance default. No bug here.
2. Bug explanation callout — embedded <aside class="bug-note"> explaining that the bug manifests when the trigger is a multiline inline text span: the full combined bounding box is used instead of the per-line box under the cursor, causing a ~65 px offset.

Playwright validation

Ran against the pre-built Stencil www output at http://localhost:3335/bills-data-grid.html:

trigger:                 { top: 319, bottom: 355, height: 36, width: 36 }
tooltip:                 { top: 365, ariaHidden: false }
distanceFromTriggerBottom: 10   ← default distance prop, correct
triggerLineRects:          1    ← single element, not multiline
sepaIconDefined:           true ← scale-icon-process-sepa-transaction renders

Root cause (diagnosis, not fixed here)

See issue #2289 and my comment for the full write-up.

In packages/components/src/components/tooltip/tooltip.tsx:

// connectedCallback
this.triggerEl = children[0] as HTMLElement;   // ← first child only

// update()
computePosition(this.triggerEl, this.tooltipEl, ...)
// uses triggerEl.getBoundingClientRect() → full combined box for multiline inline text

Fix direction: replace getBoundingClientRect() with the last client rect of the trigger element (getClientRects()) so the tooltip anchors to the line actually under the cursor.

Closes #2289

[Copilot]

Pull request overview

Adds a new Stencil dev-server HTML reproduction page to demonstrate the tooltip placement behavior described in issue #2289, using a bills/invoices-style card UI built from Scale components.

Changes:

• Added bills-data-grid.html as a self-contained reproduction page rendering a bills “data grid” card UI.
• Included a pre-opened scale-tooltip example for validating correct placement with a single-element icon trigger.
• Added an inline “bug note” callout explaining why the tooltip offset occurs for multiline inline text triggers.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.