@jack-henry/jh-elements 2.0.0-beta.8

package/components/list-group/list-group.js

@@ -0,0 +1,103 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { LitElement, css, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+let id = 0;
+/**
+ * @cssprop --jh-list-group-subheader-color-background - The subheader background-color.
+ * Defaults to `transparent`.
+ * @cssprop --jh-list-group-subheader-color-text - The subheader text color.
+ * Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-list-group-subheader-space-padding-right - The subheader padding-right.
+ * Defaults to `--jh-dimension-600`
+ * @cssprop --jh-list-group-subheader-space-padding-left - The subheader padding-left.
+ * Defaults to `--jh-dimension-600`
+ *
+ * @slot default - Use to insert `<jh-list-item>` component(s).
+ * @customElement jh-list-group
+ */
+export class JhListGroup extends LitElement {
+  /** @type {?Number} */
+  #id;
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+      .subheader {
+        background-color: var(
+          --jh-list-group-subheader-color-background,
+          transparent
+        );
+        color: var(
+          --jh-list-group-subheader-color-text,
+          var(--jh-color-content-secondary-enabled)
+        );
+        font-family: var(--jh-font-heading-medium-1-font-family);
+        font-weight: var(--jh-font-heading-medium-1-font-weight);
+        font-size: var(--jh-font-heading-medium-1-font-size);
+        line-height: var(--jh-font-heading-medium-1-line-height);
+        padding-top: var(--jh-dimension-400);
+        padding-right: var(
+          --jh-list-group-subheader-space-padding-right,
+          var(--jh-dimension-600)
+        );
+        padding-bottom: var(--jh-dimension-400);
+        padding-left: var(
+          --jh-list-group-subheader-space-padding-left,
+          var(--jh-dimension-600)
+        );
+        word-break: break-word;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /** Describes the type of data to be collected. */
+      label: {
+        type: String,
+      },
+      /** Sets an `aria-label` to assist screen reader users when no visible label is present. */
+      accessibleLabel: { type: String, attribute: 'accessible-label' },
+    };
+  }
+
+  constructor() {
+    super();
+    /** @type {?string} */
+    this.label = null;
+    /** @type {?string} */
+    this.accessibleLabel = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.#id = id++;
+  }
+
+  render() {
+    return html`
+      ${this.label
+        ? html`<div class="subheader" id="list-group-labelledby-${this.#id}">
+            ${this.label}
+          </div>`
+        : null}
+      <div
+        role="group"
+        aria-labelledby=${ifDefined(
+          this.label ? `list-group-labelledby-${this.#id}` : null
+        )}
+        aria-label=${ifDefined(this.accessibleLabel)}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+customElements.define('jh-list-group', JhListGroup);

package/components/list-item/list-item.js

@@ -0,0 +1,350 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { LitElement, css, html } from 'lit';
+import '../divider/divider.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+/**
+ * @cssprop --jh-list-item-color-background - The list-item container's background-color.
+ * Defaults to `transparent`.
+ * @cssprop --jh-list-item-color-text - The default, left, text, metadata, right, primary, and secondary slot text color. Defaults to `--jh-color-content-primary-enabled`.
+ * @cssprop --jh-list-item-space-padding-right - The right padding on the list-item container. Defaults to `--jh-dimension-600`.
+ * @cssprop --jh-list-item-space-padding-left - The left padding on the list-item container. Defaults to `--jh-dimension-600`.
+ * @cssprop --jh-list-item-size-height - The list-item's height. Defaults to `auto`.
+ * @cssprop --jh-list-item-color-text-primary - The primary text color.
+ * Defaults to `--jh-color-content-primary-enabled`.
+ * @cssprop --jh-list-item-color-text-secondary - The secondary text color.
+ * Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-list-item-metadata-color-text-primary - The primary metadata text color.
+ * Defaults to `--jh-color-content-primary-enabled`.
+ * @cssprop --jh-list-item-metadata-color-text-secondary - The secondary metadata text color.
+ * Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-list-item-color-background-focus - The list-item background-color when interactive and focused.
+ * Defaults to `--jh-color-container-primary-hover`.
+ * @cssprop --jh-list-item-color-focus - The list-item outline when it is interactive and receives keyboard focus.
+ * Defaults to `--jh-border-focus-color`.
+ * @cssprop --jh-list-item-color-background-hover - The list-item background-color when interactive and hovered.
+ * Defaults to `--jh-color-container-primary-hover`.
+ * @cssprop --jh-list-item-color-background-active - The list-item background-color when interactive and active.
+ * Defaults to `--jh-color-container-primary-active`.
+ * @cssprop --jh-list-item-color-background-selected - The list-item background-color when interactive and selected. Defaults to `--jh-color-container-primary-selected`.
+ * @cssprop --jh-list-item-color-border-selected - The list-item border-left-color when interactive and selected.
+ * Defaults to `--jh-border-selected-color`.
+ *
+ * @slot default - Use to insert fully customized content into the list-item. Cannot be used with the other slots.
+ * @slot jh-list-item-left - Use to insert custom content on the left the list-item. 
+ * @slot jh-list-item-right - Use to insert custom content on the right the list-item.
+ * @slot jh-list-item-content -  Use to insert custom content into the list-item.
+ * @slot jh-list-item-metadata - Use to insert custom metadata into the list-item.
+ * @customElement jh-list-item
+ */
+export class JhListItem extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        background-color: var(--jh-list-item-color-background, transparent);
+        padding-bottom: var(--jh-dimension-400);
+        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);
+        color: var(
+          --jh-list-item-color-text,
+          var(--jh-color-content-primary-enabled)
+        );
+        display: block;
+        box-sizing: border-box;
+      }
+      /* list item height is set to auto when styling hook is not set */
+      .list-item {
+        padding-right: var(
+          --jh-list-item-space-padding-right,
+          var(--jh-dimension-600)
+        );
+        padding-left: var(
+          --jh-list-item-space-padding-left,
+          var(--jh-dimension-600)
+        );
+        padding-top: var(--jh-dimension-400);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: calc(var(--jh-list-item-size-height, auto) - var(--jh-dimension-400));
+        box-sizing: border-box;
+      }
+      :host([show-divider]) .list-item {
+        height: calc(var(--jh-list-item-size-height, auto) - var(--jh-dimension-400) - 1px);
+      }
+      /* states for interactive list-items*/
+      :host([tabindex]:focus-visible) {
+        background-color: var(
+          --jh-list-item-color-background-focus,
+          var(--jh-color-container-primary-hover)
+        );
+        outline-color: var(
+          --jh-list-item-color-focus,
+          var(--jh-border-focus-color)
+        );
+        outline-style: var(--jh-border-focus-style);
+        outline-width: var(--jh-border-focus-width);
+        outline-offset: -2px;
+      }
+      :host([tabindex]:hover) {
+        background-color: var(
+          --jh-list-item-color-background-hover,
+          var(--jh-color-container-primary-hover)
+        );
+        cursor: pointer;
+      }
+      :host([tabindex]:active) {
+        background-color: var(
+          --jh-list-item-color-background-active,
+          var(--jh-color-container-primary-active)
+        );
+      }
+      :host([tabindex][selected]) {
+        background-color: var(
+          --jh-list-item-color-background-selected,
+          var(--jh-color-container-primary-selected)
+        );
+        border-left-color: var(
+          --jh-list-item-color-border-selected,
+          var(--jh-border-selected-color)
+        );
+        border-left-style: var(--jh-border-selected-style);
+        border-left-width: var(--jh-border-selected-width);
+      }
+      :host([tabindex][selected]) .list-item {
+        padding-left: var(--jh-dimension-400);
+      }
+      :host([tabindex][disabled]) {
+        opacity: var(--jh-opacity-disabled);
+        cursor: default;
+        pointer-events: none;
+      }
+
+      :host([show-divider]) {
+        padding-bottom: 0;
+      }
+      jh-divider {
+        margin-bottom: 0;
+      }
+      ::slotted([slot='jh-list-item-left']) {
+        color: var(
+          --jh-list-item-color-text,
+          var(--jh-color-content-primary-enabled)
+        );
+        margin-right: var(--jh-dimension-200);
+        flex: 0 0 auto;
+      }
+      ::slotted([slot='jh-list-item-content']) {
+        color: var(
+          --jh-list-item-color-text,
+          var(--jh-color-content-primary-enabled)
+        );
+        flex: 1 1 auto;
+      }
+      .text {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+      ::slotted([slot='jh-list-item-metadata']) {
+        color: var(
+          --jh-list-item-color-text,
+          var(--jh-color-content-primary-enabled)
+        );
+        margin-left: var(--jh-dimension-200);
+        flex: 0 0 auto;
+      }
+      .metadata {
+        margin-left: var(--jh-dimension-200);
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: column;
+      }
+      ::slotted([slot='jh-list-item-right']) {
+        color: var(
+          --jh-list-item-color-text,
+          var(--jh-color-content-primary-enabled)
+        );
+        margin-left: var(--jh-dimension-200);
+        flex: 0 0 auto;
+      }
+      .primary-text {
+        color: var(
+          --jh-list-item-color-text-primary,
+          var(--jh-color-content-primary-enabled)
+        );
+      }
+      .secondary-text {
+        color: var(
+          --jh-list-item-color-text-secondary,
+          var(--jh-color-content-secondary-enabled)
+        );
+        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);
+        margin-top: var(--jh-dimension-50);
+      }
+      .primary-text,
+      .secondary-text {
+        display: block;
+        word-break: break-word;
+      }
+      .primary-metadata {
+        color: var(
+          --jh-list-item-metadata-color-text-primary,
+          var(--jh-color-content-primary-enabled)
+        );
+        text-align: right;
+        white-space: nowrap;
+      }
+      .secondary-metadata {
+        color: var(
+          --jh-list-item-metadata-color-text-secondary,
+          var(--jh-color-content-secondary-enabled)
+        );
+        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);
+        margin-top: var(--jh-dimension-50);
+        text-align: right;
+        white-space: nowrap;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Disables the list-item and prevents all user interactions. May cause list-item to be ignored by assistive technologies(AT).
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * The inset of the optional divider. Omit to use the divider-inset token instead.
+       */
+      dividerInset: {
+        type: Number,
+        attribute: 'divider-inset',
+      },
+      /**
+       * The text to show as primary metadata.
+       */
+      primaryMetadata: {
+        type: String,
+        attribute: 'primary-metadata',
+      },
+      /**
+       * The text to show as primary text.
+       */
+      primaryText: {
+        type: String,
+        attribute: 'primary-text',
+      },
+      /**
+       * The text to show as secondary metadata.
+       */
+      secondaryMetadata: {
+        type: String,
+        attribute: 'secondary-metadata',
+      },
+      /**
+       * The text to show as secondary text.
+       */
+      secondaryText: {
+        type: String,
+        attribute: 'secondary-text',
+      },
+      /**
+       * Determines whether an interactive list-item is selected.
+       */
+      selected: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines whether the divider is displayed below the list-item.
+       */
+      showDivider: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'show-divider',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'listitem';
+    /** @type {?boolean} */
+    this.disabled = false;
+    /** @type {null|0|8|16|24|32|40|48|56|64|72|80|88|96} */
+    this.dividerInset = null;
+    /** @type {?string} */
+    this.primaryMetadata = null;
+    /** @type {?string} */
+    this.primaryText = null;
+    /** @type {?string} */
+    this.secondaryMetadata = null;
+    /** @type {?string} */
+    this.secondaryText = null;
+    /** @type {?boolean} */
+    this.selected = false;
+    /** @type {?boolean} */
+    this.showDivider = false;
+  }
+
+  render() {
+    let showDivider;
+
+    if (this.disabled === true && this.hasAttribute('tabindex')) {
+      this.setAttribute('aria-disabled', 'true');
+    } else {
+      this.removeAttribute('aria-disabled');
+    }
+
+    if (this.showDivider) {
+      showDivider = html`
+        <jh-divider
+          inset=${ifDefined(this.dividerInset ? this.dividerInset : null)}
+        ></jh-divider>
+      `;
+    }
+
+    return html`
+      <div class="list-item">
+        <slot></slot>
+        <slot name="jh-list-item-left"></slot>
+        <slot name="jh-list-item-content">
+          <div class="text">
+            <div class="primary-text">${this.primaryText}</div>
+            <div class="secondary-text">${this.secondaryText}</div>
+          </div>
+        </slot>
+        <slot name="jh-list-item-metadata">
+          <div class="metadata">
+            <div class="primary-metadata">${this.primaryMetadata}</div>
+            <div class="secondary-metadata">${this.secondaryMetadata}</div>
+          </div>
+        </slot>
+        <slot name="jh-list-item-right"></slot>
+      </div>
+      ${showDivider}
+    `;
+  }
+}
+
+customElements.define('jh-list-item', JhListItem);

