npm - @aquera/nile-elements - Versions diffs - 0.0.67 → 0.0.69 - Mend

@aquera/nile-elements 0.0.67 → 0.0.69

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 (656) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,WAAW;IAApC;;QASL,kCAAkC;QACS,QAAG,GAAG,EAAE,CAAC;QAEpD,oDAAoD;QACT,SAAI,GAAG,EAAE,CAAC;QAErD,gDAAgD;QACiB,YAAO,GAAG,EAAE,CAAC;QAE9E,kDAAkD;QAElD,cAAS,GAAG,MAAM,CAAC;QAEnB,oDAAoD;QAEpD,gBAAW,GAAG,qBAAqB,CAAC;QAEpC,yBAAyB;QACI,SAAI,~~GAId~~,QAAQ,CAAC;~~QAE5B~~,iDAAiD;QACL,cAAS,GAAG,KAAK,CAAC;QAE9D,gBAAgB;QAEhB,qBAAqB;QAErB;;;WAGG;QACc,oBAAe,GAAG,IAAI,CAAC;QAEvB,yBAAoB,GAAG,IAAI,CAAA,EAAE,CAAC;~~QAwE~~/C,gBAAgB;IAClB,CAAC;~~IAtHC~~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~~AA7G4C~~;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAU;AAGT;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAW;AAGY;IAAhE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,SAAS,EAAE,UAAU,EAAE,CAAC;2CAAc;AAI9E;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;6CAChD;AAInB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;+CACjC;AAGP;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;~~wCAIA~~;~~AAGgB~~;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAmB;AAUrD;IAAR,KAAK,EAAE;mDAAgC;AAE/B;IAAR,KAAK,EAAE;wDAAuC;AA9CpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,~~CAuHtB~~;~~SAvHY~~,UAAU;~~AAyHvB~~,eAAe,UAAU,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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\nimport { string } from '../nile-icon/icons/svg';\n\n/\n Nile icon component.\n \n @tag nile-avatar\n \n /\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n /*\n The styles for Avatar\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /* Gives the url to the Avatar /\n @property({ type: String, reflect: true }) src = '';\n\n /* Gives the default Image Letters to the Avatar /\n @property({ type: String, reflect: true }) name = '';\n\n /* Gives the default bg color to the Avatar /\n @property({ type: String, reflect: true,attribute: 'bg-color' }) bgColor = '';\n\n /* Gives the default text color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'text-color' })\n textColor = '#fff';\n\n /* Gives the default border color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'border-color' })\n borderColor = 'rgba(0, 0, 0, 0.08)';\n\n /* Size of the Avatar /\n @property({ reflect: true }) size:\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'extralarge' = 'medium';\n\n /* Gives a border radius of 50% to the Avatar /\n @property({ type: Boolean, reflect: true }) isRounded = false;\n\n / #endregion /\n\n / #region Methods /\n\n /\n Render method\n * @slot This is a slot test\n /\n @state() private isDefaultAvatar = true;\n\n @state() private defaultAvatarContent = html``;\n\n private generateInitials(name: String): string {\n if (!name) {\n return '';\n }\n const nameParts = name\n .split(' ')\n .filter(part => part.length > 0)\n .map(part => part.charAt(0).toUpperCase())\n .slice(0, 2);\n return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n }\n\n private generateVariantCode(initials: string): number {\n const char1 = initials.charCodeAt(0);\n const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n const multifactor = char1 char2 + (char1 % 23) + (char2 % 23);\n return multifactor % 5;\n }\n\n private handleImageError(event: Event): void {\n const defaultInitials = this.generateInitials(this.name);\n const variant__code = this.generateVariantCode(defaultInitials);\n\n this.defaultAvatarContent = html`<div\n class=${classMap({\n text__avatar: true,\n avatar__small: this.size === 'small',\n avatar__medium: this.size === 'medium',\n avatar__large: this.size === 'large',\n avatar__extralarge: this.size === 'extralarge',\n avatar__rounded: this.isRounded,\n variant__orange: variant__code === 0 && !this.bgColor,\n variant__pink: variant__code === 1 && !this.bgColor,\n variant__blue: variant__code === 2 && !this.bgColor,\n variant__light_blue: variant__code === 3 && !this.bgColor,\n variant__green: variant__code === 4 && !this.bgColor,\n })}\n style=\"background-color: ${this.bgColor};color:${this\n .textColor};border-color:${this.borderColor}\"\n >\n ${defaultInitials\n ? defaultInitials\n : html`<nile-icon name=\"user\" color=\"grey\" size=\"14\"></nile-icon>`}\n </div>`;\n\n this.isDefaultAvatar = false;\n }\n\n public render(): TemplateResult {\n return html`\n ${this.isDefaultAvatar\n ? html` <img\n src=\"${this.src}\"\n class=\"avatar\"\n class=${classMap({\n avatar: true,\n avatar__small: this.size === 'small',\n avatar__medium: this.size === 'medium',\n avatar__large: this.size === 'large',\n avatar__extralarge: this.size === 'extralarge',\n avatar__rounded: this.isRounded,\n })}\n style=\"\tbackground-image: url(${this\n .src}), linear-gradient(lightgray, lightgray);\"\n @error=\"${this.handleImageError}\"\n />`\n : html`${this.defaultAvatarContent}`}\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-avatar': NileAvatar;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\nimport { string } from '../nile-icon/icons/svg';\n\n/\n Nile icon component.\n \n @tag nile-avatar\n \n /\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n /*\n The styles for Avatar\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /* Gives the url to the Avatar /\n @property({ type: String, reflect: true }) src = '';\n\n /* Gives the default Image Letters to the Avatar /\n @property({ type: String, reflect: true }) name = '';\n\n /* Gives the default bg color to the Avatar /\n @property({ type: String, reflect: true,attribute: 'bg-color' }) bgColor = '';\n\n /* Gives the default text color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'text-color' })\n textColor = '#fff';\n\n /* Gives the default border color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'border-color' })\n borderColor = 'rgba(0, 0, 0, 0.08)';\n\n /* Size of the Avatar /\n @property({ reflect: true }) size:\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'extralarge'\|'2xl' = 'medium';\n\n /* Gives a border radius of 50% to the Avatar /\n @property({ type: Boolean, reflect: true }) isRounded = false;\n\n / #endregion /\n\n / #region Methods /\n\n /\n Render method\n * @slot This is a slot test\n /\n @state() private isDefaultAvatar = true;\n\n @state() private defaultAvatarContent = html``;\n\n private generateInitials(name: String): string {\n if (!name) {\n return '';\n }\n const nameParts = name\n .split(' ')\n .filter(part => part.length > 0)\n .map(part => part.charAt(0).toUpperCase())\n .slice(0, 2);\n return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n }\n\n private generateVariantCode(initials: string): number {\n const char1 = initials.charCodeAt(0);\n const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n const multifactor = char1 char2 + (char1 % 23) + (char2 % 23);\n return multifactor % 5;\n }\n\n private handleImageError(event: Event): void {\n const defaultInitials = this.generateInitials(this.name);\n const variant__code = this.generateVariantCode(defaultInitials);\n\n this.defaultAvatarContent = html`<div\n class=${classMap({\n text__avatar: true,\n avatar__small: this.size === 'small',\n avatar__medium: this.size === 'medium',\n avatar__large: this.size === 'large',\n avatar__extralarge: this.size === 'extralarge',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n variant__orange: variant__code === 0 && !this.bgColor,\n variant__pink: variant__code === 1 && !this.bgColor,\n variant__blue: variant__code === 2 && !this.bgColor,\n variant__light_blue: variant__code === 3 && !this.bgColor,\n variant__green: variant__code === 4 && !this.bgColor,\n })}\n style=\"background-color: ${this.bgColor};color:${this\n .textColor};border-color:${this.borderColor}\"\n >\n ${defaultInitials\n ? defaultInitials\n : html`<nile-icon name=\"user\" color=\"grey\" size=\"14\"></nile-icon>`}\n </div>`;\n\n this.isDefaultAvatar = false;\n }\n\n public render(): TemplateResult {\n return html`\n ${this.isDefaultAvatar\n ? html` <img\n src=\"${this.src}\"\n class=\"avatar\"\n class=${classMap({\n avatar: true,\n avatar__small: this.size === 'small',\n avatar__medium: this.size === 'medium',\n avatar__large: this.size === 'large',\n avatar__extralarge: this.size === 'extralarge',\n avatar__rounded: this.isRounded,\n })}\n style=\"\tbackground-image: url(${this\n .src}), linear-gradient(lightgray, lightgray);\"\n @error=\"${this.handleImageError}\"\n />`\n : html`${this.defaultAvatarContent}`}\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-avatar': NileAvatar;\n }\n}\n"]}

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

@@ -13,20 +13,21 @@ export const styles = css `
   }
   .badge {
-    padding: 0 4px;
+    padding: 2px 6px;
     border-radius: 4px;
-    height: 16px;
-    font-size: 10.24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
+    height: 22px;
   }
   .badge__content {
     font-family: var(--nile-font-family-serif);
-    font-size: 10.24px;
+    font-size: 12px;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 500;
+    line-height: 18px;
     letter-spacing: 0.2px;
   }
@@ -166,6 +167,7 @@ export const styles = css `
   }
   .badge--rounded {
+    padding: 2px 8px;
     border-radius: 100px;
   }
 `;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKxB~~,CAAC;AACF,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-element';\n\n/\n Tag CSS\n /\nexport const styles = css`\n :host {\n }\n\n .badge {\n padding: 0 ~~4px~~;\n border-radius: 4px;\n ~~height: 16px;\n font-size: 10.24px;\n~~ display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .badge__content {\n font-family: var(--nile-font-family-serif);\n font-size: ~~10.24px~~;\n font-style: normal;\n font-weight: ~~400~~;\n letter-spacing: 0.2px;\n }\n\n .badge--primary {\n background: #005ea6;\n }\n\n .badge--normal {\n background: #e5e9eb;\n }\n\n .badge--info {\n background: #a5d3f3;\n }\n\n / for v2 */\n .badge--pink {\n color: #c11574;\n border: 1px solid #fcceee;\n background: #fdf2fa;\n }\n\n .badge--orange {\n color: #b93815;\n border: 1px solid #f9dbaf;\n background: #fef6ee;\n }\n\n .badge--purple {\n color: #5925dc;\n border: 1px solid #d9d6fe;\n background: #f4f3ff;\n }\n\n .badge--indigo {\n color: #3538cd;\n border: 1px solid #c7d7fe;\n background: #eef4ff;\n }\n\n .badge--blue {\n color: #175cd3;\n border: 1px solid #b2ddff;\n background: #eff8ff;\n }\n .badge--blue-light {\n color: #026aa2;\n border: 1px solid #b9e6fe;\n background: #f0f9ff;\n }\n\n .badge--gray-blue {\n color: #363f72;\n border: 1px solid #d5d9eb;\n background: #f8f9fc;\n }\n\n .badge--success {\n color: var(--nile-badge-color-font-success);\n border: var(--nile-badge-color-border-width) solid #abefc6;\n background: var(--nile-badge-color-background-success);\n }\n .badge--warning {\n color: var(--nile-badge-color-font-warning);\n border: var(--nile-badge-color-border-width) solid #fedf89;\n background: var(--nile-badge-color-background-warning);\n }\n\n .badge--error {\n color: var(--nile-badge-color-font-error);\n border: var(--nile-badge-color-border-width) solid #fecdca;\n background: var(--nile-badge-color-background-error);\n }\n\n .badge--brand {\n color: #005291;\n border: 1px solid #b5c9e0;\n background: #eaf0f8;\n }\n\n .badge--gray {\n color: #344054;\n border: 1px solid #eaecf0;\n background: #f9fafb;\n }\n\n .badge--pink.badge--pill-outline {\n border: 1px solid #dd2590;\n }\n\n .badge--orange.badge--pill-outline {\n border: 1px solid #e04f16;\n }\n\n .badge--purple.badge--pill-outline {\n border: 1px solid #6938ef;\n }\n\n .badge--indigo.badge--pill-outline {\n border: 1px solid #444ce7;\n }\n\n .badge--blue.badge--pill-outline {\n border: 1px solid #1570ef;\n }\n\n .badge--blue-light.badge--pill-outline {\n border: 1px solid #0086c9;\n }\n\n .badge--gray-blue.badge--pill-outline {\n border: 1px solid #3e4784;\n }\n\n .badge--success.badge--pill-outline {\n border: 1px solid #079455;\n }\n\n .badge--warning.badge--pill-outline {\n border: 1px solid #dc6803;\n }\n\n .badge--error.badge--pill-outline {\n border: 1px solid #d92d20;\n }\n\n .badge--brand.badge--pill-outline {\n border: 1px solid #005ea6;\n }\n\n .badge--gray.badge--pill-outline {\n border: 1px solid #475467;\n }\n\n .badge--pill-outline {\n background: transparent;\n }\n\n .badge--rounded {\n border-radius: 100px;\n }\n`;\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkKxB,CAAC;AACF,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-element';\n\n/\n Tag CSS\n /\nexport const styles = css`\n :host {\n }\n\n .badge {\n padding: 2px 6px;\n border-radius: 4px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 22px;\n }\n\n .badge__content {\n font-family: var(--nile-font-family-serif);\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 18px;\n letter-spacing: 0.2px;\n }\n\n .badge--primary {\n background: #005ea6;\n }\n\n .badge--normal {\n background: #e5e9eb;\n }\n\n .badge--info {\n background: #a5d3f3;\n }\n\n / for v2 */\n .badge--pink {\n color: #c11574;\n border: 1px solid #fcceee;\n background: #fdf2fa;\n }\n\n .badge--orange {\n color: #b93815;\n border: 1px solid #f9dbaf;\n background: #fef6ee;\n }\n\n .badge--purple {\n color: #5925dc;\n border: 1px solid #d9d6fe;\n background: #f4f3ff;\n }\n\n .badge--indigo {\n color: #3538cd;\n border: 1px solid #c7d7fe;\n background: #eef4ff;\n }\n\n .badge--blue {\n color: #175cd3;\n border: 1px solid #b2ddff;\n background: #eff8ff;\n }\n .badge--blue-light {\n color: #026aa2;\n border: 1px solid #b9e6fe;\n background: #f0f9ff;\n }\n\n .badge--gray-blue {\n color: #363f72;\n border: 1px solid #d5d9eb;\n background: #f8f9fc;\n }\n\n .badge--success {\n color: var(--nile-badge-color-font-success);\n border: var(--nile-badge-color-border-width) solid #abefc6;\n background: var(--nile-badge-color-background-success);\n }\n .badge--warning {\n color: var(--nile-badge-color-font-warning);\n border: var(--nile-badge-color-border-width) solid #fedf89;\n background: var(--nile-badge-color-background-warning);\n }\n\n .badge--error {\n color: var(--nile-badge-color-font-error);\n border: var(--nile-badge-color-border-width) solid #fecdca;\n background: var(--nile-badge-color-background-error);\n }\n\n .badge--brand {\n color: #005291;\n border: 1px solid #b5c9e0;\n background: #eaf0f8;\n }\n\n .badge--gray {\n color: #344054;\n border: 1px solid #eaecf0;\n background: #f9fafb;\n }\n\n .badge--pink.badge--pill-outline {\n border: 1px solid #dd2590;\n }\n\n .badge--orange.badge--pill-outline {\n border: 1px solid #e04f16;\n }\n\n .badge--purple.badge--pill-outline {\n border: 1px solid #6938ef;\n }\n\n .badge--indigo.badge--pill-outline {\n border: 1px solid #444ce7;\n }\n\n .badge--blue.badge--pill-outline {\n border: 1px solid #1570ef;\n }\n\n .badge--blue-light.badge--pill-outline {\n border: 1px solid #0086c9;\n }\n\n .badge--gray-blue.badge--pill-outline {\n border: 1px solid #3e4784;\n }\n\n .badge--success.badge--pill-outline {\n border: 1px solid #079455;\n }\n\n .badge--warning.badge--pill-outline {\n border: 1px solid #dc6803;\n }\n\n .badge--error.badge--pill-outline {\n border: 1px solid #d92d20;\n }\n\n .badge--brand.badge--pill-outline {\n border: 1px solid #005ea6;\n }\n\n .badge--gray.badge--pill-outline {\n border: 1px solid #475467;\n }\n\n .badge--pill-outline {\n background: transparent;\n }\n\n .badge--rounded {\n padding: 2px 8px;\n border-radius: 100px;\n }\n`;\nexport default [styles];\n"]}

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

@@ -23,9 +23,7 @@ export const styles = css `
     border-style: solid;
     border-width: 1px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
     text-align: center;
     letter-spacing: 0.2px;
     text-decoration: none;
@@ -37,12 +35,14 @@ export const styles = css `
       var(--nile-transition-duration-default) border,
       var(--nile-transition-duration-default) box-shadow;
     cursor: inherit;
-    padding: var(--nile-spacing-2-x);
-    gap: var(--nile-spacing-2-x);
+    font-size: 14px;
+    font-weight: 500;
     border-radius: var(--nile-radius-base-standard);
-    line-height: var(--nile-type-scale-3);
+    padding: 10px 14px;
+    gap: 5px;
+    line-height: 20px;
     box-sizing: border-box;
-    height: 38px;
+    height: 40px;
   }
   .button::-moz-focus-inner {
@@ -74,49 +74,37 @@ export const styles = css `
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-button-primary);
-    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-border);
-    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /*for v2 */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-hover);
-    background-color: #005291; /*for v2 */
     border-color: var(--nile-colors-button-primary-hover);
-    border-color: #005291; /*for v2 */
     color: var(--nile-colors-button-primary-text);
   }
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-pressed);
-    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-pressed-border);
-    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
     box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
-      0px 0px 0px 4px rgba(0, 94, 166, 0.15); /*for v2 */
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15);
   }
   .button--standard.button--primary.button--disabled {
     background-color: var(--nile-colors-button-primary-disabled);
-    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
-    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
-    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
     background-color: var(--nile-colors-button-primary-disabled);
-    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
-    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
-    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
@@ -615,9 +603,11 @@ export const styles = css `
   }
   .button--outline.button--secondary-blue:hover:not(.button--disabled),
