@jack-henry/jh-elements 2.0.0-beta.13 → 2.0.0-beta.15

package/components/element/element.js

@@ -0,0 +1,94 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Jack Henry
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { LitElement } from 'lit';
+
+let id = 0;
+
+export class JhElement extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+  /** @type {number} */
+  #id;
+
+  constructor() {
+    super();
+    /** @type {ElementInternals} */
+    this.#internals = this.attachInternals();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.#id = id++;
+  }
+
+  // getter for unique id
+  get uniqueId() {
+    return this.#id;
+  }
+
+  // getter for element internals
+  /** @ignore */
+  get internals() {
+    return this.#internals;
+  }
+
+  dispatchCustomEvent(eventName, detail = {}) {
+    // gather base detail info
+    let baseDetail = {
+      form: {
+        formName: this.form?.name || null,
+        name: this.name || null,
+      },
+      state: {
+        value: this.value || null,
+      },
+      reference: {
+        originHost: this.localName, 
+      },
+      meta: {
+        timestamp: Date.now(), 
+      },
+    };
+
+    const keysToMerge = ['form', 'state', 'reference', 'meta'];
+    let finalDetail = { ...baseDetail };
+
+    // merge subclass properties into the base properties for each key
+    for (const key of keysToMerge) {
+      if (detail[key]) {
+        finalDetail[key] = { ...baseDetail[key], ...detail[key] };
+      }
+    }
+
+    // Handle any "extra" properties that aren't in the standard keys
+    Object.keys(detail).forEach(key => {
+      if (!keysToMerge.includes(key)) {
+        finalDetail[key] = detail[key];
+      }
+    });
+
+    // create and dispatch event
+    const event = new CustomEvent(eventName, {
+      detail: finalDetail,
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+    this.dispatchEvent(event);
+  }
+
+  // register method to avoid custom element registry conflicts
+  static register(tagName, targetClass) {
+    if (customElements.get(tagName)) {
+      console.warn(
+        `Registry Conflict: <${tagName}> is already owned by another script.`
+      );
+      return;
+    }
+    customElements.define(tagName, targetClass);
+  }
+}

package/components/icon/icon.js

@@ -2,7 +2,8 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 
 /**
  * @cssprop --jh-icon-color-fill - The icon color. Defaults to `--jh-color-content-secondary-enabled`.
@@ -11,14 +12,11 @@ import { LitElement, css, html } from 'lit';
  * @cssprop --jh-icon-size-medium - The icon size when `size="medium"`. Defaults to `--jh-dimension-600`.
  * @cssprop --jh-icon-size-large - The icon size when `size="large"`. Defaults to `--jh-dimension-900`.
  * @cssprop --jh-icon-size-extra-large - The icon size when `size="extra-large"`. Defaults to `--jh-dimension-1400`.
+ * @cssprop --jh-icon-size-extra-extra-large - The icon size when `size="extra-extra-large"`. Defaults to `--jh-dimension-2100`.
  * @slot default - Use to insert the icon SVG content.
  * @customElement jh-icon
  */
-export class JhIcon extends LitElement {
-
-  /** @type {ElementInternals} */
-  #internals;
-
+export class JhIcon extends JhElement {
   static get styles() {
     return css`
       :host {
@@ -60,6 +58,12 @@ export class JhIcon extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg,
       ::slotted(*) {
         width: 100%;
@@ -79,11 +83,9 @@ export class JhIcon extends LitElement {
   }
   constructor() {
     super();
-    this.#internals = this.attachInternals();
-    this.#internals.role = 'graphics-symbol';
-    this.#internals.ariaHidden = 'true';
-
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.internals.role = 'graphics-symbol';
+    this.internals.ariaHidden = 'true';
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 
@@ -93,4 +95,4 @@ export class JhIcon extends LitElement {
     `;
   }
 }
-customElements.define('jh-icon', JhIcon);
+JhIcon.register('jh-icon', JhIcon);

package/components/input/input.js

@@ -2,13 +2,12 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { JhElement } from '../element/element.js';
 import '../button/button.js';
 import '@jack-henry/jh-icons/icons-wc/icon-circle-xmark.js';
 
-let id = 0;
-
 /**
  * @cssprop --jh-input-label-color-text - The label text color. Defaults to `--jh-color-content-primary-enabled`.
  * @cssprop --jh-input-field-color-background - The input field background-color when in an editable state. This property does not apply when the component is set to `readonly`. Defaults to `--jh-color-container-primary-enabled`.
@@ -42,26 +41,22 @@ let id = 0;
  * @cssprop --jh-input-value-color-text - The value text color. Defaults to `jh-color-content-primary-enabled`.
  * @cssprop --jh-input-error-color-text - The error message text color. Defaults to `jh-color-content-negative-enabled`.
  * 
- * @event jh-select - Dispatched when text is selected. Event payload contains the selected text, the starting index of the selection, and the ending index of the selection. These values can be accessed via `e.detail.selected`, `e.detail.selectionStart`, and `e.detail.selectionEnd`.
- * @event jh-change - Dispatched when the value of the input has changed and input loses focus. Event payload includes the value of the input and can be accessed via `e.detail.value`. Payload also includes the raw/unformatted value when an input mask is applied and can be accessed via `e.detail.rawValue`.
- * @event jh-input - Dispatched when the value of the input has changed. Event payload includes the value of the input and can be accessed via `e.detail.value`. Payload also includes the raw/unformatted value when an input mask is applied and can be accessed via `e.detail.rawValue`.
- * @event jh-maxlength - Dispatched when the `maxlength` property is set and it's value is reached.
- * @event jh-input:clear-button-click - Dispatched when the clear button is activated. Event payload contains the previous value of the input field before it was cleared and can be accessed via `e.detail.previousValue`.
+ * @event jh-select - Dispatched when text is selected. Event payload contains the selected text, the starting index of the selection, and the ending index of the selection. These values can be accessed via `e.detail.state.selected`, `e.detail.state.selectionStart`, and `e.detail.state.selectionEnd`.
+ * @event jh-change - Dispatched when the value of the input has changed and input loses focus. Event payload includes the value of the input and can be accessed via `e.detail.state.value`. Payload also includes the raw/unformatted value when an input mask is applied and can be accessed via `e.detail.state.rawValue`. Payload also includes the `maxlength` and `minlength` values and can be accessed via `e.detail.reference.maxlength` and `e.detail.reference.minlength` as well as the `pattern` value and can be accessed via `e.detail.reference.pattern`.
+ * @event jh-input - Dispatched when the value of the input has changed. Event payload includes the value of the input and can be accessed via `e.detail.state.value`. Payload also includes the raw/unformatted value when an input mask is applied and can be accessed via `e.detail.state.rawValue`. Payload also includes the `maxlength` and `minlength` values and can be accessed via `e.detail.reference.maxlength` and `e.detail.reference.minlength` as well as the `pattern` value and can be accessed via `e.detail.reference.pattern`.
+ * @event jh-maxlength - Dispatched when the `maxlength` property is set and it's value is reached. Event payload includes the `maxlength` value and can be accessed via `e.detail.reference.maxlength`.
+ * @event jh-input:clear-button-click - Dispatched when the clear button is activated. Event payload contains the previous value of the input field before it was cleared and can be accessed via `e.detail.state.previousValue`. Payload also contains the method used to activate the clear button (mouse or keyboard) and can be accessed via `e.detail.reference.clearMethod`.
  * @slot jh-input-left - Use to insert an element on the left side of the input field, such as an icon or button.
  * @slot jh-input-right - Use to insert an element on the right side of the input field, such as an icon or button.
  * @slot jh-input-clear-button - Use to insert an icon within the clear button. 
  * 
  * @customElement jh-input
  */
-export class JhInput extends LitElement {
+export class JhInput extends JhElement {
   static get formAssociated() {
     return true;
   }
 
-  /** @type {ElementInternals} */
-  #internals;
-  /** @type {?number} */
-  #id;
   /** @type {?string} */
   #value;
   /** @type {string} */
@@ -117,7 +112,6 @@ export class JhInput extends LitElement {
         line-height: var(--input-helper-regular-line-height);
         display: inline-block;
         width: 100%;
-        --jh-button-size: var(--jh-dimension-800);
         --input-value-color-text: var(
           --jh-input-value-color-text,
           var(--jh-color-content-primary-enabled)
@@ -178,13 +172,13 @@ export class JhInput extends LitElement {
 
       /* Sizes on input wrapper */
       :host([size='small']) .input-wrapper {
-        height: var(--jh-dimension-1000);
+        height: var(--jh-dimension-800);
       }
       :host([size='medium']) .input-wrapper {
-        height: var(--jh-dimension-1200);
+        height: var(--jh-dimension-1000);
       }
       :host([size='large']) .input-wrapper {
-        height: var(--jh-dimension-1400);
+        height: var(--jh-dimension-1200);
       }
 
       /* Input element — no border, grows to fill */
@@ -414,6 +408,8 @@ export class JhInput extends LitElement {
       minlength: { type: String },
       /** Sets a name for the input control. */
       name: { type: String },
+      /** Sets the pattern attribute on the input field. */
+      pattern: { type: String },
       /** Prevents users from changing the input value. Removes all slotted content. */
       readonly: { type: Boolean },
       /** Indicates a value is required. */
@@ -433,7 +429,6 @@ export class JhInput extends LitElement {
 
   constructor() {
     super();
-    this.#internals = this.attachInternals();
     /** @type {?string} */
     this.accessibleLabel = null;
     /** @type {?string} */
@@ -466,6 +461,8 @@ export class JhInput extends LitElement {
     this.minlength = null;
     /** @type {?string} */
     this.name = null;
+    /** @type {?string} */
+    this.pattern = null;
     /** @type {boolean} */
     this.readonly = false;
     /** @type {boolean} */
@@ -484,12 +481,11 @@ export class JhInput extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.#id = id++;
     this.#captureMaskIndexes();
     let observer = new MutationObserver(this.#captureMaskIndexes.bind(this));
     observer.observe(this, { attributeFilter: ['input-mask'] });
     this.addEventListener('jh-select', this.#setSelection);
-  }
+}
 
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -498,10 +494,6 @@ export class JhInput extends LitElement {
     }
   }
 
-  get uniqueId() {
-    return this.#id;
-  }
-
   firstUpdated() {
     // attach event listeners to show/hide clear button
     if (this.showClearButton) {
@@ -618,7 +610,7 @@ export class JhInput extends LitElement {
 
   /** @ignore */
   get form() {
-    return this.#internals.form;
+    return this.internals.form;
   }
 
   get value() {
@@ -629,22 +621,11 @@ export class JhInput extends LitElement {
     const oldValue = this.#value;
     if (newValue !== oldValue) {
       this.#value = newValue;
-      this.#internals.setFormValue(this.#value);
+      this.internals.setFormValue(this.#value);
     }
     this.requestUpdate('value', oldValue);
   }
 
-  #dispatch(eventName, details) {
-    this.dispatchEvent(
-      new CustomEvent(eventName, {
-        detail: details,
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      })
-    );
-  }
-
   _handleInput(e) {
     this.value = e.target.value;
     let inputType = e.inputType;
@@ -656,7 +637,13 @@ export class JhInput extends LitElement {
         this.#applyInputMask(e);
       }
     } else {
-      this.#dispatch('jh-input', { value: this.value });
+      this.dispatchCustomEvent('jh-input', {
+        reference: {
+          'maxlength': this.maxlength,
+          'minlength': this.minlength,
+          'pattern': this.pattern,
+        }
+      } );
     }
   }
 
@@ -998,9 +985,15 @@ export class JhInput extends LitElement {
     this.value = formattedResult.join('');
 
     // Dispatch a custom event with the formatted and raw values
-    this.#dispatch('jh-input', {
-      'value': this.value,
-      'rawValue': this.#rawValue
+    this.dispatchCustomEvent('jh-input', {
+      state: {
+        'rawValue': this.#rawValue || null
+      }, 
+      reference: {
+        'maxlength': this.maxlength,
+        'minlength': this.minlength,
+        'pattern': this.pattern,
+      }
     });
   }
 
@@ -1083,15 +1076,16 @@ export class JhInput extends LitElement {
   }
 
   _handleChange() {
-    let payload = {
-      'value': this.value,
-    }
-
-    if (this.inputMask) {
-      payload.rawValue = this.#rawValue;
-    }
-
-    this.#dispatch('jh-change', payload);
+    this.dispatchCustomEvent('jh-change', {
+      state: {
+        'rawValue': this.#rawValue || null
+      },
+      reference: {
+        'minlength': this.minlength,
+        'maxlength': this.maxlength,
+        'pattern': this.pattern,
+      }
+    });
   }
 
   _handleSelect(e) {
@@ -1102,35 +1096,38 @@ export class JhInput extends LitElement {
 
     // ensure selected string present before dispatching event. Can be empty due to caret positioning when user attempts to delete fixed char.
     if (selectedString) {
-      this.#dispatch('jh-select', {
-        selected: selectedString,
-        selectionStart: e.target.selectionStart,
-        selectionEnd: e.target.selectionEnd
+      this.dispatchCustomEvent('jh-select', {
+        state: {
+          'selection': selectedString,
+          'selectionStart': e.target.selectionStart,
+          'selectionEnd': e.target.selectionEnd
+        }
       });
     }
   }
 
   _handleMaxlength() {
-    this.#dispatch('jh-maxlength');
+    this.dispatchCustomEvent('jh-maxlength', {
+      reference: {
+        'maxlength': this.maxlength
+      }
+    });
   }
 
-  _handleClearButtonClick() {
+  _handleClearButtonClick(e) {
     let previousValue = this.value;
     // clear input value
     this.value = '';
     // focus input field
     this.shadowRoot.querySelector('input').focus();
-    // dispatch clear event
-    this.dispatchEvent(
-      new CustomEvent('jh-input:clear-button-click', {
-        detail: { 
-          'previousValue': previousValue 
-        },
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      })
-    );
+    this.dispatchCustomEvent('jh-input:clear-button-click', { 
+      state: { 
+        'previousValue': previousValue,
+      }, 
+      reference: {
+        'clearMethod': e.pointerType === 'mouse' ? 'mouse' : 'keyboard'
+      }
+    });
   }
 
   _handleSlotChange(e) {
@@ -1144,9 +1141,9 @@ export class JhInput extends LitElement {
     let hasContent = this.#checkSlotContent(slot);
     slot.classList.toggle('display-slot', hasContent);
 
-    // Set icon size if applicable
-    if (newSlottedElement?.tagName.startsWith('JH-ICON')) {
-      newSlottedElement.setAttribute('size', 'medium');
+    // Set jh-icon or jh-button size if applicable
+    if (newSlottedElement?.tagName.startsWith('JH-ICON')||newSlottedElement?.tagName === 'JH-BUTTON') {
+      newSlottedElement.setAttribute('size', 'x-small');
     }
   }
 
@@ -1168,11 +1165,11 @@ export class JhInput extends LitElement {
     if (!this.showClearButton || !this.value || this.disabled) return null;
     return html`
       <jh-button 
-        size="small" appearance="tertiary" class="clear-button" 
+        size="x-small" appearance="tertiary" class="clear-button" 
         accessible-label=${ifDefined(this.accessibleLabelClearButton)}
         @click=${this._handleClearButtonClick}>
-        <slot name="jh-input-clear-button" slot="jh-button-icon">
-          <jh-icon-circle-xmark slot="jh-button-icon" aria-hidden="true" size="medium"></jh-icon-circle-xmark>
+        <slot name="jh-input-clear-button" slot="jh-button-icon-left">
+          <jh-icon-circle-xmark slot="jh-button-icon-left"></jh-icon-circle-xmark>
         </slot>
       </jh-button>
     `;
@@ -1293,6 +1290,7 @@ export class JhInput extends LitElement {
             maxlength=${ifDefined(this.maxlength === '' ? null : this.maxlength)}
             minlength=${ifDefined(this.minlength === '' ? null : this.minlength)}
             name=${ifDefined(this.name === '' ? null : this.name)}
+            pattern=${ifDefined(this.pattern === '' ? null : this.pattern)}
             ?readonly=${this.readonly}
             ?required=${this.required}
             type="text"
@@ -1320,4 +1318,4 @@ export class JhInput extends LitElement {
   }
 }
 
-customElements.define('jh-input', JhInput);
+JhInput.register('jh-input', JhInput);

package/components/input-email/input-email.js

@@ -14,4 +14,4 @@ export class JhInputEmail extends JhInput {
     this.inputmode = 'email';
   }
 }
-customElements.define('jh-input-email', JhInputEmail);
+JhInputEmail.register('jh-input-email', JhInputEmail);

package/components/input-password/input-password.js

@@ -16,10 +16,6 @@ let id = 0;
  * @customElement jh-input-password
  */
 export class JhInputPassword extends JhInput {
-
-  /** @type {?number} */
-  #id;
-
   static get properties() {
     return {
       /** Unmasks the input field value when set. */
@@ -47,12 +43,7 @@ export class JhInputPassword extends JhInput {
     this.passwordVisible = false;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.#id = id++;
-  }
-
-renderInput() {
+  renderInput() {
     let describedby;
 
     if (this.helperText || (this.errorText && this.invalid)) {
@@ -68,7 +59,7 @@ renderInput() {
         <div class="input-wrapper">
           ${leftSlot}
           <input
-            id="jh-input-${this.#id}"
+            id="jh-input-${this.uniqueId}"
             aria-describedby=${describedby}
             aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
             aria-label=${ifDefined(
@@ -120,7 +111,7 @@ renderInput() {
     let passwordBtn = html`
         <jh-button
           class="password-toggle-btn"
-          size="small"
+          size="x-small"
           appearance="tertiary"
           ?disabled=${this.disabled}
           accessible-label=${accessibleLabel}
@@ -130,24 +121,24 @@ renderInput() {
             ? html`
                 <slot
                   name="jh-input-password-visible"
-                  slot="jh-button-icon"
+                  slot="jh-button-icon-left"
                 >
                   <jh-icon-eye-slash
-                    slot="jh-button-icon"
+                    slot="jh-button-icon-left"
                     aria-hidden="true"
-                    size="medium"
+                    size="x-small"
                   ></jh-icon-eye-slash>
                 </slot>
               `
             : html`
                 <slot
                   name="jh-input-password-hidden"
-                  slot="jh-button-icon"
+                  slot="jh-button-icon-left"
                 >
                   <jh-icon-eye
-                    slot="jh-button-icon"
+                    slot="jh-button-icon-left"
                     aria-hidden="true"
-                    size="medium"
+                    size="x-small"
                   ></jh-icon-eye>
                 </slot>
               `}
@@ -160,4 +151,4 @@ renderInput() {
     this.passwordVisible = !this.passwordVisible;
   }
 }
-customElements.define('jh-input-password', JhInputPassword);
+JhInputPassword.register('jh-input-password', JhInputPassword);

package/components/input-search/input-search.js

@@ -36,9 +36,9 @@ export class JhInputSearch extends JhInput {
     
     return html`
       <slot name="jh-input-left" @slotchange=${this._handleSlotChange}>
-        <jh-icon-magnifying-glass aria-hidden="true"></jh-icon-magnifying-glass>
+        <jh-icon-magnifying-glass aria-hidden="true" size="x-small"></jh-icon-magnifying-glass>
       </slot>
     `;
   }
 }
-customElements.define('jh-input-search', JhInputSearch);
+JhInputSearch.register('jh-input-search', JhInputSearch);

package/components/input-telephone/input-telephone.js

@@ -15,4 +15,4 @@ export class JhInputTelephone extends JhInput {
     inputEl.setAttribute('type', 'tel');
   }
 }
-customElements.define('jh-input-telephone', JhInputTelephone);
+JhInputTelephone.register('jh-input-telephone', JhInputTelephone);

package/components/input-textarea/input-textarea.js

@@ -6,18 +6,14 @@ import { css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { JhInput } from '../input/input.js';
 
-let id = 0;
-
 /**
  * @cssprop --jh-input-textarea-field-dimension-min-height - The input field minimum height. Defaults to `--jh-dimension-2000` when `size='small'`, `--jh-dimension-2200` when `size='medium'`, and `--jh-dimension-2400` when `size='large'`.
  *
- * @event jh-change - Dispatched when the value of the input has changed and input loses focus. Event payload includes the value of the input and can be accessed via `e.detail.value`.
- * @event jh-input - Dispatched when the value of the input has changed. Event payload includes the value of the input and can be accessed via `e.detail.value`. 
+ * @event jh-change - Dispatched when the value of the input has changed and input loses focus. Event payload includes the value of the input and can be accessed via `e.detail.state.value`.
+ * @event jh-input - Dispatched when the value of the input has changed. Event payload includes the value of the input and can be accessed via `e.detail.state.value`. 
  * @customElement jh-input-textarea
  */
 export class JhInputTextarea extends JhInput {
-  /** @type {?number} */
-  #id;
   /** @type {?ResizeObserver} */
   #resizeObserver;
 
@@ -195,11 +191,6 @@ export class JhInputTextarea extends JhInput {
     this.wrap = null;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.#id = id++;
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.#resizeObserver) {
@@ -244,7 +235,7 @@ export class JhInputTextarea extends JhInput {
   renderInput() {
     return html`
       <textarea
-        id="jh-input-${this.#id}"
+        id="jh-input-${this.uniqueId}"
         aria-describedby=${this._getDescribedby()}
         aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
         aria-label=${ifDefined(this.accessibleLabel === '' ? null : this.accessibleLabel)}
@@ -268,4 +259,4 @@ export class JhInputTextarea extends JhInput {
     `
   }
 }
-customElements.define('jh-input-textarea', JhInputTextarea);
+JhInputTextarea.register('jh-input-textarea', JhInputTextarea);

package/components/input-url/input-url.js

@@ -28,4 +28,4 @@ export class JhInputUrl extends JhInput {
     inputEl.setAttribute('type', 'url');
   }
 }
-customElements.define('jh-input-url', JhInputUrl);
+JhInputUrl.register('jh-input-url', JhInputUrl);

package/components/list-group/list-group.js

@@ -2,7 +2,8 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 let id = 0;
@@ -19,10 +20,7 @@ let id = 0;
  * @slot default - Use to insert `<jh-list-item>` component(s).
  * @customElement jh-list-group
  */
-export class JhListGroup extends LitElement {
-  /** @type {?Number} */
-  #id;
-
+export class JhListGroup extends JhElement {
   static get styles() {
     return css`
       :host {
@@ -76,22 +74,17 @@ export class JhListGroup extends LitElement {
     this.accessibleLabel = null;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.#id = id++;
-  }
-
   render() {
     return html`
       ${this.label
-        ? html`<div class="subheader" id="list-group-labelledby-${this.#id}">
+        ? html`<div class="subheader" id="list-group-labelledby-${this.uniqueId}">
             ${this.label}
           </div>`
         : null}
       <div
         role="group"
         aria-labelledby=${ifDefined(
-          this.label ? `list-group-labelledby-${this.#id}` : null
+          this.label ? `list-group-labelledby-${this.uniqueId}` : null
         )}
         aria-label=${ifDefined(this.accessibleLabel)}
       >
@@ -100,4 +93,4 @@ export class JhListGroup extends LitElement {
     `;
   }
 }
-customElements.define('jh-list-group', JhListGroup);
+JhListGroup.register('jh-list-group', JhListGroup);