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

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.
@@ -41,6 +42,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;
       }
@@ -83,7 +99,6 @@ export class JhCheckboxGroup extends LitElement {
         );
         margin: 0;
       }
-      .label-text,
       .helper-text,
       :host([invalid]) .error-text {
         word-break: break-word;
@@ -116,6 +131,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 +179,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 +204,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 +273,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,6 +91,8 @@ 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`
@@ -464,6 +466,7 @@ export class JhInput extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.#resizeObserver.disconnect();
     if (this.inputMask) {
       this.removeEventListener('jh-select', this.#setSelection);
     }
@@ -1048,27 +1051,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/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/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/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`."

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.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Banno/jack-henry-design-system.git"