-  .button--outline.button--secondary-blue.button--checked:not(.button--disabled) {
+  .button--outline.button--secondary-blue.button--checked:not(
+      .button--disabled
+    ) {
     color: #004678;
-    background-color: #EAF0F8;
+    background-color: #eaf0f8;
   }
   .button--outline.button--secondary-blue:active:not(.button--disabled) {
@@ -627,7 +617,7 @@ export const styles = css `
   .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {
     box-shadow: 0px;
   }
   @media (forced-colors: active) {
     .button.button--outline.button--checked:not(.button--disabled) {
       outline: solid 2px transparent;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4sBxB,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-element';\n\n/\n Button CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: 1px;\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default) border,\n var(--nile-transition-duration-default) box-shadow;\n cursor: inherit;\n padding: var(--nile-spacing-2-x);\n gap: var(--nile-spacing-2-x);\n border-radius: var(--nile-radius-base-standard);\n line-height: var(--nile-type-scale-3);\n box-sizing: border-box;\n height: 38px;\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .button--disabled {\n pointer-events: none;\n }\n\n .button__label::slotted(nile-icon) {\n /* vertical-align: -2px; /\n }\n\n / Primary /\n .button--standard.button--primary {\n background-color: var(--nile-colors-button-primary);\n background-color: #005ea6; /for v2 /\n border-color: var(--nile-colors-button-primary-border);\n border-color: #005ea6; /for v2 /\n color: var(--nile-colors-button-primary-text);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /for v2 /\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-hover);\n background-color: #005291; /for v2 /\n border-color: var(--nile-colors-button-primary-hover);\n border-color: #005291; /for v2 /\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-pressed);\n background-color: #005ea6; /for v2 /\n border-color: var(--nile-colors-button-primary-pressed-border);\n border-color: #005ea6; /for v2 /\n color: var(--nile-colors-button-primary-text);\n box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n 0px 0px 0px 4px rgba(0, 94, 166, 0.15); /for v2 /\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-button-primary-disabled);\n background-color: #f2f4f7; /for v2 /\n border-color: var(--nile-colors-button-primary-disabled);\n border-color: #eaecf0; /for v2 /\n color: var(--nile-colors-button-primary-disabled-text);\n color: #98a2b3; /for v2 /\n cursor: not-allowed;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-button-primary-disabled);\n background-color: #f2f4f7; /for v2 /\n border-color: var(--nile-colors-button-primary-disabled);\n border-color: #eaecf0; /for v2 /\n color: var(--nile-colors-button-primary-disabled-text);\n color: #98a2b3; /for v2 /\n cursor: not-allowed;\n }\n\n / Secondary /\n .button--standard.button--secondary {\n background-color: var(--nile-colors-button-secondary);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-hover);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-pressed);\n border-color: var(--nile-colors-button-secondary-pressed-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\n cursor: not-allowed;\n }\n\n / Tertiary /\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-button-tertiary);\n border-color: var(--nile-colors-button-tertiary-border);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-hover);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-pressed);\n border-color: var(--nile-colors-button-tertiary-pressed-border);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary.button--disabled,\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n border-color: var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-button-tertiary-disabled);\n color: var(--nile-colors-button-tertiary-disabled-text);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n / ghost /\n .button--standard.button--ghost {\n background-color: var(--nile-colors-button-tertiary);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--ghost:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-hover);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--ghost:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-pressed);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--ghost.button--disabled,\n .button--standard.button--ghost.button--disabled:hover,\n .button--standard.button--ghost.button--disabled:active {\n border-color: transparent;\n background-color: var(--nile-colors-button-tertiary-disabled);\n color: var(--nile-colors-button-tertiary-disabled-text);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n / caution /\n .button--standard.button--caution {\n background-color: var(--nile-colors-button-caution);\n border-color: var(--nile-colors-button-caution);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-hover);\n border-color: var(--nile-colors-button-caution-hover);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-pressed);\n border-color: var(--nile-colors-button-caution-pressed-border);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution.button--disabled,\n .button--standard.button--caution.button--disabled:hover,\n .button--standard.button--caution.button--disabled:active {\n background-color: var(--nile-colors-button-caution-disabled);\n border-color: var(--nile-colors-button-caution-disabled);\n color: var(--nile-colors-button-caution-disabled-text);\n }\n\n / destructive /\n .button--standard.button--destructive {\n background-color: #d92d20;\n border-color: #d92d20;\n color: #fff;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--destructive:hover:not(.button--disabled) {\n background-color: #b42318;\n border-color: #b42318;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--destructive:active:not(.button--disabled) {\n background-color: #d92d20;\n border-color: #d92d20;\n color: #fff;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n background-color: #d92d20;\n border-color: #d92d20;\n color: #fff;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n .button--standard.button--destructive.button--disabled {\n background-color: #f2f4f7;\n border-color: #eaecf0;\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n .button--standard.button--destructive.button--disabled:hover,\n .button--standard.button--destructive.button--disabled:active {\n background-color: #f2f4f7;\n border-color: #eaecf0;\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n / secondary-Grey /\n .button--standard.button--secondary-grey {\n background-color: #fff;\n border-color: #d0d5dd;\n color: #344054;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n background-color: #f9fafb;\n border-color: #d0d5dd;\n color: #182230;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:active:not(.button--disabled) {\n background-color: #fff;\n border-color: #d0d5dd;\n color: #344054;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n }\n\n .button--standard.button--secondary-grey.button--disabled {\n background-color: #eaecf0;\n border-color: var(--nile-colors-button-primary-disabled);\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-grey.button--disabled:hover,\n .button--standard.button--secondary-grey.button--disabled:active {\n background-color: #eaecf0;\n border-color: var(--nile-colors-button-primary-disabled);\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n / secondary-blue /\n .button--standard.button--secondary-blue {\n background-color: #fff;\n border-color: #85aad1;\n color: #005291;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n background-color: #eaf0f8;\n border-color: #85aad1;\n color: #004678;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:active:not(.button--disabled) {\n background-color: #fff;\n border-color: #85aad1;\n color: #005291;\n box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n 0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n }\n\n .button--standard.button--secondary-blue.button--disabled {\n background-color: #fff;\n border-color: #eaecf0;\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-blue.button--disabled:hover,\n .button--standard.button--secondary-blue.button--disabled:active {\n background-color: #fff;\n border-color: #eaecf0;\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n / Primary Variant - Nile Icon Fill /\n .button--standard.button--primary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n }\n\n / Secondary Variant /\n .button--standard.button--secondary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(\n --nile-colors-button-secondary-disabled-text\n ) !important;\n }\n\n / Tertiary Variant /\n .button--standard.button--tertiary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(\n --nile-colors-button-tertiary-disabled-text\n ) !important;\n }\n\n / Ghost Variant /\n .button--standard.button--ghost ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--ghost:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon) {\n --nile-svg-fill: var(\n --nile-colors-button-tertiary-disabled-text\n ) !important;\n }\n\n / Caution Variant /\n .button--standard.button--caution ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n }\n\n / destructive /\n .button--standard.button--destructive ::slotted(nile-icon) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: #fff !important;\n }\n\n /\n * Outline buttons\n /\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n / Default /\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Primary /\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n / Success /\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n / Neutral /\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Warning /\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n / Danger /\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n / destructive /\n .button--outline.button--destructive {\n border-color: #fda29b;\n color: #b42318;\n box-shadow: 0px;\n }\n\n .button--outline.button--destructive:hover:not(.button--disabled),\n .button--outline.button--destructive.button--checked:not(.button--disabled) {\n border-color: #fda29b;\n color: #912018;\n background-color: #fef3f2;\n }\n\n .button--outline.button--destructive:active:not(.button--disabled) {\n border-color: #fda29b;\n color: #b42318;\n background-color: #fff;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / destructive - focus-visible /\n .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n border-color: #fda29b;\n color: #b42318;\n background-color: #fff;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / secondary-grey /\n .button--outline.button--secondary-grey {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:hover:not(.button--disabled),\n .button--outline.button--secondary-grey.button--checked:not(\n .button--disabled\n ) {\n color: #344054;\n background-color: #f9fafb;\n }\n\n .button--outline.button--secondary-grey:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n / secondary-blue /\n .button--outline.button--secondary-blue {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:hover:not(.button--disabled),\n .button--outline.button--secondary-blue.button--checked:not(.button--disabled) {\n color: #004678;\n background-color: #EAF0F8;\n }\n\n .button--outline.button--secondary-blue:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n \n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /\n * Pill modifier\n /\n\n .button--pill.button--small {\n border-radius: 24px;\n }\n\n .button--pill.button--medium {\n border-radius: 32px;\n }\n\n /\n * Circle modifier\n /\n\n .button--circle {\n padding-left: 0;\n padding-right: 0;\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n / Caret modifier /\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /\n * Loading modifier\n /\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: 1em;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /\n * Badges\n /\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n / outline with no border */\n .button--outline.button--hideborder {\n border: 0px;\n }\n`;\n"]}
1	+ {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAksBxB,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-element';\n\n/\n Button CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: 1px;\n font-style: normal;\n font-family: var(--nile-font-family-serif);\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default) border,\n var(--nile-transition-duration-default) box-shadow;\n cursor: inherit;\n font-size: 14px;\n font-weight: 500;\n border-radius: var(--nile-radius-base-standard);\n padding: 10px 14px;\n gap: 5px;\n line-height: 20px;\n box-sizing: border-box;\n height: 40px;\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .button--disabled {\n pointer-events: none;\n }\n\n .button__label::slotted(nile-icon) {\n /* vertical-align: -2px; /\n }\n\n / Primary /\n .button--standard.button--primary {\n background-color: var(--nile-colors-button-primary);\n border-color: var(--nile-colors-button-primary-border);\n color: var(--nile-colors-button-primary-text);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-hover);\n border-color: var(--nile-colors-button-primary-hover);\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-pressed);\n border-color: var(--nile-colors-button-primary-pressed-border);\n color: var(--nile-colors-button-primary-text);\n box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n 0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-button-primary-disabled);\n border-color: var(--nile-colors-button-primary-disabled);\n color: var(--nile-colors-button-primary-disabled-text);\n cursor: not-allowed;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-button-primary-disabled);\n border-color: var(--nile-colors-button-primary-disabled);\n color: var(--nile-colors-button-primary-disabled-text);\n cursor: not-allowed;\n }\n\n / Secondary /\n .button--standard.button--secondary {\n background-color: var(--nile-colors-button-secondary);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-hover);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-pressed);\n border-color: var(--nile-colors-button-secondary-pressed-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\n cursor: not-allowed;\n }\n\n / Tertiary /\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-button-tertiary);\n border-color: var(--nile-colors-button-tertiary-border);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-hover);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-pressed);\n border-color: var(--nile-colors-button-tertiary-pressed-border);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary.button--disabled,\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n border-color: var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-button-tertiary-disabled);\n color: var(--nile-colors-button-tertiary-disabled-text);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n / ghost /\n .button--standard.button--ghost {\n background-color: var(--nile-colors-button-tertiary);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--ghost:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-hover);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--ghost:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-pressed);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--ghost.button--disabled,\n .button--standard.button--ghost.button--disabled:hover,\n .button--standard.button--ghost.button--disabled:active {\n border-color: transparent;\n background-color: var(--nile-colors-button-tertiary-disabled);\n color: var(--nile-colors-button-tertiary-disabled-text);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n / caution /\n .button--standard.button--caution {\n background-color: var(--nile-colors-button-caution);\n border-color: var(--nile-colors-button-caution);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-hover);\n border-color: var(--nile-colors-button-caution-hover);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-pressed);\n border-color: var(--nile-colors-button-caution-pressed-border);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution.button--disabled,\n .button--standard.button--caution.button--disabled:hover,\n .button--standard.button--caution.button--disabled:active {\n background-color: var(--nile-colors-button-caution-disabled);\n border-color: var(--nile-colors-button-caution-disabled);\n color: var(--nile-colors-button-caution-disabled-text);\n }\n\n / destructive /\n .button--standard.button--destructive {\n background-color: #d92d20;\n border-color: #d92d20;\n color: #fff;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--destructive:hover:not(.button--disabled) {\n background-color: #b42318;\n border-color: #b42318;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--destructive:active:not(.button--disabled) {\n background-color: #d92d20;\n border-color: #d92d20;\n color: #fff;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n background-color: #d92d20;\n border-color: #d92d20;\n color: #fff;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n .button--standard.button--destructive.button--disabled {\n background-color: #f2f4f7;\n border-color: #eaecf0;\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n .button--standard.button--destructive.button--disabled:hover,\n .button--standard.button--destructive.button--disabled:active {\n background-color: #f2f4f7;\n border-color: #eaecf0;\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n / secondary-Grey /\n .button--standard.button--secondary-grey {\n background-color: #fff;\n border-color: #d0d5dd;\n color: #344054;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n background-color: #f9fafb;\n border-color: #d0d5dd;\n color: #182230;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:active:not(.button--disabled) {\n background-color: #fff;\n border-color: #d0d5dd;\n color: #344054;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n }\n\n .button--standard.button--secondary-grey.button--disabled {\n background-color: #eaecf0;\n border-color: var(--nile-colors-button-primary-disabled);\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-grey.button--disabled:hover,\n .button--standard.button--secondary-grey.button--disabled:active {\n background-color: #eaecf0;\n border-color: var(--nile-colors-button-primary-disabled);\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n / secondary-blue /\n .button--standard.button--secondary-blue {\n background-color: #fff;\n border-color: #85aad1;\n color: #005291;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n background-color: #eaf0f8;\n border-color: #85aad1;\n color: #004678;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:active:not(.button--disabled) {\n background-color: #fff;\n border-color: #85aad1;\n color: #005291;\n box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n 0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n }\n\n .button--standard.button--secondary-blue.button--disabled {\n background-color: #fff;\n border-color: #eaecf0;\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-blue.button--disabled:hover,\n .button--standard.button--secondary-blue.button--disabled:active {\n background-color: #fff;\n border-color: #eaecf0;\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n / Primary Variant - Nile Icon Fill /\n .button--standard.button--primary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n }\n\n / Secondary Variant /\n .button--standard.button--secondary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(\n --nile-colors-button-secondary-disabled-text\n ) !important;\n }\n\n / Tertiary Variant /\n .button--standard.button--tertiary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(\n --nile-colors-button-tertiary-disabled-text\n ) !important;\n }\n\n / Ghost Variant /\n .button--standard.button--ghost ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--ghost:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon) {\n --nile-svg-fill: var(\n --nile-colors-button-tertiary-disabled-text\n ) !important;\n }\n\n / Caution Variant /\n .button--standard.button--caution ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n }\n\n / destructive /\n .button--standard.button--destructive ::slotted(nile-icon) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: #fff !important;\n }\n\n /\n * Outline buttons\n /\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n / Default /\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Primary /\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n / Success /\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n / Neutral /\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Warning /\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n / Danger /\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n / destructive /\n .button--outline.button--destructive {\n border-color: #fda29b;\n color: #b42318;\n box-shadow: 0px;\n }\n\n .button--outline.button--destructive:hover:not(.button--disabled),\n .button--outline.button--destructive.button--checked:not(.button--disabled) {\n border-color: #fda29b;\n color: #912018;\n background-color: #fef3f2;\n }\n\n .button--outline.button--destructive:active:not(.button--disabled) {\n border-color: #fda29b;\n color: #b42318;\n background-color: #fff;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / destructive - focus-visible /\n .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n border-color: #fda29b;\n color: #b42318;\n background-color: #fff;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / secondary-grey /\n .button--outline.button--secondary-grey {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:hover:not(.button--disabled),\n .button--outline.button--secondary-grey.button--checked:not(\n .button--disabled\n ) {\n color: #344054;\n background-color: #f9fafb;\n }\n\n .button--outline.button--secondary-grey:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n / secondary-blue /\n .button--outline.button--secondary-blue {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:hover:not(.button--disabled),\n .button--outline.button--secondary-blue.button--checked:not(\n .button--disabled\n ) {\n color: #004678;\n background-color: #eaf0f8;\n }\n\n .button--outline.button--secondary-blue:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /\n * Pill modifier\n /\n\n .button--pill.button--small {\n border-radius: 24px;\n }\n\n .button--pill.button--medium {\n border-radius: 32px;\n }\n\n /\n * Circle modifier\n /\n\n .button--circle {\n padding-left: 0;\n padding-right: 0;\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n / Caret modifier /\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /\n * Loading modifier\n /\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: 1em;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /\n * Badges\n /\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n / outline with no border */\n .button--outline.button--hideborder {\n border: 0px;\n }\n`;\n"]}

package/dist/src/nile-button-toggle/nile-button-toggle.css.js CHANGED Viewed

@@ -14,10 +14,11 @@ export const styles = css `
   .nile-button-toggle {
     display: flex;
-    padding: 12px;
+    padding: 6px 16px 6px 14px;
     border: 1px solid var(--nile-button-toggle-border-color);
     cursor: pointer;
     border-radius: 4px;
+    font-weight: 500;
     color: #000;
     text-align: center;
     font-family: var(--nile-font-family-serif);
@@ -26,15 +27,17 @@ export const styles = css `
     letter-spacing: 0.2px;
     justify-content: center;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
+    height: 40px;
+    box-sizing: border-box;
   }
   .nile-button-toggle:hover {
-    background:var(--nile-button-toggle-color-background-non-active-hover);
+    background: var(--nile-button-toggle-color-background-non-active-hover);
   }
   .nile-button-toggle:active {
-    background: #e5e9eb;
+    background: #e5e9eb;
   }
   .nile-button-toggle__initial {
@@ -54,12 +57,14 @@ export const styles = css `
   }
   .nile-button-toggle__active {
-    background-color:var(--nile-button-toggle-color-background-active-standard);
+    background-color: var(
+      --nile-button-toggle-color-background-active-standard
+    );
     color: var(--nile-button-toggle-text-color-standard);
   }
   .nile-button-toggle__active:hover {
-    background-color:var(--nile-button-toggle-color-background-active-hover);
+    background-color: var(--nile-button-toggle-color-background-active-hover);
     color: var(--nile-button-toggle-text-color-hover);
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DxB~~,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-element';\n\n/\n ButtonToggle CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-button-toggle {\n display: flex;\n padding: ~~12px~~;\n border: 1px solid var(--nile-button-toggle-border-color);\n cursor: pointer;\n border-radius: 4px;\n color: #000;\n text-align: center;\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: ~~10px~~;\n }\n\n .nile-button-toggle:hover {\n background:var(--nile-button-toggle-color-background-non-active-hover);\n }\n\n .nile-button-toggle:active {\n background: #e5e9eb~~; \~~n }\n\n .nile-button-toggle__initial {\n border-radius: 4px 0 0 4px;\n }\n\n .nile-button-toggle__end {\n border-radius: 0 4px 4px 0;\n border-left: 0;\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: #ccc;\n border-radius: 0;\n }\n\n .nile-button-toggle__active {\n background-color:var(--nile-button-toggle-color-background-active-standard);\n color: var(--nile-button-toggle-text-color-standard);\n }\n\n .nile-button-toggle__active:hover {\n background-color:var(--nile-button-toggle-color-background-active-hover);\n color: var(--nile-button-toggle-text-color-hover);\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DxB,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-element';\n\n/\n ButtonToggle CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-button-toggle {\n display: flex;\n padding: 6px 16px 6px 14px;\n border: 1px solid var(--nile-button-toggle-border-color);\n cursor: pointer;\n border-radius: 4px;\n font-weight: 500;\n color: #000;\n text-align: center;\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-button-toggle-color-background-non-active-hover);\n }\n\n .nile-button-toggle:active {\n background: #e5e9eb;\n }\n\n .nile-button-toggle__initial {\n border-radius: 4px 0 0 4px;\n }\n\n .nile-button-toggle__end {\n border-radius: 0 4px 4px 0;\n border-left: 0;\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: #ccc;\n border-radius: 0;\n }\n\n .nile-button-toggle__active {\n background-color: var(\n --nile-button-toggle-color-background-active-standard\n );\n color: var(--nile-button-toggle-text-color-standard);\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-button-toggle-color-background-active-hover);\n color: var(--nile-button-toggle-text-color-hover);\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.css.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /**
  * ButtonToggleGroup CSS
  */

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.css.js CHANGED Viewed

@@ -1,17 +1,18 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 import { css } from 'lit-element';
 /**
  * ButtonToggleGroup CSS
  */
 export const styles = css `
-	:host {
+  :host {
     display: inline-flex;
-	}
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-button-toggle-group.css.js.map

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-button-toggle-group.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle-group/nile-button-toggle-group.css.ts"],"names":[],"mappings":"AAAA;;;;;~~EAKE~~;~~AAEF~~,OAAO,~~EAAC~~,GAAG,~~EAAC~~,MAAM,aAAa,CAAC;~~AAEhC~~;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;CAIxB~~,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-element';\n\n/\n ButtonToggleGroup CSS\n */\nexport const styles = css`\n\t:host {\n display: inline-flex;\n\t}\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-button-toggle-group.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle-group/nile-button-toggle-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKxB,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-element';\n\n/\n ButtonToggleGroup CSS\n */\nexport const styles = css`\n :host {\n display: inline-flex;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n`;\n\nexport default [styles];\n"]}

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

@@ -20,7 +20,7 @@ export const styles = css `
   .checkbox {
     position: relative;
     display: inline-flex;
-    align-items: top;
+    align-items: stretch;
     font-weight: 400;
     color: var(--nile-colors-dark-900);
     vertical-align: middle;
@@ -28,6 +28,7 @@ export const styles = css `
   }
   .checkbox--medium {
+    padding-top: 2px;
     --toggle-size: var(--nile-type-scale-3);
     font-size: var(--nile-type-scale-3);
   }
@@ -42,7 +43,7 @@ export const styles = css `
     height: var(--nile-type-scale-3);
     border: solid 1px var(--nile-checkbox-color-border-standard);
     background-color: var(--nile-checkbox-color-background-standard);
-    border-radius: 4px;
+    border-radius: 3px;
     transition: var(--nile-transition-duration-default border-color),
       var(--nile-transition-duration-default) background-color,
       var(--nile-transition-duration-default) color,
@@ -108,20 +109,33 @@ export const styles = css `
     opacity: 0.3;
     cursor: not-allowed;
   }
   .checkbox__label {
-    display: inline-block;
-    line-height: 14px;
-    font-size: 14px;
-    margin-inline-start: 0.5em;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    font-family: var(--nile-font-family-serif);
+    margin-left: 8px;
     user-select: none;
-    margin-top: 2px;
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
     font-style: normal;
-    font-weight: 400;
     letter-spacing: 0.2px;
+    box-sizing: border-box;
+  }
+  .checkbox__label__text {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: #344054;
+  }
+  .checkbox__sublabel__text {
+    display: block;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #475467;
   }
   :host([required]) .checkbox__label::after {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIxB~~,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-element';\n\n/\n Checkbox CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n :host(.full-width) {\n width: 100%;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n align-items: ~~top~~;\n font-weight: 400;\n color: var(--nile-colors-dark-900);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--medium {\n --toggle-size: var(--nile-type-scale-3);\n font-size: var(--nile-type-scale-3);\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3);\n height: var(--nile-type-scale-3);\n border: solid 1px var(--nile-checkbox-color-border-standard);\n background-color: var(--nile-checkbox-color-background-standard);\n border-radius: ~~4px~~;\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n / svg {\n display:none !important;\n } /\n\n / Hover /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-hover);\n border: 1px solid var(--nile-checkbox-color-border-hover);\n border-radius: 4px;\n }\n\n / Focus /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n / Checked/indeterminate /\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--nile-checkbox-color-border-checked-standard);\n background-color: var(--nile-checkbox-color-background-checked-standard);\n }\n\n / Checked/indeterminate + hover /\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-checked-hover);\n border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n }\n\n / Checked/indeterminate + focus /\n .checkbox.checkbox--checked:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px var(--nile-checkbox-color-outline-standard);\n outline-offset: 1px;\n }\n\n / Disabled /\n .checkbox--disabled {\n opacity: 0.3;\n cursor: not-allowed;\n }\n \n\n .checkbox__label {\n display: ~~inline~~-~~block~~;\n ~~line~~-~~height~~: ~~14px~~;\n font-~~size~~: ~~14px~~;\n margin-~~inline-start~~: ~~0.5em~~;\n user-select: none;\n ~~margin-top: 2px;\n~~ color: var(--nile-colors-dark-900);\n font-~~family~~: ~~Colfax~~-~~regular~~;\n font-~~style~~: ~~normal~~;\n font-weight: 400;\n ~~letter~~-~~spacing~~: ~~0.2px~~;\n }\n\n :host([required]) .checkbox__label::after {\n content: '';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__helptext-icon {\n float: right;\n cursor: pointer;\n margin-right: 12px;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJxB,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-element';\n\n/\n Checkbox CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n :host(.full-width) {\n width: 100%;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n align-items: stretch;\n font-weight: 400;\n color: var(--nile-colors-dark-900);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--medium {\n padding-top: 2px;\n --toggle-size: var(--nile-type-scale-3);\n font-size: var(--nile-type-scale-3);\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3);\n height: var(--nile-type-scale-3);\n border: solid 1px var(--nile-checkbox-color-border-standard);\n background-color: var(--nile-checkbox-color-background-standard);\n border-radius: 3px;\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n / svg {\n display:none !important;\n } /\n\n / Hover /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-hover);\n border: 1px solid var(--nile-checkbox-color-border-hover);\n border-radius: 4px;\n }\n\n / Focus /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n / Checked/indeterminate /\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--nile-checkbox-color-border-checked-standard);\n background-color: var(--nile-checkbox-color-background-checked-standard);\n }\n\n / Checked/indeterminate + hover /\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-checked-hover);\n border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n }\n\n / Checked/indeterminate + focus /\n .checkbox.checkbox--checked:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px var(--nile-checkbox-color-outline-standard);\n outline-offset: 1px;\n }\n\n / Disabled /\n .checkbox--disabled {\n opacity: 0.3;\n cursor: not-allowed;\n }\n\n .checkbox__label {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n font-family: var(--nile-font-family-serif);\n margin-left: 8px;\n user-select: none;\n color: var(--nile-colors-dark-900);\n font-style: normal;\n letter-spacing: 0.2px;\n box-sizing: border-box;\n }\n\n .checkbox__label__text {\n display: block;\n font-size: 14px;\n font-weight: 500;\n color: #344054;\n }\n\n .checkbox__sublabel__text {\n display: block;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #475467;\n }\n\n :host([required]) .checkbox__label::after {\n content: '';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__helptext-icon {\n float: right;\n cursor: pointer;\n margin-right: 12px;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-checkbox/nile-checkbox.d.ts CHANGED Viewed

@@ -52,6 +52,8 @@ export declare class NileCheckbox extends NileElement {
     checked: boolean;
     /** Label, declared this property for backward compatibility of old component  */
     label: string;
+    /** Sublabel, declared this property for backward compatibility of old component  */
+    subLabel: string;
     /**
      * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
      * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
@@ -60,8 +62,8 @@ export declare class NileCheckbox extends NileElement {
     /** The default value of the form control. Primarily used for resetting the form control. */
     defaultChecked: boolean;
     helpText: string;
-    showHelpText: boolean;
     errorMessage: string;
+    showHelpText: boolean;
     /**
      * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
      * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in

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

@@ -57,6 +57,8 @@ let NileCheckbox = class NileCheckbox extends NileElement {
         this.checked = false;
         /** Label, declared this property for backward compatibility of old component  */
         this.label = '';
+        /** Sublabel, declared this property for backward compatibility of old component  */
+        this.subLabel = '';
         /**
          * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
          * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
@@ -65,8 +67,8 @@ let NileCheckbox = class NileCheckbox extends NileElement {
         /** The default value of the form control. Primarily used for resetting the form control. */
         this.defaultChecked = false;
         this.helpText = '';
-        this.showHelpText = false;
         this.errorMessage = '';
+        this.showHelpText = false;
         /**
          * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
          * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
@@ -207,7 +209,8 @@ let NileCheckbox = class NileCheckbox extends NileElement {
         </span>
         <div part="label" class="checkbox__label">
-          ${typeof this.label === 'boolean' ? '' : this.label}
+          ${this.label ? html `<span class="checkbox__label__text">${this.label}</span>` : ``}
+          ${this.label && this.subLabel ? html `<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
           <slot></slot>
         </div>
       </label>
@@ -222,7 +225,6 @@ let NileCheckbox = class NileCheckbox extends NileElement {
             </nile-tooltip>
           `
             : ``}
       ${hasErrorMessage
             ? html `
             <nile-form-error-message
@@ -261,6 +263,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], NileCheckbox.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'sub-label' })
+], NileCheckbox.prototype, "subLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileCheckbox.prototype, "indeterminate", void 0);
@@ -268,14 +273,14 @@ __decorate([
     defaultValue('checked')
 ], NileCheckbox.prototype, "defaultChecked", void 0);
 __decorate([
-    property({ attribute: 'help-text' })
+    property({ attribute: 'help-text', reflect: true })
 ], NileCheckbox.prototype, "helpText", void 0);
+__decorate([
+    property({ attribute: 'error-message', reflect: true })
+], NileCheckbox.prototype, "errorMessage", void 0);
 __decorate([
     property({ type: Boolean })
 ], NileCheckbox.prototype, "showHelpText", void 0);
-__decorate([
-    property({ attribute: 'error-message' })
-], NileCheckbox.prototype, "errorMessage", void 0);
 __decorate([
     property({ reflect: true })
 ], NileCheckbox.prototype, "form", void 0);