@aquera/nile-elements 0.0.1-beta.9 → 0.0.3-1

package/dist/src/nile-icon/icons/svg/workflow.d.ts

@@ -1,6 +1,5 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 Feb 2023 13:10:43 GMT
  */
-declare const _default: "PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi40IDJIMlY1LjJIMTIuNFYyWk0xMS42IDQuNEg0LjhWMi44SDExLjZWNC40Wk02LjQgNi40MDAwMkg0VjkuNjAwMDJINi40SDE0LjRWNi40MDAwMkg2LjRaTTEzLjYgOC44MDAwMkg2LjRWNy4yMDAwMkgxMy42VjguODAwMDJaTTEyLjQgMTRIMlYxMC44SDEyLjRWMTRaTTQuOCAxMy4ySDExLjZWMTEuNkg0LjhWMTMuMloiIGZpbGw9ImluaGVyaXQiLz4=";
+declare const _default: "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLjUsMTAuNXYtM2gtNXYtMmgzVi41aC03djVoM3YyaC01djNILjV2NWg2di01aC0zdi0yaDl2MmgtM3Y1aDZ2LTVabS04LTloNXYzaC01Wm0wLDEzaC00di0zaDRabTksMGgtNHYtM2g0WiIvPjwvc3ZnPg==";
 export default _default;

package/dist/src/nile-icon/icons/svg/workflow.js

@@ -1,6 +1,5 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 Feb 2023 13:10:43 GMT
  */
-export default "PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi40IDJIMlY1LjJIMTIuNFYyWk0xMS42IDQuNEg0LjhWMi44SDExLjZWNC40Wk02LjQgNi40MDAwMkg0VjkuNjAwMDJINi40SDE0LjRWNi40MDAwMkg2LjRaTTEzLjYgOC44MDAwMkg2LjRWNy4yMDAwMkgxMy42VjguODAwMDJaTTEyLjQgMTRIMlYxMC44SDEyLjRWMTRaTTQuOCAxMy4ySDExLjZWMTEuNkg0LjhWMTMuMloiIGZpbGw9ImluaGVyaXQiLz4=";
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLjUsMTAuNXYtM2gtNXYtMmgzVi41aC03djVoM3YyaC01djNILjV2NWg2di01aC0zdi0yaDl2MmgtM3Y1aDZ2LTVabS04LTloNXYzaC01Wm0wLDEzaC00di0zaDRabTksMGgtNHYtM2g0WiIvPjwvc3ZnPg==";
 //# sourceMappingURL=workflow.js.map

