@aquera/nile-elements 1.5.5 → 1.5.6

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

@@ -1,4 +1,4 @@
-import{css as r}from"lit";const e=r`
+import{css as r}from"lit";const o=r`
 
   :host{
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
@@ -133,4 +133,26 @@ nile-badge::part(content) {
  line-height: 20px;
 }
 
-`;export{e as s};
+:host([disabled]) .chip {
+  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
+  border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));
+  cursor: not-allowed;
+  opacity: var(--nile-opacity-100, var(--ng-opacity-50));
+}
+
+:host([disabled]) .label {
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));
+  font-family:colfax-regular;
+}
+
+:host([disabled]) .value {
+  color: var(--nile-colors-primary-500, var(--ng-colors-text-brand-secondary-700));
+}
+
+:host([disabled]) nile-badge::part(base) {
+  background-color: var(--nile-colors-primary-500,var(--ng-colors-text-brand-secondary-700));
+  color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+}
+
+`;export{o as s};

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

@@ -1,4 +1,4 @@
-import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as s,customElement as i}from"lit/decorators.js";import{N as l}from"../internal/nile-element.esm.js";import{s as a}from"./nile-filter-chip.css.esm.js";var n;let o=n=class extends l{constructor(){super(...arguments),this.label="",this.value="",this.viewMoreCount=0,this.editable=!1,this.closable=!1,this.icon="",this.removeIcon="",this.active=!1}static get styles(){return[a]}connectedCallback(){super.connectedCallback(),this.registerChip()}disconnectedCallback(){super.disconnectedCallback(),this.unregisterChip()}registerChip(){n.activeChips.push(this)}unregisterChip(){n.activeChips=n.activeChips.filter((e=>e!==this))}handleClose(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("nile-close",{detail:{value:this.value,viewMoreCount:this.viewMoreCount}})),this.remove()}handleClick(){this.dispatchEvent(new CustomEvent("nile-click",{detail:{value:this.value,viewMoreCount:this.viewMoreCount}}))}getLabelSlot(){return t`
+import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as s,customElement as i}from"lit/decorators.js";import{N as l}from"../internal/nile-element.esm.js";import{s as a}from"./nile-filter-chip.css.esm.js";var o;let n=o=class extends l{constructor(){super(...arguments),this.label="",this.value="",this.viewMoreCount=0,this.editable=!1,this.closable=!1,this.icon="",this.removeIcon="",this.active=!1,this.disabled=!1}static get styles(){return[a]}connectedCallback(){super.connectedCallback(),this.registerChip()}disconnectedCallback(){super.disconnectedCallback(),this.unregisterChip()}registerChip(){o.activeChips.push(this)}unregisterChip(){o.activeChips=o.activeChips.filter((e=>e!==this))}handleClose(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("nile-close",{detail:{value:this.value,viewMoreCount:this.viewMoreCount}})),this.remove()}handleClick(){this.disabled||this.dispatchEvent(new CustomEvent("nile-click",{detail:{value:this.value,viewMoreCount:this.viewMoreCount}}))}getLabelSlot(){return t`
     <span class="label-wrapper">
       <slot name="label">
         <span class="label" part="label">${this.label}:</span>
@@ -40,4 +40,4 @@ import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as
         ${this.getviewMoreCountSlot()}
         ${this.getCloseIconSlot()}
       </div>
-    `}};o.activeChips=[],e([s({type:String})],o.prototype,"label",void 0),e([s({type:String})],o.prototype,"value",void 0),e([s({type:Number})],o.prototype,"viewMoreCount",void 0),e([s({type:Boolean})],o.prototype,"editable",void 0),e([s({type:Boolean})],o.prototype,"closable",void 0),e([s({type:String})],o.prototype,"icon",void 0),e([s({type:String})],o.prototype,"removeIcon",void 0),e([s({type:Boolean,reflect:!0})],o.prototype,"active",void 0),o=n=e([i("nile-filter-chip")],o);export{o as N};
+    `}};n.activeChips=[],e([s({type:String})],n.prototype,"label",void 0),e([s({type:String})],n.prototype,"value",void 0),e([s({type:Number})],n.prototype,"viewMoreCount",void 0),e([s({type:Boolean})],n.prototype,"editable",void 0),e([s({type:Boolean})],n.prototype,"closable",void 0),e([s({type:String})],n.prototype,"icon",void 0),e([s({type:String})],n.prototype,"removeIcon",void 0),e([s({type:Boolean,reflect:!0})],n.prototype,"active",void 0),e([s({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),n=o=e([i("nile-filter-chip")],n);export{n as N};

package/dist/nile-inline-edit/nile-inline-edit.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-inline-edit.css.cjs.js","../internal/nile-element.cjs.js","./nile-inline-edit-utils.cjs.js"],function(_export,_context){"use strict";var t,i,e,s,o,n,l,r,a,c,_templateObject,_templateObject2,_templateObject3,h;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){i=_lit.html;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;s=_litDecoratorsJs.customElement;},function(_nileInlineEditCssCjsJs){o=_nileInlineEditCssCjsJs.s;},function(_internalNileElementCjsJs){n=_internalNileElementCjsJs.N;},function(_nileInlineEditUtilsCjsJs){l=_nileInlineEditUtilsCjsJs.h;r=_nileInlineEditUtilsCjsJs.a;a=_nileInlineEditUtilsCjsJs.u;c=_nileInlineEditUtilsCjsJs.g;}],execute:function execute(){_export("N",h=/*#__PURE__*/function(_n){function h(){var _this;_classCallCheck(this,h);_this=_callSuper(this,h,arguments),_this.label="",_this.placeholder="",_this.open=!1,_this.value="",_this.maxPlaceholderLength=25,_this.autoClose=!1,_this.handleDocumentFocusInWrapper=function(t){var i=l(t,_assertThisInitialized(_this),_this.open);_this.handleCloseResult(i);},_this.handleDocumentMouseDownWrapper=function(t){var i=r(t,_assertThisInitialized(_this),_this.open);_this.handleCloseResult(i);};return _this;}_inherits(h,_n);return _createClass(h,[{key:"handleCloseResult",value:function handleCloseResult(t){t.shouldClose&&(null!==t.newValue&&(this.value=t.newValue),this.open=!1);}},{key:"connectedCallback",value:function connectedCallback(){_superPropGet(h,"connectedCallback",this,3)([]);}},{key:"updated",value:function updated(t){_superPropGet(h,"updated",this,3)([t]),t.has("open")&&this.autoClose&&(this.open?(a(this.updateComplete,this.shadowRoot,this.value),document.addEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.addEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0)):(document.removeEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.removeEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0)));}},{key:"disconnectedCallback",value:function disconnectedCallback(){_superPropGet(h,"disconnectedCallback",this,3)([]),document.removeEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.removeEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0);}},{key:"handleClick",value:function handleClick(){this.open=!0;}},{key:"render",value:function render(){var t=(this.autoClose?c(this.value,this.maxPlaceholderLength):this.value)||this.placeholder;return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"inline__edit--label\" part=\"label\">","</div>\n      ","\n    "])),this.label,this.open?i(_templateObject2||(_templateObject2=_taggedTemplateLiteral([" <slot class=\"inline__edit--open--container\" part=\"base\"> </slot>"]))):i(_templateObject3||(_templateObject3=_taggedTemplateLiteral([" <div class=\"inline__edit--container\" part=\"container\" @click=",">\n            ","\n          </div>"])),this.handleClick,t));}}],[{key:"styles",get:function get(){return[o];}}]);}(n));t([e({type:String,reflect:!0})],h.prototype,"label",void 0),t([e({type:String,reflect:!0})],h.prototype,"placeholder",void 0),t([e({type:Boolean,reflect:!0})],h.prototype,"open",void 0),t([e({type:String,reflect:!0})],h.prototype,"value",void 0),t([e({type:Number,attribute:"max-placeholder-length"})],h.prototype,"maxPlaceholderLength",void 0),t([e({type:Boolean,attribute:"auto-close"})],h.prototype,"autoClose",void 0),_export("N",h=t([s("nile-inline-edit")],h));}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-inline-edit.css.cjs.js","../internal/nile-element.cjs.js","./nile-inline-edit-utils.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,o,n,l,r,a,h,_templateObject,_templateObject2,_templateObject3,c;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;s=_litDecoratorsJs.customElement;},function(_nileInlineEditCssCjsJs){o=_nileInlineEditCssCjsJs.s;},function(_internalNileElementCjsJs){n=_internalNileElementCjsJs.N;},function(_nileInlineEditUtilsCjsJs){l=_nileInlineEditUtilsCjsJs.h;r=_nileInlineEditUtilsCjsJs.a;a=_nileInlineEditUtilsCjsJs.u;h=_nileInlineEditUtilsCjsJs.g;}],execute:function execute(){_export("N",c=/*#__PURE__*/function(_n){function c(){var _this;_classCallCheck(this,c);_this=_callSuper(this,c,arguments),_this.label="",_this.placeholder="",_this.open=!1,_this.value="",_this.maxPlaceholderLength=25,_this.autoClose=!1,_this.disabled=!1,_this.handleDocumentFocusInWrapper=function(t){var e=l(t,_assertThisInitialized(_this),_this.open);_this.handleCloseResult(e);},_this.handleDocumentMouseDownWrapper=function(t){var e=r(t,_assertThisInitialized(_this),_this.open);_this.handleCloseResult(e);};return _this;}_inherits(c,_n);return _createClass(c,[{key:"handleCloseResult",value:function handleCloseResult(t){t.shouldClose&&(null!==t.newValue&&(this.value=t.newValue),this.open=!1);}},{key:"connectedCallback",value:function connectedCallback(){_superPropGet(c,"connectedCallback",this,3)([]);}},{key:"updated",value:function updated(t){_superPropGet(c,"updated",this,3)([t]),t.has("open")&&this.autoClose&&(this.open?(a(this.updateComplete,this.shadowRoot,this.value),document.addEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.addEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0)):(document.removeEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.removeEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0)));}},{key:"disconnectedCallback",value:function disconnectedCallback(){_superPropGet(c,"disconnectedCallback",this,3)([]),document.removeEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.removeEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0);}},{key:"handleClick",value:function handleClick(){this.disabled||(this.open=!0);}},{key:"render",value:function render(){var t=(this.autoClose?h(this.value,this.maxPlaceholderLength):this.value)||this.placeholder;return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"inline__edit--label\" part=\"label\">","</div>\n      ","\n    "])),this.label,this.open?e(_templateObject2||(_templateObject2=_taggedTemplateLiteral([" <slot class=\"inline__edit--open--container\" part=\"base\"> </slot>"]))):e(_templateObject3||(_templateObject3=_taggedTemplateLiteral([" <div class=\"inline__edit--container\" part=\"container\" @click=",">\n            ","\n          </div>"])),this.handleClick,t));}}],[{key:"styles",get:function get(){return[o];}}]);}(n));t([i({type:String,reflect:!0})],c.prototype,"label",void 0),t([i({type:String,reflect:!0})],c.prototype,"placeholder",void 0),t([i({type:Boolean,reflect:!0})],c.prototype,"open",void 0),t([i({type:String,reflect:!0})],c.prototype,"value",void 0),t([i({type:Number,attribute:"max-placeholder-length"})],c.prototype,"maxPlaceholderLength",void 0),t([i({type:Boolean,attribute:"auto-close"})],c.prototype,"autoClose",void 0),t([i({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),_export("N",c=t([s("nile-inline-edit")],c));}};});
 //# sourceMappingURL=nile-inline-edit.cjs.js.map

