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

package/icons-wc/icon-signal-stream-left.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 JhIconSignalStreamLeft 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.484 20.468a.721.721 0 0 1-1.022-.214A15.946 15.946 0 0 1 8.447 3.77l.043-.063a.721.721 0 0 1 .914-.191l.066.039a.78.78 0 0 1 .222 1.047 14.45 14.45 0 0 0-.23 14.395l.243.423a.78.78 0 0 1-.22 1.048Zm3.733-2.51a.714.714 0 0 1-1.02-.217 11.444 11.444 0 0 1-.011-11.463l.041-.064a.713.713 0 0 1 .913-.196l.066.04c.345.23.434.695.23 1.056a9.943 9.943 0 0 0-1.279 4.573l-.005.323a9.944 9.944 0 0 0 1.293 4.893c.204.36.116.825-.228 1.056Zm3.742-2.51c-.345.232-.817.14-1.01-.227a6.94 6.94 0 0 1-.006-6.43l.04-.066c.21-.312.645-.379.97-.163.345.231.432.697.251 1.07a5.435 5.435 0 0 0-.534 2.064l-.009.309c0 .824.19 1.636.548 2.372.181.373.095.84-.25 1.071Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-signal-stream-left', JhIconSignalStreamLeft);

package/icons-wc/icon-signal-stream-right.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 JhIconSignalStreamRight 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.516 3.533a.721.721 0 0 1 1.023.214 15.947 15.947 0 0 1 .014 16.483l-.043.064a.722.722 0 0 1-.914.191l-.065-.039a.78.78 0 0 1-.223-1.048 14.451 14.451 0 0 0 .23-14.394l-.242-.423a.779.779 0 0 1 .22-1.048Zm-3.733 2.509a.714.714 0 0 1 1.02.217 11.445 11.445 0 0 1 .011 11.463l-.042.065a.714.714 0 0 1-.912.195l-.066-.039c-.345-.23-.434-.696-.23-1.056a9.945 9.945 0 0 0 1.278-4.574l.005-.322a9.945 9.945 0 0 0-1.293-4.894c-.204-.36-.115-.824.229-1.055ZM7.04 8.552c.345-.232.817-.14 1.01.227a6.94 6.94 0 0 1 .005 6.43l-.039.065c-.211.313-.645.38-.97.163-.345-.23-.432-.696-.251-1.07a5.436 5.436 0 0 0 .534-2.064l.009-.308a5.44 5.44 0 0 0-.548-2.372c-.182-.374-.095-.84.25-1.072Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-signal-stream-right', JhIconSignalStreamRight);

package/icons-wc/icon-signal-stream-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 JhIconSignalStreamUp 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="M3.532 9.484a.721.721 0 0 1 .214-1.022 15.946 15.946 0 0 1 16.484-.015l.063.043c.28.213.357.602.191.914l-.039.066a.78.78 0 0 1-1.048.222 14.45 14.45 0 0 0-14.394-.23l-.423.243a.78.78 0 0 1-1.048-.22Zm2.509 3.733a.714.714 0 0 1 .218-1.02 11.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.573-1.279l-.323-.005a9.945 9.945 0 0 0-4.893 1.293c-.36.205-.825.116-1.056-.228Zm2.51 3.742c-.23-.345-.14-.817.228-1.01a6.94 6.94 0 0 1 6.43-.005l.065.038c.313.212.38.646.164.97-.232.346-.697.433-1.07.252a5.435 5.435 0 0 0-2.064-.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-up', JhIconSignalStreamUp);

package/icons-wc/icon-signature-pen.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 JhIconSignaturePen 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.833 2.82a.75.75 0 0 1 1.025.275l6.635 11.49a.75.75 0 0 1 .098.423l-.268 4.151a.75.75 0 0 1-.953.67.743.743 0 0 1-.393.165l-.077.004h-3.13c-1.163 0-2.15-.457-2.937-.835-.854-.411-1.411-.686-1.952-.686-.51 0-1.103.301-1.785.716-.303.185-.65.408-.945.559a2.68 2.68 0 0 1-.507.204 1.306 1.306 0 0 1-.676.018c-.445-.117-.634-.48-.694-.742a1.834 1.834 0 0 1-.01-.643c.049-.357.173-.8.264-1.147l.036-.151a14.05 14.05 0 0 0-1.095.951 30.624 30.624 0 0 0-1.361 1.382l-.088.096-.022.024-.005.006-.001.001a.75.75 0 0 1-1.113-1.006l.556.503-.556-.504.002-.002.007-.008.026-.027a27.866 27.866 0 0 1 .431-.46c.283-.297.671-.694 1.091-1.093.417-.395.879-.807 1.307-1.124.213-.158.434-.304.648-.415.195-.1.47-.216.767-.217a1 1 0 0 1 .887.504c.15.263.162.549.157.73-.013.377-.13.835-.224 1.191l-.092.35.429-.26c.638-.39 1.575-.936 2.566-.936.962 0 1.876.485 2.603.834.795.383 1.502.687 2.286.687h.873l-1.129-.559a.753.753 0 0 1-.317-.297L8.562 6.152a.753.753 0 0 1 .275-1.025l3.996-2.307Zm-2.595 3.232 6.144 10.642L18.9 17.94l.18-2.801-6.145-10.644-2.697 1.558Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-signature-pen', JhIconSignaturePen);