package/dist/src/nile-icon/icons/svg/workflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"workflow.js","sourceRoot":"","sources":["../../../../../src/nile-icon/icons/svg/workflow.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAe,kVAAkV,CAAC","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 07 Feb 2023 13:10:43 GMT\n */\n\nexport default \"PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi40IDJIMlY1LjJIMTIuNFYyWk0xMS42IDQuNEg0LjhWMi44SDExLjZWNC40Wk02LjQgNi40MDAwMkg0VjkuNjAwMDJINi40SDE0LjRWNi40MDAwMkg2LjRaTTEzLjYgOC44MDAwMkg2LjRWNy4yMDAwMkgxMy42VjguODAwMDJaTTEyLjQgMTRIMlYxMC44SDEyLjRWMTRaTTQuOCAxMy4ySDExLjZWMTEuNkg0LjhWMTMuMloiIGZpbGw9ImluaGVyaXQiLz4=\";"]}
+{"version":3,"file":"workflow.js","sourceRoot":"","sources":["../../../../../src/nile-icon/icons/svg/workflow.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAe,8PAA8P,CAAC","sourcesContent":["/**\n * Do not edit directly\n */\n\nexport default \"PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLjUsMTAuNXYtM2gtNXYtMmgzVi41aC03djVoM3YyaC01djNILjV2NWg2di01aC0zdi0yaDl2MmgtM3Y1aDZ2LTVabS04LTloNXYzaC01Wm0wLDEzaC00di0zaDRabTksMGgtNHYtM2g0WiIvPjwvc3ZnPg==\";"]}

package/dist/src/nile-icon/icons/svg/writeexpression.d.ts

@@ -1,6 +1,5 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 Feb 2023 13:10:43 GMT
  */
-declare const _default: "PHBhdGggZD0iTTIuMTIgMTMuMThDMC43NzU5NDUgMTEuNjI1MSAwLjAyNTAxNCA5LjY0NTEgMCA3LjU5QzAuMDE4OTM2OCA1LjUzMzc2IDAuNzcwNjM2IDMuNTUxNjggMi4xMiAySDIuNjVDMS44MDAwMiAzLjc0MDQyIDEuMzYyMDQgNS42NTMxMyAxLjM3IDcuNTlDMS4zNjI2NSA5LjUzMDAxIDEuODAwNTYgMTEuNDQ1OCAyLjY1IDEzLjE5TDIuMTIgMTMuMThaIiBmaWxsPSJpbmhlcml0Ii8+PHBhdGggZD0iTTEzLjg4IDJDMTUuMjI5MyAzLjU1MTY4IDE1Ljk4MSA1LjUzMzc2IDE2IDcuNTlDMTUuOTc3NiA5LjY0NTU5IDE1LjIyNjMgMTEuNjI2NSAxMy44OCAxMy4xOEgxMy4zNUMxNC4xODU1IDExLjQzNDUgMTQuNjIyNyA5LjUyNTE1IDE0LjYzIDcuNTlDMTQuNjIyNyA1LjY1NDg1IDE0LjE4NTUgMy43NDU0OSAxMy4zNSAySDEzLjg4WiIgZmlsbD0iaW5oZXJpdCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNCAxMS4xM0w2LjI1IDEwLjY4TDEwLjU2NjIgNi4zNjM3N0w4Ljc2NTMgNC41NzIwMkw0LjQ1IDguODhMNCAxMS4xM1pNOS40NzMwMiAzLjg2NTUxTDExLjI3MzMgNS42NTY2NkwxMi4xNCA0Ljc5TDEwLjM0IDNMOS40NzMwMiAzLjg2NTUxWiIgZmlsbD0iaW5oZXJpdCIvPg==";
+declare const _default: "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMi4xMiAxMy4xOEMwLjc3NTk0NSAxMS42MjUxIDAuMDI1MDE0IDkuNjQ1MSAwIDcuNTlDMC4wMTg5MzY4IDUuNTMzNzYgMC43NzA2MzYgMy41NTE2OCAyLjEyIDJIMi42NUMxLjgwMDAyIDMuNzQwNDIgMS4zNjIwNCA1LjY1MzEzIDEuMzcgNy41OUMxLjM2MjY1IDkuNTMwMDEgMS44MDA1NiAxMS40NDU4IDIuNjUgMTMuMTlMMi4xMiAxMy4xOFoiIGZpbGw9ImluaGVyaXQiLz48cGF0aCBkPSJNMTMuODggMkMxNS4yMjkzIDMuNTUxNjggMTUuOTgxIDUuNTMzNzYgMTYgNy41OUMxNS45Nzc2IDkuNjQ1NTkgMTUuMjI2MyAxMS42MjY1IDEzLjg4IDEzLjE4SDEzLjM1QzE0LjE4NTUgMTEuNDM0NSAxNC42MjI3IDkuNTI1MTUgMTQuNjMgNy41OUMxNC42MjI3IDUuNjU0ODUgMTQuMTg1NSAzLjc0NTQ5IDEzLjM1IDJIMTMuODhaIiBmaWxsPSJpbmhlcml0Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00IDExLjEzTDYuMjUgMTAuNjhMMTAuNTY2MiA2LjM2Mzc3TDguNzY1MyA0LjU3MjAyTDQuNDUgOC44OEw0IDExLjEzWk05LjQ3MzAyIDMuODY1NTFMMTEuMjczMyA1LjY1NjY2TDEyLjE0IDQuNzlMMTAuMzQgM0w5LjQ3MzAyIDMuODY1NTFaIiBmaWxsPSJpbmhlcml0Ii8+PC9zdmc+";
 export default _default;

package/dist/src/nile-icon/icons/svg/writeexpression.js

@@ -1,6 +1,5 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 Feb 2023 13:10:43 GMT
  */
-export default "PHBhdGggZD0iTTIuMTIgMTMuMThDMC43NzU5NDUgMTEuNjI1MSAwLjAyNTAxNCA5LjY0NTEgMCA3LjU5QzAuMDE4OTM2OCA1LjUzMzc2IDAuNzcwNjM2IDMuNTUxNjggMi4xMiAySDIuNjVDMS44MDAwMiAzLjc0MDQyIDEuMzYyMDQgNS42NTMxMyAxLjM3IDcuNTlDMS4zNjI2NSA5LjUzMDAxIDEuODAwNTYgMTEuNDQ1OCAyLjY1IDEzLjE5TDIuMTIgMTMuMThaIiBmaWxsPSJpbmhlcml0Ii8+PHBhdGggZD0iTTEzLjg4IDJDMTUuMjI5MyAzLjU1MTY4IDE1Ljk4MSA1LjUzMzc2IDE2IDcuNTlDMTUuOTc3NiA5LjY0NTU5IDE1LjIyNjMgMTEuNjI2NSAxMy44OCAxMy4xOEgxMy4zNUMxNC4xODU1IDExLjQzNDUgMTQuNjIyNyA5LjUyNTE1IDE0LjYzIDcuNTlDMTQuNjIyNyA1LjY1NDg1IDE0LjE4NTUgMy43NDU0OSAxMy4zNSAySDEzLjg4WiIgZmlsbD0iaW5oZXJpdCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNCAxMS4xM0w2LjI1IDEwLjY4TDEwLjU2NjIgNi4zNjM3N0w4Ljc2NTMgNC41NzIwMkw0LjQ1IDguODhMNCAxMS4xM1pNOS40NzMwMiAzLjg2NTUxTDExLjI3MzMgNS42NTY2NkwxMi4xNCA0Ljc5TDEwLjM0IDNMOS40NzMwMiAzLjg2NTUxWiIgZmlsbD0iaW5oZXJpdCIvPg==";
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMi4xMiAxMy4xOEMwLjc3NTk0NSAxMS42MjUxIDAuMDI1MDE0IDkuNjQ1MSAwIDcuNTlDMC4wMTg5MzY4IDUuNTMzNzYgMC43NzA2MzYgMy41NTE2OCAyLjEyIDJIMi42NUMxLjgwMDAyIDMuNzQwNDIgMS4zNjIwNCA1LjY1MzEzIDEuMzcgNy41OUMxLjM2MjY1IDkuNTMwMDEgMS44MDA1NiAxMS40NDU4IDIuNjUgMTMuMTlMMi4xMiAxMy4xOFoiIGZpbGw9ImluaGVyaXQiLz48cGF0aCBkPSJNMTMuODggMkMxNS4yMjkzIDMuNTUxNjggMTUuOTgxIDUuNTMzNzYgMTYgNy41OUMxNS45Nzc2IDkuNjQ1NTkgMTUuMjI2MyAxMS42MjY1IDEzLjg4IDEzLjE4SDEzLjM1QzE0LjE4NTUgMTEuNDM0NSAxNC42MjI3IDkuNTI1MTUgMTQuNjMgNy41OUMxNC42MjI3IDUuNjU0ODUgMTQuMTg1NSAzLjc0NTQ5IDEzLjM1IDJIMTMuODhaIiBmaWxsPSJpbmhlcml0Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00IDExLjEzTDYuMjUgMTAuNjhMMTAuNTY2MiA2LjM2Mzc3TDguNzY1MyA0LjU3MjAyTDQuNDUgOC44OEw0IDExLjEzWk05LjQ3MzAyIDMuODY1NTFMMTEuMjczMyA1LjY1NjY2TDEyLjE0IDQuNzlMMTAuMzQgM0w5LjQ3MzAyIDMuODY1NTFaIiBmaWxsPSJpbmhlcml0Ii8+PC9zdmc+";
 //# sourceMappingURL=writeexpression.js.map

package/dist/src/nile-icon/icons/svg/writeexpression.js.map

@@ -1 +1 @@
-{"version":3,"file":"writeexpression.js","sourceRoot":"","sources":["../../../../../src/nile-icon/icons/svg/writeexpression.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAe,01BAA01B,CAAC","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 07 Feb 2023 13:10:43 GMT\n */\n\nexport default \"PHBhdGggZD0iTTIuMTIgMTMuMThDMC43NzU5NDUgMTEuNjI1MSAwLjAyNTAxNCA5LjY0NTEgMCA3LjU5QzAuMDE4OTM2OCA1LjUzMzc2IDAuNzcwNjM2IDMuNTUxNjggMi4xMiAySDIuNjVDMS44MDAwMiAzLjc0MDQyIDEuMzYyMDQgNS42NTMxMyAxLjM3IDcuNTlDMS4zNjI2NSA5LjUzMDAxIDEuODAwNTYgMTEuNDQ1OCAyLjY1IDEzLjE5TDIuMTIgMTMuMThaIiBmaWxsPSJpbmhlcml0Ii8+PHBhdGggZD0iTTEzLjg4IDJDMTUuMjI5MyAzLjU1MTY4IDE1Ljk4MSA1LjUzMzc2IDE2IDcuNTlDMTUuOTc3NiA5LjY0NTU5IDE1LjIyNjMgMTEuNjI2NSAxMy44OCAxMy4xOEgxMy4zNUMxNC4xODU1IDExLjQzNDUgMTQuNjIyNyA5LjUyNTE1IDE0LjYzIDcuNTlDMTQuNjIyNyA1LjY1NDg1IDE0LjE4NTUgMy43NDU0OSAxMy4zNSAySDEzLjg4WiIgZmlsbD0iaW5oZXJpdCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNCAxMS4xM0w2LjI1IDEwLjY4TDEwLjU2NjIgNi4zNjM3N0w4Ljc2NTMgNC41NzIwMkw0LjQ1IDguODhMNCAxMS4xM1pNOS40NzMwMiAzLjg2NTUxTDExLjI3MzMgNS42NTY2NkwxMi4xNCA0Ljc5TDEwLjM0IDNMOS40NzMwMiAzLjg2NTUxWiIgZmlsbD0iaW5oZXJpdCIvPg==\";"]}
+{"version":3,"file":"writeexpression.js","sourceRoot":"","sources":["../../../../../src/nile-icon/icons/svg/writeexpression.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAe,89BAA89B,CAAC","sourcesContent":["/**\n * Do not edit directly\n */\n\nexport default \"PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMi4xMiAxMy4xOEMwLjc3NTk0NSAxMS42MjUxIDAuMDI1MDE0IDkuNjQ1MSAwIDcuNTlDMC4wMTg5MzY4IDUuNTMzNzYgMC43NzA2MzYgMy41NTE2OCAyLjEyIDJIMi42NUMxLjgwMDAyIDMuNzQwNDIgMS4zNjIwNCA1LjY1MzEzIDEuMzcgNy41OUMxLjM2MjY1IDkuNTMwMDEgMS44MDA1NiAxMS40NDU4IDIuNjUgMTMuMTlMMi4xMiAxMy4xOFoiIGZpbGw9ImluaGVyaXQiLz48cGF0aCBkPSJNMTMuODggMkMxNS4yMjkzIDMuNTUxNjggMTUuOTgxIDUuNTMzNzYgMTYgNy41OUMxNS45Nzc2IDkuNjQ1NTkgMTUuMjI2MyAxMS42MjY1IDEzLjg4IDEzLjE4SDEzLjM1QzE0LjE4NTUgMTEuNDM0NSAxNC42MjI3IDkuNTI1MTUgMTQuNjMgNy41OUMxNC42MjI3IDUuNjU0ODUgMTQuMTg1NSAzLjc0NTQ5IDEzLjM1IDJIMTMuODhaIiBmaWxsPSJpbmhlcml0Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00IDExLjEzTDYuMjUgMTAuNjhMMTAuNTY2MiA2LjM2Mzc3TDguNzY1MyA0LjU3MjAyTDQuNDUgOC44OEw0IDExLjEzWk05LjQ3MzAyIDMuODY1NTFMMTEuMjczMyA1LjY1NjY2TDEyLjE0IDQuNzlMMTAuMzQgM0w5LjQ3MzAyIDMuODY1NTFaIiBmaWxsPSJpbmhlcml0Ii8+PC9zdmc+\";"]}

package/dist/src/nile-icon/index.d.ts

@@ -1,5 +1,8 @@
 import { LitElement, PropertyValues } from 'lit';
 import type { TemplateResult } from 'lit';
+interface ButtonClassMap {
+    [key: string]: boolean;
+}
 /**
  * Nile icon component.
  *
@@ -48,11 +51,11 @@ export declare class NileIcon extends LitElement {
     static styles: import("lit").CSSResult;
     private _getIconSize;
     protected updated(changedProperties: PropertyValues): Promise<void>;
+    private addAttributesToSvg;
     private fetchSvg;
     private removeHyphens;
-    get buttonClassMap(): {
-        'nds-icon--push': boolean;
-    };
+    private getSvgTemplate;
+    get buttonClassMap(): ButtonClassMap;
     protected render(): TemplateResult;
 }
 declare global {
@@ -60,3 +63,4 @@ declare global {
         'nile-icon': NileIcon;
     }
 }
+export {};

package/dist/src/nile-icon/index.js

@@ -3,7 +3,6 @@ import { LitElement, html, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import * as Icons from './icons/svg';
 const iconPaths = Icons;
 const SMALL_ICON_SIZE = 16;
@@ -35,15 +34,7 @@ let NileIcon = class NileIcon extends LitElement {
         this.size = SMALL_ICON_SIZE;
         this._svg = '';
         this.title = 'agents';
-        /**
-         * Color
-         */
-        this.color = '#7F7F7F';
         this.push = false;
-        /**
-         * Retain Viewbox
-         */
-        this.frame = 16;
     }
     _getIconSize() {
         return this.name?.endsWith('-small') ? SMALL_ICON_SIZE : LARGE_ICON_SIZE;
@@ -69,6 +60,34 @@ let NileIcon = class NileIcon extends LitElement {
                 throw new Error(`No icon named "${this.name}"`);
             }
         }
+        this.addAttributesToSvg();
+    }
+    addAttributesToSvg() {
+        const svg = this.renderRoot.querySelector('#svg');
+        const attrs = svg?.attributes;
+        if (!attrs?.getNamedItem('xmlns')) {
+            svg?.setAttribute('xmlns', "http://www.w3.org/2000/svg");
+        }
+        if (!attrs?.getNamedItem('version')) {
+            svg?.setAttribute("version", "1.1");
+        }
+        if (this.frame) {
+            svg?.setAttribute('viewBox', `0 0 ${this.frame} ${this.frame}`);
+        }
+        else if (!attrs?.getNamedItem('viewBox')) {
+            const viewboxLogic = this.frame
+                ? `0 0 ${this.frame} ${this.frame}`
+                : '0 0 16 16';
+            svg?.setAttribute('viewBox', viewboxLogic);
+        }
+        if (!attrs?.getNamedItem('height')) {
+            svg?.setAttribute('height', String(this.size));
+            svg?.setAttribute('width', String(this.size));
+        }
+        svg?.setAttribute('aria-hidden', `${this.description === ''}`);
+        svg?.setAttribute('aria-label', this.description || '');
+        const additionalClasses = Object.keys(this.buttonClassMap).filter((key) => this.buttonClassMap[key]);
+        svg?.classList.add('nds-icon', ...additionalClasses);
     }
     async fetchSvg(path) {
         const response = await fetch(path);
@@ -80,6 +99,21 @@ let NileIcon = class NileIcon extends LitElement {
     removeHyphens(iconName) {
         return iconName.replace(/-/g, '');
     }
+    getSvgTemplate() {
+        const svgTagRegexPattern = /<svg\s[^>]*>/;
+        const regexToGetSVGAttrs = this._svg.match(svgTagRegexPattern);
+        const svgAttrs = regexToGetSVGAttrs?.[0].replace('<svg', '').replace('>', '');
+        const svgBody = this._svg.replace(svgTagRegexPattern, '')
+            .replace('</svg>', '');
+        return `<svg
+                      id='svg'
+                      focusable='true'
+                      role='img'
+                      ${svgAttrs}
+                    >
+                      ${svgBody}
+                    </svg>`;
+    }
     get buttonClassMap() {
         return {
             'nds-icon--push': this.push,
@@ -94,25 +128,18 @@ let NileIcon = class NileIcon extends LitElement {
         const viewboxLogic = this.frame
             ? `0 0 ${this.frame} ${this.frame}`
             : '0 0 16 16';
+        if ((!this._svg.includes('fill=') || this._svg.includes('fill="inherit"')) &&
+            !this.color) {
+            // Case 1: _svg does not have fill color or has fill="inherit" and this.color is not mentioned
+            this.style.setProperty('--nile-svg-fill', `#7F7F7F`);
+        }
+        else if (this.color) {
+            // Case 2: If this.color is mentioned, use it as fill, regardless of _svg color
+            this.style.setProperty('--nile-svg-fill', `${this.color}`);
+        }
         return html `
-      <span class="nds-icon ${classMap(this.buttonClassMap)}">
-        ${this.customSvgPath
-            ? html `${unsafeHTML(this._svg)}`
-            : html `<svg
-              xmlns="http://www.w3.org/2000/svg"
-              version="1.1"
-              viewBox="${viewboxLogic}"
-              class="icon ${classMap(this.buttonClassMap)}"
-              role="img"
-              aria-hidden=${this.description === ''}
-              aria-label=${this.description || ''}
-              height="${size}"
-              width="${size}"
-              focusable="true"
-              fill="${color}"
-            >
-              ${unsafeSVG(this._svg)}
-            </svg>`}
+    <span class="nds-icon ${classMap(this.buttonClassMap)}">
+      ${unsafeSVG(this.getSvgTemplate())}
       </span>
     `;
     }

package/dist/src/nile-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-icon/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport * as Icons from './icons/svg';\n\ninterface IconPaths {\n  [key: string]: string;\n}\n\nconst iconPaths: IconPaths = Icons as IconPaths;\n\nconst SMALL_ICON_SIZE = 16;\nconst LARGE_ICON_SIZE = 24;\n\n/**\n * Nile icon component.\n *\n * @tag nile-icon\n *\n */\n@customElement('nile-icon')\nexport class NileIcon extends LitElement {\n  /**\n   * The name of the icon set\n   * @attr icon set\n   * @type {IconName | undefined}\n   */\n  @property({ type: String, reflect: true })\n  public set?: string = 'local';\n\n  /**\n   * The name of the icon\n   * @attr name\n   * @type {IconName | undefined}\n   */\n  @property({ type: String, reflect: true })\n  public name?: string;\n\n  /**\n   * A description of what the icon represents\n   * @attr description\n   */\n  @property({ type: String, reflect: true })\n  public description = '';\n\n  /**\n   * A path to a custom SVG file to display as the icon\n   * @attr customSvgPath\n   */\n  @property({ type: String })\n  public customSvgPath?: string;\n\n  /**\n   * A size of what the icon represents\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  public size = SMALL_ICON_SIZE;\n\n  @state()\n  private _svg = '';\n\n  @property({ type: String }) override title = 'agents';\n\n  /**\n   * Color\n   */\n  @property({ reflect: true }) color: any = '#7F7F7F';\n\n  @property({ type: Boolean })\n  public push = false;\n\n  /**\n   * Retain Viewbox\n   */\n\n  @property({ reflect: true }) frame: any = 16;\n\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      contain: content;\n    }\n\n    .nds-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .nds-icon svg {\n      height: var(--nile-svg-height);\n      width: var(--nile-svg-width);\n      stroke: var(--nile-svg-stroke);\n      stroke-width: var(--nile-svg-stroke-width);\n    }\n\n    .nds-icon svg path {\n      fill: var(--nile-svg-fill);\n    }\n\n    .nds-icon--push {\n      margin-right: 12px;\n    }\n  `;\n\n  private _getIconSize(): number {\n    return this.name?.endsWith('-small') ? SMALL_ICON_SIZE : LARGE_ICON_SIZE;\n  }\n\n  protected override async updated(\n    changedProperties: PropertyValues\n  ): Promise<void> {\n    if (changedProperties.has('size')) {\n      this.style.setProperty('--nile-svg-height', `${this.size}px`);\n      this.style.setProperty('--nile-svg-width', `${this.size}px`);\n    }\n    if (changedProperties.has('color')) {\n      this.style.setProperty('--nile-svg-fill', `${this.color}`);\n    }\n    if (\n      changedProperties.has('name') ||\n      changedProperties.has('customSvgPath')\n    ) {\n      let iconName = this.name ? this.removeHyphens(this.name) : undefined;\n      if (iconName && iconPaths[iconName]) {\n        this._svg = atob(iconPaths[iconName]);\n      } else if (this.customSvgPath) {\n        this._svg = await this.fetchSvg(this.customSvgPath);\n      } else {\n        throw new Error(`No icon named \"${this.name}\"`);\n      }\n    }\n  }\n\n  private async fetchSvg(path: string): Promise<string> {\n    const response = await fetch(path);\n\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n\n    return await response.text();\n  }\n\n  private removeHyphens(iconName: string) {\n    return iconName.replace(/-/g, '');\n  }\n\n  get buttonClassMap() {\n    return {\n      'nds-icon--push': this.push,\n    };\n  }\n\n  protected override render(): TemplateResult {\n    const size = this.size;\n    const color = this.color;\n\n    /**\n     * When icons are outside frame\n     */\n    const viewboxLogic = this.frame\n      ? `0 0 ${this.frame} ${this.frame}`\n      : '0 0 16 16';\n\n    return html`\n      <span class=\"nds-icon ${classMap(this.buttonClassMap)}\">\n        ${this.customSvgPath\n          ? html`${unsafeHTML(this._svg)}`\n          : html`<svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              version=\"1.1\"\n              viewBox=\"${viewboxLogic}\"\n              class=\"icon ${classMap(this.buttonClassMap)}\"\n              role=\"img\"\n              aria-hidden=${this.description === ''}\n              aria-label=${this.description || ''}\n              height=\"${size}\"\n              width=\"${size}\"\n              focusable=\"true\"\n              fill=\"${color}\"\n            >\n              ${unsafeSVG(this._svg)}\n            </svg>`}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n    'nile-icon': NileIcon;\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-icon/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport * as Icons from './icons/svg';\n\ninterface IconPaths {\n  [key: string]: string;\n}\n\ninterface ButtonClassMap {\n  [key:string]: boolean;\n}\n\nconst iconPaths: IconPaths = Icons as IconPaths;\n\nconst SMALL_ICON_SIZE = 16;\nconst LARGE_ICON_SIZE = 24;\n\n/**\n * Nile icon component.\n *\n * @tag nile-icon\n *\n */\n@customElement('nile-icon')\nexport class NileIcon extends LitElement {\n  /**\n   * The name of the icon set\n   * @attr icon set\n   * @type {IconName | undefined}\n   */\n  @property({ type: String, reflect: true })\n  public set?: string = 'local';\n\n  /**\n   * The name of the icon\n   * @attr name\n   * @type {IconName | undefined}\n   */\n  @property({ type: String, reflect: true })\n  public name?: string;\n\n  /**\n   * A description of what the icon represents\n   * @attr description\n   */\n  @property({ type: String, reflect: true })\n  public description = '';\n\n  /**\n   * A path to a custom SVG file to display as the icon\n   * @attr customSvgPath\n   */\n  @property({ type: String })\n  public customSvgPath?: string;\n\n  /**\n   * A size of what the icon represents\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  public size = SMALL_ICON_SIZE;\n\n  @state()\n  private _svg = '';\n\n  @property({ type: String }) override title = 'agents';\n\n  /**\n   * Color\n   */\n  @property({ reflect: true }) color: any ;\n\n  @property({ type: Boolean })\n  public push = false;\n\n  /**\n   * Retain Viewbox\n   */\n\n  @property({ reflect: true }) frame: any;\n\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      contain: content;\n    }\n\n    .nds-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .nds-icon svg {\n      height: var(--nile-svg-height);\n      width: var(--nile-svg-width);\n      stroke: var(--nile-svg-stroke);\n      stroke-width: var(--nile-svg-stroke-width);\n    }\n\n    .nds-icon svg path {\n      fill: var(--nile-svg-fill);\n    }\n\n    .nds-icon--push {\n      margin-right: 12px;\n    }\n  `;\n\n  private _getIconSize(): number {\n    return this.name?.endsWith('-small') ? SMALL_ICON_SIZE : LARGE_ICON_SIZE;\n  }\n\n  protected override async updated(\n    changedProperties: PropertyValues\n  ): Promise<void> {\n    if (changedProperties.has('size')) {\n      this.style.setProperty('--nile-svg-height', `${this.size}px`);\n      this.style.setProperty('--nile-svg-width', `${this.size}px`);\n    }\n    if (changedProperties.has('color')) {\n      this.style.setProperty('--nile-svg-fill', `${this.color}`);\n    }\n    if (\n      changedProperties.has('name') ||\n      changedProperties.has('customSvgPath')\n    ) {\n      let iconName = this.name ? this.removeHyphens(this.name) : undefined;\n      if (iconName && iconPaths[iconName]) {\n        this._svg = atob(iconPaths[iconName]);\n      } else if (this.customSvgPath) {\n        this._svg = await this.fetchSvg(this.customSvgPath);\n      } else {\n        throw new Error(`No icon named \"${this.name}\"`);\n      }\n    }\n    this.addAttributesToSvg();\n  }\n\n  private addAttributesToSvg(){\n    const svg = this.renderRoot.querySelector('#svg')\n    const attrs = svg?.attributes\n    if(!attrs?.getNamedItem('xmlns')){\n      svg?.setAttribute('xmlns',\"http://www.w3.org/2000/svg\");\n    }\n    if(!attrs?.getNamedItem('version')){\n      svg?.setAttribute(\"version\",\"1.1\")\n    }\n    if(this.frame){\n      svg?.setAttribute('viewBox',`0 0 ${this.frame} ${this.frame}`)\n    }\n    else if(!attrs?.getNamedItem('viewBox')){\n      const viewboxLogic = this.frame\n      ? `0 0 ${this.frame} ${this.frame}`\n      : '0 0 16 16';\n      svg?.setAttribute('viewBox',viewboxLogic)\n    }\n\n    if(!attrs?.getNamedItem('height')){\n      svg?.setAttribute('height',String(this.size));\n      svg?.setAttribute('width',String(this.size));\n    }\n\n    svg?.setAttribute('aria-hidden',`${this.description === ''}`);\n    svg?.setAttribute('aria-label',this.description || '');\n\n    const additionalClasses = Object.keys(this.buttonClassMap).filter((key:string)=> this.buttonClassMap[key])\n\n    svg?.classList.add('nds-icon',...additionalClasses)\n  }\n\n  private async fetchSvg(path: string): Promise<string> {\n    const response = await fetch(path);\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n\n    return await response.text();\n  }\n\n  private removeHyphens(iconName: string) {\n    return iconName.replace(/-/g, '');\n  }\n\n  private getSvgTemplate(){\n    const svgTagRegexPattern =/<svg\\s[^>]*>/;\n    const regexToGetSVGAttrs = this._svg.match(svgTagRegexPattern);\n    const svgAttrs = regexToGetSVGAttrs?.[0].replace('<svg','').replace('>','')\n    const svgBody = this._svg.replace(\n     svgTagRegexPattern,\n      ''\n    )\n    .replace('</svg>', '')\n    return  `<svg\n                      id='svg'\n                      focusable='true'\n                      role='img'\n                      ${svgAttrs}\n                    >\n                      ${svgBody}\n                    </svg>`\n  }\n\n  get buttonClassMap() {\n    return {\n      'nds-icon--push': this.push,\n    } as ButtonClassMap;\n  }\n\n  protected override render(): TemplateResult {\n    const size = this.size;\n    const color = this.color;\n\n    /**\n     * When icons are outside frame\n     */\n    const viewboxLogic = this.frame\n      ? `0 0 ${this.frame} ${this.frame}`\n      : '0 0 16 16';\n\n\n    if (\n      (!this._svg.includes('fill=') || this._svg.includes('fill=\"inherit\"')) &&\n      !this.color\n    ) {\n      // Case 1: _svg does not have fill color or has fill=\"inherit\" and this.color is not mentioned\n      this.style.setProperty('--nile-svg-fill', `#7F7F7F`);\n\n    } else if (this.color) {\n      // Case 2: If this.color is mentioned, use it as fill, regardless of _svg color\n      this.style.setProperty('--nile-svg-fill', `${this.color}`);\n    }\n\n    return html`\n    <span class=\"nds-icon ${classMap(this.buttonClassMap)}\">\n      ${unsafeSVG(this.getSvgTemplate())}\n      </span>\n    `\n    }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n    'nile-icon': NileIcon;\n  }\n}\n"]}

package/dist/src/nile-icon-button/nile-icon-button.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { TemplateResult } from 'lit-element';
 import '../nile-icon';
 import type { CSSResultGroup } from 'lit';
 import NileElement from '../internal/nile-element';
@@ -60,7 +61,7 @@ export declare class NileIconButton extends NileElement {
     focus(options?: FocusOptions): void;
     /** Removes focus from the icon button. */
     blur(): void;
-    render(): import("lit-html").TemplateResult<1 | 2>;
+    render(): TemplateResult;
 }
 export default NileIconButton;
 declare global {

package/dist/src/nile-icon-button/nile-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-icon-button.js","sourceRoot":"","sources":["../../../src/nile-icon-button/nile-icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-icon-button.css';\n\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { literal, html } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n *\n * @event nile-blur - Emitted when the icon button loses focus.\n * @event nile-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\n/**\n * Nile icon component.\n *\n * @tag nile-icon-button\n *\n */\n@customElement('nile-icon-button')\nexport class NileIconButton extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property() name?: string;\n\n  /** The name of a registered custom icon library. */\n  @property() library?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @property() download?: string;\n\n  /**\n   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label\n   * that describes what the icon button does.\n   */\n  @property() label = '';\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /** Simulates a click on the icon button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the icon button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the icon button. */\n  blur() {\n    this.button.blur();\n  }\n\n  render() {\n    const isLink = this.href ? true : false;\n    const tag = isLink ? literal`a` : literal`button`;\n\n    /* eslint-disable lit/binding-positions, lit/no-invalid-html */\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${classMap({\n          'icon-button': true,\n          'icon-button--disabled': !isLink && this.disabled,\n          'icon-button--focused': this.hasFocus\n        })}\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : 'button')}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}\n        role=${ifDefined(isLink ? undefined : 'button')}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-label=\"${this.label}\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @click=${this.handleClick}\n      >\n        <nile-icon\n          class=\"icon-button__icon\"\n          name=${ifDefined(this.name)}\n          library=${ifDefined(this.library)}\n          src=${ifDefined(this.src)}\n          aria-hidden=\"true\"\n        ></nile-icon>\n      </${tag}>\n    `;\n  }\n}\n\n\nexport default NileIconButton;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-icon-button': NileIconButton;\n  }\n}\n"]}
+{"version":3,"file":"nile-icon-button.js","sourceRoot":"","sources":["../../../src/nile-icon-button/nile-icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-icon-button.css';\n\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { literal, html } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n *\n * @event nile-blur - Emitted when the icon button loses focus.\n * @event nile-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\n/**\n * Nile icon component.\n *\n * @tag nile-icon-button\n *\n */\n@customElement('nile-icon-button')\nexport class NileIconButton extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property() name?: string;\n\n  /** The name of a registered custom icon library. */\n  @property() library?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @property() download?: string;\n\n  /**\n   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label\n   * that describes what the icon button does.\n   */\n  @property() label = '';\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /** Simulates a click on the icon button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the icon button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the icon button. */\n  blur() {\n    this.button.blur();\n  }\n\n  render(): TemplateResult {\n    const isLink = this.href ? true : false;\n    const tag = isLink ? literal`a` : literal`button`;\n\n    /* eslint-disable lit/binding-positions, lit/no-invalid-html */\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${classMap({\n          'icon-button': true,\n          'icon-button--disabled': !isLink && this.disabled,\n          'icon-button--focused': this.hasFocus\n        })}\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : 'button')}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}\n        role=${ifDefined(isLink ? undefined : 'button')}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-label=\"${this.label}\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @click=${this.handleClick}\n      >\n        <nile-icon\n          class=\"icon-button__icon\"\n          name=${ifDefined(this.name)}\n          library=${ifDefined(this.library)}\n          src=${ifDefined(this.src)}\n          aria-hidden=\"true\"\n        ></nile-icon>\n      </${tag}>\n    `;\n  }\n}\n\n\nexport default NileIconButton;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-icon-button': NileIconButton;\n  }\n}\n"]}

package/dist/src/nile-input/nile-input.css.js

@@ -25,19 +25,11 @@ export const styles = css `
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: 0.125rem;
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: 0.875rem;
+    margin-bottom: 12px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: 1rem;
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: 1.25rem;
+    font-size: 14px;
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
@@ -49,20 +41,23 @@ export const styles = css `
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: hsl(240 3.8% 46.1%);
-    margin-top: 0.125rem;
+    color: #7F7F7F;
+    margin-top: 6px;
   }
 
