@aquera/nile-elements 1.9.3 → 1.9.5

package/dist/nile-dot-stepper/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/nile-dot-stepper/index.esm.js

@@ -0,0 +1 @@
+export{N as NileDotStepper}from"./nile-dot-stepper.esm.js";import"tslib";import"lit";import"./nile-dot-stepper.css.esm.js";import"lit/directives/class-map.js";import"lit/decorators.js";import"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";import"../internal/accessibility/a11y.role.enum.esm.js";

package/dist/nile-dot-stepper/nile-dot-stepper.cjs.js

@@ -0,0 +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","./nile-dot-stepper.css.cjs.js","lit/directives/class-map.js","lit/decorators.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/a11y.role.enum.cjs.js","../internal/accessibility/role.enum.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js"],function(_export,_context){"use strict";var t,s,e,i,r,a,o,l,n,c,h,_templateObject,_templateObject2,d;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e;}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){s=_lit.html;},function(_nileDotStepperCssCjsJs){e=_nileDotStepperCssCjsJs.s;},function(_litDirectivesClassMapJs){i=_litDirectivesClassMapJs.classMap;},function(_litDecoratorsJs){r=_litDecoratorsJs.property;a=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;l=_internalNileElementCjsJs.s;},function(_internalAccessibilityA11yPropertyEnumCjsJs){n=_internalAccessibilityA11yPropertyEnumCjsJs.A;},function(_internalAccessibilityA11yRoleEnumCjsJs){c=_internalAccessibilityA11yRoleEnumCjsJs.A;},function(_internalAccessibilityRoleEnumCjsJs){h=_internalAccessibilityRoleEnumCjsJs.R;},function(_internalAccessibilityA11yStateEnumCjsJs){}],execute:function execute(){_export("N",d=/*#__PURE__*/function(_o){function d(){var _this;_classCallCheck(this,d);_this=_callSuper(this,d,arguments),_this.total=0,_this.current=1,_this.size="md",_this.disabled=!1;return _this;}_inherits(d,_o);return _createClass(d,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(d,"connectedCallback",this,3)([]),l(this,_defineProperty(_defineProperty({},h.Role,c.Tablist),n.AriaLabel,"Progress"));}},{key:"clamp",value:function clamp(t){return this.total<1?1:Math.min(Math.max(t,1),this.total);}},{key:"selectStep",value:function selectStep(t){if(this.disabled)return;var s=this.clamp(t);this.current=s,this.emit("nile-step-change",{value:s});}},{key:"handleDotClick",value:function handleDotClick(t){this.selectStep(t);}},{key:"focusDot",value:function focusDot(t){var _this$shadowRoot;var s=(_this$shadowRoot=this.shadowRoot)===null||_this$shadowRoot===void 0?void 0:_this$shadowRoot.querySelector("[part=\"dot\"][data-index=\"".concat(t,"\"]"));s===null||s===void 0||s.focus();}},{key:"handleKeyDown",value:function handleKeyDown(t){if(this.disabled||this.total<1)return;var s=this.clamp(this.current);var e=null;switch(t.key){case"ArrowRight":e=this.clamp(s+1);break;case"ArrowLeft":e=this.clamp(s-1);break;case"Home":e=1;break;case"End":e=this.total;break;default:return;}t.preventDefault(),null!==e&&(this.selectStep(e),this.focusDot(e));}},{key:"render",value:function render(){var _this2=this;var t=this.clamp(this.current);return s(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div\n        part=\"base\"\n        class=\"dots\"\n        role=\"tablist\"\n        aria-label=\"Progress\"\n        @keydown=","\n      >\n        ","\n      </div>\n    "])),this.handleKeyDown,Array.from({length:this.total}).map(function(e,r){var a=r+1,o=a===t;return s(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n            <button\n              part=\"dot\"\n              role=\"tab\"\n              type=\"button\"\n              data-index=","\n              class=","\n              aria-selected=","\n              aria-label=\"Step "," of ","\"\n              tabindex=","\n              ?disabled=","\n              @click=","\n            ></button>\n          "])),a,i({dot:!0,"dot--active":o,"dot--sm":"sm"===_this2.size,"dot--md":"md"===_this2.size,"dot--lg":"lg"===_this2.size}),o?"true":"false",a,_this2.total,o?0:-1,_this2.disabled,function(){return _this2.handleDotClick(a);});}));}}]);}(o));d.styles=e,t([r({type:Number,reflect:!0})],d.prototype,"total",void 0),t([r({type:Number,reflect:!0})],d.prototype,"current",void 0),t([r({reflect:!0})],d.prototype,"size",void 0),t([r({type:Boolean,reflect:!0})],d.prototype,"disabled",void 0),_export("N",d=t([a("nile-dot-stepper")],d));}};});
+//# sourceMappingURL=nile-dot-stepper.cjs.js.map

