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

package/NOTICE

@@ -1,5 +1,5 @@
 ===========================================================
-Jack Henry Design System
+Forge Design System
 Copyright 2025 Jack Henry
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/README.md

@@ -6,9 +6,7 @@ SPDX-License-Identifier: Apache-2.0
 
 # Jack Henry Iconography
 
-Jack Henry icons are designed to provide a consistent look and feel across your products. Our icon set is 
-open source and intended to be used with Jack Henry's design system. The icons are available as an 
-npm package which includes:
+Jack Henry icons are designed to provide a consistent look and feel across your products. Our icon set is open source and intended to be used with the Forge Design System. The icons are available as an npm package which includes:
 
 - SVG icon files
 - ES module based web component for each icon

package/icons-wc/icon-airplane.js

@@ -50,6 +50,12 @@ export default class JhIconAirplane extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconAirplane extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-alarm-clock.js

@@ -50,6 +50,12 @@ export default class JhIconAlarmClock extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconAlarmClock extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-align-center.js

@@ -50,6 +50,12 @@ export default class JhIconAlignCenter extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconAlignCenter extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-align-justify.js

@@ -50,6 +50,12 @@ export default class JhIconAlignJustify extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconAlignJustify extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-align-left.js

@@ -50,6 +50,12 @@ export default class JhIconAlignLeft extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconAlignLeft extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-align-right.js

@@ -50,6 +50,12 @@ export default class JhIconAlignRight extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconAlignRight extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-android.js

@@ -50,6 +50,12 @@ export default class JhIconAndroid extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconAndroid extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-apple-whole.js

@@ -50,6 +50,12 @@ export default class JhIconAppleWhole extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconAppleWhole extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-apple.js

@@ -50,6 +50,12 @@ export default class JhIconApple extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconApple extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-circle-dollar-sign.js

@@ -50,6 +50,12 @@ export default class JhIconArrowCircleDollarSign extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowCircleDollarSign extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-curve-up-right.js

@@ -50,6 +50,12 @@ export default class JhIconArrowCurveUpRight extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowCurveUpRight extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-dashed-rotate-left.js

@@ -50,6 +50,12 @@ export default class JhIconArrowDashedRotateLeft extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowDashedRotateLeft extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-dashed-rotate-right.js

@@ -50,6 +50,12 @@ export default class JhIconArrowDashedRotateRight extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowDashedRotateRight extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-down-small.js

@@ -50,6 +50,12 @@ export default class JhIconArrowDownSmall extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowDownSmall extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-down-to-bracket.js

@@ -50,6 +50,12 @@ export default class JhIconArrowDownToBracket extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowDownToBracket extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-down-to-line.js

@@ -50,6 +50,12 @@ export default class JhIconArrowDownToLine extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowDownToLine extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-from-a.js

@@ -50,6 +50,12 @@ export default class JhIconArrowFromA extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowFromA extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-from-w.js

@@ -50,6 +50,12 @@ export default class JhIconArrowFromW extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowFromW extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-half-rotate-left.js

@@ -50,6 +50,12 @@ export default class JhIconArrowHalfRotateLeft extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowHalfRotateLeft extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-half-rotate-right.js

@@ -50,6 +50,12 @@ export default class JhIconArrowHalfRotateRight extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowHalfRotateRight extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-left-from-square.js

@@ -50,6 +50,12 @@ export default class JhIconArrowLeftFromSquare extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowLeftFromSquare extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-left-small.js

@@ -50,6 +50,12 @@ export default class JhIconArrowLeftSmall extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowLeftSmall extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-left.js

@@ -50,6 +50,12 @@ export default class JhIconArrowLeft extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowLeft extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-pointer.js

@@ -50,6 +50,12 @@ export default class JhIconArrowPointer extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowPointer extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-right-arrow-left-filled.js

@@ -50,6 +50,12 @@ export default class JhIconArrowRightArrowLeftFilled extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowRightArrowLeftFilled extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-right-arrow-left.js

@@ -50,6 +50,12 @@ export default class JhIconArrowRightArrowLeft extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowRightArrowLeft extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-right-pulse.js

@@ -50,6 +50,12 @@ export default class JhIconArrowRightPulse extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowRightPulse extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }
 

package/icons-wc/icon-arrow-right-small.js

@@ -50,6 +50,12 @@ export default class JhIconArrowRightSmall extends LitElement {
           var(--jh-dimension-1400)
         );
       }
+      :host([size='xx-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-extra-large,
+          var(--jh-dimension-2100)
+        );
+      }
       svg {
         width: 100%;
         height: 100%;
@@ -74,7 +80,7 @@ export default class JhIconArrowRightSmall extends LitElement {
     this.#internals.role = 'graphics-symbol';
     this.#internals.ariaHidden = 'true';
 
-    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'|'xx-large'} */
     this.size = 'medium';
   }