-  .form-control--has-help-text.form-control--small .form-control__help-text {
-    font-size: 0.75rem;
+  /* Error message */
+  .form-control__error-message {
+    display: block;
+    color: #A4121C;
+    margin-top: 12px;
+    font-size: 12px;
+    font-style: normal;
+    line-height: 12px;
+    letter-spacing: 0.2px;
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: 0.875rem;
-  }
-
-  .form-control--has-help-text.form-control--large .form-control__help-text {
-    font-size: 1rem;
+    font-size: 10.24px;
   }
 
   .form-control--has-help-text.form-control--radio-group
@@ -85,6 +80,7 @@ export const styles = css `
     cursor: text;
     transition: 150ms color, 150ms border, 150ms box-shadow,
       150ms background-color;
+    box-sizing: border-box;
   }
 
   /* Standard inputs */
@@ -95,13 +91,12 @@ export const styles = css `
 
   .input--standard:hover:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
-    border-color: #000000;
+    border-color: #000;
   }
 
   .input--standard.input--focused:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
     border-color: #005ea6;
-    box-shadow: 0 0 0 3px hsl(198.6 88.7% 48.4% / 40%);
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
@@ -109,8 +104,8 @@ export const styles = css `
   }
 
   .input--standard.input--disabled {
-    background-color: hsl(240 4.8% 95.9%);
-    border-color: hsl(240 4.9% 83.9%);
+    background-color: #fff;
+    border-color: #c7ced4;
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -124,7 +119,7 @@ export const styles = css `
   }
 
   .input--standard.input--warning {
-    border-color: #e5bf43;
+    border-color: var(--nile-colors-yellow-500);
   }
 
   .input--standard.input--error {
@@ -289,8 +284,8 @@ export const styles = css `
   }
 
   .input--medium .input__control {
-    height: calc(42px - 1px * 2);
-    padding: 0 1rem;
+    height: 14px;
+    padding: 12px;
   }
 
   .input--medium .input__clear {
@@ -302,11 +297,11 @@ export const styles = css `
   }
 
   .input--medium .input__prefix::slotted(*) {
-    margin-inline-start: 1rem;
+    margin-inline-start: 12px;
   }
 
   .input--medium .input__suffix::slotted(*) {
-    margin-inline-end: 1rem;
+    margin-inline-end: 12px;
   }
 
   .input--large {
@@ -416,22 +411,22 @@ export const styles = css `
   }
 
   :host([no-border]) .input--standard {
-    border: none; /* Remove borders on all sides */
+    border: none;
     box-shadow: 0 0 0 0;
   }
 
   :host([no-border]) .input--standard:hover:not(.input--disabled) {
-    border: none; /* Remove borders on all sides */
+    border: none;
     box-shadow: 0 0 0 0;
   }
 
   :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
-    border: none; /* Remove borders on all sides */
+    border: none;
     box-shadow: 0 0 0 0;
   }
 
   :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
-    border: none; /* Remove borders on all sides */
+    border: none;
     box-shadow: 0 0 0 0;
   }
 `;

package/dist/src/nile-input/nile-input.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0axB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: 0.125rem;\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    font-size: 0.875rem;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: 1rem;\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    font-size: 1.25rem;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: undefined;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: hsl(240 3.8% 46.1%);\n    margin-top: 0.125rem;\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: 0.75rem;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: 0.875rem;\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: 1rem;\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: 0.25rem;\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-family: inherit;\n    font-weight: 400;\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: hsl(0, 0%, 100%);\n    border: solid 1px #c7ced4;\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #000000;\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #005ea6;\n    box-shadow: 0 0 0 3px hsl(198.6 88.7% 48.4% / 40%);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--standard.input--disabled {\n    background-color: hsl(240 4.8% 95.9%);\n    border-color: hsl(240 4.9% 83.9%);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: hsl(240 5.9% 10%);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input--standard.input--warning {\n    border-color: #e5bf43;\n  }\n\n  .input--standard.input--error {\n    border-color: #e5434d;\n  }\n\n  .input--standard.input--success {\n    border-color: #43e5c0;\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: hsl(240 4.8% 95.9%);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: hsl(240 4.8% 95.9%);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    min-width: 0;\n    height: 100%;\n    color: hsl(240 5.3% 26.1%);\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: hsl(240 3.8% 46.1%);\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: 0.25rem;\n    font-size: 0.875rem;\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: 0 0.75rem;\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: 0.75rem;\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: 0.75rem;\n  }\n\n  .input--medium {\n    border-radius: 0.25rem;\n    font-size: 1rem;\n    height: 38px;\n  }\n\n  .input--medium .input__control {\n    height: calc(42px - 1px * 2);\n    padding: 0 1rem;\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: 1rem;\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: 1rem;\n  }\n\n  .input--large {\n    border-radius: 0.25rem;\n    font-size: 1.25rem;\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: 0 1.25rem;\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: 1.25rem;\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: 1.25rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius: 1.875rem;\n  }\n\n  .input--pill.input--medium {\n    border-radius: 2.5rem;\n  }\n\n  .input--pill.input--large {\n    border-radius: 3.125rem;\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__password-toggle:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none; /* Remove borders on all sides */\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none; /* Remove borders on all sides */\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none; /* Remove borders on all sides */\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none; /* Remove borders on all sides */\n    box-shadow: 0 0 0 0;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqaxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: 12px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: 14px;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: undefined;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: #7F7F7F;\n    margin-top: 6px;\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: #A4121C;\n    margin-top: 12px;\n    font-size: 12px;\n    font-style: normal;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: 10.24px;\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: 0.25rem;\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-family: inherit;\n    font-weight: 400;\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n    box-sizing: border-box;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: hsl(0, 0%, 100%);\n    border: solid 1px #c7ced4;\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #000;\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #005ea6;\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--standard.input--disabled {\n    background-color: #fff;\n    border-color: #c7ced4;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: hsl(240 5.9% 10%);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .input--standard.input--error {\n    border-color: #e5434d;\n  }\n\n  .input--standard.input--success {\n    border-color: #43e5c0;\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: hsl(240 4.8% 95.9%);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: hsl(240 4.8% 95.9%);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    min-width: 0;\n    height: 100%;\n    color: hsl(240 5.3% 26.1%);\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: hsl(240 3.8% 46.1%);\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: 0.25rem;\n    font-size: 0.875rem;\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: 0 0.75rem;\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: 0.75rem;\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: 0.75rem;\n  }\n\n  .input--medium {\n    border-radius: 0.25rem;\n    font-size: 1rem;\n    height: 38px;\n  }\n\n  .input--medium .input__control {\n    height: 14px;\n    padding: 12px;\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: 12px;\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: 12px;\n  }\n\n  .input--large {\n    border-radius: 0.25rem;\n    font-size: 1.25rem;\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: 0 1.25rem;\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: 1.25rem;\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: 1.25rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius: 1.875rem;\n  }\n\n  .input--pill.input--medium {\n    border-radius: 2.5rem;\n  }\n\n  .input--pill.input--large {\n    border-radius: 3.125rem;\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__password-toggle:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-input/nile-input.d.ts

@@ -48,6 +48,8 @@ export declare class NileInput extends NileElement implements NileFormControl {
     label: string;
     /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
     helpText: string;
+    /** The input's error message. If you need to display HTML, use the `error-message` slot instead. */
+    errorMessage: string;
     /** Adds a clear button when the input is not empty. */
     clearable: boolean;
     /** Disables the input. */

package/dist/src/nile-input/nile-input.js

@@ -60,6 +60,8 @@ let NileInput = class NileInput extends NileElement {
         this.label = '';
         /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
         this.helpText = '';
+        /** The input's error message. If you need to display HTML, use the `error-message` slot instead. */
+        this.errorMessage = '';
         /** Adds a clear button when the input is not empty. */
         this.clearable = false;
         /** Disables the input. */
@@ -255,6 +257,7 @@ let NileInput = class NileInput extends NileElement {
         const hasHelpTextSlot = this.hasSlotController.test('help-text');
         const hasLabel = this.label ? true : !!hasLabelSlot;
         const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+        const hasErrorMessage = this.errorMessage ? true : false;
         const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === 'number' || this.value.length > 0);
         return html `
       <div
@@ -296,7 +299,7 @@ let NileInput = class NileInput extends NileElement {
             'input--disabled': this.disabled,
             'input--focused': this.hasFocus,
             'input--empty': !this.value,
-            'input--no-spin-buttons': this.noSpinButtons
+            'input--no-spin-buttons': this.noSpinButtons,
         })}
           >
             <slot name="prefix" part="prefix" class="input__prefix"></slot>
@@ -304,8 +307,11 @@ let NileInput = class NileInput extends NileElement {
               part="input"
               id="input"
               class="input__control"
-              type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}
-              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+              type=${this.type === 'password' && this.passwordVisible
+            ? 'text'
+            : this.type}
+              title=${this
+            .title /* An empty title prevents browser validation tooltips from appearing on hover */}
               name=${ifDefined(this.name)}
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
@@ -356,19 +362,27 @@ let NileInput = class NileInput extends NileElement {
                       part="password-toggle-button"
                       class="input__password-toggle"
                       type="button"
-                      aria-label=${this.passwordVisible ? 'hidePassword' : 'showPassword'}
+                      aria-label=${this.passwordVisible
+                ? 'hidePassword'
+                : 'showPassword'}
                       @click=${this.handlePasswordToggle}
                       tabindex="-1"
                     >
                       ${this.passwordVisible
                 ? html `
                             <slot name="show-password-icon">
-                              <nile-icon name="eye" library="system"></nile-icon>
+                              <nile-icon
+                                name="eye"
+                                library="system"
+                              ></nile-icon>
                             </slot>
                           `
                 : html `
                             <slot name="hide-password-icon">
-                              <nile-icon name="eye" library="system"></nile-icon>
+                              <nile-icon
+                                name="eye"
+                                library="system"
+                              ></nile-icon>
                             </slot>
                           `}
                     </button>
@@ -388,6 +402,19 @@ let NileInput = class NileInput extends NileElement {
         >
           ${this.helpText}
         </slot>
+        ${hasErrorMessage
+            ? html `
+                <slot
+                  name="error-message"
+                  part="form-control-error-message"
+                  id="error-message"
+                  class="form-control__error-message"
+                  aria-hidden=${hasErrorMessage ? 'false' : 'true'}
+                >
+                  ${this.errorMessage}
+                </slot>
+              `
+            : ``}
         </div>
       </div>
     `;
@@ -439,6 +466,9 @@ __decorate([
 __decorate([
     property({ attribute: 'help-text' })
 ], NileInput.prototype, "helpText", void 0);
+__decorate([
+    property({ attribute: 'error-message' })
+], NileInput.prototype, "errorMessage", void 0);
 __decorate([
     property({ type: Boolean })
 ], NileInput.prototype, "clearable", void 0);