feat!: rename all elements to pf-v5-* prefix

.changeset/rename-all-elements.md

@@ -0,0 +1,12 @@
+---
+"@patternfly/elements": major
+---
+
+All elements are now versioned with a `pf-v5-` prefix.
+
+This is a breaking change. Update your HTML to use the new element names,
+e.g. `<pf-button>` becomes `<pf-v5-button>`, `<pf-accordion>` becomes
+`<pf-v5-accordion>`, etc.
+
+CSS custom properties are also renamed from `--pf-c-*` to `--pf-v5-c-*`.
+Global tokens (`--pf-global--*`) are unchanged.

README.md

@@ -82,6 +82,33 @@ npm run test:ci
 npm run start
 ```
 
+## LGTM Tradition
+
+On this team, PR approvals come with a creative twist — reviewers leave a **backronym** for LGTM (four words starting with L, G, T, M). See [lgtms.md](lgtms.md) for the full collection.
+
+### Top 10 Leaderboard
+
+| Author | Count |
+|--------|-------|
+| @kylebuch8 | 193 |
+| @mwcz | 85 |
+| @starryeyez024 | 61 |
+| @zeroedin | 23 |
+| @Djfaucette | 18 |
+| @markcaron | 15 |
+| @nikkimk | 14 |
+| @bennypowers | 13 |
+| @adamjohnson | 12 |
+| @brianferry | 9 |
+
+### Hall of Fame
+
+- **"Lilliputians: Gulliver's Tiny Mates"** — @kylebuch8
+- **"Lonely Graves Time Misrecollects"** — @zeroedin
+- **"Lemongrass Ginger Tofu Marinade"** — @zeroedin
+- **"Lousy Guitarist, Terrific Mandolinist"** — @mwcz
+- **"Loki Grabs Thor's Mjolnir"** — @markcaron
+
 ## Support
 
 Though we have tested and verified general usability within these frameworks, PatternFly Elements makes no guarantees about compatibility within specific sites and applications. Please test accordingly.

core/pfe-core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @patternfly/pfe-core
 
+## 5.0.8
+### Patch Changes
+
+- 7e31427: `SlotController`: fixed `getSlotted()` returning empty arrays in
+  certain timing scenarios.
+
 ## 5.0.7
 ### Patch Changes
 

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

@@ -213,13 +213,26 @@ export class SlotController implements SlotControllerPublicAPI {
    */
   public getSlotted<T extends Element = Element>(...slotNames: string[] | [null]): T[] {
     if (!slotNames.length || slotNames.length === 1 && slotNames.at(0) === null) {
-      return (this.#slotRecords.get(SlotController.default)?.elements ?? []) as T[];
+      return (this.#getAssignedElements(SlotController.default)) as T[];
     } else {
       return slotNames.flatMap(slotName =>
-        this.#slotRecords.get(slotName ?? SlotController.default)?.elements ?? []) as T[];
+        this.#getAssignedElements(slotName ?? SlotController.default)) as T[];
     }
   }
 
+  /**
+   * Returns the assigned elements for a given slot name, falling back to
+   * querying the slot element directly if the slot record hasn't been
+   * initialized yet.
+   */
+  #getAssignedElements(slotId: string | symbol): Element[] {
+    const record = this.#slotRecords.get(slotId);
+    if (record) {
+      return record.elements;
+    }
+    return this.#getSlotElement(slotId)?.assignedElements?.() ?? [];
+  }
+
   /**
    * Returns a boolean statement of whether or not any of those slots exists in the light DOM.
    * @param names The slot names to check.

core/pfe-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/pfe-core",
-  "version": "5.0.7",
+  "version": "5.0.8",
   "license": "MIT",
   "description": "PatternFly Elements Core Library",
   "customElements": "custom-elements.json",

docs/_includes/_nav.njk

@@ -15,24 +15,24 @@
           </picture>
         </a>
       </div>
-      <pf-dropdown id="docs-versions-dropdown">
-        <pf-button slot="toggle"
+      <pf-v5-dropdown id="docs-versions-dropdown">
+        <pf-v5-button slot="toggle"
                    variant="control"
                    icon="caret-down"
-                   icon-set="fas">Versions</pf-button>
-        <pf-dropdown-menu slot="menu">
+                   icon-set="fas">Versions</pf-v5-button>
+        <pf-v5-dropdown-menu slot="menu">
           {% for version in versions %}
           {%- if version.current -%}
             {%- set prefix = '' -%}
           {%- else -%}
             {%- set prefix = '/' + version.slug -%}
           {%- endif %}
-          <pf-dropdown-item href="{{ prefix }}{{ page.url }}" {{ 'disabled' if version.current }}>
+          <pf-v5-dropdown-item href="{{ prefix }}{{ page.url }}" {{ 'disabled' if version.current }}>
             {{ version.label }}
-          </pf-dropdown-item>
+          </pf-v5-dropdown-item>
           {% endfor %}
-        </pf-dropdown-menu>
-      </pf-dropdown>
+        </pf-v5-dropdown-menu>
+      </pf-v5-dropdown>
     </div>
   </div>
 

docs/_includes/layout-blog-index.njk

@@ -9,7 +9,7 @@ layout: layout-base.njk
 
   <div class="posts">
     {% for post in collections.blog | reverse %}
-      <pf-card>
+      <pf-v5-card>
         <h2 slot="header">{{ post.data.title }}</h2>
         {% if post.data.tagline %}
           <p class="tagline"><a href="{{ post.data.page.url }}">{{ post.data.tagline }}</a></p>{% endif %}
@@ -18,7 +18,7 @@ layout: layout-base.njk
         {% endif %}
         <a slot="footer" class="cta" href="{{ post.data.page.url }}">Read Post</a>
         <time slot="footer" datetime="{{ post.data.page.date }}">{{ post.data.page.date | prettyDate }}</time>
-      </pf-card>
+      </pf-v5-card>
     {% endfor %}
   </div>
 </main>
@@ -34,7 +34,7 @@ layout: layout-base.njk
     gap: 2rem;
   }
 
-  pf-card::part(footer) {
+  pf-v5-card::part(footer) {
     justify-content: space-between;
     align-items: center;
   }

docs/_includes/layout-blog.njk

@@ -28,13 +28,13 @@ layout: layout-base.njk
     {{ content | safe }}
   </section>
 
-  <pf-back-to-top id="back-to-top-link">Back to Top</pf-back-to-top>
+  <pf-v5-back-to-top id="back-to-top-link">Back to Top</pf-v5-back-to-top>
 </main>
 
 {% include '_foot.njk' %}
 
 <script type="module">
-  import '@patternfly/elements/pf-back-to-top/pf-back-to-top.js';
+  import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
   const allTocLinks = document.querySelectorAll('nav.toc [href^="#"]')
 
   const activeLinks = document.querySelectorAll('nav.toc li.active');

docs/_plugins/pfe-assets.cjs

@@ -4,7 +4,7 @@ const path = require('path');
 /**
  * Generate a map of files per package which should be copied to the site dir
  * @param {object} [options]
- * @param {string} [options.prefix='pfe'] element prefix e.g. 'pfe' for 'pf-button'
+ * @param {string} [options.prefix='pf-v5'] element prefix e.g. 'pf-v5' for 'pf-v5-button'
  */
 function getFilesToCopy(options) {
   const cwd = process.cwd();
@@ -46,7 +46,7 @@ function getFilesToCopy(options) {
 
 const DEMO_PATHS_RE =
   // eslint-disable-next-line @stylistic/max-len
-  /(?<attr>href|src)="\/(?<workspace>elements|core)\/pf-(?<unprefixed>.*)\/(?<filename>.*)\.(?<extension>[.\w]+)"/g;
+  /(?<attr>href|src)="\/(?<workspace>elements|core)\/pf-v5-(?<unprefixed>.*)\/(?<filename>.*)\.(?<extension>[.\w]+)"/g;
 
 /**
  * Replace paths in demo files from the dev SPA's format to 11ty's format

docs/_snippets/accordion-html.md

@@ -1,21 +1,21 @@
 ```html
 
 <script type="module">
