@jack-henry/jh-icons 1.2.0 → 2.0.0-beta.7

package/icons-wc/icon-hand-back-point-touch.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconHandBackPointTouch extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M9 2a4.5 4.5 0 0 1 3.325 7.53c.21.079.403.193.574.333a1.851 1.851 0 0 1 1.254-.44l.227.017c.63.084 1.17.45 1.527.95a1.89 1.89 0 0 1 1.139-.195c1.137.152 1.983 1.219 1.983 2.343a.76.76 0 0 1-.01.11c.006.036.01.072.01.11v2.39c0 1.208-.356 2.787-1.006 4.08-.623 1.24-1.683 2.522-3.226 2.522h-4.446c-1.707 0-2.971-.927-3.77-1.771a7.903 7.903 0 0 1-1.139-1.56 4.601 4.601 0 0 1-.061-.115l-.018-.034-.005-.011-.002-.003v-.002l.674-.327-.676.326-.012-.03H5.34l-.002-.006-.01-.02c-.007-.02-.02-.047-.035-.083l-.134-.307c-.115-.262-.277-.63-.466-1.051a85.162 85.162 0 0 0-1.282-2.752c-.286-.578-.35-1.194-.053-1.727.281-.505.788-.754 1.243-.848.7-.146 1.629.01 2.267.582V6.323c0-.626.369-1.123.726-1.427.357-.302.856-.546 1.357-.546.435 0 .93.154 1.328.46.417.32.754.833.754 1.513v3.163a2.007 2.007 0 0 1 .996-.045V6.323a2.88 2.88 0 0 0-1.146-2.306 3.24 3.24 0 0 0-1.936-.667c-.804 0-1.524.377-2.004.784-.482.409-1.08 1.16-1.08 2.19v3.402A4.5 4.5 0 0 1 9 2Zm-.048 3.85a.438.438 0 0 0-.146.04.973.973 0 0 0-.24.15c-.172.145-.197.261-.197.283v8.281l-.004.078-.002.008c-.002.02-.008.04-.012.061-.005.027-.01.055-.018.081-.006.018-.015.034-.022.05a.594.594 0 0 1-.033.077c-.009.017-.02.032-.03.048a.744.744 0 0 1-.048.07l-.041.043a.73.73 0 0 1-.14.118l-.011.006c-.018.01-.035.022-.053.031-.019.01-.038.016-.057.024l-.007.003a.733.733 0 0 1-.184.044l-.06.006-.028.002a.759.759 0 0 1-.095-.006l-.007-.001c-.032-.005-.063-.014-.094-.023a.73.73 0 0 1-.318-.176.744.744 0 0 1-.156-.207l-.001-.004-.007-.013-.034-.065a43.032 43.032 0 0 0-.92-1.592c-.077-.125-.223-.244-.44-.32a1.249 1.249 0 0 0-.64-.05.594.594 0 0 0-.192.07.196.196 0 0 0-.045.04l-.002.007a.142.142 0 0 0-.003.04c.002.046.019.14.09.285.436.88.928 1.955 1.308 2.805.19.425.355.796.47 1.061l.137.312.036.083.005.01c0 .003.002.005.004.008a5.613 5.613 0 0 0 .225.386c.164.259.41.603.732.944.653.692 1.55 1.302 2.68 1.302h4.445c.63 0 1.312-.555 1.886-1.696.548-1.09.846-2.438.846-3.406v-2.39a.77.77 0 0 1 .008-.11.76.76 0 0 1-.008-.11c0-.438-.353-.811-.682-.855-.236-.032-.483.123-.483.5v.254a.75.75 0 0 1-1.5 0v-.654c0-.439-.354-.811-.682-.855-.236-.032-.483.123-.483.5v.054c0 .014-.002.028-.003.041 0 .016.003.031.003.046v.367a.75.75 0 0 1-1.5 0v-.367c0-.413-.309-.67-.582-.67-.274 0-.583.257-.583.67v.367a.75.75 0 0 1-1.5 0v-.367c0-.047.004-.094.007-.14a.755.755 0 0 1-.007-.092V6.323A.383.383 0 0 0 9.366 6a.746.746 0 0 0-.414-.15Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-hand-back-point-touch', JhIconHandBackPointTouch);

