npm - @aquera/nile-elements - Versions diffs - 0.1.17 → 0.1.18 - Mend

@aquera/nile-elements 0.1.17 → 0.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (291) hide show

package/dist/src/nile-error-message/nile-error-message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAKL,4DAA4D;QAE5D,iBAAY,GAAW,EAAE,CAAC;QAW1B,eAAU,GAAY,KAAK,CAAC;QAE5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IA8D5C,CAAC;IAlFQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAoBD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAChD,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAClE,CAAC;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAEM,MAAM;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YACpB,CAAC,CAAC,IAAI,CAAA;;cAEA,IAAI,CAAC,aAAa;cAClB,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,IAAI,CAAA;;;uBAGC,IAAI,CAAC,cAAc;iBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;~~uEACW~~,QAAQ;;~~eAEhE~~,CAAA,CAAC,CAAA,EAAE;;aAEL;YACL,CAAC,CAAC,EAAE;;;yDAG6C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;CACF,CAAA;AA5EC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAlBjB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAmF5B","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/*\n A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n /\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n // Represents the error message to be displayed to the user.\n @property({ type: String })\n errorMessage: string = '';\n\n // Represents additional details about the error, like stack trace or other info.\n @property({ type: String })\n errorResponse: string;\n\n // Extended error information\n @property({ type: String })\n errorResponseLong: string;\n\n @property({ type: Boolean })\n isExpanded: boolean = false;\n\n // The maximum length before truncation.\n private readonly MAX_LENGTH: number = 100;\n\n /\n Get a truncated version of the errorResponse if it's too long.\n * @returns {string}\n /\n getTruncatedResponse(): string {\n if (this.errorResponse.length > this.MAX_LENGTH) {\n return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n }\n return this.errorResponse;\n }\n\n /\n Toggle the expanded state of the error response.\n */\n toggleExpanded() {\n this.isExpanded = !this.isExpanded;\n }\n\n public render(): TemplateResult {\n const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n return html`\n <div class=\"nile-error-message\" part=\"base\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-message__icon\"\n part=\"icon\"\n color=\"~~#A4121C~~\"\n ></nile-icon>\n <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n ${this.errorResponse\n ? html`\n <div class=\"nile-error-message__response\">\n ${this.errorResponse}\n ${this.errorResponseLong\n ? html`\n <span\n class=\"nile-error-message__more-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}\n <nile-icon color=\"~~#005EA6~~\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n </span\n > `:``}\n </div>\n `\n : ``}\n\n <div\n class=\"nile-error-message__response-expanded ${this.isExpanded\n ? 'expanded'\n : 'collapsed'}\"\n >\n ${this.errorResponseLong}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-error-message': NileErrorMessage;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAKL,4DAA4D;QAE5D,iBAAY,GAAW,EAAE,CAAC;QAW1B,eAAU,GAAY,KAAK,CAAC;QAE5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IA8D5C,CAAC;IAlFQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAoBD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAChD,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAClE,CAAC;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAEM,MAAM;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YACpB,CAAC,CAAC,IAAI,CAAA;;cAEA,IAAI,CAAC,aAAa;cAClB,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,IAAI,CAAA;;;uBAGC,IAAI,CAAC,cAAc;iBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;8FACkC,QAAQ;;eAEvF,CAAA,CAAC,CAAA,EAAE;;aAEL;YACL,CAAC,CAAC,EAAE;;;yDAG6C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;CACF,CAAA;AA5EC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAlBjB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAmF5B","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/*\n A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n /\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n // Represents the error message to be displayed to the user.\n @property({ type: String })\n errorMessage: string = '';\n\n // Represents additional details about the error, like stack trace or other info.\n @property({ type: String })\n errorResponse: string;\n\n // Extended error information\n @property({ type: String })\n errorResponseLong: string;\n\n @property({ type: Boolean })\n isExpanded: boolean = false;\n\n // The maximum length before truncation.\n private readonly MAX_LENGTH: number = 100;\n\n /\n Get a truncated version of the errorResponse if it's too long.\n * @returns {string}\n /\n getTruncatedResponse(): string {\n if (this.errorResponse.length > this.MAX_LENGTH) {\n return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n }\n return this.errorResponse;\n }\n\n /\n Toggle the expanded state of the error response.\n */\n toggleExpanded() {\n this.isExpanded = !this.isExpanded;\n }\n\n public render(): TemplateResult {\n const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n return html`\n <div class=\"nile-error-message\" part=\"base\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-message__icon\"\n part=\"icon\"\n color=\"var(--nile-colors-red-700)\"\n ></nile-icon>\n <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n ${this.errorResponse\n ? html`\n <div class=\"nile-error-message__response\">\n ${this.errorResponse}\n ${this.errorResponseLong\n ? html`\n <span\n class=\"nile-error-message__more-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}\n <nile-icon color=\"var(--nile-colors-primary-600)\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n </span\n > `:``}\n </div>\n `\n : ``}\n\n <div\n class=\"nile-error-message__response-expanded ${this.isExpanded\n ? 'expanded'\n : 'collapsed'}\"\n >\n ${this.errorResponseLong}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-error-message': NileErrorMessage;\n }\n}\n"]}

package/dist/src/nile-form-error-message/nile-form-error-message.js CHANGED Viewed

@@ -31,7 +31,7 @@ let NileFormErrorMessage = class NileFormErrorMessage extends LitElement {
     render() {
         return html `
       <div class="nile-form-error-message">
-       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="#A4121C"> </nile-icon> <slot> </slot>
+       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700)"> </nile-icon> <slot> </slot>
         </div>
 			`;
     }

package/dist/src/nile-form-error-message/nile-form-error-message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-form-error-message.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAEnD;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;IAIT,CAAC;IACJ,CAAC;CAGD,CAAA;AA3BY,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA2BhC;;AAED,eAAe,oBAAoB,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-form-error-message.css';\n\n/\n Nile icon component.\n \n @tag nile-form-error-message\n \n /\n@customElement('nile-form-error-message')\nexport class NileFormErrorMessage extends LitElement {\n\n\t/*\n\t The styles for FormErrorMessage\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t /\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/ #endregion /\n\n\t/ #region Methods /\n\n\t/\n\t Render method\n\t * @slot This is a slot test\n\t /\n\tpublic render(): TemplateResult {\n\t\treturn html`\n <div class=\"nile-form-error-message\">\n <nile-icon name=\"info2\" size=\"14\" class=\"nile-form-error-message__icon\" color=\"~~#A4121C~~\"> </nile-icon> <slot> </slot>\n </div>\n\t\t\t`;\n\t}\n\n\t/ #endregion */\n}\n\nexport default NileFormErrorMessage;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-form-error-message': NileFormErrorMessage;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-form-error-message.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAEnD;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;IAIT,CAAC;IACJ,CAAC;CAGD,CAAA;AA3BY,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA2BhC;;AAED,eAAe,oBAAoB,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-form-error-message.css';\n\n/\n Nile icon component.\n \n @tag nile-form-error-message\n \n /\n@customElement('nile-form-error-message')\nexport class NileFormErrorMessage extends LitElement {\n\n\t/*\n\t The styles for FormErrorMessage\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t /\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/ #endregion /\n\n\t/ #region Methods /\n\n\t/\n\t Render method\n\t * @slot This is a slot test\n\t /\n\tpublic render(): TemplateResult {\n\t\treturn html`\n <div class=\"nile-form-error-message\">\n <nile-icon name=\"info2\" size=\"14\" class=\"nile-form-error-message__icon\" color=\"var(--nile-colors-red-700)\"> </nile-icon> <slot> </slot>\n </div>\n\t\t\t`;\n\t}\n\n\t/ #endregion */\n}\n\nexport default NileFormErrorMessage;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-form-error-message': NileFormErrorMessage;\n }\n}\n"]}

