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

package/components/button/button.js

@@ -102,9 +102,10 @@ 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 {
@@ -156,6 +157,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 +181,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 +693,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 +722,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 +762,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,6 +792,14 @@ export class JhButton extends LitElement {
       value: {
         type: String,
       },
+      _hasLeftSlotContent: {
+        type: Boolean,
+        state: true,
+      },
+      _hasRightSlotContent: {
+        type: Boolean,
+        state: true,
+      },
     };
   }
 
@@ -816,15 +821,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 +835,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);
@@ -856,6 +863,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();
 
@@ -883,11 +903,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 +950,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 +972,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 +981,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 +995,7 @@ export class JhButton extends LitElement {
     } else {
       return html`
         <button
+          class=${ifDefined(singleIconClass)}
           tabindex="0"
           aria-disabled=${ifDefined(ariaDisabled)}
           aria-label=${ifDefined(this.accessibleLabel)}

package/components/input/input.js

@@ -117,7 +117,6 @@ export class JhInput extends LitElement {
         line-height: var(--input-helper-regular-line-height);
         display: inline-block;
         width: 100%;
-        --jh-button-size: var(--jh-dimension-800);
         --input-value-color-text: var(
           --jh-input-value-color-text,
           var(--jh-color-content-primary-enabled)
@@ -178,13 +177,13 @@ export class JhInput extends LitElement {
 
       /* Sizes on input wrapper */
       :host([size='small']) .input-wrapper {
-        height: var(--jh-dimension-1000);
+        height: var(--jh-dimension-800);
       }
       :host([size='medium']) .input-wrapper {
-        height: var(--jh-dimension-1200);
+        height: var(--jh-dimension-1000);
       }
       :host([size='large']) .input-wrapper {
-        height: var(--jh-dimension-1400);
+        height: var(--jh-dimension-1200);
       }
 
       /* Input element — no border, grows to fill */
@@ -1144,9 +1143,9 @@ export class JhInput extends LitElement {
     let hasContent = this.#checkSlotContent(slot);
     slot.classList.toggle('display-slot', hasContent);
 
-    // Set icon size if applicable
-    if (newSlottedElement?.tagName.startsWith('JH-ICON')) {
-      newSlottedElement.setAttribute('size', 'medium');
+    // Set jh-icon or jh-button size if applicable
+    if (newSlottedElement?.tagName.startsWith('JH-ICON')||newSlottedElement?.tagName === 'JH-BUTTON') {
+      newSlottedElement.setAttribute('size', 'x-small');
     }
   }
 
@@ -1168,11 +1167,11 @@ export class JhInput extends LitElement {
     if (!this.showClearButton || !this.value || this.disabled) return null;
     return html`
       <jh-button 
-        size="small" appearance="tertiary" class="clear-button" 
+        size="x-small" appearance="tertiary" class="clear-button" 
         accessible-label=${ifDefined(this.accessibleLabelClearButton)}
         @click=${this._handleClearButtonClick}>
-        <slot name="jh-input-clear-button" slot="jh-button-icon">
-          <jh-icon-circle-xmark slot="jh-button-icon" aria-hidden="true" size="medium"></jh-icon-circle-xmark>
+        <slot name="jh-input-clear-button" slot="jh-button-icon-left">
+          <jh-icon-circle-xmark slot="jh-button-icon-left"></jh-icon-circle-xmark>
         </slot>
       </jh-button>
     `;

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

@@ -120,7 +120,7 @@ renderInput() {
     let passwordBtn = html`
         <jh-button
           class="password-toggle-btn"
-          size="small"
+          size="x-small"
           appearance="tertiary"
           ?disabled=${this.disabled}
           accessible-label=${accessibleLabel}
@@ -130,24 +130,24 @@ renderInput() {
             ? html`
                 <slot
                   name="jh-input-password-visible"
-                  slot="jh-button-icon"
+                  slot="jh-button-icon-left"
                 >
                   <jh-icon-eye-slash
-                    slot="jh-button-icon"
+                    slot="jh-button-icon-left"
                     aria-hidden="true"
-                    size="medium"
+                    size="x-small"
                   ></jh-icon-eye-slash>
                 </slot>
               `
             : html`
                 <slot
                   name="jh-input-password-hidden"
-                  slot="jh-button-icon"
+                  slot="jh-button-icon-left"
                 >
                   <jh-icon-eye
-                    slot="jh-button-icon"
+                    slot="jh-button-icon-left"
                     aria-hidden="true"
-                    size="medium"
+                    size="x-small"
                   ></jh-icon-eye>
                 </slot>
               `}

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

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

package/components/notification/notification.js

@@ -136,7 +136,7 @@ export class JhNotification extends LitElement {
     }
     /* Default slot styling */
     .display-default-slot {
-      padding: var(--jh-dimension-200) 0;
+      padding: var(--jh-dimension-100) 0;
       margin: var(--jh-dimension-50) 0;
       font: var(--jh-font-body-regular-1);
       display: flex;
@@ -149,7 +149,7 @@ export class JhNotification extends LitElement {
     }
     slot[name="jh-notification-icon"]::slotted(*) {
       margin-right: var(--jh-dimension-400);
-      padding: var(--jh-dimension-200) 0;
+      padding: var(--jh-dimension-100) 0;
     }
     :host([appearance='neutral']) slot[name="jh-notification-icon"] {
       --jh-icon-color-fill: var(--jh-notification-icon-color-fill-neutral, var(--jh-color-content-on-primary-enabled));
@@ -204,7 +204,8 @@ export class JhNotification extends LitElement {
     .stacked-container,
     .inline-container {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
+      line-height: 0;
     }
     `;
   }
@@ -295,6 +296,13 @@ export class JhNotification extends LitElement {
     }
   }
 
+  #handleIconSlotChange(e) {
+    let newSlottedElement = e.target.assignedElements()[0];
+    if (newSlottedElement?.tagName.startsWith('JH-ICON')) {
+      newSlottedElement.setAttribute('size', 'medium');
+    }
+  }
+
   render() {
     let dismissBtn;
     
@@ -305,8 +313,8 @@ export class JhNotification extends LitElement {
           appearance="secondary"
           accessible-label=${this.dismissButtonAccessibleLabel}
           @click=${this.#handleDismissal}
-          ><slot name="jh-notification-dismiss-icon" slot="jh-button-icon">
-            <jh-icon-xmark slot="jh-button-icon"></jh-icon-xmark>
+          ><slot name="jh-notification-dismiss-icon" slot="jh-button-icon-left">
+            <jh-icon-xmark slot="jh-button-icon-left"></jh-icon-xmark>
           </slot>
         </jh-button>
       `;
@@ -314,7 +322,7 @@ export class JhNotification extends LitElement {
 
     return html`
       <div class=${this.stacked ? 'stacked-container' : 'inline-container'}>
-        <slot aria-hidden="true" name="jh-notification-icon"></slot>
+        <slot aria-hidden="true" name="jh-notification-icon" @slotchange=${this.#handleIconSlotChange}></slot>
         <slot @slotchange=${this.#handleSlotChange}></slot>
         ${this.stacked ? null : this.#getActionButtons()}
         ${dismissBtn}

package/components/table/table.js

@@ -174,8 +174,8 @@ export class JhTable extends LitElement {
       :host([scrollable]) .table-wrapper {
         position: relative;
         overflow-x: hidden;
-        flex: 1 1 auto;
-        /* display grid makes sticky work and shadows go till bottom. */
+        flex: 1 1 auto;        
+        /* display grid makes sticky work and shows horizontal scrollbar on top. */
         display: grid;
       }
 
@@ -187,7 +187,7 @@ export class JhTable extends LitElement {
         /* removes bouncy scroll behavior in Safari and FF */
         /* overscroll-behavior: none; */
       }
-      :host([scrollable]) .scrollable {
+      :host([scrollable]) .table {
         width: auto;
         position: relative;
       }
@@ -199,7 +199,7 @@ export class JhTable extends LitElement {
         outline-width: var(--jh-border-focus-width);
         outline-style: var(--jh-border-focus-style);
       }
-      .table-wrapper:focus-visible {
+      .table-container:focus-visible, :host([scrollable]) .table-wrapper:focus-visible {
         outline: none;
       }
     `;
@@ -294,29 +294,28 @@ export class JhTable extends LitElement {
     this.#id = id++;
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
   async firstUpdated() {
     if (!this.scrollable) return;
 
-    let scrollTable = this.shadowRoot.querySelector('.table');
-    await scrollTable.updateComplete;
-    let originalTableWidth = scrollTable.getBoundingClientRect().width;
-
     this.observer = new ResizeObserver((entries) => {
       entries.forEach((entry) => {
         let table = entry.target.shadowRoot.querySelector('.table');
         let tableContainer =
           entry.target.shadowRoot.querySelector('.table-container');
+        if (!table || !tableContainer) return;
         if (table.scrollWidth > tableContainer.clientWidth) {
-          table.classList.add('scrollable');
-        } else {
-          if (table.scrollWidth >= originalTableWidth) {
-            table.classList.remove('scrollable');
+          tableContainer.setAttribute('tabindex', '0');
+         }
+        else {
             tableContainer.removeAttribute('tabindex');
-          } else {
-            table.classList.add('scrollable');
-            tableContainer.setAttribute('tabindex', '0');
           }
-        }
       });
     });
 
@@ -354,7 +353,7 @@ export class JhTable extends LitElement {
       <slot name="jh-table-toolbar" @slotchange=${this.#handleSlot}></slot>
       <div class="table-wrapper">
         <div class="table-container" tabindex="${ifDefined(this.scrollable ? '0' : null)}">
-          <div class="table ${this.scrollable ? 'scrollable' : ''}" role="table" 
+          <div class="table" role="table" 
           aria-labelledby="table-caption-${this.#id}" aria-label=${ifDefined(this.accessibleLabel === '' ? null : this.accessibleLabel)}>
             <slot name="jh-table-header" class="header" role="rowgroup"></slot>
             <slot class="body" role="rowgroup"></slot>

package/components/table-data-cell/table-data-cell.js

@@ -62,7 +62,8 @@ export class JhTableDataCell extends LitElement {
         font-size: var(--footer-font-size, var(--jh-font-body-regular-1-font-size));      
         font-family: var(--footer-font-family, var(--jh-font-body-regular-1-font-family));
         display: table-cell;
-        width: 100%;
+        width: auto;
+        box-sizing: border-box;
       }
       :host([horizontal-align="left"]) {
         text-align: left;

package/components/table-header-cell/table-header-cell.js

@@ -99,7 +99,7 @@ export class JhTableHeaderCell extends LitElement {
         vertical-align: var(--vertical-align, top);
         display: table-cell;
         box-sizing: border-box;
-        width: 100%;
+        width: auto;
       }
       :host([sortable]:hover) {
         border-bottom-color: var(--jh-table-header-cell-color-border-bottom-hover, var(--jh-border-decorative-color));

package/components/tag/tag.js

@@ -376,19 +376,22 @@ export class JhTag extends LitElement {
     if (this.dismissible) {
       dismissBtn = html`
       <jh-button
-        size="medium"
+        size="x-small"
         appearance="secondary"
         accessible-label=${this.dismissButtonAccessibleLabel}
         @click=${this.#handleDismissal}>
-        <slot name="jh-tag-dismiss-icon" slot="jh-button-icon">
-          <jh-icon-xmark slot="jh-button-icon"></jh-icon-xmark>
+        <slot name="jh-tag-dismiss-icon" slot="jh-button-icon-left">
+          <jh-icon-xmark slot="jh-button-icon-left"></jh-icon-xmark>
         </slot>
       </jh-button>
       `;
     }
 
     if (this.dismissible && this.tooltipLabel) {
-      dismissBtn = html`<jh-tooltip label=${this.tooltipLabel}>${dismissBtn}</jh-tooltip>`;
+      dismissBtn = html`<jh-tooltip>
+        ${dismissBtn}
+        <div slot="jh-tooltip-content">${this.tooltipLabel}</div>
+      </jh-tooltip>`;
     }
     return dismissBtn;
   }

package/custom-elements.json

@@ -84,12 +84,6 @@
           "description": "Sets the link's destination.",
           "type": "?string"
         },
-        {
-          "name": "icon-position",
-          "description": "Sets location of icon in relation to the label.",
-          "type": "'before'|'after'",
-          "default": "\"before\""
-        },
         {
           "name": "pending",
           "description": "Displays a progress indicator.",
@@ -109,7 +103,7 @@
         {
           "name": "size",
           "description": "Sets the size of the button.",
-          "type": "'small'|'medium'|'large'",
+          "type": "'x-small'|'small'|'medium'|'large'",
           "default": "\"medium\""
         },
         {
@@ -169,13 +163,6 @@
           "description": "Sets the link's destination.",
           "type": "?string"
         },
-        {
-          "name": "iconPosition",
-          "attribute": "icon-position",
-          "description": "Sets location of icon in relation to the label.",
-          "type": "'before'|'after'",
-          "default": "\"before\""
-        },
         {
           "name": "pending",
           "attribute": "pending",
@@ -199,7 +186,7 @@
           "name": "size",
           "attribute": "size",
           "description": "Sets the size of the button.",
-          "type": "'small'|'medium'|'large'",
+          "type": "'x-small'|'small'|'medium'|'large'",
           "default": "\"medium\""
         },
         {
@@ -224,8 +211,12 @@
       ],
       "slots": [
         {
-          "name": "jh-button-icon",
-          "description": "Use to insert an icon."
+          "name": "jh-button-icon-left",
+          "description": "Use to insert an icon on the left side of the button and for single icon buttons."
+        },
+        {
+          "name": "jh-button-icon-right",
+          "description": "Use to insert an icon on the right side of the button and for single icon buttons."
         }
       ],
       "cssProperties": [
@@ -611,7 +602,7 @@
         },
         {
           "name": "--jh-button-size",
-          "description": "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\"`."
+          "description": "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\"`."
         }
       ]
     },
@@ -1458,6 +1449,10 @@
         }
       ],
       "properties": [
+        {
+          "name": "uniqueId",
+          "type": "number | null"
+        },
         {
           "name": "accessibleLabel",
           "attribute": "accessible-label",
@@ -1837,7 +1832,7 @@
           "name": "hide-right-slot",
           "description": "Hides the right slot from input.",
           "type": "boolean",
-          "default": "true"
+          "default": "false"
         },
         {
           "name": "input-mask",
@@ -1937,6 +1932,10 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "uniqueId",
+          "type": "number | null"
+        },
         {
           "name": "accessibleLabel",
           "attribute": "accessible-label",
@@ -1992,7 +1991,7 @@
           "attribute": "hide-right-slot",
           "description": "Hides the right slot from input.",
           "type": "boolean",
-          "default": "true"
+          "default": "false"
         },
         {
           "name": "inputMask",
@@ -2389,6 +2388,10 @@
         }
       ],
       "properties": [
+        {
+          "name": "uniqueId",
+          "type": "number | null"
+        },
         {
           "name": "accessibleLabel",
           "attribute": "accessible-label",
@@ -2833,6 +2836,10 @@
         }
       ],
       "properties": [
+        {
+          "name": "uniqueId",
+          "type": "number | null"
+        },
         {
           "name": "accessibleLabel",
           "attribute": "accessible-label",
@@ -3335,6 +3342,10 @@
           "description": "Specifies how text should be wrapped when submitted in a form. The `cols` property must be set for `wrap='hard'` to take effect.",
           "type": "'hard'|'soft'"
         },
+        {
+          "name": "uniqueId",
+          "type": "number | null"
+        },
         {
           "name": "accessibleLabel",
           "attribute": "accessible-label",
@@ -3783,6 +3794,10 @@
         }
       ],
       "properties": [
+        {
+          "name": "uniqueId",
+          "type": "number | null"
+        },
         {
           "name": "accessibleLabel",
           "attribute": "accessible-label",
@@ -4226,6 +4241,10 @@
         }
       ],
       "properties": [
+        {
+          "name": "uniqueId",
+          "type": "number | null"
+        },
         {
           "name": "accessibleLabel",
           "attribute": "accessible-label",
@@ -5793,6 +5812,10 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "uniqueId",
+          "type": "number | null"
+        },
         {
           "name": "accessibleLabel",
           "attribute": "accessible-label",
@@ -6145,7 +6168,7 @@
         },
         {
           "name": "--jh-input-field-color-background",
-          "description": "The input field background-color. Defaults to `--jh-color-container-primary-enabled`."
+          "description": "The input field background-color when in an editable state. This property does not apply when the component is set to `readonly`. Defaults to `--jh-color-container-primary-enabled`."
         },
         {
           "name": "--jh-input-field-color-border-enabled",

package/jsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "checkJs": true,
     "module": "es2020",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "target": "es2020"
   },
   "exclude": ["node_modules"]

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.13",
+  "version": "2.0.0-beta.14",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Banno/jack-henry-design-system.git"
@@ -23,25 +23,21 @@
   ],
   "dependencies": {
     "@jack-henry/jh-tokens": "2.0.0-beta.9",
-    "@jack-henry/jh-icons": "2.0.0-beta.7",
+    "@jack-henry/jh-icons": "2.0.0-beta.8",
     "lit": "3.3.1"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "8.6.17",
-    "@storybook/addon-actions": "8.6.17",
-    "@storybook/addon-essentials": "8.6.17",
-    "@storybook/blocks": "8.6.17",
-    "@storybook/manager-api": "8.6.17",
-    "@storybook/theming": "8.6.17",
-    "@storybook/web-components": "8.6.17",
-    "@storybook/web-components-vite": "8.6.17",
+    "@jack-henry/jh-datasets": "2.0.0-beta.1",
+    "@storybook/addon-a11y": "10.4.0",
+    "@storybook/web-components-vite": "10.4.0",
     "chromatic": "5.8.3",
     "hygen": "6.2.11",
-    "storybook": "8.6.17",
-    "storybook-addon-tag-badges": "1.3.1",
-    "storybook-dark-mode": "4.0.1",
+    "storybook": "10.4.0",
+    "storybook-addon-tag-badges": "3.1.0",
     "web-component-analyzer": "1.1.6",
-    "vite": "5.4.12"
+    "vite": "5.4.12",
+    "@storybook/addon-docs": "10.4.0",
+    "storybook-dark-mode": "5.0.0"
   },
   "scripts": {
     "generate": "hygen component new",