package/icons-wc/icon-hand-back-point-up.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconHandBackPointUp extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M9.585 2.549c.47 0 1.006.167 1.438.498.45.346.812.897.812 1.629v3.693a2.167 2.167 0 0 1 2.198.418c.42-.386 1-.593 1.65-.507.71.094 1.316.52 1.703 1.098.37-.214.814-.314 1.299-.25v.002c1.229.164 2.15 1.32 2.15 2.543a.746.746 0 0 1-.012.124c.007.04.012.082.012.125v2.69c0 1.346-.397 3.108-1.122 4.55-.699 1.39-1.87 2.788-3.548 2.788H11.16c-1.886 0-3.286-1.023-4.176-1.965a8.797 8.797 0 0 1-1.337-1.863l-.027-.055.675-.327-.675.326-.014-.028v-.002l-.002-.006-.011-.024-.04-.092-.15-.347c-.13-.295-.313-.709-.525-1.183a96.006 96.006 0 0 0-1.446-3.102c-.313-.632-.374-1.291-.06-1.855.298-.537.839-.807 1.335-.91.827-.172 1.94.042 2.628.787V4.676c0-.668.393-1.203.784-1.534.39-.331.931-.593 1.466-.593Zm0 1.5c-.08 0-.29.062-.495.236-.205.174-.255.328-.255.39V14a.77.77 0 0 1-.032.205c-.006.018-.01.037-.017.055a.744.744 0 0 1-.105.19.731.731 0 0 1-.051.062c-.014.015-.029.028-.044.042a.747.747 0 0 1-.166.118l-.034.014-.018.007a.747.747 0 0 1-.222.053l-.03.002-.031.002a.75.75 0 0 1-.088-.006c-.007 0-.014-.002-.02-.003a.626.626 0 0 1-.088-.02c-.023-.007-.046-.012-.068-.02a.74.74 0 0 1-.186-.104.757.757 0 0 1-.06-.05c-.017-.015-.033-.033-.049-.05-.018-.022-.038-.043-.054-.066l-.015-.02a.759.759 0 0 1-.043-.075v-.003l-.01-.016a48.798 48.798 0 0 0-1.078-1.871c-.21-.346-.8-.567-1.314-.46-.235.048-.314.14-.33.17-.005.008-.071.126.094.461a97.53 97.53 0 0 1 1.471 3.153c.215.48.398.898.528 1.196l.154.35.04.094.007.013.006.014.05.091a7.295 7.295 0 0 0 1.044 1.427c.744.788 1.777 1.495 3.084 1.495h5.005c.767 0 1.558-.67 2.207-1.962.623-1.239.963-2.77.963-3.876v-2.69c0-.043.004-.085.01-.125a.768.768 0 0 1-.01-.124c0-.537-.428-1-.849-1.057-.328-.043-.65.181-.651.657v.287a.75.75 0 0 1-1.5 0v-.737c0-.537-.428-1-.849-1.056-.328-.044-.65.18-.651.656v.061c0 .016-.002.032-.003.047 0 .018.003.035.003.053v.413a.75.75 0 0 1-1.5 0v-.413c0-.512-.384-.85-.75-.85s-.75.338-.75.85v.413a.75.75 0 0 1-1.5 0v-.413c0-.054.004-.107.008-.16a.753.753 0 0 1-.008-.103V4.676a.525.525 0 0 0-.227-.44.932.932 0 0 0-.523-.187Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-hand-back-point-up', JhIconHandBackPointUp);

