Jbaker/beta release

.github/settings.yml

@@ -78,17 +78,13 @@ branches:
 labels:
   - name: auro-flight
     cat: default
-    color: 'fa23e4'
     description:
     process: Key filter for this repo
   - name: duplicate
-    color: '156fad'
     description: This Issue or Pull Request already exists
   - name: not-reviewed
-    color: '222222'
     description: Issue has not been reviewed by Auro team members
   - name: good first issue
-    color: '6bb7fb'
     description: Good for newcomers
     aliases:
     - beginner-friendly
@@ -99,83 +95,65 @@ labels:
     - starter-issue
     - starter
   - name: help wanted
-    color: '6bb7fb'
     description: Extra attention is needed, this user requires assistance to complete
       the work
   - name: released
-    color: 'A9A9A9'
     description: Completed work has been released
   - name: 'Status: Work In Progress'
     description: Issue or Pull Request work is in Progress
-    color: 'c0e585'
   - name: 'Status: Review Needed'
-    color: 'c0e585'
     description: Work is completed, user is requesting feedback
   - name: 'Status: Complete'
-    color: 'c0e585'
     description: Owner has completed work and considers it ready to be merged
   - name: 'Status: Blocked'
-    color: 'df0b37'
     description: Progress on the issue is Blocked, immediate attention is required
     aliases:
     - blocked
   - name: 'Abandoned'
-    color: '156fad'
     description: The author of this issue or Pull Request is not responding
     aliases:
     - wontfix
     - invalid
   - name: 'Type: Bug'
-    color: 'df0b37'
     description: Bug or Bug fixes
     aliases:
     - bug
   - name: 'Type: Feature'
-    color: 'ffd200'
     description: New Feature
     aliases:
     - enhancement
   - name: 'Type: Design'
-    color: 'ffd200'
     description: New Design
     aliases:
     - enhancement
   - name: 'Type: Content'
-    color: 'ffd200'
     description: Adding or editing content
     aliases:
     - enhancement
   - name: 'Type: Refactoring'
-    color: 'ffd200'
     description: A code change that neither fixes a bug nor adds a feature
     aliases:
     - refactor
   - name: 'Type: Documentation'
-    color: 'ffd200'
     description: Documentation only changes
     aliases:
     - documents
     - document
   - name: 'Type: CI'
-    color: 'ffd200'
     description: Changes to CI configuration files and scripts
     aliases:
     - ci
   - name: 'Type: Perf'
-    color: 'ffd200'
     description: Performance update to existing code
   - name: 'Question'
-    color: 'b83302'
     description: Further information is requested
     aliases:
     - question
   - name: 'Type: Dependencies'
-    color: 'ffd200'
     description: Pull requests that update a dependency file
     aliases:
     - dependencies
   - name: 'Type: UI Update'
-    color: 'ffd200'
     description: Changes to the user interface
     aliases:
     - dependencies

.npmignore

@@ -6,7 +6,7 @@ NOTICE
 
 .github/
 .gitignore
-.eslintrc
+eslint.config.mjs
 .stylelintrc
 
 coverage/

README.md

@@ -58,11 +58,12 @@ For the most up to date information on [UI development browser support](https://
 
 ## Install
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall.md) -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
 [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-flight/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-flight/actions/workflows/testPublish.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-flight?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-flight)
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-flight?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)
+
 ```shell
 $ npm i @aurodesignsystem/auro-flight
 ```
@@ -122,9 +123,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.3.0/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.8/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-flight@2.7.1/dist/auro-flight__bundled.js" type="module"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-flight@3.0.0-beta.1/dist/auro-flight__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

demo/api.html

@@ -20,7 +20,7 @@
       import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
       import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
 
