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

package/README.md

@@ -10,4 +10,4 @@ Contains Jack Henry's web component library. To get started, visit our documenta
 
 * [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, author guidance, and a playground where you can test drive our components.
+for engineers including author guidance and a playground where you can test drive our components.

package/components/badge/badge.js

@@ -7,8 +7,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * @cssprop --jh-badge-border-radius - The badge border radius. Defaults to `--jh-border-radius-pill`.
- * @cssprop --jh-badge-color-background-enabled - The badge background color. Defaults to `--jh-color-content-brand-enabled`. 
- * @cssprop --jh-badge-color-text-enabled - The badge text color. Defaults to `--jh-color-content-on-brand-enabled`.
+ * @cssprop --jh-badge-color-background-enabled - The badge background color. Defaults to `--jh-color-content-negative-enabled`. 
+ * @cssprop --jh-badge-color-text-enabled - The badge text color. Defaults to `--jh-color-content-on-negative-enabled`.
  * 
  * @customElement jh-badge
  */
@@ -19,8 +19,8 @@ export class JhBadge extends LitElement {
       display: inline-flex;
     }
     span {
-      background: var(--jh-badge-color-background-enabled, var(--jh-color-content-brand-enabled));
-      color: var(--jh-badge-color-text-enabled, var(--jh-color-content-on-brand-enabled));
+      background: var(--jh-badge-color-background-enabled, var(--jh-color-content-negative-enabled));
+      color: var(--jh-badge-color-text-enabled, var(--jh-color-content-on-negative-enabled));
       border-radius: var(--jh-badge-border-radius, var(--jh-border-radius-pill));
       min-width: var(--jh-dimension-200);
       height: var(--jh-dimension-200);
@@ -28,10 +28,10 @@ export class JhBadge extends LitElement {
       justify-content: center;
     }
     .count-present {
-      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);
+      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);
       height: var(--jh-dimension-400);
       padding: var(--jh-dimension-0) var(--jh-dimension-100);
       width: auto;
@@ -44,7 +44,7 @@ export class JhBadge extends LitElement {
       /** Number to show within the badge. If no `count` is supplied, Badge will render as a dot.*/
       count: { type: String },
       /** Sets the max count to show. Appends `+` to the `max-count` when value is exceeded. */
-      maxCount: { type: String, attribute: 'max-count' },
+      maxCount: { type: Number, attribute: 'max-count' },
     };
   }
 
@@ -53,7 +53,7 @@ export class JhBadge extends LitElement {
     /** @type {?string} */
     this.count = null;
     /** @type {?number} */
-    this.maxCount = null;
+    this.maxCount = 99;
   }
 
   render() {
@@ -71,3 +71,4 @@ export class JhBadge extends LitElement {
   }
 }
 customElements.define('jh-badge', JhBadge);
+

package/components/card/card.js

