fix(label-group): add ssr:label event for child discovery

pf-label now dispatches a bubbling `ssr:label` event from
connectedCallback during SSR. pf-label-group listens for this
event and increments an internal label count, so the overflow
template renders correctly on the server without querySelectorAll.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bennypowers

elements/pf-label-group/pf-label-group.ts

@@ -1,15 +1,14 @@
-import { LitElement, html, type TemplateResult } from 'lit';
+import { LitElement, html, isServer, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators/state.js';
 import { query } from 'lit/decorators/query.js';
 import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
 
-import { isServer } from 'lit';
-
 import { PfLabel } from '../pf-label/pf-label.js';
 
 import styles from './pf-label-group.css';
@@ -87,6 +86,9 @@ export class PfLabelGroup extends LitElement {
   /** Whether the label group can be closed. */
   @property({ reflect: true, type: Boolean }) closeable = false;
 
+  /** Label count tracked during SSR via child events. */
+  @state() private _ssrLabelCount = 0;
+
   @query('#overflow') private _overflowLabel?: PfLabel;
 
   @query('#close-button') private _button?: HTMLButtonElement;
@@ -100,12 +102,19 @@ export class PfLabelGroup extends LitElement {
     return this.querySelectorAll<PfLabel>('pf-label:not([slot]):not([overflow-label])');
   }
 
+  get #labelCount(): number {
+    if (isServer) {
+      return this._ssrLabelCount;
+    }
+    return this.#labels.length;
+  }
+
   get #hasCategory(): boolean {
     return (this._categorySlotted ?? []).length > 0;
   }
 
   get #remaining(): number {
-    return this.#labels.length - this.numLabels;
+    return this.#labelCount - this.numLabels;
   }
 
   #tabindex = RovingTabindexController.of(this, {
@@ -123,10 +132,11 @@ export class PfLabelGroup extends LitElement {
   constructor() {
     super();
     this.addEventListener('remove', this.#onRemove);
+    this.addEventListener('ssr:label', this.#onSsrLabel);
   }
 
   override render(): TemplateResult<1> {
-    const empty = this.#labels.length <= 0;
+    const empty = this.#labelCount <= 0;
     return html`
       <div id="outer"
            class="${classMap({ 'has-category': this.#hasCategory, empty })}"
@@ -191,6 +201,10 @@ export class PfLabelGroup extends LitElement {
     }
   }
 
+  #onSsrLabel() {
+    this._ssrLabelCount++;
+  }
+
   #updateOverflow() {
     this.#labels.forEach((label, i) => {
       label.hidden = i >= this.numLabels && !this.open;

elements/pf-label/pf-label.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, type TemplateResult } from 'lit';
+import { LitElement, html, isServer, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -71,6 +71,13 @@ export class PfLabel extends LitElement {
   /** Represents the state of the anonymous and icon slots */
   #slots = new SlotController(this, null, 'icon');
 
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (isServer) {
+      this.dispatchEvent(new Event('ssr:label', { bubbles: true }));
+    }
+  }
+
   override render(): TemplateResult<1> {
     const { compact, truncated } = this;
     const { variant, color, icon } = this;