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

package/icons-wc/icon-gauge.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 JhIconGauge extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconGauge 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-gear.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 JhIconGear extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconGear 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-globe-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 JhIconGlobeDollarSign 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.1 3.75A8.25 8.25 0 0 1 18.784 9h-2.483v1.25h-2.02c.044.565.07 1.15.07 1.75 0 .6-.026 1.185-.07 1.75h.421c.006.376.052.737.14 1.078H14.7v.422h-.59c-.13.848-.308 1.623-.53 2.29a8.355 8.355 0 0 1-.34.86 6.731 6.731 0 0 0 1.478-.706c.05.544.21 1.041.453 1.48A8.25 8.25 0 1 1 11.1 3.75Zm8.45 7.903c.286.08.562.208.805.393.475.362.795.92.795 1.625v.75h-1.5v-.75a.5.5 0 0 0-.205-.432c-.145-.11-.377-.19-.645-.19s-.5.08-.646.19a.499.499 0 0 0-.204.432c0 .415.123.586.248.697.179.159.44.267.87.43.37.142.909.338 1.33.713.475.422.752 1.014.752 1.817 0 .704-.32 1.263-.795 1.625a2.39 2.39 0 0 1-.804.393v.904h-1.5v-.903a2.39 2.39 0 0 1-.805-.394 1.995 1.995 0 0 1-.796-1.625v-.75h1.5v.75a.5.5 0 0 0 .204.433c.146.11.378.19.646.19s.5-.08.645-.19a.5.5 0 0 0 .205-.433c0-.415-.123-.585-.248-.696-.178-.159-.44-.267-.869-.43-.37-.142-.91-.338-1.33-.713-.476-.422-.753-1.015-.753-1.818 0-.704.32-1.263.796-1.625.243-.185.52-.313.805-.393v-.903h1.5v.903ZM9.61 15.25c.114.681.26 1.294.435 1.816.212.635.447 1.095.672 1.38.23.291.364.303.383.303.02 0 .155-.011.384-.303.225-.285.46-.745.672-1.38.174-.522.32-1.135.435-1.816H9.609Zm-4.426 0a6.767 6.767 0 0 0 3.775 3.15 8.377 8.377 0 0 1-.338-.86 14.21 14.21 0 0 1-.531-2.29H5.184Zm-.604-5a6.758 6.758 0 0 0 0 3.5h3.34A22.854 22.854 0 0 1 7.851 12c0-.6.025-1.185.068-1.75H4.58Zm4.844 0a21.225 21.225 0 0 0 0 3.5h3.352a21.21 21.21 0 0 0 .075-1.75c0-.606-.028-1.192-.075-1.75H9.424Zm-.465-4.651A6.768 6.768 0 0 0 5.184 8.75H8.09c.13-.848.309-1.623.531-2.29.101-.304.214-.593.338-.861Zm2.14-.349c-.018 0-.153.013-.382.304-.225.285-.46.745-.672 1.38a12.41 12.41 0 0 0-.436 1.816h2.982a12.25 12.25 0 0 0-.435-1.816c-.211-.635-.447-1.095-.672-1.38-.23-.292-.365-.304-.383-.304H11.1Zm2.141.349c.124.268.239.557.34.861.222.667.4 1.442.53 2.29h2.907a6.768 6.768 0 0 0-3.777-3.151Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-globe-dollar-sign', JhIconGlobeDollarSign);