package/dist/nile-dot-stepper/nile-dot-stepper.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-dot-stepper.cjs.js","sources":["../../../src/nile-dot-stepper/nile-dot-stepper.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 { html } from 'lit';\nimport { styles } from './nile-dot-stepper.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement, { setupA11yMetadata } from '../internal/nile-element';\nimport type { CSSResultGroup, TemplateResult } from 'lit';\nimport { A11yProperty } from '../internal/accessibility/a11y.property.enum';\nimport { A11yRole } from '../internal/accessibility/a11y.role.enum';\nimport { Role } from '../internal/accessibility/role.enum';\n\n/**\n * Nile dot stepper component.\n *\n * @tag nile-dot-stepper\n *\n */\n\n/**\n * @summary Dot steppers display a horizontal row of small dots indicating progress or position, with one active dot and the rest inactive.\n * @status stable\n *\n * @event nile-step-change - Emitted when a dot is selected via click or keyboard. The `detail` contains the 1-based `value` of the selected dot.\n *\n * @csspart base - The component's base wrapper (the dots container).\n * @csspart dot - An individual dot button.\n */\n\n@customElement('nile-dot-stepper')\nexport class NileDotStepper extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    setupA11yMetadata(this, {\n      [Role.Role]: A11yRole.Tablist,\n      [A11yProperty.AriaLabel]: 'Progress',\n    });\n  }\n\n  /** The total number of dots. */\n  @property({ type: Number, reflect: true }) total = 0;\n\n  /** The 1-based index of the active dot. */\n  @property({ type: Number, reflect: true }) current = 1;\n\n  /** The size of each dot. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Disables click and keyboard interaction. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Clamps the active value to the valid `[1, total]` range. */\n  private clamp(value: number): number {\n    if (this.total < 1) return 1;\n    return Math.min(Math.max(value, 1), this.total);\n  }\n\n  private selectStep(value: number): void {\n    if (this.disabled) return;\n    const next = this.clamp(value);\n    this.current = next;\n    this.emit('nile-step-change', { value: next });\n  }\n\n  private handleDotClick(value: number): void {\n    this.selectStep(value);\n  }\n\n  private focusDot(value: number): void {\n    const dot = this.shadowRoot?.querySelector<HTMLButtonElement>(\n      `[part=\"dot\"][data-index=\"${value}\"]`\n    );\n    dot?.focus();\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (this.disabled || this.total < 1) return;\n\n    const active = this.clamp(this.current);\n    let next: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        next = this.clamp(active + 1);\n        break;\n      case 'ArrowLeft':\n        next = this.clamp(active - 1);\n        break;\n      case 'Home':\n        next = 1;\n        break;\n      case 'End':\n        next = this.total;\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    if (next !== null) {\n      this.selectStep(next);\n      this.focusDot(next);\n    }\n  }\n\n  render(): TemplateResult {\n    const active = this.clamp(this.current);\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"dots\"\n        role=\"tablist\"\n        aria-label=\"Progress\"\n        @keydown=${this.handleKeyDown}\n      >\n        ${Array.from({ length: this.total }).map((_, index) => {\n          const value = index + 1;\n          const isActive = value === active;\n          return html`\n            <button\n              part=\"dot\"\n              role=\"tab\"\n              type=\"button\"\n              data-index=${value}\n              class=${classMap({\n                dot: true,\n                'dot--active': isActive,\n                'dot--sm': this.size === 'sm',\n                'dot--md': this.size === 'md',\n                'dot--lg': this.size === 'lg',\n              })}\n              aria-selected=${isActive ? 'true' : 'false'}\n              aria-label=\"Step ${value} of ${this.total}\"\n              tabindex=${isActive ? 0 : -1}\n              ?disabled=${this.disabled}\n              @click=${() => this.handleDotClick(value)}\n            ></button>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport default NileDotStepper;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-dot-stepper': NileDotStepper;\n  }\n}\n"],"names":["NileDotStepper","d","this","total","current","size","disabled","_this","_inherits","_o","_createClass","key","value","connectedCallback","super","setupA11yMetadata","Role","A11yRole","Tablist","A11yProperty","AriaLabel","clamp","Math","min","max","selectStep","next","emit","handleDotClick","focusDot","dot","shadowRoot","querySelector","focus","handleKeyDown","event","active","preventDefault","render","html","_templateObject","_taggedTemplateLiteral","Array","from","length","map","_","index","isActive","_templateObject2","classMap","NileElement","styles","__decorate","property","type","Number","reflect","prototype","Boolean","customElement"],"mappings":"2+IAmCaA,CAAAA,uBAAAA,EAAAA,EAAN,SAAAC,EAAA,uEAYsCC,KAAAA,CAAKC,KAAG,CAAA,CAAA,CAGRD,KAAAA,CAAOE,OAAG,CAAA,CAAA,CAGxBF,KAAAA,CAAIG,IAAuB,CAAA,IAAA,CAGZH,KAAAA,CAAQI,QAAG,CAAA,CAAA,CA8FxD,QAAAC,KAAA,EAhHCC,SAAA,CAAAP,CAAA,CAAAQ,EAAA,SAAAC,YAAA,CAAAT,CAAA,GAAAU,GAAA,qBAAAC,KAAA,UAAAC,iBAAAA,CAAAA,CAAAA,CACEC,aAAAA,CAAAA,CAAAA,iCACAC,CAAAA,CAAkBb,wCACfc,EAAKA,IAAOC,CAAAA,CAAAA,CAASC,SACrBC,CAAAA,CAAaC,UAAY,UAE7B,CAAA,CAAA,EAeO,GAAAT,GAAA,SAAAC,KAAA,UAAAS,KAAAA,CAAMT,CAAAA,CAAAA,CACZ,MAAIV,KAAKC,CAAAA,KAAAA,CAAQ,EAAU,CACpBmB,CAAAA,IAAAA,CAAKC,IAAID,IAAKE,CAAAA,GAAAA,CAAIZ,EAAO,CAAIV,CAAAA,CAAAA,IAAAA,CAAKC,MAC1C,EAEO,GAAAQ,GAAA,cAAAC,KAAA,UAAAa,UAAAA,CAAWb,CACjB,CAAA,CAAA,GAAIV,KAAKI,QAAU,CAAA,OACnB,GAAMoB,CAAAA,CAAOxB,CAAAA,IAAAA,CAAKmB,MAAMT,CACxBV,CAAAA,CAAAA,IAAAA,CAAKE,QAAUsB,CACfxB,CAAAA,IAAAA,CAAKyB,KAAK,kBAAoB,CAAA,CAAEf,MAAOc,CACxC,CAAA,CAAA,EAEO,GAAAf,GAAA,kBAAAC,KAAA,UAAAgB,cAAAA,CAAehB,CAAAA,CAAAA,CACrBV,KAAKuB,UAAWb,CAAAA,CAAAA,CACjB,EAEO,GAAAD,GAAA,YAAAC,KAAA,UAAAiB,QAAAA,CAASjB,wBACf,GAAMkB,CAAAA,CAAAA,EAAAA,gBAAAA,CAAM5B,KAAK6B,UAAYC,UAAAA,gBAAAA,iBAAjB9B,gBAAAA,CAAiB8B,aAAAA,gCAAAA,MAAAA,CACCpB,CAE9BkB,OAAAA,CAAAA,CAAAA,CAAAA,SAAAA,CAAAA,WAAAA,CAAAA,CAAKG,OACN,EAEO,GAAAtB,GAAA,iBAAAC,KAAA,UAAAsB,aAAAA,CAAcC,CACpB,CAAA,CAAA,GAAIjC,KAAKI,QAAYJ,EAAAA,IAAAA,CAAKC,MAAQ,CAAG,CAAA,OAErC,GAAMiC,CAAAA,CAASlC,CAAAA,IAAAA,CAAKmB,MAAMnB,IAAKE,CAAAA,OAAAA,CAAAA,CAC/B,GAAIsB,CAAAA,CAAsB,CAAA,IAAA,CAE1B,OAAQS,CAAMxB,CAAAA,GAAAA,EACZ,IAAK,YACHe,CAAAA,CAAAA,CAAOxB,KAAKmB,KAAMe,CAAAA,CAAAA,CAAS,GAC3B,MACF,IAAK,YACHV,CAAOxB,CAAAA,IAAAA,CAAKmB,MAAMe,CAAS,CAAA,CAAA,CAAA,CAC3B,MACF,IAAK,MAAA,CACHV,EAAO,CACP,CAAA,MACF,IAAK,KACHA,CAAAA,CAAAA,CAAOxB,KAAKC,KACZ,CAAA,MACF,QACE,OAGJgC,CAAAA,CAAAA,CAAME,iBACO,IAATX,GAAAA,CAAAA,GACFxB,KAAKuB,UAAWC,CAAAA,CAAAA,CAAAA,CAChBxB,KAAK2B,QAASH,CAAAA,CAAAA,CAAAA,CAEjB,EAED,GAAAf,GAAA,UAAAC,KAAA,UAAA0B,MAAAA,CAAAA,CAAAA,KAAAA,MAAAA,MACE,GAAMF,CAAAA,CAASlC,CAAAA,IAAAA,CAAKmB,MAAMnB,IAAKE,CAAAA,OAAAA,CAAAA,CAE/B,MAAOmC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,8LAMIvC,IAAKgC,CAAAA,aAAAA,CAEdQ,KAAAA,CAAMC,KAAK,CAAEC,MAAAA,CAAQ1C,IAAKC,CAAAA,KAAAA,CAAAA,CAAAA,CAAS0C,IAAI,SAACC,CAAAA,CAAGC,CAC3C,CAAA,CAAA,GAAMnC,CAAAA,EAAQmC,CAAQ,CAAA,CAAA,CAChBC,EAAWpC,CAAUwB,GAAAA,CAAAA,CAC3B,MAAOG,CAAAA,CAAI,CAAAU,gBAAA,GAAAA,gBAAA,CAAAR,sBAAA,iXAKM7B,CAAAA,CACLsC,CAAAA,CAAS,CACfpB,GAAAA,CAAAA,CAAK,CACL,CAAA,aAAA,CAAekB,EACf,SAAyB,CAAA,IAAA,GAAd9C,MAAKG,CAAAA,IAAAA,CAChB,UAAyB,IAAdH,GAAAA,MAAAA,CAAKG,IAChB,CAAA,SAAA,CAAyB,OAAdH,MAAKG,CAAAA,IAAAA,CAAAA,CAAAA,CAEF2C,CAAAA,CAAW,MAAS,CAAA,OAAA,CACjBpC,CAAAA,CAAYV,MAAKC,CAAAA,KAAAA,CACzB6C,CAAAA,CAAW,CAAK,CAAA,CAAA,CAAA,CACf9C,MAAKI,CAAAA,QAAAA,CACR,iBAAMJ,CAAAA,OAAK0B,cAAehB,CAAAA,CAAAA,CAAAA,IAEtC,CAAA,CAAA,EAIR,CAjHMZ,MAD2BmD,CAA7B,GACEnD,CAAAA,CAAMoD,MAAmBA,CAAAA,CAAAA,CAWWC,CAAA,CAAA,CAA1CC,EAAS,CAAEC,IAAAA,CAAMC,MAAQC,CAAAA,OAAAA,CAAAA,CAAS,CAAkBzD,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA0D,UAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAGVL,CAAA,CAAA,CAA1CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAoBzD,CAAA0D,CAAAA,SAAAA,CAAA,SAAA,CAAA,IAAA,EAAA,CAAA,CAG1BL,EAAA,CAA5BC,CAAAA,CAAS,CAAEG,OAAAA,CAAAA,CAAS,CAAwCzD,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA0D,UAAA,MAAA,CAAA,IAAA,EAAA,CAAA,CAGjBL,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,KAAMI,OAASF,CAAAA,OAAAA,CAAAA,CAAS,CAAyBzD,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA0D,SAAA,CAAA,UAAA,CAAA,IAAA,EArBlD1D,CAAAA,CAAAA,OAAAA,KAAAA,CAAAA,CAAcqD,CAAA,CAAA,CAD1BO,CAAc,CAAA,kBAAA,CAAA,CAAA,CACF5D"}