@@ -8,8 +8,8 @@ import '../divider/divider.js';
 
 /**
  * @cssprop --jh-card-color-background - The card background-color. Defaults to `--jh-color-container-primary-enabled`.
- * @cssprop --jh-card-border-radius - The card border-radius. Defaults to `--jh-border-radius-400`.
- * @cssprop --jh-card-shadow - The card box-shadow. Defaults to `--jh-shadow-low`.
+ * @cssprop --jh-card-border-radius - The card border-radius. Defaults to `--jh-border-radius-200`.
+ * @cssprop --jh-card-color-border - The card border color. Defaults to `--jh-border-decorative-color`.
  * @cssprop --jh-card-media-aspect-ratio - The media slot aspect-ratio. Defaults to `auto`.
  * @cssprop --jh-card-media-space-padding - The media slot padding. Defaults to `0`.
  * @cssprop --jh-card-header-color-text - The header text color. Defaults to `--jh-color-content-primary-enabled`.
@@ -35,7 +35,7 @@ export class JhCard extends LitElement {
   static get styles() {
     return css`
       :host {
-        --border-radius: var(--jh-border-radius-400);
+        --border-radius: var(--jh-border-radius-200);
         background-color: var(
           --jh-card-color-background,
           var(--jh-color-container-primary-enabled)
@@ -44,7 +44,9 @@ export class JhCard extends LitElement {
           --jh-card-border-radius,
           var(--border-radius)
         );
-        box-shadow: var(--jh-card-shadow, var(--jh-shadow-low));
+        border-color: var(--jh-card-color-border, var(--jh-border-decorative-color));
+        border-width: var(--jh-border-decorative-width);
+        border-style: var(--jh-border-decorative-style);
         word-break: break-word;
         display: block;
       }

package/components/checkbox/checkbox.js

@@ -76,10 +76,10 @@ export class JhCheckbox extends LitElement {
   static get styles() {
     return css`
       :host {
-        font-family: var(--jh-font-body-regular-1-font-family);
-        font-weight: var(--jh-font-body-regular-1-font-weight);
-        font-size: var(--jh-font-body-regular-1-font-size);
-        line-height: var(--jh-font-body-regular-1-line-height);
+        font-family: var(--jh-font-body-medium-1-font-family);
+        font-weight: var(--jh-font-body-medium-1-font-weight);
+        font-size: var(--jh-font-body-medium-1-font-size);
+        line-height: var(--jh-font-body-medium-1-line-height);
         display: inline-flex;
         position: relative;
       }

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

@@ -9,6 +9,7 @@ let id = 0;
 /**
  *
  * @cssprop --jh-checkbox-group-label-color-text - The label text color. Defaults to `--jh-color-content-primary-enabled`.
+ * @cssprop --jh-checkbox-group-opacity-disabled - The opacity of the checkbox group when disabled. Defaults to `--jh-opacity-disabled`.
  * @cssprop --jh-checkbox-group-required-color-text - The required indicator color.
  * Defaults to `--jh-color-content-negative-enabled`.
  * @cssprop --jh-checkbox-group-required-color-text-optional - The optional indicator text color.
@@ -29,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 */
@@ -41,6 +46,21 @@ export class JhCheckboxGroup extends LitElement {
         padding: 0;
         margin: 0;
       }
