@aquera/nile-elements 1.5.4 → 1.5.6

package/dist/nile-inline-sidebar/nile-inline-sidebar.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-sidebar.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,n,l,o,a,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,r;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.state;n=_litDecoratorsJs.query;l=_litDecoratorsJs.customElement;},function(_nileInlineSidebarCssCjsJs){o=_nileInlineSidebarCssCjsJs.s;},function(_internalNileElementCjsJs){a=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",r=/*#__PURE__*/function(_a){function r(){var _this;_classCallCheck(this,r);_this=_callSuper(this,r,arguments),_this.collapsed=!1,_this.fixed=!1,_this.showTooltip=!1,_this.activeIndex=-1,_this.handleItemSelect=function(t){var e=t.detail.item,i=_this.sidebarItems.indexOf(e);_this.sidebarItems.forEach(function(t,e){return t.active=e===i;}),_this.activeIndex=i,_this.dispatchEvent(new CustomEvent("nile-change",{detail:{selectedItem:e,index:i},bubbles:!0,composed:!0})),_this.requestUpdate();};return _this;}_inherits(r,_a);return _createClass(r,[{key:"sidebarItems",get:function get(){if(!this.defaultSlot)return[];return this.defaultSlot.assignedElements({flatten:!0}).flatMap(function(t){return"nile-inline-sidebar-item"===t.tagName.toLowerCase()?[t]:Array.from(t.querySelectorAll("nile-inline-sidebar-item"));});}},{key:"connectedCallback",value:function connectedCallback(){var _this2=this;_superPropGet(r,"connectedCallback",this,3)([]),this.addEventListener("nile-click",this.handleItemSelect),this.mutationObserver=new MutationObserver(function(){return _this2.syncActiveFromItems();});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this$mutationObserve;_superPropGet(r,"disconnectedCallback",this,3)([]),(_this$mutationObserve=this.mutationObserver)!==null&&_this$mutationObserve!==void 0&&_this$mutationObserve.disconnect(),this.removeEventListener("nile-click",this.handleItemSelect);}},{key:"firstUpdated",value:function firstUpdated(){this.observeSidebarItems(),this.syncActiveFromItems(),this.fixed&&(this.collapsed=!1);}},{key:"observeSidebarItems",value:function observeSidebarItems(){var _this$sidebarItems,_this3=this;((_this$sidebarItems=this.sidebarItems)===null||_this$sidebarItems===void 0?void 0:_this$sidebarItems.length)&&this.mutationObserver&&this.sidebarItems.forEach(function(t){return _this3.mutationObserver.observe(t,{attributes:!0,attributeFilter:["active"]});});}},{key:"syncActiveFromItems",value:function syncActiveFromItems(){var _this$sidebarItems2;if(!((_this$sidebarItems2=this.sidebarItems)!==null&&_this$sidebarItems2!==void 0&&_this$sidebarItems2.length))return;var t=this.sidebarItems.findIndex(function(t){return t.hasAttribute("active");});-1!==t&&t!==this.activeIndex&&(this.activeIndex=t,this.requestUpdate());}},{key:"toggleCollapse",value:function toggleCollapse(){this.fixed||(this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("nile-toggle",{detail:{collapsed:this.collapsed},bubbles:!0,composed:!0})));}},{key:"handleMenuItemClick",value:function handleMenuItemClick(t){var _e$textContent;var e=this.sidebarItems[t];if(!e||e.hasAttribute("disabled"))return;this.sidebarItems.forEach(function(e,i){return e.active=i===t;}),this.activeIndex=t;var i=((_e$textContent=e.textContent)===null||_e$textContent===void 0?void 0:_e$textContent.trim())||"",s=e.href;this.dispatchEvent(new CustomEvent("nile-click",{detail:{item:e,href:s,text:i},bubbles:!0,composed:!0})),s&&(window.location.href=s),this.requestUpdate();}},{key:"menuItemsTemplate",get:function get(){var _this$sidebarItems3,_this4=this;return(_this$sidebarItems3=this.sidebarItems)!==null&&_this$sidebarItems3!==void 0&&_this$sidebarItems3.length?this.sidebarItems.map(function(t,i){var _t$textContent;var s=t.tooltip,n=t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight,l=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n        <nile-side-bar-action-menu-item\n          ?disabled=","\n          ?active=","\n          @click=","\n        >\n          ","\n        </nile-side-bar-action-menu-item>\n      "])),t.hasAttribute("disabled"),_this4.activeIndex===i,function(){return _this4.handleMenuItemClick(i);},t.textContent);return s||n?e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n            <nile-tooltip\n              content=","\n              hoist\n              placement=\"right\"\n            >\n              ","\n            </nile-tooltip>\n          "])),((_t$textContent=t.textContent)===null||_t$textContent===void 0?void 0:_t$textContent.trim())||"",l):l;}):null;}},{key:"render",value:function render(){var _this5=this;return e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n      <div class=\"sidebar\" part=\"base\">\n        <div class=\"sidebar-header\" part=\"header\">\n          ","\n        </div>\n\n        <nav\n          class=\"sidebar-nav\"\n          style=","\n          part=\"nav-items\"\n        >\n          <slot\n            @slotchange=","\n          ></slot>\n        </nav>\n      </div>\n    "])),this.fixed?null:this.collapsed?e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n                  <nile-side-bar-action\n                    class=\"toggle-action\"\n                    placement=\"bottom-start\"\n                    hoist\n                    open\n                    triggerDropdown=\"hover\"\n                  >\n                    <nile-button\n                      slot=\"trigger\"\n                      class=\"toggle-btn\"\n                      variant=\"tertiary\"\n                      @click=","\n                    >\n                      <nile-icon name=\"menu_close\"></nile-icon>\n                    </nile-button>\n                    <nile-side-bar-action-menu>\n                      ","\n                    </nile-side-bar-action-menu>\n                  </nile-side-bar-action>\n                "])),this.toggleCollapse,this.menuItemsTemplate):e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n                  <nile-button\n                    class=\"toggle-btn\"\n                    variant=\"tertiary\"\n                    @click=","\n                  >\n                    <nile-icon name=\"menu_open\"></nile-icon>\n                  </nile-button>\n                "])),this.toggleCollapse),this.collapsed?"display:none;":"",function(){_this5.requestUpdate(),_this5.observeSidebarItems(),_this5.syncActiveFromItems();});}}],[{key:"styles",get:function get(){return[o];}}]);}(a));t([i({type:Boolean,reflect:!0})],r.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],r.prototype,"fixed",void 0),t([i({type:Boolean,reflect:!0})],r.prototype,"showTooltip",void 0),t([s()],r.prototype,"activeIndex",void 0),t([n("slot")],r.prototype,"defaultSlot",void 0),_export("N",r=t([l("nile-inline-sidebar")],r));}};});
+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-sidebar.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,n,l,o,a,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,r;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.state;n=_litDecoratorsJs.query;l=_litDecoratorsJs.customElement;},function(_nileInlineSidebarCssCjsJs){o=_nileInlineSidebarCssCjsJs.s;},function(_internalNileElementCjsJs){a=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",r=/*#__PURE__*/function(_a){function r(){var _this;_classCallCheck(this,r);_this=_callSuper(this,r,arguments),_this.collapsed=!1,_this.fixed=!1,_this.showTooltip=!1,_this.placement="left",_this.activeIndex=-1,_this.handleKeyDown=function(t){if(_this.collapsed)return;var e=_this.focusableItems;if(!e.length)return;var i=_this.sidebarItems.find(function(t){var _this$shadowRoot;return t===document.activeElement||t===((_this$shadowRoot=_this.shadowRoot)===null||_this$shadowRoot===void 0?void 0:_this$shadowRoot.activeElement)||t.matches(":focus-within");}),s=i?e.indexOf(i):-1;var n=null;switch(t.key){case"ArrowDown":n=s<e.length-1?s+1:0;break;case"ArrowUp":n=s>0?s-1:e.length-1;break;case"Home":n=0;break;case"End":n=e.length-1;break;default:return;}t.preventDefault(),null!==n&&e[n]&&_this.focusItem(e[n]);},_this.handleItemSelect=function(t){var e=t.detail.item,i=_this.sidebarItems.indexOf(e);_this.sidebarItems.forEach(function(t,e){return t.active=e===i;}),_this.activeIndex=i,_this.updateTabIndices(),_this.dispatchEvent(new CustomEvent("nile-change",{detail:{selectedItem:e,index:i},bubbles:!0,composed:!0})),_this.requestUpdate();};return _this;}_inherits(r,_a);return _createClass(r,[{key:"sidebarItems",get:function get(){if(!this.defaultSlot)return[];return this.defaultSlot.assignedElements({flatten:!0}).flatMap(function(t){return"nile-inline-sidebar-item"===t.tagName.toLowerCase()?[t]:Array.from(t.querySelectorAll("nile-inline-sidebar-item"));});}},{key:"connectedCallback",value:function connectedCallback(){var _this2=this;_superPropGet(r,"connectedCallback",this,3)([]),this.addEventListener("nile-click",this.handleItemSelect),this.addEventListener("keydown",this.handleKeyDown),this.mutationObserver=new MutationObserver(function(){return _this2.syncActiveFromItems();});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this$mutationObserve;_superPropGet(r,"disconnectedCallback",this,3)([]),(_this$mutationObserve=this.mutationObserver)!==null&&_this$mutationObserve!==void 0&&_this$mutationObserve.disconnect(),this.removeEventListener("nile-click",this.handleItemSelect),this.removeEventListener("keydown",this.handleKeyDown);}},{key:"firstUpdated",value:function firstUpdated(){this.observeSidebarItems(),this.syncActiveFromItems(),this.fixed&&(this.collapsed=!1);}},{key:"observeSidebarItems",value:function observeSidebarItems(){var _this$sidebarItems,_this3=this;((_this$sidebarItems=this.sidebarItems)===null||_this$sidebarItems===void 0?void 0:_this$sidebarItems.length)&&this.mutationObserver&&this.sidebarItems.forEach(function(t){return _this3.mutationObserver.observe(t,{attributes:!0,attributeFilter:["active"]});});}},{key:"syncActiveFromItems",value:function syncActiveFromItems(){var _this$sidebarItems2;if(!((_this$sidebarItems2=this.sidebarItems)!==null&&_this$sidebarItems2!==void 0&&_this$sidebarItems2.length))return;var t=this.sidebarItems.findIndex(function(t){return t.hasAttribute("active");});-1!==t&&t!==this.activeIndex&&(this.activeIndex=t,this.requestUpdate()),this.updateTabIndices();}},{key:"focusableItems",get:function get(){return this.sidebarItems.filter(function(t){return!t.hasAttribute("disabled");});}},{key:"updateTabIndices",value:function updateTabIndices(){var _this4=this;var t=this.sidebarItems;if(!t.length)return;var e=this.activeIndex>=0?t[this.activeIndex]:null;t.forEach(function(t){t.hasAttribute("disabled")?t.setAttribute("tabindex","-1"):t===e?t.setAttribute("tabindex","0"):e||t!==_this4.focusableItems[0]?t.setAttribute("tabindex","-1"):t.setAttribute("tabindex","0");});}},{key:"focusItem",value:function focusItem(t){this.sidebarItems.forEach(function(t){return t.setAttribute("tabindex","-1");}),t.setAttribute("tabindex","0"),t.focus();}},{key:"toggleCollapse",value:function toggleCollapse(){this.fixed||(this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("nile-toggle",{detail:{collapsed:this.collapsed},bubbles:!0,composed:!0})));}},{key:"handleMenuItemClick",value:function handleMenuItemClick(t){var _e$textContent;var e=this.sidebarItems[t];if(!e||e.hasAttribute("disabled"))return;this.sidebarItems.forEach(function(e,i){return e.active=i===t;}),this.activeIndex=t;var i=((_e$textContent=e.textContent)===null||_e$textContent===void 0?void 0:_e$textContent.trim())||"",s=e.href;this.dispatchEvent(new CustomEvent("nile-click",{detail:{item:e,href:s,text:i},bubbles:!0,composed:!0})),s&&(window.location.href=s),this.requestUpdate();}},{key:"menuItemsTemplate",get:function get(){var _this$sidebarItems3,_this5=this;if(!((_this$sidebarItems3=this.sidebarItems)!==null&&_this$sidebarItems3!==void 0&&_this$sidebarItems3.length))return null;var t="right"===this.placement?"left":"right";return this.sidebarItems.map(function(i,s){var _i$textContent;var n=i.tooltip,l=i.scrollWidth>i.clientWidth||i.scrollHeight>i.clientHeight,o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n        <nile-side-bar-action-menu-item\n          ?disabled=","\n          ?active=","\n          @click=","\n        >\n          ","\n        </nile-side-bar-action-menu-item>\n      "])),i.hasAttribute("disabled"),_this5.activeIndex===s,function(){return _this5.handleMenuItemClick(s);},i.textContent);return n||l?e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n            <nile-tooltip\n              content=","\n              hoist\n              placement=","\n            >\n              ","\n            </nile-tooltip>\n          "])),((_i$textContent=i.textContent)===null||_i$textContent===void 0?void 0:_i$textContent.trim())||"",t,o):o;});}},{key:"render",value:function render(){var _this6=this;var t="right"===this.placement,i=t?"menu_open":"menu_close",s=t?"menu_close":"menu_open",n=t?"bottom-end":"bottom-start";return e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n      <div class=\"sidebar\" part=\"base\">\n        <div class=\"sidebar-header\" part=\"header\">\n          ","\n        </div>\n\n        <nav\n          class=\"sidebar-nav\"\n          role=\"navigation\"\n          aria-label=\"Sidebar\"\n          style=","\n          part=\"nav-items\"\n        >\n          <slot\n            @slotchange=","\n          ></slot>\n        </nav>\n      </div>\n    "])),this.fixed?null:this.collapsed?e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n                  <nile-side-bar-action\n                    class=\"toggle-action\"\n                    placement=","\n                    hoist\n                    open\n                    triggerDropdown=\"hover\"\n                  >\n                    <nile-button\n                      slot=\"trigger\"\n                      class=\"toggle-btn\"\n                      variant=\"tertiary\"\n                      @click=","\n                    >\n                      <nile-icon name=","></nile-icon>\n                    </nile-button>\n                    <nile-side-bar-action-menu>\n                      ","\n                    </nile-side-bar-action-menu>\n                  </nile-side-bar-action>\n                "])),n,this.toggleCollapse,i,this.menuItemsTemplate):e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n                  <nile-button\n                    class=\"toggle-btn\"\n                    variant=\"tertiary\"\n                    @click=","\n                  >\n                    <nile-icon name=","></nile-icon>\n                  </nile-button>\n                "])),this.toggleCollapse,s),this.collapsed?"display:none;":"",function(){_this6.requestUpdate(),_this6.observeSidebarItems(),_this6.syncActiveFromItems();});}}],[{key:"styles",get:function get(){return[o];}}]);}(a));t([i({type:Boolean,reflect:!0})],r.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],r.prototype,"fixed",void 0),t([i({type:Boolean,reflect:!0})],r.prototype,"showTooltip",void 0),t([i({type:String,reflect:!0})],r.prototype,"placement",void 0),t([s()],r.prototype,"activeIndex",void 0),t([n("slot")],r.prototype,"defaultSlot",void 0),_export("N",r=t([l("nile-inline-sidebar")],r));}};});
 //# sourceMappingURL=nile-inline-sidebar.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-sidebar.cjs.js","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-inline-sidebar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline sidebar component.\n *\n * @tag nile-inline-sidebar\n */\n@customElement('nile-inline-sidebar')\nexport class NileInlineSidebar extends NileElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) fixed = false;\n\n  @property({ type: Boolean, reflect: true }) showTooltip = false;\n\n  @state() private activeIndex: number = -1;\n\n  @query('slot') private defaultSlot!: HTMLSlotElement;\n\n  private mutationObserver?: MutationObserver;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private get sidebarItems(): HTMLElement[] {\n    if (!this.defaultSlot) return [];\n    const assigned = this.defaultSlot.assignedElements({ flatten: true });\n    const items = assigned.flatMap(el =>\n      el.tagName.toLowerCase() === 'nile-inline-sidebar-item'\n        ? [el]\n        : Array.from(el.querySelectorAll('nile-inline-sidebar-item'))\n    );\n    return items as HTMLElement[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('nile-click', this.handleItemSelect);\n    this.mutationObserver = new MutationObserver(() =>\n      this.syncActiveFromItems()\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n    this.removeEventListener('nile-click', this.handleItemSelect);\n  }\n\n  firstUpdated() {\n    this.observeSidebarItems();\n    this.syncActiveFromItems();\n\n    if (this.fixed) {\n      this.collapsed = false;\n    }\n  }\n\n  private observeSidebarItems() {\n    if (!this.sidebarItems?.length || !this.mutationObserver) return;\n    this.sidebarItems.forEach(item =>\n      this.mutationObserver!.observe(item, {\n        attributes: true,\n        attributeFilter: ['active'],\n      })\n    );\n  }\n\n  private syncActiveFromItems() {\n    if (!this.sidebarItems?.length) return;\n    const activeIndex = this.sidebarItems.findIndex(item =>\n      item.hasAttribute('active')\n    );\n    if (activeIndex !== -1 && activeIndex !== this.activeIndex) {\n      this.activeIndex = activeIndex;\n      this.requestUpdate();\n    }\n  }\n\n  private handleItemSelect = (event: CustomEvent) => {\n    const selectedItem = event.detail.item as HTMLElement;\n    const index = this.sidebarItems.indexOf(selectedItem);\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n\n    this.dispatchEvent(\n      new CustomEvent('nile-change', {\n        detail: { selectedItem, index },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.requestUpdate();\n  };\n\n  private toggleCollapse() {\n    if (this.fixed) return;\n    this.collapsed = !this.collapsed;\n\n    this.dispatchEvent(\n      new CustomEvent('nile-toggle', {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleMenuItemClick(index: number) {\n    const selectedItem = this.sidebarItems[index];\n    if (!selectedItem || selectedItem.hasAttribute('disabled')) return;\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n    const text = selectedItem.textContent?.trim() || '';\n    const href = (selectedItem as any).href;\n    this.dispatchEvent(\n      new CustomEvent('nile-click', {\n        detail: { item: selectedItem, href, text },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (href) window.location.href = href;\n\n    this.requestUpdate();\n  }\n\n  private get menuItemsTemplate() {\n    if (!this.sidebarItems?.length) return null;\n  \n    return this.sidebarItems.map((item, index) => {\n      const shouldShowTooltip = (item as any).tooltip;\n      const isTruncated =\n        item.scrollWidth > item.clientWidth ||\n        item.scrollHeight > item.clientHeight;\n  \n      const content = html`\n        <nile-side-bar-action-menu-item\n          ?disabled=${item.hasAttribute('disabled')}\n          ?active=${this.activeIndex === index}\n          @click=${() => this.handleMenuItemClick(index)}\n        >\n          ${item.textContent}\n        </nile-side-bar-action-menu-item>\n      `;\n      return shouldShowTooltip || isTruncated\n        ? html`\n            <nile-tooltip\n              content=${item.textContent?.trim() || ''}\n              hoist\n              placement=\"right\"\n            >\n              ${content}\n            </nile-tooltip>\n          `\n        : content;\n    });\n  }\n  \n  \n  \n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"sidebar\" part=\"base\">\n        <div class=\"sidebar-header\" part=\"header\">\n          ${!this.fixed\n            ? this.collapsed\n              ? html`\n                  <nile-side-bar-action\n                    class=\"toggle-action\"\n                    placement=\"bottom-start\"\n                    hoist\n                    open\n                    triggerDropdown=\"hover\"\n                  >\n                    <nile-button\n                      slot=\"trigger\"\n                      class=\"toggle-btn\"\n                      variant=\"tertiary\"\n                      @click=${this.toggleCollapse}\n                    >\n                      <nile-icon name=\"menu_close\"></nile-icon>\n                    </nile-button>\n                    <nile-side-bar-action-menu>\n                      ${this.menuItemsTemplate}\n                    </nile-side-bar-action-menu>\n                  </nile-side-bar-action>\n                `\n              : html`\n                  <nile-button\n                    class=\"toggle-btn\"\n                    variant=\"tertiary\"\n                    @click=${this.toggleCollapse}\n                  >\n                    <nile-icon name=\"menu_open\"></nile-icon>\n                  </nile-button>\n                `\n            : null}\n        </div>\n\n        <nav\n          class=\"sidebar-nav\"\n          style=${this.collapsed ? 'display:none;' : ''}\n          part=\"nav-items\"\n        >\n          <slot\n            @slotchange=${() => {\n              this.requestUpdate();\n              this.observeSidebarItems();\n              this.syncActiveFromItems();\n            }}\n          ></slot>\n        </nav>\n      </div>\n    `;\n  }\n}\n\nexport default NileInlineSidebar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar': NileInlineSidebar;\n  }\n}\n"],"names":["NileInlineSidebar","r","this","collapsed","fixed","showTooltip","activeIndex","handleItemSelect","event","selectedItem","detail","item","index","sidebarItems","indexOf","forEach","i","active","dispatchEvent","CustomEvent","bubbles","composed","requestUpdate","_this","_inherits","_a","_createClass","key","get","defaultSlot","assignedElements","flatten","flatMap","el","tagName","toLowerCase","Array","from","querySelectorAll","value","connectedCallback","super","addEventListener","mutationObserver","MutationObserver","syncActiveFromItems","disconnectedCallback","disconnect","removeEventListener","firstUpdated","observeSidebarItems","length","observe","attributes","attributeFilter","findIndex","hasAttribute","toggleCollapse","handleMenuItemClick","_e$textContent","text","textContent","trim","href","window","location","_this$sidebarItems3","_this4","map","_t$textContent","shouldShowTooltip","tooltip","isTruncated","scrollWidth","clientWidth","scrollHeight","clientHeight","content","html","_templateObject","_taggedTemplateLiteral","_templateObject2","render","_templateObject3","_templateObject4","menuItemsTemplate","_templateObject5","__decorate","styles","NileElement","property","type","Boolean","reflect","prototype","attribute","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"nile-inline-sidebar.cjs.js","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-inline-sidebar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline sidebar component.\n *\n * @tag nile-inline-sidebar\n */\n@customElement('nile-inline-sidebar')\nexport class NileInlineSidebar extends NileElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) fixed = false;\n\n  @property({ type: Boolean, reflect: true }) showTooltip = false;\n\n  /** The side on which the sidebar is placed. */\n  @property({ type: String, reflect: true }) placement: 'left' | 'right' = 'left';\n\n  @state() private activeIndex: number = -1;\n\n  @query('slot') private defaultSlot!: HTMLSlotElement;\n\n  private mutationObserver?: MutationObserver;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private get sidebarItems(): HTMLElement[] {\n    if (!this.defaultSlot) return [];\n    const assigned = this.defaultSlot.assignedElements({ flatten: true });\n    const items = assigned.flatMap(el =>\n      el.tagName.toLowerCase() === 'nile-inline-sidebar-item'\n        ? [el]\n        : Array.from(el.querySelectorAll('nile-inline-sidebar-item'))\n    );\n    return items as HTMLElement[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('nile-click', this.handleItemSelect);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.mutationObserver = new MutationObserver(() =>\n      this.syncActiveFromItems()\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n    this.removeEventListener('nile-click', this.handleItemSelect);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  firstUpdated() {\n    this.observeSidebarItems();\n    this.syncActiveFromItems();\n\n    if (this.fixed) {\n      this.collapsed = false;\n    }\n  }\n\n  private observeSidebarItems() {\n    if (!this.sidebarItems?.length || !this.mutationObserver) return;\n    this.sidebarItems.forEach(item =>\n      this.mutationObserver!.observe(item, {\n        attributes: true,\n        attributeFilter: ['active'],\n      })\n    );\n  }\n\n  private syncActiveFromItems() {\n    if (!this.sidebarItems?.length) return;\n    const activeIndex = this.sidebarItems.findIndex(item =>\n      item.hasAttribute('active')\n    );\n    if (activeIndex !== -1 && activeIndex !== this.activeIndex) {\n      this.activeIndex = activeIndex;\n      this.requestUpdate();\n    }\n    this.updateTabIndices();\n  }\n\n  \n  private get focusableItems(): HTMLElement[] {\n    return this.sidebarItems.filter(\n      item => !item.hasAttribute('disabled')\n    );\n  }\n\n  private updateTabIndices() {\n    const items = this.sidebarItems;\n    if (!items.length) return;\n\n    const focusTarget =\n      this.activeIndex >= 0 ? items[this.activeIndex] : null;\n\n    items.forEach(item => {\n      if (item.hasAttribute('disabled')) {\n        item.setAttribute('tabindex', '-1');\n      } else if (item === focusTarget) {\n        item.setAttribute('tabindex', '0');\n      } else if (!focusTarget && item === this.focusableItems[0]) {\n        item.setAttribute('tabindex', '0');\n      } else {\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  private focusItem(item: HTMLElement) {\n    const items = this.sidebarItems;\n    items.forEach(el => el.setAttribute('tabindex', '-1'));\n    item.setAttribute('tabindex', '0');\n    item.focus();\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.collapsed) return;\n\n    const focusable = this.focusableItems;\n    if (!focusable.length) return;\n\n    const currentFocus = this.sidebarItems.find(\n      item =>\n        item === document.activeElement ||\n        item === this.shadowRoot?.activeElement ||\n        item.matches(':focus-within')\n    );\n\n    const currentIndex = currentFocus\n      ? focusable.indexOf(currentFocus)\n      : -1;\n\n    let nextIndex: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        nextIndex =\n          currentIndex < focusable.length - 1 ? currentIndex + 1 : 0;\n        break;\n\n      case 'ArrowUp':\n        nextIndex =\n          currentIndex > 0 ? currentIndex - 1 : focusable.length - 1;\n        break;\n\n      case 'Home':\n        nextIndex = 0;\n        break;\n\n      case 'End':\n        nextIndex = focusable.length - 1;\n        break;\n\n      case 'Enter':\n      case ' ':\n        return;\n\n      default:\n        return;\n    }\n\n    event.preventDefault();\n\n    if (nextIndex !== null && focusable[nextIndex]) {\n      this.focusItem(focusable[nextIndex]);\n    }\n  };\n\n  private handleItemSelect = (event: CustomEvent) => {\n    const selectedItem = event.detail.item as HTMLElement;\n    const index = this.sidebarItems.indexOf(selectedItem);\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n    this.updateTabIndices();\n\n    this.dispatchEvent(\n      new CustomEvent('nile-change', {\n        detail: { selectedItem, index },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.requestUpdate();\n  };\n\n  private toggleCollapse() {\n    if (this.fixed) return;\n    this.collapsed = !this.collapsed;\n\n    this.dispatchEvent(\n      new CustomEvent('nile-toggle', {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleMenuItemClick(index: number) {\n    const selectedItem = this.sidebarItems[index];\n    if (!selectedItem || selectedItem.hasAttribute('disabled')) return;\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n    const text = selectedItem.textContent?.trim() || '';\n    const href = (selectedItem as any).href;\n    this.dispatchEvent(\n      new CustomEvent('nile-click', {\n        detail: { item: selectedItem, href, text },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (href) window.location.href = href;\n\n    this.requestUpdate();\n  }\n\n  private get menuItemsTemplate() {\n    if (!this.sidebarItems?.length) return null;\n\n    const tooltipPlacement = this.placement === 'right' ? 'left' : 'right';\n\n    return this.sidebarItems.map((item, index) => {\n      const shouldShowTooltip = (item as any).tooltip;\n      const isTruncated =\n        item.scrollWidth > item.clientWidth ||\n        item.scrollHeight > item.clientHeight;\n  \n      const content = html`\n        <nile-side-bar-action-menu-item\n          ?disabled=${item.hasAttribute('disabled')}\n          ?active=${this.activeIndex === index}\n          @click=${() => this.handleMenuItemClick(index)}\n        >\n          ${item.textContent}\n        </nile-side-bar-action-menu-item>\n      `;\n      return shouldShowTooltip || isTruncated\n        ? html`\n            <nile-tooltip\n              content=${item.textContent?.trim() || ''}\n              hoist\n              placement=${tooltipPlacement}\n            >\n              ${content}\n            </nile-tooltip>\n          `\n        : content;\n    });\n  }\n  \n  \n  \n\n  public render(): TemplateResult {\n    const isRight = this.placement === 'right';\n    const collapsedIcon = isRight ? 'menu_open' : 'menu_close';\n    const expandedIcon = isRight ? 'menu_close' : 'menu_open';\n    const actionPlacement = isRight ? 'bottom-end' : 'bottom-start';\n\n    return html`\n      <div class=\"sidebar\" part=\"base\">\n        <div class=\"sidebar-header\" part=\"header\">\n          ${!this.fixed\n            ? this.collapsed\n              ? html`\n                  <nile-side-bar-action\n                    class=\"toggle-action\"\n                    placement=${actionPlacement}\n                    hoist\n                    open\n                    triggerDropdown=\"hover\"\n                  >\n                    <nile-button\n                      slot=\"trigger\"\n                      class=\"toggle-btn\"\n                      variant=\"tertiary\"\n                      @click=${this.toggleCollapse}\n                    >\n                      <nile-icon name=${collapsedIcon}></nile-icon>\n                    </nile-button>\n                    <nile-side-bar-action-menu>\n                      ${this.menuItemsTemplate}\n                    </nile-side-bar-action-menu>\n                  </nile-side-bar-action>\n                `\n              : html`\n                  <nile-button\n                    class=\"toggle-btn\"\n                    variant=\"tertiary\"\n                    @click=${this.toggleCollapse}\n                  >\n                    <nile-icon name=${expandedIcon}></nile-icon>\n                  </nile-button>\n                `\n            : null}\n        </div>\n\n        <nav\n          class=\"sidebar-nav\"\n          role=\"navigation\"\n          aria-label=\"Sidebar\"\n          style=${this.collapsed ? 'display:none;' : ''}\n          part=\"nav-items\"\n        >\n          <slot\n            @slotchange=${() => {\n              this.requestUpdate();\n              this.observeSidebarItems();\n              this.syncActiveFromItems();\n            }}\n          ></slot>\n        </nav>\n      </div>\n    `;\n  }\n}\n\nexport default NileInlineSidebar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar': NileInlineSidebar;\n  }\n}\n"],"names":["NileInlineSidebar","_a","r","this","collapsed","fixed","showTooltip","placement","activeIndex","handleKeyDown","event","focusable","focusableItems","length","currentFocus","sidebarItems","find","item","document","activeElement","shadowRoot","matches","currentIndex","indexOf","nextIndex","key","preventDefault","focusItem","handleItemSelect","selectedItem","detail","index","forEach","i","active","updateTabIndices","dispatchEvent","CustomEvent","bubbles","composed","requestUpdate","_this","_inherits","_createClass","get","defaultSlot","assignedElements","flatten","flatMap","el","tagName","toLowerCase","Array","from","querySelectorAll","value","connectedCallback","super","addEventListener","mutationObserver","MutationObserver","syncActiveFromItems","disconnectedCallback","disconnect","removeEventListener","firstUpdated","observeSidebarItems","observe","attributes","attributeFilter","findIndex","hasAttribute","filter","items","focusTarget","setAttribute","focus","toggleCollapse","handleMenuItemClick","_e$textContent","text","textContent","trim","href","window","location","menuItemsTemplate","tooltipPlacement","map","shouldShowTooltip","tooltip","isTruncated","scrollWidth","clientWidth","scrollHeight","clientHeight","content","html","_templateObject","_taggedTemplateLiteral","_templateObject2","render","isRight","collapsedIcon","expandedIcon","actionPlacement","_templateObject3","_templateObject4","_templateObject5","styles","NileElement","__decorate","property","type","Boolean","reflect","prototype","attribute","String","state","query","customElement"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",e=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    height: 100%;\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n    transition: width 0.3s ease;\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl);\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  :host(:not([collapsed])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs);\n    padding-right: var(--nile-spacing-xl);\n    padding-top: var(--nile-spacing-3xl);\n    padding-bottom: var(--nile-spacing-3xl);\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg);\n    padding-bottom: var(--nile-spacing-lg);\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item[active]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",e=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    height: 100%;\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n    transition: width 0.3s ease;\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl);\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  :host(:not([collapsed])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs);\n    padding-right: var(--nile-spacing-xl);\n    padding-top: var(--nile-spacing-3xl);\n    padding-bottom: var(--nile-spacing-3xl);\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg);\n    padding-bottom: var(--nile-spacing-lg);\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item[active]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n\n  :host([placement='right']) .sidebar {\n    border-right: none;\n    border-left: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  :host([placement='right']) .toggle-btn {\n    right: auto;\n    left: -14px;\n  }\n\n  :host([placement='right']) .sidebar-header {\n    justify-content: flex-start;\n  }\n\n  :host([placement='right']) .sidebar-nav {\n    padding-right: 0;\n    padding-left: var(--nile-spacing-xl);\n  }\n"]))));}};});
 //# sourceMappingURL=nile-inline-sidebar.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-sidebar.css.cjs.js","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\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\nexport const styles = css`\n  :host {\n    display: block;\n    height: 100%;\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n    transition: width 0.3s ease;\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl);\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  :host(:not([collapsed])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs);\n    padding-right: var(--nile-spacing-xl);\n    padding-top: var(--nile-spacing-3xl);\n    padding-bottom: var(--nile-spacing-3xl);\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg);\n    padding-bottom: var(--nile-spacing-lg);\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item[active]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTASaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-inline-sidebar.css.cjs.js","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\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\nexport const styles = css`\n  :host {\n    display: block;\n    height: 100%;\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n    transition: width 0.3s ease;\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl);\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  :host(:not([collapsed])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs);\n    padding-right: var(--nile-spacing-xl);\n    padding-top: var(--nile-spacing-3xl);\n    padding-bottom: var(--nile-spacing-3xl);\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg);\n    padding-bottom: var(--nile-spacing-lg);\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item[active]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n\n  :host([placement='right']) .sidebar {\n    border-right: none;\n    border-left: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  :host([placement='right']) .toggle-btn {\n    right: auto;\n    left: -14px;\n  }\n\n  :host([placement='right']) .sidebar-header {\n    justify-content: flex-start;\n  }\n\n  :host([placement='right']) .sidebar-nav {\n    padding-right: 0;\n    padding-left: var(--nile-spacing-xl);\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTASaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -94,4 +94,23 @@ import{css as i}from"lit";const e=i`
     pointer-events: auto;
     transition-delay: 0ms;
   }
