feat(pds-dropdown-menu): allow raw anchor and button elements

[pixelflips]

Description

Relaxes pds-dropdown-menu validation to allow raw <a> and <button> elements alongside pds-dropdown-menu-item components.

Why is this needed?

Consuming applications (like Kajabi-products) using Rails/Turbo need to use link_to helpers with framework-specific data attributes (data-method, data-remote, data-turbo-*) that require native browser event handling. These attributes don't work through Shadow DOM because frameworks like Rails UJS and Turbo can't intercept events on elements inside shadow roots.

This change allows developers to mix standard pds-dropdown-menu-item components with raw elements for edge cases that need native browser behavior.

Changes

• Validation: Changed from throwing an error to logging a warning for unexpected elements
• Allowed elements: <a> and <button> elements now pass validation alongside existing menu items
• Keyboard navigation: Raw elements are included in arrow key, Tab, Home, and End navigation
• Styling: Base styles applied via ::slotted() for raw elements
• Documentation: Added "Mixing Menu Items with Raw Elements" section with CSS examples

Technical Notes

• ::slotted() cannot style pseudo-classes like :hover or :focus, so consuming apps must add their own CSS for those states (documented with examples)
• Disabled state checked via aria-disabled="true" for anchors and disabled attribute for buttons
• Backward compatible - existing pds-dropdown-menu-item usage unchanged

Fixes DSS-134

Type of change

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

How Has This Been Tested?

• unit tests
• tested manually

Test Configuration:

• Pine versions: latest
• OS: macOS
• Browsers: Chrome

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally with my changes
• Design has QA'ed and approved this PR

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	6cc376d
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/6983f9ac4655c90008a0219c
😎 Deploy Preview	https://deploy-preview-661--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pixelflips]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request extends the pds-dropdown-menu component to support raw HTML anchor and button elements alongside component-based menu items. The changes include documentation guiding usage of mixed element types, SCSS styling for the raw elements, component logic updates to handle validation, keyboard navigation, and disabled states for both component and raw items, and corresponding test updates verifying the new functionality and modified error handling behavior.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely summarizes the primary change: allowing raw anchor and button elements in the pds-dropdown-menu component.
Description check	✅ Passed	The description comprehensively covers all required template sections including summary, motivation, changes, technical notes, type of change, testing approach, and completed checklist items.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/dropdown-menu-allow-raw-elements

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}