package/dist/src/nile-hero/nile-hero.css.js CHANGED Viewed

@@ -32,7 +32,7 @@ export const styles = css `
 	.hero__container--collapsed{
 		height: 67px;
-		background-color: var(--nile-hero-collapsed-background,#fff);
+		background-color: var(--nile-hero-collapsed-background);
 	}
 	.hero__container--expanded{
@@ -46,7 +46,7 @@ export const styles = css `
 		place-items: center;
 		display: grid;
 		border-radius: 8px;
-		border: 1px solid #EAECF0;
+		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}

package/dist/src/nile-hero/nile-hero.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-hero.css.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n\n This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n/\n\nimport {css} from 'lit';\n\n/\n Hero CSS\n */\nexport const styles = css`\n\n\t:host {\n\t\tdisplay:block;\n\t\t--nile-hero-transition-time:2000ms;\n\t}\n\n\t.hero__header--collapsed{\n\t\tposition:absolute;\n\t\ttop:0;\n\t\tleft:0;\n\t\ttransition:var(--nile-hero-transition-time);\n\t}\n\t\n\t.hero__container {\n\t\toverflow:hidden;\n\t\twidth:100%;\n\t\tposition:relative;\n\t\tdisplay:block;\n \t\ttransition: var(--nile-hero-transition-time);\n\t}\n\n\t.hero__container--collapsed{\n\t\theight: 67px;\n\t\tbackground-color: var(--nile-hero-collapsed-background~~,#fff~~);\n\t}\n\n\t.hero__container--expanded{\n\t\theight:var(--nile-hero-height);\n\t\tbackground:linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%, var( --nile-hero-color-bg-to-gradient) 100%);\n\t}\n\n\t.icon__container {\n\t\theight: 32px;\n\t\taspect-ratio: 1 / 1;\n\t\tplace-items: center;\n\t\tdisplay: grid;\n\t\tborder-radius: 8px;\n\t\tborder: 1px solid ~~#EAECF0~~;\n\t\tbackground: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);\n\t}\n\n\t.hero__slot__container {\n\t\theight:var(--nile-hero-height);\n\t\tpadding-left: 48px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap:var(--nile-spacing-spacing-xl);\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom:0;\n \t\ttransition: var(--nile-hero-transition-time);\n\t}\n\n\t.hero__slot {\n\t\tdisplay: flex;\n\t\tgap:var(--nile-spacing-spacing-xl);\n\t}\n\n\t.hero__img__container {\n\t\theight:var(--nile-hero-height);\n\t\toverflow:hidden;\n\t\twidth:max-content;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tbottom:0;\n\t\ttransition:var(--nile-hero-transition-time);\n\t}\n\n\t.hero__img {\n\t\tobject-fit:cover;\n\t\theight:var(--nile-hero-height);\n\t\twidth:auto;\n\t}\n`;\n\nexport default [styles];"]}
1	+ {"version":3,"file":"nile-hero.css.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n\n This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n/\n\nimport {css} from 'lit';\n\n/\n Hero CSS\n */\nexport const styles = css`\n\n\t:host {\n\t\tdisplay:block;\n\t\t--nile-hero-transition-time:2000ms;\n\t}\n\n\t.hero__header--collapsed{\n\t\tposition:absolute;\n\t\ttop:0;\n\t\tleft:0;\n\t\ttransition:var(--nile-hero-transition-time);\n\t}\n\t\n\t.hero__container {\n\t\toverflow:hidden;\n\t\twidth:100%;\n\t\tposition:relative;\n\t\tdisplay:block;\n \t\ttransition: var(--nile-hero-transition-time);\n\t}\n\n\t.hero__container--collapsed{\n\t\theight: 67px;\n\t\tbackground-color: var(--nile-hero-collapsed-background);\n\t}\n\n\t.hero__container--expanded{\n\t\theight:var(--nile-hero-height);\n\t\tbackground:linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%, var( --nile-hero-color-bg-to-gradient) 100%);\n\t}\n\n\t.icon__container {\n\t\theight: 32px;\n\t\taspect-ratio: 1 / 1;\n\t\tplace-items: center;\n\t\tdisplay: grid;\n\t\tborder-radius: 8px;\n\t\tborder: 1px solid var(--nile-colors-neutral-400);\n\t\tbackground: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);\n\t}\n\n\t.hero__slot__container {\n\t\theight:var(--nile-hero-height);\n\t\tpadding-left: 48px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap:var(--nile-spacing-spacing-xl);\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom:0;\n \t\ttransition: var(--nile-hero-transition-time);\n\t}\n\n\t.hero__slot {\n\t\tdisplay: flex;\n\t\tgap:var(--nile-spacing-spacing-xl);\n\t}\n\n\t.hero__img__container {\n\t\theight:var(--nile-hero-height);\n\t\toverflow:hidden;\n\t\twidth:max-content;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tbottom:0;\n\t\ttransition:var(--nile-hero-transition-time);\n\t}\n\n\t.hero__img {\n\t\tobject-fit:cover;\n\t\theight:var(--nile-hero-height);\n\t\twidth:auto;\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-hero-header/nile-hero-header.css.js CHANGED Viewed

@@ -25,7 +25,7 @@ export const styles = css `
 		place-items: center;
 		display: grid;
 		border-radius: 8px;
-		border: 1px solid #EAECF0;
+		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}

package/dist/src/nile-hero-header/nile-hero-header.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-hero-header.css.js","sourceRoot":"","sources":["../../../src/nile-hero-header/nile-hero-header.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n\n This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n/\n\nimport {css} from 'lit';\n\n/\n HeroHeader CSS\n */\nexport const styles = css`\n\t\n\t:host {\n\t\twidth:100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding:16px 48px;\n\t\tgap: 16px;\n\t\tborder-bottom: 1px solid rgb(234, 236, 240);\n\t}\n\n\t.icon__container {\n\t\theight: 32px;\n\t\taspect-ratio: 1 / 1;\n\t\tplace-items: center;\n\t\tdisplay: grid;\n\t\tborder-radius: 8px;\n\t\tborder: 1px solid ~~#EAECF0~~;\n\t\tbackground: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);\n\t}\n\n\t.hero__text {\n\t\tcolor: var(--nile-hero-text-color);\n\t\tfont-size: var(--nile-hero-text-font-size);\n\t\tline-height: var(--nile-hero-text-line-height);\n\t\tfont-style: normal;\n\t\tfont-weight: var(--nile-hero-text-font-weight);\n\t}\n`;\n\nexport default [styles];"]}
1	+ {"version":3,"file":"nile-hero-header.css.js","sourceRoot":"","sources":["../../../src/nile-hero-header/nile-hero-header.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n\n This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n/\n\nimport {css} from 'lit';\n\n/\n HeroHeader CSS\n */\nexport const styles = css`\n\t\n\t:host {\n\t\twidth:100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding:16px 48px;\n\t\tgap: 16px;\n\t\tborder-bottom: 1px solid rgb(234, 236, 240);\n\t}\n\n\t.icon__container {\n\t\theight: 32px;\n\t\taspect-ratio: 1 / 1;\n\t\tplace-items: center;\n\t\tdisplay: grid;\n\t\tborder-radius: 8px;\n\t\tborder: 1px solid var(--nile-colors-neutral-400);\n\t\tbackground: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);\n\t}\n\n\t.hero__text {\n\t\tcolor: var(--nile-hero-text-color);\n\t\tfont-size: var(--nile-hero-text-font-size);\n\t\tline-height: var(--nile-hero-text-line-height);\n\t\tfont-style: normal;\n\t\tfont-weight: var(--nile-hero-text-font-weight);\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-icon/index.js CHANGED Viewed

@@ -133,7 +133,7 @@ let NileIcon = class NileIcon extends LitElement {
         if ((!this._svg.includes('fill=') || this._svg.includes('fill="inherit"')) &&
             !this.color) {
             // Case 1: _svg does not have fill color or has fill="inherit" and this.color is not mentioned
-            this.style.setProperty('--nile-svg-fill', `#7F7F7F`);
+            this.style.setProperty('--nile-svg-fill', `var(--nile-colors-dark-500)`);
         }
         else if (this.color) {
             // Case 2: If this.color is mentioned, use it as fill, regardless of _svg color

package/dist/src/nile-icon/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-icon/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport * as Icons from './icons/svg';\n\ninterface IconPaths {\n [key: string]: string;\n}\n\ninterface ButtonClassMap {\n [key:string]: boolean;\n}\n\nconst iconPaths: IconPaths = Icons as IconPaths;\n\nconst SMALL_ICON_SIZE = 16;\nconst LARGE_ICON_SIZE = 24;\n\n/*\n Nile icon component.\n \n @tag nile-icon\n \n /\n@customElement('nile-icon')\nexport class NileIcon extends LitElement {\n /*\n The name of the icon set\n * @attr icon set\n * @type {IconName \| undefined}\n /\n @property({ type: String, reflect: true })\n public set?: string = 'local';\n\n /\n The name of the icon\n * @attr name\n * @type {IconName \| undefined}\n /\n @property({ type: String, reflect: true })\n public name?: string;\n\n /\n A description of what the icon represents\n * @attr description\n /\n @property({ type: String, reflect: true })\n public description = '';\n\n @property({ type: String, reflect: true })\n public method = 'fill';\n\n /\n A path to a custom SVG file to display as the icon\n * @attr customSvgPath\n /\n @property({ type: String })\n public customSvgPath?: string;\n\n /\n A size of what the icon represents\n * @attr size\n /\n @property({ type: String, reflect: true })\n public size = SMALL_ICON_SIZE;\n\n @state()\n private _svg = '';\n\n @property({ type: String }) override title = 'agents';\n\n /\n Color\n /\n @property({ reflect: true }) color: any ;\n\n @property({ type: Boolean })\n public push = false;\n\n /\n Retain Viewbox\n /\n\n @property({ reflect: true }) frame: any;\n\n static override styles = css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n contain: content;\n --nile-svg-stroke-width: 1.3;\n }\n\n .nds-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .nds-icon svg {\n height: var(--nile-svg-height);\n width: var(--nile-svg-width);\n stroke: var(--nile-svg-stroke);\n }\n\n .nds-icon svg path {\n fill: var(--nile-svg-fill);\n }\n\n .stroke svg path {\n fill: none !important;\n stroke: var(--nile-svg-fill) !important;\n stroke-width: var(--nile-svg-stroke-width);\n }\n\n .nds-icon--push {\n margin-right: 12px;\n }\n `;\n\n private _getIconSize(): number {\n return this.name?.endsWith('-small') ? SMALL_ICON_SIZE : LARGE_ICON_SIZE;\n }\n\n protected override async updated(\n changedProperties: PropertyValues\n ): Promise<void> {\n if (changedProperties.has('size')) {\n this.style.setProperty('--nile-svg-height', `${this.size}px`);\n this.style.setProperty('--nile-svg-width', `${this.size}px`);\n }\n if (changedProperties.has('color')) {\n this.style.setProperty('--nile-svg-fill', `${this.color}`);\n }\n if (\n changedProperties.has('name') \|\|\n changedProperties.has('customSvgPath')\n ) {\n let iconName = this.name ? this.removeHyphens(this.name) : undefined;\n if (iconName && iconPaths[iconName]) {\n this._svg = atob(iconPaths[iconName]);\n } else if (this.customSvgPath) {\n this._svg = await this.fetchSvg(this.customSvgPath);\n } else {\n // throw new Error(`No icon named \"${this.name}\"`);\n }\n }\n this.addAttributesToSvg();\n }\n\n private addAttributesToSvg(){\n const svg = this.renderRoot.querySelector('#svg')\n const attrs = svg?.attributes\n if(!attrs?.getNamedItem('xmlns')){\n svg?.setAttribute('xmlns',\"http://www.w3.org/2000/svg\");\n }\n if(!attrs?.getNamedItem('version')){\n svg?.setAttribute(\"version\",\"1.1\")\n }\n if(this.frame){\n svg?.setAttribute('viewBox',`0 0 ${this.frame} ${this.frame}`)\n }\n else if(!attrs?.getNamedItem('viewBox')){\n const viewboxLogic = this.frame\n ? `0 0 ${this.frame} ${this.frame}`\n : '0 0 16 16';\n svg?.setAttribute('viewBox',viewboxLogic)\n }\n\n if(!attrs?.getNamedItem('height')){\n svg?.setAttribute('height',String(this.size));\n svg?.setAttribute('width',String(this.size));\n }\n\n svg?.setAttribute('aria-hidden',`${this.description === ''}`);\n svg?.setAttribute('aria-label',this.description \|\| '');\n\n const additionalClasses = Object.keys(this.buttonClassMap).filter((key:string)=> this.buttonClassMap[key])\n\n svg?.classList.add('nds-icon',...additionalClasses)\n }\n\n private async fetchSvg(path: string): Promise<string> {\n const response = await fetch(path);\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n return await response.text();\n }\n\n private removeHyphens(iconName: string) {\n return iconName.replace(/-/g, '');\n }\n\n private getSvgTemplate(){\n const svgTagRegexPattern =/<svg\\s[^>]>/;\n const regexToGetSVGAttrs = this._svg.match(svgTagRegexPattern);\n const svgAttrs = regexToGetSVGAttrs?.[0].replace('<svg','').replace('>','')\n const svgBody = this._svg.replace(\n svgTagRegexPattern,\n ''\n )\n .replace('</svg>', '')\n return `<svg\n id='svg'\n focusable='true'\n role='img'\n ${svgAttrs}\n >\n ${svgBody}\n </svg>`\n }\n\n get buttonClassMap() {\n return {\n 'stroke': this.method != 'fill' ,\n 'nds-icon--push': this.push,\n } as ButtonClassMap;\n }\n\n protected override render(): TemplateResult {\n const size = this.size;\n const color = this.color;\n\n /*\n When icons are outside frame\n */\n const viewboxLogic = this.frame\n ? `0 0 ${this.frame} ${this.frame}`\n : '0 0 16 16';\n\n\n if (\n (!this._svg.includes('fill=') \|\| this._svg.includes('fill=\"inherit\"')) &&\n !this.color\n ) {\n // Case 1: _svg does not have fill color or has fill=\"inherit\" and this.color is not mentioned\n this.style.setProperty('--nile-svg-fill', `#7F7F7F`);\n\n } else if (this.color) {\n // Case 2: If this.color is mentioned, use it as fill, regardless of _svg color\n this.style.setProperty('--nile-svg-fill', `${this.color}`);\n }\n\n return html`\n <span class=\"nds-icon ${classMap(this.buttonClassMap)}\">\n ${unsafeSVG(this.getSvgTemplate())}\n </span>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-icon': NileIcon;\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-icon/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport * as Icons from './icons/svg';\n\ninterface IconPaths {\n [key: string]: string;\n}\n\ninterface ButtonClassMap {\n [key:string]: boolean;\n}\n\nconst iconPaths: IconPaths = Icons as IconPaths;\n\nconst SMALL_ICON_SIZE = 16;\nconst LARGE_ICON_SIZE = 24;\n\n/*\n Nile icon component.\n \n @tag nile-icon\n \n /\n@customElement('nile-icon')\nexport class NileIcon extends LitElement {\n /*\n The name of the icon set\n * @attr icon set\n * @type {IconName \| undefined}\n /\n @property({ type: String, reflect: true })\n public set?: string = 'local';\n\n /\n The name of the icon\n * @attr name\n * @type {IconName \| undefined}\n /\n @property({ type: String, reflect: true })\n public name?: string;\n\n /\n A description of what the icon represents\n * @attr description\n /\n @property({ type: String, reflect: true })\n public description = '';\n\n @property({ type: String, reflect: true })\n public method = 'fill';\n\n /\n A path to a custom SVG file to display as the icon\n * @attr customSvgPath\n /\n @property({ type: String })\n public customSvgPath?: string;\n\n /\n A size of what the icon represents\n * @attr size\n /\n @property({ type: String, reflect: true })\n public size = SMALL_ICON_SIZE;\n\n @state()\n private _svg = '';\n\n @property({ type: String }) override title = 'agents';\n\n /\n Color\n /\n @property({ reflect: true }) color: any ;\n\n @property({ type: Boolean })\n public push = false;\n\n /\n Retain Viewbox\n /\n\n @property({ reflect: true }) frame: any;\n\n static override styles = css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n contain: content;\n --nile-svg-stroke-width: 1.3;\n }\n\n .nds-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .nds-icon svg {\n height: var(--nile-svg-height);\n width: var(--nile-svg-width);\n stroke: var(--nile-svg-stroke);\n }\n\n .nds-icon svg path {\n fill: var(--nile-svg-fill);\n }\n\n .stroke svg path {\n fill: none !important;\n stroke: var(--nile-svg-fill) !important;\n stroke-width: var(--nile-svg-stroke-width);\n }\n\n .nds-icon--push {\n margin-right: 12px;\n }\n `;\n\n private _getIconSize(): number {\n return this.name?.endsWith('-small') ? SMALL_ICON_SIZE : LARGE_ICON_SIZE;\n }\n\n protected override async updated(\n changedProperties: PropertyValues\n ): Promise<void> {\n if (changedProperties.has('size')) {\n this.style.setProperty('--nile-svg-height', `${this.size}px`);\n this.style.setProperty('--nile-svg-width', `${this.size}px`);\n }\n if (changedProperties.has('color')) {\n this.style.setProperty('--nile-svg-fill', `${this.color}`);\n }\n if (\n changedProperties.has('name') \|\|\n changedProperties.has('customSvgPath')\n ) {\n let iconName = this.name ? this.removeHyphens(this.name) : undefined;\n if (iconName && iconPaths[iconName]) {\n this._svg = atob(iconPaths[iconName]);\n } else if (this.customSvgPath) {\n this._svg = await this.fetchSvg(this.customSvgPath);\n } else {\n // throw new Error(`No icon named \"${this.name}\"`);\n }\n }\n this.addAttributesToSvg();\n }\n\n private addAttributesToSvg(){\n const svg = this.renderRoot.querySelector('#svg')\n const attrs = svg?.attributes\n if(!attrs?.getNamedItem('xmlns')){\n svg?.setAttribute('xmlns',\"http://www.w3.org/2000/svg\");\n }\n if(!attrs?.getNamedItem('version')){\n svg?.setAttribute(\"version\",\"1.1\")\n }\n if(this.frame){\n svg?.setAttribute('viewBox',`0 0 ${this.frame} ${this.frame}`)\n }\n else if(!attrs?.getNamedItem('viewBox')){\n const viewboxLogic = this.frame\n ? `0 0 ${this.frame} ${this.frame}`\n : '0 0 16 16';\n svg?.setAttribute('viewBox',viewboxLogic)\n }\n\n if(!attrs?.getNamedItem('height')){\n svg?.setAttribute('height',String(this.size));\n svg?.setAttribute('width',String(this.size));\n }\n\n svg?.setAttribute('aria-hidden',`${this.description === ''}`);\n svg?.setAttribute('aria-label',this.description \|\| '');\n\n const additionalClasses = Object.keys(this.buttonClassMap).filter((key:string)=> this.buttonClassMap[key])\n\n svg?.classList.add('nds-icon',...additionalClasses)\n }\n\n private async fetchSvg(path: string): Promise<string> {\n const response = await fetch(path);\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n return await response.text();\n }\n\n private removeHyphens(iconName: string) {\n return iconName.replace(/-/g, '');\n }\n\n private getSvgTemplate(){\n const svgTagRegexPattern =/<svg\\s[^>]>/;\n const regexToGetSVGAttrs = this._svg.match(svgTagRegexPattern);\n const svgAttrs = regexToGetSVGAttrs?.[0].replace('<svg','').replace('>','')\n const svgBody = this._svg.replace(\n svgTagRegexPattern,\n ''\n )\n .replace('</svg>', '')\n return `<svg\n id='svg'\n focusable='true'\n role='img'\n ${svgAttrs}\n >\n ${svgBody}\n </svg>`\n }\n\n get buttonClassMap() {\n return {\n 'stroke': this.method != 'fill' ,\n 'nds-icon--push': this.push,\n } as ButtonClassMap;\n }\n\n protected override render(): TemplateResult {\n const size = this.size;\n const color = this.color;\n\n /*\n When icons are outside frame\n */\n const viewboxLogic = this.frame\n ? `0 0 ${this.frame} ${this.frame}`\n : '0 0 16 16';\n\n\n if (\n (!this._svg.includes('fill=') \|\| this._svg.includes('fill=\"inherit\"')) &&\n !this.color\n ) {\n // Case 1: _svg does not have fill color or has fill=\"inherit\" and this.color is not mentioned\n this.style.setProperty('--nile-svg-fill', `var(--nile-colors-dark-500)`);\n\n } else if (this.color) {\n // Case 2: If this.color is mentioned, use it as fill, regardless of _svg color\n this.style.setProperty('--nile-svg-fill', `${this.color}`);\n }\n\n return html`\n <span class=\"nds-icon ${classMap(this.buttonClassMap)}\">\n ${unsafeSVG(this.getSvgTemplate())}\n </span>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-icon': NileIcon;\n }\n}\n"]}

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

@@ -42,20 +42,20 @@ export const styles = css `
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: #a4121c;
+    color: var(--nile-colors-red-700);
   }
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: #7f7f7f;
+    color: var(--nile-colors-dark-500);
     margin-top: 6px;
   }
   /* Error message */
   .form-control__error-message {
     display: block;
-    color: #a4121c;
+    color: var(--nile-colors-red-700);
     margin-top: 12px;
     font-size: 12px;
     font-style: normal;
@@ -103,12 +103,12 @@ export const styles = css `
   .input--standard:hover:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
-    border-color: #000;
+    border-color: var(--nile-colors-dark-900);
   }
   .input--standard.input--focused:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
-    border-color: #85aad1;
+    border-color: var(--nile-colors-primary-500);
     box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);
   }
@@ -117,8 +117,8 @@ export const styles = css `
   }
   .input--standard.input--disabled {
-    background-color: #fff;
-    border-color: #c7ced4;
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-500);
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -136,46 +136,46 @@ export const styles = css `
   }
   .input--standard.input--error {
-    border-color: #e5434d;
+    border-color: var(--nile-colors-red-500);
   }
   .input--standard.input--success {
-    border-color: #43e5c0;
+    border-color: var(--nile-colors-green-500);
   }
   .input--standard.input--destructive {
-    border-color: #fda29b;
+    border-color: var(--nile-colors-red-400);
   }
   .input--standard.input--focused.input--destructive:not(.input--disabled) {
-    border: 1px solid #fda29b;
+    border: 1px solid var(--nile-colors-red-400);
     box-shadow: var(--nile-input-shadow-destructive-active);
   }
   .input--destructive:active {
-    border: 1px solid #fda29b;
+    border: 1px solid var(--nile-colors-red-400);
     box-shadow: var(--nile-input-shadow-destructive-active);
   }
   /* Filled inputs */
   .input--filled {
     border: none;
-    background-color: #F1F1F2;
+    background-color: var(--nile-colors-dark-100);
     color: hsl(240 5.3% 26.1%);
   }
   .input--filled:hover:not(.input--disabled) {
-    background-color: #F1F1F2;
+    background-color: var(--nile-colors-dark-100);
   }
   .input--filled.input--focused:not(.input--disabled) {
-    background-color: #F1F1F2;
+    background-color: var(--nile-colors-dark-100);
     outline: solid 3px hsl(200.4 98% 39.4%);
     outline-offset: 1px;
   }
   .input--filled.input--disabled {
-    background-color: #F1F1F2;
+    background-color: var(--nile-colors-dark-100);
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -232,28 +232,28 @@ export const styles = css `
   }
   .input--filled .input__control:-webkit-autofill {
-    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
   }
   .input--filled .input__control:-webkit-autofill:hover {
-    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
   }
   .input--filled .input__control:-webkit-autofill:focus {
-    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
   }
   .input--filled .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
   }
   .input__control::placeholder {
-    color: #667085;
+    color: var(--nile-colors-neutral-700);
     user-select: none;
   }
   .input:hover:not(.input--disabled) .input__control {
-    color: #000;
+    color: var(--nile-colors-dark-900);
   }
   .input__control:focus {
@@ -278,7 +278,7 @@ export const styles = css `
   .input--standard:focus {
     border-radius: 4px;
-    border: 1px solid #85aad1;
+    border: 1px solid var(--nile-colors-primary-500);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }

package/dist/src/nile-input/nile-input.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAifxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Input CSS\n /\nexport const styles = css`\n :host {\n display: block;\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: 6px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '';\n margin-inline-start: -2px;\n color: #a4121c;\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7f7f7f;\n margin-top: 6px;\n }\n\n / Error message /\n .form-control__error-message {\n display: block;\n color: #a4121c;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\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: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n / Standard inputs /\n .input--standard {\n background-color: var(--nile-input-standard-background-color);\n border: solid 1px var(--nile-input-standard-border-color);\n box-shadow: var(--nile-input-shadow-standard);\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #85aad1;\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--nile-input-standard-disabled-placeholder-font-color);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n .input--standard.input--destructive {\n border-color: #fda29b;\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid #fda29b;\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n .input--destructive:active {\n border: 1px solid #fda29b;\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n / Filled inputs /\n .input--filled {\n border: none;\n background-color: #F1F1F2;\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: #F1F1F2;\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: #F1F1F2;\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: #F1F1F2;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-sans-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\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 hsl(0, 0%, 100%) 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 hsl(0, 0%, 100%) 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 hsl(0, 0%, 100%) 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 hsl(0, 0%, 100%) 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 #F1F1F2 inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;\n }\n\n .input__control::placeholder {\n color: #667085;\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\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: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input--standard:focus {\n border-radius: 4px;\n border: 1px solid #85aad1;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n /\n * Size modifiers\n /\n\n .input--small {\n border-radius: 0.25rem;\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: 0 0.75rem;\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: 0.75rem;\n }\n\n .input--small .input__suffix::slotted() {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-medium);\n height: 40px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\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: 12px;\n }\n\n .input--medium .input__suffix::slotted() {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\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: 1.25rem;\n }\n\n .input--large .input__suffix::slotted() {\n margin-inline-end: 1.25rem;\n }\n\n /\n Pill modifier\n /\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\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: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\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: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\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-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: 'disc';\n letter-spacing: 2px;\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n line-height: 16px;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-break: break-all;\n line-height: 16px;\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"]}
1	+ {"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAifxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Input CSS\n /\nexport const styles = css`\n :host {\n display: block;\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: 6px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\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);\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: 6px;\n }\n\n / Error message /\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\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: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n / Standard inputs /\n .input--standard {\n background-color: var(--nile-input-standard-background-color);\n border: solid 1px var(--nile-input-standard-border-color);\n box-shadow: var(--nile-input-shadow-standard);\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: var(--nile-colors-dark-900);\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: var(--nile-colors-primary-500);\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--nile-input-standard-disabled-placeholder-font-color);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .input--standard.input--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .input--standard.input--destructive {\n border-color: var(--nile-colors-red-400);\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n .input--destructive:active {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n / Filled inputs /\n .input--filled {\n border: none;\n background-color: var(--nile-colors-dark-100);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: var(--nile-colors-dark-100);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-sans-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\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 hsl(0, 0%, 100%) 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 hsl(0, 0%, 100%) 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 hsl(0, 0%, 100%) 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 hsl(0, 0%, 100%) inset !important;\n / -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); /\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input__control::placeholder {\n color: var(--nile-colors-neutral-700);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: var(--nile-colors-dark-900);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input--standard:focus {\n border-radius: 4px;\n border: 1px solid var(--nile-colors-primary-500);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n /\n * Size modifiers\n /\n\n .input--small {\n border-radius: 0.25rem;\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: 0 0.75rem;\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: 0.75rem;\n }\n\n .input--small .input__suffix::slotted() {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-medium);\n height: 40px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\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: 12px;\n }\n\n .input--medium .input__suffix::slotted() {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\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: 1.25rem;\n }\n\n .input--large .input__suffix::slotted() {\n margin-inline-end: 1.25rem;\n }\n\n /\n Pill modifier\n /\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\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: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\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: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\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-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: 'disc';\n letter-spacing: 2px;\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n line-height: 16px;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-break: break-all;\n line-height: 16px;\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"]}

package/dist/src/nile-link/nile-link.css.js CHANGED Viewed

@@ -52,17 +52,17 @@ export const styles = css `
   .link:not(.link--disabled):not(.link__button):active,
   .link:not(.link--disabled):not(.link__button):active .link__label {
-    color: #002f53;
+    color: var(--nile-colors-primary-900);
   }
   .link__button:hover {
     color: var(--nile-colors-primary-700);
     border-radius: var(--nile-radius-radius-xs);
-    background: #f5f7f7;
+    background: var(--nile-colors-dark-200);
   }
   .link__button:active {
-    color: #005EA61A;
+    color: var(--nile-colors-primary-100);
     border-radius: var(--nile-radius-radius-xs);
     background: rgba(0, 94, 166, 0.1);
   }

package/dist/src/nile-link/nile-link.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-link.css.js","sourceRoot":"","sources":["../../../src/nile-link/nile-link.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Link CSS\n */\nexport const styles = css`\n :host {\n }\n\n .link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n user-select: none;\n white-space: nowrap;\n padding: 12px;\n gap: 8px;\n height: 38px;\n box-sizing: border-box;\n cursor: pointer;\n text-decoration:none;\n }\n\n .link__label {\n color: var(--nile-colors-primary-600);\n text-align: center;\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .link--disabled {\n color: rgba(0, 94, 166, 0.5);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n\n .link:not(.link--disabled):not(.link__button):hover ,\n .link:not(.link--disabled):not(.link__button):hover .link__label {\n color: var(--nile-colors-primary-700);\n }\n\n .link:not(.link--disabled):not(.link__button):active,\n .link:not(.link--disabled):not(.link__button):active .link__label {\n color: ~~#002f53~~;\n }\n\n .link__button:hover {\n color: var(--nile-colors-primary-700);\n border-radius: var(--nile-radius-radius-xs);\n background: ~~#f5f7f7~~;\n }\n\n .link__button:active {\n color: ~~#005EA61A~~;\n border-radius: var(--nile-radius-radius-xs);\n background: rgba(0, 94, 166, 0.1);\n }\n\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-link.css.js","sourceRoot":"","sources":["../../../src/nile-link/nile-link.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Link CSS\n */\nexport const styles = css`\n :host {\n }\n\n .link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n user-select: none;\n white-space: nowrap;\n padding: 12px;\n gap: 8px;\n height: 38px;\n box-sizing: border-box;\n cursor: pointer;\n text-decoration:none;\n }\n\n .link__label {\n color: var(--nile-colors-primary-600);\n text-align: center;\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .link--disabled {\n color: rgba(0, 94, 166, 0.5);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n\n .link:not(.link--disabled):not(.link__button):hover ,\n .link:not(.link--disabled):not(.link__button):hover .link__label {\n color: var(--nile-colors-primary-700);\n }\n\n .link:not(.link--disabled):not(.link__button):active,\n .link:not(.link--disabled):not(.link__button):active .link__label {\n color: var(--nile-colors-primary-900);\n }\n\n .link__button:hover {\n color: var(--nile-colors-primary-700);\n border-radius: var(--nile-radius-radius-xs);\n background: var(--nile-colors-dark-200);\n }\n\n .link__button:active {\n color: var(--nile-colors-primary-100);\n border-radius: var(--nile-radius-radius-xs);\n background: rgba(0, 94, 166, 0.1);\n }\n\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-list-item/nile-list-item.css.js CHANGED Viewed

@@ -20,7 +20,7 @@ export const styles = css `
   }
   :host(:hover) {
-    background-color: #f0f0f0; /* Change background color on hover */
+    background-color: var(--nile-colors-neutral-400); /* Change background color on hover */
   }
   .preffix__icon {

package/dist/src/nile-list-item/nile-list-item.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-list-item.css.js","sourceRoot":"","sources":["../../../src/nile-list-item/nile-list-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n ListItem CSS\n /\nexport const styles = css`\n :host {\n display: flex;\n padding: 12px 16px;\n flex-direction: row;\n align-items: flex-start;\n justify-content: start;\n position: relative;\n height: 100%;\n }\n\n :host(:hover) {\n background-color: ~~#f0f0f0~~; / Change background color on hover */\n }\n\n .preffix__icon {\n display: inline-block;\n margin-right: 12px;\n }\n\n .list__item {\n cursor: pointer;\n height: 100%;\n display: block;\n font-size: 16px;\n }\n\n .content__wrapper {\n display: flex;\n flex-direction: column;\n gap: 3px;\n height: 100%;\n box-sizing: border-box;\n }\n\n .heading {\n display: inline-block;\n font-size: 18px;\n font-weight: 600;\n }\n\n .subheading {\n display: inline-block;\n font-size: 12px;\n font-weight: 300;\n }\n\n .list-item__suffix {\n display: inline-block;\n position: absolute;\n right: 16px;\n cursor: pointer;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-list-item.css.js","sourceRoot":"","sources":["../../../src/nile-list-item/nile-list-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n ListItem CSS\n /\nexport const styles = css`\n :host {\n display: flex;\n padding: 12px 16px;\n flex-direction: row;\n align-items: flex-start;\n justify-content: start;\n position: relative;\n height: 100%;\n }\n\n :host(:hover) {\n background-color: var(--nile-colors-neutral-400); / Change background color on hover */\n }\n\n .preffix__icon {\n display: inline-block;\n margin-right: 12px;\n }\n\n .list__item {\n cursor: pointer;\n height: 100%;\n display: block;\n font-size: 16px;\n }\n\n .content__wrapper {\n display: flex;\n flex-direction: column;\n gap: 3px;\n height: 100%;\n box-sizing: border-box;\n }\n\n .heading {\n display: inline-block;\n font-size: 18px;\n font-weight: 600;\n }\n\n .subheading {\n display: inline-block;\n font-size: 12px;\n font-weight: 300;\n }\n\n .list-item__suffix {\n display: inline-block;\n position: absolute;\n right: 16px;\n cursor: pointer;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-loader/nile-loader.js CHANGED Viewed

@@ -100,7 +100,7 @@ let NileLoader = class NileLoader extends LitElement {
           <path
             id="Background"
             d="M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16Z"
-            stroke="#F2F4F7"
+            stroke="var(--nile-colors-dark-200)"
             stroke-width="4"
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -108,7 +108,7 @@ let NileLoader = class NileLoader extends LitElement {
           <path
             id="Line"
             d="M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16"
-            stroke="#005EA6"
+            stroke="var(--nile-colors-primary-600)"
             stroke-width="4"
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -139,7 +139,7 @@ let NileLoader = class NileLoader extends LitElement {
           <path
             id="Line"
             d="M6.10051 6.1005C7.66275 4.53826 9.57255 3.36793 11.6738 2.68521C13.775 2.00248 16.0079 1.82675 18.1901 2.17236C20.3722 2.51798 22.4416 3.37514 24.229 4.67376C26.0164 5.97238 27.4711 7.67559 28.4741 9.64414C29.4771 11.6127 30 13.7907 30 16C30 18.2093 29.4771 20.3873 28.4741 22.3559C27.4711 24.3244 26.0164 26.0276 24.229 27.3262C22.4416 28.6249 20.3722 29.482 18.1901 29.8276"
-            stroke="#005EA6"
+            stroke="var(--nile-colors-primary-600)"
             stroke-width="4"
             stroke-linecap="round"
             stroke-linejoin="round"

package/dist/src/nile-loader/nile-loader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-loader.js","sourceRoot":"","sources":["../../../src/nile-loader/nile-loader.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, css, nothing } from 'lit';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './nile-loader.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\n\n@customElement('nile-loader')\nexport class NileLoader extends LitElement {\n @property({ type: String, attribute:'height' }) propHeight = '';\n @property({ type: String, attribute:'width' }) propWidth = '';\n @property({ type: String }) label = '';\n @property({ type: String }) size : 'sm' \| 'md' \| 'lg' \| 'xl'= 'lg';\n @property({ type: String }) margin = '';\n @property({ type: String }) variant = 'v1';\n\n private height: string;\n private width: string;\n\n connectedCallback(): void {\n super.connectedCallback()\n this.setSvgDimensions()\n }\n\n static override styles: CSSResultGroup = styles;\n\n /*\n Sets circular loader's dimension.\n * If either height or width is absent the dimensions defaults to dimension based on size variant\n */\n setSvgDimensions(){\n if (!parseInt(this.propHeight) \|\| !parseInt(this.propWidth)){\n switch (this.size) {\n case 'sm':\n this.height='32';\n this.width='32';\n break;\n case 'md':\n this.height='48';\n this.width='48';\n break;\n case 'lg':\n this.height='56';\n this.width='56';\n break;\n default:\n this.height='64';\n this.width='64';\n break;\n }\n }\n else{\n this.height=this.propHeight;\n this.width=this.propWidth;\n }\n }\n\n override render(){\n return html`\n <div class=\"loader__container\" class=${classMap({\n \"loader__container\":true,\n \"loader__container--sm\":this.size=='sm',\n \"loader__container--md\":this.size=='md',\n \"loader__container--lg\":this.size=='lg',\n \"loader__container--xl\":this.size=='xl'\n })}>\n <div class=${classMap({\"svg__container\":this.variant!=='v1'})}>${this.getVariant()}</div>\n ${!this.label?nothing:\n html`<div class=\"loader__label\">${this.label}</div>`\n }\n </div>\n `\n }\n\n private getVariant(): TemplateResult {\n switch (this.variant) {\n case 'v1':\n return this.renderV1();\n case 'v2':\n return this.renderV2();\n case 'v3':\n return this.renderV3();\n default:\n return this.renderV1();\n } \n }\n \n private renderV1(): TemplateResult {\n return html`\n <div\n style=\"width: ${this.width}px; \n height: ${this.height}px; \n background-size: ${this.width}px; \n margin: ${this.margin}\"\n class=\"nile-loader__v1\"\n ></div>\n `;\n }\n\n private renderV2(): TemplateResult {\n return html`\n <svg\n class=\"nile-loader__v2\"\n width=\"${this.width}\"\n height=\"${this.height}\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g id=\"Loading circle\">\n <path\n id=\"Background\"\n d=\"M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16Z\"\n stroke=\"~~#F2F4F7~~\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n id=\"Line\"\n d=\"M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16\"\n stroke=\"~~#005EA6~~\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n </svg>\n `;\n }\n\n private renderV3(): TemplateResult {\n return html`\n <svg\n class=\"nile-loader__v3\"\n width=\"${this.width}\"\n height=\"${this.height}\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g id=\"Loading circle\">\n <path\n id=\"Background\"\n d=\"M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16L30 16Z\"\n stroke=\"white\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n id=\"Line\"\n d=\"M6.10051 6.1005C7.66275 4.53826 9.57255 3.36793 11.6738 2.68521C13.775 2.00248 16.0079 1.82675 18.1901 2.17236C20.3722 2.51798 22.4416 3.37514 24.229 4.67376C26.0164 5.97238 27.4711 7.67559 28.4741 9.64414C29.4771 11.6127 30 13.7907 30 16C30 18.2093 29.4771 20.3873 28.4741 22.3559C27.4711 24.3244 26.0164 26.0276 24.229 27.3262C22.4416 28.6249 20.3722 29.482 18.1901 29.8276\"\n stroke=\"~~#005EA6~~\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n </svg>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-loader.js","sourceRoot":"","sources":["../../../src/nile-loader/nile-loader.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, css, nothing } from 'lit';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './nile-loader.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\n\n@customElement('nile-loader')\nexport class NileLoader extends LitElement {\n @property({ type: String, attribute:'height' }) propHeight = '';\n @property({ type: String, attribute:'width' }) propWidth = '';\n @property({ type: String }) label = '';\n @property({ type: String }) size : 'sm' \| 'md' \| 'lg' \| 'xl'= 'lg';\n @property({ type: String }) margin = '';\n @property({ type: String }) variant = 'v1';\n\n private height: string;\n private width: string;\n\n connectedCallback(): void {\n super.connectedCallback()\n this.setSvgDimensions()\n }\n\n static override styles: CSSResultGroup = styles;\n\n /*\n Sets circular loader's dimension.\n * If either height or width is absent the dimensions defaults to dimension based on size variant\n */\n setSvgDimensions(){\n if (!parseInt(this.propHeight) \|\| !parseInt(this.propWidth)){\n switch (this.size) {\n case 'sm':\n this.height='32';\n this.width='32';\n break;\n case 'md':\n this.height='48';\n this.width='48';\n break;\n case 'lg':\n this.height='56';\n this.width='56';\n break;\n default:\n this.height='64';\n this.width='64';\n break;\n }\n }\n else{\n this.height=this.propHeight;\n this.width=this.propWidth;\n }\n }\n\n override render(){\n return html`\n <div class=\"loader__container\" class=${classMap({\n \"loader__container\":true,\n \"loader__container--sm\":this.size=='sm',\n \"loader__container--md\":this.size=='md',\n \"loader__container--lg\":this.size=='lg',\n \"loader__container--xl\":this.size=='xl'\n })}>\n <div class=${classMap({\"svg__container\":this.variant!=='v1'})}>${this.getVariant()}</div>\n ${!this.label?nothing:\n html`<div class=\"loader__label\">${this.label}</div>`\n }\n </div>\n `\n }\n\n private getVariant(): TemplateResult {\n switch (this.variant) {\n case 'v1':\n return this.renderV1();\n case 'v2':\n return this.renderV2();\n case 'v3':\n return this.renderV3();\n default:\n return this.renderV1();\n } \n }\n \n private renderV1(): TemplateResult {\n return html`\n <div\n style=\"width: ${this.width}px; \n height: ${this.height}px; \n background-size: ${this.width}px; \n margin: ${this.margin}\"\n class=\"nile-loader__v1\"\n ></div>\n `;\n }\n\n private renderV2(): TemplateResult {\n return html`\n <svg\n class=\"nile-loader__v2\"\n width=\"${this.width}\"\n height=\"${this.height}\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g id=\"Loading circle\">\n <path\n id=\"Background\"\n d=\"M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16Z\"\n stroke=\"var(--nile-colors-dark-200)\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n id=\"Line\"\n d=\"M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16\"\n stroke=\"var(--nile-colors-primary-600)\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n </svg>\n `;\n }\n\n private renderV3(): TemplateResult {\n return html`\n <svg\n class=\"nile-loader__v3\"\n width=\"${this.width}\"\n height=\"${this.height}\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g id=\"Loading circle\">\n <path\n id=\"Background\"\n d=\"M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16L30 16Z\"\n stroke=\"white\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n id=\"Line\"\n d=\"M6.10051 6.1005C7.66275 4.53826 9.57255 3.36793 11.6738 2.68521C13.775 2.00248 16.0079 1.82675 18.1901 2.17236C20.3722 2.51798 22.4416 3.37514 24.229 4.67376C26.0164 5.97238 27.4711 7.67559 28.4741 9.64414C29.4771 11.6127 30 13.7907 30 16C30 18.2093 29.4771 20.3873 28.4741 22.3559C27.4711 24.3244 26.0164 26.0276 24.229 27.3262C22.4416 28.6249 20.3722 29.482 18.1901 29.8276\"\n stroke=\"var(--nile-colors-primary-600)\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n </svg>\n `;\n }\n}\n"]}

package/dist/src/nile-menu-item/nile-menu-item.css.js CHANGED Viewed

@@ -85,7 +85,7 @@ export const styles = css `
   }
   :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: #F9FAFB;
+    background-color: var(--nile-colors-neutral-100);
     color: hsl(0, 0%, 0%);
   }

package/dist/src/nile-menu-item/nile-menu-item.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n MenuItem CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n }\n\n :host([inert]) {\n display: none;\n }\n\n .menu-item {\n position: relative;\n display: flex;\n border-radius: 4px;\n align-items: stretch;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.8;\n letter-spacing: normal;\n color: hsl(240 5.3% 26.1%);\n min-height:40px;\n transition: 150ms fill;\n user-select: none;\n white-space: nowrap;\n cursor: pointer;\n padding:0 var(--nile-spacing-spacing-xl);\n }\n\n .menu-item.menu-item--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .menu-item .menu-item__label {\n margin: auto 0;\n display: inline-flex;\n }\n\n .menu-item .menu-item__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__prefix::slotted() {\n margin-inline-end: 0.5rem;\n }\n\n .menu-item .menu-item__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__suffix::slotted() {\n margin-inline-start: 0.5rem;\n }\n\n :host(:focus-visible) {\n outline: none;\n }\n\n :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: ~~#F9FAFB~~;\n color: hsl(0, 0%, 0%);\n }\n\n :host(:focus-visible) .menu-item {\n outline: none;\n background-color: hsl(200.4 98% 39.4%);\n color: hsl(0, 0%, 100%);\n opacity: 1;\n }\n\n .menu-item .menu-item__check,\n .menu-item .menu-item__chevron {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5em;\n visibility: hidden;\n }\n\n .menu-item--checked .menu-item__check,\n .menu-item--has-submenu .menu-item__chevron {\n visibility: visible;\n }\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .menu-item,\n :host(:focus-visible) .menu-item {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n MenuItem CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n }\n\n :host([inert]) {\n display: none;\n }\n\n .menu-item {\n position: relative;\n display: flex;\n border-radius: 4px;\n align-items: stretch;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.8;\n letter-spacing: normal;\n color: hsl(240 5.3% 26.1%);\n min-height:40px;\n transition: 150ms fill;\n user-select: none;\n white-space: nowrap;\n cursor: pointer;\n padding:0 var(--nile-spacing-spacing-xl);\n }\n\n .menu-item.menu-item--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .menu-item .menu-item__label {\n margin: auto 0;\n display: inline-flex;\n }\n\n .menu-item .menu-item__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__prefix::slotted() {\n margin-inline-end: 0.5rem;\n }\n\n .menu-item .menu-item__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__suffix::slotted() {\n margin-inline-start: 0.5rem;\n }\n\n :host(:focus-visible) {\n outline: none;\n }\n\n :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: var(--nile-colors-neutral-100);\n color: hsl(0, 0%, 0%);\n }\n\n :host(:focus-visible) .menu-item {\n outline: none;\n background-color: hsl(200.4 98% 39.4%);\n color: hsl(0, 0%, 100%);\n opacity: 1;\n }\n\n .menu-item .menu-item__check,\n .menu-item .menu-item__chevron {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5em;\n visibility: hidden;\n }\n\n .menu-item--checked .menu-item__check,\n .menu-item--has-submenu .menu-item__chevron {\n visibility: visible;\n }\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .menu-item,\n :host(:focus-visible) .menu-item {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-option/nile-option.css.js CHANGED Viewed

@@ -44,7 +44,7 @@ export const styles = css `
   .option--current,
   .option--current.option--disabled {
     background-color: rgba(0, 94, 166, 0.1);
-    color: #005ea6;
+    color: var(--nile-colors-primary-600);
     opacity: 1;
   }

package/dist/src/nile-option/nile-option.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Option_2 CSS\n /\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\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: 1rem;\n font-weight: 400;\n line-height: 1.8;\n letter-spacing: normal;\n color: hsl(240 5.3% 26.1%);\n padding: 6px 0;\n transition: 150ms fill;\n cursor: pointer;\n }\n\n .option--single-select {\n padding: 9px 12px;\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: rgba(0, 94, 166, 0.1);\n color: hsl(0, 0%, 0%);\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: rgba(0, 94, 166, 0.1);\n color: ~~#005ea6~~;\n opacity: 1;\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: 0.25rem;\n }\n\n .option--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: 0.5rem;\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: 0.5rem;\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: 12px;\n margin-right: 12px;\n width:auto;\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\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Option_2 CSS\n /\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\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: 1rem;\n font-weight: 400;\n line-height: 1.8;\n letter-spacing: normal;\n color: hsl(240 5.3% 26.1%);\n padding: 6px 0;\n transition: 150ms fill;\n cursor: pointer;\n }\n\n .option--single-select {\n padding: 9px 12px;\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: rgba(0, 94, 166, 0.1);\n color: hsl(0, 0%, 0%);\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: rgba(0, 94, 166, 0.1);\n color: var(--nile-colors-primary-600);\n opacity: 1;\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: 0.25rem;\n }\n\n .option--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: 0.5rem;\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: 0.5rem;\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: 12px;\n margin-right: 12px;\n width:auto;\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\nexport default [styles];\n"]}

package/dist/src/nile-popover/nile-popover.css.js CHANGED Viewed

@@ -15,7 +15,7 @@ export const styles = css `
   .popover__title {
     display: block;
-    color: #000;
+    color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-4);
     font-style: normal;
@@ -45,7 +45,7 @@ export const styles = css `
   nile-popup {
     --arrow-size: 18px;
-    --arrow-color: #ffff;
+    --arrow-color: var(--nile-colors-white-base);
   }
 `;
 export default [styles];

package/dist/src/nile-popover/nile-popover.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-popover.css.js","sourceRoot":"","sources":["../../../src/nile-popover/nile-popover.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Popover CSS\n */\nexport const styles = css`\n :host {\n box-sizing: 'border-box';\n }\n\n .popover__title {\n display: block;\n color: ~~#000~~;\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-4);\n font-style: normal;\n font-weight: 500;\n line-height: var(--nile-type-scale-4);\n letter-spacing: 0.2px;\n }\n\n .popover__box {\n display: flex;\n flex-direction: column;\n height: auto;\n min-width: 352px;\n gap: var(--nile-type-scale-4);\n padding: var(--nile-type-scale-4);\n border-radius: var(--nile-radius-base-standard);\n background-color: var(--nile-colors-white-base);\n border: solid 1px hsl(240 5.9% 90%);\n box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n }\n\n .popover__action {\n align-self: end;\n display: inline;\n }\n\n nile-popup {\n --arrow-size: 18px;\n --arrow-color: ~~#ffff~~;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-popover.css.js","sourceRoot":"","sources":["../../../src/nile-popover/nile-popover.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Popover CSS\n */\nexport const styles = css`\n :host {\n box-sizing: 'border-box';\n }\n\n .popover__title {\n display: block;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-4);\n font-style: normal;\n font-weight: 500;\n line-height: var(--nile-type-scale-4);\n letter-spacing: 0.2px;\n }\n\n .popover__box {\n display: flex;\n flex-direction: column;\n height: auto;\n min-width: 352px;\n gap: var(--nile-type-scale-4);\n padding: var(--nile-type-scale-4);\n border-radius: var(--nile-radius-base-standard);\n background-color: var(--nile-colors-white-base);\n border: solid 1px hsl(240 5.9% 90%);\n box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n }\n\n .popover__action {\n align-self: end;\n display: inline;\n }\n\n nile-popup {\n --arrow-size: 18px;\n --arrow-color: var(--nile-colors-white-base);\n }\n`;\n\nexport default [styles];\n"]}