@aquera/nile-elements 2.0.7 → 2.0.8

package/README.md

@@ -91,6 +91,10 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
+#### Version 2.0.8 (September 10, 2026)
+- Nile Input: Fixed the input text turning invisible on hover and focus under the NxtGen theme (UIF-1348)
+- Nile Chip: Fixed a blue border appearing around the input on focus (UIF-1350)
+
 #### Version 2.0.7 (September 07, 2026)
 - Nile Side Bar Header & Nile Side Bar Footer: Added a `background` property. The default keeps the sidebar surface color, and `background="transparent"` drops it so whatever sits behind the header/footer shows through (UIF-1347)
 

package/dist/index.js

@@ -1236,7 +1236,7 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--nile-colors-primary-900);
+    color: var(--nile-colors-primary-900, var(--ng-colors-text-primary-900));
   }
 
   .input--standard.input--disabled {
@@ -1391,7 +1391,7 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
   }
 
   .input:hover:not(.input--disabled) .input__control {
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .input__control:focus {
@@ -1603,9 +1603,8 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
     box-shadow: 0 0 0 0;
   }
 
-  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
-    border: none;
-    box-shadow: 0 0 0 0;
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled)::before {
+    box-shadow: none;
   }
 
   .input__password {
@@ -8586,7 +8585,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   }
 
   .nile-chip--disabled {
-    
+
     /* opacity: 0.5; */
     cursor: not-allowed;
     border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
@@ -8641,7 +8640,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   nile-auto-complete::part(base) {
     height: auto;
   }
-  
+
   .nile-chip:hover:not(.nile-chip--disabled) {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
     box-shadow: var(--nile-box-shadow-10);
@@ -8652,8 +8651,8 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
     box-shadow: none;
   }
 
-
-  .nile-chip.nile-chip--open:hover  {
+  .nile-chip.nile-chip--open:hover,
+  :host(:not([disabled])) .nile-chip:focus-within {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));
     box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */
   }
@@ -8663,10 +8662,6 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
     gap: 2px;
   }
 
-  nile-auto-complete::part(base)::before {
-    box-shadow: none;
-  }
-
   :host([required]) .form-control--has-label .form-control__label::after {
   content: '*';
     margin-inline-start: -2px;
@@ -19274,7 +19269,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
           ${this._renderTrigger()}
           ${e}
         </nile-popover>
-      `:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);function pS(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.2"}if("undefined"!=typeof window){window.nileElementsVersion='"2.0.7"';let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??pS(),set:t=>{e=t}}),window.process=window.process||{env:{NODE_ENV:"production"}}}const DS=s`
+      `:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);function pS(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.2"}if("undefined"!=typeof window){window.nileElementsVersion='"2.0.8"';let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??pS(),set:t=>{e=t}}),window.process=window.process||{env:{NODE_ENV:"production"}}}const DS=s`
   :host {
     /* Geometry. Values come from design tokens wherever one exists; the bare
        pixels are shell geometry with no matching token. */

package/dist/nile-chip/nile-chip.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\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: var(--nile-spacing-sm,var( --ng-spacing-sm));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxxxsmall);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n    min-height: var(--ng-height-40px);\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--nile-gap-unset, var(--ng-spacing-md));\n  }\n\n  nile-input::part(base) {\n    padding: 0px !important;\n    height: auto;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n    \n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n    pointer-events: none;\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-margin-size-rem-small);\n  }\n\n  nile-auto-complete::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n  }\n\n  nile-auto-complete::part(base) {\n    height: auto;\n  }\n  \n  .nile-chip:hover:not(.nile-chip--disabled) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n    box-shadow: var(--nile-box-shadow-10);\n  }\n\n  :host([disabled]) .nile-chip:hover {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    box-shadow: none;\n  }\n\n\n  .nile-chip.nile-chip--open:hover  {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n  }\n\n  .nile-chip__tags--focused::part(base) {\n    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    gap: 2px;\n  }\n\n  nile-auto-complete::part(base)::before {\n    box-shadow: none;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n  content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) nile-auto-complete::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\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: var(--nile-spacing-sm,var( --ng-spacing-sm));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxxxsmall);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n    min-height: var(--ng-height-40px);\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--nile-gap-unset, var(--ng-spacing-md));\n  }\n\n  nile-input::part(base) {\n    padding: 0px !important;\n    height: auto;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n    pointer-events: none;\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-margin-size-rem-small);\n  }\n\n  nile-auto-complete::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n  }\n\n  nile-auto-complete::part(base) {\n    height: auto;\n  }\n\n  .nile-chip:hover:not(.nile-chip--disabled) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n    box-shadow: var(--nile-box-shadow-10);\n  }\n\n  :host([disabled]) .nile-chip:hover {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    box-shadow: none;\n  }\n\n  .nile-chip.nile-chip--open:hover,\n  :host(:not([disabled])) .nile-chip:focus-within {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n  }\n\n  .nile-chip__tags--focused::part(base) {\n    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    gap: 2px;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n  content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) nile-auto-complete::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n"]))));}};});
 //# sourceMappingURL=nile-chip.css.cjs.js.map

