AlaskaAirlines · rmenner · Nov 19, 2025 · Nov 4, 2025 · Oct 24, 2025 · Nov 5, 2025
@@ -30,8 +30,8 @@ body:
       placeholder: |
         1. Go to '...'
         2. Click on '....'
-        3. Scroll down to '....'
-
+        3. Scroll down to '....'
+
         Result:
         '... What happened that you didn't expect? ...'
   - type: textarea

@@ -0,0 +1,46 @@
+name: Design Handoff
+description: Handoff design work to the development team.
+type: "Task"
+title: 'Design Handoff: [Feature Name]'
+projects: ["AlaskaAirlines/19"]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Design Description
+      description: A clear and concise description of what is new or changed in the design.
+  - type: input
+    id: figma
+    attributes:
+      label: Link to Figma file version.
+      description: This link should be to a specific version of the Figma file that is ready for development.
+  - type: textarea
+    id: issues
+    attributes:
+      label: Blocking Issues and Questions
+      description: List any issues and questions that are blocking the handoff acceptance.
+  - type: textarea
+    id: nonblockers
+    attributes:
+      label: Non-Blocking Issues and Questions
+      description: List any unresolved issues and questions that are not blocking the handoff acceptance.
+  - type: textarea
+    id: tech
+    attributes:
+      label: Engineering Implementation Notes
+      description: List any initial ideas for how engineering will implement the design.
+  - type: checkboxes
+    id: review
+    attributes:
+      label: Points of Review
+      description: This is a list of items that the development team should review before accepting handoff.
+      options:
+        - label: The design work is part of a Story or Support ticket and linked as a parent issue.
+        - label: The linked Figma file is the correct version.
+        - label: Design is consistent with the design system.
+        - label: UX is fully explained and documented.
+        - label: Responsive design has been considered.
+        - label: VoiceOver Experience has been considered.
+        - label: Other accessibility considerations have been discussed.
+        - label: All CSS rule values are based on current design tokens.
+        - label: There are no design features which require feature additions or changes have not been approved by Product.
@@ -18,7 +18,7 @@ repository:
   has_downloads: true
 
   # Updates the default branch for this repository.
-  default_branch: main
+  default_branch: dev
 
   # Either `true` to enable automatic deletion of branches on merge, or `false` to disable
   delete_branch_on_merge: true
@@ -33,8 +33,8 @@ repository:
 
   # Either `true` to allow rebase-merging pull requests, or `false` to prevent
   # rebase-merging.
-  allow_rebase_merge: true
-
+  allow_rebase_merge: true
+
 # See https://docs.github.com/en/rest/reference/teams#add-or-update-team-repository-permissions for available options
 teams:
   # The permission to grant the team. Can be one of:

@@ -2,9 +2,8 @@ name: Add Project to Issue
 
 on:
   issues:
-    types: [opened]
-
-
+    types: [opened]
+
 jobs:
   action:
     uses: AlaskaAirlines/auro-actions/.github/workflows/add-project.yml@main
@@ -0,0 +1 @@
+v22
@@ -28,17 +28,21 @@ The following sections are editable by making changes to the following files:
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
+## Use Cases
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `<auro-hyperlink>` elements should be used in situations where users may:
 
+* stand-alone link element for navigation
+* inline link element for navigation
+* optional role as button when hyperlink UI is needed for submit action
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
-[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-hyperlink/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-hyperlink/actions/workflows/testPublish.yml)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-hyperlink/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-hyperlink/actions/workflows/release.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-hyperlink?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-hyperlink)
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-hyperlink?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
 ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -49,17 +53,10 @@ $ npm i @aurodesignsystem/auro-hyperlink
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### Design Token CSS Custom Property dependency
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Define dependency in project component
+### Define Dependency in Project
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
-Defining the component dependency within each component that is using the `<auro-hyperlink>` component.
+Defining the dependency within each project that is using the `<auro-hyperlink>` component.
 
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -68,18 +65,9 @@ Defining the component dependency within each component that is using the `<auro
 import "@aurodesignsystem/auro-hyperlink";
 ```
 
-<!-- AURO-GENERATED-CONTENT:END -->
-**Reference component in HTML**
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-hyperlink>No href supplied</auro-hyperlink><br>
-Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
-```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Use CDN
+### Use CDN
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
@@ -90,20 +78,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-hyperlink use cases
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The `<auro-hyperlink>` elements should be used in situations where users may:
-
-* stand-alone link element for navigation
-* inline link element for navigation
-* optional role as button when hyperlink UI is needed for submit action
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## API Code Examples
-
-### Default auro-hyperlink
+## Basic Example
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -114,31 +89,36 @@ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</aur
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Development
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
-In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
+## Custom Component Registration for Version Management
 
-Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
+The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Start development environment
+When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
-Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
+However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
 
-```shell
-$ npm run dev
-```
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
 
-Open [localhost:8000](http://localhost:8000/)
-
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+<!-- add custom registration content here -->
 <!-- AURO-GENERATED-CONTENT:END -->
+<div class="exampleWrapper exampleWrapper--flex">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ./apiExamples/custom.html -->
+  <custom-hyperlink>No href supplied</custom-hyperlink><br>
+  Welcome to <custom-hyperlink href="https://www.alaskaair.com">Alaska Airlines</custom-hyperlink>.
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
 
-### Testing
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\auro-hyperlink.test.js` for the tests for this component. Run `npm run test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
-
-<!-- AURO-GENERATED-CONTENT:END -->
+```html
+<custom-hyperlink>No href supplied</custom-hyperlink><br>
+Welcome to <custom-hyperlink href="https://www.alaskaair.com">Alaska Airlines</custom-hyperlink>.
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
@@ -4,12 +4,6 @@
 <p>
   <auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
 </p>
