diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 397d3ea..5d9e549 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -53,7 +53,7 @@ jdoe/cleanUpNpmApi/#80
## DO NOT git pull on a feature branch
-We ask that we keep our repo's history linear. This helps maintain a easy to understand version history and is crucial to our semantic versioning strategy. If you find yourself unable to push to the remote, please **DO NOT** use the `$ git pull` command. If this is discovered during a review, **the pull request will be rejected**. Please see the following instructions on rebasing below.
+We ask that we keep our repo's history linear. This helps maintain an easy to understand version history and is crucial to our semantic versioning strategy. If you find yourself unable to push to the remote, please **DO NOT** use the `$ git pull` command. If this is discovered during a review, **the pull request will be rejected**. Please see the following instructions on rebasing below.
### Rebase on main
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yaml b/.github/ISSUE_TEMPLATE/bug_report.yaml
index 3c7b61f..051f8bf 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yaml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yaml
@@ -17,7 +17,7 @@ body:
- type: checkboxes
id: platform
attributes:
- label: What devices platform(s) are you seeing the issue on?
+ label: On which platforms are you seeing the issue?
description: Select all that apply.
options:
- label: Desktop
diff --git a/.github/ISSUE_TEMPLATE/general-support.yaml b/.github/ISSUE_TEMPLATE/general-support.yaml
index 6c22e13..e959b41 100644
--- a/.github/ISSUE_TEMPLATE/general-support.yaml
+++ b/.github/ISSUE_TEMPLATE/general-support.yaml
@@ -1,5 +1,5 @@
name: Support Request
-description: Request for assistance with any issue related to the Aurora Design System
+description: Request for assistance with any issue related to the Auro Design System
type: "Support"
title: '...provide a title...'
projects: ["AlaskaAirlines/19"]
diff --git a/.github/ISSUE_TEMPLATE/story.yaml b/.github/ISSUE_TEMPLATE/story.yaml
index ad653b3..d9b165e 100644
--- a/.github/ISSUE_TEMPLATE/story.yaml
+++ b/.github/ISSUE_TEMPLATE/story.yaml
@@ -18,7 +18,7 @@ body:
id: context
attributes:
label: Additional context
- description: Add any other context or screenshots about the here.
+ description: Add any other context or screenshots about this story here.
- type: textarea
id: exit-criteria
attributes:
diff --git a/.github/workflows/dev-demo.yml b/.github/workflows/dev-demo.yml
index 0d683e6..965e9e9 100644
--- a/.github/workflows/dev-demo.yml
+++ b/.github/workflows/dev-demo.yml
@@ -4,7 +4,6 @@ on:
push:
branches:
- dev
- pull_request:
jobs:
action:
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 1501d07..973da00 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -10,8 +10,5 @@ on:
jobs:
action:
uses: AlaskaAirlines/auro-actions/.github/workflows/pull-request.yml@main
- with:
- component: 'hyperlink'
secrets:
- AURO_SURGE_TOKEN: ${{ secrets.AURO_SURGE_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
\ No newline at end of file
diff --git a/.github/workflows/release-candidate.yml b/.github/workflows/release-candidate.yml
new file mode 100644
index 0000000..a6673a0
--- /dev/null
+++ b/.github/workflows/release-candidate.yml
@@ -0,0 +1,12 @@
+name: RC Workflow
+on:
+ workflow_dispatch:
+ push:
+ branches:
+ - 'dev'
+
+jobs:
+ action:
+ uses: AlaskaAirlines/auro-actions/.github/workflows/release-candidate.yml@main
+ secrets:
+ GH_TOKEN: ${{ secrets.GH_TOKEN }}
\ No newline at end of file
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index ed7d3d1..af0b31b 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -5,6 +5,7 @@ on:
branches:
- 'rc/**'
- 'main'
+ workflow_dispatch:
jobs:
action:
diff --git a/apiExamples/external-appearance-inverse.html b/apiExamples/external-appearance-inverse.html
index 34c6cce..af7c819 100644
--- a/apiExamples/external-appearance-inverse.html
+++ b/apiExamples/external-appearance-inverse.html
@@ -2,7 +2,7 @@
+ href="https://auro.alaskaair.com">
external target
but same domain
diff --git a/apiExamples/external.html b/apiExamples/external.html
index 3263841..fedfcd7 100644
--- a/apiExamples/external.html
+++ b/apiExamples/external.html
@@ -1,7 +1,7 @@
Example link with
+ href="https://auro.alaskaair.com">
external target
but same domain
diff --git a/apiExamples/wcss-hyperlink-nav.html b/apiExamples/wcss-hyperlink-nav.html
new file mode 100644
index 0000000..f47b433
--- /dev/null
+++ b/apiExamples/wcss-hyperlink-nav.html
@@ -0,0 +1 @@
+Alaska Airlines
diff --git a/apiExamples/wcss-hyperlink-ondark.html b/apiExamples/wcss-hyperlink-ondark.html
new file mode 100644
index 0000000..5edc260
--- /dev/null
+++ b/apiExamples/wcss-hyperlink-ondark.html
@@ -0,0 +1 @@
+Alaska Airlines
diff --git a/apiExamples/wcss-hyperlink.html b/apiExamples/wcss-hyperlink.html
new file mode 100644
index 0000000..df0324d
--- /dev/null
+++ b/apiExamples/wcss-hyperlink.html
@@ -0,0 +1 @@
+Alaska Airlines
diff --git a/apiExamples/wcss-role-button.html b/apiExamples/wcss-role-button.html
new file mode 100644
index 0000000..0de783f
--- /dev/null
+++ b/apiExamples/wcss-role-button.html
@@ -0,0 +1 @@
+Book now
diff --git a/demo/html5-only.html b/demo/html5-only.html
new file mode 100644
index 0000000..dcbd00c
--- /dev/null
+++ b/demo/html5-only.html
@@ -0,0 +1,59 @@
+
+
+
+
+
For situations where the <auro-hyperlink> web component cannot be used, Web Core Style Sheets (WCSS) provides CSS classes that can be applied to a native HTML <a> element to achieve a similar visual appearance. This approach gives you design-system-aligned styling without requiring a custom element.
+
+Available CSS classes
+
+
WCSS includes the .hyperlink class and its modifiers as part of the essentials module. To use them, import the essentials stylesheet:
Use the .hyperlink--nav modifier for navigation-style links:
+
+
+
+
+
+
+
+ See code
+
+
+
+
+
+
+What you lose without auro-hyperlink
+
+
While WCSS classes replicate the visual styling of auro-hyperlink, they provide CSS only. The following functionality built into the auro-hyperlink web component is not available when using plain HTML with WCSS classes:
+
+URL sanitization and HTTPS enforcement
+
+
auro-hyperlink automatically blocks dangerous URL protocols (javascript:, data:, vbscript:) and upgrades URLs to https:. A plain <a> element with WCSS classes will render whatever href value is provided, including potentially dangerous URLs. You must sanitize URLs manually.
+
+Automatic external link and new window icons
+
+
auro-hyperlink detects target="_blank" links and automatically displays the appropriate icon — an external-link icon for cross-domain links or a new-window icon for same-domain links. With WCSS classes, you must add these icons manually.
+
+Automatic rel security attributes
+
+
auro-hyperlink automatically adds rel="noOpener noReferrer" to external links opened in new tabs to prevent reverse tabnapping. With a plain <a> element, you must remember to add these attributes yourself on every external link.
+
+Referrer policy management
+
+
auro-hyperlink provides a referrerpolicy attribute that sets strict-origin-when-cross-origin and adjusts the rel attribute accordingly. With WCSS, you must manage the referrerpolicy and rel attributes manually and keep them in sync.
+
+ARIA attribute transportation
+
+
When auro-hyperlink is used inside other web components, it automatically transports ARIA attributes from the host element to the inner <a> element across the shadow DOM boundary. With a plain <a> element, this is not a concern outside of shadow DOM, but it also means you cannot use WCSS-styled anchors as drop-in replacements inside Auro component compositions that expect this behavior.
+
+
For example, when an auro-hyperlink is placed in an auro-popover trigger slot, the popover component sets aria-description on the trigger to announce the popover content to screen readers. auro-hyperlink automatically transports that aria-description down to the inner <a> element in its shadow DOM, so screen readers announce it correctly. A plain <a class="hyperlink"> element would work as a popover trigger outside of shadow DOM, but it cannot participate in this cross-shadow-DOM ARIA contract — and as the auro-popover documentation notes, using a hyperlink as a trigger is discouraged because the tap event on mobile will fire both the popover and the navigation. The recommended pattern is to use auro-hyperlink with role="button" instead.
+
+Call-to-action (CTA) variant
+
+
auro-hyperlink provides a type="cta" mode that renders a fully styled button-link powered by auro-button, with support for primary, secondary, tertiary, ghost, and flat variants, fluid width, and inverse appearance. The .auro_roleButton WCSS class provides only basic button styling and does not support these variants.
+
+Focus delegation
+
+
auro-hyperlink uses delegatesFocus to ensure proper focus forwarding within its shadow DOM. This is a web component concern and does not apply to plain <a> elements, but it means WCSS-styled anchors cannot replicate the focus behavior of auro-hyperlink when used inside shadow DOM contexts.
+
+Summary
+
+
+
+
+
Feature
+
WCSS .hyperlink
+
auro-hyperlink
+
+
+
+
+
Design-system-aligned styling
+
Yes
+
Yes
+
+
+
Dark background support
+
Yes (.hyperlink--ondark)
+
Yes (appearance="inverse")
+
+
+
Navigation variant
+
Yes (.hyperlink--nav)
+
Yes (type="nav")
+
+
+
URL sanitization
+
No
+
Automatic
+
+
+
HTTPS enforcement
+
No
+
Automatic
+
+
+
External / new window icons
+
No
+
Automatic
+
+
+
Automatic rel attributes
+
No
+
Automatic
+
+
+
CTA button variants
+
No
+
Full variant support
+
+
+
ARIA attribute transportation
+
No
+
Automatic
+
+
+
Multi-brand theming
+
Partial (CSS only)
+
Full (design tokens + component logic)
+
+
+
+
+Recommendation
+
+
Use auro-hyperlink whenever possible. Fall back to WCSS .hyperlink classes only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML.
\ No newline at end of file
diff --git a/docs/pages/why-hyperlink.md b/docs/pages/why-hyperlink.md
new file mode 100644
index 0000000..89d3e25
--- /dev/null
+++ b/docs/pages/why-hyperlink.md
@@ -0,0 +1,158 @@
+Why auro-hyperlink?
+
The native HTML <a> anchor element provides basic linking, but it falls short for the needs of a secure, accessible, and branded application. auro-hyperlink bridges those gaps with a purpose-built component designed for real-world use.
+
+Security
+
+
Native anchor elements accept any value in the href attribute, including potentially dangerous protocols like javascript:, data:, and vbscript:. Developers must remember to sanitize URLs manually every time.
+
+
auro-hyperlink provides:
+
+
+
URL sanitization — Dangerous protocols (javascript:, data:, vbscript:) are blocked automatically. Only safe protocols (https:, tel:, sms:, mailto:) are rendered
+
HTTPS enforcement — Non-localhost URLs are automatically upgraded to https: to prevent accidental insecure links
+
Referrer policy control — The referrerpolicy attribute sets strict-origin-when-cross-origin to limit referrer information sent with requests
+
Automatic rel attributes — External links opened in a new tab (target="_blank") automatically receive rel="noOpener noReferrer" to prevent reverse tabnapping attacks
+
+
+Accessibility
+
+
Native anchor elements require manual ARIA attribute management, and focus behavior is inconsistent across browsers and contexts.
+
+
auro-hyperlink provides:
+
+
+
ARIA attribute transportation — Accessibility attributes set on the host element are automatically transported to the inner <a> element inside the shadow DOM, ensuring screen readers receive the correct semantics
+
Delegated focus — delegatesFocus is enabled on the shadow root, so focus is properly forwarded to the interactive element inside the component
+
Focus-visible styling — Clear, high-contrast focus indicators are applied only on keyboard navigation, following the :focus-visible pattern
+
Role support — The role="button" attribute allows the hyperlink to function as a button for screen readers when used for actions rather than navigation
+
Reduced motion support — Animations and transitions respect prefers-reduced-motion
+
+
+
By contrast, a plain <a> element inside a shadow DOM would require manual focus management and custom ARIA handling that is easy to get wrong.
+
+External link indicators
+
+
Native anchors provide no visual indication of whether a link navigates to an external site or opens a new window. Users are left without context about what will happen when they click.
+
+
auro-hyperlink handles this automatically:
+
+
+
External link icon — When target="_blank" points to a domain different from the current site, an external-link icon is displayed
+
New window icon — When target="_blank" points to the same domain, a new-window icon is displayed instead
+
Contextual rel attributes — The rel attribute is set appropriately based on whether the link is internal or external, with or without a referrer policy
+
+
+Call-to-action variant
+
+
HTML has no native concept of a link styled as a prominent call-to-action button. Building one from an <a> element requires custom CSS and careful attention to accessibility.
+
+
auro-hyperlink supports this with the type="cta" attribute, providing:
+
+
+
Button-styled links — Full button UI powered by auro-button while retaining anchor element semantics and navigation behavior
+
Multiple variants — primary, secondary, tertiary, ghost, and flat variants match the design system's button styles
+
Fluid width — The fluid attribute makes the CTA span the full width of its container
+
Appearance support — Light and dark theme support via appearance="inverse"
+
+
+Navigation variant
+
+
Native anchors have no built-in concept of navigation-specific link styling (e.g., for menus or nav bars).
+
+
auro-hyperlink supports this with the type="nav" attribute, providing:
+
+
+
Navigation-specific styling with underline-on-focus behavior
+
Active tab state management
+
Consistent appearance within navigation contexts
+
+
+URL protocol support
+
+
Native anchors support tel:, mailto:, and sms: links, but offer no safeguards against misuse of other protocols.
Safe protocols — tel:, sms:, and mailto: links are rendered as-is
+
Dangerous protocols — javascript:, data:, and vbscript: links are blocked entirely, rendering no interactive element
+
Relative URLs — Relative paths are resolved against the current page and upgraded to https:
+
+
+Design system integration
+
+
A native <a> element cannot be styled to match a design system across brands without significant custom CSS. Shadow DOM encapsulation makes this even harder.
+
+
auro-hyperlink is built with the Alaska Airlines Auro Design System:
+
+
+
Consistent visual language with other Auro components
+
Light and dark theme support (appearance="default" or appearance="inverse")
+
CSS custom properties for color, focus, and hover states
+
::part(link) and ::part(targetIcon) selectors for targeted styling