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

package/icons-wc/icon-note-sticky.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 JhIconNoteSticky 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="M5.296 2.222 21.14 4.449a.75.75 0 0 1 .639.846l-.957 6.809c-.434 3.086-.952 5.545-3.266 7.328-1.21.933-2.66 1.266-4.147 1.324a16.715 16.715 0 0 1-2.051-.063c-.043 0-.087.002-.131 0a.751.751 0 0 1-.156-.026 51.975 51.975 0 0 1-2.269-.281l-5.941-.835a.75.75 0 0 1-.639-.847L4.449 2.86a.75.75 0 0 1 .847-.638Zm9.782 13.59c-.261-.09-.582.113-.622.357-.136.84-.38 1.921-.818 2.802a5.008 5.008 0 0 1-.152.276c1.254-.065 2.31-.353 3.154-1.003a5.424 5.424 0 0 0 1.616-1.988c-.105.017-.21.03-.315.037-.99.072-2.067-.208-2.862-.481ZM3.812 18.17l5.2.73c.82.116 1.613.222 2.374.29.28-.027.59-.248.91-.888.336-.676.55-1.58.68-2.373.194-1.19 1.476-1.918 2.59-1.535.742.255 1.585.454 2.266.404.332-.024.58-.104.755-.223.16-.11.305-.28.397-.585.132-.63.244-1.325.352-2.095l.853-6.066-14.36-2.017L3.812 18.17Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-note-sticky', JhIconNoteSticky);

package/icons-wc/icon-notepad.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 JhIconNotepad 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="M15.5 2.5a.75.75 0 0 1 .75.75v.5h1.25c.966 0 1.75.784 1.75 1.75v13a1.75 1.75 0 0 1-1.75 1.75h-11a1.75 1.75 0 0 1-1.75-1.75v-13c0-.966.784-1.75 1.75-1.75h1.25v-.5a.75.75 0 0 1 1.5 0v.5h2v-.5a.75.75 0 0 1 1.5 0v.5h2v-.5a.75.75 0 0 1 .75-.75Zm-9 2.75a.25.25 0 0 0-.25.25v13c0 .138.112.25.25.25h11a.25.25 0 0 0 .25-.25v-13a.25.25 0 0 0-.25-.25h-1.25v.5a.75.75 0 0 1-1.5 0v-.5h-2v.5a.75.75 0 0 1-1.5 0v-.5h-2v.5a.75.75 0 0 1-1.5 0v-.5H6.5Zm8.5 9a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1 0-1.5h6Zm0-3a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1 0-1.5h6Zm0-3a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1 0-1.5h6Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-notepad', JhIconNotepad);

package/icons-wc/icon-palette.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 JhIconPalette 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.522 3.784c2.61 0 4.608 1.223 5.963 2.689 1.336 1.443 2.11 3.186 2.248 4.375.128 1.118-.029 2.228-.452 3.117-.422.888-1.156 1.631-2.189 1.798-1.351.217-2.762-.28-3.769-.578-.546-.162-.976-.272-1.328-.29-.33-.018-.498.05-.611.156-.13.12-.123.18-.111.244.023.136.123.343.345.638.221.292.469.556.739.87.125.146.256.304.366.462.105.151.223.347.288.568.12.412.098.821-.08 1.187a1.83 1.83 0 0 1-.722.756c-.535.321-1.216.44-1.754.44-2.62 0-4.838-1.319-6.292-3.123-1.446-1.795-2.196-4.145-1.793-6.297.386-2.057 1.399-3.824 2.979-5.072 1.579-1.247 3.677-1.94 6.173-1.94Zm0 1.5c-2.216 0-3.971.612-5.244 1.616-1.27 1.004-2.109 2.438-2.434 4.172-.307 1.64.26 3.556 1.487 5.08 1.22 1.513 3.032 2.565 5.124 2.565.365 0 .752-.09.983-.228.107-.064.138-.114.144-.126a.045.045 0 0 0 .004-.017.26.26 0 0 0-.014-.09.833.833 0 0 0-.08-.135 4.503 4.503 0 0 0-.273-.34c-.215-.25-.54-.602-.798-.944-.257-.34-.54-.786-.627-1.29-.098-.573.076-1.14.571-1.598.512-.473 1.135-.582 1.707-.553.552.03 1.141.191 1.677.35 1.159.344 2.173.686 3.105.536.399-.064.789-.364 1.073-.962.284-.596.417-1.415.315-2.3-.094-.816-.696-2.273-1.857-3.528-1.141-1.233-2.762-2.208-4.863-2.208ZM7.25 10.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm9-2a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm-6.75-1a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm3.457-.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-palette', JhIconPalette);

package/icons-wc/icon-paper-plane-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 JhIconPaperPlaneFilled extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconPaperPlaneFilled 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-paper-plane.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 JhIconPaperPlane extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconPaperPlane 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-paperclip.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 JhIconPaperclip extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconPaperclip 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-paste.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 JhIconPaste 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="M10.43 2.005c.666.06 1.238.445 1.555.996h1.262l.077.004a.75.75 0 0 1 .628.493h.797c.966 0 1.75.785 1.75 1.751v3.254h3.255a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-.75.75h-10a.75.75 0 0 1-.75-.75v-3.258H5.752c-.966 0-1.75-.785-1.751-1.75V5.248c0-.966.784-1.75 1.751-1.75h.792A.748.748 0 0 1 7.246 3h1.269a2 2 0 0 1 1.735-1.004l.18.008Zm.075 18.498h8.499v-10.5h-8.5v10.5ZM5.75 4.999a.25.25 0 0 0-.25.25v10.995a.25.25 0 0 0 .25.251h3.254V9.253a.75.75 0 0 1 .75-.75h5.244V5.249a.25.25 0 0 0-.25-.25h-.752v1.753a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1-.75-.75V4.999H5.75Zm4.499-1.502a.504.504 0 0 0-.493.402.75.75 0 0 1-.736.602H7.996v1.5h4.501v-1.5H11.48a.75.75 0 0 1-.736-.602.504.504 0 0 0-.493-.402Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-paste', JhIconPaste);

package/icons-wc/icon-pencil-line.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 JhIconPencilLine 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.194 2.759a.75.75 0 0 1 .984-.398l4.655 1.977a.75.75 0 0 1 .397.983l-.942 2.218.001.001-4.538 10.69-.201.474a.75.75 0 0 1-.279.333L6.426 20.25H20.5a.75.75 0 0 1 0 1.5H4.516a.743.743 0 0 1-.359-.096.75.75 0 0 1-.4-.05.752.752 0 0 1-.445-.551l-.845-4.48a.751.751 0 0 1 .047-.431l5.68-13.383Zm-4.212 13.76.595 3.15 2.68-1.76.111-.265-3.273-1.391-.113.265Zm.7-1.645 3.273 1.389 3.366-7.93-3.274-1.389-3.365 7.93Zm3.95-9.31 3.275 1.39.65-1.528-3.275-1.39-.65 1.527Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-pencil-line', JhIconPencilLine);

package/icons-wc/icon-pencil.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 JhIconPencil extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconPencil 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 {