+
+  :host([placement='right']) .sidebar {
+    border-right: none;
+    border-left: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  :host([placement='right']) .toggle-btn {
+    right: auto;
+    left: -14px;
+  }
+
+  :host([placement='right']) .sidebar-header {
+    justify-content: flex-start;
+  }
+
+  :host([placement='right']) .sidebar-nav {
+    padding-right: 0;
+    padding-left: var(--nile-spacing-xl);
+  }
 `;export{e as s};

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

@@ -1,26 +1,26 @@
-import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as i,state as s,query as n,customElement as l}from"lit/decorators.js";import{s as o}from"./nile-inline-sidebar.css.esm.js";import{N as a}from"../internal/nile-element.esm.js";let r=class extends a{constructor(){super(...arguments),this.collapsed=!1,this.fixed=!1,this.showTooltip=!1,this.activeIndex=-1,this.handleItemSelect=t=>{const e=t.detail.item,i=this.sidebarItems.indexOf(e);this.sidebarItems.forEach(((t,e)=>t.active=e===i)),this.activeIndex=i,this.dispatchEvent(new CustomEvent("nile-change",{detail:{selectedItem:e,index:i},bubbles:!0,composed:!0})),this.requestUpdate()}}static get styles(){return[o]}get sidebarItems(){if(!this.defaultSlot)return[];return this.defaultSlot.assignedElements({flatten:!0}).flatMap((t=>"nile-inline-sidebar-item"===t.tagName.toLowerCase()?[t]:Array.from(t.querySelectorAll("nile-inline-sidebar-item"))))}connectedCallback(){super.connectedCallback(),this.addEventListener("nile-click",this.handleItemSelect),this.mutationObserver=new MutationObserver((()=>this.syncActiveFromItems()))}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.removeEventListener("nile-click",this.handleItemSelect)}firstUpdated(){this.observeSidebarItems(),this.syncActiveFromItems(),this.fixed&&(this.collapsed=!1)}observeSidebarItems(){this.sidebarItems?.length&&this.mutationObserver&&this.sidebarItems.forEach((t=>this.mutationObserver.observe(t,{attributes:!0,attributeFilter:["active"]})))}syncActiveFromItems(){if(!this.sidebarItems?.length)return;const t=this.sidebarItems.findIndex((t=>t.hasAttribute("active")));-1!==t&&t!==this.activeIndex&&(this.activeIndex=t,this.requestUpdate())}toggleCollapse(){this.fixed||(this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("nile-toggle",{detail:{collapsed:this.collapsed},bubbles:!0,composed:!0})))}handleMenuItemClick(t){const e=this.sidebarItems[t];if(!e||e.hasAttribute("disabled"))return;this.sidebarItems.forEach(((e,i)=>e.active=i===t)),this.activeIndex=t;const i=e.textContent?.trim()||"",s=e.href;this.dispatchEvent(new CustomEvent("nile-click",{detail:{item:e,href:s,text:i},bubbles:!0,composed:!0})),s&&(window.location.href=s),this.requestUpdate()}get menuItemsTemplate(){return this.sidebarItems?.length?this.sidebarItems.map(((t,i)=>{const s=t.tooltip,n=t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight,l=e`
+import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as i,state as s,query as n,customElement as l}from"lit/decorators.js";import{s as o}from"./nile-inline-sidebar.css.esm.js";import{N as a}from"../internal/nile-element.esm.js";let r=class extends a{constructor(){super(...arguments),this.collapsed=!1,this.fixed=!1,this.showTooltip=!1,this.placement="left",this.activeIndex=-1,this.handleKeyDown=t=>{if(this.collapsed)return;const e=this.focusableItems;if(!e.length)return;const i=this.sidebarItems.find((t=>t===document.activeElement||t===this.shadowRoot?.activeElement||t.matches(":focus-within"))),s=i?e.indexOf(i):-1;let n=null;switch(t.key){case"ArrowDown":n=s<e.length-1?s+1:0;break;case"ArrowUp":n=s>0?s-1:e.length-1;break;case"Home":n=0;break;case"End":n=e.length-1;break;default:return}t.preventDefault(),null!==n&&e[n]&&this.focusItem(e[n])},this.handleItemSelect=t=>{const e=t.detail.item,i=this.sidebarItems.indexOf(e);this.sidebarItems.forEach(((t,e)=>t.active=e===i)),this.activeIndex=i,this.updateTabIndices(),this.dispatchEvent(new CustomEvent("nile-change",{detail:{selectedItem:e,index:i},bubbles:!0,composed:!0})),this.requestUpdate()}}static get styles(){return[o]}get sidebarItems(){if(!this.defaultSlot)return[];return this.defaultSlot.assignedElements({flatten:!0}).flatMap((t=>"nile-inline-sidebar-item"===t.tagName.toLowerCase()?[t]:Array.from(t.querySelectorAll("nile-inline-sidebar-item"))))}connectedCallback(){super.connectedCallback(),this.addEventListener("nile-click",this.handleItemSelect),this.addEventListener("keydown",this.handleKeyDown),this.mutationObserver=new MutationObserver((()=>this.syncActiveFromItems()))}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.removeEventListener("nile-click",this.handleItemSelect),this.removeEventListener("keydown",this.handleKeyDown)}firstUpdated(){this.observeSidebarItems(),this.syncActiveFromItems(),this.fixed&&(this.collapsed=!1)}observeSidebarItems(){this.sidebarItems?.length&&this.mutationObserver&&this.sidebarItems.forEach((t=>this.mutationObserver.observe(t,{attributes:!0,attributeFilter:["active"]})))}syncActiveFromItems(){if(!this.sidebarItems?.length)return;const t=this.sidebarItems.findIndex((t=>t.hasAttribute("active")));-1!==t&&t!==this.activeIndex&&(this.activeIndex=t,this.requestUpdate()),this.updateTabIndices()}get focusableItems(){return this.sidebarItems.filter((t=>!t.hasAttribute("disabled")))}updateTabIndices(){const t=this.sidebarItems;if(!t.length)return;const e=this.activeIndex>=0?t[this.activeIndex]:null;t.forEach((t=>{t.hasAttribute("disabled")?t.setAttribute("tabindex","-1"):t===e?t.setAttribute("tabindex","0"):e||t!==this.focusableItems[0]?t.setAttribute("tabindex","-1"):t.setAttribute("tabindex","0")}))}focusItem(t){this.sidebarItems.forEach((t=>t.setAttribute("tabindex","-1"))),t.setAttribute("tabindex","0"),t.focus()}toggleCollapse(){this.fixed||(this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("nile-toggle",{detail:{collapsed:this.collapsed},bubbles:!0,composed:!0})))}handleMenuItemClick(t){const e=this.sidebarItems[t];if(!e||e.hasAttribute("disabled"))return;this.sidebarItems.forEach(((e,i)=>e.active=i===t)),this.activeIndex=t;const i=e.textContent?.trim()||"",s=e.href;this.dispatchEvent(new CustomEvent("nile-click",{detail:{item:e,href:s,text:i},bubbles:!0,composed:!0})),s&&(window.location.href=s),this.requestUpdate()}get menuItemsTemplate(){if(!this.sidebarItems?.length)return null;const t="right"===this.placement?"left":"right";return this.sidebarItems.map(((i,s)=>{const n=i.tooltip,l=i.scrollWidth>i.clientWidth||i.scrollHeight>i.clientHeight,o=e`
         <nile-side-bar-action-menu-item
-          ?disabled=${t.hasAttribute("disabled")}
-          ?active=${this.activeIndex===i}
-          @click=${()=>this.handleMenuItemClick(i)}
+          ?disabled=${i.hasAttribute("disabled")}
+          ?active=${this.activeIndex===s}
+          @click=${()=>this.handleMenuItemClick(s)}
         >
-          ${t.textContent}
+          ${i.textContent}
         </nile-side-bar-action-menu-item>
-      `;return s||n?e`
+      `;return n||l?e`
             <nile-tooltip
-              content=${t.textContent?.trim()||""}
+              content=${i.textContent?.trim()||""}
               hoist
-              placement="right"
+              placement=${t}
             >
-              ${l}
+              ${o}
             </nile-tooltip>
-          `:l})):null}render(){return e`
+          `:o}))}render(){const t="right"===this.placement,i=t?"menu_open":"menu_close",s=t?"menu_close":"menu_open",n=t?"bottom-end":"bottom-start";return e`
       <div class="sidebar" part="base">
         <div class="sidebar-header" part="header">
           ${this.fixed?null:this.collapsed?e`
                   <nile-side-bar-action
                     class="toggle-action"
-                    placement="bottom-start"
+                    placement=${n}
                     hoist
                     open
                     triggerDropdown="hover"
@@ -31,7 +31,7 @@ import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as
                       variant="tertiary"
                       @click=${this.toggleCollapse}
                     >
-                      <nile-icon name="menu_close"></nile-icon>
+                      <nile-icon name=${i}></nile-icon>
                     </nile-button>
                     <nile-side-bar-action-menu>
                       ${this.menuItemsTemplate}
@@ -43,13 +43,15 @@ import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as
                     variant="tertiary"
                     @click=${this.toggleCollapse}
                   >
-                    <nile-icon name="menu_open"></nile-icon>
+                    <nile-icon name=${s}></nile-icon>
                   </nile-button>
                 `}
         </div>
 
         <nav
           class="sidebar-nav"
+          role="navigation"
+          aria-label="Sidebar"
           style=${this.collapsed?"display:none;":""}
           part="nav-items"
         >
@@ -58,4 +60,4 @@ import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as
           ></slot>
         </nav>
       </div>
-    `}};t([i({type:Boolean,reflect:!0})],r.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],r.prototype,"fixed",void 0),t([i({type:Boolean,reflect:!0})],r.prototype,"showTooltip",void 0),t([s()],r.prototype,"activeIndex",void 0),t([n("slot")],r.prototype,"defaultSlot",void 0),r=t([l("nile-inline-sidebar")],r);export{r as N};
+    `}};t([i({type:Boolean,reflect:!0})],r.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],r.prototype,"fixed",void 0),t([i({type:Boolean,reflect:!0})],r.prototype,"showTooltip",void 0),t([i({type:String,reflect:!0})],r.prototype,"placement",void 0),t([s()],r.prototype,"activeIndex",void 0),t([n("slot")],r.prototype,"defaultSlot",void 0),r=t([l("nile-inline-sidebar")],r);export{r as N};

package/dist/nile-inline-sidebar-item/nile-inline-sidebar-item.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-sidebar-item.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var i,t,e,s,o,l,_templateObject,_templateObject2,_templateObject3,r;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 _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){t=_lit.html;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;s=_litDecoratorsJs.customElement;},function(_nileInlineSidebarItemCssCjsJs){o=_nileInlineSidebarItemCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",r=/*#__PURE__*/function(_l){function r(){var _this;_classCallCheck(this,r);_this=_callSuper(this,r,arguments),_this.active=!1,_this.disabled=!1,_this.tooltip=!1;return _this;}_inherits(r,_l);return _createClass(r,[{key:"handleClick",value:function handleClick(i){var _this2=this,_this$textContent;if(this.disabled)return i.preventDefault(),void i.stopPropagation();var t=this.closest("nile-inline-sidebar");if(t){t.querySelectorAll("nile-inline-sidebar-item").forEach(function(i){return i.active=i===_this2;});}var e=((_this$textContent=this.textContent)===null||_this$textContent===void 0?void 0:_this$textContent.trim())||"";this.dispatchEvent(new CustomEvent("nile-click",{detail:{item:this,href:this.href,text:e},bubbles:!0,composed:!0})),this.href&&(window.location.href=this.href);}},{key:"render",value:function render(){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"item\" @click="," role=\"button\" tabindex=\"0\">\n        ","\n      </div>\n    "])),this.handleClick,this.href?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<a href="," @click=","><slot></slot></a>"])),this.href,function(i){return i.preventDefault();}):t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<slot></slot>"]))));}}],[{key:"styles",get:function get(){return[o];}}]);}(l));i([e({type:Boolean,reflect:!0})],r.prototype,"active",void 0),i([e({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),i([e({type:String})],r.prototype,"href",void 0),i([e({type:Boolean,reflect:!0})],r.prototype,"tooltip",void 0),_export("N",r=i([s("nile-inline-sidebar-item")],r));}};});
+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-sidebar-item.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var i,t,e,s,l,o,_templateObject,_templateObject2,_templateObject3,n;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){t=_lit.html;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;s=_litDecoratorsJs.customElement;},function(_nileInlineSidebarItemCssCjsJs){l=_nileInlineSidebarItemCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",n=/*#__PURE__*/function(_o){function n(){var _this;_classCallCheck(this,n);_this=_callSuper(this,n,arguments),_this.active=!1,_this.disabled=!1,_this.tooltip=!1,_this._handleHostKeyDown=function(i){"Enter"!==i.key&&" "!==i.key||(i.preventDefault(),_this._select(i));};return _this;}_inherits(n,_o);return _createClass(n,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(n,"connectedCallback",this,3)([]),this.hasAttribute("tabindex")||this.setAttribute("tabindex",this.disabled?"-1":"0"),this.hasAttribute("role")||this.setAttribute("role","menuitem"),this.addEventListener("keydown",this._handleHostKeyDown);}},{key:"disconnectedCallback",value:function disconnectedCallback(){_superPropGet(n,"disconnectedCallback",this,3)([]),this.removeEventListener("keydown",this._handleHostKeyDown);}},{key:"_select",value:function _select(i){var _this2=this,_this$textContent;if(this.disabled)return i.preventDefault(),void i.stopPropagation();var t=this.closest("nile-inline-sidebar");if(t){t.querySelectorAll("nile-inline-sidebar-item").forEach(function(i){return i.active=i===_this2;});}var e=((_this$textContent=this.textContent)===null||_this$textContent===void 0?void 0:_this$textContent.trim())||"";this.dispatchEvent(new CustomEvent("nile-click",{detail:{item:this,href:this.href,text:e},bubbles:!0,composed:!0})),this.href&&(window.location.href=this.href);}},{key:"handleClick",value:function handleClick(i){this._select(i);}},{key:"render",value:function render(){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div\n        class=\"item\"\n        @click=","\n        role=\"menuitem\"\n        aria-disabled=","\n      >\n        ","\n      </div>\n    "])),this.handleClick,this.disabled,this.href?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<a href="," @click=","><slot></slot></a>"])),this.href,function(i){return i.preventDefault();}):t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<slot></slot>"]))));}}],[{key:"styles",get:function get(){return[l];}}]);}(o));i([e({type:Boolean,reflect:!0})],n.prototype,"active",void 0),i([e({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),i([e({type:String})],n.prototype,"href",void 0),i([e({type:Boolean,reflect:!0})],n.prototype,"tooltip",void 0),_export("N",n=i([s("nile-inline-sidebar-item")],n));}};});
 //# sourceMappingURL=nile-inline-sidebar-item.cjs.js.map

package/dist/nile-inline-sidebar-item/nile-inline-sidebar-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-sidebar-item.cjs.js","sources":["../../../src/nile-inline-sidebar-item/nile-inline-sidebar-item.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-inline-sidebar-item.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline sidebar item.\n *\n * @tag nile-inlinesidebar-item\n *\n * @attr active - Marks the item as active (selected).\n * @attr disabled - Marks the item as disabled (non-interactive).\n * @attr href - Optional URL to navigate to when the item is clicked.\n *\n * @slot - Default slot for the item text or content.\n *\n * @fires nile-select - Emitted when the item is clicked (not disabled).\n *   detail: { item: this, href?: string }\n */\n@customElement('nile-inline-sidebar-item')\nexport class NileInlineSidebarItem extends NileElement {\n  @property({ type: Boolean, reflect: true }) active = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: String }) href?: string;\n  @property({ type: Boolean, reflect: true }) tooltip = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n  \n    const parent = this.closest('nile-inline-sidebar');\n    if (parent) {\n      const allItems = parent.querySelectorAll('nile-inline-sidebar-item');\n      allItems.forEach((item) => (item as NileInlineSidebarItem).active = item === this);\n    }\n  \n    const text = this.textContent?.trim() || '';\n  \n    this.dispatchEvent(\n      new CustomEvent('nile-click', {\n        detail: { item: this, href: this.href, text },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  \n    if (this.href) {\n      window.location.href = this.href;\n    }\n  }\n  \n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"item\" @click=${this.handleClick} role=\"button\" tabindex=\"0\">\n        ${this.href\n          ? html`<a href=${this.href} @click=${(e: Event) => e.preventDefault()}><slot></slot></a>`\n          : html`<slot></slot>`}\n      </div>\n    `;\n  }\n}\n\nexport default NileInlineSidebarItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar-item': NileInlineSidebarItem;\n  }\n}\n"],"names":["NileInlineSidebarItem","_l","r","constructor","this","active","disabled","tooltip","_this","_inherits","_createClass","key","value","handleClick","e","preventDefault","stopPropagation","parent","closest","querySelectorAll","forEach","item","text","textContent","trim","dispatchEvent","CustomEvent","detail","href","bubbles","composed","window","location","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","__decorate","get","styles","NileElement","property","type","Boolean","reflect","prototype","String","_export","customElement"],"mappings":"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"}
+{"version":3,"file":"nile-inline-sidebar-item.cjs.js","sources":["../../../src/nile-inline-sidebar-item/nile-inline-sidebar-item.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-inline-sidebar-item.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline sidebar item.\n *\n * @tag nile-inlinesidebar-item\n *\n * @attr active - Marks the item as active (selected).\n * @attr disabled - Marks the item as disabled (non-interactive).\n * @attr href - Optional URL to navigate to when the item is clicked.\n *\n * @slot - Default slot for the item text or content.\n *\n * @fires nile-select - Emitted when the item is clicked (not disabled).\n *   detail: { item: this, href?: string }\n */\n@customElement('nile-inline-sidebar-item')\nexport class NileInlineSidebarItem extends NileElement {\n  @property({ type: Boolean, reflect: true }) active = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: String }) href?: string;\n  @property({ type: Boolean, reflect: true }) tooltip = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', this.disabled ? '-1' : '0');\n    }\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'menuitem');\n    }\n    this.addEventListener('keydown', this._handleHostKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleHostKeyDown);\n  }\n\n  private _handleHostKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._select(e);\n    }\n  };\n\n  private _select(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n  \n    const parent = this.closest('nile-inline-sidebar');\n    if (parent) {\n      const allItems = parent.querySelectorAll('nile-inline-sidebar-item');\n      allItems.forEach((item) => (item as NileInlineSidebarItem).active = item === this);\n    }\n  \n    const text = this.textContent?.trim() || '';\n  \n    this.dispatchEvent(\n      new CustomEvent('nile-click', {\n        detail: { item: this, href: this.href, text },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  \n    if (this.href) {\n      window.location.href = this.href;\n    }\n  }\n\n  private handleClick(e: Event) {\n    this._select(e);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        class=\"item\"\n        @click=${this.handleClick}\n        role=\"menuitem\"\n        aria-disabled=${this.disabled}\n      >\n        ${this.href\n          ? html`<a href=${this.href} @click=${(e: Event) => e.preventDefault()}><slot></slot></a>`\n          : html`<slot></slot>`}\n      </div>\n    `;\n  }\n}\n\nexport default NileInlineSidebarItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar-item': NileInlineSidebarItem;\n  }\n}\n"],"names":["NileInlineSidebarItem","_o","n","this","active","disabled","tooltip","_handleHostKeyDown","e","key","preventDefault","_select","_this","_inherits","_createClass","value","connectedCallback","super","hasAttribute","setAttribute","addEventListener","disconnectedCallback","removeEventListener","_this2","_this$textContent","stopPropagation","parent","closest","querySelectorAll","forEach","item","text","textContent","trim","dispatchEvent","CustomEvent","detail","href","bubbles","composed","window","location","handleClick","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","__decorate","get","styles","NileElement","property","type","Boolean","reflect","prototype","String","_export","customElement"],"mappings":"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"}

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