package/icons-wc/icon-hand-holding-dollar-sign.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconHandHoldingDollarSign extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M2.013 12.943a.75.75 0 0 1 .876-.598l2.845.536a.75.75 0 0 1 .604.834l-.123.948c.043.013.085.026.128.035.603.129.962.2 1.33.211.351.01.745-.037 1.382-.203.677-.177 1.106-.28 1.599-.33.477-.049 1.007-.048 1.88-.048.615 0 1.14.206 1.504.607.351.387.48.871.489 1.3.003.164-.012.329-.041.49a29.767 29.767 0 0 0 3.116-1.02c.31-.125.497-.216.566-.26 1.082-.688 2.234-.545 2.98.012.364.271.66.666.756 1.138a1.54 1.54 0 0 1-.444 1.42c-.505.503-1.314 1.086-2.15 1.606-.842.525-1.767 1.02-2.531 1.333-1.54.63-3.88 1.046-6.179 1.046-2.39 0-4.15-.907-5.162-1.337l-.066.507a.751.751 0 0 1-.891.639L2.6 21.43a.75.75 0 0 1 .3-1.47l1.089.22.771-5.956-2.147-.405a.75.75 0 0 1-.599-.876Zm10.52 2.885c-.904 0-1.343 0-1.726.04-.367.038-.696.113-1.373.29-.718.186-1.262.265-1.804.25-.527-.015-1.02-.12-1.6-.243l-.01-.003-.381 2.945c.115.054.231.11.35.16 1.108.466 2.567 1.233 4.611 1.233 2.158 0 4.295-.395 5.61-.935.664-.271 1.513-.722 2.309-1.217.803-.5 1.499-1.013 1.884-1.396.042-.042.033-.051.03-.06-.007-.038-.05-.134-.182-.233-.247-.184-.722-.302-1.278.052-.198.126-.502.261-.81.386a30.66 30.66 0 0 1-3.433 1.115c-.534.132-1.534.228-2.336.292-.415.033-.8.059-1.081.076l-.335.02-.093.005-.024.001h-.086l-.012-.002c-.025-.001-.05-.007-.075-.011a.727.727 0 0 1-.204-.064.727.727 0 0 1-.37-.41.745.745 0 0 1-.047-.184l-.002-.029-.001-.01v-.058a.69.69 0 0 1 .005-.067c.002-.024.008-.048.013-.072a.797.797 0 0 1 .022-.084l.021-.051c.012-.027.023-.055.037-.08.011-.019.026-.036.038-.054.015-.02.03-.042.046-.06.014-.018.032-.034.048-.05.017-.016.034-.034.052-.049a.777.777 0 0 1 .07-.047l.048-.03a.772.772 0 0 1 .08-.034c.022-.009.045-.019.069-.025.01-.003.021-.007.032-.009l.031-.006.04-.006c.007 0 .013-.002.02-.003h.004l.013-.002c.012 0 .03-.002.051-.005l.19-.02.614-.071c.468-.057.965-.125 1.23-.179a.39.39 0 0 0 .076-.104.973.973 0 0 0 .113-.466c-.003-.168-.053-.27-.098-.32-.032-.035-.124-.116-.396-.116ZM12.4 2.5a.75.75 0 0 1 .75.75v.244c.335.085.66.23.942.445.513.391.858.993.858 1.754a.75.75 0 0 1-1.5 0 .654.654 0 0 0-.267-.56C13 4.993 12.718 4.9 12.4 4.9c-.319 0-.6.093-.783.233a.655.655 0 0 0-.267.56c0 .492.148.71.31.854.216.192.528.32 1.007.503.42.16 1.01.375 1.47.783.511.455.813 1.095.813 1.975 0 .761-.345 1.363-.858 1.754a2.609 2.609 0 0 1-.942.443v.245a.75.75 0 0 1-1.5 0v-.246a2.608 2.608 0 0 1-.942-.442 2.152 2.152 0 0 1-.858-1.754.75.75 0 0 1 1.5 0c0 .266.105.437.267.56.18.138.458.23.772.232h.02c.315-.002.593-.094.774-.232a.654.654 0 0 0 .267-.56c0-.492-.148-.71-.311-.854-.216-.192-.526-.32-1.006-.503-.42-.16-1.01-.375-1.469-.783-.512-.455-.814-1.095-.814-1.975 0-.761.346-1.363.858-1.754a2.61 2.61 0 0 1 .942-.444V3.25a.75.75 0 0 1 .75-.75Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-hand-holding-dollar-sign', JhIconHandHoldingDollarSign);