package/dist/nile-inline-edit/nile-inline-edit.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-edit.cjs.js","sources":["../../../src/nile-inline-edit/nile-inline-edit.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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-inline-edit.css';\nimport NileElement from '../internal/nile-element';\nimport {\n  getDisplayValue,\n  updateSlottedElementValue,\n  handleDocumentFocusIn,\n  handleDocumentMouseDown,\n} from './nile-inline-edit-utils';\n\n/**\n * Nile inline-edit component.\n *\n * @tag nile-inline-edit\n *\n */\n@customElement('nile-inline-edit')\nexport class NileInlineEdit extends NileElement {\n  /**\n   * The styles for nile-inline-edit\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Gives the label to the Inline Edit */\n  @property({ type: String, reflect: true }) label = '';\n\n  /** Gives the Placeholder to the Inline Edit */\n  @property({ type: String, reflect: true }) placeholder = '';\n\n  /** Open prop for displaying default slot in Inline Edit */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Gives the Value to the Inline Edit */\n  @property({ type: String, reflect: true }) value = '';\n\n  /** Maximum length for the placeholder value. Values longer than this will be truncated */\n  @property({ type: Number, attribute: 'max-placeholder-length' }) maxPlaceholderLength: number = 25;\n\n  /** Enables automatic closing when focus moves outside the component or when clicking outside */\n  @property({ type: Boolean, attribute: 'auto-close' }) autoClose: boolean = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  private handleCloseResult(result: { shouldClose: boolean; newValue: string | null }) {\n    if (result.shouldClose) {\n      if (result.newValue !== null) {\n        this.value = result.newValue;\n      }\n      this.open = false;\n    }\n  }\n\n  private handleDocumentFocusInWrapper = (event: FocusEvent) => {\n    const result = handleDocumentFocusIn(event, this, this.open);\n    this.handleCloseResult(result);\n  };\n\n  private handleDocumentMouseDownWrapper = (event: MouseEvent) => {\n    const result = handleDocumentMouseDown(event, this, this.open);\n    this.handleCloseResult(result);\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    \n    if (changedProperties.has('open') && this.autoClose) {\n      if (this.open) {\n        updateSlottedElementValue(this.updateComplete, this.shadowRoot, this.value);\n        document.addEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n        document.addEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n      } else {\n        document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n        document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n  }\n\n  private handleClick() {\n    this.open = true;\n  }\n  public render(): TemplateResult {\n    // Use truncated value for display, or placeholder if empty\n    const displayValue = this.autoClose ? getDisplayValue(this.value, this.maxPlaceholderLength) : this.value;\n    const textInsideContainer = displayValue || this.placeholder;\n    return html`\n      <div class=\"inline__edit--label\" part=\"label\">${this.label}</div>\n      ${this.open\n        ? html` <slot class=\"inline__edit--open--container\" part=\"base\"> </slot>`\n        : html` <div class=\"inline__edit--container\" part=\"container\" @click=${this.handleClick}>\n            ${textInsideContainer}\n          </div>`}\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileInlineEdit;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-edit': NileInlineEdit;\n  }\n}\n"],"names":["NileInlineEdit","_n","h","constructor","this","label","placeholder","open","value","maxPlaceholderLength","autoClose","handleDocumentFocusInWrapper","event","result","handleDocumentFocusIn","handleCloseResult","handleDocumentMouseDownWrapper","handleDocumentMouseDown","_this","_inherits","_createClass","key","shouldClose","newValue","connectedCallback","super","updated","changedProperties","has","updateSlottedElementValue","updateComplete","shadowRoot","document","addEventListener","removeEventListener","disconnectedCallback","handleClick","render","textInsideContainer","getDisplayValue","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","get","styles","NileElement","__decorate","property","type","String","reflect","prototype","Boolean","Number","attribute","customElement"],"mappings":"+3HA8BaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCAUsCC,KAAAA,CAAKC,KAAG,CAAA,EAAA,CAGRD,KAAAA,CAAWE,WAAG,CAAA,EAAA,CAGbF,KAAAA,CAAIG,IAAG,CAAA,CAAA,CAAA,CAGRH,KAAAA,CAAKI,KAAG,CAAA,EAAA,CAGcJ,KAAAA,CAAoBK,oBAAW,CAAA,EAAA,CAG1CL,KAAAA,CAASM,SAAY,CAAA,CAAA,CAAA,CAoBnEN,KAAAA,CAAAO,4BAAgCC,CAAAA,SAAAA,CAAAA,CAAAA,CACtC,GAAMC,CAAAA,CAAAA,CAASC,EAAsBF,CAAOR,CAAAA,sBAAAA,CAAAA,KAAAA,EAAMA,KAAAA,CAAKG,IACvDH,CAAAA,CAAAA,KAAAA,CAAKW,kBAAkBF,CAAO,CAAA,EAAA,CAGxBT,KAAAA,CAAAY,8BAAkCJ,CAAAA,SAAAA,CAAAA,CAAAA,CACxC,GAAMC,CAAAA,CAASI,CAAAA,CAAAA,CAAwBL,gCAAaR,KAAAA,CAAKG,MACzDH,KAAAA,CAAKW,iBAAAA,CAAkBF,CAAO,CAAA,EA8CjC,QAAAK,KAAA,EA7FQC,SAAA,CAAAjB,CAAA,CAAAD,EAAA,SAAAmB,YAAA,CAAAlB,CAAA,GAAAmB,GAAA,qBAAAb,KAAA,CA+BC,SAAAO,iBAAAA,CAAkBF,GACpBA,CAAOS,CAAAA,WAAAA,GACe,OAApBT,CAAOU,CAAAA,QAAAA,GACTnB,KAAKI,KAAQK,CAAAA,CAAAA,CAAOU,UAEtBnB,IAAKG,CAAAA,IAAAA,CAAAA,CAAO,CAEf,CAAA,EAYD,GAAAc,GAAA,qBAAAb,KAAA,UAAAgB,iBAAAA,CAAAA,CACEC,CAAAA,aAAAA,CAAAA,CAAAA,iCACD,CAED,GAAAJ,GAAA,WAAAb,KAAA,UAAAkB,OAAAA,CAAQC,CACNF,CAAAA,CAAAA,aAAAA,CAAAA,CAAAA,oBAAcE,CAEVA,GAAAA,CAAAA,CAAkBC,IAAI,MAAWxB,CAAAA,EAAAA,IAAAA,CAAKM,YACpCN,IAAKG,CAAAA,IAAAA,EACPsB,EAA0BzB,IAAK0B,CAAAA,cAAAA,CAAgB1B,IAAK2B,CAAAA,UAAAA,CAAY3B,KAAKI,KACrEwB,CAAAA,CAAAA,QAAAA,CAASC,iBAAiB,SAAW7B,CAAAA,IAAAA,CAAKO,8BAA8B,CACxEqB,CAAAA,CAAAA,QAAAA,CAASC,iBAAiB,WAAa7B,CAAAA,IAAAA,CAAKY,gCAAgC,CAE5EgB,CAAAA,GAAAA,QAAAA,CAASE,oBAAoB,SAAW9B,CAAAA,IAAAA,CAAKO,8BAA8B,CAC3EqB,CAAAA,CAAAA,QAAAA,CAASE,mBAAoB,CAAA,WAAA,CAAa9B,KAAKY,8BAAgC,CAAA,CAAA,CAAA,CAAA,CAAA,CAGpF,EAED,GAAAK,GAAA,wBAAAb,KAAA,UAAA2B,oBAAAA,CAAAA,CAAAA,CACEV,aAAAA,CAAAA,CAAAA,oCACAO,QAAAA,CAASE,oBAAoB,SAAW9B,CAAAA,IAAAA,CAAKO,8BAA8B,CAC3EqB,CAAAA,CAAAA,QAAAA,CAASE,oBAAoB,WAAa9B,CAAAA,IAAAA,CAAKY,gCAAgC,CAChF,CAAA,EAEO,GAAAK,GAAA,eAAAb,KAAA,UAAA4B,WAAAA,CAAAA,CACNhC,CAAAA,IAAAA,CAAKG,MAAO,CACb,EACM,GAAAc,GAAA,UAAAb,KAAA,UAAA6B,MAAAA,CAAAA,CAEL,CAAA,GACMC,CAAAA,GADelC,IAAKM,CAAAA,SAAAA,CAAY6B,EAAgBnC,IAAKI,CAAAA,KAAAA,CAAOJ,KAAKK,oBAAwBL,CAAAA,CAAAA,IAAAA,CAAKI,QACxDJ,IAAKE,CAAAA,WAAAA,CACjD,MAAOkC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,4FACuCtC,IAAKC,CAAAA,KAAAA,CACnDD,IAAAA,CAAKG,IACHiC,CAAAA,CAAI,CAAAG,gBAAA,GAAAA,gBAAA,CAAAD,sBAAA,8EACJF,CAAI,CAAAI,gBAAA,GAAAA,gBAAA,CAAAF,sBAAA,iHAAiEtC,IAAKgC,CAAAA,WAAAA,CACtEE,CAAAA,GAGX,CAAA,KAAAjB,GAAA,UAAAwB,GAAA,CA1FM,SAAAA,IAAA,CAAWC,CAChB,MAAO,CAACA,CAAAA,CACT,EA6BO,MApC0BC,IAUSC,EAAA,CAA1CC,CAAAA,CAAS,CAAEC,IAAAA,CAAMC,OAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAmBpD,CAAAqD,CAAAA,SAAAA,CAAA,YAAA,EAGXL,CAAAA,CAAAA,CAAAA,CAAA,CAA1CC,CAAAA,CAAS,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAyBpD,EAAAqD,SAAA,CAAA,aAAA,CAAA,IAAA,EAGhBL,CAAAA,CAAAA,CAAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMI,CAAAA,OAAAA,CAASF,SAAS,CAAqBpD,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAqD,SAAA,CAAA,MAAA,CAAA,IAAA,IAGdL,CAAA,CAAA,CAA1CC,CAAS,CAAA,CAAEC,KAAMC,MAAQC,CAAAA,OAAAA,CAAAA,CAAS,CAAmBpD,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAqD,UAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAGWL,CAAA,CAAA,CAAhEC,EAAS,CAAEC,IAAAA,CAAMK,MAAQC,CAAAA,SAAAA,CAAW,4BAA8DxD,CAAAqD,CAAAA,SAAAA,CAAA,sBAAA,CAAA,IAAA,EAAA,CAAA,CAG7CL,EAAA,CAArDC,CAAAA,CAAS,CAAEC,IAAAA,CAAMI,QAASE,SAAW,CAAA,YAAA,CAAA,CAAA,CAAA,CAA2CxD,CAAAqD,CAAAA,SAAAA,CAAA,gBAAA,EAzBtErD,CAAAA,CAAAA,OAAAA,KAAAA,CAAAA,CAAcgD,EAAA,CAD1BS,CAAAA,CAAc,qBACFzD"}
+{"version":3,"file":"nile-inline-edit.cjs.js","sources":["../../../src/nile-inline-edit/nile-inline-edit.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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-inline-edit.css';\nimport NileElement from '../internal/nile-element';\nimport {\n  getDisplayValue,\n  updateSlottedElementValue,\n  handleDocumentFocusIn,\n  handleDocumentMouseDown,\n} from './nile-inline-edit-utils';\n\n/**\n * Nile inline-edit component.\n *\n * @tag nile-inline-edit\n *\n */\n@customElement('nile-inline-edit')\nexport class NileInlineEdit extends NileElement {\n  /**\n   * The styles for nile-inline-edit\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Gives the label to the Inline Edit */\n  @property({ type: String, reflect: true }) label = '';\n\n  /** Gives the Placeholder to the Inline Edit */\n  @property({ type: String, reflect: true }) placeholder = '';\n\n  /** Open prop for displaying default slot in Inline Edit */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Gives the Value to the Inline Edit */\n  @property({ type: String, reflect: true }) value = '';\n\n  /** Maximum length for the placeholder value. Values longer than this will be truncated */\n  @property({ type: Number, attribute: 'max-placeholder-length' }) maxPlaceholderLength: number = 25;\n\n  /** Enables automatic closing when focus moves outside the component or when clicking outside */\n  @property({ type: Boolean, attribute: 'auto-close' }) autoClose: boolean = false;\n\n  /** Disables the inline edit, preventing it from being opened */\n  @property({ type: Boolean, reflect: true}) disabled: boolean = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  private handleCloseResult(result: { shouldClose: boolean; newValue: string | null }) {\n    if (result.shouldClose) {\n      if (result.newValue !== null) {\n        this.value = result.newValue;\n      }\n      this.open = false;\n    }\n  }\n\n  private handleDocumentFocusInWrapper = (event: FocusEvent) => {\n    const result = handleDocumentFocusIn(event, this, this.open);\n    this.handleCloseResult(result);\n  };\n\n  private handleDocumentMouseDownWrapper = (event: MouseEvent) => {\n    const result = handleDocumentMouseDown(event, this, this.open);\n    this.handleCloseResult(result);\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    \n    if (changedProperties.has('open') && this.autoClose) {\n      if (this.open) {\n        updateSlottedElementValue(this.updateComplete, this.shadowRoot, this.value);\n        document.addEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n        document.addEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n      } else {\n        document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n        document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.open = true;\n  }\n  public render(): TemplateResult {\n    // Use truncated value for display, or placeholder if empty\n    const displayValue = this.autoClose ? getDisplayValue(this.value, this.maxPlaceholderLength) : this.value;\n    const textInsideContainer = displayValue || this.placeholder;\n    return html`\n      <div class=\"inline__edit--label\" part=\"label\">${this.label}</div>\n      ${this.open\n        ? html` <slot class=\"inline__edit--open--container\" part=\"base\"> </slot>`\n        : html` <div class=\"inline__edit--container\" part=\"container\" @click=${this.handleClick}>\n            ${textInsideContainer}\n          </div>`}\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileInlineEdit;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-edit': NileInlineEdit;\n  }\n}\n"],"names":["NileInlineEdit","_n","c","constructor","this","label","placeholder","open","value","maxPlaceholderLength","autoClose","disabled","handleDocumentFocusInWrapper","event","result","handleDocumentFocusIn","handleCloseResult","handleDocumentMouseDownWrapper","handleDocumentMouseDown","_this","_inherits","_createClass","key","shouldClose","newValue","connectedCallback","super","updated","changedProperties","has","updateSlottedElementValue","updateComplete","shadowRoot","document","addEventListener","removeEventListener","disconnectedCallback","handleClick","render","textInsideContainer","getDisplayValue","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","get","styles","NileElement","__decorate","property","type","String","reflect","prototype","Boolean","Number","attribute","customElement"],"mappings":"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"}