package/components/menu/menu.js

@@ -0,0 +1,60 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { LitElement, css, html } from 'lit';
+
+/**
+ * @cssprop --jh-menu-z-index - The menu z-index. Defaults to `--jh-z-index-positive-1000`.
+ * @cssprop --jh-menu-color-background - The menu container background-color. Defaults to `--jh-color-container-primary-enabled`.
+ * @cssprop --jh-menu-shadow - The menu box-shadow. Defaults to `--jh-shadow-high`.
+ * @cssprop --jh-menu-border-radius - The menu border-radius. Defaults to `--jh-border-radius-200`.
+ * @cssprop --jh-menu-space-padding - The menu container padding. Defaults to `--jh-dimension-200 0`.
+ * @cssprop --jh-menu-color-text - The text color. Defaults to `--jh-color-content-primary-enabled`.
+ *
+ * @slot default - Use to insert menu items.
+ * @customElement jh-menu
+ */
+export class JhMenu extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        background-color: var(
+          --jh-menu-color-background,
+          var(--jh-color-container-primary-enabled)
+        );
+        box-shadow: var(--jh-menu-shadow, var(--jh-shadow-high));
+        border-radius: var(
+          --jh-menu-border-radius,
+          var(--jh-border-radius-200)
+        );
+        color: var(
+          --jh-menu-color-text,
+          var(--jh-color-content-primary-enabled)
+        );
+        padding: var(--jh-menu-space-padding, var(--jh-dimension-200) 0);
+        z-index: var(--jh-menu-z-index, var(--jh-z-index-positive-1000));
+        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);
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      }
+    `;
+  }
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'menu';
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+customElements.define('jh-menu', JhMenu);