@aquera/nile-elements 0.1.15 → 0.1.17

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 (54) hide show
  1. package/README.md +12 -0
  2. package/demo/index.html +0 -10
  3. package/demo/variables.css +21 -66
  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-code-editor/nile-code-editor.cjs.js +2 -2
  12. package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
  13. package/dist/nile-code-editor/nile-code-editor.esm.js +2 -2
  14. package/dist/nile-code-editor/theme.cjs.js +1 -1
  15. package/dist/nile-code-editor/theme.cjs.js.map +1 -1
  16. package/dist/nile-code-editor/theme.esm.js +1 -1
  17. package/dist/nile-form-group/nile-form-group.css.cjs.js +1 -1
  18. package/dist/nile-form-group/nile-form-group.css.cjs.js.map +1 -1
  19. package/dist/nile-form-group/nile-form-group.css.esm.js +1 -1
  20. package/dist/nile-stepper-item/nile-stepper-item.css.cjs.js +1 -1
  21. package/dist/nile-stepper-item/nile-stepper-item.css.cjs.js.map +1 -1
  22. package/dist/nile-stepper-item/nile-stepper-item.css.esm.js +0 -1
  23. package/dist/nile-toast/nile-toast.cjs.js +1 -1
  24. package/dist/nile-toast/nile-toast.cjs.js.map +1 -1
  25. package/dist/nile-toast/nile-toast.css.cjs.js +1 -1
  26. package/dist/nile-toast/nile-toast.css.cjs.js.map +1 -1
  27. package/dist/nile-toast/nile-toast.css.esm.js +2 -2
  28. package/dist/nile-toast/nile-toast.esm.js +3 -3
  29. package/dist/src/nile-button/nile-button.css.js +77 -83
  30. package/dist/src/nile-button/nile-button.css.js.map +1 -1
  31. package/dist/src/nile-checkbox/nile-checkbox.test.js +5 -17
  32. package/dist/src/nile-checkbox/nile-checkbox.test.js.map +1 -1
  33. package/dist/src/nile-code-editor/nile-code-editor.d.ts +3 -1
  34. package/dist/src/nile-code-editor/nile-code-editor.js +20 -5
  35. package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
  36. package/dist/src/nile-form-group/nile-form-group.css.js +1 -1
  37. package/dist/src/nile-form-group/nile-form-group.css.js.map +1 -1
  38. package/dist/src/nile-stepper-item/nile-stepper-item.css.js +0 -1
  39. package/dist/src/nile-stepper-item/nile-stepper-item.css.js.map +1 -1
  40. package/dist/src/nile-toast/nile-toast.css.js +2 -2
  41. package/dist/src/nile-toast/nile-toast.css.js.map +1 -1
  42. package/dist/src/nile-toast/nile-toast.d.ts +1 -0
  43. package/dist/src/nile-toast/nile-toast.js +5 -1
  44. package/dist/src/nile-toast/nile-toast.js.map +1 -1
  45. package/dist/tsconfig.tsbuildinfo +1 -1
  46. package/package.json +1 -1
  47. package/src/nile-button/nile-button.css.ts +77 -83
  48. package/src/nile-checkbox/nile-checkbox.test.ts +6 -21
  49. package/src/nile-code-editor/nile-code-editor.ts +20 -4
  50. package/src/nile-form-group/nile-form-group.css.ts +1 -1
  51. package/src/nile-stepper-item/nile-stepper-item.css.ts +0 -1
  52. package/src/nile-toast/nile-toast.css.ts +2 -2
  53. package/src/nile-toast/nile-toast.ts +3 -1
  54. package/vscode-html-custom-data.json +6 -2
