Merge branch 'staging/4.0' into feat/tools/knobs

Author: bennypowers

.changeset/clever-places-happen.md

@@ -0,0 +1,8 @@
+---
+"@patternfly/eslint-config": patch
+"@patternfly/create-element": patch
+"@patternfly/pfe-core": patch
+"@patternfly/pfe-tools": patch
+"@patternfly/elements": patch
+---
+updated dependencies

.changeset/free-ideas-fry.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-core": patch
+---
+`InternalsController`: corrected the types for aria IDL list attributes

.changeset/mighty-pigs-check.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": patch
+---
+
+Windows compatibility for various tools packages

.changeset/weak-turtles-act.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": patch
+---
+**Test Runner Config**: import the production version of Lit for tests, reducing
+console chatter during test runs

.changeset/wide-guests-speak.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/eslint-config-elements": major
+---
+Require `@typescript-eslint` ^8.0.0

.github/workflows/tests.yml

@@ -95,7 +95,7 @@ jobs:
     name: SSR Tests (Playwright)
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.44.0-jammy
+      image: mcr.microsoft.com/playwright:v1.45.1-jammy
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -265,5 +265,27 @@ jobs:
           close-previous: true
           title: "🧪 Tests are failing on main"
           body: "It looks like the build is currently failing on the main branch. See failed [action results](https://github.com/patternfly/patternfly-elements/actions/runs/${{ github.run_id }}) for more details."
+  
+  build-windows:
+    name: Verify that build runs on Windows
+    runs-on: windows-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Configures the node version used on GitHub-hosted runners
+      - name: Configure node version
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci --prefer-offline
+
+      - name: Build
+        id: build
+        run: npm run build
+
 
 

@types/colorjs.io/index.d.ts

@@ -5,28 +5,29 @@ import { debounce } from '../functions/debounce.js';
 import { Logger } from './logger.js';
 
 /**
- * @deprecated: use context, especially via `@patternfly/pfe-core/functions/context.js`;
+ * @deprecated use context, especially via `@patternfly/pfe-core/functions/context.js`;
  */
 export interface Options<E extends ReactiveElement> {
   properties: Partial<Record<keyof E, string | string[]>>;
   prefix?: string;
 }
 
 /**
- * @deprecated: use context, especially via `@patternfly/pfe-core/functions/context.js`;
+ * @deprecated use context, especially via `@patternfly/pfe-core/functions/context.js`;
  */
 export class CascadeController<E extends ReactiveElement> implements ReactiveController {
   private class: typeof ReactiveElement;
 
   private logger: Logger;
 
-  static instances = new WeakMap<ReactiveElement, CascadeController<ReactiveElement>>();
+  static instances: WeakMap<ReactiveElement, CascadeController<ReactiveElement>> =
+    new WeakMap<ReactiveElement, CascadeController<ReactiveElement>>();
 
-  mo = new MutationObserver(this.parse);
+  mo: MutationObserver = new MutationObserver(this.parse);
 
-  cache = new Map<string, string[]>();
+  cache: Map<string, string[]> = new Map<string, string[]>();
 
-  constructor(public host: E, public options?: Options<E>) {
+  constructor(public host: E, public options?: Options<E> | undefined) {
     this.class = host.constructor as typeof ReactiveElement;
     this.logger = new Logger(this.host);
     CascadeController.instances.set(host, this);
@@ -38,24 +39,25 @@ export class CascadeController<E extends ReactiveElement> implements ReactiveCon
     this.cascadeProperties = debounce(this.cascadeProperties, 1);
   }
 
-  hostUpdated() {
+  hostUpdated(): void {
     this.cascadeProperties();
   }
 
-  hostConnected() {
+  hostConnected(): void {
     this.mo.observe(this.host, { attributes: true, childList: true });
     this.cascadeProperties();
   }
 
-  hostDisconnected() {
+  hostDisconnected(): void {
     this.mo.disconnect();
   }
 
   /**
    * Handles the cascading of properties to nested components when new elements are added
    * Attribute updates/additions are handled by the attribute callback
+   * @param [nodeList=this.host.children]
    */
-  cascadeProperties(nodeList: HTMLCollection | NodeList = this.host.children) {
+  cascadeProperties(nodeList: HTMLCollection | NodeList = this.host.children): void {
     if (this.host.isConnected) {
       const selectors = this.cache.keys();
 
@@ -89,8 +91,10 @@ export class CascadeController<E extends ReactiveElement> implements ReactiveCon
    * Gets the configured attribute name for the decorated property,
    * falling back to the lowercased property name, and caches the attribute name
    * with it's designated child selectors for value-propagation on change
+   * @param propName
+   * @param cascade
    */
-  initProp(propName: string, cascade: string | string[]) {
+  initProp(propName: string, cascade: string | string[]): void {
     for (const nodeItem of [cascade].flat(Infinity).filter(Boolean) as string[]) {
       const { attribute } = this.class.getPropertyOptions(propName);
 
@@ -122,6 +126,8 @@ export class CascadeController<E extends ReactiveElement> implements ReactiveCon
 
   /**
    * Copy the named attribute to a target element.
+   * @param name attr name
+   * @param el element
    */
   private async _copyAttribute(name: string, el: Element) {
     this.logger.log(`copying ${name} to ${el}`);

core/pfe-core/controllers/cascade-controller.ts

@@ -8,10 +8,10 @@ export class CssVariableController implements ReactiveController {
   }
 
   private parseProperty(name: string) {
-    return name.substr(0, 2) !== '--' ? `--${name}` : name;
+    return name.substring(0, 2) !== '--' ? `--${name}` : name;
   }
 
-  getVariable(name: string) {
+  getVariable(name: string): string | null {
     return this.style.getPropertyValue(this.parseProperty(name)).trim() || null;
   }
 

core/pfe-core/controllers/css-variable-controller.ts

@@ -64,19 +64,19 @@ export class FloatingDOMController implements ReactiveController {
   }
 
   /** The crosswise alignment of the invoker on which to display the floating DOM */
-  get alignment() {
+  get alignment(): Alignment {
     return this.#alignment ?? 'center';
   }
 
   /** The side of the invoker on which to display the floating DOM */
-  get anchor() {
+  get anchor(): Anchor {
     return this.#anchor ?? '';
   }
 
   /**
    * When true, the floating DOM is visible
    */
-  get open() {
+  get open(): boolean {
     return this.#open;
   }
 
@@ -106,7 +106,7 @@ export class FloatingDOMController implements ReactiveController {
     };
   }
 
-  hostDisconnected() {
+  hostDisconnected(): void {
     this.#cleanup?.();
   }
 
@@ -167,8 +167,15 @@ export class FloatingDOMController implements ReactiveController {
     this.host.requestUpdate();
   }
 
-  /** Show the floating DOM */
-  async show({ offset, placement, flip, fallbackPlacements }: ShowOptions = {}) {
+  /**
+   * Show the floating DOM
+   * @param [options={}]
+   * @param options.offset
+   * @param options.placement
+   * @param options.flip
+   * @param options.fallbackPlacements
+   * */
+  async show({ offset, placement, flip, fallbackPlacements }: ShowOptions = {}): Promise<void> {
     const invoker = this.#invoker;
     const content = this.#content;
     if (!invoker || !content) {
@@ -187,7 +194,7 @@ export class FloatingDOMController implements ReactiveController {
   }
 
   /** Hide the floating DOM */
-  async hide() {
+  async hide(): Promise<void> {
     await this.host.updateComplete;
     while (this.#opening && !this.open) {
       await new Promise(requestAnimationFrame);