@navservice/web-components 1.0.0 → 1.2.0

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.
@@ -1,538 +1,8 @@
1
- *, :before, :after, ::backdrop {
2
- --tw-border-spacing-x: 0;
3
- --tw-border-spacing-y: 0;
4
- --tw-translate-x: 0;
5
- --tw-translate-y: 0;
6
- --tw-rotate: 0;
7
- --tw-skew-x: 0;
8
- --tw-skew-y: 0;
9
- --tw-scale-x: 1;
10
- --tw-scale-y: 1;
11
- --tw-pan-x: ;
12
- --tw-pan-y: ;
13
- --tw-pinch-zoom: ;
14
- --tw-scroll-snap-strictness: proximity;
15
- --tw-gradient-from-position: ;
16
- --tw-gradient-via-position: ;
17
- --tw-gradient-to-position: ;
18
- --tw-ordinal: ;
19
- --tw-slashed-zero: ;
20
- --tw-numeric-figure: ;
21
- --tw-numeric-spacing: ;
22
- --tw-numeric-fraction: ;
23
- --tw-ring-inset: ;
24
- --tw-ring-offset-width: 0px;
25
- --tw-ring-offset-color: #fff;
26
- --tw-ring-color: #3b82f680;
27
- --tw-ring-offset-shadow: 0 0 #0000;
28
- --tw-ring-shadow: 0 0 #0000;
29
- --tw-shadow: 0 0 #0000;
30
- --tw-shadow-colored: 0 0 #0000;
31
- --tw-blur: ;
32
- --tw-brightness: ;
33
- --tw-contrast: ;
34
- --tw-grayscale: ;
35
- --tw-hue-rotate: ;
36
- --tw-invert: ;
37
- --tw-saturate: ;
38
- --tw-sepia: ;
39
- --tw-drop-shadow: ;
40
- --tw-backdrop-blur: ;
41
- --tw-backdrop-brightness: ;
42
- --tw-backdrop-contrast: ;
43
- --tw-backdrop-grayscale: ;
44
- --tw-backdrop-hue-rotate: ;
45
- --tw-backdrop-invert: ;
46
- --tw-backdrop-opacity: ;
47
- --tw-backdrop-saturate: ;
48
- --tw-backdrop-sepia: ;
49
- --tw-contain-size: ;
50
- --tw-contain-layout: ;
51
- --tw-contain-paint: ;
52
- --tw-contain-style: ;
53
- }
54
-
55
- *, :before, :after {
56
- box-sizing: border-box;
57
- border: 0 solid #e5e7eb;
58
- }
1
+ @tailwind base;
59
2
 
60
- :before, :after {
61
- --tw-content: "";
62
- }
3
+ @tailwind components;
63
4
 