package/icons-wc/icon-hand-holding-leaf.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconHandHoldingLeaf extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M14.206 3.45c1.17-.81 2.74-.838 3.874-.727a12.047 12.047 0 0 1 2.067.391c.014.005.026.01.035.012l.01.002c.002 0 .003.002.003.002h.002c0 .002-.01.036-.222.717l.222-.716.63.195-.114.65v.003l-.001.003-.002.01-.006.032-.022.113a11.837 11.837 0 0 1-.492 1.682c-.362.956-.991 2.213-2.04 2.926-1.053.717-2.44.818-3.447.783-.443-.015-.844-.06-1.158-.105v3.864c.435.078.805.278 1.08.591.141.16.245.338.32.52l.288-.251c.813-.715 1.761-1.557 2.332-2.097.935-.884 2.168-.608 2.89-.117.37.252.711.623.866 1.077.17.498.098 1.075-.35 1.521-.432.43-1.211 1.277-2.057 2.186-.831.893-1.724 1.84-2.35 2.43C15.211 20.42 13.785 21 11.726 21H7c.017 0-.061.006-.264.094-.176.077-.38.185-.579.302a11.275 11.275 0 0 0-.67.428l-.04.029-.01.006-.002.002a.75.75 0 0 1-.87-1.222l.002-.002.004-.002.014-.01.05-.035a12.162 12.162 0 0 1 .762-.486 7.14 7.14 0 0 1 .74-.385c.229-.1.55-.219.863-.219h4.726c1.692 0 2.745-.445 3.81-1.446.583-.549 1.44-1.458 2.28-2.36.816-.876 1.62-1.75 2.08-2.21a.782.782 0 0 0-.286-.311c-.39-.266-.784-.25-1.014-.033-.594.56-1.561 1.42-2.372 2.133l-1.047.916-.319.277-.087.075-.029.024-.002.002-.017.013c-.199.307-.513.617-.964.714-.233.05-.617.064-.976.07-.39.005-.848.001-1.28-.006a85.548 85.548 0 0 1-1.52-.043l-.103-.003-.027-.001h-.01a.751.751 0 0 1 .061-1.5h.008l.026.002.1.003a75.16 75.16 0 0 0 1.493.042c.426.008.864.012 1.229.006.182-.003.34-.008.467-.015.064-.004.116-.009.156-.013l.028-.004a.421.421 0 0 0 .077-.107c.072-.133.12-.32.116-.502-.003-.184-.055-.297-.105-.354-.034-.038-.123-.119-.388-.119H8.304c-.514 0-1.125.283-1.674.652a7.023 7.023 0 0 0-.813.642l-.043.04-.01.01a.75.75 0 0 1-.17.127l-1.738.94a.75.75 0 0 1-.713-1.321l1.647-.89c.002-.003.005-.004.008-.006a8.518 8.518 0 0 1 .995-.785c.611-.412 1.535-.909 2.51-.909h3.742v-1.792a8.564 8.564 0 0 1-.476.172c-.775.252-1.905.493-2.922.158-1.01-.333-1.795-1.195-2.289-1.857a9.657 9.657 0 0 1-.806-1.29l-.013-.025-.004-.006v-.004l-.002-.001-.289-.593.552-.362.002-.001.003-.002.007-.005.026-.017.092-.057a9.81 9.81 0 0 1 1.438-.715c.855-.338 2.114-.68 3.246-.298.678.229 1.191.67 1.577 1.148h.069c.017-.298.05-.653.119-1.032.185-1.028.644-2.4 1.831-3.222Zm-4.075 4.526c-.6-.203-1.423-.04-2.215.273-.253.1-.484.21-.68.31.093.146.2.31.324.476.454.61 1.007 1.148 1.557 1.33.544.178 1.285.067 1.988-.162.23-.074.44-.159.616-.234a5.517 5.517 0 0 0-.248-.599c-.317-.644-.762-1.198-1.342-1.394Zm7.803-3.76c-1.067-.104-2.169-.022-2.875.467-.69.477-1.046 1.355-1.207 2.253a7.198 7.198 0 0 0-.105 1c.274.039.624.08 1.008.092.932.033 1.91-.086 2.552-.523.647-.44 1.141-1.322 1.48-2.217.123-.327.215-.638.285-.895a10.467 10.467 0 0 0-1.137-.177Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-hand-holding-leaf', JhIconHandHoldingLeaf);

package/icons-wc/icon-handshake.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconHandshake extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconHandshake extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-hashtag.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconHashtag extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconHashtag extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-headset.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconHeadset extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M11.999 3.25c3.265 0 5.751 2.307 5.751 4.75v.574A3.752 3.752 0 0 1 17 16h-.5a.75.75 0 0 1-.75-.75v-6a.75.75 0 0 1 .5-.705V8c0-1.414-1.598-3.25-4.251-3.25C9.333 4.75 7.75 6.585 7.75 8v.545c.29.103.5.379.5.705v6a.75.75 0 0 1-.75.75h-.228c.018.163.05.378.101.607.12.534.308.946.523 1.119.107.085.361.212.774.352.389.133.844.253 1.287.356l.139.03c.128-.19.29-.35.466-.473.399-.28.91-.43 1.438-.43.528 0 1.04.15 1.438.43.396.279.736.734.736 1.32 0 .587-.34 1.043-.736 1.32-.398.28-.91.43-1.438.43-.528 0-1.04-.15-1.438-.43a1.799 1.799 0 0 1-.576-.656c-.119-.026-.243-.051-.368-.08a15.23 15.23 0 0 1-1.431-.397c-.432-.147-.902-.34-1.227-.6-.647-.518-.922-1.387-1.05-1.962a7.156 7.156 0 0 1-.154-1.054l-.004-.073-.001-.022v-.002a3.75 3.75 0 0 1 .499-7.21V8c0-2.442 2.467-4.75 5.749-4.75ZM6.75 10.015a2.25 2.25 0 0 0 0 4.47v-4.47Zm10.5 4.47a2.249 2.249 0 0 0 0-4.47v4.47Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-headset', JhIconHeadset);

package/icons-wc/icon-heart-filled.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconHeartFilled extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconHeartFilled extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-heart-pulse.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconHeartPulse extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconHeartPulse extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {