@jack-henry/jh-elements 2.0.0-beta.11 → 2.0.0-beta.12

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

@@ -30,10 +30,14 @@ export class JhCheckboxGroup extends LitElement {
   static get styles() {
     return css`
       :host {
-        font-family: var(--jh-font-helper-regular-font-family);
-        font-weight: var(--jh-font-helper-regular-font-weight);
-        font-size: var(--jh-font-helper-regular-font-size);
-        line-height: var(--jh-font-helper-regular-line-height);
+        --checkbox-group-helper-regular-font-family: var(--jh-font-helper-regular-font-family);
+        --checkbox-group-helper-regular-font-weight: var(--jh-font-helper-regular-font-weight);
+        --checkbox-group-helper-regular-font-size: var(--jh-font-helper-regular-font-size);
+        --checkbox-group-helper-regular-line-height: var(--jh-font-helper-regular-line-height);
+        font-family: var(--checkbox-group-helper-regular-font-family);
+        font-weight: var(--checkbox-group-helper-regular-font-weight);
+        font-size: var(--checkbox-group-helper-regular-font-size);
+        line-height: var(--checkbox-group-helper-regular-line-height);
         display: block;
       }
       /* reset fieldset and legend for styling */
@@ -91,6 +95,10 @@ export class JhCheckboxGroup extends LitElement {
           --jh-checkbox-group-label-color-text,
           var(--jh-color-content-primary-enabled)
         );
+        font-family: var(--jh-font-helper-medium-font-family);
+        font-weight: var(--jh-font-helper-medium-font-weight);
+        font-size: var(--jh-font-helper-medium-font-size);
+        line-height: var(--jh-font-helper-medium-line-height);
       }
       .helper-text {
         color: var(
@@ -115,6 +123,10 @@ export class JhCheckboxGroup extends LitElement {
           --jh-checkbox-group-required-color-text-optional,
           var(--jh-color-content-primary-enabled)
         );
+        font-family: var(--checkbox-group-helper-regular-font-family);
+        font-weight: var(--checkbox-group-helper-regular-font-weight);
+        font-size: var(--checkbox-group-helper-regular-font-size);
+        line-height: var(--checkbox-group-helper-regular-line-height);
       }
       :host([show-indicator][required]) .indicator {
         color: var(

package/components/input/input.js

@@ -97,10 +97,14 @@ export class JhInput extends LitElement {
   static get styles() {
     return css`
       :host {
-        font-family: var(--jh-font-helper-regular-font-family);
-        font-weight: var(--jh-font-helper-regular-font-weight);
-        font-size: var(--jh-font-helper-regular-font-size);
-        line-height: var(--jh-font-helper-regular-line-height);
+        --input-helper-regular-font-family: var(--jh-font-helper-regular-font-family);
+        --input-helper-regular-font-weight: var(--jh-font-helper-regular-font-weight);
+        --input-helper-regular-font-size: var(--jh-font-helper-regular-font-size);
+        --input-helper-regular-line-height: var(--jh-font-helper-regular-line-height);
+        font-family: var(--input-helper-regular-font-family);
+        font-weight: var(--input-helper-regular-font-weight);
+        font-size: var(--input-helper-regular-font-size);
+        line-height: var(--input-helper-regular-line-height);
         display: inline-block;
         width: 100%;
         --jh-button-size: var(--jh-dimension-800); 
@@ -121,6 +125,10 @@ export class JhInput extends LitElement {
           --jh-input-label-color-text,
           var(--jh-color-content-primary-enabled)
         );
+        font-family: var(--jh-font-helper-medium-font-family);
+        font-weight: var(--jh-font-helper-medium-font-weight);
+        font-size: var(--jh-font-helper-medium-font-size);
+        line-height: var(--jh-font-helper-medium-line-height);
         display: block;
       }
       .helper-text {
@@ -331,6 +339,10 @@ export class JhInput extends LitElement {
           --jh-input-optional-color-text,
           var(--jh-color-content-primary-enabled)
         );
+        font-family: var(--input-helper-regular-font-family);
+        font-weight: var(--input-helper-regular-font-weight);
+        font-size: var(--input-helper-regular-font-size);
+        line-height: var(--input-helper-regular-line-height);
       }
       :host([show-indicator][required]) span {
         color: var(
@@ -370,7 +382,7 @@ export class JhInput extends LitElement {
       hideLeftSlot: { type: Boolean, attribute: 'hide-left-slot' },
       /** Hides the right slot from input. */
       hideRightSlot: { type: Boolean, attribute: 'hide-right-slot' },
-      /** Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details. */
+      /** Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details. */
       inputMask: { type: String, attribute: 'input-mask' },
       /** Indicates expected input value type and allows for browsers to display appropriate virtual keyboard.
        *

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

@@ -9,10 +9,9 @@ import { JhInput } from '../input/input.js';
  * @customElement jh-input-email
  */
 export class JhInputEmail extends JhInput {
-  firstUpdated() {
-    super.firstUpdated();
-    let inputEl = this.shadowRoot.querySelector('input');
-    inputEl.setAttribute('type', 'email');
+  constructor() {
+    super();
+    this.inputmode = 'email';
   }
 }
 customElements.define('jh-input-email', JhInputEmail);

package/components/menu/menu.js

@@ -45,6 +45,13 @@ export class JhMenu extends LitElement {
         display: flex;
         flex-direction: column;
         position: relative;
+        overflow: hidden;
+        height: 100%;
+      }
+      .menu-content {
+        flex: 1;
+        overflow-y: auto;
+        width: 100%;
       }
     `;
   }
@@ -54,7 +61,11 @@ export class JhMenu extends LitElement {
     this.#internals.role = 'menu';
   }
   render() {
-    return html`<slot></slot>`;
+    return html`
+      <div class="menu-content">
+        <slot></slot>
+      </div>
+    `;
   }
 }
 customElements.define('jh-menu', JhMenu);

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

@@ -17,6 +17,7 @@ let id = 0;
  * Defaults to `--jh-color-content-secondary-enabled`.
  * @cssprop --jh-radio-group-error-color-text - The error-text text color. 
  * Defaults to `--jh-color-content-negative-enabled`.
+ * @cssprop --jh-radio-group-opacity-disabled - The opacity of the radio group when disabled. Defaults to `--jh-opacity-disabled`.
  *
  * @slot default - Use to insert `<jh-radio>` components(s).
  * 
@@ -39,10 +40,14 @@ export class JhRadioGroup extends LitElement {
   static get styles() {
     return css`
       :host {
-        font-family: var(--jh-font-helper-regular-font-family);
-        font-weight: var(--jh-font-helper-regular-font-weight);
-        font-size: var(--jh-font-helper-regular-font-size);
-        line-height: var(--jh-font-helper-regular-line-height);
+        --radio-group-helper-regular-font-family: var(--jh-font-helper-regular-font-family);
+        --radio-group-helper-regular-font-weight: var(--jh-font-helper-regular-font-weight);
+        --radio-group-helper-regular-font-size: var(--jh-font-helper-regular-font-size);
+        --radio-group-helper-regular-line-height: var(--jh-font-helper-regular-line-height);
+        font-family: var(--radio-group-helper-regular-font-family);
+        font-weight: var(--radio-group-helper-regular-font-weight);
+        font-size: var(--radio-group-helper-regular-font-size);
+        line-height: var(--radio-group-helper-regular-line-height);
         display: block;
       }
       /* reset styling on fieldset and legend */
@@ -51,6 +56,18 @@ export class JhRadioGroup extends LitElement {
         padding: 0;
         margin: 0;
       }
+      :host([disabled]) {
+        --group-disabled-opacity: var(--jh-radio-group-opacity-disabled, var(--jh-opacity-disabled));
+      }
+      :host([disabled]) .label,
+      :host([disabled]) .helper-text,
+      :host([disabled]) .error-text {
+        opacity: var(--group-disabled-opacity);
+        pointer-events: none;
+      }
+      :host([disabled]) ::slotted(jh-radio) {
+        --jh-radio-opacity-disabled: var(--group-disabled-opacity);
+      }
       :host legend {
         padding: 0;
       }
@@ -85,6 +102,10 @@ export class JhRadioGroup extends LitElement {
           --jh-radio-group-label-color-text,
           var(--jh-color-content-primary-enabled)
         );
+        font-family: var(--jh-font-helper-medium-font-family);
+        font-weight: var(--jh-font-helper-medium-font-weight);
+        font-size: var(--jh-font-helper-medium-font-size);
+        line-height: var(--jh-font-helper-medium-line-height);
       }
       .helper-text {
         color: var(
@@ -110,6 +131,10 @@ export class JhRadioGroup extends LitElement {
           --jh-radio-group-required-color-text-optional,
           var(--jh-color-content-primary-enabled)
         );
+        font-family: var(--radio-group-helper-regular-font-family);
+        font-weight: var(--radio-group-helper-regular-font-weight);
+        font-size: var(--radio-group-helper-regular-font-size);
+        line-height: var(--radio-group-helper-regular-line-height);
       }
       :host([show-indicator][required]) .indicator {
         color: var(
@@ -126,6 +151,11 @@ export class JhRadioGroup extends LitElement {
         type: String,
         attribute: 'accessible-label',
       },
+      /** Disables the radio group and prevents all user interactions. May cause the group to be ignored by assistive technologies (AT). */      
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
       /** Text to be displayed when radio group has failed validation and `invalid` is true. */
       errorText: {
         type: String,
@@ -181,17 +211,19 @@ export class JhRadioGroup extends LitElement {
     this.#internals = this.attachInternals();
     /** @type {?string} */
     this.accessibleLabel = null;
+    /** @type {boolean} */
+    this.disabled = false;
     /** @type {?string} */
     this.errorText = null;
     /** @type {?string} */
     this.helperText = null;
-    /** @type {?Boolean} */
+    /** @type {?boolean} */
     this.invalid = false;
     /** @type {?string} */
     this.label = null;
     /** @type {?string} */
     this.name = null;
-    /** @type {?Boolean} */
+    /** @type {?boolean} */
     this.required = false;
     /** @type {'vertical'|'horizontal'} */
     this.orientation = 'vertical';
@@ -210,6 +242,16 @@ export class JhRadioGroup extends LitElement {
     this.#id = id++;
   }
 
+  firstUpdated() {
+    this._syncDisabledToChildren();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('disabled')) {
+      this._syncDisabledToChildren();
+    }
+  }
+
   /**
    * Returns the radio group's parent form element.
    * @type {?HTMLFormElement}
@@ -237,6 +279,16 @@ export class JhRadioGroup extends LitElement {
     this.requestUpdate('value', oldValue);
   }
 
+  _syncDisabledToChildren() {
+    const slot = this.renderRoot.querySelector('slot');
+    if(!slot) return;
+
+    const radios = slot.assignedElements().filter((el) => el.tagName === 'JH-RADIO');
+    radios.forEach((radio) => {
+      radio.disabled = this.disabled;
+    });
+  }
+
   #getRadios() {
     return [...this.querySelectorAll('jh-radio')];
   }
@@ -260,6 +312,8 @@ export class JhRadioGroup extends LitElement {
     if (!this.#checked) {
       radios[0].tabIndex = 0;
     }
+
+    this._syncDisabledToChildren();
   }
 
   #handleChange(e) {
@@ -384,6 +438,7 @@ export class JhRadioGroup extends LitElement {
         role="radiogroup"
         id=${ifDefined(this.label ? `radio-group-label-${this.#id}` : null)}
         aria-describedby=${ifDefined(this.#getAriaDescribedBy())}
+        aria-disabled=${ifDefined(this.disabled ? 'true' : null)}
         aria-required=${ifDefined(this.required ? 'true' : 'false')}
         aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
         aria-label=${ifDefined(this.accessibleLabel)}

package/components/tooltip/tooltip.js

@@ -13,6 +13,7 @@ const openAttr = 'open';
  * @cssprop --jh-tooltip-color-text - The tooltip text color. Defaults to `--jh-color-content-on-primary-enabled`.
  *
  * @slot default - Use to insert the element that triggers the tooltip.
+ * @slot jh-tooltip-content - Use to insert the content of the tooltip.
  *
  * @customElement jh-tooltip
  */
@@ -37,10 +38,10 @@ export class JhTooltip extends LitElement {
         );
         border-radius: var(--jh-border-radius-100);
         padding: var(--jh-dimension-200);
-        font-family: var(--jh-font-helper-regular-font-family);
-        font-weight: var(--jh-font-helper-regular-font-weight);
-        font-size: var(--jh-font-helper-regular-font-size);
-        line-height: var(--jh-font-helper-regular-line-height);
+        font-family: var(--jh-font-helper-bold-font-family);
+        font-weight: var(--jh-font-helper-bold-font-weight);
+        font-size: var(--jh-font-helper-bold-font-size);
+        line-height: var(--jh-font-helper-bold-line-height);
         max-width: 160px;
         width: max-content;
         position: absolute;
@@ -204,12 +205,6 @@ export class JhTooltip extends LitElement {
         type: Boolean,
         attribute: 'flip-disabled',
       },
-      /**
-       * Provides information about the item which triggered the tooltip.
-       */
-      label: {
-        type: String,
-      },
       /**
        * Determines whether the tooltip is open or closed. Can be set on the tooltip to force it open.
        */
@@ -232,8 +227,6 @@ export class JhTooltip extends LitElement {
     this.#internals = this.attachInternals();
     /**@type {?Boolean} */
     this.flipDisabled = false;
-    /** @type {?string} */
-    this.label = null;
     /**@type {?Boolean} */
     this.open = false;
     /** @type {?string} */
@@ -244,39 +237,6 @@ export class JhTooltip extends LitElement {
     super.connectedCallback();
     /** @ignore */
     this.id = `tooltip-describedby-${id++}`;
-    let observer = new MutationObserver(this.#handleEmptyLabel.bind(this));
-    let options = {
-      childList: true,
-    };
-    observer.observe(this.shadowRoot, options);
-  }
-
-  #handleEmptyLabel(mutations) {
-    for (let mutation of mutations) {
-      const addedNodes = Array.from(mutation.addedNodes);
-      //check if any of the added nodes is a span
-      const spanAdded = addedNodes.some(
-        (addedNode) => addedNode.tagName === 'SPAN'
-      );
-
-      if (spanAdded) {
-        this.#internals.role = 'tooltip';
-        this.addEventListener('focus', this.#handleOpenTooltip, true);
-        this.addEventListener('mouseenter', this.#handleOpenTooltip);
-        this.addEventListener('blur', this.#handleCloseTooltip, true);
-        this.addEventListener('mouseleave', this.#handleCloseTooltip);
-        this.addEventListener('keydown', this.#handleKeyDown);
-      }
-
-      if (mutation.removedNodes.length > 0) {
-        this.#internals.role = '';
-        this.removeEventListener('focus', this.#handleOpenTooltip);
-        this.removeEventListener('mouseenter', this.#handleOpenTooltip);
-        this.removeEventListener('blur', this.#handleCloseTooltip);
-        this.removeEventListener('mouseleave', this.#handleCloseTooltip);
-        this.removeEventListener('keydown', this.#handleKeyDown);
-      }
-    }
   }
 
   disconnectedCallback() {
@@ -288,13 +248,42 @@ export class JhTooltip extends LitElement {
     this.removeEventListener('keydown', this.#handleKeyDown);
   }
 
-  #handleSlotChange() {
+  #handleContentSlotChange(e) {
+    const slot = e.target;
+    const hasContent = slot.assignedNodes().length > 0;
+
+    if (hasContent) {
+      this.#internals.role = 'tooltip';
+      this.addEventListener('focus', this.#handleOpenTooltip, true);
+      this.addEventListener('mouseenter', this.#handleOpenTooltip);
+      this.addEventListener('blur', this.#handleCloseTooltip, true);
+      this.addEventListener('mouseleave', this.#handleCloseTooltip);
+      this.addEventListener('keydown', this.#handleKeyDown);
+    } else {
+      this.#internals.role = '';
+      this.#handleCloseTooltip();
+      this.removeEventListener('focus', this.#handleOpenTooltip);
+      this.removeEventListener('mouseenter', this.#handleOpenTooltip);
+      this.removeEventListener('blur', this.#handleCloseTooltip);
+      this.removeEventListener('mouseleave', this.#handleCloseTooltip);
+      this.removeEventListener('keydown', this.#handleKeyDown);
+    }
+  }
+
+  #handleSlotChange(e) {
     //get id set previously in the constructor and set it to reference aria-describedby on the first element in the slot
     const tooltipId = this.getAttribute('id');
-    this.firstElementChild.setAttribute('aria-describedby', tooltipId);
+    const slottedElements = e.target.assignedElements();
+    const tooltipContent = this.shadowRoot.querySelector('slot[name="jh-tooltip-content"]').assignedElements();
+
+    if (slottedElements.length === 0 || tooltipContent.length === 0) {
+      return;
+    }
+    const triggerElement = slottedElements[0];
+    triggerElement.setAttribute('aria-describedby', tooltipId);
 
     //get display property of element in slot and set it on the jh-tooltip.
-    const tooltipDisplay = window.getComputedStyle(this.firstElementChild).display;
+    const tooltipDisplay = window.getComputedStyle(triggerElement).display;
     this.style.setProperty('display', tooltipDisplay );
   }
 
@@ -323,7 +312,7 @@ export class JhTooltip extends LitElement {
     //check if current position is a valid position otherwise make it fail.
     if (!['left', 'right', 'top-start', 'top-end', 'top-center', 'bottom-start', 'bottom-end', 'bottom-center'].includes(currentPosition)) return;
     
-    if (this.flipDisabled === false && this.label) {
+    if (this.flipDisabled === false) {
      
       //break current position into tooltop position and arrow position
       const [currentTooltip, currentArrow] = currentPosition.split('-');
@@ -450,10 +439,10 @@ export class JhTooltip extends LitElement {
   #getDimensions() {
     return {
       tooltipWidth: this.shadowRoot
-        .querySelector('span')
+        .querySelector('.content')
         .getBoundingClientRect().width,
       tooltipHeight: this.shadowRoot
-        .querySelector('span')
+        .querySelector('.content')
         .getBoundingClientRect().height,
       elemHeight: this.getBoundingClientRect().height,
       elemWidth: this.getBoundingClientRect().width,
@@ -475,22 +464,14 @@ export class JhTooltip extends LitElement {
   }
 
   render() {
-    let label;
-
-    if (this.label) {
-      label = html`
-        <span
-          class=${ifDefined(this.open ? 'show' : null)}
-          aria-hidden=${this.open ? 'false' : 'true'}
-        >
-          ${this.label}
-        </span>
-      `;
-    }
-
     return html`
       <slot @slotchange=${this.#handleSlotChange}></slot>
-      ${label}
+      <span
+        class="content ${ifDefined(this.open ? 'show' : null)}"
+        aria-hidden=${this.open ? 'false' : 'true'}>
+        <slot name="jh-tooltip-content" @slotchange=${this.#handleContentSlotChange}></slot>
+      </span>
+
     `;
   }
 }

package/custom-elements.json

@@ -1380,13 +1380,14 @@
         },
         {
           "name": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
           "name": "inputmode",
           "description": "Indicates expected input value type and allows for browsers to display appropriate virtual keyboard.\n\n[Visit MDN for information on supported inputmode values](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)",
-          "type": "?string"
+          "type": "?string",
+          "default": "\"email\""
         },
         {
           "name": "invalid",
@@ -1517,14 +1518,15 @@
         {
           "name": "inputMask",
           "attribute": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
           "name": "inputmode",
           "attribute": "inputmode",
           "description": "Indicates expected input value type and allows for browsers to display appropriate virtual keyboard.\n\n[Visit MDN for information on supported inputmode values](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)",
-          "type": "?string"
+          "type": "?string",
+          "default": "\"email\""
         },
         {
           "name": "invalid",
@@ -1839,7 +1841,7 @@
         },
         {
           "name": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -1995,7 +1997,7 @@
         {
           "name": "inputMask",
           "attribute": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -2310,7 +2312,7 @@
         },
         {
           "name": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -2447,7 +2449,7 @@
         {
           "name": "inputMask",
           "attribute": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -2754,7 +2756,7 @@
         },
         {
           "name": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -2891,7 +2893,7 @@
         {
           "name": "inputMask",
           "attribute": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -3223,7 +3225,7 @@
         },
         {
           "name": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -3391,7 +3393,7 @@
         {
           "name": "inputMask",
           "attribute": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -3702,7 +3704,7 @@
         },
         {
           "name": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -3839,7 +3841,7 @@
         {
           "name": "inputMask",
           "attribute": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -4145,7 +4147,7 @@
         },
         {
           "name": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -4282,7 +4284,7 @@
         {
           "name": "inputMask",
           "attribute": "input-mask",
-          "description": "Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details.",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
@@ -5246,6 +5248,12 @@
           "description": "Sets an `aria-label` to assist screen reader users when no visible label is present.",
           "type": "?string"
         },
+        {
+          "name": "disabled",
+          "description": "Disables the radio group and prevents all user interactions. May cause the group to be ignored by assistive technologies (AT).",
+          "type": "?Boolean",
+          "default": "false"
+        },
         {
           "name": "error-text",
           "description": "Text to be displayed when radio group has failed validation and `invalid` is true.",
@@ -5259,7 +5267,7 @@
         {
           "name": "invalid",
           "description": "Sets an `aria-invalid` on the radio group to indicate the value supplied was invalid and displays `error-text` when set.",
-          "type": "?Boolean",
+          "type": "?boolean",
           "default": "false"
         },
         {
@@ -5275,7 +5283,7 @@
         {
           "name": "required",
           "description": "Indicates a value is required.",
-          "type": "?Boolean",
+          "type": "?boolean",
           "default": "false"
         },
         {
@@ -5308,6 +5316,13 @@
           "description": "Sets an `aria-label` to assist screen reader users when no visible label is present.",
           "type": "?string"
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the radio group and prevents all user interactions. May cause the group to be ignored by assistive technologies (AT).",
+          "type": "?Boolean",
+          "default": "false"
+        },
         {
           "name": "errorText",
           "attribute": "error-text",
@@ -5324,7 +5339,7 @@
           "name": "invalid",
           "attribute": "invalid",
           "description": "Sets an `aria-invalid` on the radio group to indicate the value supplied was invalid and displays `error-text` when set.",
-          "type": "?Boolean",
+          "type": "?boolean",
           "default": "false"
         },
         {
@@ -5343,7 +5358,7 @@
           "name": "required",
           "attribute": "required",
           "description": "Indicates a value is required.",
-          "type": "?Boolean",
+          "type": "?boolean",
           "default": "false"
         },
         {
@@ -5399,6 +5414,10 @@
         {
           "name": "--jh-radio-group-error-color-text",
           "description": "The error-text text color. \nDefaults to `--jh-color-content-negative-enabled`."
+        },
+        {
+          "name": "--jh-radio-group-opacity-disabled",
+          "description": "The opacity of the radio group when disabled. Defaults to `--jh-opacity-disabled`."
         }
       ]
     },
@@ -6843,11 +6862,6 @@
           "type": "?Boolean",
           "default": "false"
         },
-        {
-          "name": "label",
-          "description": "Provides information about the item which triggered the tooltip.",
-          "type": "?string"
-        },
         {
           "name": "open",
           "description": "Determines whether the tooltip is open or closed. Can be set on the tooltip to force it open.",
@@ -6869,12 +6883,6 @@
           "type": "?Boolean",
           "default": "false"
         },
-        {
-          "name": "label",
-          "attribute": "label",
-          "description": "Provides information about the item which triggered the tooltip.",
-          "type": "?string"
-        },
         {
           "name": "open",
           "attribute": "open",
@@ -6894,6 +6902,10 @@
         {
           "name": "default",
           "description": "Use to insert the element that triggers the tooltip."
+        },
+        {
+          "name": "jh-tooltip-content",
+          "description": "Use to insert the content of the tooltip."
         }
       ],
       "cssProperties": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jack-henry/jh-elements",
   "description": "Jack Henry's design system web components.",
-  "version": "2.0.0-beta.11",
+  "version": "2.0.0-beta.12",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Banno/jack-henry-design-system.git"
@@ -22,7 +22,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@jack-henry/jh-tokens": "2.0.0-beta.8",
+    "@jack-henry/jh-tokens": "2.0.0-beta.9",
     "@jack-henry/jh-icons": "2.0.0-beta.7",
     "lit": "3.3.1"
   },