package/dist/nile-chip/nile-chip.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-chip.css.cjs.js","sources":["../../../src/nile-chip/nile-chip.css.ts"],"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';\n\n/**\n * Chip CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\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: var(--nile-spacing-sm,var( --ng-spacing-sm));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxxxsmall);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n    min-height: var(--ng-height-40px);\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--nile-gap-unset, var(--ng-spacing-md));\n  }\n\n  nile-input::part(base) {\n    padding: 0px !important;\n    height: auto;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n    \n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n    pointer-events: none;\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-margin-size-rem-small);\n  }\n\n  nile-auto-complete::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n  }\n\n  nile-auto-complete::part(base) {\n    height: auto;\n  }\n  \n  .nile-chip:hover:not(.nile-chip--disabled) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n    box-shadow: var(--nile-box-shadow-10);\n  }\n\n  :host([disabled]) .nile-chip:hover {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    box-shadow: none;\n  }\n\n\n  .nile-chip.nile-chip--open:hover  {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n  }\n\n  .nile-chip__tags--focused::part(base) {\n    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    gap: 2px;\n  }\n\n  nile-auto-complete::part(base)::before {\n    box-shadow: none;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n  content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) nile-auto-complete::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-chip.css.cjs.js","sources":["../../../src/nile-chip/nile-chip.css.ts"],"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';\n\n/**\n * Chip CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\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: var(--nile-spacing-sm,var( --ng-spacing-sm));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxxxsmall);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n    min-height: var(--ng-height-40px);\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--nile-gap-unset, var(--ng-spacing-md));\n  }\n\n  nile-input::part(base) {\n    padding: 0px !important;\n    height: auto;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n    pointer-events: none;\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-margin-size-rem-small);\n  }\n\n  nile-auto-complete::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n  }\n\n  nile-auto-complete::part(base) {\n    height: auto;\n  }\n\n  .nile-chip:hover:not(.nile-chip--disabled) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n    box-shadow: var(--nile-box-shadow-10);\n  }\n\n  :host([disabled]) .nile-chip:hover {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    box-shadow: none;\n  }\n\n  .nile-chip.nile-chip--open:hover,\n  :host(:not([disabled])) .nile-chip:focus-within {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n  }\n\n  .nile-chip__tags--focused::part(base) {\n    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    gap: 2px;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n  content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) nile-auto-complete::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-chip/nile-chip.css.esm.js

@@ -111,7 +111,7 @@ import{css as o}from"lit";const r=o`
   }
 
   .nile-chip--disabled {
-    
+
     /* opacity: 0.5; */
     cursor: not-allowed;
     border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