package/icons-wc/icon-sliders.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 JhIconSlider extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconSlider 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-sparkles-filled.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 JhIconSparklesFilled 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="M8.525 14.438a.5.5 0 0 1 .442.267l.031.073.001.003.004.011.015.042a12.609 12.609 0 0 0 .253.665c.079.192.166.388.252.554.093.178.164.277.199.312.034.035.134.105.312.199.166.086.362.173.554.252a13.113 13.113 0 0 0 .665.253l.042.015.01.004h.004a.5.5 0 0 1 .005.947l-.004.001a9.238 9.238 0 0 0-.055.02l-.161.058c-.136.051-.32.122-.514.202a7.944 7.944 0 0 0-.557.257c-.18.094-.274.16-.301.187-.027.027-.093.12-.187.3a7.596 7.596 0 0 0-.257.558c-.08.194-.151.378-.202.514l-.058.162-.016.044-.004.01v.004l-.033.073a.5.5 0 0 1-.917-.087l-.004-.01-.014-.042-.052-.154a12.016 12.016 0 0 0-.189-.497 6.387 6.387 0 0 0-.25-.55 1.52 1.52 0 0 0-.212-.325 1.529 1.529 0 0 0-.326-.211 6.378 6.378 0 0 0-.549-.251 11.273 11.273 0 0 0-.497-.189l-.154-.052-.042-.014-.01-.004h-.003a.5.5 0 0 1-.008-.95l.003-.001.011-.003c.01-.003.024-.01.043-.016a11.478 11.478 0 0 0 .669-.256 7.28 7.28 0 0 0 .557-.254 1.49 1.49 0 0 0 .306-.194c.031-.031.1-.127.194-.306a7.5 7.5 0 0 0 .253-.557 13.856 13.856 0 0 0 .257-.669l.016-.043.003-.01v-.004a.502.502 0 0 1 .475-.338Zm7.128-10.113a.98.98 0 0 1 .634.425c.112.163.184.352.233.504.1.311.187.735.276 1.151.189.882.423 1.918.875 2.822.367.734 1.13 1.166 1.984 1.511.36.146.866.321 1.168.457.165.075.364.176.53.317.17.143.397.409.397.803 0 .239-.071.473-.229.673a1.3 1.3 0 0 1-.45.356c-.133.067-.279.12-.403.163-.142.05-.26.087-.413.142-.552.2-1.323.542-2.225 1.444-.833.833-1.135 1.894-1.295 2.843-.04.236-.07.458-.1.671a9.818 9.818 0 0 1-.091.6 2.011 2.011 0 0 1-.2.59c-.126.224-.394.513-.84.515-.448.003-.72-.285-.849-.51a1.998 1.998 0 0 1-.199-.592 10.747 10.747 0 0 1-.093-.6c-.029-.213-.059-.435-.098-.671-.16-.95-.462-2.013-1.295-2.846-.898-.898-1.666-1.222-2.218-1.415-.174-.061-.251-.085-.415-.14a3.1 3.1 0 0 1-.418-.173 1.292 1.292 0 0 1-.457-.38 1.124 1.124 0 0 1-.212-.67l.009-.136c.04-.307.213-.531.37-.672.169-.152.372-.26.54-.337.318-.146.812-.313 1.182-.46.858-.337 1.613-.754 1.977-1.483.452-.904.689-1.94.879-2.823.09-.416.177-.84.278-1.151a2 2 0 0 1 .234-.504.977.977 0 0 1 .633-.424l.15-.013.151.013ZM7 3.312a.75.75 0 0 1 .604.305l.054.085 1.31 2.393 2.392 1.31a.75.75 0 0 1 0 1.316l-2.392 1.308-1.31 2.394a.75.75 0 0 1-1.316 0l-1.309-2.394L2.64 8.721a.75.75 0 0 1 0-1.317l2.393-1.31 1.309-2.392A.75.75 0 0 1 7 3.312Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-sparkles-filled', JhIconSparklesFilled);