-      fetch('/docs/api.md')
+      fetch('/demo/api.md')
         .then((response) => response.text())
         .then((text) => {
           const rawHtml = marked.parse(text);
@@ -33,6 +33,5 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-datetime@latest/dist/auro-datetime__bundled.js" type="module"></script>
   </body>
 </html>

demo/api.md

@@ -26,12 +26,18 @@ The auro-flight-header element displays airline, duration, and day change inform
 The auro-flight-main element renders the middle 'frame' of the auro-flight component with the auro-flightline.
 DoT: STATION SIZE AND COLOR MUST BE IDENTICAL TO DISCLOSURE SIZE AND COLOR!
 
+## Attributes
+
+| Attribute | Type     | Description                                      |
+|-----------|----------|--------------------------------------------------|
+| [da](#da)      | `String` | ISO 8601 time of arrival, e.g. `2022-04-13T12:30:00-04:00` |
+
 ## Properties
 
 | Property                   | Attribute                  | Type     | Default                               | Description                                      |
 |----------------------------|----------------------------|----------|---------------------------------------|--------------------------------------------------|
 | [arrivalStation](#arrivalStation)           | `arrivalStation`           | `String` |                                       | Station of arrival, e.g. `SEA`                   |
-| [arrivalTime](#arrivalTime)              | `arrivalTime`              | `String` |                                       | ISO 8601 time of arrival, e.g. `2022-04-13T12:30:00-04:00` |
+| [arrivalTime](#arrivalTime)              | `arrivalTime`              | `string` |                                       |                                                  |
 | [departureStation](#departureStation)         | `departureStation`         | `String` |                                       | Station of departure, e.g. `PVD`                 |
 | [departureTime](#departureTime)            | `departureTime`            | `String` |                                       | ISO 8601 time of departure, e.g. `2022-04-13T12:30:00-04:00` |
 | [duration](#duration)                 | `duration`                 | `Number` |                                       | String for the duration. `505`                   |
@@ -317,3 +323,24 @@ Explanation and use description.
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```scss
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-flight-footer-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-flight-header-days-changed-text-color: var(--ds-color-utility-error-default, #{$ds-color-utility-error-default});
+  --ds-auro-flight-header-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-flight-cancelled-station-text-color: var(--ds-color-utility-error-default, #{$ds-color-utility-error-default});
+  --ds-auro-flight-station-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-flight-time-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

demo/index.html

@@ -34,6 +34,5 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-datetime@latest/dist/auro-datetime__bundled.js" type="module"></script>
   </body>
 </html>

docs/api.md

@@ -24,12 +24,18 @@ The auro-flight-header element displays airline, duration, and day change inform
 The auro-flight-main element renders the middle 'frame' of the auro-flight component with the auro-flightline.
 DoT: STATION SIZE AND COLOR MUST BE IDENTICAL TO DISCLOSURE SIZE AND COLOR!
 
+## Attributes
+
+| Attribute | Type     | Description                                      |
+|-----------|----------|--------------------------------------------------|
+| `da`      | `String` | ISO 8601 time of arrival, e.g. `2022-04-13T12:30:00-04:00` |
+
 ## Properties
 
 | Property                   | Attribute                  | Type     | Default                               | Description                                      |
 |----------------------------|----------------------------|----------|---------------------------------------|--------------------------------------------------|
 | `arrivalStation`           | `arrivalStation`           | `String` |                                       | Station of arrival, e.g. `SEA`                   |
-| `arrivalTime`              | `arrivalTime`              | `String` |                                       | ISO 8601 time of arrival, e.g. `2022-04-13T12:30:00-04:00` |
+| `arrivalTime`              | `arrivalTime`              | `string` |                                       |                                                  |
 | `departureStation`         | `departureStation`         | `String` |                                       | Station of departure, e.g. `PVD`                 |
 | `departureTime`            | `departureTime`            | `String` |                                       | ISO 8601 time of departure, e.g. `2022-04-13T12:30:00-04:00` |
 | `duration`                 | `duration`                 | `Number` |                                       | String for the duration. `505`                   |

docs/partials/api.md

@@ -107,3 +107,11 @@ Explanation and use description.
 
 </auro-accordion>
 
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+

eslint.config.mjs

@@ -6,16 +6,16 @@ import { FlatCompat } from "@eslint/eslintrc";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all
 });
 
 export default [...compat.extends("@aurodesignsystem/eslint-config"), {
-    rules: {
-        "no-magic-numbers": ["error", {
-            ignore: [0, 1],
-            ignoreArrayIndexes: true,
-        }],
-    },
+  rules: {
+    "no-magic-numbers": ["error", {
+      ignore: [0, 1],
+      ignoreArrayIndexes: true,
+    }],
+  },
 }];

index.js

@@ -1,16 +1,4 @@
 import { AuroFlight } from './src/auro-flight.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-/**
- * Register Custom Element.
- * @param {Object} name - Name to use for custom element.
- * @returns {void}
- */
-export function registerComponent(name) {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroFlight {});
-  }
-}
-
-// Example custom registration
-// registerComponent('my-flight');
+RuntimeUtils.default.prototype.registerComponent('custom-flight', AuroFlight);