@@ -166,7 +166,7 @@ import{css as o}from"lit";const r=o`
   nile-auto-complete::part(base) {
     height: auto;
   }
-  
+
   .nile-chip:hover:not(.nile-chip--disabled) {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
     box-shadow: var(--nile-box-shadow-10);
@@ -177,8 +177,8 @@ import{css as o}from"lit";const r=o`
     box-shadow: none;
   }
 
-
-  .nile-chip.nile-chip--open:hover  {
+  .nile-chip.nile-chip--open:hover,
+  :host(:not([disabled])) .nile-chip:focus-within {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));
     box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */
   }
@@ -188,10 +188,6 @@ import{css as o}from"lit";const r=o`
     gap: 2px;
   }
 
-  nile-auto-complete::part(base)::before {
-    box-shadow: none;
-  }
-
   :host([required]) .form-control--has-label .form-control__label::after {
   content: '*';
     margin-inline-start: -2px;

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: var(--nile-spacing-none);\n    padding: var(--nile-spacing-none);\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\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: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-sm);\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    line-height: var( --nile-form-error-text-line-height,  var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\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: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color, 150ms outline;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n    outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .input--standard:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n  }\n\n  .input--standard.input--error:hover:not(.input--disabled) {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  }\n  .input--standard.input--focused:not(.input--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.input--standard.input--focused:not(.input--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n  .input--standard.input--focused.input--warning:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--focused.input--success:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n  }\n  \n  .input--standard.input--focused.input--error:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: var(--nile-colors-primary-900);\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n    \n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    background:var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .input--standard.input--warning:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .input--standard.input--success:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\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: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900);\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: var(--nile-colors-neutral-700);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input--standard:focus {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\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: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\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: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--medium {\n    font-size: var(--nile-font-size-rem-large);\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .input--medium .input__control {\n    height: var(--nile-type-scale-3, var(--ng-height-auto));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\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: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--large {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-6);\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: var(--nile-spacing-none) var(--nile-spacing-xl);\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: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--medium {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--large {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\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: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\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: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__password-toggle:hover {\n    color: var(--nile-colors-neutral-700);\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-outline]) .input--standard {\n    outline: var(--nile-outline-unset, var(--ng-outline-none));\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: var(--nile-font-family-disc, var(--ng-font-family-body));\n    letter-spacing: var(--nile-spacing-xxs, var(--ng-spacing-none));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm);\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-2);\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs);\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: var(--nile-spacing-none);\n    padding: var(--nile-spacing-none);\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\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: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-sm);\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    line-height: var( --nile-form-error-text-line-height,  var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\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: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color, 150ms outline;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n    outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .input--standard:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n  }\n\n  .input--standard.input--error:hover:not(.input--disabled) {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  }\n  .input--standard.input--focused:not(.input--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.input--standard.input--focused:not(.input--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n  .input--standard.input--focused.input--warning:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--focused.input--success:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n  }\n  \n  .input--standard.input--focused.input--error:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: var(--nile-colors-primary-900, var(--ng-colors-text-primary-900));\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n    \n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    background:var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .input--standard.input--warning:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .input--standard.input--success:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\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: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\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: var(--nile-colors-neutral-700);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input--standard:focus {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\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: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\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: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--medium {\n    font-size: var(--nile-font-size-rem-large);\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .input--medium .input__control {\n    height: var(--nile-type-scale-3, var(--ng-height-auto));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\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: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--large {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-6);\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: var(--nile-spacing-none) var(--nile-spacing-xl);\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: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--medium {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--large {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\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: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\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: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__password-toggle:hover {\n    color: var(--nile-colors-neutral-700);\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-outline]) .input--standard {\n    outline: var(--nile-outline-unset, var(--ng-outline-none));\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)::before {\n    box-shadow: none;\n  }\n\n  .input__password {\n    font-family: var(--nile-font-family-disc, var(--ng-font-family-body));\n    letter-spacing: var(--nile-spacing-xxs, var(--ng-spacing-none));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm);\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-2);\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs);\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n"]))));}};});
 //# sourceMappingURL=nile-input.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-input.css.cjs.js","sources":["../../../src/nile-input/nile-input.css.ts"],"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';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: var(--nile-spacing-none);\n    padding: var(--nile-spacing-none);\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\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: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-sm);\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    line-height: var( --nile-form-error-text-line-height,  var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\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: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color, 150ms outline;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n    outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .input--standard:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n  }\n\n  .input--standard.input--error:hover:not(.input--disabled) {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  }\n  .input--standard.input--focused:not(.input--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.input--standard.input--focused:not(.input--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n  .input--standard.input--focused.input--warning:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--focused.input--success:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n  }\n  \n  .input--standard.input--focused.input--error:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: var(--nile-colors-primary-900);\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n    \n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    background:var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .input--standard.input--warning:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .input--standard.input--success:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\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: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900);\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: var(--nile-colors-neutral-700);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input--standard:focus {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\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: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\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: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--medium {\n    font-size: var(--nile-font-size-rem-large);\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .input--medium .input__control {\n    height: var(--nile-type-scale-3, var(--ng-height-auto));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\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: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--large {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-6);\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: var(--nile-spacing-none) var(--nile-spacing-xl);\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: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--medium {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--large {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\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: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\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: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__password-toggle:hover {\n    color: var(--nile-colors-neutral-700);\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-outline]) .input--standard {\n    outline: var(--nile-outline-unset, var(--ng-outline-none));\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: var(--nile-font-family-disc, var(--ng-font-family-body));\n    letter-spacing: var(--nile-spacing-xxs, var(--ng-spacing-none));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm);\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-2);\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs);\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-input.css.cjs.js","sources":["../../../src/nile-input/nile-input.css.ts"],"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';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: var(--nile-spacing-none);\n    padding: var(--nile-spacing-none);\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\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: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-sm);\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    line-height: var( --nile-form-error-text-line-height,  var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\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: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color, 150ms outline;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n    outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .input--standard:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n  }\n\n  .input--standard.input--error:hover:not(.input--disabled) {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  }\n  .input--standard.input--focused:not(.input--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.input--standard.input--focused:not(.input--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n  .input--standard.input--focused.input--warning:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--focused.input--success:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n  }\n  \n  .input--standard.input--focused.input--error:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: var(--nile-colors-primary-900, var(--ng-colors-text-primary-900));\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n    \n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    background:var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .input--standard.input--warning:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .input--standard.input--success:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\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: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-white-base, var(--ng-colors-bg-primary)) 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 var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\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: var(--nile-colors-neutral-700);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input--standard:focus {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\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: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\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: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--medium {\n    font-size: var(--nile-font-size-rem-large);\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .input--medium .input__control {\n    height: var(--nile-type-scale-3, var(--ng-height-auto));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\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: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--large {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-6);\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: var(--nile-spacing-none) var(--nile-spacing-xl);\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: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--medium {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--large {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\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: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\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: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__password-toggle:hover {\n    color: var(--nile-colors-neutral-700);\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-outline]) .input--standard {\n    outline: var(--nile-outline-unset, var(--ng-outline-none));\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)::before {\n    box-shadow: none;\n  }\n\n  .input__password {\n    font-family: var(--nile-font-family-disc, var(--ng-font-family-body));\n    letter-spacing: var(--nile-spacing-xxs, var(--ng-spacing-none));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm);\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-2);\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs);\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -182,7 +182,7 @@ import{css as r}from"lit";const o=r`
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--nile-colors-primary-900);
+    color: var(--nile-colors-primary-900, var(--ng-colors-text-primary-900));
   }
 
   .input--standard.input--disabled {
@@ -337,7 +337,7 @@ import{css as r}from"lit";const o=r`
   }
 
   .input:hover:not(.input--disabled) .input__control {
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .input__control:focus {
@@ -549,9 +549,8 @@ import{css as r}from"lit";const o=r`
     box-shadow: 0 0 0 0;
   }
 
