@aquera/nile-elements 1.3.9-beta-1.4 → 1.4.0-beta-1.0

package/dist/nile-inline-sidebar/nile-inline-sidebar.esm.js

@@ -7,13 +7,13 @@ import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as
           ${t.textContent}
         </nile-side-bar-action-menu-item>
       `;return s||n?e`
-            <nile-inline-tooltip
+            <nile-tooltip
               content=${t.textContent?.trim()||""}
               hoist
               placement="right"
             >
               ${l}
-            </nile-inline-tooltip>
+            </nile-tooltip>
           `:l})):null}render(){return e`
       <div class="sidebar" part="base">
         <div class="sidebar-header" part="header">

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\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-brand-tertiary-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-white-base, 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  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-color-dark-blue, var(--ng-colors-text-disabled));\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));\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    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 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-neutral-700, var(--ng-colors-text-placeholder));\n    user-select: none;\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-auto));\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\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-brand-tertiary-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-white-base, 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  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));\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    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 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-neutral-700, var(--ng-colors-text-placeholder));\n    user-select: none;\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-auto));\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"]))));}};});
 //# 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\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-brand-tertiary-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-white-base, 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  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-color-dark-blue, var(--ng-colors-text-disabled));\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));\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    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 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-neutral-700, var(--ng-colors-text-placeholder));\n    user-select: none;\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-auto));\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\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-brand-tertiary-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-white-base, 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  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));\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    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 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-neutral-700, var(--ng-colors-text-placeholder));\n    user-select: none;\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-auto));\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"}

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

@@ -189,7 +189,7 @@ import{css as r}from"lit";const o=r`
   }
 
   .input--standard.input--disabled .input__control {
-    color:  var(--nile-color-dark-blue, var(--ng-colors-text-disabled));
+    color:  var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
   }
 
   .input--standard.input--disabled .input__control::placeholder {