package/dist/nile-inline-edit/nile-inline-edit.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",i=n(_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  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));\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-line-height-small, var(--ng-line-height-text-sm));\n    margin-bottom: var(--nile-spacing-sm);\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs, var(--ng-spacing-80));\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    height: auto;\n    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, 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-spacing-spacing-3xl, var(--ng-line-height-text-md));\n    word-wrap: break-word;\n  }\n\n  .inline__edit--container:hover {\n    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",i=n(_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  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));\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-line-height-small, var(--ng-line-height-text-sm));\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs, var(--ng-spacing-80));\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    height: auto;\n    padding-top: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-bottom: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));\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-spacing-spacing-3xl, var(--ng-line-height-text-md));\n    word-wrap: break-word;\n    width: 100%;\n  }\n\n  .inline__edit--container:hover {\n    background-color: var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));\n  }\n\n  :host([disabled]) .inline__edit--container,\n  :host([disabled]) .inline__edit--container:hover {\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  cursor: not-allowed;\n}\n\n"]))));}};});
 //# sourceMappingURL=nile-inline-edit.css.cjs.js.map

package/dist/nile-inline-edit/nile-inline-edit.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-edit.css.cjs.js","sources":["../../../src/nile-inline-edit/nile-inline-edit.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 * InlineEdit 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  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));\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-line-height-small, var(--ng-line-height-text-sm));\n    margin-bottom: var(--nile-spacing-sm);\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs, var(--ng-spacing-80));\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    height: auto;\n    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, 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-spacing-spacing-3xl, var(--ng-line-height-text-md));\n    word-wrap: break-word;\n  }\n\n  .inline__edit--container:hover {\n    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));\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-inline-edit.css.cjs.js","sources":["../../../src/nile-inline-edit/nile-inline-edit.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 * InlineEdit 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  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));\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-line-height-small, var(--ng-line-height-text-sm));\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs, var(--ng-spacing-80));\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    height: auto;\n    padding-top: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-bottom: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));\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-spacing-spacing-3xl, var(--ng-line-height-text-md));\n    word-wrap: break-word;\n    width: 100%;\n  }\n\n  .inline__edit--container:hover {\n    background-color: var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));\n  }\n\n  :host([disabled]) .inline__edit--container,\n  :host([disabled]) .inline__edit--container:hover {\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  cursor: not-allowed;\n}\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-inline-edit/nile-inline-edit.css.esm.js