+      :host([disabled]) {
+        --group-disabled-opacity: var(
+          --jh-checkbox-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-checkbox) {
+        --jh-checkbox-opacity-disabled: var(--group-disabled-opacity);
+      }
       :host legend {
         padding: 0;
       }
@@ -75,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(
@@ -83,7 +107,6 @@ export class JhCheckboxGroup extends LitElement {
         );
         margin: 0;
       }
-      .label-text,
       .helper-text,
       :host([invalid]) .error-text {
         word-break: break-word;
@@ -100,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(
@@ -116,6 +143,11 @@ export class JhCheckboxGroup extends LitElement {
         type: String,
         attribute: 'accessible-label',
       },
+      /** Disables the checkbox 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 checkbox group has failed validation and `invalid` is true. */
       errorText: {
         type: String,
@@ -159,17 +191,19 @@ export class JhCheckboxGroup extends LitElement {
   }
   constructor() {
     super();
+    /** @type {boolean} */
+    this.disabled = false;
     /** @type {?string} */
     this.accessibleLabel = null;
     /** @type {?string} */
     this.errorText = null;
     /** @type {?string} */
     this.helperText = null;
-    /** @type {?Boolean} */
+    /** @type {?boolean} */
     this.invalid = false;
     /** @type {?string} */
     this.label = null;
-    /** @type {?Boolean} */
+    /** @type {?boolean} */
     this.required = false;
     /** @type {'vertical'|'horizontal'} */
     this.orientation = 'vertical';
@@ -182,6 +216,27 @@ export class JhCheckboxGroup extends LitElement {
     this.#id = id++;
   }
 
+  firstUpdated() {
+    const slot = this.renderRoot?.querySelector('slot');
+    this.#syncDisabledToChildren();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('disabled')) {
+      this.#syncDisabledToChildren();
+    }
+  }
+
+  #syncDisabledToChildren() {
+    const slot = this.renderRoot?.querySelector('slot');
+    if(!slot) return;
+
+    const checkboxes = slot.assignedElements().filter(el => el.tagName === 'JH-CHECKBOX');
+    checkboxes.forEach(checkbox => {
+      checkbox.disabled = this.disabled;
+    })
+  }
+
   #getAriaDescribedBy() {
     if (this.errorText && this.invalid && this.helperText && this.label) {
       return `checkbox-group-error-${this.#id} checkbox-group-helper-${
@@ -230,9 +285,10 @@ export class JhCheckboxGroup extends LitElement {
         aria-describedby=${ifDefined(this.#getAriaDescribedBy())}
         ?required=${this.required}
         aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
+        aria-disabled=${ifDefined(this.disabled ? 'true' : null)}
         aria-label=${ifDefined(this.accessibleLabel)}>
         ${label}
-        <div class="controls"><slot></slot></div>
+        <div class="controls"><slot @slotchange=${() => this.#syncDisabledToChildren()} ></slot></div>
         ${errorText}
       </fieldset>
     `;

package/components/input/input.js

@@ -91,14 +91,20 @@ export class JhInput extends LitElement {
     // alphanumeric characters -> usernames, product codes, etc.
     '*': /[A-Za-z0-9]/,
   };
+  /** @type {Map} */
+  #activeSlottedElement = new Map();
 
   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); 
@@ -119,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 {
@@ -329,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(
@@ -368,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.
        *
@@ -464,6 +478,7 @@ export class JhInput extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.#resizeObserver.disconnect();
     if (this.inputMask) {
       this.removeEventListener('jh-select', this.#setSelection);
     }
@@ -1048,27 +1063,39 @@ export class JhInput extends LitElement {
     );
   }
 
-  #handleSlotChange(e) {
+  // capture dimensions of slotted content and set CSS variables to adjust input padding and vertically center slotted content
+  #resizeObserver = new ResizeObserver((entries) => {
     let inputEl = this.shadowRoot.querySelector('input');
-    let slottedElement = e.target.assignedElements()[0];
-    let slotName = e.target.name;
 
-    if (slottedElement?.tagName.startsWith('JH-ICON')) {
-      slottedElement.setAttribute('size', 'medium');
+    for (let entry of entries) {
+      let slottedEl = entry.target;
+      let slottedElWidth = entry.borderBoxSize[0].inlineSize;
+      let slottedElHeight = entry.borderBoxSize[0].blockSize;
+
+      this.style.setProperty(`--${slottedEl.slot}-width`, `${slottedElWidth}px`);
+
+      this.style.setProperty(`--${slottedEl.slot}-top`, `${(inputEl.offsetHeight - slottedElHeight) / 2}px`);
     }
+  });
 
-    // capture dimensions of slotted content
-    if (slottedElement) {
-      if (slotName === 'jh-input-left' || slotName === 'jh-input-right') {
+  #handleSlotChange(e) {
+    let newSlottedElement = e.target.assignedElements()[0];
+    let slotName = e.target.name;
+
+    // stop observing previous slotted element for each slot
+    if (this.#activeSlottedElement.has(slotName)) {
+      this.#resizeObserver.unobserve(this.#activeSlottedElement.get(slotName));
+    }
 
-        // set a CSS variable for the width of the slotted content
-        this.style.setProperty(`--${slottedElement.slot}-width`, `${slottedElement.offsetWidth}px`);
+    if (newSlottedElement) {
+      this.#activeSlottedElement.set(slotName, newSlottedElement);
 
-        // set a css variable to vertically center slotted content
-        this.style.setProperty(`--${slottedElement.slot}-top`, `${(inputEl.offsetHeight - slottedElement.offsetHeight) / 2}px`);
+      if (newSlottedElement.tagName.startsWith('JH-ICON')) {
+        newSlottedElement.setAttribute('size', 'medium');
       }
+      this.#resizeObserver.observe(newSlottedElement);
     }
-    this.#addClass(slotName, slottedElement);
+    this.#addClass(slotName, newSlottedElement);
   }
 
   // sets class on input element so padding can accomodate slotted content

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/radio.js

@@ -74,10 +74,10 @@ export class JhRadio extends LitElement {
   static get styles() {
     return css`
       :host {
-        font-family: var(--jh-font-body-regular-1-font-family);
-        font-weight: var(--jh-font-body-regular-1-font-weight);
-        font-size: var(--jh-font-body-regular-1-font-size);
-        line-height: var(--jh-font-body-regular-1-line-height);
+        font-family: var(--jh-font-body-medium-1-font-family);
+        font-weight: var(--jh-font-body-medium-1-font-weight);
+        font-size: var(--jh-font-body-medium-1-font-size);
+        line-height: var(--jh-font-body-medium-1-line-height);
         display: inline-flex;
         position: relative;
       }

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/switch/switch.js

@@ -35,10 +35,10 @@ export class JhSwitch extends LitElement {
   static get styles() {
     return css`
       :host {
-        font-family: var(--jh-font-body-regular-1-font-family);
-        font-weight: var(--jh-font-body-regular-1-font-weight);
-        font-size: var(--jh-font-body-regular-1-font-size);
-        line-height: var(--jh-font-body-regular-1-line-height);
+        font-family: var(--jh-font-body-medium-1-font-family);
+        font-weight: var(--jh-font-body-medium-1-font-weight);
+        font-size: var(--jh-font-body-medium-1-font-size);
+        line-height: var(--jh-font-body-medium-1-line-height);
         display: inline-flex;
         position: relative;
       }

package/components/table/table.js

@@ -132,6 +132,7 @@ export class JhTable extends LitElement {
       :host([sticky-header]) .header {
         position: sticky;
         top: 0;
+        z-index: 1000;
       }
       :host([sticky-footer]) .footer {
         --jh-table-data-cell-color-border-top: var(
@@ -139,6 +140,7 @@ export class JhTable extends LitElement {
         );
         position: sticky;
         bottom: 0;
+        z-index: 1000;
       }
       :host([sticky-footer]) .body::slotted(jh-table-row:nth-last-of-type(2)) {
         --jh-table-data-cell-color-border-bottom: transparent;
@@ -178,8 +180,10 @@ export class JhTable extends LitElement {
       }
 
       :host([scrollable]) .table-container {
-        overflow: scroll;
+        overflow: auto;
         height: 100%;
+        /* keeps space reserved for vertical scrollbar */
+        scrollbar-gutter: stable;
         /* removes bouncy scroll behavior in Safari and FF */
         /* overscroll-behavior: none; */
       }
@@ -293,7 +297,6 @@ export class JhTable extends LitElement {
   async firstUpdated() {
     if (!this.scrollable) return;
 
-    const container = this.shadowRoot.querySelector('.table-container');
     let scrollTable = this.shadowRoot.querySelector('.table');
     await scrollTable.updateComplete;
     let originalTableWidth = scrollTable.getBoundingClientRect().width;

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

@@ -13,7 +13,8 @@
         {
           "name": "max-count",
           "description": "Sets the max count to show. Appends `+` to the `max-count` when value is exceeded.",
-          "type": "?number"
+          "type": "?number",
+          "default": "99"
         }
       ],
       "properties": [
@@ -27,7 +28,8 @@
           "name": "maxCount",
           "attribute": "max-count",
           "description": "Sets the max count to show. Appends `+` to the `max-count` when value is exceeded.",
-          "type": "?number"
+          "type": "?number",
+          "default": "99"
         }
       ],
       "cssProperties": [
@@ -37,11 +39,11 @@
         },
         {
           "name": "--jh-badge-color-background-enabled",
-          "description": "The badge background color. Defaults to `--jh-color-content-brand-enabled`."
+          "description": "The badge background color. Defaults to `--jh-color-content-negative-enabled`."
         },
         {
           "name": "--jh-badge-color-text-enabled",
-          "description": "The badge text color. Defaults to `--jh-color-content-on-brand-enabled`."
+          "description": "The badge text color. Defaults to `--jh-color-content-on-negative-enabled`."
         }
       ]
     },
@@ -741,11 +743,11 @@
         },
         {
           "name": "--jh-card-border-radius",
-          "description": "The card border-radius. Defaults to `--jh-border-radius-400`."
+          "description": "The card border-radius. Defaults to `--jh-border-radius-200`."
         },
         {
-          "name": "--jh-card-shadow",
-          "description": "The card box-shadow. Defaults to `--jh-shadow-low`."
+          "name": "--jh-card-color-border",
+          "description": "The card border color. Defaults to `--jh-border-decorative-color`."
         },
         {
           "name": "--jh-card-media-aspect-ratio",
@@ -793,6 +795,12 @@
       "name": "jh-checkbox-group",
       "path": "./components/checkbox-group/checkbox-group.js",
       "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the checkbox group and prevents all user interactions. May cause the group to be ignored by assistive technologies (AT).",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "accessible-label",
           "description": "Sets an `aria-label` to assist screen reader users when no visible label is present.",
@@ -811,7 +819,7 @@
         {
           "name": "invalid",
           "description": "Sets an `aria-invalid` on the checkbox group to indicate the value supplied was invalid and displays `error-text` when set.",
-          "type": "?Boolean",
+          "type": "?boolean",
           "default": "false"
         },
         {
@@ -822,7 +830,7 @@
         {
           "name": "required",
           "description": "Indicates a value is required.",
-          "type": "?Boolean",
+          "type": "?boolean",
           "default": "false"
         },
         {
@@ -839,6 +847,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the checkbox group and prevents all user interactions. May cause the group to be ignored by assistive technologies (AT).",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "accessibleLabel",
           "attribute": "accessible-label",
@@ -861,7 +876,7 @@
           "name": "invalid",
           "attribute": "invalid",
           "description": "Sets an `aria-invalid` on the checkbox group to indicate the value supplied was invalid and displays `error-text` when set.",
-          "type": "?Boolean",
+          "type": "?boolean",
           "default": "false"
         },
         {
@@ -874,7 +889,7 @@
           "name": "required",
           "attribute": "required",
           "description": "Indicates a value is required.",
-          "type": "?Boolean",
+          "type": "?boolean",
           "default": "false"
         },
         {
@@ -903,6 +918,10 @@
           "name": "--jh-checkbox-group-label-color-text",
           "description": "The label text color. Defaults to `--jh-color-content-primary-enabled`."
         },
+        {
+          "name": "--jh-checkbox-group-opacity-disabled",
+          "description": "The opacity of the checkbox group when disabled. Defaults to `--jh-opacity-disabled`."
+        },
         {
           "name": "--jh-checkbox-group-required-color-text",
           "description": "The required indicator color.\nDefaults to `--jh-color-content-negative-enabled`."
@@ -1361,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",
@@ -1498,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",
@@ -1820,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"
         },
         {
@@ -1976,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"
         },
         {
@@ -2291,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"
         },
         {
@@ -2428,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"
         },
         {
@@ -2735,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"
         },
         {
@@ -2872,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"
         },
         {
@@ -3204,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"
         },
         {
@@ -3372,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"
         },
         {
@@ -3683,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"
         },
         {
@@ -3820,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"
         },
         {
@@ -4126,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"
         },
         {
@@ -4263,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"
         },
         {
@@ -5227,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.",
@@ -5240,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"
         },
         {
@@ -5256,7 +5283,7 @@
         {
           "name": "required",
           "description": "Indicates a value is required.",
-          "type": "?Boolean",
+          "type": "?boolean",
           "default": "false"
         },
         {
@@ -5289,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",
@@ -5305,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"
         },
         {
@@ -5324,7 +5358,7 @@
           "name": "required",
           "attribute": "required",
           "description": "Indicates a value is required.",
-          "type": "?Boolean",
+          "type": "?boolean",
           "default": "false"
         },
         {
@@ -5380,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`."
         }
       ]
     },
@@ -6824,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.",
@@ -6850,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",
@@ -6875,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.10",
+  "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"
   },