Merge branch 'main' into fix/tools/dev-server-config

Author: zeroedin

.changeset/test-helper-allupdates.md

@@ -0,0 +1,10 @@
+---
+"@patternfly/pfe-tools": minor
+---
+**Test Helpers**: Added `allUpdates` test helper, which waits until an element 
+completely finishes updating.
+
+```js
+const element = await fixture(html`<my-el></my-el>`);
+await allUpdates(element);
+```

.github/workflows/commitlint.yml

@@ -30,6 +30,9 @@ jobs:
         with:
           fetch-depth: 0
 
+      # https://github.com/wagoid/commitlint-github-action/issues/560#issuecomment-1277659864
+      - run: rm tsconfig.json
+
       - uses: wagoid/commitlint-github-action@v5
         id: commitlint
         continue-on-error: true
@@ -58,48 +61,8 @@ jobs:
           script: |
             const results = ${{ steps.commitlint.outputs.results }};
             const titleGood = ${{ steps.prTitle.outputs.success }};
-
-            const totalErrors = results.reduce((a, r) => a + r.errors.length, 0);
-            const totalWarnings = results.reduce((a, r) => a + r.warnings.length, 0);
-
-            const header = `
-            ## 👕 Commitlint Problems for this PR: ${!titleGood ? '' : `
-
-            **The PR title conforms to conventional commit style**
-
-            👉 **Make sure the PR is squashed into a single commit using the PR title** 👈`}
-
-            🔎   found ${totalErrors} errors, ${totalWarnings} warnings
-            ℹ️   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
-            `;
-
-            const comment = results.reduce((acc, result) => {
-              if (!result.errors.length && !result.warnings.length) {
-                return acc;
-              }
-
-              const [firstLine, ...rest] = result.message.split('\n');
-
-              const body = rest.join('\n').trim();
-              const icon = result.errors.length ? '❌' : '⚠️';
-              const hash = result.hash.substring(0, 8);
-
-              return `${acc} ${!body.length ? '\n\n' : `
-
-            <details><summary>`}
-            ${hash} - ${firstLine} ${!body.length ? '\n\n' : `\
-            </summary>
-
-            ${body}
-
-            </details>
-
-            `}${result.errors.map(error => `
-            - ❌ ${error}`).join('')} ${result.warnings.map(warn => `
-            - ⚠️ ${warn}`).join('')}`;
-            }, header);
-
-            core.setOutput('comment', comment);
+            const { format } = await import('${{ github.workspace }}/scripts/format-commitlint-messages.js');
+            return format({ core, results, titleGood });
 
       - name: Notify PR
         if: ${{ steps.commitlint.outcome == 'failure' && steps.prTitle.outputs.success == 'false' }}
@@ -109,7 +72,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           header: commitlint
           message: |
-            ${{ steps.format.outputs.comment }}
+            ${{ steps.format.outputs.result }}
 
       - name: Fail Job on Error
         if: ${{ steps.commitlint.outcome == 'failure' && steps.prTitle.outputs.success == 'false' }}

.github/workflows/tests.yml

@@ -79,8 +79,10 @@ jobs:
     strategy:
       matrix:
         node:
-          - 18
-          - 19
+          - '18'
+          - '19'
+          # https://github.com/TypeStrong/ts-node/issues/1997
+          # - '20'
     if: |
       github.event_name == 'workflow_dispatch'
       ||   github.event_name == 'push'

core/pfe-core/controllers/floating-dom-controller.ts

@@ -3,8 +3,7 @@ import type { ReactiveController, ReactiveElement } from 'lit';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 import type { Options as Offset } from '@floating-ui/core/src/middleware/offset';
 
