RC #384

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -43,7 +43,7 @@ body:
   - type: input
     id: version
     attributes:
-      label: Which version of auro-templates do you have installed?
+      label: Which version of auro-button do you have installed?
   - type: markdown
     attributes:
       value: >

.github/ISSUE_TEMPLATE/design_handoff.yaml

@@ -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.

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,11 +2,53 @@
 
 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
 
-## Checklist:
+## Review Checklist:
 
 - [ ] My update follows the CONTRIBUTING guidelines of this project
 - [ ] I have performed a self-review of my own update
 
+<details>
+<summary>
+RC Checklist
+</summary>
+
+## Testing Checklist:
+
+### Browsers
+
+[Browsers Support Guide](https://auro.alaskaair.com/support/browsersSupport)
+
+[Dev demo link](https://alaskaairlines.github.io/auro-button/)
+
+Android
+
+- [ ] Chrome
+- [ ] Firefox
+
+ iOS
+
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari
+
+Desktop
+
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari
+- [ ] Edge
+
+### Scenarios
+
+- [ ] Validated linked issues with issue reporting team
+- [ ] Test coverage report review
+
+[Framework playground ](https://github.com/AlaskaAirlines/auro-framework-playground)
+
+- [ ] Next React
+- [ ] SvelteKit
+
+</details><br>
 **By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.**
 
 _Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission._

.github/settings.yml

@@ -0,0 +1,49 @@
+repository:
+  # See https://docs.github.com/en/free-pro-team@latest/rest/reference/repos#edit for all available settings.
+  # See https://github.com/apps/settings for app settings
+
+  # A URL with more information about the repository
+  homepage: https://auro.alaskaair.com/components/auro/button
+
+  # A comma-separated list of topics to set on the repository
+  topics: auro, design-system, custom-element
+
+  # Either `true` to enable issues for this repository, `false` to disable them.
+  has_issues: true
+
+  # Either `true` to enable the wiki for this repository, `false` to disable it.
+  has_wiki: false
+
+  # Either `true` to enable downloads for this repository, `false` to disable them.
+  has_downloads: true
+
+  # Updates the default branch for this repository.
+  default_branch: dev
+
+  # Either `true` to enable automatic deletion of branches on merge, or `false` to disable
+  delete_branch_on_merge: true
+
+  # Either `true` to allow squash-merging pull requests, or `false` to prevent
+  # squash-merging.
+  allow_squash_merge: false
+
+  # Either `true` to allow merging pull requests with a merge commit, or `false`
+  # to prevent merging pull requests with merge commits.
+  allow_merge_commit: true
+
+  # Either `true` to allow rebase-merging pull requests, or `false` to prevent
+  # rebase-merging.
+  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:
+  # * `pull` - can pull, but not push to or administer this repository.
+  # * `push` - can pull and push, but not administer this repository.
+  # * `admin` - can pull, push and administer this repository.
+  # * `maintain` - Recommended for project managers who need to manage the repository without access to sensitive or destructive actions.
+  # * `triage` - Recommended for contributors who need to proactively manage issues and pull requests without write access.
+  - name: auro-team
+    permission: admin
+  - name: nonauroteamwriteaccess
+    permission: push

.github/workflows/add-project.yml

@@ -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

.husky/pre-commit

@@ -1,5 +1,6 @@
 # .husky/pre-commit
 
 npm run build:version
+git add .
 npx auro test
 npx lint-staged

.nvmrc

@@ -0,0 +1 @@
+v22

README.md

@@ -40,17 +40,22 @@ If the desired appearance of the `<auro-button>` is to be placed in the reverse
 When the UI requires the use of multiple buttons within the same space, with the use of the [Auro Web Core Style Sheets](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_containedButtons), and the `auro_containedButtons`.
 <!-- 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-button element should be used in situations where users may:
 
+* submit a form
+* begin a new task
+* trigger a new UI element to appear to the page
+* specify a new or next step in a process
 <!-- 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-button/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-button/actions/workflows/testPublish.yml)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-button/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-button/actions/workflows/release.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-button?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-button)
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-button?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)
@@ -61,17 +66,10 @@ $ npm i @aurodesignsystem/auro-button
 
 <!-- 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-button>` component.
+Defining the dependency within each project that is using the `<auro-button>` 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) -->
@@ -81,19 +79,8 @@ import "@aurodesignsystem/auro-button";
 ```
 
 <!-- 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-button>Primary</auro-button>
-<auro-button variant="secondary">Secondary</auro-button>
-<auro-button variant="tertiary">Tertiary</auro-button>
-<auro-button variant="ghost">Ghost</auro-button>
-```
-<!-- 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.
@@ -104,21 +91,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-button 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-button element should be used in situations where users may:
-
-* submit a form
-* begin a new task
-* trigger a new UI element to appear to the page
-* specify a new or next step in a process
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## API Code Examples
-
-### Default auro-button
+## Basic Example
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -131,31 +104,38 @@ The auro-button element should be used in situations where users may:
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Development
+## Custom Component Registration for Version Management
 
-<!-- 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.
+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.
 
-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.
+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:END -->
-
-### Start development environment
-
-<!-- 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-button>Primary</custom-button>
+  <custom-button variant="secondary">Secondary</custom-button>
+  <custom-button variant="tertiary">Tertiary</custom-button>
+  <!-- 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-button.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-button>Primary</custom-button>
+<custom-button variant="secondary">Secondary</custom-button>
+<custom-button variant="tertiary">Tertiary</custom-button>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

demo/api.html

@@ -47,6 +47,7 @@
     </script>
     <script type="module" data-demo-script="true">
       import { initExamples } from './api.min.js';
+
       initExamples();
     </script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

demo/button-sheet.html

@@ -367,6 +367,7 @@ <h4 class="text-3xl font-bold w-full text-center pt-8">XS</h4>
     </main>
     <script type="module" data-demo-script="true">
       import { initExamples } from './index.min.js';
+
       initExamples();
     </script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

demo/form.html

@@ -38,6 +38,7 @@
 
 <script type="module" data-demo-script="true">
   import { initExamples } from './index.js';
+
   initExamples();
 </script>
 <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

demo/icon-sheet.html

@@ -267,6 +267,7 @@ <h4 class="text-3xl font-bold w-full text-center pt-8">XS</h4>
     </main>
     <script type="module" data-demo-script="true">
       import { initExamples } from './index.min.js';
+
       initExamples();
     </script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

demo/index.html

@@ -35,6 +35,7 @@
     </script>
     <script type="module" data-demo-script="true">
       import { initExamples } from './index.min.js';
+
       initExamples();
     </script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>