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

package/NOTICE

@@ -1,5 +1,5 @@
 ===========================================================
-Jack Henry Design System
+Forge Design System
 Copyright 2025 Jack Henry
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/README.md

@@ -6,8 +6,8 @@ SPDX-License-Identifier: Apache-2.0
 
 ## @jack-henry/jh-elements
 
-Contains Jack Henry's web component library. To get started, visit our documentation sites.
+Contains the Forge Design System web component library. To get started, visit our documentation sites.
 
-* [Jackhenry.design](https://jackhenry.design) focuses on introducing the underlying concepts of the Design System, usage guidelines, and a style guide.
+* [Jackhenry.design](https://jackhenry.design) focuses on introducing the underlying concepts of the design system, usage guidelines, and a style guide.
 * [Storybook](https://main--68f8e6a25b256d0ef89b13e6.chromatic.com/?path=/docs/welcome-about-jh--docs) focuses on technical implementations and considerations 
 for engineers including author guidance and a playground where you can test drive our components.

package/components/badge/badge.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-badge-border-radius - The badge border radius. Defaults to `--jh-border-radius-pill`.
@@ -12,7 +13,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * 
  * @customElement jh-badge
  */
-export class JhBadge extends LitElement {
+export class JhBadge extends JhElement {
   static get styles() {
     return css`
     :host {
@@ -70,5 +71,4 @@ export class JhBadge extends LitElement {
     `;
   }
 }
-customElements.define('jh-badge', JhBadge);
-
+JhBadge.register('jh-badge', JhBadge);

package/components/button/button.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';
 import '../progress/progress.js';
 
 /**
@@ -102,20 +103,18 @@ import '../progress/progress.js';
  * @cssprop --jh-button-border-radius - The button container border-radius. Defaults to `--jh-border-radius-100`.
  * @cssprop --jh-button-opacity-disabled - The button container opacity when disabled. Defaults to `--jh-opacity-disabled`.
  * @cssprop --jh-button-color-focus - The button container outline when it receives keyboard focus. Defaults to `--jh-border-focus-color`.
- * @cssprop --jh-button-size - The button width when no label is set, and the button height. Button width and height defaults to `--jh-dimension-1000` when `size="small"`, `--jh-dimension-1200` when `size="medium"`, and `--jh-dimension-1400` when `size="large"`. 
+ * @cssprop --jh-button-size - The button width of single icon buttons, and the button height. Button width and height defaults to `--jh-dimension-600` when `size="x-small"`,`--jh-dimension-800` when `size="small"`, `--jh-dimension-1000` when `size="medium"`, and `--jh-dimension-1200` when `size="large"`. 
  *
- * @slot jh-button-icon - Use to insert an icon.
+ * @slot jh-button-icon-left - Use to insert an icon on the left side of the button and for single icon buttons.
+ * @slot jh-button-icon-right - Use to insert an icon on the right side of the button and for single icon buttons.
  * @customElement jh-button
  */
-export class JhButton extends LitElement {
+export class JhButton extends JhElement {
   /** @ignore */
   static get formAssociated() {
     return true;
   }
 
-  /** @type {ElementInternals} */
-  #internals;
-
   /** @type {?string} */
   #value;
 
@@ -156,6 +155,7 @@ export class JhButton extends LitElement {
         display: flex;
         justify-content: center;
         align-items: center;
+        gap: var(--jh-dimension-200);
       }
       button:focus,
       a:focus {
@@ -179,17 +179,21 @@ export class JhButton extends LitElement {
         pointer-events: none;
       }
       /* Size styling ('medium' is default) */
+      :host([size='x-small']) button,
+      :host([size='x-small']) a {
+        height: var(--jh-button-size, var(--jh-dimension-600));
+      }
       :host([size='small']) button,
       :host([size='small']) a {
-        height: var(--jh-button-size, var(--jh-dimension-1000));
+        height: var(--jh-button-size, var(--jh-dimension-800));
       }
       :host([size='medium']) button,
       :host([size='medium']) a {
-        height: var(--jh-button-size, var(--jh-dimension-1200));
+        height: var(--jh-button-size, var(--jh-dimension-1000));
       }
       :host([size='large']) button,
       :host([size='large']) a {
-        height: var(--jh-button-size, var(--jh-dimension-1400));
+        height: var(--jh-button-size, var(--jh-dimension-1200));
       }
       /* appearance='primary' ('secondary' is default) */
       :host([appearance='primary']) button,
@@ -687,33 +691,28 @@ export class JhButton extends LitElement {
           var(--jh-color-content-on-negative-enabled)
         );
       }
-      /* Icon-related Type option styling */
-      :host([icon-position='before'][label]) ::slotted(*) {
-        margin-right: var(--jh-dimension-200);
+
+      /* Single icon styling */
+      :host button.single-icon,
+      :host a.single-icon {
+        padding: 0;
       }
-      :host([icon-position='after'][label]) ::slotted(*) {
-        margin-left: var(--jh-dimension-200);
+      :host([size='x-small']) button.single-icon,
+      :host([size='x-small']) a.single-icon {
+        width: var(--jh-button-size, var(--jh-dimension-600));
       }
-      :host([icon-position='after']) .content-wrapper {
-        flex-direction: row-reverse;
+      :host([size='small']) button.single-icon,
+      :host([size='small']) a.single-icon {
+        width: var(--jh-button-size, var(--jh-dimension-800));
       }
-      /* Icon only styling */
-      :host(:not([label])[size='small']) button,
-      :host(:not([label])[size='small']) a {
+      :host([size='medium']) button.single-icon,
+      :host([size='medium']) a.single-icon {
         width: var(--jh-button-size, var(--jh-dimension-1000));
       }
-      :host(:not([label])[size='medium']) button,
-      :host(:not([label])[size='medium']) a {
+      :host([size='large']) button.single-icon,
+      :host([size='large']) a.single-icon {
         width: var(--jh-button-size, var(--jh-dimension-1200));
       }
-      :host(:not([label])[size='large']) button,
-      :host(:not([label])[size='large']) a {
-        width: var(--jh-button-size, var(--jh-dimension-1400));
-      }
-      :host(:not([label])) button,
-      :host(:not([label])) a {
-        padding: 0;
-      }
       /* Block styling */
       :host([block]) {
         display: block;
@@ -721,6 +720,8 @@ export class JhButton extends LitElement {
       }
       :host(:not([label])[block]) button,
       :host(:not([label])[block]) a,
+      :host([block]) button.single-icon,
+      :host([block]) a.single-icon,
       :host([block]) button,
       :host([block]) a {
         width: 100%;
@@ -759,12 +760,6 @@ export class JhButton extends LitElement {
       href: {
         type: String,
       },
-      /** Sets location of icon in relation to the label. */
-      iconPosition: {
-        type: String,
-        attribute: 'icon-position',
-        reflect: true,
-      },
       /** Displays a progress indicator. */
       pending: {
         type: Boolean,
@@ -795,15 +790,21 @@ export class JhButton extends LitElement {
       value: {
         type: String,
       },
+      _hasLeftSlotContent: {
+        type: Boolean,
+        state: true,
+      },
+      _hasRightSlotContent: {
+        type: Boolean,
+        state: true,
+      },
     };
   }
 
   constructor() {
     super();
     /** @type {ElementInternals} */
-    this.#internals = this.attachInternals();
-    /** @type {ElementInternals} */
-    this.#internals.form;
+    this.internals.form;
     /** @type {'true'|'false'} */
     this.accessibleDisabled = null;
     /** @type {?string} */
@@ -816,15 +817,13 @@ export class JhButton extends LitElement {
     this.disabled = false;
     /** @type {?string} */
     this.href = null;
-    /** @type {'before'|'after'} */
-    this.iconPosition = 'before';
     /** @type {?boolean} */
     this.pending = false;
     /** @type {?string} */
     this.label = null;
     /** @type {?string} */
     this.name = null;
-    /** @type {'small'|'medium'|'large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'} */
     this.size = 'medium';
     /** @type {?boolean} */
     this.submit = false;
@@ -832,6 +831,10 @@ export class JhButton extends LitElement {
     this.target = null;
     /** @type {?string} */
     this.value = null;
+    /** @type {boolean} */
+    this._hasLeftSlotContent = false;
+    /** @type {boolean} */
+    this._hasRightSlotContent = false;
 
     this.addEventListener('click', this.#onClick);
     this.addEventListener('keydown', this.#handleKeydown);
@@ -846,7 +849,7 @@ export class JhButton extends LitElement {
     const oldValue = this.#value;
     if (newValue !== oldValue) {
       this.#value = newValue;
-      this.#internals.setFormValue(newValue);
+      this.internals.setFormValue(newValue);
     }
     this.requestUpdate('value', oldValue);
   }
@@ -856,6 +859,19 @@ export class JhButton extends LitElement {
     new ResizeObserver(this.#cacheButtonDimensions.bind(this)).observe(this);
   }
 
+  //if button size changes, adjust the size of the icons accordingly.
+  updated(changedProperties) {
+  if (changedProperties.has('size')) {
+    const iconSize = this.size === 'x-small' ? 'x-small' : 'medium';
+    const slots = this.shadowRoot.querySelectorAll('slot');
+    slots.forEach(slot => {
+    const icon = slot?.assignedElements({flatten: true})[0];
+    if (icon) {
+      icon.setAttribute('size', iconSize);
+      }
+    });
+  }
+}
   #cacheButtonDimensions() {
     const { width } = this.getBoundingClientRect();
 
@@ -868,8 +884,8 @@ export class JhButton extends LitElement {
 
   #onClick(event) {
     //If I'm a submit button in a form and I'm not disabled submit the form
-    if (this.submit && this.#internals.form && !this.disabled) {
-      this.#internals.form.requestSubmit();
+    if (this.submit && this.internals.form && !this.disabled) {
+      this.internals.form.requestSubmit();
     }
   }
 
@@ -883,11 +899,43 @@ export class JhButton extends LitElement {
     }
   }
 
-  #handleSlotChange() {
-    this.firstElementChild.setAttribute('aria-hidden', 'true');
-    this.firstElementChild.setAttribute('size', 'medium');
+  #handleSlotChange(e) {
+
+    let newSlottedElement = e.target.assignedElements()[0];
+    let slot = e.target;
+
+    if (slot.name !== 'jh-button-icon-left' && slot.name !== 'jh-button-icon-right') {
+      return;
+    }
+
+    // Set icon size
+    if (newSlottedElement?.tagName.startsWith('JH-ICON')) {
+      newSlottedElement.setAttribute('aria-hidden', 'true');
+
+      if (this.size === 'x-small') {
+        newSlottedElement.setAttribute('size', 'x-small');
+      } else {
+        newSlottedElement.setAttribute('size', 'medium');
+      }
+    }
+    
+    if (slot.name === 'jh-button-icon-left') {
+      this._hasLeftSlotContent = this.#checkSlotContent(slot);
+    } 
+    if (slot.name === 'jh-button-icon-right') {
+      this._hasRightSlotContent = this.#checkSlotContent(slot);
+    }
   }
 
+    #checkSlotContent(slot) {
+    // Slotted and fallback elements
+    const slottedElements = slot.assignedElements({ flatten: true });
+    if (slottedElements.length > 0) {
+        return true;
+    }
+    return false;
+}
+
   #renderButtonContent(pending, label) {
     let buttonContent;
     let buttonLabel;
@@ -898,15 +946,19 @@ export class JhButton extends LitElement {
 
     if (pending && !this.disabled) {
       buttonContent = html`
-        <jh-progress type="circular" indeterminate></jh-progress>
+        <jh-progress type="circular" indeterminate size=${this.size === 'x-small' ? 'small' : 'medium'}></jh-progress>
       `;
     } else {
       buttonContent = html`
         <slot
-          name="jh-button-icon"
+          name="jh-button-icon-left"
           @slotchange=${this.#handleSlotChange}
         ></slot>
         ${buttonLabel}
+        <slot
+          name="jh-button-icon-right"
+          @slotchange=${this.#handleSlotChange}
+        ></slot>
       `;
     }
 
@@ -916,6 +968,7 @@ export class JhButton extends LitElement {
   render() {
     const buttonContent = this.#renderButtonContent(this.pending, this.label);
     let ariaDisabled;
+    let singleIconClass = !this.label && (this._hasLeftSlotContent !== this._hasRightSlotContent) ? 'single-icon' : null;
 
     if (this.accessibleDisabled !== 'false') {
       ariaDisabled = this.accessibleDisabled;
@@ -924,6 +977,7 @@ export class JhButton extends LitElement {
     if (this.href) {
       return html`
         <a
+          class=${ifDefined(singleIconClass)}
           tabindex="0"
           aria-disabled=${ifDefined(ariaDisabled)}
           aria-label=${ifDefined(this.accessibleLabel)}
@@ -937,6 +991,7 @@ export class JhButton extends LitElement {
     } else {
       return html`
         <button
+          class=${ifDefined(singleIconClass)}
           tabindex="0"
           aria-disabled=${ifDefined(ariaDisabled)}
           aria-label=${ifDefined(this.accessibleLabel)}
@@ -949,5 +1004,4 @@ export class JhButton extends LitElement {
     }
   }
 }
-
-customElements.define('jh-button', JhButton);
+JhButton.register('jh-button', JhButton);

package/components/card/card.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';
 import '../divider/divider.js';
 
 /**
@@ -31,7 +32,7 @@ import '../divider/divider.js';
  * @slot jh-card-footer - Use to insert card footer content.
  * @customElement jh-card
  */
-export class JhCard extends LitElement {
+export class JhCard extends JhElement {
   static get styles() {
     return css`
       :host {
@@ -341,5 +342,4 @@ export class JhCard extends LitElement {
     `;
   }
 }
-
-customElements.define('jh-card', JhCard);
+JhCard.register('jh-card', JhCard);

package/components/checkbox/checkbox.js

@@ -2,10 +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';
-
-let id = 0;
+import { JhElement } from '../element/element.js';
 
 /**
  * @cssprop --jh-checkbox-opacity-disabled - The checkbox opacity when disabled. Defaults to `--jh-opacity-disabled`.
@@ -54,22 +53,19 @@ let id = 0;
  * @cssprop --jh-checkbox-input-color-border-indeterminate-disabled - The checkbox border-color when indeterminate and disabled. Defaults to `--jh-color-content-brand-enabled`.
  * @cssprop --jh-checkbox-status-color-border-indeterminate-disabled - The checkbox color when indeterminate status mark when disabled. Defaults to `--jh-color-content-on-brand-enabled`.
  *
- * @event jh-change - Dispatched when the state of the checkbox has changed.
+ * @event jh-change - Dispatched when the state of the checkbox has changed. Event payload includes the `checked` state of the checkbox and can be accessed via `e.detail.state.checked`.
  *
  * @customElement jh-checkbox
  */
-export class JhCheckbox extends LitElement {
+export class JhCheckbox extends JhElement {
   static get formAssociated() {
     return true;
   }
+
   /** @type {?Boolean} */
   #checked;
-  /** @type {?Number} */
-  #id;
   /** @type {?Boolean} */
   #indeterminate;
-  /** @type {ElementInternals} */
-  #internals;
   /** @type {?string} */
   #value;
 
@@ -456,7 +452,6 @@ export class JhCheckbox extends LitElement {
 
   constructor() {
     super();
-    this.#internals = this.attachInternals();
     /** @type {?boolean} */
     this.checked = false;
     /** @type {?boolean} */
@@ -475,22 +470,17 @@ export class JhCheckbox extends LitElement {
     this.accessibleLabel = null;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.#id = id++;
-  }
-
   /**
    * Returns the checkbox's parent form element.
    * @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} */
@@ -537,20 +527,19 @@ export class JhCheckbox extends LitElement {
 
   #updateFormValue(value, checked, indeterminate) {
     if (!indeterminate) {
-      this.#internals.setFormValue(checked ? value || 'on' : null);
-    } else this.#internals.setFormValue(null);
+      this.internals.setFormValue(checked ? value || 'on' : null);
+    } else this.internals.setFormValue(null);
   }
 
   #handleChange(e) {
     this.checked = e.target.checked;
     this.indeterminate = false;
     this.#updateFormValue(this.value, this.checked, this.indeterminate);
-    const options = {
-      bubbles: true,
-      composed: true,
-      cancelable: true,
-    };
-    this.dispatchEvent(new CustomEvent('jh-change', options));
+    this.dispatchCustomEvent('jh-change', {
+      state: {
+        checked: this.checked,
+      },
+    });
   }
 
   render() {
@@ -559,7 +548,7 @@ export class JhCheckbox extends LitElement {
 
     if (this.helperText) {
       helperText = html`
-        <p class="helper-text" id="checkbox-helper-text-${this.#id}">
+        <p class="helper-text" id="checkbox-helper-text-${this.uniqueId}">
           ${this.helperText}
         </p>
       `;
@@ -568,7 +557,7 @@ export class JhCheckbox extends LitElement {
     if (this.label) {
       label = html`
         <div class="label-container">
-          <label class="label-text" for="checkbox-label-${this.#id}">
+          <label class="label-text" for="checkbox-label-${this.uniqueId}">
             ${this.label}
           </label>
           ${helperText}
@@ -587,9 +576,9 @@ export class JhCheckbox extends LitElement {
         aria-label=${ifDefined(this.accessibleLabel)}
         value=${ifDefined(this.value)}
         name=${ifDefined(this.name)}
-        id=${ifDefined(this.label ? `checkbox-label-${this.#id}` : null)}
+        id=${ifDefined(this.label ? `checkbox-label-${this.uniqueId}` : null)}
         aria-describedby=${ifDefined(
-          this.helperText ? `checkbox-helper-text-${this.#id}` : null
+          this.helperText ? `checkbox-helper-text-${this.uniqueId}` : null
         )}
       />
       <span aria-hidden="true"></span>
@@ -597,5 +586,4 @@ export class JhCheckbox extends LitElement {
     `;
   }
 }
-
-customElements.define('jh-checkbox', JhCheckbox);
+JhCheckbox.register('jh-checkbox', JhCheckbox);

package/components/checkbox-group/checkbox-group.js

@@ -2,10 +2,10 @@
 //
 // 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;
 /**
  *
  * @cssprop --jh-checkbox-group-label-color-text - The label text color. Defaults to `--jh-color-content-primary-enabled`.
@@ -23,10 +23,7 @@ let id = 0;
  *
  * @customElement jh-checkbox-group
  */
-export class JhCheckboxGroup extends LitElement {
-  /** @type {?Number} */
-  #id;
-
+export class JhCheckboxGroup extends JhElement {
   static get styles() {
     return css`
       :host {
@@ -211,11 +208,6 @@ export class JhCheckboxGroup extends LitElement {
     this.showIndicator = false;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.#id = id++;
-  }
-
   firstUpdated() {
     const slot = this.renderRoot?.querySelector('slot');
     this.#syncDisabledToChildren();
@@ -239,13 +231,13 @@ export class JhCheckboxGroup extends LitElement {
 
   #getAriaDescribedBy() {
     if (this.errorText && this.invalid && this.helperText && this.label) {
-      return `checkbox-group-error-${this.#id} checkbox-group-helper-${
-        this.#id
+      return `checkbox-group-error-${this.uniqueId} checkbox-group-helper-${
+        this.uniqueId
       }`;
     } else if (this.errorText && this.invalid) {
-      return `checkbox-group-error-${this.#id}`;
+      return `checkbox-group-error-${this.uniqueId}`;
     } else if (this.helperText && this.label) {
-      return `checkbox-group-helper-${this.#id}`;
+      return `checkbox-group-helper-${this.uniqueId}`;
     }
   }
 
@@ -264,24 +256,24 @@ export class JhCheckboxGroup extends LitElement {
     }
 
     if (this.helperText) {
-      helperText = html`<p class="helper-text" id="checkbox-group-helper-${this.#id}">${this.helperText}</p>`;
+      helperText = html`<p class="helper-text" id="checkbox-group-helper-${this.uniqueId}">${this.helperText}</p>`;
     }
 
     if (this.label) {
       label = html`
-        <legend class="label" for="checkbox-group-label-${this.#id}">
+        <legend class="label" for="checkbox-group-label-${this.uniqueId}">
           ${this.label}${indicator}
         </legend>
         ${helperText}`;
     }
 
     if (this.invalid && this.errorText) {
-      errorText = html`<p class="error-text" id="checkbox-group-error-${this.#id}">${this.errorText}</p>`;
+      errorText = html`<p class="error-text" id="checkbox-group-error-${this.uniqueId}">${this.errorText}</p>`;
     }
 
     return html`
       <fieldset
-        id=${ifDefined(this.label ? `checkbox-group-label-${this.#id}` : null)}
+        id=${ifDefined(this.label ? `checkbox-group-label-${this.uniqueId}` : null)}
         aria-describedby=${ifDefined(this.#getAriaDescribedBy())}
         ?required=${this.required}
         aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
@@ -294,4 +286,4 @@ export class JhCheckboxGroup extends LitElement {
     `;
   }
 }
-customElements.define('jh-checkbox-group', JhCheckboxGroup);
+JhCheckboxGroup.register('jh-checkbox-group', JhCheckboxGroup);

package/components/divider/divider.js

@@ -2,7 +2,8 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css } from 'lit';
+import { css } from 'lit';
+import { JhElement } from '../element/element.js';
 
 /**
  * @cssprop --jh-divider-border-width - The divider width. Defaults to `--jh-border-decorative-width`.
@@ -11,7 +12,7 @@ import { LitElement, css } from 'lit';
  * @cssprop --jh-divider-space-inset - The divider margin-left. Defaults to `0`.
  * @customElement jh-divider
  */
-export class JhDivider extends LitElement {
+export class JhDivider extends JhElement {
   static get styles() {
     return css`
         :host {
@@ -67,7 +68,7 @@ export class JhDivider extends LitElement {
           margin-left: var(--inset, var(--jh-divider-space-inset));
         }
       `
-        }
+  }
 
   static get properties() {
     return {
@@ -87,5 +88,4 @@ export class JhDivider extends LitElement {
     this.inset = null;
   }
 }
-
-customElements.define('jh-divider', JhDivider);
+JhDivider.register('jh-divider', JhDivider);