@@ -1,5 +1,10 @@
-import{__decorate as i}from"tslib";import{html as t}from"lit";import{property as e,customElement as s}from"lit/decorators.js";import{s as o}from"./nile-inline-sidebar-item.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";let r=class extends l{constructor(){super(...arguments),this.active=!1,this.disabled=!1,this.tooltip=!1}static get styles(){return[o]}handleClick(i){if(this.disabled)return i.preventDefault(),void i.stopPropagation();const t=this.closest("nile-inline-sidebar");if(t){t.querySelectorAll("nile-inline-sidebar-item").forEach((i=>i.active=i===this))}const e=this.textContent?.trim()||"";this.dispatchEvent(new CustomEvent("nile-click",{detail:{item:this,href:this.href,text:e},bubbles:!0,composed:!0})),this.href&&(window.location.href=this.href)}render(){return t`
-      <div class="item" @click=${this.handleClick} role="button" tabindex="0">
+import{__decorate as i}from"tslib";import{html as t}from"lit";import{property as e,customElement as s}from"lit/decorators.js";import{s as l}from"./nile-inline-sidebar-item.css.esm.js";import{N as o}from"../internal/nile-element.esm.js";let n=class extends o{constructor(){super(...arguments),this.active=!1,this.disabled=!1,this.tooltip=!1,this._handleHostKeyDown=i=>{"Enter"!==i.key&&" "!==i.key||(i.preventDefault(),this._select(i))}}static get styles(){return[l]}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||this.setAttribute("tabindex",this.disabled?"-1":"0"),this.hasAttribute("role")||this.setAttribute("role","menuitem"),this.addEventListener("keydown",this._handleHostKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleHostKeyDown)}_select(i){if(this.disabled)return i.preventDefault(),void i.stopPropagation();const t=this.closest("nile-inline-sidebar");if(t){t.querySelectorAll("nile-inline-sidebar-item").forEach((i=>i.active=i===this))}const e=this.textContent?.trim()||"";this.dispatchEvent(new CustomEvent("nile-click",{detail:{item:this,href:this.href,text:e},bubbles:!0,composed:!0})),this.href&&(window.location.href=this.href)}handleClick(i){this._select(i)}render(){return t`
+      <div
+        class="item"
+        @click=${this.handleClick}
+        role="menuitem"
+        aria-disabled=${this.disabled}
+      >
         ${this.href?t`<a href=${this.href} @click=${i=>i.preventDefault()}><slot></slot></a>`:t`<slot></slot>`}
       </div>
-    `}};i([e({type:Boolean,reflect:!0})],r.prototype,"active",void 0),i([e({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),i([e({type:String})],r.prototype,"href",void 0),i([e({type:Boolean,reflect:!0})],r.prototype,"tooltip",void 0),r=i([s("nile-inline-sidebar-item")],r);export{r as N};
+    `}};i([e({type:Boolean,reflect:!0})],n.prototype,"active",void 0),i([e({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),i([e({type:String})],n.prototype,"href",void 0),i([e({type:Boolean,reflect:!0})],n.prototype,"tooltip",void 0),n=i([s("nile-inline-sidebar-item")],n);export{n 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"}