@@ -13,7 +13,7 @@ import{css as n}from"lit";const i=n`
     font-style: normal;
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
     line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
-    margin-bottom: var(--nile-spacing-sm);
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .inline__edit--open--container {
@@ -28,21 +28,30 @@ import{css as n}from"lit";const i=n`
     min-width: var(--nile-width-width-xxs, var(--ng-width-80));
     min-height: var(--nile-height-40px, var(--ng-height-40px));
     height: auto;
-    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
-    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    padding-top: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding-bottom: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));
     color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-style: normal;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));
     word-wrap: break-word;
+    width: 100%;
   }
 
   .inline__edit--container:hover {
-    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
   }
+
+  :host([disabled]) .inline__edit--container,
+  :host([disabled]) .inline__edit--container:hover {
+  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+  cursor: not-allowed;
+}
+
 `;export{i as s};

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

@@ -1,6 +1,6 @@
-import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{s as o}from"./nile-inline-edit.css.esm.js";import{N as n}from"../internal/nile-element.esm.js";import{h as l,a as r,u as a,g as h}from"./nile-inline-edit-utils.esm.js";let c=class extends n{constructor(){super(...arguments),this.label="",this.placeholder="",this.open=!1,this.value="",this.maxPlaceholderLength=25,this.autoClose=!1,this.handleDocumentFocusInWrapper=t=>{const e=l(t,this,this.open);this.handleCloseResult(e)},this.handleDocumentMouseDownWrapper=t=>{const e=r(t,this,this.open);this.handleCloseResult(e)}}static get styles(){return[o]}handleCloseResult(t){t.shouldClose&&(null!==t.newValue&&(this.value=t.newValue),this.open=!1)}connectedCallback(){super.connectedCallback()}updated(t){super.updated(t),t.has("open")&&this.autoClose&&(this.open?(a(this.updateComplete,this.shadowRoot,this.value),document.addEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.addEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0)):(document.removeEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.removeEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0)))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.removeEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0)}handleClick(){this.open=!0}render(){const t=(this.autoClose?h(this.value,this.maxPlaceholderLength):this.value)||this.placeholder;return e`
+import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{s as o}from"./nile-inline-edit.css.esm.js";import{N as n}from"../internal/nile-element.esm.js";import{h as l,a as r,u as a,g as h}from"./nile-inline-edit-utils.esm.js";let c=class extends n{constructor(){super(...arguments),this.label="",this.placeholder="",this.open=!1,this.value="",this.maxPlaceholderLength=25,this.autoClose=!1,this.disabled=!1,this.handleDocumentFocusInWrapper=t=>{const e=l(t,this,this.open);this.handleCloseResult(e)},this.handleDocumentMouseDownWrapper=t=>{const e=r(t,this,this.open);this.handleCloseResult(e)}}static get styles(){return[o]}handleCloseResult(t){t.shouldClose&&(null!==t.newValue&&(this.value=t.newValue),this.open=!1)}connectedCallback(){super.connectedCallback()}updated(t){super.updated(t),t.has("open")&&this.autoClose&&(this.open?(a(this.updateComplete,this.shadowRoot,this.value),document.addEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.addEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0)):(document.removeEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.removeEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0)))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("focusin",this.handleDocumentFocusInWrapper,!0),document.removeEventListener("mousedown",this.handleDocumentMouseDownWrapper,!0)}handleClick(){this.disabled||(this.open=!0)}render(){const t=(this.autoClose?h(this.value,this.maxPlaceholderLength):this.value)||this.placeholder;return e`
       <div class="inline__edit--label" part="label">${this.label}</div>
       ${this.open?e` <slot class="inline__edit--open--container" part="base"> </slot>`:e` <div class="inline__edit--container" part="container" @click=${this.handleClick}>
             ${t}
           </div>`}
-    `}};t([i({type:String,reflect:!0})],c.prototype,"label",void 0),t([i({type:String,reflect:!0})],c.prototype,"placeholder",void 0),t([i({type:Boolean,reflect:!0})],c.prototype,"open",void 0),t([i({type:String,reflect:!0})],c.prototype,"value",void 0),t([i({type:Number,attribute:"max-placeholder-length"})],c.prototype,"maxPlaceholderLength",void 0),t([i({type:Boolean,attribute:"auto-close"})],c.prototype,"autoClose",void 0),c=t([s("nile-inline-edit")],c);export{c as N};
+    `}};t([i({type:String,reflect:!0})],c.prototype,"label",void 0),t([i({type:String,reflect:!0})],c.prototype,"placeholder",void 0),t([i({type:Boolean,reflect:!0})],c.prototype,"open",void 0),t([i({type:String,reflect:!0})],c.prototype,"value",void 0),t([i({type:Number,attribute:"max-placeholder-length"})],c.prototype,"maxPlaceholderLength",void 0),t([i({type:Boolean,attribute:"auto-close"})],c.prototype,"autoClose",void 0),t([i({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),c=t([s("nile-inline-edit")],c);export{c as N};

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-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-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-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\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-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  }\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-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-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-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-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-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\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-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  }\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-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-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

@@ -182,7 +182,7 @@ import{css as r}from"lit";const o=r`
   }
 
   .input--standard.input--disabled {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
     border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));
     /* opacity: 0.5; */
     cursor: not-allowed;