package/dist/src/nile-button/nile-button.css.js CHANGED
@@ -69,158 +69,158 @@ export const styles = css `
69
69
 
70
70
  /* Primary */
71
71
  .button--standard.button--primary {
72
- background-color: var(--nile-colors-button-primary);
73
- border-color: var(--nile-colors-button-primary-border);
74
- color: var(--nile-colors-button-primary-text);
72
+ background-color: var(--nile-colors-primary-600);
73
+ border-color: var(--nile-colors-primary-600);
74
+ color: var(--nile-colors-white-base);
75
75
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
76
76
  }
77
77
 
78
78
  .button--standard.button--primary:hover:not(.button--disabled) {
79
- background-color: var(--nile-colors-button-primary-hover);
80
- border-color: var(--nile-colors-button-primary-hover);
81
- color: var(--nile-colors-button-primary-text);
79
+ background-color: var(--nile-colors-primary-700);
80
+ border-color: var(--nile-colors-primary-700);
81
+ color: var(--nile-colors-white-base);
82
82
  }
83
83
 
84
84
  .button--standard.button--primary:active:not(.button--disabled) {
85
- background-color: var(--nile-colors-button-primary-pressed);
86
- border-color: var(--nile-colors-button-primary-pressed-border);
87
- color: var(--nile-colors-button-primary-text);
85
+ background-color: var(--nile-colors-primary-700);
86
+ border-color: var(--nile-colors-primary-900);
87
+ color: var(--nile-colors-white-base);
88
88
  box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
89
89
  0px 0px 0px 4px rgba(0, 94, 166, 0.15);
90
90
  }
91
91
 
92
92
  .button--standard.button--primary.button--disabled {
93
- background-color: var(--nile-colors-button-primary-disabled);
94
- border-color: var(--nile-colors-button-primary-disabled);
95
- color: var(--nile-colors-button-primary-disabled-text);
93
+ background-color: var(--nile-colors-neutral-700);
94
+ border-color: var(--nile-colors-neutral-700);
95
+ color: var(--nile-colors-neutral-500);
96
96
  cursor: not-allowed;
97
97
  }
98
98
 
99
99
  .button--standard.button--primary.button--disabled:hover,
100
100
  .button--standard.button--primary.button--disabled:active {
101
- background-color: var(--nile-colors-button-primary-disabled);
102
- border-color: var(--nile-colors-button-primary-disabled);
103
- color: var(--nile-colors-button-primary-disabled-text);
101
+ background-color: var(--nile-colors-neutral-700);
102
+ border-color: var(--nile-colors-neutral-700);
103
+ color: var(--nile-colors-neutral-500);
104
104
  cursor: not-allowed;
105
105
  }
106
106
 
107
107
  /* Secondary */
108
108
  .button--standard.button--secondary {
109
- background-color: var(--nile-colors-button-secondary);
110
- border-color: var(--nile-colors-button-secondary-border);
111
- color: var(--nile-colors-button-secondary-text);
109
+ background-color: var(--nile-colors-neutral-400);
110
+ border-color: var(--nile-colors-neutral-400);
111
+ color: var(--nile-colors-dark-900);
112
112
  }
113
113
 
114
114
  .button--standard.button--secondary:hover:not(.button--disabled) {
115
- background-color: var(--nile-colors-button-secondary-hover);
116
- border-color: var(--nile-colors-button-secondary-border);
117
- color: var(--nile-colors-button-secondary-text);
115
+ background-color: var(--nile-colors-neutral-500);
116
+ border-color: var(--nile-colors-neutral-400);
117
+ color: var(--nile-colors-dark-900);
118
118
  }
119
119
 
120
120
  .button--standard.button--secondary:active:not(.button--disabled) {
121
- background-color: var(--nile-colors-button-secondary-pressed);
122
- border-color: var(--nile-colors-button-secondary-pressed-border);
123
- color: var(--nile-colors-button-secondary-text);
121
+ background-color: var(--nile-colors-neutral-500);
122
+ border-color: var(--nile-colors-neutral-700);
123
+ color: var(--nile-colors-dark-900);
124
124
  }
125
125
 
126
126
  .button--standard.button--secondary.button--disabled {
127
- background-color: var(--nile-colors-button-secondary-disabled);
128
- border-color: var(--nile-colors-button-secondary-disabled-border);
129
- color: var(--nile-colors-button-secondary-disabled-text);
127
+ background-color: var(--nile-colors-neutral-400);
128
+ border-color: var(--nile-colors-neutral-400);
129
+ color: var(--nile-colors-dark-500);
130
130
  cursor: not-allowed;
131
131
  }
132
132
 
133
133
  .button--standard.button--secondary.button--disabled:hover,
134
134
  .button--standard.button--secondary.button--disabled:active {
135
- background-color: var(--nile-colors-button-secondary-disabled);
136
- border-color: var(--nile-colors-button-secondary-disabled-border);
137
- color: var(--nile-colors-button-secondary-disabled-text);
135
+ background-color: var(--nile-colors-neutral-400);
136
+ border-color: var(--nile-colors-neutral-400);
137
+ color: var(--nile-colors-dark-500);
138
138
  cursor: not-allowed;
139
139
  }
140
140
 
141
141
  /* Tertiary */
142
142
  .button--standard.button--tertiary {
143
- background-color: var(--nile-colors-button-tertiary);
144
- border-color: var(--nile-colors-button-tertiary-border);
145
- color: var(--nile-colors-button-tertiary-text);
143
+ background-color: var(--nile-colors-white-base);
144
+ border-color: var(--nile-colors-neutral-500);
145
+ color: var(--nile-colors-dark-900);
146
146
  }
147
147
 
148
148
  .button--standard.button--tertiary:hover:not(.button--disabled) {
149
- background-color: var(--nile-colors-button-tertiary-hover);
149
+ background-color: var(--nile-colors-dark-200);
150
150
  border-color: var(--nile-colors-neutral-500);
151
- color: var(--nile-colors-button-tertiary-text);
151
+ color: var(--nile-colors-dark-900);
152
152
  }
153
153
 
154
154
  .button--standard.button--tertiary:active:not(.button--disabled) {
155
- background-color: var(--nile-colors-button-tertiary-pressed);
156
- border-color: var(--nile-colors-button-tertiary-pressed-border);
157
- color: var(--nile-colors-button-tertiary-text);
155
+ background-color: var(--nile-colors-neutral-400);
156
+ border-color: var(--nile-colors-neutral-700);
157
+ color: var(--nile-colors-dark-900);
158
158
  }
159
159
 
160
160
  .button--standard.button--tertiary.button--disabled,
161
161
  .button--standard.button--tertiary.button--disabled:hover,
162
162
  .button--standard.button--tertiary.button--disabled:active {
163
163
  border-color: var(--nile-colors-neutral-500);
164
- background-color: var(--nile-colors-button-tertiary-disabled);
165
- color: var(--nile-colors-button-tertiary-disabled-text);
164
+ background-color: var(--nile-colors-white-base);
165
+ color: var(--nile-colors-neutral-500);
166
166
  cursor: not-allowed;
167
167
  box-shadow: none;
168
168
  }
169
169
 
170
170
  /* ghost */
171
171
  .button--standard.button--ghost {
172
- background-color: var(--nile-colors-button-tertiary);
172
+ background-color: var(--nile-colors-white-base);
173
173
  border-color: transparent;
174
- color: var(--nile-colors-button-tertiary-text);
174
+ color: var(--nile-colors-dark-900);
175
175
  }
176
176
 
177
177
  .button--standard.button--ghost:hover:not(.button--disabled) {
178
- background-color: var(--nile-colors-button-tertiary-hover);
178
+ background-color: var(--nile-colors-dark-200);
179
179
  border-color: transparent;
180
- color: var(--nile-colors-button-tertiary-text);
180
+ color: var(--nile-colors-dark-900);
181
181
  }
182
182
 
183
183
  .button--standard.button--ghost:active:not(.button--disabled) {
184
- background-color: var(--nile-colors-button-tertiary-pressed);
184
+ background-color: var(--nile-colors-neutral-400);
185
185
  border-color: transparent;
186
- color: var(--nile-colors-button-tertiary-text);
186
+ color: var(--nile-colors-dark-900);
187
187
  }
188
188
 
189
189
  .button--standard.button--ghost.button--disabled,
190
190
  .button--standard.button--ghost.button--disabled:hover,
191
191
  .button--standard.button--ghost.button--disabled:active {
192
192
  border-color: transparent;
193
- background-color: var(--nile-colors-button-tertiary-disabled);
194
- color: var(--nile-colors-button-tertiary-disabled-text);
193
+ background-color: var(--nile-colors-white-base);
194
+ color: var(--nile-colors-neutral-500);
195
195
  cursor: not-allowed;
196
196
  box-shadow: none;
197
197
  }
198
198
 
199
199
  /* caution */
200
200
  .button--standard.button--caution {
201
- background-color: var(--nile-colors-button-caution);
202
- border-color: var(--nile-colors-button-caution);
203
- color: var(--nile-colors-button-caution-text);
201
+ background-color: var(--nile-colors-red-500);
202
+ border-color: var(--nile-colors-red-500);
203
+ color: var(--nile-colors-white-base);
204
204
  }
205
205
 
206
206
  .button--standard.button--caution:hover:not(.button--disabled) {
207
- background-color: var(--nile-colors-button-caution-hover);
208
- border-color: var(--nile-colors-button-caution-hover);
209
- color: var(--nile-colors-button-caution-text);
207
+ background-color: var(--nile-colors-red-700);
208
+ border-color: var(--nile-colors-red-700);
209
+ color: var(--nile-colors-white-base);
210
210
  }
211
211
 
212
212
  .button--standard.button--caution:active:not(.button--disabled) {
213
- background-color: var(--nile-colors-button-caution-pressed);
214
- border-color: var(--nile-colors-button-caution-pressed-border);
215
- color: var(--nile-colors-button-caution-text);
213
+ background-color: var(--nile-colors-red-700);
214
+ border-color: #820B0B;
215
+ color: var(--nile-colors-white-base);
216
216
  }
217
217
 
218
218
  .button--standard.button--caution.button--disabled,
219
219
  .button--standard.button--caution.button--disabled:hover,
220
220
  .button--standard.button--caution.button--disabled:active {
221
- background-color: var(--nile-colors-button-caution-disabled);
222
- border-color: var(--nile-colors-button-caution-disabled);
223
- color: var(--nile-colors-button-caution-disabled-text);
221
+ background-color: var(--nile-colors-neutral-500);
222
+ border-color: var(--nile-colors-neutral-500);
223
+ color: var(--nile-colors-neutral-400);
224
224
  }
225
225
 
226
226
  /* destructive */
@@ -292,7 +292,7 @@ export const styles = css `
292
292
 