package/dist/nile-dot-stepper/nile-dot-stepper.css.cjs.js

@@ -0,0 +1,2 @@
+System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,a;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",a=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n    -webkit-font-smoothing: var(\n      --nile-webkit-font-smoothing,\n      var(--ng-webkit-font-smoothing)\n    );\n    -moz-osx-font-smoothing: var(\n      --nile-moz-osx-font-smoothing,\n      var(--ng-moz-osx-font-smoothing)\n    );\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .dots {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    align-items: center;\n  }\n\n  .dot {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border: none;\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n    cursor: pointer;\n    border-radius: 50%;\n    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    transition: background-color 0.2s ease-out, transform 0.2s ease-out;\n  }\n\n  .dot--active {\n    background: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-text-brand-secondary-700)\n    );\n  }\n\n  /* Sizes */\n  .dot--sm {\n    width: var(--nile-spacing-4px, var(--ng-spacing-1));\n    height: var(--nile-spacing-4px, var(--ng-spacing-1));\n  }\n\n  .dot--md {\n    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n  }\n\n  .dot--lg {\n    width: var(--nile-spacing-14px, var(--ng-spacing-3-5));\n    height: var(--nile-spacing-14px, var(--ng-spacing-3-5));\n  }\n\n  .dots:has(.dot--sm) {\n    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));\n  }\n\n  .dots:has(.dot--lg) {\n    gap: var(--nile-spacing-2-x, var(--ng-spacing-3));\n  }\n\n  .dot:focus-visible {\n    outline: var(--nile-spacing-2px, var(--ng-spacing-0-5)) solid\n      var(--nile-colors-stroke-strong-950, var(--ng-colors-border-secondary));\n    outline-offset: var(--nile-spacing-2px, var(--ng-spacing-0-5));\n  }\n\n  :host([disabled]) .dot,\n  .dot:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"]))));}};});
+//# sourceMappingURL=nile-dot-stepper.css.cjs.js.map