64
- html, :host {
65
- -webkit-text-size-adjust: 100%;
66
- tab-size: 4;
67
- font-feature-settings: normal;
68
- font-variation-settings: normal;
69
- -webkit-tap-highlight-color: transparent;
70
- font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
71
- line-height: 1.5;
72
- }
73
-
74
- body {
75
- line-height: inherit;
76
- margin: 0;
77
- }
78
-
79
- hr {
80
- height: 0;
81
- color: inherit;
82
- border-top-width: 1px;
83
- }
84
-
85
- abbr:where([title]) {
86
- text-decoration: underline dotted;
87
- }
88
-
89
- h1, h2, h3, h4, h5, h6 {
90
- font-size: inherit;
91
- font-weight: inherit;
92
- }
93
-
94
- a {
95
- color: inherit;
96
- text-decoration: inherit;
97
- }
98
-
99
- b, strong {
100
- font-weight: bolder;
101
- }
102
-
103
- code, kbd, samp, pre {
104
- font-feature-settings: normal;
105
- font-variation-settings: normal;
106
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
107
- font-size: 1em;
108
- }
109
-
110
- small {
111
- font-size: 80%;
112
- }
113
-
114
- sub, sup {
115
- vertical-align: baseline;
116
- font-size: 75%;
117
- line-height: 0;
118
- position: relative;
119
- }
120
-
121
- sub {
122
- bottom: -.25em;
123
- }
124
-
125
- sup {
126
- top: -.5em;
127
- }
128
-
129
- table {
130
- text-indent: 0;
131
- border-color: inherit;
132
- border-collapse: collapse;
133
- }
134
-
135
- button, input, optgroup, select, textarea {
136
- font-feature-settings: inherit;
137
- font-variation-settings: inherit;
138
- font-family: inherit;
139
- font-size: 100%;
140
- font-weight: inherit;
141
- line-height: inherit;
142
- letter-spacing: inherit;
143
- color: inherit;
144
- margin: 0;
145
- padding: 0;
146
- }
147
-
148
- button, select {
149
- text-transform: none;
150
- }
151
-
152
- button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
153
- -webkit-appearance: button;
154
- background-color: #0000;
155
- background-image: none;
156
- }
157
-
158
- :-moz-focusring {
159
- outline: auto;
160
- }
161
-
162
- :-moz-ui-invalid {
163
- box-shadow: none;
164
- }
165
-
166
- progress {
167
- vertical-align: baseline;
168
- }
169
-
170
- ::-webkit-inner-spin-button {
171
- height: auto;
172
- }
173
-
174
- ::-webkit-outer-spin-button {
175
- height: auto;
176
- }
177
-
178
- [type="search"] {
179
- -webkit-appearance: textfield;
180
- outline-offset: -2px;
181
- }
182
-
183
- ::-webkit-search-decoration {
184
- -webkit-appearance: none;
185
- }
186
-
187
- ::-webkit-file-upload-button {
188
- -webkit-appearance: button;
189
- font: inherit;
190
- }
191
-
192
- summary {
193
- display: list-item;
194
- }
195
-
196
- blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
197
- margin: 0;
198
- }
199
-
200
- fieldset {
201
- margin: 0;
202
- padding: 0;
203
- }
204
-
205
- legend {
206
- padding: 0;
207
- }
208
-
209
- ol, ul, menu {
210
- margin: 0;
211
- padding: 0;
212
- list-style: none;
213
- }
214
-
215
- dialog {
216
- padding: 0;
217
- }
218
-
219
- textarea {
220
- resize: vertical;
221
- }
222
-
223
- input::-moz-placeholder {
224
- opacity: 1;
225
- color: #9ca3af;
226
- }
227
-
228
- textarea::-moz-placeholder {
229
- opacity: 1;
230
- color: #9ca3af;
231
- }
232
-
233
- input::placeholder, textarea::placeholder {
234
- opacity: 1;
235
- color: #9ca3af;
236
- }
237
-
238
- button, [role="button"] {
239
- cursor: pointer;
240
- }
241
-
242
- :disabled {
243
- cursor: default;
244
- }
245
-
246
- img, svg, video, canvas, audio, iframe, embed, object {
247
- vertical-align: middle;
248
- display: block;
249
- }
250
-
251
- img, video {
252
- max-width: 100%;
253
- height: auto;
254
- }
255
-
256
- [hidden]:where(:not([hidden="until-found"])) {
257
- display: none;
258
- }
259
-
260
- .pointer-events-none {
261
- pointer-events: none;
262
- }
263
-
264
- .pointer-events-auto {
265
- pointer-events: auto;
266
- }
267
-
268
- .fixed {
269
- position: fixed;
270
- }
271
-
272
- .inset-0 {
273
- inset: 0;
274
- }
275
-
276
- .right-0 {
277
- right: 0;
278
- }
279
-
280
- .top-0 {
281
- top: 0;
282
- }
283
-
284
- .z-40 {
285
- z-index: 40;
286
- }
287
-
288
- .z-50 {
289
- z-index: 50;
290
- }
291
-
292
- .mb-4 {
293
- margin-bottom: 1rem;
294
- }
295
-
296
- .mt-1 {
297
- margin-top: .25rem;
298
- }
299
-
300
- .mt-4 {
301
- margin-top: 1rem;
302
- }
303
-
304
- .flex {
305
- display: flex;
306
- }
307
-
308
- .inline-flex {
309
- display: inline-flex;
310
- }
311
-
312
- .h-full {
313
- height: 100%;
314
- }
315
-
316
- .min-h-screen {
317
- min-height: 100vh;
318
- }
319
-
320
- .w-full {
321
- width: 100%;
322
- }
323
-
324
- .max-w-md {
325
- max-width: 28rem;
326
- }
327
-
328
- .flex-1 {
329
- flex: 1;
330
- }
331
-
332
- .translate-x-0 {
333
- --tw-translate-x: 0px;
334
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
335
- }
336
-
337
- .translate-x-full {
338
- --tw-translate-x: 100%;
339
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
340
- }
341
-
342
- .flex-col {
343
- flex-direction: column;
344
- }
345
-
346
- .items-center {
347
- align-items: center;
348
- }
349
-
350
- .justify-end {
351
- justify-content: flex-end;
352
- }
353
-
354
- .justify-center {
355
- justify-content: center;
356
- }
357
-
358
- .gap-3 {
359
- gap: .75rem;
360
- }
361
-
362
- .rounded-lg {
363
- border-radius: .5rem;
364
- }
365
-
366
- .rounded-md {
367
- border-radius: .375rem;
368
- }
369
-
370
- .border {
371
- border-width: 1px;
372
- }
373
-
374
- .border-t {
375
- border-top-width: 1px;
376
- }
377
-
378
- .border-gray-300 {
379
- --tw-border-opacity: 1;
380
- border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
381
- }
382
-
383
- .bg-black\/40 {
384
- background-color: #0006;
385
- }
386
-
387
- .bg-indigo-600 {
388
- --tw-bg-opacity: 1;
389
- background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
390
- }
391
-
392
- .bg-white {
393
- --tw-bg-opacity: 1;
394
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
395
- }
396
-
397
- .bg-gradient-to-br {
398
- background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
399
- }
400
-
401
- .from-gray-50 {
402
- --tw-gradient-from: #f9fafb var(--tw-gradient-from-position);
403
- --tw-gradient-to: #f9fafb00 var(--tw-gradient-to-position);
404
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
405
- }
406
-
407
- .to-gray-100 {
408
- --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);
409
- }
410
-
411
- .p-6 {
412
- padding: 1.5rem;
413
- }
414
-
415
- .px-4 {
416
- padding-left: 1rem;
417
- padding-right: 1rem;
418
- }
419
-
420
- .px-5 {
421
- padding-left: 1.25rem;
422
- padding-right: 1.25rem;
423
- }
424
-
425
- .py-2 {
426
- padding-top: .5rem;
427
- padding-bottom: .5rem;
428
- }
429
-
430
- .py-2\.5 {
431
- padding-top: .625rem;
432
- padding-bottom: .625rem;
433
- }
434
-
435
- .pt-4 {
436
- padding-top: 1rem;
437
- }
438
-
439
- .text-3xl {
440
- font-size: 1.875rem;
441
- line-height: 2.25rem;
442
- }
443
-
444
- .text-lg {
445
- font-size: 1.125rem;
446
- line-height: 1.75rem;
447
- }
448
-
449
- .text-sm {
450
- font-size: .875rem;
451
- line-height: 1.25rem;
452
- }
453
-
454
- .font-medium {
455
- font-weight: 500;
456
- }
457
-
458
- .font-semibold {
459
- font-weight: 600;
460
- }
461
-
462
- .tracking-tight {
463
- letter-spacing: -.025em;
464
- }
465
-
466
- .text-gray-500 {
467
- --tw-text-opacity: 1;
468
- color: rgb(107 114 128 / var(--tw-text-opacity, 1));
469
- }
470
-
471
- .text-gray-600 {
472
- --tw-text-opacity: 1;
473
- color: rgb(75 85 99 / var(--tw-text-opacity, 1));
474
- }
475
-
476
- .text-gray-900 {
477
- --tw-text-opacity: 1;
478
- color: rgb(17 24 39 / var(--tw-text-opacity, 1));
479
- }
480
-
481
- .text-white {
482
- --tw-text-opacity: 1;
483
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
484
- }
485
-
486
- .opacity-0 {
487
- opacity: 0;
488
- }
489
-
490
- .opacity-100 {
491
- opacity: 1;
492
- }
493
-
494
- .shadow-2xl {
495
- --tw-shadow: 0 25px 50px -12px #00000040;
496
- --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
497
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
498
- }
499
-
500
- .shadow-sm {
501
- --tw-shadow: 0 1px 2px 0 #0000000d;
502
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
503
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
504
- }
505
-
506
- .backdrop-blur-sm {
507
- --tw-backdrop-blur: blur(4px);
508
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
509
- }
510
-
511
- .transition {
512
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
513
- transition-duration: .15s;
514
- transition-timing-function: cubic-bezier(.4, 0, .2, 1);
515
- }
516
-
517
- .transition-opacity {
518
- transition-property: opacity;
519
- transition-duration: .15s;
520
- transition-timing-function: cubic-bezier(.4, 0, .2, 1);
521
- }
522
-
523
- .transition-transform {
524
- transition-property: transform;
525
- transition-duration: .15s;
526
- transition-timing-function: cubic-bezier(.4, 0, .2, 1);
527
- }
528
-
529
- .duration-300 {
530
- transition-duration: .3s;
531
- }
532
-
533
- .ease-out {
534
- transition-timing-function: cubic-bezier(0, 0, .2, 1);
535
- }
5
+ @tailwind utilities;
536
6
 
537
7
  body {
538
8
  color: #fff;
@@ -541,40 +11,3 @@ body {
541
11
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
542
12
  }
543
13
 
544
- .hover\:bg-gray-100:hover {
545
- --tw-bg-opacity: 1;
546
- background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
547
- }
548
-
549
- .hover\:bg-gray-50:hover {
550
- --tw-bg-opacity: 1;
551
- background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
552
- }
553
-
554
- .hover\:bg-indigo-700:hover {
555
- --tw-bg-opacity: 1;
556
- background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
557
- }
558
-
559
- .hover\:shadow-md:hover {
560
- --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
561
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
562
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
563
- }
564
-
565
- .focus\:outline-none:focus {
566
- outline-offset: 2px;
567
- outline: 2px solid #0000;
568
- }
569
-
570
- .focus\:ring-2:focus {
571
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
572
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
573
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
574
- }
575
-
576
- .focus\:ring-indigo-500:focus {
577
- --tw-ring-opacity: 1;
578
- --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
579
- }
580
-