@@ -193,7 +193,8 @@ import{css as r}from"lit";const o=r`
   }
 
   .input--standard.input--disabled .input__control::placeholder {
-    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    background:var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
   }
 
   .input--standard.input--warning {
@@ -249,7 +250,6 @@ import{css as r}from"lit";const o=r`
 
   .input--filled.input--disabled {
     background-color: var(--nile-colors-dark-100);
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -323,7 +323,7 @@ import{css as r}from"lit";const o=r`
   .input__control::placeholder {
     color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
     user-select: none;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .input:hover:not(.input--disabled) .input__control {

package/dist/nile-link/nile-link.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-link.css.cjs.js","../slot.cjs.js","lit/directives/if-defined.js","lit/directives/class-map.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var s,i,t,e,l,r,o,a,n,h,_templateObject,c;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){s=_tslib.__decorate;},function(_lit){i=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.state;e=_litDecoratorsJs.property;l=_litDecoratorsJs.customElement;},function(_nileLinkCssCjsJs){r=_nileLinkCssCjsJs.s;},function(_slotCjsJs){o=_slotCjsJs.H;},function(_litDirectivesIfDefinedJs){a=_litDirectivesIfDefinedJs.ifDefined;},function(_litDirectivesClassMapJs){n=_litDirectivesClassMapJs.classMap;},function(_internalNileElementCjsJs){h=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",c=/*#__PURE__*/function(_h){function c(){var _this;_classCallCheck(this,c);_this=_callSuper(this,c,arguments),_this.hasSlotController=new o(_assertThisInitialized(_this),"[default]","prefix","suffix"),_this.hasFocus=!1,_this.disabled=!1,_this.button=!1;return _this;}_inherits(c,_h);return _createClass(c,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(c,"connectedCallback",this,3)([]),this.handleHostClick=this.handleHostClick.bind(this),this.addEventListener("click",this.handleHostClick),this.emit("nile-init");}},{key:"disconnectedCallback",value:function disconnectedCallback(){_superPropGet(c,"disconnectedCallback",this,3)([]),this.removeEventListener("click",this.handleHostClick),this.emit("nile-destroy");}},{key:"handleHostClick",value:function handleHostClick(s){this.disabled&&(s.preventDefault(),s.stopImmediatePropagation(),s.stopPropagation());}},{key:"handleBlur",value:function handleBlur(){this.hasFocus=!1,this.emit("nile-blur");}},{key:"handleFocus",value:function handleFocus(){this.hasFocus=!0,this.emit("nile-focus");}},{key:"handleClick",value:function handleClick(s){this.disabled&&s.stopPropagation();}},{key:"render",value:function render(){return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <a\n        part=\"base\"\n        href=\"","\"\n        class=","\n        .disabled=","\n        title=","\n        aria-disabled=","\n        tabindex=","\n        @blur=","\n        @focus=","\n        @click=","\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"link__prefix\"></slot>\n        <slot part=\"label\" class=\"link__label\"></slot>\n        <slot name=\"suffix\" part=\"suffix\" class=\"link__suffix\"></slot>\n      </a>\n    "])),a(this.href),n({link:!0,"link--disabled":this.disabled,link__button:this.button}),this.disabled,this.title,this.disabled?"true":"false",this.disabled?"-1":"0",this.handleBlur,this.handleFocus,this.handleClick);}}],[{key:"styles",get:function get(){return[r];}}]);}(h));s([t()],c.prototype,"hasFocus",void 0),s([e({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),s([e({type:Boolean})],c.prototype,"button",void 0),s([e({type:String})],c.prototype,"href",void 0),_export("N",c=s([l("nile-link")],c));}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-link.css.cjs.js","../slot.cjs.js","lit/directives/if-defined.js","lit/directives/class-map.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var i,s,t,e,l,r,o,a,n,h,_templateObject,c;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){i=_tslib.__decorate;},function(_lit){s=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.state;e=_litDecoratorsJs.property;l=_litDecoratorsJs.customElement;},function(_nileLinkCssCjsJs){r=_nileLinkCssCjsJs.s;},function(_slotCjsJs){o=_slotCjsJs.H;},function(_litDirectivesIfDefinedJs){a=_litDirectivesIfDefinedJs.ifDefined;},function(_litDirectivesClassMapJs){n=_litDirectivesClassMapJs.classMap;},function(_internalNileElementCjsJs){h=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",c=/*#__PURE__*/function(_h){function c(){var _this;_classCallCheck(this,c);_this=_callSuper(this,c,arguments),_this.hasSlotController=new o(_assertThisInitialized(_this),"[default]","prefix","suffix"),_this.hasFocus=!1,_this.disabled=!1,_this.button=!1;return _this;}_inherits(c,_h);return _createClass(c,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(c,"connectedCallback",this,3)([]),this.handleHostClick=this.handleHostClick.bind(this),this.addEventListener("click",this.handleHostClick),this.emit("nile-init");}},{key:"disconnectedCallback",value:function disconnectedCallback(){_superPropGet(c,"disconnectedCallback",this,3)([]),this.removeEventListener("click",this.handleHostClick),this.emit("nile-destroy");}},{key:"handleHostClick",value:function handleHostClick(i){this.disabled&&(i.preventDefault(),i.stopImmediatePropagation(),i.stopPropagation());}},{key:"handleBlur",value:function handleBlur(){this.hasFocus=!1,this.emit("nile-blur");}},{key:"handleFocus",value:function handleFocus(){this.hasFocus=!0,this.emit("nile-focus");}},{key:"handleClick",value:function handleClick(i){if(this.disabled)return i.preventDefault(),void i.stopPropagation();}},{key:"render",value:function render(){return s(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <a\n        part=\"base\"\n        href=\"","\"\n        class=","\n        .disabled=","\n        title=","\n        aria-disabled=","\n        tabindex=","\n        @blur=","\n        @focus=","\n        @click=","\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"link__prefix\"></slot>\n        <slot part=\"label\" class=\"link__label\"></slot>\n        <slot name=\"suffix\" part=\"suffix\" class=\"link__suffix\"></slot>\n      </a>\n    "])),a(this.href),n({link:!0,"link--disabled":this.disabled,link__button:this.button}),this.disabled,this.title,this.disabled?"true":"false",this.disabled?"-1":"0",this.handleBlur,this.handleFocus,this.handleClick);}}],[{key:"styles",get:function get(){return[r];}}]);}(h));i([t()],c.prototype,"hasFocus",void 0),i([e({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),i([e({type:Boolean})],c.prototype,"button",void 0),i([e({type:String})],c.prototype,"href",void 0),_export("N",c=i([l("nile-link")],c));}};});
 //# sourceMappingURL=nile-link.cjs.js.map

package/dist/nile-link/nile-link.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-link.cjs.js","sources":["../../../src/nile-link/nile-link.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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-link.css';\nimport { HasSlotController } from '../slot';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\n\n/**\n * Nile icon component.\n *\n * @tag nile-link\n *\n */\n@customElement('nile-link')\nexport class NileLink extends NileElement {\n  /**\n   * The styles for Link\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    '[default]',\n    'prefix',\n    'suffix'\n  );\n\n  @state() private hasFocus = false;\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: Boolean }) button = false;\n\n  @property({ type: String }) href:string;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleHostClick = this.handleHostClick.bind(this);\n    this.addEventListener('click', this.handleHostClick);\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleHostClick);\n    this.emit('nile-destroy');\n  }\n\n  private handleHostClick(event: MouseEvent) {\n    // Prevent the click event from being emitted when the button is disabled\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      event.stopPropagation();\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.stopPropagation();\n      return;\n    }\n  }\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <a\n        part=\"base\"\n        href=\"${ifDefined(this.href)}\"\n        class=${classMap({\n          'link': true,\n          'link--disabled': this.disabled,\n          'link__button': this.button,\n        })}\n        .disabled=${this.disabled}\n        title=${\n          this\n            .title /* An empty title prevents browser validation tooltips from appearing on hover */\n        }\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @click=${this.handleClick}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"link__prefix\"></slot>\n        <slot part=\"label\" class=\"link__label\"></slot>\n        <slot name=\"suffix\" part=\"suffix\" class=\"link__suffix\"></slot>\n      </a>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileLink;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n     'nile-link': NileLink;\n   }\n }\n"],"names":["NileLink","c","constructor","this","hasSlotController","HasSlotController","hasFocus","disabled","button","_this","_inherits","_h","_createClass","key","value","connectedCallback","super","handleHostClick","bind","addEventListener","emit","disconnectedCallback","removeEventListener","event","preventDefault","stopImmediatePropagation","stopPropagation","handleBlur","handleFocus","handleClick","e","render","html","_templateObject","_taggedTemplateLiteral","ifDefined","href","classMap","link","link__button","title","__decorate","get","styles","NileElement","state","prototype","property","type","Boolean","reflect","String","customElement"],"mappings":"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"}
+{"version":3,"file":"nile-link.cjs.js","sources":["../../../src/nile-link/nile-link.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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-link.css';\nimport { HasSlotController } from '../slot';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\n\n/**\n * Nile icon component.\n *\n * @tag nile-link\n *\n */\n@customElement('nile-link')\nexport class NileLink extends NileElement {\n  /**\n   * The styles for Link\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    '[default]',\n    'prefix',\n    'suffix'\n  );\n\n  @state() private hasFocus = false;\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: Boolean }) button = false;\n\n  @property({ type: String }) href:string;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleHostClick = this.handleHostClick.bind(this);\n    this.addEventListener('click', this.handleHostClick);\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleHostClick);\n    this.emit('nile-destroy');\n  }\n\n  private handleHostClick(event: MouseEvent) {\n    // Prevent the click event from being emitted when the button is disabled\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      event.stopPropagation();\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n  }\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <a\n        part=\"base\"\n        href=\"${ifDefined(this.href)}\"\n        class=${classMap({\n          'link': true,\n          'link--disabled': this.disabled,\n          'link__button': this.button,\n        })}\n        .disabled=${this.disabled}\n        title=${\n          this\n            .title /* An empty title prevents browser validation tooltips from appearing on hover */\n        }\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @click=${this.handleClick}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"link__prefix\"></slot>\n        <slot part=\"label\" class=\"link__label\"></slot>\n        <slot name=\"suffix\" part=\"suffix\" class=\"link__suffix\"></slot>\n      </a>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileLink;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n     'nile-link': NileLink;\n   }\n }\n"],"names":["NileLink","_h","c","this","hasSlotController","HasSlotController","hasFocus","disabled","button","_this","_inherits","_createClass","key","value","connectedCallback","super","handleHostClick","bind","addEventListener","emit","disconnectedCallback","removeEventListener","event","preventDefault","stopImmediatePropagation","stopPropagation","handleBlur","handleFocus","handleClick","e","render","html","_templateObject","_taggedTemplateLiteral","ifDefined","href","classMap","link","link__button","title","__decorate","get","styles","NileElement","state","prototype","property","type","Boolean","reflect","String","customElement"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var n,_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){n=_lit.css;}],execute:function execute(){_export("s",r=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\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  .link {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    user-select: none;\n    white-space: nowrap;\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n    height: 38px;\n    box-sizing: border-box;\n    cursor: pointer;\n    text-decoration:none;\n  }\n\n  .link__label {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    text-align: center;\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-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .link--disabled {\n    color: var(--nile-colors-primary-500, var(--ng-colors-text-tertiary-600));\n    cursor: not-allowed;\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  .link.link--disabled:not(.link__button) .link__label {\n    color: var(--nile-colors-primary-500, var(--ng-colors-fg-disabled));\n  }\n\n  \n  .link:not(.link--disabled):not(.link__button):hover ,\n  .link:not(.link--disabled):not(.link__button):hover .link__label {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-hover));\n    text-decoration: var(--nile-text-decoration-none, var(--ng-text-decoration-underline));\n  }\n\n  .link:not(.link--disabled):not(.link__button):active,\n  .link:not(.link--disabled):not(.link__button):active .link__label {\n    color: var(--nile-colors-primary-900, var(--ng-colors-text-brand-secondary-hover));\n  }\n\n  .link__button:hover {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-tertiary-600));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n  }\n\n  .link__button.link--disabled .link__label {\n    color: var(--nile-colors-primary-700, var(--ng-colors-fg-disabled));\n  }\n\n  .link__button.link--disabled:hover,\n  .link__button.link--disabled:focus {\n    color: var(--nile-colors-primary-500, var(--ng-colors-fg-disabled));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n  }\n\n  .link__button:active {\n    color: var(--nile-colors-primary-100, var(--ng-colors-text-brand-tertiary-600));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    background: var(--nile-colors-primary-100, var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n  .link__button:focus {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;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",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\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  .link {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    user-select: none;\n    white-space: nowrap;\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n    height: 38px;\n    box-sizing: border-box;\n    cursor: pointer;\n    text-decoration:none;\n  }\n\n  .link__label {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    text-align: center;\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-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .link--disabled {\n    color: var(--nile-colors-primary-500, var(--ng-colors-text-tertiary-600));\n    cursor: not-allowed;\n    \n  }\n\n  .link.link--disabled:not(.link__button) .link__label {\n    color: var(--nile-colors-primary-500, var(--ng-colors-fg-disabled));\n  }\n\n  \n  .link:not(.link--disabled):not(.link__button):hover ,\n  .link:not(.link--disabled):not(.link__button):hover .link__label {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-hover));\n    text-decoration: var(--nile-text-decoration-none, var(--ng-text-decoration-underline));\n  }\n\n  .link:not(.link--disabled):not(.link__button):active,\n  .link:not(.link--disabled):not(.link__button):active .link__label {\n    color: var(--nile-colors-primary-900, var(--ng-colors-text-brand-secondary-hover));\n  }\n\n  .link__button:hover {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-tertiary-600));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n  }\n\n  .link__button.link--disabled .link__label {\n    color: var(--nile-colors-primary-700, var(--ng-colors-fg-disabled));\n  }\n\n  .link__button.link--disabled:hover,\n  .link__button.link--disabled:focus {\n    color: var(--nile-colors-primary-500, var(--ng-colors-fg-disabled));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n  }\n\n  .link__button:active {\n    color: var(--nile-colors-primary-100, var(--ng-colors-text-brand-tertiary-600));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    background: var(--nile-colors-primary-100, var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n  .link__button:focus {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n"]))));}};});
 //# sourceMappingURL=nile-link.css.cjs.js.map