package/dist/nile-dot-stepper/nile-dot-stepper.css.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-dot-stepper.css.cjs.js","sources":["../../../src/nile-dot-stepper/nile-dot-stepper.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 * Dot Stepper CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    -webkit-font-smoothing: var(\n      --nile-webkit-font-smoothing,\n      var(--ng-webkit-font-smoothing)\n    );\n    -moz-osx-font-smoothing: var(\n      --nile-moz-osx-font-smoothing,\n      var(--ng-moz-osx-font-smoothing)\n    );\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .dots {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    align-items: center;\n  }\n\n  .dot {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border: none;\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n    cursor: pointer;\n    border-radius: 50%;\n    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    transition: background-color 0.2s ease-out, transform 0.2s ease-out;\n  }\n\n  .dot--active {\n    background: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-text-brand-secondary-700)\n    );\n  }\n\n  /* Sizes */\n  .dot--sm {\n    width: var(--nile-spacing-4px, var(--ng-spacing-1));\n    height: var(--nile-spacing-4px, var(--ng-spacing-1));\n  }\n\n  .dot--md {\n    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n  }\n\n  .dot--lg {\n    width: var(--nile-spacing-14px, var(--ng-spacing-3-5));\n    height: var(--nile-spacing-14px, var(--ng-spacing-3-5));\n  }\n\n  .dots:has(.dot--sm) {\n    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));\n  }\n\n  .dots:has(.dot--lg) {\n    gap: var(--nile-spacing-2-x, var(--ng-spacing-3));\n  }\n\n  .dot:focus-visible {\n    outline: var(--nile-spacing-2px, var(--ng-spacing-0-5)) solid\n      var(--nile-colors-stroke-strong-950, var(--ng-colors-border-secondary));\n    outline-offset: var(--nile-spacing-2px, var(--ng-spacing-0-5));\n  }\n\n  :host([disabled]) .dot,\n  .dot:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n`;\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-dot-stepper/nile-dot-stepper.css.esm.js

@@ -0,0 +1,77 @@
+import{css as n}from"lit";const a=n`
+  :host {
+    display: inline-block;
+    -webkit-font-smoothing: var(
+      --nile-webkit-font-smoothing,
+      var(--ng-webkit-font-smoothing)
+    );
+    -moz-osx-font-smoothing: var(
+      --nile-moz-osx-font-smoothing,
+      var(--ng-moz-osx-font-smoothing)
+    );
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .dots {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    align-items: center;
+  }
+
+  .dot {
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border: none;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    cursor: pointer;
+    border-radius: 50%;
+    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    transition: background-color 0.2s ease-out, transform 0.2s ease-out;
+  }
+
+  .dot--active {
+    background: var(
+      --nile-colors-primary-600,
+      var(--ng-colors-text-brand-secondary-700)
+    );
+  }
+
+  /* Sizes */
+  .dot--sm {
+    width: var(--nile-spacing-4px, var(--ng-spacing-1));
+    height: var(--nile-spacing-4px, var(--ng-spacing-1));
+  }
+
+  .dot--md {
+    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+  }
+
+  .dot--lg {
+    width: var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    height: var(--nile-spacing-14px, var(--ng-spacing-3-5));
+  }
+
+  .dots:has(.dot--sm) {
+    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+  }
+
+  .dots:has(.dot--lg) {
+    gap: var(--nile-spacing-2-x, var(--ng-spacing-3));
+  }
+
+  .dot:focus-visible {
+    outline: var(--nile-spacing-2px, var(--ng-spacing-0-5)) solid
+      var(--nile-colors-stroke-strong-950, var(--ng-colors-border-secondary));
+    outline-offset: var(--nile-spacing-2px, var(--ng-spacing-0-5));
+  }
+
+  :host([disabled]) .dot,
+  .dot:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;export{a as s};

package/dist/nile-dot-stepper/nile-dot-stepper.esm.js

@@ -0,0 +1,24 @@
+import{__decorate as t}from"tslib";import{html as e}from"lit";import{s}from"./nile-dot-stepper.css.esm.js";import{classMap as i}from"lit/directives/class-map.js";import{property as r,customElement as a}from"lit/decorators.js";import{N as o,s as l}from"../internal/nile-element.esm.js";import{A as n}from"../internal/accessibility/a11y.property.enum.esm.js";import{A as c}from"../internal/accessibility/a11y.role.enum.esm.js";import{R as h}from"../internal/accessibility/role.enum.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";let m=class extends o{constructor(){super(...arguments),this.total=0,this.current=1,this.size="md",this.disabled=!1}connectedCallback(){super.connectedCallback(),l(this,{[h.Role]:c.Tablist,[n.AriaLabel]:"Progress"})}clamp(t){return this.total<1?1:Math.min(Math.max(t,1),this.total)}selectStep(t){if(this.disabled)return;const e=this.clamp(t);this.current=e,this.emit("nile-step-change",{value:e})}handleDotClick(t){this.selectStep(t)}focusDot(t){const e=this.shadowRoot?.querySelector(`[part="dot"][data-index="${t}"]`);e?.focus()}handleKeyDown(t){if(this.disabled||this.total<1)return;const e=this.clamp(this.current);let s=null;switch(t.key){case"ArrowRight":s=this.clamp(e+1);break;case"ArrowLeft":s=this.clamp(e-1);break;case"Home":s=1;break;case"End":s=this.total;break;default:return}t.preventDefault(),null!==s&&(this.selectStep(s),this.focusDot(s))}render(){const t=this.clamp(this.current);return e`
+      <div
+        part="base"
+        class="dots"
+        role="tablist"
+        aria-label="Progress"
+        @keydown=${this.handleKeyDown}
+      >
+        ${Array.from({length:this.total}).map(((s,r)=>{const a=r+1,o=a===t;return e`
+            <button
+              part="dot"
+              role="tab"
+              type="button"
+              data-index=${a}
+              class=${i({dot:!0,"dot--active":o,"dot--sm":"sm"===this.size,"dot--md":"md"===this.size,"dot--lg":"lg"===this.size})}
+              aria-selected=${o?"true":"false"}
+              aria-label="Step ${a} of ${this.total}"
+              tabindex=${o?0:-1}
+              ?disabled=${this.disabled}
+              @click=${()=>this.handleDotClick(a)}
+            ></button>
+          `}))}
+      </div>
+    `}};m.styles=s,t([r({type:Number,reflect:!0})],m.prototype,"total",void 0),t([r({type:Number,reflect:!0})],m.prototype,"current",void 0),t([r({reflect:!0})],m.prototype,"size",void 0),t([r({type:Boolean,reflect:!0})],m.prototype,"disabled",void 0),m=t([a("nile-dot-stepper")],m);export{m 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  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-sm);\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    line-height: var( --nile-form-error-text-line-height,  var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color, 150ms outline;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n    outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .input--standard:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n  }\n\n  .input--standard.input--error:hover:not(.input--disabled) {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  }\n  .input--standard.input--focused:not(.input--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.input--standard.input--focused:not(.input--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n  .input--standard.input--focused.input--warning:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--focused.input--success:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n  }\n  \n  .input--standard.input--focused.input--error:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: var(--nile-colors-primary-900);\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n    \n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    background:var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .input--standard.input--warning:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .input--standard.input--success:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input--standard:focus {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-input-font-size-small);\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--medium {\n    font-size: var(--nile-font-size-rem-large);\n    height: var(--nile-height-40px, var(--ng-height-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  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-sm);\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    line-height: var( --nile-form-error-text-line-height,  var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color, 150ms outline;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n    outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .input--standard:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n  }\n\n  .input--standard.input--error:hover:not(.input--disabled) {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  }\n  .input--standard.input--focused:not(.input--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.input--standard.input--focused:not(.input--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n  .input--standard.input--focused.input--warning:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--focused.input--success:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n  }\n  \n  .input--standard.input--focused.input--error:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: var(--nile-colors-primary-900);\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n    \n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    background:var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .input--standard.input--warning:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .input--standard.input--success:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input--standard:focus {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-input-font-size-small);\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--medium {\n    font-size: var(--nile-font-size-rem-large);\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .input--medium .input__control {\n    height: var(--nile-type-scale-3, var(--ng-height-auto));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--large {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-6);\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: var(--nile-spacing-none) var(--nile-spacing-xl);\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--medium {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--large {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__password-toggle:hover {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-outline]) .input--standard {\n    outline: var(--nile-outline-unset, var(--ng-outline-none));\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  .input__password {\n    font-family: var(--nile-font-family-disc, var(--ng-font-family-body));\n    letter-spacing: var(--nile-spacing-xxs, var(--ng-spacing-none));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm);\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-2);\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs);\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n"]))));}};});
 //# sourceMappingURL=nile-input.css.cjs.js.map

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

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

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

@@ -399,7 +399,7 @@ import{css as r}from"lit";const o=r`
 
   .input--medium {
     font-size: var(--nile-font-size-rem-large);
-    height: var(--nile-height-40px, var(--ng-height-auto));
+    height: var(--nile-height-40px, var(--ng-height-40px));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
   }
 

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",n=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    user-select: none;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n    transition: 150ms fill;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    cursor: pointer;\n    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n  }\n  :host([legacy]) .option {\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n  }\n\n  .option--single-select {\n    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    opacity: 1;\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n    word-break: break-all;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: var(--nile-spacing-xs);\n    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  :host([tickonselect][selected]) .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  :host(:not([aria-selected='true'])) .option .option__suffix{\n    display: var(--nile-display-block, var(--ng-display-none));\n  }\n\n  .option--checkbox{\n    pointer-events: none;\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    width:auto;\n    display:var(--nile-display-inline-block, var(--ng-display-inline-block));\n  }\n  :host([legacy]) .option--checkbox{\n    display:var(--nile-display-inline-block, var(--ng-display-none));\n  }\n\n \n  :host([tickonselect]) .option--checkbox{\n    display: none;\n  }\n\n  :host([tickonselect]) .option{\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n\n  .option__label-container {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .option__description {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .text-ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: inline-block;\n    width: 99%;\n  }\n\n  .option__label-text-ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: inline-block;\n    width: 99%;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",n=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    user-select: none;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n    transition: 150ms fill;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    cursor: pointer;\n    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n  }\n  :host([legacy]) .option {\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n  }\n\n  .option--single-select {\n    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  :host([groupName]:not([groupName=''])) .option--single-select {\n    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-xl));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    opacity: 1;\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n    word-break: break-all;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: var(--nile-spacing-xs);\n    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  :host([tickonselect][selected]) .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  :host(:not([aria-selected='true'])) .option .option__suffix{\n    display: var(--nile-display-block, var(--ng-display-none));\n  }\n\n  .option--checkbox{\n    pointer-events: none;\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    width:auto;\n    display:var(--nile-display-inline-block, var(--ng-display-inline-block));\n  }\n  :host([legacy]) .option--checkbox{\n    display:var(--nile-display-inline-block, var(--ng-display-none));\n  }\n\n \n  :host([tickonselect]) .option--checkbox{\n    display: none;\n  }\n\n  :host([tickonselect]) .option{\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n\n  .option__label-container {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .option__description {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .text-ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: inline-block;\n    width: 99%;\n  }\n\n  .option__label-text-ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: inline-block;\n    width: 99%;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-option.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-option.css.cjs.js","sources":["../../../src/nile-option/nile-option.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 * Option_2 CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    user-select: none;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n    transition: 150ms fill;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    cursor: pointer;\n    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n  }\n  :host([legacy]) .option {\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n  }\n\n  .option--single-select {\n    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    opacity: 1;\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n    word-break: break-all;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: var(--nile-spacing-xs);\n    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  :host([tickonselect][selected]) .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  :host(:not([aria-selected='true'])) .option .option__suffix{\n    display: var(--nile-display-block, var(--ng-display-none));\n  }\n\n  .option--checkbox{\n    pointer-events: none;\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    width:auto;\n    display:var(--nile-display-inline-block, var(--ng-display-inline-block));\n  }\n  :host([legacy]) .option--checkbox{\n    display:var(--nile-display-inline-block, var(--ng-display-none));\n  }\n\n \n  :host([tickonselect]) .option--checkbox{\n    display: none;\n  }\n\n  :host([tickonselect]) .option{\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n\n  .option__label-container {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .option__description {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .text-ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: inline-block;\n    width: 99%;\n  }\n\n  .option__label-text-ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: inline-block;\n    width: 99%;\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-option.css.cjs.js","sources":["../../../src/nile-option/nile-option.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 * Option_2 CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    user-select: none;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n    transition: 150ms fill;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    cursor: pointer;\n    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n  }\n  :host([legacy]) .option {\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n  }\n\n  .option--single-select {\n    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  :host([groupName]:not([groupName=''])) .option--single-select {\n    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-xl));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    opacity: 1;\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n    word-break: break-all;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: var(--nile-spacing-xs);\n    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  :host([tickonselect][selected]) .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  :host(:not([aria-selected='true'])) .option .option__suffix{\n    display: var(--nile-display-block, var(--ng-display-none));\n  }\n\n  .option--checkbox{\n    pointer-events: none;\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    width:auto;\n    display:var(--nile-display-inline-block, var(--ng-display-inline-block));\n  }\n  :host([legacy]) .option--checkbox{\n    display:var(--nile-display-inline-block, var(--ng-display-none));\n  }\n\n \n  :host([tickonselect]) .option--checkbox{\n    display: none;\n  }\n\n  :host([tickonselect]) .option{\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n\n  .option__label-container {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .option__description {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .text-ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: inline-block;\n    width: 99%;\n  }\n\n  .option__label-text-ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: inline-block;\n    width: 99%;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -34,6 +34,10 @@ import{css as i}from"lit";const n=i`
     padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));
   }
 
+  :host([groupName]:not([groupName=''])) .option--single-select {
+    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-xl));
+  }
+
   .option--hover:not(.option--current):not(.option--disabled) {
     background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));

package/dist/nile-option-group/nile-option-group.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",i=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t.option-group-header {\n\t\theight: var(--nile-height-40px, var(--ng-spacing-10));\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n\t\tbackground-color: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));\n\t\tcolor: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n\t\tfont-feature-settings: 'liga' off, 'clig' off;\n\t\tfont-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n\t\tfont-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n\t\tfont-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tjustify-content: space-between;\n\t}\n\n\t.content-container {\n\t\tdisplay: flex;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t}\n\n\t.gap-18px {\n\t\tgap: var(--nile-spacing-14px, var(--ng-spacing-3-5));\n\t}\n\n\t.option-group-prefix,\n  .option-group-suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option-group-prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .option-group-suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  :host(.nile-group-hidden)::part(option-group-header) {\n\tdisplay: none !important;\n  }\n\n.option-group-header {\n  z-index: 2;\n}\n:host([sticky]) .option-group-header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));\n}\n:host([sticky][search-enabled]) .option-group-header {\n  top: 46px;\n}\n\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",i=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t.option-group-header {\n\t\theight: var(--nile-height-40px, var(--ng-spacing-10));\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-xl));\n\t\tbackground-color: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));\n\t\tcolor: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n\t\tfont-feature-settings: 'liga' off, 'clig' off;\n\t\tfont-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n\t\tfont-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));\n\t\tfont-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tjustify-content: space-between;\n\t}\n\n\t.content-container {\n\t\tdisplay: flex;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t}\n\n\t.gap-18px {\n\t\tgap: var(--nile-spacing-14px, var(--ng-spacing-3-5));\n\t}\n\n\t.option-group-prefix,\n  .option-group-suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option-group-prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .option-group-suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  :host(.nile-group-hidden)::part(option-group-header) {\n\tdisplay: none !important;\n  }\n\n.option-group-header {\n  z-index: 2;\n}\n:host([sticky]) .option-group-header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));\n}\n:host([sticky][search-enabled]) .option-group-header {\n  top: 46px;\n}\n\n"]))));}};});
 //# sourceMappingURL=nile-option-group.css.cjs.js.map

