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

package/components/progress/progress.js

@@ -2,8 +2,9 @@
 //
 // 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';
 
 /**
  * @cssprop --jh-progress-label-color - The label text color. Defaults to `--jh-color-content-primary-enabled`.
@@ -11,11 +12,11 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @cssprop --jh-progress-track-color - The track color. Defaults to `--jh-color-control-enabled`.
  * @cssprop --jh-progress-track-border-radius - The track border-radius. Defaults to `--jh-border-radius-50`.
  * @cssprop --jh-progress-indicator-color - The indicator color. Defaults to `--jh-color-content-brand-enabled`.
+ * @cssprop --jh-progress-track-size-linear - The height of the linear progress bar track. Defaults to the size-based height.
+ * @cssprop --jh-progress-track-size-circular - The width and height of the circular progress indicator. Defaults to the size-based dimensions.
  * @customElement jh-progress
  */
-export class JhProgress extends LitElement {
-  /** @type {ElementInternals} */
-  #internals;
+export class JhProgress extends JhElement {
 
   /** @type {string} */
   #label;
@@ -87,14 +88,26 @@ export class JhProgress extends LitElement {
         );
         overflow: hidden;
       }
+      :host([size='x-small']) .linear-progress-bar {
+        --progress-linear-height: var(--jh-dimension-25);
+      }
       :host([size='small']) .linear-progress-bar {
-        height: var(--jh-dimension-50);
+        --progress-linear-height: var(--jh-dimension-50);
       }
       :host([size='medium']) .linear-progress-bar {
-        height: var(--jh-dimension-100);
+        --progress-linear-height: var(--jh-dimension-100);
       }
       :host([size='large']) .linear-progress-bar {
-        height: var(--jh-dimension-200);
+        --progress-linear-height: var(--jh-dimension-200);
+      }
+      :host([size='x-large']) .linear-progress-bar {
+        --progress-linear-height: var(--jh-dimension-300);
+      }
+      :host([size='xx-large']) .linear-progress-bar {
+        --progress-linear-height: var(--jh-dimension-400);
+      }
+      :host .linear-progress-bar {
+        height: var(--jh-progress-track-size-linear, var(--progress-linear-height));
       }
       :host .linear-progress-bar-value {
         background-color: var(
@@ -110,30 +123,40 @@ export class JhProgress extends LitElement {
         align-items: center;
       }
       :host([type='circular']) .text-content {
-        margin-top: var(--jh-dimension-200);
+        margin-top: var(--jh-dimension-100);
+        margin-bottom: 0;
         display: flex;
         flex-direction: column;
       }
       svg {
         transform: rotate(-90deg);
-        width: var(--progress-size);
-        height: var(--progress-size);
+        width: var(--jh-progress-track-size-circular, var(--progress-circular-size));
+        height: var(--jh-progress-track-size-circular, var(--progress-circular-size));
         overflow: visible;
       }
+      :host([size='x-small']) svg {
+        --progress-circular-size: var(--jh-dimension-400);
+      }
       :host([size='small']) svg {
-        --progress-size: var(--jh-dimension-300);
+        --progress-circular-size: var(--jh-dimension-500);
       }
       :host([size='medium']) svg {
-        --progress-size: var(--jh-dimension-400);
-        margin-bottom: 1px;
+        --progress-circular-size: var(--jh-dimension-600);
       }
       :host([size='large']) svg {
-        --progress-size: var(--jh-dimension-800);
-        margin-bottom: 2px;
+        --progress-circular-size: var(--jh-dimension-900);
+      }
+      :host([size='x-large']) svg {
+        --progress-circular-size: var(--jh-dimension-1400);
+      }
+      :host([size='xx-large']) svg {
+        --progress-circular-size: var(--jh-dimension-2100);
       }
+      /* circle with virtual sizes for viewBox */
       circle {
         transform-origin: 50% 50%;
         fill: none;
+        stroke-width: 1.5;
       }
       .circular-progress-bar {
         stroke: var(--jh-progress-track-color, var(--jh-color-control-enabled));
@@ -145,18 +168,6 @@ export class JhProgress extends LitElement {
           var(--jh-color-content-brand-enabled)
         );
       }
-      :host([size='small']) circle {
-        stroke-width: 1;
-        stroke-dasharray: 37.8px;
-      }
-      :host([size='medium']) circle {
-        stroke-width: 2;
-        stroke-dasharray: 50.3px;
-      }
-      :host([size='large']) circle {
-        stroke-width: 4;
-        stroke-dasharray: 100.8px;
-      }
       :host([type='circular']) div {
         text-align: center;
       }
@@ -202,29 +213,28 @@ export class JhProgress extends LitElement {
 
   constructor() {
     super();
-    this.#internals = this.attachInternals();
     /** @type {Boolean} */
     this.indeterminate = false;
     /** @type {?string} */
     this.label = null;
-    /** @type {'small'|'medium'|'large'} */
+    /** @type { 'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
     /** @type {'linear'|'circular'} */
     this.type = 'linear';
     /** @type {Boolean} */
     this.hideValue = false;
     /** @type {?string} */
-    this.#internals.ariaLabel;
+    this.internals.ariaLabel;
     /** @type {number} */
-    this.#internals.ariaValueMax;
+    this.internals.ariaValueMax;
     /** @type {number} */
-    this.#internals.ariaValueMin;
+    this.internals.ariaValueMin;
     /** @type {?number} */
-    this.#internals.ariaValueNow;
+    this.internals.ariaValueNow;
     /** @type {?string} */
-    this.#internals.ariaValueText;
+    this.internals.ariaValueText;
     /** @type {?string} */
-    this.#internals.role = 'progressbar';
+    this.internals.role = 'progressbar';
     /** @type {?string} */
     this.accessibleLabel = null;
     /** @type {?number} */
@@ -251,10 +261,10 @@ export class JhProgress extends LitElement {
 
   // Shared setter for elementInternals properties
   #setAttribute(ariaAttribute, newValue) {
-    const oldValue = this.#internals[ariaAttribute];
+    const oldValue = this.internals[ariaAttribute];
 
     if (newValue !== oldValue) {
-      this.#internals[ariaAttribute] = newValue;
+      this.internals[ariaAttribute] = newValue;
     }
     this.requestUpdate(ariaAttribute, oldValue);
   }
@@ -275,7 +285,7 @@ export class JhProgress extends LitElement {
   }
 
   get accessibleLabel() {
-    return this.#internals.ariaLabel;
+    return this.internals.ariaLabel;
   }
 
   set accessibleLabel(newValue) {
@@ -283,7 +293,7 @@ export class JhProgress extends LitElement {
   }
 
   get min() {
-    return this.#internals.ariaValueMin;
+    return this.internals.ariaValueMin;
   }
 
   set min(newValue) {
@@ -291,7 +301,7 @@ export class JhProgress extends LitElement {
   }
 
   get max() {
-    return this.#internals.ariaValueMax;
+    return this.internals.ariaValueMax;
   }
 
   set max(newValue) {
@@ -299,7 +309,7 @@ export class JhProgress extends LitElement {
   }
 
   get accessibleValueText() {
-    return this.#internals.ariaValueText;
+    return this.internals.ariaValueText;
   }
 
   set accessibleValueText(newValue) {
@@ -307,14 +317,14 @@ export class JhProgress extends LitElement {
   }
 
   get value() {
-    return this.#internals.ariaValueNow; 
+    return this.internals.ariaValueNow; 
   }
 
   set value(newValue) {
     this.#setAttribute('ariaValueNow', newValue);
   }
 
-  #getCircularIndicator(size, indeterminate, percentage) {
+  #getCircularIndicator(indeterminate, percentage) {
     let percentComplete;
 
     if (indeterminate) {
@@ -324,26 +334,23 @@ export class JhProgress extends LitElement {
     } else {
       percentComplete = percentage;
     }
-
-    const circle = {
-      // Numbers represent radius, x&y axis, and circumference
-      small: [6, 6, 37.8],
-      medium: [8, 8, 50.3],
-      large: [16, 16, 100.8],
-    };
-
-    const [r, axis, c] = circle[size];
+    // circle with virtual sizes for viewBox to allow for scaling. 
+    const axis = 12;
+    const viewBoxSize = axis * 2;
+    const r = 9.75;
+    const c = +(2 * Math.PI * r).toFixed(1);
 
     let percentOfCircleFilled = c - (c * Number(percentComplete)) / 100;
 
     return html`
-      <svg>
+      <svg viewBox="0 0 ${viewBoxSize} ${viewBoxSize}" xmlns="http://www.w3.org/2000/svg">
         <circle
           class="circular-progress-bar"
           r=${r}
           cx=${axis}
           cy=${axis}
           c=${c}
+          style="stroke-dasharray: ${c}"
         ></circle>
         <circle
           class="circular-progress-bar-value"
@@ -351,7 +358,7 @@ export class JhProgress extends LitElement {
           cx=${axis}
           cy=${axis}
           c=${c}
-          style="stroke-dashoffset:${percentOfCircleFilled}px"
+          style="stroke-dasharray: ${c}; stroke-dashoffset: ${percentOfCircleFilled}"
         ></circle>
       </svg>
     `;
@@ -388,7 +395,6 @@ export class JhProgress extends LitElement {
       indicator = this.#getLinearIndicator(percentage);
     } else if (this.type === 'circular') {
       indicator = this.#getCircularIndicator(
-        this.size,
         this.indeterminate,
         percentage
       );
@@ -414,4 +420,4 @@ export class JhProgress extends LitElement {
   }
 }
 
-customElements.define('jh-progress', JhProgress);
+JhProgress.register('jh-progress', JhProgress);

package/components/radio/radio.js

@@ -2,9 +2,8 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
-
-let id = 0;
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 
 /**
  * @cssprop --jh-radio-opacity-disabled - The radio opacity when disabled. Defaults to `--jh-opacity-disabled`.
@@ -64,12 +63,7 @@ let id = 0;
  *
  * @customElement jh-radio */
 
-export class JhRadio extends LitElement {
-
-  /** @type {?Number} */
-  #id;
-  /** @type {ElementInternals} */
-  #internals;
+export class JhRadio extends JhElement {
 
   static get styles() {
     return css`
@@ -321,8 +315,7 @@ export class JhRadio extends LitElement {
 
   constructor() {
     super();
-    this.#internals = this.attachInternals();
-    this.#internals.role = 'radio';
+    this.internals.role = 'radio';
     /** @type {?string} */
     this.accessibleLabel = null;
     /** @type {?boolean} */
@@ -342,14 +335,13 @@ export class JhRadio extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.#id = id++;
     this.setAttribute('tabindex', '0');
     this.setAttribute('aria-checked', `${this.checked}`);
     if (this.accessibleLabel) {
       this.setAttribute('aria-label', `${this.accessibleLabel}`);
     }
     if (this.helperText) {
-      this.setAttribute('aria-describedby', `radio-helper-text-${this.#id}`);
+      this.setAttribute('aria-describedby', `radio-helper-text-${this.uniqueId}`);
     }
 
     let observer = new MutationObserver(this.#updateArias.bind(this));
@@ -378,12 +370,7 @@ export class JhRadio extends LitElement {
     if (this.checked) return;
 
     this.checked = true;
-    const options = {
-      bubbles: true,
-      composed: true,
-      cancelable: true,
-    };
-    this.dispatchEvent(new CustomEvent('jh-change', options));
+    this.dispatchCustomEvent('jh-change');
   }
 
   #handleKeydown(e) {
@@ -398,7 +385,7 @@ export class JhRadio extends LitElement {
 
     if (this.helperText) {
       helperText = html`
-        <p class="helper-text" id="radio-helper-text-${this.#id}">
+        <p class="helper-text" id="radio-helper-text-${this.uniqueId}">
           ${this.helperText}
         </p>
       `;
@@ -419,4 +406,4 @@ export class JhRadio extends LitElement {
     `;
   }
 }
-customElements.define('jh-radio', JhRadio);
+JhRadio.register('jh-radio', JhRadio);

package/components/radio-group/radio-group.js

@@ -2,10 +2,10 @@
 //
 // 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';
 
-let id = 0;
 /**
  *
  * @cssprop --jh-radio-group-label-color-text - The label text color. Defaults to `--jh-color-content-primary-enabled`.
@@ -21,19 +21,15 @@ let id = 0;
  *
  * @slot default - Use to insert `<jh-radio>` components(s).
  * 
- * @event jh-change - Dispatched when the value of the radio group has changed.
+ * @event jh-change - Dispatched when the value of the radio group has changed. Event payload includes the `value` and can be accessed via `e.detail.state.value`.
  *
  * @customElement jh-radio-group
  */
-export class JhRadioGroup extends LitElement {
+export class JhRadioGroup extends JhElement {
   static get formAssociated() {
     return true;
   }
   #checked;
-  /** @type {?Number} */
-  #id;
-  /** @type {ElementInternals} */
-  #internals;
   /** @type {?string} */
   #value;
 
@@ -208,7 +204,6 @@ export class JhRadioGroup extends LitElement {
   }
   constructor() {
     super();
-    this.#internals = this.attachInternals();
     /** @type {?string} */
     this.accessibleLabel = null;
     /** @type {boolean} */
@@ -237,11 +232,6 @@ export class JhRadioGroup extends LitElement {
     this.addEventListener('focusout', this.#handleFocusOut);
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.#id = id++;
-  }
-
   firstUpdated() {
     this._syncDisabledToChildren();
   }
@@ -257,12 +247,12 @@ export class JhRadioGroup extends LitElement {
    * @type {?HTMLFormElement}
    */
   get form() {
-    return this.#internals.form;
+    return this.internals.form;
   }
 
   /** @ignore */
   get validity() {
-    return this.#internals.validity;
+    return this.internals.validity;
   }
 
   /** @type {?string} */
@@ -274,7 +264,7 @@ export class JhRadioGroup extends LitElement {
     const oldValue = this.#value;
     if (newValue !== oldValue) {
       this.#value = newValue;
-      this.#internals.setFormValue(newValue);
+      this.internals.setFormValue(newValue);
     }
     this.requestUpdate('value', oldValue);
   }
@@ -322,12 +312,7 @@ export class JhRadioGroup extends LitElement {
       this.#checked = e.target;
       this.#updateChecked();
 
-      const options = {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-      };
-      this.dispatchEvent(new CustomEvent('jh-change', options));
+      this.dispatchCustomEvent('jh-change');
     }
   }
 
@@ -390,11 +375,11 @@ export class JhRadioGroup extends LitElement {
 
   #getAriaDescribedBy() {
     if (this.errorText && this.invalid && this.helperText && this.label) {
-      return `radio-group-error-${this.#id} radio-group-helper-${this.#id}`;
+      return `radio-group-error-${this.uniqueId} radio-group-helper-${this.uniqueId}`;
     } else if (this.errorText && this.invalid) {
-      return `radio-group-error-${this.#id}`;
+      return `radio-group-error-${this.uniqueId}`;
     } else if (this.helperText && this.label) {
-      return `radio-group-helper-${this.#id}`;
+      return `radio-group-helper-${this.uniqueId}`;
     }
   }
 
@@ -415,28 +400,28 @@ export class JhRadioGroup extends LitElement {
     if (this.helperText) {
       helperText = html`<p
         class="helper-text"
-        id="radio-group-helper-${this.#id}"
+        id="radio-group-helper-${this.uniqueId}"
       >
         ${this.helperText}
       </p>`;
     }
 
     if (this.label) {
-      label = html`<legend class="label" for="radio-group-label-${this.#id}">
+      label = html`<legend class="label" for="radio-group-label-${this.uniqueId}">
           ${this.label}${indicator}
         </legend>
         ${helperText}`;
     }
 
     if (this.invalid && this.errorText) {
-      errorText = html`<p class="error-text" id="radio-group-error-${this.#id}">
+      errorText = html`<p class="error-text" id="radio-group-error-${this.uniqueId}">
         ${this.errorText}
       </p>`;
     }
     return html`
       <fieldset
         role="radiogroup"
-        id=${ifDefined(this.label ? `radio-group-label-${this.#id}` : null)}
+        id=${ifDefined(this.label ? `radio-group-label-${this.uniqueId}` : null)}
         aria-describedby=${ifDefined(this.#getAriaDescribedBy())}
         aria-disabled=${ifDefined(this.disabled ? 'true' : null)}
         aria-required=${ifDefined(this.required ? 'true' : 'false')}
@@ -452,4 +437,4 @@ export class JhRadioGroup extends LitElement {
     `;
   }
 }
-customElements.define('jh-radio-group', JhRadioGroup);
+JhRadioGroup.register('jh-radio-group', JhRadioGroup);

package/components/select/select.js

@@ -60,7 +60,7 @@ import { JhFilter } from './filtering.js';
  * @slot jh-select-trigger-open - Use to replace the default chevron icon displayed when the select menu is open.
  * @slot jh-select-trigger-closed - Use to replace the default chevron icon displayed when the select menu is closed.
  *
- * @event jh-change - Dispatched when the selected value changes.
+ * @event jh-change - Dispatched when the selected value changes. Event payload includes the `value` and can be accessed via `e.detail.state.value`.
  */
 export class JhSelect extends JhInput {
   /** @type {?string} */
@@ -243,17 +243,37 @@ export class JhSelect extends JhInput {
           ...item,
         };
       });
-      // These will be the same until we add search functionality, at which point #flatOptions will be the filtered list and #allOptions will remain the source of truth.
       this.#flatOptions = this.#allOptions;
       this.#activeIndex = null;
 
-      // Set initial value from the selected flag in the data array
-      const selectedOption = this.#flatOptions.find((opt) => opt.selected);
-      if (selectedOption && !this.value) {
-        this.value = String(selectedOption.value);
-        this.#displayValue = selectedOption.label;
+      // If no value is set yet, use the selected flag as the initial default
+      if (this.value == null) {
+        const selectedOption = this.#flatOptions.find((opt) => opt.selected);
+        if (selectedOption) {
+          this.value = String(selectedOption.value);
+          this.#displayValue = selectedOption.label;
+        }
+      } else {
+        // Value already set — resolve display label from new options
+        this.#syncDisplayValue();
       }
     }
+
+    // Handle external value changes (e.g. .value = 'x' or value="x" attribute)
+    if (changedProperties.has('value') && !changedProperties.has('options')) {
+      this.#syncDisplayValue();
+    }
+  }
+
+  #syncDisplayValue() {
+    if (this.value == null) {
+      this.#displayValue = null;
+      return;
+    }
+    const match = this.#flatOptions.find(
+      (opt) => String(opt.value) === String(this.value)
+    );
+    this.#displayValue = match ? (match.label ?? String(match.value)) : null;
   }
 
   #getIndexFromId(elementId) {
@@ -299,7 +319,7 @@ export class JhSelect extends JhInput {
     }
   }
 
-  #handleOpenSelect() {
+  #handleOpenSelect({ keyboard = false } = {}) {
     if (this.disabled || this.readonly || !this.#flatOptions.length) return;
     if (!this.#inputWrapper || !this.#menuContainer) return;
 
@@ -310,8 +330,8 @@ export class JhSelect extends JhInput {
     requestAnimationFrame(() => {
       document.addEventListener('scroll', this.#boundDocumentScroll, true);
     });
-    // Set initial active to selected item or first item
-    if (this.#activeIndex === null) {
+    // Only set active item on keyboard open to avoid showing focus ring on mouse open
+    if (keyboard && this.#activeIndex === null) {
       const selectedIdx = this.#flatOptions.findIndex(
         (opt) => String(opt.value) === String(this.value));
       this.#setActiveItem(selectedIdx !== -1 ? selectedIdx : 0);
@@ -360,22 +380,26 @@ export class JhSelect extends JhInput {
     if (e.ctrlKey || e.metaKey) return;
 
     switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        if (!this.#open) {
-          this.#handleOpenSelect();
-        } else {
-          this.#setActiveItem(this.#activeIndex === null ? 0 : this.#activeIndex + 1);
-        }
-        return;
+    case 'ArrowDown':
+      e.preventDefault();
+      if (!this.#open) {
+        this.#handleOpenSelect({ keyboard: true });
+      } else {
+        const selectedIdx = this.#flatOptions.findIndex(
+          (opt) => String(opt.value) === String(this.value));
+        this.#setActiveItem((this.#activeIndex ?? selectedIdx) + 1);
+      }
+      return;
 
       case 'ArrowUp':
         e.preventDefault();
         if (!this.#open) {
-          this.#handleOpenSelect();
+          this.#handleOpenSelect({ keyboard: true });
         } else {
+          const selectedIdx = this.#flatOptions.findIndex(
+            (opt) => String(opt.value) === String(this.value));
           this.#setActiveItem(
-            this.#activeIndex === null ? this.#flatOptions.length - 1 : this.#activeIndex - 1);
+            (this.#activeIndex ?? (selectedIdx !== -1 ? selectedIdx : this.#flatOptions.length)) - 1);
         }
         return;
 
@@ -383,11 +407,13 @@ export class JhSelect extends JhInput {
       case ' ':
         e.preventDefault();
         if (!this.#open) {
-          this.#handleOpenSelect();
-        } else if (this.#activeIndex !== null) {
+          this.#handleOpenSelect({ keyboard: true }); 
+      } else if (this.#activeIndex !== null) {
           this.#handleSelection(this.#activeIndex);
           this.#handleCloseSelect();
-        }
+      } else {
+        this.#handleCloseSelect();
+      }
         return;
 
       case 'Escape':
@@ -454,12 +480,7 @@ export class JhSelect extends JhInput {
       this.#scrollToActiveItem();
 
       //dispatch a jh-change event when the selected value changes.
-      const options = {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-      };
-      this.dispatchEvent(new CustomEvent('jh-change', options));
+      this.dispatchCustomEvent('jh-change');
     }
   }
 
@@ -657,4 +678,4 @@ export class JhSelect extends JhInput {
   }
 }
 
-customElements.define('jh-select', JhSelect);
+JhSelect.register('jh-select', JhSelect);