293
293
  .button--standard.button--secondary-grey.button--disabled {
294
294
  background-color: #eaecf0;
295
- border-color: var(--nile-colors-button-primary-disabled);
295
+ border-color: var(--nile-colors-neutral-700);
296
296
  color: #98a2b3;
297
297
  cursor: not-allowed;
298
298
  }
@@ -300,7 +300,7 @@ export const styles = css `
300
300
  .button--standard.button--secondary-grey.button--disabled:hover,
301
301
  .button--standard.button--secondary-grey.button--disabled:active {
302
302
  background-color: #eaecf0;
303
- border-color: var(--nile-colors-button-primary-disabled);
303
+ border-color: var(--nile-colors-neutral-700);
304
304
  color: #98a2b3;
305
305
  cursor: not-allowed;
306
306
  }
@@ -345,78 +345,72 @@ export const styles = css `
345
345
 
346
346
  /* Primary Variant - Nile Icon Fill */
347
347
  .button--standard.button--primary ::slotted(nile-icon:not([color])) {
348
- --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
348
+ --nile-svg-fill: var(--nile-colors-white-base) !important;
349
349
  }
350
350
  .button--standard.button--primary:hover:not(.button--disabled)
351
351
  ::slotted(nile-icon:not([color])),
352
352
  .button--standard.button--primary:active:not(.button--disabled)
