@aquera/nile-elements 0.1.15 → 0.1.16

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 (38) hide show
  1. package/README.md +5 -0
  2. package/demo/index.html +0 -10
  3. package/demo/variables.css +19 -58
  4. package/demo/variables_v2.css +0 -2
  5. package/dist/nile-button/nile-button.css.cjs.js +1 -1
  6. package/dist/nile-button/nile-button.css.cjs.js.map +1 -1
  7. package/dist/nile-button/nile-button.css.esm.js +77 -83
  8. package/dist/nile-checkbox/nile-checkbox.test.cjs.js +1 -1
  9. package/dist/nile-checkbox/nile-checkbox.test.cjs.js.map +1 -1
  10. package/dist/nile-checkbox/nile-checkbox.test.esm.js +2 -2
  11. package/dist/nile-form-group/nile-form-group.css.cjs.js +1 -1
  12. package/dist/nile-form-group/nile-form-group.css.cjs.js.map +1 -1
  13. package/dist/nile-form-group/nile-form-group.css.esm.js +1 -1
  14. package/dist/nile-stepper-item/nile-stepper-item.css.cjs.js +1 -1
  15. package/dist/nile-stepper-item/nile-stepper-item.css.cjs.js.map +1 -1
  16. package/dist/nile-stepper-item/nile-stepper-item.css.esm.js +0 -1
  17. package/dist/nile-toast/nile-toast.cjs.js +1 -1
  18. package/dist/nile-toast/nile-toast.cjs.js.map +1 -1
  19. package/dist/nile-toast/nile-toast.esm.js +3 -3
  20. package/dist/src/nile-button/nile-button.css.js +77 -83
  21. package/dist/src/nile-button/nile-button.css.js.map +1 -1
  22. package/dist/src/nile-checkbox/nile-checkbox.test.js +5 -17
  23. package/dist/src/nile-checkbox/nile-checkbox.test.js.map +1 -1
  24. package/dist/src/nile-form-group/nile-form-group.css.js +1 -1
  25. package/dist/src/nile-form-group/nile-form-group.css.js.map +1 -1
  26. package/dist/src/nile-stepper-item/nile-stepper-item.css.js +0 -1
  27. package/dist/src/nile-stepper-item/nile-stepper-item.css.js.map +1 -1
  28. package/dist/src/nile-toast/nile-toast.d.ts +1 -0
  29. package/dist/src/nile-toast/nile-toast.js +5 -1
  30. package/dist/src/nile-toast/nile-toast.js.map +1 -1
  31. package/dist/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +1 -1
  33. package/src/nile-button/nile-button.css.ts +77 -83
  34. package/src/nile-checkbox/nile-checkbox.test.ts +6 -21
  35. package/src/nile-form-group/nile-form-group.css.ts +1 -1
  36. package/src/nile-stepper-item/nile-stepper-item.css.ts +0 -1
  37. package/src/nile-toast/nile-toast.ts +3 -1
  38. package/vscode-html-custom-data.json +5 -1