-<p>
-  <auro-hyperlink relative href="javascript:;">JavaScript w/relative attr not supported</auro-hyperlink>
-</p>
 <p>
   <auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
 </p>
-<p>
-  <auro-hyperlink relative href="data:text/plain;charset=utf-8,Hello%20World!">Data type w/relative attr not supported</auro-hyperlink>
-</p>
@@ -1 +1 @@
-Example of a <auro-hyperlink relative href="#">relative URL</auro-hyperlink>.
+Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>.
@@ -1,5 +1,5 @@
 <!-- Web component example -->
-Example of a <auro-hyperlink relative href="#">relative URL</auro-hyperlink>
+Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>
 
 <!-- Output code in shadow DOM element -->
-Example of a <a class="hyperlink" href="#"><slot>relative URL</slot></a>
+Example of a <a class="hyperlink" href="https://auro.alaskaair.com/components/auro/hyperlink/api#"><slot>relative URL</slot></a>
@@ -2,40 +2,33 @@
 
 `<auro-hyperlink>` is a component that wraps an HTML `<a>` element, providing additional styling and behavior.
 
-
 ### Properties & Attributes
 
-| Properties | Attributes | Type | Default | Description  |
-| --- | --- | --- | --- | --- |
-role |  | String |  | Defines ARIA roles; currently supports `button` for extended experiences.
-safeUri |  |  |  | Returns a safe URI based on the provided `href` and `relative` parameters.<br>If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br>Otherwise, it returns an empty string.
-includesDomain |  |  |  | Checks whether the provided URI (if available) includes the 'http' protocol.<br>If the URI is truthy, it examines whether it contains 'http'.<br>Otherwise, it returns false.
-appearance | appearance | string | 'default' | Defines whether the component will be on lighter or darker backgrounds.
-download | download | boolean | false | If true, the linked resource will be downloaded when the hyperlink is clicked.
-relative | relative | boolean | false | If true, the auto URL re-write feature will be disabled.
-ondark | ondark | boolean | false | DEPRECATED - use `appearance` instead.
-variant | variant | string | "primary" | Sets button variant option.
-href | href | string |  | Defines the URL of the linked page.
-rel | rel | string |  | Defines the relationship between the current document and the linked document.
-target | target | string |  | Defines where to open the linked document.
-type | type | string |  | Defines the type of hyperlink; accepts `nav` or `cta`.
-fluid | fluid | boolean |  | If true and `type="cta"`, the hyperlink will have a fluid-width UI.
-referrerpolicy | referrerpolicy | boolean |  | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests.
-
+| Properties     | Attributes     | Modifiers | Type    | Default     | Description                                                                                                                                                              |
+| -------------- | -------------- | --------- | ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| appearance     | appearance     |           | string  | "default"   | Defines whether the component will be on lighter or darker backgrounds.                                                                                                  |
+| download       | download       |           | boolean | false       | If true, the linked resource will be downloaded when the hyperlink is clicked.                                                                                           |
+| fluid          | fluid          |           | boolean |             | If true and `type="cta"`, the hyperlink will have a fluid-width UI.                                                                                                      |
+| href           | href           |           | string  |             | Defines the URL of the linked page.                                                                                                                                      |
+| layout         | layout         |           | string  | {'default'} | Defines the language of an element.                                                                                                                                      |
+| ondark         | ondark         |           | boolean | false       | DEPRECATED - use `appearance` instead.                                                                                                                                   |
+| referrerpolicy | referrerpolicy |           | boolean |             | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests.                                                                  |
+| rel            | rel            |           | string  |             | Defines the relationship between the current document and the linked document.                                                                                           |
+| role           |                |           | String  |             | Defines ARIA roles; currently supports `button` for extended experiences.                                                                                                |
+| safeUri        |                | readonly  | string  |             | Returns a safe URI based on the provided `href`.<br>If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br>Otherwise, it returns an empty string. |
+| target         | target         |           | string  |             | Defines where to open the linked document.                                                                                                                               |
+| type           | type           |           | string  |             | Defines the type of hyperlink; accepts `nav` or `cta`.                                                                                                                   |
+| variant        | variant        |           | string  | "primary"   | Sets button variant option.                                                                                                                                              |
 
 ### Methods
 
-| Name | Parameters | Return | Description |
-| --- | --- | --- | --- |
-register | `name` (string) - The name of element that you want to register to. |  | This will register this element with the browser.
-
+| Name     | Parameters                                                          | Return | Description                                       |
+| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
+| register | `name` (string) - The name of element that you want to register to. |        | This will register this element with the browser. |
 
 ### CSS Shadow Parts
 
-| Name | Description |
-| --- | --- |
-link | Allows styling to be applied to the `a` element.
-targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink.
-
-
-
+| Name       | Description                                                                  |
+| ---------- | ---------------------------------------------------------------------------- |
+| link       | Allows styling to be applied to the `a` element.                             |
+| targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink. |
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Example of a <auro-hyperlink relative href="#">relative URL</auro-hyperlink>.
		Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>.