-
-export { Placement };
+export type { Placement };
 
 import {
   autoUpdate,

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

@@ -12,7 +12,7 @@ export class InternalsController implements ReactiveController, ARIAMixin {
   declare ariaChecked: ARIAMixin['ariaChecked'];
   declare ariaColCount: ARIAMixin['ariaColCount'];
   declare ariaColIndex: ARIAMixin['ariaColIndex'];
-  declare ariaColIndexText: ARIAMixin['ariaColIndexText'];
+  declare ariaColIndexText: string | null;
   declare ariaColSpan: ARIAMixin['ariaColSpan'];
   declare ariaCurrent: ARIAMixin['ariaCurrent'];
   declare ariaDisabled: ARIAMixin['ariaDisabled'];
@@ -36,7 +36,7 @@ export class InternalsController implements ReactiveController, ARIAMixin {
   declare ariaRoleDescription: ARIAMixin['ariaRoleDescription'];
   declare ariaRowCount: ARIAMixin['ariaRowCount'];
   declare ariaRowIndex: ARIAMixin['ariaRowIndex'];
-  declare ariaRowIndexText: ARIAMixin['ariaRowIndexText'];
+  declare ariaRowIndexText: string | null;
   declare ariaRowSpan: ARIAMixin['ariaRowSpan'];
   declare ariaSelected: ARIAMixin['ariaSelected'];
   declare ariaSetSize: ARIAMixin['ariaSetSize'];

core/pfe-core/package.json

@@ -50,8 +50,8 @@
     "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.2.3",
-    "lit": "2.6.1"
+    "@floating-ui/dom": "^1.2.6",
+    "lit": "^2.7.2"
   },
   "repository": {
     "type": "git",

docs/components/components.md

@@ -17,6 +17,9 @@
 
 <header class="band">
   <h1>{{element.title}}</h1>
+
+  {{ element.description | safe}}
+
 </header>
 
 {% renderFile element.docsTemplatePath, element %}

docs/main.css

@@ -78,12 +78,7 @@ strong {
 }
 
 header.band {
-  background-color:
-    var(
-      --pf-c-page__main-section--BackgroundColor,
-      var(
-        --pf-c-page__main-section--m-light-100--BackgroundColor,
-        var(--pf-global--BackgroundColor--150, #fafafa)));
+  background-color: var(--pf-global--BackgroundColor--100, #fff);
   padding: var(--pf-global--spacer--md, 1rem) var(--pf-global--spacer--md, 1rem);
   box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)));
 }
@@ -278,11 +273,33 @@ header.band h1 {
   margin-top: 0;
 }
 
+.example-preview {
+  padding: var(--pf-global--spacer--md, 1rem);
+  background-color: var(--pf-global--BackgroundColor--100, #fff);
+  border-bottom: var(--pf-global--BorderWidth--sm, 1px) solid var(--pf-global--BorderColor--300, #f0f0f0);
+  transition: width .2s ease-in-out;
+}
+
+section.api.band.api-properties dl {
+  padding: var(--pf-global--spacer--md, 1rem);
+  background-color: var(--pf-global--BackgroundColor--100, #fff);
+}
+
+section.api.band.api-properties table {
+  background-color: var(--pf-global--BackgroundColor--100, #fff);
+}
+
 main.basic,
 main.blog {
   margin-top: 6.5rem;
   margin-bottom: 3.75rem;
   flex-grow: 1;
+  background-color:
+  var(
+    --pf-c-page__main-section--BackgroundColor,
+    var(
+      --pf-c-page__main-section--m-light-100--BackgroundColor,
+      var(--pf-global--BackgroundColor--150, #fafafa)));
 }
 
 #home-title img {
@@ -673,7 +690,6 @@ th, td {
 }
 
 code:not([class*="language-"]) {
-  background-color: rgba(27,31,35,.05);
   padding: .2em .4em;
   border-radius: 6px;
   font-family: "Overpass Mono", monospace;
@@ -702,10 +718,38 @@ code {
 
 .html-example {
   display: flex;
+  padding-block: 6px;
+}
+
+.html-example:hover summary {
+  color: var(--pf-c-expandable-section__toggle--hover--Color, var(--pf-global--link--Color--hover, #004080));
 }
 
 .html-example summary {
+  display: flex;
   cursor: pointer;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--pf-c-expandable-section__toggle--Color, var(--pf-global--link--Color, #06c));
+}
+
+.html-example > summary::-webkit-details-marker,
+.html-example > summary::marker {
+  display: none;
+}
+
+.html-example > summary::before {
+  content: "";
+  display: inline-block;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 256 512' aria-hidden='true' role='img' style='vertical-align: -0.125em;'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'%3E%3C/path%3E%3C/svg%3E");
+  background-size: 1rem 1rem;
+  height: 1rem;
+  width: 1rem;
+  transition: all .2s ease-in;
+}
+
+.html-example[open] > summary::before {
+  transform: rotate(90deg);
 }
 
 .html-example p:empty {

elements/package.json

@@ -68,7 +68,7 @@
   },
   "wireit": {
     "build": {
-      "command": "ttsc -b . --pretty",
+      "command": "tspc -b . --pretty",
       "dependencies": [
         "analyze"
       ]

elements/pf-accordion/docs/pf-accordion.md

@@ -84,4 +84,4 @@
 
 {% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
 
-{% renderCssParts %}{% endrenderCssParts %}
+{% renderCssParts %}{% endrenderCssParts %}