Create standalone Separator component with @as argument for dynamic element tags

[Copilot]

Implementation Plan for Issue #636

• Review the current Breadcrumb documentation to understand the Separator usage
• Create standalone Separator component in ember-primitives/src/components/separator.gts
• Export Separator from index.ts
• Update Breadcrumb to import and use the standalone Separator
• Create dedicated documentation for Separator at docs-app/public/docs/3-ui/separator.md
• Update Breadcrumb documentation to reference the standalone Separator
• Add example showing standalone Separator usage in Breadcrumb docs
• Add @as argument to Separator to support dynamic element tags
• Wire Breadcrumb to yield Separator with @as="li" pre-configured
• Update documentation to explain @as argument and proper HTML structure
• Update tests for new @as functionality
• Simplify Breadcrumb template to yield hash directly without let block
• Run code review to ensure quality

Original prompt

Implement #636

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[NullVoxPopuli]

@copilot make a separate <Separator> component, and on the <Separator> component's docs, mention how it is simply a semantic wrapper

[Copilot]

@copilot make a separate <Separator> component, and on the <Separator> component's docs, mention how it is simply a semantic wrapper

Done! Created a standalone <Separator> component with dedicated documentation. Changes in commits a649119 and 2465f7c:

• Created ember-primitives/src/components/separator.gts as a standalone component
• Added comprehensive documentation at docs-app/public/docs/3-ui/separator.md explaining it's a simple semantic wrapper
• Updated Breadcrumb to import the standalone Separator
• Added tests for the standalone component
• Breadcrumb still yields Separator for backward compatibility, but users can now import and use Separator directly

[NullVoxPopuli]

@copilot because the Separator can be used in lists, it should have an @as argument that allows you to specify the tag name. We can't have spans as siblings to li elements.

Also, the Breadcrumb component should wire up as to be li when yielding out the separator

[Copilot]

@copilot because the Separator can be used in lists, it should have an @as argument that allows you to specify the tag name. We can't have spans as siblings to li elements.

Also, the Breadcrumb c...

Done in commit 093f4da:

• Added @as argument to Separator component (defaults to "span", can be set to any tag)
• Breadcrumb now yields Separator with @as="li" pre-configured using WithBoundArgs
• Updated documentation to explain why @as="li" is important for valid HTML in lists
• All examples and tests updated to use @as="li" in list contexts

[NullVoxPopuli]

@copilot don't use let like you have, just yield the thing like how it was before

[Copilot]

Fixed in commit 6652df1. Removed the {{#let}} block and now yielding the hash directly like other components in the codebase (e.g., toggle-group).

[github-actions]

Project	Preview URL
Docs	https://8e47a2e4.ember-primitives.pages.dev

Logs