353
353
  ::slotted(nile-icon:not([color])) {
354
- --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
354
+ --nile-svg-fill: var(--nile-colors-white-base) !important;
355
355
  }
356
356
  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {
357
- --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
357
+ --nile-svg-fill: var(--nile-colors-neutral-500) !important;
358
358
  }
359
359
 
360
360
  /* Secondary Variant */
361
361
  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {
362
- --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
362
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
363
363
  }
364
364
  .button--standard.button--secondary:hover:not(.button--disabled)
365
365
  ::slotted(nile-icon:not([color])),
366
366
  .button--standard.button--secondary:active:not(.button--disabled)
367
367
  ::slotted(nile-icon:not([color])) {
368
- --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
368
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
369
369
  }
370
370
  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {
371
- --nile-svg-fill: var(
372
- --nile-colors-button-secondary-disabled-text
373
- ) !important;
371
+ --nile-svg-fill: var(--nile-colors-dark-500) !important;
374
372
  }
375
373
 
376
374
  /* Tertiary Variant */
377
375
  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {
378
- --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
376
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
379
377
  }
380
378
  .button--standard.button--tertiary:hover:not(.button--disabled)
381
379
  ::slotted(nile-icon:not([color])),
382
380
  .button--standard.button--tertiary:active:not(.button--disabled)