package/dist/nile-option-group/nile-option-group.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-option-group.css.cjs.js","sources":["../../../src/nile-option-group/nile-option-group.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\n/**\n * OptionHeader CSS\n */\nexport const styles = css`\n\t.option-group-header {\n\t\theight: var(--nile-height-40px, var(--ng-spacing-10));\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n\t\tbackground-color: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));\n\t\tcolor: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n\t\tfont-feature-settings: 'liga' off, 'clig' off;\n\t\tfont-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n\t\tfont-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n\t\tfont-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tjustify-content: space-between;\n\t}\n\n\t.content-container {\n\t\tdisplay: flex;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t}\n\n\t.gap-18px {\n\t\tgap: var(--nile-spacing-14px, var(--ng-spacing-3-5));\n\t}\n\n\t.option-group-prefix,\n  .option-group-suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option-group-prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .option-group-suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  :host(.nile-group-hidden)::part(option-group-header) {\n\tdisplay: none !important;\n  }\n\n.option-group-header {\n  z-index: 2;\n}\n:host([sticky]) .option-group-header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));\n}\n:host([sticky][search-enabled]) .option-group-header {\n  top: 46px;\n}\n\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-option-group.css.cjs.js","sources":["../../../src/nile-option-group/nile-option-group.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\n/**\n * OptionHeader CSS\n */\nexport const styles = css`\n\t.option-group-header {\n\t\theight: var(--nile-height-40px, var(--ng-spacing-10));\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-xl));\n\t\tbackground-color: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));\n\t\tcolor: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n\t\tfont-feature-settings: 'liga' off, 'clig' off;\n\t\tfont-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n\t\tfont-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));\n\t\tfont-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tjustify-content: space-between;\n\t}\n\n\t.content-container {\n\t\tdisplay: flex;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t}\n\n\t.gap-18px {\n\t\tgap: var(--nile-spacing-14px, var(--ng-spacing-3-5));\n\t}\n\n\t.option-group-prefix,\n  .option-group-suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option-group-prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .option-group-suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  :host(.nile-group-hidden)::part(option-group-header) {\n\tdisplay: none !important;\n  }\n\n.option-group-header {\n  z-index: 2;\n}\n:host([sticky]) .option-group-header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));\n}\n:host([sticky][search-enabled]) .option-group-header {\n  top: 46px;\n}\n\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-option-group/nile-option-group.css.esm.js