-  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
-    border: none;
-    box-shadow: 0 0 0 0;
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled)::before {
+    box-shadow: none;
   }
 
   .input__password {

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

@@ -121,7 +121,7 @@ export const styles = css `
   }
 
   .nile-chip--disabled {
-    
+
     /* opacity: 0.5; */
     cursor: not-allowed;
     border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
@@ -176,7 +176,7 @@ export const styles = css `
   nile-auto-complete::part(base) {
     height: auto;
   }
-  
+
   .nile-chip:hover:not(.nile-chip--disabled) {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
     box-shadow: var(--nile-box-shadow-10);
@@ -187,8 +187,8 @@ export const styles = css `
     box-shadow: none;
   }
 
-
-  .nile-chip.nile-chip--open:hover  {
+  .nile-chip.nile-chip--open:hover,
+  :host(:not([disabled])) .nile-chip:focus-within {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));
     box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */
   }
@@ -198,10 +198,6 @@ export const styles = css `
     gap: 2px;
   }
 
-  nile-auto-complete::part(base)::before {
-    box-shadow: none;
-  }
-
   :host([required]) .form-control--has-label .form-control__label::after {
   content: '*';
     margin-inline-start: -2px;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-chip.css.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgNxB,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';\n\n/**\n * Chip CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\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: var(--nile-spacing-sm,var( --ng-spacing-sm));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxxxsmall);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n    min-height: var(--ng-height-40px);\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--nile-gap-unset, var(--ng-spacing-md));\n  }\n\n  nile-input::part(base) {\n    padding: 0px !important;\n    height: auto;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n    \n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n    pointer-events: none;\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-margin-size-rem-small);\n  }\n\n  nile-auto-complete::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n  }\n\n  nile-auto-complete::part(base) {\n    height: auto;\n  }\n  \n  .nile-chip:hover:not(.nile-chip--disabled) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n    box-shadow: var(--nile-box-shadow-10);\n  }\n\n  :host([disabled]) .nile-chip:hover {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    box-shadow: none;\n  }\n\n\n  .nile-chip.nile-chip--open:hover  {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n  }\n\n  .nile-chip__tags--focused::part(base) {\n    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    gap: 2px;\n  }\n\n  nile-auto-complete::part(base)::before {\n    box-shadow: none;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n  content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) nile-auto-complete::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-chip.css.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4MxB,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';\n\n/**\n * Chip CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\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: var(--nile-spacing-sm,var( --ng-spacing-sm));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxxxsmall);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n    min-height: var(--ng-height-40px);\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--nile-gap-unset, var(--ng-spacing-md));\n  }\n\n  nile-input::part(base) {\n    padding: 0px !important;\n    height: auto;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n    pointer-events: none;\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-margin-size-rem-small);\n  }\n\n  nile-auto-complete::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n  }\n\n  nile-auto-complete::part(base) {\n    height: auto;\n  }\n\n  .nile-chip:hover:not(.nile-chip--disabled) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n    box-shadow: var(--nile-box-shadow-10);\n  }\n\n  :host([disabled]) .nile-chip:hover {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    box-shadow: none;\n  }\n\n  .nile-chip.nile-chip--open:hover,\n  :host(:not([disabled])) .nile-chip:focus-within {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n  }\n\n  .nile-chip__tags--focused::part(base) {\n    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    gap: 2px;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n  content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) nile-auto-complete::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -192,7 +192,7 @@ export const styles = css `
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--nile-colors-primary-900);
+    color: var(--nile-colors-primary-900, var(--ng-colors-text-primary-900));
   }
 
   .input--standard.input--disabled {
@@ -347,7 +347,7 @@ export const styles = css `
   }
 
   .input:hover:not(.input--disabled) .input__control {
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .input__control:focus {
@@ -559,9 +559,8 @@ export const styles = css `
     box-shadow: 0 0 0 0;
   }
 
-  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
-    border: none;
-    box-shadow: 0 0 0 0;
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled)::before {
+    box-shadow: none;
   }
 
   .input__password {