383
381
  ::slotted(nile-icon:not([color])) {
384
- --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
382
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
385
383
  }
386
384
  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {
387
- --nile-svg-fill: var(
388
- --nile-colors-button-tertiary-disabled-text
389
- ) !important;
385
+ --nile-svg-fill: var(--nile-colors-neutral-500) !important;
390
386
  }
391
387
 
392
388
  /* Ghost Variant */
393
389
  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
394
- --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
390
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
395
391
  }
396
392
  .button--standard.button--ghost:hover:not(.button--disabled)
397
393
  ::slotted(nile-icon:not([color])),
398
394
  .button--standard.button--ghost:active:not(.button--disabled)
399
395
  ::slotted(nile-icon:not([color])) {
400
- --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
396
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
401
397
  }
402
398
  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
403
- --nile-svg-fill: var(
404
- --nile-colors-button-tertiary-disabled-text
405
- ) !important;
399
+ --nile-svg-fill: var(--nile-colors-neutral-500) !important;
406
400
  }
407
401
 
408
402
  /* Caution Variant */
409
403
  .button--standard.button--caution ::slotted(nile-icon:not([color])) {
410
- --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
404
+ --nile-svg-fill: var(--nile-colors-white-base) !important;
411
405
  }
412
406
  .button--standard.button--caution:hover:not(.button--disabled)
413
407
  ::slotted(nile-icon:not([color])),
414
408
  .button--standard.button--caution:active:not(.button--disabled)
415
409
  ::slotted(nile-icon:not([color])) {
416
- --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
410
+ --nile-svg-fill: var(--nile-colors-white-base) !important;
417
411
  }
418
412
  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {
419
- --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
413
+ --nile-svg-fill: var(--nile-colors-neutral-400) !important;
420
414
  }
421
415
 
422
416
  /* destructive */