package/icons-wc/icon-globe-user.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 JhIconGlobeUser 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.1 3.75A8.25 8.25 0 0 1 19.35 12c0 .182-.01.362-.02.541a3.911 3.911 0 0 0-1.495-1.001 6.736 6.736 0 0 0-.215-1.29h-3.339c.035.447.056.907.065 1.377a3.796 3.796 0 0 0-1.514 1.22 20.233 20.233 0 0 0-.056-2.597H9.424a21.225 21.225 0 0 0 0 3.5h2.919a4.47 4.47 0 0 0-.285 1.5H9.609c.115.681.262 1.294.436 1.816.17.51.356.907.539 1.192a5.783 5.783 0 0 0-.212.926l-.004.026v.01l-.002.006v.003s.009 0 1.49.18v-.008l.002-.014a3.13 3.13 0 0 1 .035-.203c.024-.127.064-.3.127-.492.11-.337.345-.913.851-1.24.339-.22.699-.428 1.004-.592a3.896 3.896 0 0 1-.32-1.505c0-.723.222-1.396.716-1.888.493-.492 1.173-.717 1.92-.717.744 0 1.431.224 1.936.706.509.486.754 1.16.754 1.9 0 .64-.17 1.146-.302 1.486.343.204.686.466.978.783.43.468.793 1.105.793 1.875a.75.75 0 0 1-1.5 0c0-.278-.13-.57-.397-.86a2.953 2.953 0 0 0-.714-.552l-.257-.13a.893.893 0 0 1-.471-.488.977.977 0 0 1-.047-.524c.034-.196.13-.42.176-.535.12-.302.24-.633.24-1.056 0-.404-.126-.658-.29-.814-.166-.16-.45-.291-.9-.291-.447 0-.711.13-.86.28-.15.15-.274.405-.274.825 0 .417.124.75.25 1.043.048.11.147.323.192.49a.99.99 0 0 1 .014.492.853.853 0 0 1-.485.578 11.83 11.83 0 0 0-1.34.752c-.046.03-.149.164-.24.446a2.772 2.772 0 0 0-.1.412l-.002.022-.001.003-.013.073a.75.75 0 0 1-1.476-.256l-1.489-.18c-.042.346 0 .684.106.994A8.249 8.249 0 0 1 11.1 3.75Zm-5.916 11.5a6.767 6.767 0 0 0 3.775 3.15 8.377 8.377 0 0 1-.338-.86 14.21 14.21 0 0 1-.531-2.29H5.184Zm-.604-5a6.758 6.758 0 0 0 0 3.5h3.34A22.854 22.854 0 0 1 7.851 12c0-.6.025-1.185.068-1.75H4.58Zm4.38-4.651A6.768 6.768 0 0 0 5.184 8.75H8.09c.13-.848.309-1.623.531-2.29.101-.304.214-.593.338-.861Zm2.14-.349c-.018 0-.153.013-.382.304-.225.285-.46.745-.672 1.38A12.41 12.41 0 0 0 9.61 8.75h2.982a12.25 12.25 0 0 0-.435-1.816c-.211-.635-.447-1.095-.672-1.38-.23-.292-.365-.304-.383-.304H11.1Zm2.141.349c.124.268.239.557.34.861.222.667.4 1.442.53 2.29h2.907a6.768 6.768 0 0 0-3.777-3.151Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-globe-user', JhIconGlobeUser);

package/icons-wc/icon-globe.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 JhIconGlobe extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconGlobe 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-gold.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 JhIconGold 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.746 9c.224 0 .422.138.493.342l1.735 5a.497.497 0 0 1-.33.633.542.542 0 0 1-.164.025h2.766c.224 0 .422.138.493.342l1.735 5a.497.497 0 0 1-.33.633.542.542 0 0 1-.164.025h-8.96l-.017-.002-.024.002H3.021a.51.51 0 0 1-.521-.5c0-.054.009-.107.026-.158l1.735-5A.519.519 0 0 1 4.754 15H7.52a.51.51 0 0 1-.52-.5c0-.054.009-.107.026-.158l1.735-5A.519.519 0 0 1 9.254 9h5.492ZM4.406 19.5h6.188l-1.04-3H5.446l-1.04 3Zm9 0h6.188l-1.04-3h-4.108l-1.04 3Zm-3.16-4.5c.224 0 .422.138.493.342L12 18.976l1.26-3.634a.519.519 0 0 1 .494-.342h-3.508Zm-1.34-1.5h6.188l-1.04-3H9.946l-1.04 3ZM3.852 9.814l1.764.424a.5.5 0 0 1-.232.973l-1.766-.424a.5.5 0 0 1 .234-.973Zm16.771 0a.5.5 0 0 1 .233.973l-1.765.424a.5.5 0 0 1-.233-.973l1.765-.424ZM5.853 5.128a.5.5 0 0 1 .706.038l1.795 2a.5.5 0 1 1-.744.668l-1.796-2a.5.5 0 0 1 .039-.706Zm12.063.038a.5.5 0 0 1 .744.668l-1.796 2a.5.5 0 0 1-.744-.668l1.796-2ZM12 4a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 12 4Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-gold', JhIconGold);

package/icons-wc/icon-graduation-cap.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 JhIconGraduationCap extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconGraduationCap 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-grid.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 JhIconGrid extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconGrid 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-grip-dots-vertical.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 JhIconGripDotsVertical extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconGripDotsVertical 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-halftone.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 JhIconHalftone 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="M19 3.25c.966 0 1.75.784 1.75 1.75v14A1.75 1.75 0 0 1 19 20.75H5A1.75 1.75 0 0 1 3.25 19V5c0-.966.784-1.75 1.75-1.75h14ZM7.5 16a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm4 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm4 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm-10-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V13H5.5ZM9 13v1.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V13H9Zm4 0v1.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V13h-2Zm4 0v1.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H17ZM7 11v2h2v-2H7Zm4 0v2h2v-2h-2Zm4 0v2h2v-2h-2ZM5.5 5a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5H7V9.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5V11h2V9.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5V11h2V9.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5V11h1.5a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5h-13Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-halftone', JhIconHalftone);