Move theming support from Beta to Master

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 ./node_modules/.bin/npm-run-all preCommit test linters postinstall

README.md

@@ -58,15 +58,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### CSS Custom Property fallbacks
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
-
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
 ### Define dependency in project component
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
@@ -111,9 +102,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.1.1/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-table@2.1.5/dist/auro-table__bundled.js" type="module"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.1/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-table@2.2.0-beta.2/dist/auro-table__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

demo/api.html

@@ -3,7 +3,7 @@
   See LICENSE in the project root for license information.
 
   HTML in this document is standardized and NOT to be edited.
-  All demo code should be added/edited in ./demo/apiExamples.md
+  All demo code should be added/edited in ./demo/api.md
 
   With the exception of adding custom elements if needed for the demo.
 

demo/api.md

@@ -65,4 +65,21 @@ The `componentData` attribute is used to provide the table TD content for the ta
 
 The `nowrap` attribute, when applied, will prevent table content from word wrapping, i.e. all text content will be on a single line.
 
-</auro-accordion>
+</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-table-alt-row-container-color: var(--ds-color-container-secondary-default, #{$ds-color-container-secondary-default});
+  --ds-auro-table-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

demo/index.html

@@ -3,7 +3,7 @@
   See LICENSE in the project root for license information.
 
   HTML in this document is standardized and NOT to be edited.
-  All demo code should be added/edited in ./demo/demo.md
+  All demo code should be added/edited in ./demo/index.md
 
   With the exception of adding custom elements if needed for the demo.
 
@@ -32,7 +32,7 @@
     <script type="module">
       import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
       import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('/demo/demo.md')
+      fetch('/demo/index.md')
         .then((response) => response.text())
         .then((text) => {
           const rawHtml = marked.parse(text);
@@ -42,8 +42,10 @@
     </script>
     <script type="module" src="../index.js" data-demo-script="true"></script>
     <script type="module">
-      import {registerComponent} from '../index.js';
-      registerComponent('custom-table');
+      import { AuroTable } from './src/auro-table.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+      RuntimeUtils.default.prototype.registerComponent('custom-table', AuroTable);
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->

demo/demo.md → demo/index.md

@@ -1,7 +1,7 @@
 <!--
-The demo.md file is a compiled document. No edits should be made directly to this file.
+The index.md file is a compiled document. No edits should be made directly to this file.
 README.md is created by running `npm run build:docs`.
-This file is generated based on a template fetched from `./docs/partials/demo.md`
+This file is generated based on a template fetched from `./docs/partials/index.md`
 -->
 
 # Table
@@ -107,8 +107,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-table';
-registerComponent('custom-table');
+import { AuroTable } from './src/auro-table.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-table', AuroTable);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-table` element.

docs/partials/api.md

@@ -34,3 +34,10 @@ The `componentData` attribute is used to provide the table TD content for the ta
 The `nowrap` attribute, when applied, will prevent table content from word wrapping, i.e. all text content will be on a single line.
 
 </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 -->

docs/partials/demo.md → docs/partials/index.md

@@ -1,7 +1,7 @@
 <!--
-The demo.md file is a compiled document. No edits should be made directly to this file.
+The index.md file is a compiled document. No edits should be made directly to this file.
 README.md is created by running `npm run build:docs`.
-This file is generated based on a template fetched from `./docs/partials/demo.md`
+This file is generated based on a template fetched from `./docs/partials/index.md`
 -->
 
 # Table
@@ -81,8 +81,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-table';
-registerComponent('custom-table');
+import { AuroTable } from './src/auro-table.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-table', AuroTable);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-table` element.

eslint.config.mjs

@@ -0,0 +1,13 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+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
+});
+export default [...compat.extends("@aurodesignsystem/eslint-config")];

index.js

@@ -1,15 +1,4 @@
 import { AuroTable } from './src/auro-table.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}
- */
- const registerComponent = (name = 'custom-table') => {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroTable {});
-  }
-}
-
-export { registerComponent }
+RuntimeUtils.default.prototype.registerComponent('custom-table', AuroTable);