@@ -3,13 +3,13 @@ import{css as n}from"lit";const i=n`
 		height: var(--nile-height-40px, var(--ng-spacing-10));
 		display: flex;
 		align-items: center;
-		padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+		padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-xl));
 		background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));
 		color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
 		font-feature-settings: 'liga' off, 'clig' off;
 		font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
-		font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
-		font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+		font-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));
+		font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
 		width: 100%;
 		box-sizing: border-box;
 		justify-content: space-between;

package/dist/nile-section-message/nile-section-message.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\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  .parent__wrapper {\n    width: auto;\n    display: flex;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-xl));\n    box-sizing: border-box;\n    padding: var(--nile-type-scale-4, var(--ng-spacing-xl));\n    word-wrap: break-word;\n    align-items: center;\n    border: var(--nile-border-width-0, var(--ng-border-width-1)) solid var(--nile-section-message-background-color-primary, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-spacing-xs, var(--ng-radius-xl));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-lg));\n  }\n\n  .section--primary {\n    background-color: var(--nile-section-message-background-color-primary, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--success {\n    background-color: var(--nile-section-message-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--warning {\n    background-color: var(--nile-section-message-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--error {\n    background-color: var(--nile-section-message-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .left__wrapper {\n    align-self: start;\n    height: auto;\n  }\n\n  nile-icon-button::part(base) {\n    background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .icon--primary {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-primary,\n    var(--ng-colors-bg-primary-alt));\n  }\n\n  .icon--success {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-success\n    );\n  }\n\n  .icon--warning {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-warning\n    );\n  }\n\n  .icon--error {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-error\n    );\n  }\n\n  .right__wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    width: 100%;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-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-sm));\n    font-style: normal;\n    line-height: 140%;\n    letter-spacing: 0.2px;\n  }\n\n  .section__heading {\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n  }\n\n  .section__description {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));\n  }\n\n  .footer__actions {\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-none));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    cursor: pointer;\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child)) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-600));\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child))::after {\n    content: '\u2022';\n    color: var(--nile-section-message-footer-color, var(--ng-componentcolors-alpha-white-100));\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\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  .parent__wrapper {\n    width: auto;\n    display: flex;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-xl));\n    box-sizing: border-box;\n    padding: var(--nile-type-scale-4, var(--ng-spacing-xl));\n    word-wrap: break-word;\n    align-items: center;\n    border: var(--nile-border-width-0, var(--ng-border-width-1)) solid var(--nile-section-message-background-color-primary, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-spacing-xs, var(--ng-radius-xl));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-lg));\n  }\n\n  .section--primary {\n    background-color: var(--nile-section-message-background-color-primary, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--success {\n    background-color: var(--nile-section-message-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--warning {\n    background-color: var(--nile-section-message-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--error {\n    background-color: var(--nile-section-message-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .left__wrapper {\n    align-self: start;\n    height: auto;\n  }\n\n  nile-icon-button::part(base) {\n    background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));\n    padding: var(--nile-radius-md, var(--ng-radius-md));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .icon--primary {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-primary,\n    var(--ng-colors-bg-brand-solid));\n  }\n\n  .icon--success {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-success, var(--ng-colors-bg-success-solid));\n  }\n\n  .icon--warning {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-warning, var(--ng-colors-bg-warning-solid));\n  }\n\n  .icon--error {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-error, var(--ng-colors-bg-error-solid));\n  }\n\n  .right__wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    width: 100%;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-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-sm));\n    font-style: normal;\n    line-height: 140%;\n    letter-spacing: 0.2px;\n  }\n\n  .section__heading {\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n  }\n\n  .section__description {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));\n  }\n\n  .footer__actions {\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-none));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    cursor: pointer;\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child)) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-600));\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child))::after {\n    content: '\u2022';\n    color: var(--nile-section-message-footer-color, var(--ng-componentcolors-alpha-white-100));\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n"]))));}};});
 //# sourceMappingURL=nile-section-message.css.cjs.js.map

package/dist/nile-section-message/nile-section-message.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-section-message.css.cjs.js","sources":["../../../src/nile-section-message/nile-section-message.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 * SectionMessage CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\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  .parent__wrapper {\n    width: auto;\n    display: flex;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-xl));\n    box-sizing: border-box;\n    padding: var(--nile-type-scale-4, var(--ng-spacing-xl));\n    word-wrap: break-word;\n    align-items: center;\n    border: var(--nile-border-width-0, var(--ng-border-width-1)) solid var(--nile-section-message-background-color-primary, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-spacing-xs, var(--ng-radius-xl));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-lg));\n  }\n\n  .section--primary {\n    background-color: var(--nile-section-message-background-color-primary, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--success {\n    background-color: var(--nile-section-message-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--warning {\n    background-color: var(--nile-section-message-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--error {\n    background-color: var(--nile-section-message-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .left__wrapper {\n    align-self: start;\n    height: auto;\n  }\n\n  nile-icon-button::part(base) {\n    background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .icon--primary {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-primary,\n    var(--ng-colors-bg-primary-alt));\n  }\n\n  .icon--success {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-success\n    );\n  }\n\n  .icon--warning {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-warning\n    );\n  }\n\n  .icon--error {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-error\n    );\n  }\n\n  .right__wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    width: 100%;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-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-sm));\n    font-style: normal;\n    line-height: 140%;\n    letter-spacing: 0.2px;\n  }\n\n  .section__heading {\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n  }\n\n  .section__description {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));\n  }\n\n  .footer__actions {\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-none));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    cursor: pointer;\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child)) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-600));\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child))::after {\n    content: '•';\n    color: var(--nile-section-message-footer-color, var(--ng-componentcolors-alpha-white-100));\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\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-section-message.css.cjs.js","sources":["../../../src/nile-section-message/nile-section-message.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 * SectionMessage CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\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  .parent__wrapper {\n    width: auto;\n    display: flex;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-xl));\n    box-sizing: border-box;\n    padding: var(--nile-type-scale-4, var(--ng-spacing-xl));\n    word-wrap: break-word;\n    align-items: center;\n    border: var(--nile-border-width-0, var(--ng-border-width-1)) solid var(--nile-section-message-background-color-primary, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-spacing-xs, var(--ng-radius-xl));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-lg));\n  }\n\n  .section--primary {\n    background-color: var(--nile-section-message-background-color-primary, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--success {\n    background-color: var(--nile-section-message-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--warning {\n    background-color: var(--nile-section-message-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--error {\n    background-color: var(--nile-section-message-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .left__wrapper {\n    align-self: start;\n    height: auto;\n  }\n\n  nile-icon-button::part(base) {\n    background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));\n    padding: var(--nile-radius-md, var(--ng-radius-md));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .icon--primary {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-primary,\n    var(--ng-colors-bg-brand-solid));\n  }\n\n  .icon--success {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-success, var(--ng-colors-bg-success-solid));\n  }\n\n  .icon--warning {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-warning, var(--ng-colors-bg-warning-solid));\n  }\n\n  .icon--error {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-error, var(--ng-colors-bg-error-solid));\n  }\n\n  .right__wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    width: 100%;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-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-sm));\n    font-style: normal;\n    line-height: 140%;\n    letter-spacing: 0.2px;\n  }\n\n  .section__heading {\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n  }\n\n  .section__description {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));\n  }\n\n  .footer__actions {\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-none));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    cursor: pointer;\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child)) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-600));\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child))::after {\n    content: '•';\n    color: var(--nile-section-message-footer-color, var(--ng-componentcolors-alpha-white-100));\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-section-message/nile-section-message.css.esm.js

@@ -3,7 +3,7 @@ import{css as o}from"lit";const r=o`
     display: block;
     width: 100%;
     box-sizing: border-box;
-    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));
+    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
     min-width: var(--nile-width-width-xxs, var(--ng-width-80));
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
     -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
@@ -47,30 +47,29 @@ import{css as o}from"lit";const r=o`
   nile-icon-button::part(base) {
     background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));
+    padding: var(--nile-radius-md, var(--ng-radius-md));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   }
 
   .icon--primary {
     --icon-button-background-color: var(
       --nile-section-message-icon-background-color-primary,
-    var(--ng-colors-bg-primary-alt));
+    var(--ng-colors-bg-brand-solid));
   }
 
   .icon--success {
     --icon-button-background-color: var(
-      --nile-section-message-icon-background-color-success
-    );
+      --nile-section-message-icon-background-color-success, var(--ng-colors-bg-success-solid));
   }
 
   .icon--warning {
     --icon-button-background-color: var(
-      --nile-section-message-icon-background-color-warning
-    );
+      --nile-section-message-icon-background-color-warning, var(--ng-colors-bg-warning-solid));
   }
 
   .icon--error {
     --icon-button-background-color: var(
-      --nile-section-message-icon-background-color-error
-    );
+      --nile-section-message-icon-background-color-error, var(--ng-colors-bg-error-solid));
   }
 
   .right__wrapper {