package/icons-wc/icon-sparkles.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 JhIconSparkle 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="M8.526 14.438a.5.5 0 0 1 .442.267l.031.073.001.003.004.011.015.042a12.241 12.241 0 0 0 .252.665 7 7 0 0 0 .253.554c.094.178.164.277.199.312.035.035.134.105.312.199.166.086.362.173.554.252a13.016 13.016 0 0 0 .665.253l.042.015.01.004h.004a.5.5 0 0 1 .005.947l-.003.001a.03.03 0 0 0-.011.004l-.044.016-.162.058c-.136.051-.32.122-.514.202a8.194 8.194 0 0 0-.558.257c-.18.094-.273.16-.3.187-.027.027-.093.12-.187.3a7.6 7.6 0 0 0-.257.558c-.08.194-.151.378-.202.514l-.058.162-.016.044-.004.01-.001.004-.032.073a.501.501 0 0 1-.916-.084l-.001-.003-.004-.01-.014-.042-.052-.154c-.047-.13-.112-.309-.189-.497a6.387 6.387 0 0 0-.25-.55 1.526 1.526 0 0 0-.212-.325 1.523 1.523 0 0 0-.326-.211 6.37 6.37 0 0 0-.549-.251 11.483 11.483 0 0 0-.497-.189l-.154-.052-.042-.014-.01-.004h-.003a.5.5 0 0 1-.008-.95l.003-.001.01-.003.044-.016.16-.057c.135-.05.317-.12.509-.2a7.27 7.27 0 0 0 .556-.253c.18-.094.276-.162.307-.194.032-.031.1-.128.193-.306.087-.166.174-.364.254-.557a13.838 13.838 0 0 0 .257-.669l.016-.043.003-.01v-.004a.502.502 0 0 1 .475-.338Zm7.127-10.113a.98.98 0 0 1 .634.425c.112.163.184.352.233.504.1.311.188.735.277 1.151.188.882.422 1.918.874 2.822.367.734 1.13 1.166 1.984 1.511.36.146.866.321 1.168.457.165.075.366.176.532.317.17.144.395.41.395.803 0 .239-.071.473-.229.673-.141.18-.318.29-.45.356-.133.067-.279.12-.403.163-.142.05-.26.087-.412.142-.552.2-1.323.542-2.226 1.444-.833.833-1.135 1.894-1.295 2.843-.04.236-.07.458-.098.671-.028.206-.057.418-.093.6a2.011 2.011 0 0 1-.2.59c-.126.224-.394.513-.84.515-.447.003-.72-.285-.848-.51a1.999 1.999 0 0 1-.2-.592 10.747 10.747 0 0 1-.093-.6c-.029-.213-.059-.435-.098-.671-.16-.95-.462-2.013-1.295-2.846-.898-.898-1.666-1.222-2.218-1.415-.174-.061-.251-.084-.415-.14a3.091 3.091 0 0 1-.417-.173 1.293 1.293 0 0 1-.458-.38 1.124 1.124 0 0 1-.212-.67l.009-.136c.04-.307.213-.531.37-.672.169-.152.372-.26.54-.337.318-.146.812-.313 1.182-.46.858-.337 1.613-.754 1.978-1.483.452-.904.688-1.941.878-2.823.09-.416.177-.84.278-1.151a2 2 0 0 1 .234-.504.978.978 0 0 1 .633-.424l.15-.013.151.013Zm-.153 3.16c-.179.747-.428 1.612-.83 2.413-.634 1.27-1.878 1.858-2.77 2.21-.203.08-.378.141-.53.198.687.25 1.622.688 2.66 1.726.802.802 1.224 1.735 1.469 2.58.245-.845.668-1.777 1.47-2.58 1.006-1.005 1.912-1.46 2.593-1.723-.136-.051-.29-.108-.467-.18-.895-.361-2.133-.966-2.766-2.232-.4-.801-.651-1.665-.829-2.412ZM7 3.312a.75.75 0 0 1 .604.305l.054.085 1.31 2.393 2.392 1.31a.75.75 0 0 1 0 1.316l-2.392 1.308-1.31 2.394a.75.75 0 0 1-1.316 0l-1.309-2.394L2.64 8.721a.75.75 0 0 1 0-1.317l2.393-1.31 1.309-2.392A.75.75 0 0 1 7 3.312Zm-.756 3.696a.753.753 0 0 1-.299.299l-1.38.755 1.38.756a.752.752 0 0 1 .24.208l.06.091L7 10.498l.756-1.38a.753.753 0 0 1 .299-.3l1.382-.755-1.382-.756a.753.753 0 0 1-.3-.3L7 5.627l-.756 1.382Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-sparkles', JhIconSparkle);

package/icons-wc/icon-spinner-process.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 JhIconSpinnerProcess 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.629 10.64a7.75 7.75 0 0 1-5.138 8.698c.004.053.009.107.009.162a2.5 2.5 0 1 1-.55-1.563 6.25 6.25 0 0 0 4.195-7.075c.364.031.73.002 1.085-.09l.155-.043c.083-.026.164-.057.244-.09ZM5.873 5.083a2.5 2.5 0 0 1 2.5 2.5 2.497 2.497 0 0 1-2.318 2.49 6.25 6.25 0 0 0 3.273 7.577 3.248 3.248 0 0 0-.547 1.399A7.749 7.749 0 0 1 4.59 9.726a2.496 2.496 0 0 1-1.217-2.143 2.5 2.5 0 0 1 2.5-2.5ZM12 4.25a7.71 7.71 0 0 1 4.683 1.577 2.5 2.5 0 1 1-.722 1.342A6.218 6.218 0 0 0 12 5.75a6.221 6.221 0 0 0-3.049.793 3.25 3.25 0 0 0-.794-1.272A7.712 7.712 0 0 1 12 4.25Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-spinner-process', JhIconSpinnerProcess);