-  import '@patternfly/elements/pf-accordion/pf-accordion.js';
+  import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
 </script>
 
-<pf-accordion>
-  <pf-accordion-header expanded>
+<pf-v5-accordion>
+  <pf-v5-accordion-header expanded>
     <h3>Getting Started</h3>
-  </pf-accordion-header>
-  <pf-accordion-panel>
+  </pf-v5-accordion-header>
+  <pf-v5-accordion-panel>
     <p>Read our <a href="/get-started/">Getting started</a> page to learn how to install and use PatternFly Elements.</p>
-  </pf-accordion-panel>
-  <pf-accordion-header>
+  </pf-v5-accordion-panel>
+  <pf-v5-accordion-header>
     <h3>HTML APIs</h3>
-  </pf-accordion-header>
-  <pf-accordion-panel>
+  </pf-v5-accordion-header>
+  <pf-v5-accordion-panel>
     <p>For more information on how to use each PatternFly element, read the <a href="/components/">component docs</a>.</p>
-  </pf-accordion-panel>
-</pf-accordion>
+  </pf-v5-accordion-panel>
+</pf-v5-accordion>
 ```

docs/_snippets/accordion-ng.md

@@ -1,22 +1,22 @@
 {%raw%}
 ```ts
-import "@patternfly/elements/pf-accordion/pf-accordion.js";
+import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
 
 import { Component } from "@angular/core";
 
 @Component({
   selector: "app-root",
   template: `
-    <pf-accordion>
+    <pf-v5-accordion>
       <ng-template ngFor let-item [ngForOf]="data">
-        <pf-accordion-header>
+        <pf-v5-accordion-header>
           <h3>{{ item.header }}</h3>
-        </pf-accordion-header>
-        <pf-accordion-panel>
+        </pf-v5-accordion-header>
+        <pf-v5-accordion-panel>
           <p>{{ item.panel }}</p>
-        </pf-accordion-panel>
+        </pf-v5-accordion-panel>
       </ng-template>
-    </pf-accordion>
+    </pf-v5-accordion>
   `,
 })
 export class AppComponent {

docs/_snippets/accordion-svelte.md

@@ -1,18 +1,18 @@
 {%raw%}
 ```html
-<pf-accordion>
+<pf-v5-accordion>
   {#each data as item}
-  <pf-accordion-header>
+  <pf-v5-accordion-header>
     <h3>{item.header}</h3>
-  </pf-accordion-header>
-  <pf-accordion-panel>
+  </pf-v5-accordion-header>
+  <pf-v5-accordion-panel>
     <p>{item.panel}</p>
-  </pf-accordion-panel>
+  </pf-v5-accordion-panel>
   {/each}
-</pf-accordion>
+</pf-v5-accordion>
 
 <script>
-  import "@patternfly/elements/pf-accordion/pf-accordion.js";
+  import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
 	let data = [
     { header: 'Heading 1', panel: 'Here is some content' },
     { header: 'Heading 2', panel: 'Here is some more content' },

docs/_snippets/accordion-vue.md

@@ -1,21 +1,21 @@
 {%raw%}
 ```html
 <template>
-  <pf-accordion>
+  <pf-v5-accordion>
     <template v-for="{ header, panel } in data">
-      <pf-accordion-header>
+      <pf-v5-accordion-header>
         <h3>{{ header }}</h3>
-      </pf-accordion-header>
-      <pf-accordion-panel>
+      </pf-v5-accordion-header>
+      <pf-v5-accordion-panel>
         <p>{{ panel }}</p>
-      </pf-accordion-panel>
+      </pf-v5-accordion-panel>
     </template>
-  </pf-accordion>
+  </pf-v5-accordion>
 </template>
 {%endraw%}
 
 <script>
-import "@patternfly/elements/pf-accordion/pf-accordion.js";
+import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
 export default {
   name: 'App',
   data() {

docs/_snippets/card-html.md

@@ -1,12 +1,12 @@
 ```html
 <script type="module" src="https://esm.sh/@patternfly/elements/pf-card/pf-card.js"></script>
 
-<pf-card border>
+<pf-v5-card border>
   <h2 slot="header">Card component</h2>
   <p>PatternFly Elements are custom HTML elements that work everywhere.
     The Card element has <code>header</code> and <code>footer</code> slots for things like 
     titles and actions.
   </p>
-  <a class="cta" slot="footer" href="components/card">More about <code>pf-card</code></a>
-</pf-card>
+  <a class="cta" slot="footer" href="components/card">More about <code>pf-v5-card</code></a>
+</pf-v5-card>
 ```

docs/_snippets/pf-bar-html.md

@@ -3,7 +3,7 @@
     PatternFly.org
   </a>
   <a href="https://github.com/patternfly/patternfly-elements" class="cta">
-    <pf-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-icon>
+    <pf-v5-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-v5-icon>
     Contribute on Github
   </a>
 </div>

docs/components.md

@@ -2,9 +2,9 @@
   const CLASS_KEY = 'html-lit-react-snippets';
   const LS_KEY = `${CLASS_KEY}-index`;
   document.addEventListener('expand', async function(event) {
-    const PfTabs = await customElements.whenDefined('pf-tabs');
-    if (PfTabs.isExpandEvent(event)) {
-      const tabs = event.tab.closest('pf-tabs');
+    const PfV5Tabs = await customElements.whenDefined('pf-v5-tabs');
+    if (PfV5Tabs.isExpandEvent(event)) {
+      const tabs = event.tab.closest('pf-v5-tabs');
       if (tabs.classList.contains(CLASS_KEY)) {
         await tabs.updateComplete;
         localStorage.setItem(LS_KEY, tabs.activeIndex);
@@ -13,7 +13,7 @@
     }
   });
   async function update() {
-    for (const tabs of document.querySelectorAll(`pf-tabs.${CLASS_KEY}`)) {
+    for (const tabs of document.querySelectorAll(`pf-v5-tabs.${CLASS_KEY}`)) {
       await tabs.updateComplete;
       tabs.activeIndex = parseInt(localStorage.getItem(LS_KEY) ?? '0');
     }