Feat/trail 39 popover component

[Hannahbird]

Summary

Fixes: #

Related Tickets: TRAIL-39 https://jira.atlassian.krum.io/browse/TRAIL-39?atlOrigin=eyJpIjoiNWFjMjg5MmZlZWE3NDUwN2JjMzcxNTM0YzBlM2RiODciLCJwIjoiaiJ9

Adds a new web component to the trailhand-ui library. The popover appears on click of a slotted trigger element, accepts arbitrary content via slots, supports four placement positions, optional title/subtitle header, a stay-open mode, and automatic dark mode support via the existing CSS variable system.

---

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 📚 Documentation update
• 🎨 Style/UI change
• ♻️ Refactor (no functional changes)
• ⚡ Performance improvement
• 🧪 Test update
• 🔧 Build/CI configuration
• 🧹 Chore (dependency updates, cleanup, etc.)

---

Changes Made

Primary Changes

• Added Lit Element component with open, stay-open, placement, title, and subtitle properties
• Component accepts slotted content via a trigger slot (the clickable element) and a default slot (popover body)
• Optional heading named slot allows fully custom header markup as an alternative to title/subtitle props
• Dispatches popover-open and popover-close custom events (bubbles: true, composed: true)
• Dark mode supported automatically via :host-context([data-theme='dark']), no extra consumer configuration needed

Secondary/Collateral Changes

• Added src/components/popover/index.ts barrel export
• Added src/components/popover/popover.stories.ts with stories: Default, WithTitle, StayOpen, PlacementTop, PlacementRight, PlacementLeft, WithForm, DarkMode
• Added src/components/popover/popover.test.ts with 18 unit tests across 5 describe groups
• Updated src/index.ts to export the new component
• Updated dev/main.ts with three live examples (bottom, top, stay-open with form content)

---

Technical Notes

Files Modified

Implementation Details

• Positioning uses position: absolute on the popover content relative to the position: relative host, no external floating UI library dependency, consistent with the existing action-menu pattern
• Click-outside detection follows the same document.addEventListener('click', ...) pattern as action-menu, registered in connectedCallback and cleaned up in disconnectedCallback
• Header rendering is conditional, _renderHeader() returns nothing when neither title nor the heading slot is populated, so no empty space or border is rendered for bare content popovers
• Placement animations use transform offsets per placement direction (e.g. translateY(-6px) → translateY(0)) so the popover slides in from the correct side
• stay-open simply guards the click-outside handler, the trigger click still toggles the popover normally

---

Testing

How to Test

Test Coverage

• Unit tests added/updated
• Integration tests added/updated
• E2E tests added/updated
• Manual testing completed

Browsers Tested

• Chrome
• Firefox
• Safari
• Edge

---

Potential Regressions

---

Screenshots / Videos

Before	After

---

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code in hard-to-understand areas
• I have updated documentation as needed
• My changes generate no new warnings or errors
• I have tested my changes locally
• Any dependent changes have been merged and published

---

Additional Context

[johnlcos]

LGTM