cc-link: Support for `outlined` style in button mode

[clara-layus-cc]

cc-link: Support for outlined style in button mode

Problem

Currently, cc-link in mode="button" always renders with a filled background. There's no built-in way to apply an outlined style like cc-button supports.

This forces developers to either use a cc-button with a click handler for navigation (losing native <a> semantics) or manually override styles to achieve the outlined look.

Proposed Solution

Add outlined support to cc-link when in button mode.

Option A: New mode value

/** @type {'default'|'button'|'button-outlined'|'subtle'} */
mode: { type: String }

Usage:

<cc-link mode="button-outlined" href="${url}">
  Go to dashboard
</cc-link>

Option B: Separate boolean attribute

/** @type {boolean} Renders button mode with outlined style (no fill, border only) */
outlined: { type: Boolean }

Usage:

<cc-link mode="button" outlined href="${url}">
  Go to dashboard
</cc-link>

Considerations

Option A: New mode value (button-outlined)

• ✅ Keeps the API simple with a single mode property
• ✅ No risk of invalid combinations (outlined without mode="button")
• ❌ Less flexible if other modes ever need outlined variants

Option B: Separate boolean attribute (outlined)

• ✅ Consistent with cc-button API which uses a separate outlined attribute
• ✅ More composable if other modes could benefit from outlined in the future
• ❌ Requires handling invalid combinations (e.g. mode="default" outlined)

Open Questions

1. Option A or Option B for the API design?
2. Should the outlined style support all button intents (primary, danger, etc.) if those are ever added to cc-link?
3. Should the styles be shared/aligned with cc-button outlined styles via common CSS custom properties?