package/README.md CHANGED
@@ -80,6 +80,11 @@ To run a local development server that serves the basic demo located in `demo/in
80
80
  In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
81
81
 
82
82
 
83
+ #### Version 0.1.16
84
+ - Nile Toast: Property added closeIconName
85
+ - Nile Tokens update
86
+ - Dependency nile 0.3.54
87
+
83
88
  #### Version 0.1.15
84
89
  - Nile Checkbox: Help text modified according to the design.
85
90
 
package/demo/index.html CHANGED
@@ -9,8 +9,6 @@
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css" />
10
10
  <script type="module" src="index.js"></script>
11
11
  </head>
12
-
13
-
14
12
  <style>
15
13
  .flex-container {
16
14
  display: flex;
@@ -30,18 +28,12 @@
30
28
  border: 1px solid #ccc;
31
29
  }
32
30
  </style>
33
-
34
-
35
31
  <!-- Add the tour component -->
36
32
  <nile-tour id="tour" .showBackdrop="false" .disableInteraction="false"></nile-tour>
37
33
  <body>
38
34
  <div class="flex-container wrap" style="width: 400px; height: 400px;" id="button-container">
39
-
40
-
41
35
  <nile-checkbox label="I am label" help-text="i am help text jhsdjsh djshd jhsdj sjdh sjdhjs dhjsd sjhdjs hdj"></nile-checkbox>
42
36
  <nile-input label="I am label" help-text="i am help text jhsdjsh djshd jhsdj sjdh sjdhjs dhjsd sjhdjs hdj"></nile-input>
43
-
44
-
45
37
  </div>
46
38
  <style>
47
39
  .frame-left-lg {
@@ -49,8 +41,6 @@
49
41
  margin-left: 208px;
50
42
  }
51
43
  </style>
52
-
53
-
54
44
  </body>
55
45
 
56
46
  </html>
package/demo/variables.css CHANGED
@@ -52,7 +52,7 @@
52
52
  --nile-toast-color-icon-color-info: var(--nile-colors-white-base);
53
53
  --nile-toast-color-icon-color-gray: var(--nile-colors-neutral-700);
54
54
  --nile-toast-color-icon-color-error: var(--nile-colors-white-base);
55
- --nile-toast-color-icon-color-black: #344054;
55
+ --nile-toast-color-icon-color-black: var(--nile-colors-dark-900);
56
56
  --nile-toast-color-icon-background-color-warning: var(--nile-colors-yellow-500);
57
57
  --nile-toast-color-icon-background-color-success: var(--nile-colors-green-700);
58
58
  --nile-toast-color-icon-background-color-info: var(--nile-colors-blue-500);
@@ -77,7 +77,7 @@
77
77
  --nile-textarea-standard-focused-border-color: var(--nile-colors-primary-600);
78
78
  --nile-textarea-standard-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
79
79
  --nile-textarea-standard-disabled-border-color: var(--nile-colors-neutral-500);
80
- --nile-textarea-standard-disabled-background-color: #f9fafb;
80
+ --nile-textarea-standard-disabled-background-color: var(--nile-colors-neutral-100);
81
81
  --nile-textarea-standard-box-shadow: 0px;
82
82
  --nile-textarea-standard-border-color: var(--nile-colors-neutral-500);
83
83
  --nile-textarea-padding: 0.5em 10px;
@@ -87,16 +87,14 @@
87
87
  --nile-tag-gray-x-color: var(--nile-colors-neutral-700);
88
88
  --nile-tag-gray-hover-x-color: var(--nile-colors-primary-900);
89
89
  --nile-tag-gray-hover-background-color: var(--nile-colors-dark-200);
90
- --nile-tag-gray-color: #344054;
91
90
  --nile-tag-gray-background-color: var(--nile-colors-white-base);
92
- --nile-table-row-border-color: #eaecf0;
93
- --nile-table-row-background-color: #F9FAFB;
94
- --nile-table-header-background-color: #F9FAFB;
95
- --nile-table-body-row-odd-background-color: #F9FAFB;
91
+ --nile-table-row-border-color: var(--nile-colors-neutral-400);
92
+ --nile-table-row-background-color: var(--nile-colors-neutral-100);
93
+ --nile-table-header-background-color: var(--nile-colors-neutral-100);
94
+ --nile-table-body-row-odd-background-color: var(--nile-colors-neutral-100);
96
95
  --nile-table-body-row-even-background-color: var(--nile-colors-white-base);
97
96
  --nile-stepper-min-width: 200px;
98
97
  --nile-stepper-color-title-selected: var(--nile-colors-primary-700);
99
- --nile-stepper-color-text-default: #475467;
100
98
  --nile-stepper-color-subtitle-selected: var(--nile-colors-primary-600);
101
99
  --nile-stepper-color-line-selected: var(--nile-colors-primary-700);
102
100
  --nile-stepper-color-line-default: var(--nile-colors-neutral-500);
@@ -172,13 +170,13 @@
172
170
  --nile-page-header-subheading-line-height: 18px;
173
171
  --nile-page-header-subheading-font-weight: 400;
174
172
  --nile-page-header-subheading-font-size: 12px;
175
- --nile-page-header-subheading-font-color: #475467;
176
- --nile-page-header-line-border-color: #eaecf0;
173
+ --nile-page-header-subheading-font-color: var(--nile-colors-dark-900);
174
+ --nile-page-header-line-border-color: var(--nile-colors-neutral-400);
177
175
  --nile-page-header-heading-line-height: 30px;
178
176
  --nile-page-header-heading-font-weight: 500;
179
177
  --nile-page-header-heading-font-size: 20px;
180
178
  --nile-page-header-heading-font-color: var(--nile-colors-dark-900);
181
- --nile-menu-item-background-color: #f9fafb;
179
+ --nile-menu-item-background-color: var(--nile-colors-neutral-100);
182
180
  --nile-line-height-xsmall: 1rem; /* 16px */
183
181
  --nile-line-height-xlarge: 2.25rem; /* 36px */
184
182
  --nile-line-height-text-base-condensed: var(--nile-line-height-small); /* 20px */
@@ -194,8 +192,8 @@
194
192
  --nile-input-shadow-destructive-active: 0px;
195
193
  --nile-input-font-size-small: 0.875rem;
196
194
  --nile-input-font-size-medium: 1rem;
197
- --nile-inline-edit-label-font-color: #344054;
198
- --nile-inline-edit-hover-background-color: #f9fafb;
195
+ --nile-inline-edit-label-font-color: var(--nile-colors-dark-900);
196
+ --nile-inline-edit-hover-background-color: var(--nile-colors-neutral-100);
199
197
  --nile-inline-edit-font-color: var(--nile-colors-neutral-700);
200
198
  --nile-hero-text-line-height: 24px;
201
199
  --nile-hero-text-font-weight: 600;
@@ -277,16 +275,16 @@
277
275
  --nile-card-footer-border-radius: 0 0 4px 4px;
278
276
  --nile-card-footer-border-color: var(--nile-colors-neutral-500);
279
277
  --nile-card-footer-background-color: var(--nile-colors-neutral-100);
280
- --nile-card-color-border: #475467;
278
+ --nile-card-color-border: var(--nile-colors-primary-900);
281
279
  --nile-card-box-shadow: 0px 0px 0px 0px;
282
280
  --nile-button-toggle-text-color-standard: var(--nile-colors-dark-900);
283
281
  --nile-button-toggle-text-color-hover: var(--nile-colors-dark-900);
284
- --nile-button-toggle-color-background-non-active-standard: #e5e9eb;
282
+ --nile-button-toggle-color-background-non-active-standard: var(--nile-colors-neutral-400);
285
283
  --nile-button-toggle-color-background-non-active-hover: var(--nile-colors-neutral-100);
286
284
  --nile-button-toggle-color-background-non-active-disabled: var(--nile-colors-white-base);
287
285
  --nile-button-toggle-color-background-active-standard: var(--nile-colors-neutral-500);
288
286
  --nile-button-toggle-color-background-active-hover: var(--nile-colors-neutral-500);
289
- --nile-button-toggle-color-background-active-disabled: #F9FAFB;
287
+ --nile-button-toggle-color-background-active-disabled: var(--nile-colors-neutral-100);
290
288
  --nile-button-toggle-border-color: var(--nile-colors-neutral-500);
291
289
  --nile-breakpoint-xlarge: 85rem; /* 1360px */
292
290
  --nile-breakpoint-small: 22.5rem; /* 360px */
@@ -300,7 +298,7 @@
300
298
  --nile-badge-color-pill-outline-orange: #e04f16;
301
299
  --nile-badge-color-pill-outline-indigo: #444ce7;
302
300
  --nile-badge-color-pill-outline-grayblue: #3e4784;
303
- --nile-badge-color-pill-outline-gray: #475467;
301
+ --nile-badge-color-pill-outline-gray: var(--nile-colors-primary-900);
304
302
  --nile-badge-color-pill-outline-error: #d92d20;
305
303
  --nile-badge-color-pill-outline-brand: var(--nile-colors-primary-600);
306
304
  --nile-badge-color-pill-outline-bluelight: #0086c9;
@@ -326,7 +324,7 @@
326
324
  --nile-badge-color-border-color-orange: #f9dbaf;
327
325
  --nile-badge-color-border-color-indigo: #c7d7fe;
328
326
  --nile-badge-color-border-color-grayblue: #d5d9eb;
329
- --nile-badge-color-border-color-gray: #eaecf0;
327
+ --nile-badge-color-border-color-gray: var(--nile-colors-neutral-400);
330
328
  --nile-badge-color-border-color-error: #fecdca;
331
329
  --nile-badge-color-border-color-brand: #b5c9e0;
332
330
  --nile-badge-color-border-color-bluelight: #b9e6fe;
@@ -337,11 +335,11 @@
337
335
  --nile-badge-color-background-primary: var(--nile-colors-primary-600);
338
336
  --nile-badge-color-background-pink: #fdf2fa;
339
337
  --nile-badge-color-background-orange: #fef6ee;
340
- --nile-badge-color-background-normal: #e5e9eb;
338
+ --nile-badge-color-background-normal: var(--nile-colors-neutral-400);
341
339
  --nile-badge-color-background-info: var(--nile-colors-blue-400);
342
340
  --nile-badge-color-background-indigo: #eef4ff;
343
341
  --nile-badge-color-background-grayblue: #f8f9fc;
344
- --nile-badge-color-background-gray: #f9fafb;
342
+ --nile-badge-color-background-gray: var(--nile-colors-neutral-100);
345
343
  --nile-badge-color-background-error: var(--nile-colors-red-400);
346
344
  --nile-badge-color-background-brand: #eaf0f8;
347
345
  --nile-badge-color-background-bluelight: #f0f9ff;
@@ -385,49 +383,12 @@
385
383
  --nile-alert-color-background-surface-error: var(--nile-colors-primary-600);
386
384
  --nile-alert-color-background-surface-info: var(--nile-colors-primary-600);
387
385
 
388
-
389
- /* Button */
390
- --nile-colors-button-primary: var(--nile-colors-primary-600);
391
- --nile-colors-button-primary-border: var(--nile-colors-primary-600);
392
- --nile-colors-button-primary-hover: var(--nile-colors-primary-700);
393
- --nile-colors-button-primary-pressed: var(--nile-colors-primary-700);
394
- --nile-colors-button-primary-pressed-border: var(--nile-colors-primary-900);
395
- --nile-colors-button-primary-disabled: var(--nile-colors-neutral-700);
396
- --nile-colors-button-primary-text: var(--nile-colors-white-base);
397
- --nile-colors-button-primary-disabled-text: var(--nile-colors-neutral-500);
398
-
399
- --nile-colors-button-secondary: #E5E9EB;
400
- --nile-colors-button-secondary-border: #E5E9EB;
401
- --nile-colors-button-secondary-hover: var(--nile-colors-neutral-500);
402
- --nile-colors-button-secondary-pressed: var(--nile-colors-neutral-500);
403
- --nile-colors-button-secondary-pressed-border: var(--nile-colors-neutral-700);
404
- --nile-colors-button-secondary-disabled: #E5E9EB;
405
- --nile-colors-button-secondary-text: var(--nile-colors-dark-900);
406
- --nile-colors-button-secondary-disabled-text: var(--nile-colors-dark-500);
407
- --nile-colors-button-secondary-disabled-border: #E5E9EB;
408
-
409
- --nile-colors-button-caution: var(--nile-colors-red-500);
410
- --nile-colors-button-caution-hover: var(--nile-colors-red-700);
411
- --nile-colors-button-caution-pressed: var(--nile-colors-red-700);
412
- --nile-colors-button-caution-pressed-border: #820B0B;
413
- --nile-colors-button-caution-disabled: var(--nile-colors-neutral-500);
414
- --nile-colors-button-caution-text: var(--nile-colors-white-base);
415
- --nile-colors-button-caution-disabled-text: #E5E9EB;
416
-
417
- --nile-colors-button-tertiary: var(--nile-colors-white-base);
418
- --nile-colors-button-tertiary-border: var(--nile-colors-neutral-500);
419
- --nile-colors-button-tertiary-hover: var(--nile-colors-dark-200);
420
- --nile-colors-button-tertiary-pressed: #E5E9EB;
421
- --nile-colors-button-tertiary-pressed-border: var(--nile-colors-neutral-700);
422
- --nile-colors-button-tertiary-disabled: var(--nile-colors-white-base);
423
- --nile-colors-button-tertiary-text: var(--nile-colors-dark-900);
424
- --nile-colors-button-tertiary-disabled-text: var(--nile-colors-neutral-500);
425
-
426
386
  /*
427
387
  --nile-colors-button-subtle:var(--nile-colors-white-base);
428
388
  --nile-colors-button-subtle-hover:var(--nile-colors-dark-200);
429
389
  --nile-colors-button-subtle-pressed:var(--nile-colors-neutral-400);
430
390
  */
391
+
431
392
  /* Border */
432
393
  --nile-colors-border-surface: var(--nile-colors-neutral-400);
433
394
  /*--nile-colors-border-surface-inverted:var(--nile-colors-neutral-400);*/
package/demo/variables_v2.css CHANGED
@@ -87,7 +87,6 @@
87
87
  --nile-tag-gray-x-color: #98A2B3;
88
88
  --nile-tag-gray-hover-x-color: #101828;
89
89
  --nile-tag-gray-hover-background-color: #f2f4f7;
90
- --nile-tag-gray-color: #344054;
91
90
  --nile-tag-gray-background-color: #fff;
92
91
  --nile-table-row-border-color: #eaecf0;
93
92
  --nile-table-row-background-color: #F9FAFB;
@@ -96,7 +95,6 @@
96
95
  --nile-table-body-row-even-background-color: #FFF;
97
96
  --nile-stepper-min-width: 200px;
98
97
  --nile-stepper-color-title-selected: #005291;
99
- --nile-stepper-color-text-default: #475467;
100
98
  --nile-stepper-color-subtitle-selected: #005EA6;
101
99
  --nile-stepper-color-line-selected: #005291;
102
100
  --nile-stepper-color-line-default: #D0D5DD;
package/dist/nile-button/nile-button.css.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,t;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",t=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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 /* 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:not([color])) {\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:not([color])),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n }\n\n /* destructive */\n .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\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"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,t;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",t=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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 /* Primary */\n .button--standard.button--primary {\n background-color: var(--nile-colors-primary-600);\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\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-primary-700);\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700);\n border-color: var(--nile-colors-primary-900);\n color: var(--nile-colors-white-base);\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-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\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-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n /* Secondary */\n .button--standard.button--secondary {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\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-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\n cursor: not-allowed;\n }\n\n /* Tertiary */\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-dark-900);\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-white-base);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* ghost */\n .button--standard.button--ghost {\n background-color: var(--nile-colors-white-base);\n border-color: transparent;\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--ghost:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200);\n border-color: transparent;\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--ghost:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400);\n border-color: transparent;\n color: var(--nile-colors-dark-900);\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-white-base);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* caution */\n .button--standard.button--caution {\n background-color: var(--nile-colors-red-500);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: #820B0B;\n color: var(--nile-colors-white-base);\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-neutral-500);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-neutral-400);\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-neutral-700);\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-neutral-700);\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:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n }\n\n /* Secondary Variant */\n .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-500) !important;\n }\n\n /* Tertiary Variant */\n .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n }\n\n /* Ghost Variant */\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n }\n\n /* Caution Variant */\n .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n }\n\n /* destructive */\n .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\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"]))));}};});
2
2
  //# sourceMappingURL=nile-button.css.cjs.js.map
package/dist/nile-button/nile-button.css.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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 /* 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:not([color])) {\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:not([color])),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n }\n\n /* destructive */\n .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"iVAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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 /* Primary */\n .button--standard.button--primary {\n background-color: var(--nile-colors-primary-600);\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\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-primary-700);\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700);\n border-color: var(--nile-colors-primary-900);\n color: var(--nile-colors-white-base);\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-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\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-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n /* Secondary */\n .button--standard.button--secondary {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\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-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\n cursor: not-allowed;\n }\n\n /* Tertiary */\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-dark-900);\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-white-base);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* ghost */\n .button--standard.button--ghost {\n background-color: var(--nile-colors-white-base);\n border-color: transparent;\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--ghost:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200);\n border-color: transparent;\n color: var(--nile-colors-dark-900);\n }\n\n .button--standard.button--ghost:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400);\n border-color: transparent;\n color: var(--nile-colors-dark-900);\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-white-base);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* caution */\n .button--standard.button--caution {\n background-color: var(--nile-colors-red-500);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: #820B0B;\n color: var(--nile-colors-white-base);\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-neutral-500);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-neutral-400);\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-neutral-700);\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-neutral-700);\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:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n }\n\n /* Secondary Variant */\n .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-500) !important;\n }\n\n /* Tertiary Variant */\n .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n }\n\n /* Ghost Variant */\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n }\n\n /* Caution Variant */\n .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n }\n\n /* destructive */\n .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"iVAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}