@aquera/nile-elements 0.0.49 → 0.0.50

package/dist/src/nile-circular-progressbar/index.js

@@ -0,0 +1,2 @@
+export { NileCircularProgressbar } from './nile-circular-progressbar';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-circular-progressbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-circular-progressbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export { NileCircularProgressbar } from './nile-circular-progressbar';\n"]}

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Progressbar CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { css } from 'lit-element';
+/**
+ * Progressbar CSS
+ */
+export const styles = css `
+  :host{
+    
+  }
+  .track {
+    stroke-width: 2px;
+    stroke: var(--nile-colors-yellow-400);
+    opacity: 0.5;
+    fill: none;
+  }
+
+  .progress {
+    stroke-width: 2px;
+    stroke: #e5bf43;
+    stroke-linecap: round;
+    fill: none;
+    transform: rotate(270deg);
+    transform-origin: center;
+  }
+
+  .circle__text {
+    color: var(--nile-colors-dark-900);
+    text-align: center;
+    font-size: var(--nile-type-scale-1);
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular);
+    line-height: var(--nile-type-scale-1);
+    letter-spacing: 0.2px;
+    text-transform: uppercase;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-circular-progressbar.css.js.map

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-circular-progressbar.css.js","sourceRoot":"","sources":["../../../src/nile-circular-progressbar/nile-circular-progressbar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BxB,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 * Progressbar CSS\n */\nexport const styles = css`\n  :host{\n    \n  }\n  .track {\n    stroke-width: 2px;\n    stroke: var(--nile-colors-yellow-400);\n    opacity: 0.5;\n    fill: none;\n  }\n\n  .progress {\n    stroke-width: 2px;\n    stroke: #e5bf43;\n    stroke-linecap: round;\n    fill: none;\n    transform: rotate(270deg);\n    transform-origin: center;\n  }\n\n  .circle__text {\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    font-size: var(--nile-type-scale-1);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-type-scale-1);\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { CSSResultArray, TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-progressbar
+ *
+ */
+export declare class NileCircularProgressbar extends NileElement {
+    /**
+     * The styles for Progressbar
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    progressCircle: any;
+    progress: number;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    connectedCallback(): void;
+    private setProgress;
+    render(): TemplateResult;
+}
+export default NileCircularProgressbar;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-circular-progressbar': NileCircularProgressbar;
+    }
+}

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { __decorate } from "tslib";
+import { html, property, } from 'lit-element';
+import { customElement, query } from 'lit/decorators.js';
+import { styles } from './nile-circular-progressbar.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-progressbar
+ *
+ */
+let NileCircularProgressbar = class NileCircularProgressbar extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.progress = 50;
+        /* #endregion */
+    }
+    /**
+     * The styles for Progressbar
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    // make reactive to pass through
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
+            if (this.progress < 0) {
+                this.progress = 0;
+            }
+            if (this.progress > 100) {
+                this.progress = 100;
+            }
+            this.setProgress(this.progress);
+        });
+    }
+    setProgress(percent) {
+        const circleRadius = this.progressCircle.r.baseVal.value;
+        let circumference = circleRadius * 2 * Math.PI;
+        this.progressCircle.style.strokeDasharray = circumference;
+        this.progressCircle.style.strokeDashoffset =
+            circumference - (percent / 100) * circumference;
+    }
+    render() {
+        return html `
+      <svg width="40" height="40">
+        <circle r="19" cx="20" cy="20" class="track"></circle>
+        <circle r="19" cx="20" cy="20" class="progress"></circle>
+        <text
+          x="50%"
+          y="50%"
+          text-anchor="middle"
+          alignment-baseline="middle"
+          class="circle__text"
+        >
+          ${this.progress} %
+        </text>
+      </svg>
+    `;
+    }
+};
+__decorate([
+    query('.progress')
+], NileCircularProgressbar.prototype, "progressCircle", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NileCircularProgressbar.prototype, "progress", void 0);
+NileCircularProgressbar = __decorate([
+    customElement('nile-circular-progressbar')
+], NileCircularProgressbar);
+export { NileCircularProgressbar };
+export default NileCircularProgressbar;
+//# sourceMappingURL=nile-circular-progressbar.js.map

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-circular-progressbar.js","sourceRoot":"","sources":["../../../src/nile-circular-progressbar/nile-circular-progressbar.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,WAAW;IAAjD;;QASsC,aAAQ,GAAG,EAAE,CAAC;QAkDzD,gBAAgB;IAClB,CAAC;IA3DC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAID,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACH,gCAAgC;IAEhC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE;gBACrB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;aACnB;YACD,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE;gBACvB,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;aACrB;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;IACL,CAAC;IACO,WAAW,CAAC,OAAe;QACjC,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;QACzD,IAAI,aAAa,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;QAC/C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC;QAC1D,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,gBAAgB;YACxC,aAAa,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;IACpD,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;;;;YAWH,IAAI,CAAC,QAAQ;;;KAGpB,CAAC;IACJ,CAAC;CAGF,CAAA;AApDqB;IAAnB,KAAK,CAAC,WAAW,CAAC;+DAAqB;AACG;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAe;AAT9C,uBAAuB;IADnC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,uBAAuB,CA4DnC;SA5DY,uBAAuB;AA8DpC,eAAe,uBAAuB,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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, query } from 'lit/decorators.js';\nimport { styles } from './nile-circular-progressbar.css';\nimport NileElement from '../internal/nile-element';\nimport logInfo from '../nile-icon/icons/svg/log-info';\n\n/**\n * Nile icon component.\n *\n * @tag nile-progressbar\n *\n */\n@customElement('nile-circular-progressbar')\nexport class NileCircularProgressbar extends NileElement {\n  /**\n   * The styles for Progressbar\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n  @query('.progress') progressCircle: any;\n  @property({ type: Number, reflect: true }) progress = 50;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  // make reactive to pass through\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      if (this.progress < 0) {\n        this.progress = 0;\n      }\n      if (this.progress > 100) {\n        this.progress = 100;\n      }\n      this.setProgress(this.progress);\n    });\n  }\n  private setProgress(percent: number) {\n    const circleRadius = this.progressCircle.r.baseVal.value;\n    let circumference = circleRadius * 2 * Math.PI;\n    this.progressCircle.style.strokeDasharray = circumference;\n    this.progressCircle.style.strokeDashoffset =\n      circumference - (percent / 100) * circumference;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <svg width=\"40\" height=\"40\">\n        <circle r=\"19\" cx=\"20\" cy=\"20\" class=\"track\"></circle>\n        <circle r=\"19\" cx=\"20\" cy=\"20\" class=\"progress\"></circle>\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          text-anchor=\"middle\"\n          alignment-baseline=\"middle\"\n          class=\"circle__text\"\n        >\n          ${this.progress} %\n        </text>\n      </svg>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileCircularProgressbar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-circular-progressbar': NileCircularProgressbar;\n  }\n}\n"]}

package/dist/src/nile-form-error-message/nile-form-error-message.css.js

@@ -15,12 +15,13 @@ export const styles = css `
   .nile-form-error-message {
     display: flex;
     align-items: center;
-    color: var(--nile-colors-red-700);
+    color: var(--nile-form-error-text-color);
     font-family: var(--nile-font-family-serif);
-    font-size: 12px;
+    font-size: var(--nile-form-error-text-font-size);
     font-style: normal;
     font-weight: 400;
     line-height: 12px;
+    line-height: var(--nile-form-error-text-line-height);
     letter-spacing: 0.2px;
     margin-top: 6px;
   }

package/dist/src/nile-form-error-message/nile-form-error-message.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBxB,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 * FormErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-form-error-message {\n    display: flex;\n    align-items: center;\n    color: var(--nile-colors-red-700);\n    font-family: var(--nile-font-family-serif);\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n    margin-top: 6px;\n  }\n\n  .nile-form-error-message__icon {\n    margin-right: 6px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-form-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBxB,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 * FormErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-form-error-message {\n    display: flex;\n    align-items: center;\n    color: var(--nile-form-error-text-color);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-form-error-text-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 12px;\n    line-height: var(--nile-form-error-text-line-height);\n    letter-spacing: 0.2px;\n    margin-top: 6px;\n  }\n\n  .nile-form-error-message__icon {\n    margin-right: 6px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-form-help-text/nile-form-help-text.css.d.ts

@@ -1,9 +1,9 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /**
  * FormHelpText CSS
  */

package/dist/src/nile-form-help-text/nile-form-help-text.css.js

@@ -1,27 +1,27 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { css } from 'lit-element';
 /**
  * FormHelpText CSS
  */
 export const styles = css `
-	:host {
-
-	}
+  :host {
+  }
 
   .nile-form-help-text {
     display: flex;
     align-items: center;
     color: var(--nile-colors-dark-500);
+    color: var(--nile-form-help-text-color);
     font-family: var(--nile-font-family-serif);
-    font-size: 12px;
+    font-size: var(--nile-form-help-text-font-size);
     font-style: normal;
     font-weight: 400;
-    line-height: 12px;
+    line-height: var(--nile-form-help-text-line-height);
     letter-spacing: 0.2px;
     margin-top: 6px;
     margin-right: 4px;
@@ -34,7 +34,7 @@ export const styles = css `
     color: var(--nile-colors-primary-600);
     cursor: pointer;
     white-space: nowrap;
-    align-items: center
+    align-items: center;
   }
 `;
 export default [styles];

package/dist/src/nile-form-help-text/nile-form-help-text.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-help-text.css.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,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 * FormHelpText CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n\n  .nile-form-help-text {\n    display: flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n    font-family: var(--nile-font-family-serif);\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n    margin-top: 6px;\n    margin-right: 4px;\n    width: auto;\n  }\n\n  .nile-form-help-text__more-button {\n    display: inline-flex;\n    gap: 4px;\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n    white-space: nowrap;\n    align-items: center\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-form-help-text.css.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,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 * FormHelpText CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-form-help-text {\n    display: flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n    color: var(--nile-form-help-text-color);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-form-help-text-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--nile-form-help-text-line-height);\n    letter-spacing: 0.2px;\n    margin-top: 6px;\n    margin-right: 4px;\n    width: auto;\n  }\n\n  .nile-form-help-text__more-button {\n    display: inline-flex;\n    gap: 4px;\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n    white-space: nowrap;\n    align-items: center;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -42,20 +42,20 @@ export const styles = css `
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: #A4121C;
+    color: #a4121c;
   }
 
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: #7F7F7F;
+    color: #7f7f7f;
     margin-top: 6px;
   }
 
   /* Error message */
   .form-control__error-message {
     display: block;
-    color: #A4121C;
+    color: #a4121c;
     margin-top: 12px;
     font-size: 12px;
     font-style: normal;
@@ -96,8 +96,9 @@ export const styles = css `
 
   /* Standard inputs */
   .input--standard {
-    background-color: hsl(0, 0%, 100%);
-    border: solid 1px #c7ced4;
+    background-color: var(--nile-input-standard-background-color);
+    border: solid 1px var(--nile-input-standard-border-color);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /**for v2 */
   }
 
   .input--standard:hover:not(.input--disabled) {
@@ -127,6 +128,7 @@ export const styles = css `
 
   .input--standard.input--disabled .input__control::placeholder {
     color: hsl(240 5.2% 33.9%);
+    color: var(--nile-input-standard-disabled-placeholder-font-color);
   }
 
   .input--standard.input--warning {
@@ -141,6 +143,17 @@ export const styles = css `
     border-color: #43e5c0;
   }
 
+  .input--standard.input--destructive {
+    border-color: #fda29b;
+  }
+
+  .input--standard.input--destructive:focus {
+    border: 1px solid #fda29b;
+    /* Focus rings/ring-error-shadow-xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
   /* Filled inputs */
   .input--filled {
     border: none;
@@ -176,7 +189,7 @@ export const styles = css `
     cursor: inherit;
     -webkit-appearance: none;
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-sans-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -232,12 +245,18 @@ export const styles = css `
   }
 
   .input__control::placeholder {
-    color: hsl(240 3.8% 46.1%);
+    color: #7f7f7f;
+    color: #667085; /**for v2 */
     user-select: none;
   }
 
   .input:hover:not(.input--disabled) .input__control {
-    color: hsl(240 5.3% 26.1%);
+    color: #000;
+    font-size: 14px;
+    line-height: 14px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.2px;
   }
 
   .input__control:focus {
@@ -260,13 +279,20 @@ export const styles = css `
     color: hsl(240 3.8% 46.1%);
   }
 
+  .input--standard:focus {
+    border-radius: 4px;
+    border: 1px solid #85aad1; /**for v2 */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */
+  }
+
   /*
    * Size modifiers
    */
 
   .input--small {
     border-radius: 0.25rem;
-    font-size: 0.875rem;
+    font-size: var(--nile-input-font-size-small);
     height: 1.875rem;
   }
 
@@ -293,7 +319,7 @@ export const styles = css `
 
   .input--medium {
     border-radius: 0.25rem;
-    font-size: 1rem;
+    font-size: var(--nile-input-font-size-medium);
     height: 38px;
   }
 

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAucxB,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    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0.2px;\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: #A4121C;\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-weight: 400;\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    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\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    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0.2px;\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  .input__password {\n    font-family: 'disc';\n  }\n\n  .input__non-printable {\n    width: 280px;\n    height: 12px;\n    border-radius: 4px;\n    background-color: #ffffff;\n    border: 1px solid grey;\n    color: red;\n    padding: 10px;\n    font-size: 12px;\n  }\n\n  .input__remove-non-printable {\n    color: #035da6;\n    margin-left: 10px;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiexB,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    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0.2px;\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: #a4121c;\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-weight: 400;\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    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color);\n    border: solid 1px var(--nile-input-standard-border-color);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /**for v2 */\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    color: var(--nile-input-standard-disabled-placeholder-font-color);\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  .input--standard.input--destructive {\n    border-color: #fda29b;\n  }\n\n  .input--standard.input--destructive:focus {\n    border: 1px solid #fda29b;\n    /* Focus rings/ring-error-shadow-xs */\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\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    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-sans-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0.2px;\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: #7f7f7f;\n    color: #667085; /**for v2 */\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: #000;\n    font-size: 14px;\n    line-height: 14px;\n    font-style: normal;\n    font-weight: 400;\n    letter-spacing: 0.2px;\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  .input--standard:focus {\n    border-radius: 4px;\n    border: 1px solid #85aad1; /**for v2 */\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-small);\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: var(--nile-input-font-size-medium);\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  .input__password {\n    font-family: 'disc';\n  }\n\n  .input__non-printable {\n    width: 280px;\n    height: 12px;\n    border-radius: 4px;\n    background-color: #ffffff;\n    border: 1px solid grey;\n    color: red;\n    padding: 10px;\n    font-size: 12px;\n  }\n\n  .input__remove-non-printable {\n    color: #035da6;\n    margin-left: 10px;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -43,6 +43,8 @@ export declare class NileInput extends NileElement implements NileFormControl {
     error: boolean;
     /** Sets the input to a success state, changing its visual appearance. */
     success: boolean;
+    /** Sets the input to a Destructive state, changing its visual appearance. */
+    destructive: boolean;
     /** Draws a pill-style input with rounded edges. */
     pill: boolean;
     /** The input's label. If you need to display HTML, use the `label` slot instead. */

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

@@ -55,6 +55,8 @@ let NileInput = class NileInput extends NileElement {
         this.error = false;
         /** Sets the input to a success state, changing its visual appearance. */
         this.success = false;
+        /** Sets the input to a Destructive state, changing its visual appearance. */
+        this.destructive = false;
         /** Draws a pill-style input with rounded edges. */
         this.pill = false;
         /** The input's label. If you need to display HTML, use the `label` slot instead. */
@@ -353,6 +355,7 @@ let NileInput = class NileInput extends NileElement {
             'input--warning': this.warning,
             'input--error': this.error,
             'input--success': this.success,
+            'input--destructive': this.destructive,
             'input--filled': this.filled,
             'input--disabled': this.disabled,
             'input--focused': this.hasFocus,
@@ -514,6 +517,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileInput.prototype, "success", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileInput.prototype, "destructive", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileInput.prototype, "pill", void 0);