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

package/icons-wc/icon-server.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 JhIconServer 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 4.5c.966 0 1.75.784 1.75 1.75v2.5c0 .372-.117.716-.315 1 .198.284.315.628.315 1v2.5c0 .372-.117.716-.315 1 .198.284.315.628.315 1v2.5A1.75 1.75 0 0 1 19 19.5H5a1.75 1.75 0 0 1-1.75-1.75v-2.5c0-.372.117-.716.314-1a1.741 1.741 0 0 1-.314-1v-2.5c0-.372.117-.716.314-1a1.741 1.741 0 0 1-.314-1v-2.5c0-.966.784-1.75 1.75-1.75h14ZM5 15a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h14a.25.25 0 0 0 .25-.25v-2.5A.25.25 0 0 0 19 15H5Zm2 .5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-2-5a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h14a.25.25 0 0 0 .25-.25v-2.5a.25.25 0 0 0-.25-.25H5Zm2 .5a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM5 6a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h14a.25.25 0 0 0 .25-.25v-2.5A.25.25 0 0 0 19 6H5Zm2 .5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-server', JhIconServer);

package/icons-wc/icon-share-nodes.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 JhIconShareNode extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconShareNode 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-shield-checker.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 JhIconShieldChecker extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconShieldChecker 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-shield-check.js → icon-shield-checkmark.js}

@@ -1,10 +1,11 @@
-// 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 JhIconShieldCheck extends LitElement {
+export default class JhIconShieldCheckmark extends LitElement {
   /** @type {ElementInternals} */
   #internals;
 
@@ -22,31 +23,31 @@ export default class JhIconShieldCheck 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 {
@@ -84,4 +85,4 @@ export default class JhIconShieldCheck extends LitElement {
   }
 }
 
-customElements.define('jh-icon-shield-check', JhIconShieldCheck);
+customElements.define('jh-icon-shield-checkmark', JhIconShieldCheckmark);

package/icons-wc/icon-shield-dollar-sign.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 JhIconShieldDollarSign extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconShieldDollarSign 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-shield-exclamation.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 JhIconShieldExclamation 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="m12.368 2.347 8 4.5.382.215V7.5c0 6.425-2.064 10.015-4.246 11.993a9.608 9.608 0 0 1-2.985 1.856 7.775 7.775 0 0 1-1.298.376l-.086.013-.028.004-.008.001-.003.001h-.002A48.223 48.223 0 0 1 12 21l.093.744-.093.012-.093-.012L12 21c-.088.706-.093.742-.094.744h-.005l-.008-.002-.028-.004-.086-.013a7.775 7.775 0 0 1-1.299-.376 9.61 9.61 0 0 1-2.984-1.856C5.314 17.516 3.25 13.925 3.25 7.5v-.438l.382-.215 8-4.5L12 2.14l.368.207ZM4.754 7.936c.09 5.79 1.976 8.838 3.75 10.446a8.106 8.106 0 0 0 2.516 1.566c.34.131.62.21.81.255.069.017.127.027.17.035.043-.008.101-.018.17-.035.19-.045.47-.124.81-.255a8.107 8.107 0 0 0 2.516-1.566c1.774-1.608 3.659-4.655 3.75-10.446L12 3.86 4.754 7.936ZM12 14.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-shield-exclamation', JhIconShieldExclamation);

package/icons-wc/icon-shirt.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 JhIconShirt extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconShirt 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-shuffle.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 JhIconShuffle 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="M16.47 13.22a.75.75 0 0 1 1.06 0l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06-1.06L17.69 17H14.5c-1.246 0-2.07-.782-2.646-1.67l-.012-.021c.313-.54.576-1.108.805-1.648.149.312.301.599.466.854.456.704.883.985 1.387.985h3.188l-1.22-1.22a.75.75 0 0 1 0-1.06Zm0-8.5a.75.75 0 0 1 1.06 0l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 1 1-1.06-1.06l1.22-1.22H14.5c-.503 0-.93.28-1.38.982-.46.72-.827 1.695-1.259 2.793-.413 1.049-.885 2.207-1.552 3.097-.69.92-1.644 1.628-3 1.628H5.39l-.077-.004A.75.75 0 0 1 5.39 15.5h1.92c.74 0 1.294-.355 1.798-1.028.527-.704.934-1.67 1.358-2.746.404-1.028.831-2.178 1.391-3.052C12.43 7.782 13.254 7 14.5 7h3.19l-1.22-1.22a.75.75 0 0 1 0-1.06ZM7 7c1.409 0 2.42.685 3.162 1.608.06.074.114.152.17.229-.274.544-.514 1.12-.726 1.654a6.36 6.36 0 0 0-.613-.943C8.456 8.878 7.84 8.5 7 8.5H5.39a.75.75 0 0 1-.077-1.496L5.391 7H7Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-shuffle', JhIconShuffle);

package/icons-wc/icon-signal-stream-down.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 JhIconSignalStreamDown 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="M20.468 14.515a.721.721 0 0 1-.214 1.023 15.946 15.946 0 0 1-16.483.015l-.064-.043a.721.721 0 0 1-.191-.914l.039-.066a.78.78 0 0 1 1.048-.223 14.45 14.45 0 0 0 14.394.231l.423-.243a.78.78 0 0 1 1.048.22Zm-2.509-3.732c.23.344.14.813-.218 1.02a11.444 11.444 0 0 1-11.463.011l-.064-.042a.713.713 0 0 1-.195-.912l.039-.066c.23-.345.695-.434 1.056-.23a9.943 9.943 0 0 0 4.574 1.279l.322.005a9.945 9.945 0 0 0 4.893-1.293c.36-.205.825-.116 1.056.228Zm-2.51-3.742c.23.345.14.817-.228 1.01a6.94 6.94 0 0 1-6.43.006l-.065-.04c-.313-.21-.38-.645-.163-.97.23-.345.696-.432 1.07-.251a5.435 5.435 0 0 0 2.063.534l.309.009a5.44 5.44 0 0 0 2.372-.548c.374-.182.84-.095 1.071.25Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-signal-stream-down', JhIconSignalStreamDown);