package/dist/src/nile-button/nile-button.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8rBxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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"]}
1
+ {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwrBxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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"]}
package/dist/src/nile-checkbox/nile-checkbox.test.js CHANGED
@@ -1,5 +1,8 @@
1
1
  import { fixture, html, expect, oneEvent } from '@open-wc/testing';
2
2
  import './nile-checkbox';
3
+ function wait(ms = 50000) {
4
+ return new Promise(resolve => setTimeout(resolve, ms));
5
+ }
3
6
  describe('NileCheckbox', () => {
4
7
  it('renders correctly with default properties', async () => {
5
8
  const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
@@ -68,8 +71,8 @@ describe('NileCheckbox', () => {
68
71
  const el = await fixture(html `<nile-checkbox help-text="test-help"></nile-checkbox>`);
69
72
  el.showHelpText = true;
70
73
  await el.updateComplete;
71
- const helpTextIcon = el.shadowRoot.querySelector('.checkbox__helptext-icon');
72
- expect(helpTextIcon).to.exist;
74
+ const helpText = el.shadowRoot?.querySelector("nile-form-help-text")?.textContent?.trim();
75
+ expect(helpText).to.equal('test-help');
73
76
  });
74
77
  it('updates host class based on helpText', async () => {
75
78
  const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
@@ -133,20 +136,5 @@ describe('NileCheckbox', () => {
133
136
  expect(checkbox).to.not.be.null;
134
137
  expect(checkbox.getAttribute('form')).to.equal('test-form');
135
138
  });
136
- it('displays and hides help text correctly', async () => {
137
- const el = await fixture(html `<nile-checkbox help-text="test-help"></nile-checkbox>`);
138
- // Initially, help text should not be shown
139
- expect(el.showHelpText).to.be.false;
140
- // Show the help text
141
- el.showHelpText = true;
142
- await el.updateComplete;
143
- let helpTextIcon = el.shadowRoot.querySelector('.checkbox__helptext-icon');
144
- expect(helpTextIcon).to.exist;
145
- // Hide the help text
146
- el.showHelpText = false;
147
- await el.updateComplete;
148
- helpTextIcon = el.shadowRoot.querySelector('.checkbox__helptext-icon');
149
- expect(helpTextIcon).to.be.exist;
150
- });
151
139
  });
152
140
  //# sourceMappingURL=nile-checkbox.test.js.map
package/dist/src/nile-checkbox/nile-checkbox.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-checkbox.test.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, oneEvent } from '@open-wc/testing';\nimport './nile-checkbox';\nimport { NileCheckbox } from './nile-checkbox';\n\ndescribe('NileCheckbox', () => {\n it('renders correctly with default properties', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n expect(el).shadowDom.to.equalSnapshot();\n });\n\n it('toggles checked state on click', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n input.click();\n expect(el.checked).to.be.true;\n input.click();\n expect(el.checked).to.be.false;\n });\n\n it('emits nile-change event on click', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n setTimeout(() => input.click());\n const event = await oneEvent(el, 'valueChange');\n expect(event.detail.checked).to.be.true;\n });\n\n it('handles focus and blur events', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n // Focus the input and wait for the focus event\n setTimeout(() => input.focus());\n const focusEvent = await oneEvent(el, 'focus');\n expect(focusEvent).to.exist;\n\n // Blur the input and wait for the blur event\n setTimeout(() => input.blur());\n const blurEvent = await oneEvent(el, 'blur');\n expect(blurEvent).to.exist;\n });\n\n it('handles indeterminate state', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n expect(input.indeterminate).to.be.true;\n\n el.checked = true;\n el.indeterminate = false;\n await el.updateComplete;\n expect(input.indeterminate).to.be.false;\n expect(input.checked).to.be.true;\n });\n\n it('reflects properties to attributes', async () => {\n const el = await fixture<NileCheckbox>(html`\n <nile-checkbox\n name=\"test-name\"\n title=\"test-title\"\n disabled\n required\n label=\"test-label\"\n sub-label=\"test-sublabel\"\n help-text=\"test-help\"\n error-message=\"test-error\"\n ></nile-checkbox>\n `);\n\n expect(el.getAttribute('name')).to.equal('test-name');\n expect(el.getAttribute('title')).to.equal('test-title');\n expect(el.getAttribute('disabled')).to.equal('');\n expect(el.getAttribute('required')).to.equal('');\n expect(el.getAttribute('label')).to.equal('test-label');\n expect(el.getAttribute('sub-label')).to.equal('test-sublabel');\n expect(el.getAttribute('help-text')).to.equal('test-help');\n expect(el.getAttribute('error-message')).to.equal('test-error');\n });\n\n it('displays help text when showHelpText is true', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text=\"test-help\"></nile-checkbox>`);\n el.showHelpText = true;\n await el.updateComplete;\n\n const helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');\n expect(helpTextIcon).to.exist;\n });\n\n it('updates host class based on helpText', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n el.helpText = 'test-help';\n await el.updateComplete;\n\n expect(el.classList.contains('full-width')).to.be.true;\n\n el.helpText = '';\n await el.updateComplete;\n\n expect(el.classList.contains('full-width')).to.be.false;\n });\n\n it('emits custom events on connected and disconnected', async () => {\n const el = document.createElement('nile-checkbox');\n\n // Wait for the connected event\n const initEventPromise = oneEvent(el, 'nile-init');\n document.body.appendChild(el);\n const initEvent = await initEventPromise;\n expect(initEvent).to.exist;\n\n // Wait for the disconnected event\n const destroyEventPromise = oneEvent(el, 'nile-destroy');\n document.body.removeChild(el);\n const destroyEvent = await destroyEventPromise;\n expect(destroyEvent).to.exist;\n });\n\n it('handles required attribute', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox required></nile-checkbox>`);\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n expect(input.required).to.be.true;\n });\n\n it('simulates click using click method', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n el.click();\n expect(el.checked).to.be.true;\n });\n\n it('sets and removes focus using focus and blur methods', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n\n // Call the focus method and wait for the focus event\n setTimeout(() => el.focus());\n const focusEvent = await oneEvent(el, 'focus');\n expect(focusEvent).to.exist;\n\n // Call the blur method and wait for the blur event\n setTimeout(() => el.blur());\n const blurEvent = await oneEvent(el, 'blur');\n expect(blurEvent).to.exist;\n });\n\n it('reflects checked attribute to property', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox checked></nile-checkbox>`);\n expect(el.checked).to.be.true;\n });\n\n it('reflects indeterminate attribute to property', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);\n expect(el.indeterminate).to.be.true;\n });\n\n it('associates form using form attribute', async () => {\n const el = await fixture(html`\n <div>\n <form id=\"test-form\"></form>\n <nile-checkbox form=\"test-form\"></nile-checkbox>\n </div>\n `);\n const checkbox = el.querySelector('nile-checkbox') as NileCheckbox;\n expect(checkbox).to.not.be.null;\n expect(checkbox.getAttribute('form')).to.equal('test-form');\n });\n\n it('displays and hides help text correctly', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text=\"test-help\"></nile-checkbox>`);\n\n // Initially, help text should not be shown\n expect(el.showHelpText).to.be.false;\n\n // Show the help text\n el.showHelpText = true;\n await el.updateComplete;\n let helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');\n expect(helpTextIcon).to.exist;\n\n // Hide the help text\n el.showHelpText = false;\n await el.updateComplete;\n helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');\n expect(helpTextIcon).to.be.exist;\n });\n});\n\n"]}
1
+ {"version":3,"file":"nile-checkbox.test.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, oneEvent } from '@open-wc/testing';\nimport './nile-checkbox';\nimport { NileCheckbox } from './nile-checkbox';\n\nfunction wait(ms:number=50000) {\n return new Promise(resolve => setTimeout(resolve, ms));\n}\n\ndescribe('NileCheckbox', () => {\n it('renders correctly with default properties', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n expect(el).shadowDom.to.equalSnapshot();\n });\n\n it('toggles checked state on click', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n input.click();\n expect(el.checked).to.be.true;\n input.click();\n expect(el.checked).to.be.false;\n });\n\n it('emits nile-change event on click', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n setTimeout(() => input.click());\n const event = await oneEvent(el, 'valueChange');\n expect(event.detail.checked).to.be.true;\n });\n\n it('handles focus and blur events', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n // Focus the input and wait for the focus event\n setTimeout(() => input.focus());\n const focusEvent = await oneEvent(el, 'focus');\n expect(focusEvent).to.exist;\n\n // Blur the input and wait for the blur event\n setTimeout(() => input.blur());\n const blurEvent = await oneEvent(el, 'blur');\n expect(blurEvent).to.exist;\n });\n\n it('handles indeterminate state', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n expect(input.indeterminate).to.be.true;\n\n el.checked = true;\n el.indeterminate = false;\n await el.updateComplete;\n expect(input.indeterminate).to.be.false;\n expect(input.checked).to.be.true;\n });\n\n it('reflects properties to attributes', async () => {\n const el = await fixture<NileCheckbox>(html`\n <nile-checkbox\n name=\"test-name\"\n title=\"test-title\"\n disabled\n required\n label=\"test-label\"\n sub-label=\"test-sublabel\"\n help-text=\"test-help\"\n error-message=\"test-error\"\n ></nile-checkbox>\n `);\n\n expect(el.getAttribute('name')).to.equal('test-name');\n expect(el.getAttribute('title')).to.equal('test-title');\n expect(el.getAttribute('disabled')).to.equal('');\n expect(el.getAttribute('required')).to.equal('');\n expect(el.getAttribute('label')).to.equal('test-label');\n expect(el.getAttribute('sub-label')).to.equal('test-sublabel');\n expect(el.getAttribute('help-text')).to.equal('test-help');\n expect(el.getAttribute('error-message')).to.equal('test-error');\n });\n\n it('displays help text when showHelpText is true', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text=\"test-help\"></nile-checkbox>`);\n el.showHelpText = true;\n await el.updateComplete;\n const helpText=el.shadowRoot?.querySelector(\"nile-form-help-text\")?.textContent?.trim()\n expect(helpText).to.equal('test-help')\n });\n\n it('updates host class based on helpText', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n el.helpText = 'test-help';\n await el.updateComplete;\n\n expect(el.classList.contains('full-width')).to.be.true;\n\n el.helpText = '';\n await el.updateComplete;\n\n expect(el.classList.contains('full-width')).to.be.false;\n });\n\n it('emits custom events on connected and disconnected', async () => {\n const el = document.createElement('nile-checkbox');\n\n // Wait for the connected event\n const initEventPromise = oneEvent(el, 'nile-init');\n document.body.appendChild(el);\n const initEvent = await initEventPromise;\n expect(initEvent).to.exist;\n\n // Wait for the disconnected event\n const destroyEventPromise = oneEvent(el, 'nile-destroy');\n document.body.removeChild(el);\n const destroyEvent = await destroyEventPromise;\n expect(destroyEvent).to.exist;\n });\n\n it('handles required attribute', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox required></nile-checkbox>`);\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n expect(input.required).to.be.true;\n });\n\n it('simulates click using click method', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n el.click();\n expect(el.checked).to.be.true;\n });\n\n it('sets and removes focus using focus and blur methods', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n\n // Call the focus method and wait for the focus event\n setTimeout(() => el.focus());\n const focusEvent = await oneEvent(el, 'focus');\n expect(focusEvent).to.exist;\n\n // Call the blur method and wait for the blur event\n setTimeout(() => el.blur());\n const blurEvent = await oneEvent(el, 'blur');\n expect(blurEvent).to.exist;\n });\n\n it('reflects checked attribute to property', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox checked></nile-checkbox>`);\n expect(el.checked).to.be.true;\n });\n\n it('reflects indeterminate attribute to property', async () => {\n const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);\n expect(el.indeterminate).to.be.true;\n });\n\n it('associates form using form attribute', async () => {\n const el = await fixture(html`\n <div>\n <form id=\"test-form\"></form>\n <nile-checkbox form=\"test-form\"></nile-checkbox>\n </div>\n `);\n const checkbox = el.querySelector('nile-checkbox') as NileCheckbox;\n expect(checkbox).to.not.be.null;\n expect(checkbox.getAttribute('form')).to.equal('test-form');\n });\n\n});\n\n"]}
package/dist/src/nile-code-editor/nile-code-editor.d.ts CHANGED
@@ -30,7 +30,7 @@ export declare class NileCodeEditor extends NileElement {
30
30
  allowVariableInCustomSuggestion: boolean;
31
31
  lineNumbers: boolean;
32
32
  disableSyntaxHighlighting: boolean;
33
- useCustomTextFormatting: boolean;
33
+ customThemeCSS: object | null;
34
34
  lineNumbersMultiline: boolean;
35
35
  hasScroller: boolean;
36
36
  expandable: boolean;
@@ -46,6 +46,7 @@ export declare class NileCodeEditor extends NileElement {
46
46
  private customCompletionComp;
47
47
  private placeholderComp;
48
48
  private defaultSyntaxHighlightingComp;
49
+ private themeComp;
49
50
  /**
50
51
  * The styles for CodeEditor
51
52
  * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -106,6 +107,7 @@ export declare class NileCodeEditor extends NileElement {
106
107
  getSingleLineExtension(): Extension;
107
108
  getPlaceholderExtension(): Extension;
108
109
  getDefaultSyntaxHighlightingExtension(): Extension;
110
+ getCustomThemeExtension(): Extension;
109
111
  restrictSingleLine(): Extension;
110
112
  }
111
113
  export default NileCodeEditor;