perf: update to use restructured WCA doc build

AlaskaAirlines · Nov 13, 2024 · 2600537 · 2600537
1 parent ec5b33f
commit 2600537
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 4 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -44,6 +44,12 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 |            | Default slot for the menu content.   |
 | [helpText](#helpText) | Defines the content of the helpText. |
 | [label](#label)    | Defines the content of the label.    |
+
+## CSS Shadow Parts
+
+| Part       | Description                 |
+|------------|-----------------------------|
+| [helpText](#helpText) | Apply CSS to the help text. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples

diff --git a/demo/api.min.js b/demo/api.min.js
@@ -3322,6 +3322,7 @@ var tokensCss$1 = i$5`:host{--ds-auro-select-placeholder-text-color: var(--ds-co
  * @event auroSelect-ready - Notifies that the component has finished initializing.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
+ * @csspart helpText - Apply CSS to the help text.
  */
 
 // build the component class
@@ -3838,7 +3839,8 @@ class AuroSelect extends r {
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           common
           matchWidth
-          chevron>
+          chevron
+          part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
             ${this.value ? this.displayValue : u`<span class="placeholder">${this.placeholder}</span>`}
           </span>

diff --git a/demo/index.min.js b/demo/index.min.js
@@ -3270,6 +3270,7 @@ var tokensCss$1 = i$5`:host{--ds-auro-select-placeholder-text-color: var(--ds-co
  * @event auroSelect-ready - Notifies that the component has finished initializing.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
+ * @csspart helpText - Apply CSS to the help text.
  */
 
 // build the component class
@@ -3786,7 +3787,8 @@ class AuroSelect extends r {
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           common
           matchWidth
-          chevron>
+          chevron
+          part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
             ${this.value ? this.displayValue : u`<span class="placeholder">${this.placeholder}</span>`}
           </span>

diff --git a/docs/api.md b/docs/api.md
@@ -34,3 +34,9 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 |            | Default slot for the menu content.   |
 | `helpText` | Defines the content of the helpText. |
 | `label`    | Defines the content of the label.    |
+
+## CSS Shadow Parts
+
+| Part       | Description                 |
+|------------|-----------------------------|
+| `helpText` | Apply CSS to the help text. |
diff --git a/package.json b/package.json
@@ -143,7 +143,7 @@
     "build:test": "npm-run-all test linters",
     "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
     "build:ci": "npm-run-all sweep build:release",
-    "build:api": "wca analyze 'src/auro-select.js' --outFiles docs/api.md",
+    "build:api": "wca 'scripts/wca/*' 'src/auro-select-*.js' --outFiles docs/api.md",
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:docs",
     "build:docs": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/generateDocs.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",

diff --git a/scripts/wca/auro-select.js b/scripts/wca/auro-select.js
@@ -0,0 +1,10 @@
+import { AuroSelect } from '../../src/auro-select.js';
+
+/**
+ * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
+ */
+class AuroSelectWCA extends AuroSelect {}
+
+if (!customElements.get("auro-select")) {
+  customElements.define("auro-select", AuroSelectWCA);
+}
diff --git a/src/auro-select.js b/src/auro-select.js
@@ -43,6 +43,7 @@ import tokensCss from "./tokens-css.js";
  * @event auroSelect-ready - Notifies that the component has finished initializing.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
+ * @csspart helpText - Apply CSS to the help text.
  */
 
 // build the component class
@@ -559,7 +560,8 @@ export class AuroSelect extends LitElement {
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           common
           matchWidth
-          chevron>
+          chevron
+          part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
             ${this.value ? this.displayValue : html`<span class="placeholder">${this.placeholder}</span>`}
           </span>