@ax-design/reveal-highlight 0.3.0-alpha.9 → 0.4.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.
Files changed (75) hide show
  1. package/README.md +0 -8
  2. package/build/BaseConfig.d.ts +43 -0
  3. package/build/BaseConfig.d.ts.map +1 -0
  4. package/build/CanvasConfig.d.ts +7 -93
  5. package/build/CanvasConfig.d.ts.map +1 -1
  6. package/build/CustomElements.d.ts +18 -4
  7. package/build/CustomElements.d.ts.map +1 -1
  8. package/build/RevealBoundryStore.d.ts +50 -10
  9. package/build/RevealBoundryStore.d.ts.map +1 -1
  10. package/build/RevealStateManager.d.ts +3 -0
  11. package/build/RevealStateManager.d.ts.map +1 -1
  12. package/build/SvgConfig.d.ts +17 -0
  13. package/build/SvgConfig.d.ts.map +1 -0
  14. package/build/index.d.ts.map +1 -1
  15. package/build/main.js +169 -17
  16. package/build/utils/extractRGBValue.d.ts +2 -0
  17. package/build/utils/extractRGBValue.d.ts.map +1 -0
  18. package/build/utils/isValidateBorderDecorationType.d.ts +3 -0
  19. package/build/utils/isValidateBorderDecorationType.d.ts.map +1 -0
  20. package/build/utils/types.d.ts +103 -0
  21. package/build/utils/types.d.ts.map +1 -0
  22. package/docs/demo/index.html +70 -143
  23. package/docs/demo/ng.html +992 -0
  24. package/es/BaseConfig.d.ts +43 -0
  25. package/es/BaseConfig.d.ts.map +1 -0
  26. package/es/BaseConfig.js +220 -0
  27. package/es/BaseConfig.js.map +1 -0
  28. package/es/CanvasConfig.d.ts +7 -93
  29. package/es/CanvasConfig.d.ts.map +1 -1
  30. package/es/CanvasConfig.js +35 -239
  31. package/es/CanvasConfig.js.map +1 -1
  32. package/es/CustomElements.d.ts +18 -4
  33. package/es/CustomElements.d.ts.map +1 -1
  34. package/es/CustomElements.js +82 -7
  35. package/es/CustomElements.js.map +1 -1
  36. package/es/RevealBoundryStore.d.ts +50 -10
  37. package/es/RevealBoundryStore.d.ts.map +1 -1
  38. package/es/RevealBoundryStore.js +129 -35
  39. package/es/RevealBoundryStore.js.map +1 -1
  40. package/es/RevealStateManager.d.ts +3 -0
  41. package/es/RevealStateManager.d.ts.map +1 -1
  42. package/es/RevealStateManager.js +35 -8
  43. package/es/RevealStateManager.js.map +1 -1
  44. package/es/SvgConfig.d.ts +17 -0
  45. package/es/SvgConfig.d.ts.map +1 -0
  46. package/es/SvgConfig.js +346 -0
  47. package/es/SvgConfig.js.map +1 -0
  48. package/es/index.d.ts.map +1 -1
  49. package/es/index.js +10 -16
  50. package/es/index.js.map +1 -1
  51. package/es/utils/extractRGBValue.d.ts +2 -0
  52. package/es/utils/extractRGBValue.d.ts.map +1 -0
  53. package/es/utils/extractRGBValue.js +48 -0
  54. package/es/utils/extractRGBValue.js.map +1 -0
  55. package/es/utils/isValidateBorderDecorationType.d.ts +3 -0
  56. package/es/utils/isValidateBorderDecorationType.d.ts.map +1 -0
  57. package/es/utils/isValidateBorderDecorationType.js +10 -0
  58. package/es/utils/isValidateBorderDecorationType.js.map +1 -0
  59. package/es/utils/types.d.ts +103 -0
  60. package/es/utils/types.d.ts.map +1 -0
  61. package/es/utils/types.js +2 -0
  62. package/es/utils/types.js.map +1 -0
  63. package/package.json +30 -30
  64. package/src/BaseConfig.ts +311 -0
  65. package/src/CanvasConfig.ts +66 -387
  66. package/src/CustomElements.ts +97 -14
  67. package/src/RevealBoundryStore.ts +138 -39
  68. package/src/RevealStateManager.ts +40 -10
  69. package/src/SvgConfig.ts +422 -0
  70. package/src/index.ts +10 -16
  71. package/src/utils/extractRGBValue.ts +58 -0
  72. package/src/utils/isValidateBorderDecorationType.ts +8 -0
  73. package/src/utils/types.ts +106 -0
  74. package/.yarnrc.yml +0 -1
  75. package/docs/demo/debug.html +0 -72
@@ -0,0 +1,992 @@
1
+ <!DOCTYPE html>
2
+
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
5
+ <title>AxRevealHighlight Demo - Axiom Design System</title>
6
+
7
+ <style>
8
+ .demo-block {
9
+ display: flex;
10
+ border-bottom: #aaa dashed 1px;
11
+ }
12
+
13
+ .demo {
14
+ width: 500px;
15
+ margin: 10px;
16
+ padding-top: 1em;
17
+ }
18
+
19
+ .code {
20
+ width: 100%;
21
+ }
22
+
23
+ .ax-reveal-ng-container {
24
+ display: flex;
25
+ }
26
+
27
+ .ax-reveal-ng-container>ax-reveal-ng {
28
+ margin: 5px;
29
+ }
30
+
31
+ .ax-reveal-ng-button {
32
+ min-width: 120px;
33
+ padding: 15px 25px;
34
+ border: none;
35
+ background: none;
36
+ user-select: none;
37
+ }
38
+ </style>
39
+ </head>
40
+
41
+ <body>
42
+ <ax-reveal-provider>
43
+ <h1>Welcome to project Axiom!</h1>
44
+ <p>Project Axiom is a web component set which aims to combine good part of Fluent Design System and Material Design
45
+ to a single design language.</p>
46
+ <p>This repo contains code of Reveal Highlight effect of Fluent design System.</p>
47
+
48
+ <section class="demo-block">
49
+ <div class="demo">
50
+ <ax-reveal-bound>
51
+ <div class="ax-reveal-ng-container">
52
+ <ax-reveal-ng>
53
+ <button class="ax-reveal-ng-button">Welcome</button>
54
+ </ax-reveal-ng>
55
+ <ax-reveal-ng>
56
+ <button class="ax-reveal-ng-button">To</button>
57
+ </ax-reveal-ng>
58
+ </div>
59
+ <div class="ax-reveal-ng-container">
60
+ <ax-reveal-ng>
61
+ <button class="ax-reveal-ng-button">Project</button>
62
+ </ax-reveal-ng>
63
+ <ax-reveal-ng>
64
+ <button class="ax-reveal-ng-button">Axiom!</button>
65
+ </ax-reveal-ng>
66
+ </div>
67
+ </ax-reveal-bound>
68
+ </div>
69
+ <div class="code">
70
+ <h2>General Button</h2>
71
+ <p>In order to use this component, we need to prepare some HTML:</p>
72
+ <pre>&lt;ax-reveal-provider&gt;
73
+ &lt;ax-reveal-bound class=&quot;my-reveal-container&quot;&gt;
74
+ &lt;ax-reveal-ng&gt;
75
+ &lt;button class=&quot;ax-reveal-ng-button&quot;&gt;Reveal&lt;/button&gt;
76
+ &lt;/ax-reveal-ng&gt;
77
+ &lt;ax-reveal-ng&gt;
78
+ &lt;button class=&quot;ax-reveal-ng-button&quot;&gt;To&lt;/button&gt;
79
+ &lt;/ax-reveal-ng&gt;
80
+ &lt;/div&gt;
81
+ &lt;/ax-reveal-bound&gt;
82
+ &lt;/ax-reveal-provider&gt;</pre>
83
+ </div>
84
+ </section>
85
+
86
+ <section class="demo-block">
87
+ <div class="demo">
88
+ <ax-reveal-bound class="round-corner">
89
+ <div class="ax-reveal-ng-container">
90
+ <ax-reveal-ng>
91
+ <button class="ax-reveal-ng-button">Welcome</button>
92
+ </ax-reveal-ng>
93
+ <ax-reveal-ng>
94
+ <button class="ax-reveal-ng-button">To</button>
95
+ </ax-reveal-ng>
96
+ </div>
97
+ <div class="ax-reveal-ng-container">
98
+ <ax-reveal-ng>
99
+ <button class="ax-reveal-ng-button">Project</button>
100
+ </ax-reveal-ng>
101
+ <ax-reveal-ng>
102
+ <button class="ax-reveal-ng-button">Axiom!</button>
103
+ </ax-reveal-ng>
104
+ </div>
105
+ </ax-reveal-bound>
106
+ </div>
107
+ <style>
108
+ .round-corner {
109
+ --reveal-border-decoration-type: round;
110
+ --reveal-border-decoration-radius: 8px;
111
+ }
112
+ </style>
113
+ <div class="code">
114
+ <h2>Round Corner</h2>
115
+ <pre>.my-reveal-container{
116
+ --reveal-border-decoration-type: round;
117
+ --reveal-border-decoration-size: 4px;
118
+ }</pre>
119
+ </div>
120
+ </section>
121
+
122
+ <section class="demo-block">
123
+ <div class="demo">
124
+ <ax-reveal-bound class="round-corner custom-radius">
125
+ <div class="ax-reveal-ng-container">
126
+ <ax-reveal-ng>
127
+ <button class="ax-reveal-ng-button">Welcome</button>
128
+ </ax-reveal-ng>
129
+ <ax-reveal-ng>
130
+ <button class="ax-reveal-ng-button">To</button>
131
+ </ax-reveal-ng>
132
+ </div>
133
+ <div class="ax-reveal-ng-container">
134
+ <ax-reveal-ng>
135
+ <button class="ax-reveal-ng-button">Project</button>
136
+ </ax-reveal-ng>
137
+ <ax-reveal-ng>
138
+ <button class="ax-reveal-ng-button">Axiom!</button>
139
+ </ax-reveal-ng>
140
+ </div>
141
+ </ax-reveal-bound>
142
+ </div>
143
+ <style>
144
+ .custom-radius ax-reveal-ng {
145
+ --reveal-border-decoration-top-left-radius: 0;
146
+ --reveal-border-decoration-top-right-radius: 10px;
147
+ --reveal-border-decoration-bottom-left-radius: 20px;
148
+ --reveal-border-decoration-bottom-right-radius: 0;
149
+ }
150
+ </style>
151
+ <div class="code">
152
+ <h2>Custom border radius</h2>
153
+ <pre>.my-reveal-container{
154
+ --reveal-border-decoration-type: round;
155
+ --reveal-border-decoration-top-left-radius: 0;
156
+ --reveal-border-decoration-top-right-radius: 10px;
157
+ --reveal-border-decoration-bottom-left-radius: 20px;
158
+ --reveal-border-decoration-bottom-right-radius: 0;
159
+ }</pre>
160
+ </div>
161
+ </section>
162
+
163
+ <section class="demo-block">
164
+ <div class="demo">
165
+ <ax-reveal-bound class="bevel-corner">
166
+ <div class="ax-reveal-ng-container">
167
+ <ax-reveal-ng>
168
+ <button class="ax-reveal-ng-button">Welcome</button>
169
+ </ax-reveal-ng>
170
+ <ax-reveal-ng>
171
+ <button class="ax-reveal-ng-button">To</button>
172
+ </ax-reveal-ng>
173
+ </div>
174
+ <div class="ax-reveal-ng-container">
175
+ <ax-reveal-ng>
176
+ <button class="ax-reveal-ng-button">Project</button>
177
+ </ax-reveal-ng>
178
+ <ax-reveal-ng>
179
+ <button class="ax-reveal-ng-button">Axiom!</button>
180
+ </ax-reveal-ng>
181
+ </div>
182
+ </ax-reveal-bound>
183
+ </div>
184
+ <style>
185
+ .bevel-corner {
186
+ --reveal-border-decoration-type: bevel;
187
+ --reveal-border-decoration-radius: 16px;
188
+ }
189
+ </style>
190
+ <div class="code">
191
+ <h2>Even more fancy</h2>
192
+ <pre>.my-reveal-container{
193
+ --reveal-border-decoration-type: bevel;
194
+ --reveal-border-decoration-size: 16px;
195
+ }</pre>
196
+ </div>
197
+ </section>
198
+
199
+ <section class="demo-block">
200
+ <div class="demo">
201
+ <ax-reveal-bound class="with-opacity">
202
+ <div class="ax-reveal-ng-container">
203
+ <ax-reveal-ng>
204
+ <button class="ax-reveal-ng-button">Welcome</button>
205
+ </ax-reveal-ng>
206
+ <ax-reveal-ng>
207
+ <button class="ax-reveal-ng-button">To</button>
208
+ </ax-reveal-ng>
209
+ </div>
210
+ <div class="ax-reveal-ng-container">
211
+ <ax-reveal-ng>
212
+ <button class="ax-reveal-ng-button">Project</button>
213
+ </ax-reveal-ng>
214
+ <ax-reveal-ng>
215
+ <button class="ax-reveal-ng-button">Axiom!</button>
216
+ </ax-reveal-ng>
217
+ </div>
218
+ </ax-reveal-bound>
219
+ </div>
220
+ <style>
221
+ .with-opacity {
222
+ --reveal-opacity: 1.0;
223
+ }
224
+ </style>
225
+ <div class="code">
226
+ <h2>Opacity</h2>
227
+ <pre>.my-reveal-container{
228
+ --reveal-opacity: 1.0;
229
+ }</pre>
230
+ </div>
231
+ </section>
232
+
233
+ <section class="demo-block">
234
+ <div class="demo">
235
+ <ax-reveal-bound>
236
+ <div class="ax-reveal-ng-container">
237
+ <ax-reveal-ng class="colored-button1">
238
+ <button class="ax-reveal-ng-button">Welcome</button>
239
+ </ax-reveal-ng>
240
+ <ax-reveal-ng class="colored-button2">
241
+ <button class="ax-reveal-ng-button">To</button>
242
+ </ax-reveal-ng>
243
+ </div>
244
+ <div class="ax-reveal-ng-container">
245
+ <ax-reveal-ng class="colored-button3">
246
+ <button class="ax-reveal-ng-button">Project</button>
247
+ </ax-reveal-ng>
248
+ <ax-reveal-ng class="colored-button4">
249
+ <button class="ax-reveal-ng-button">Axiom!</button>
250
+ </ax-reveal-ng>
251
+ </div>
252
+ </ax-reveal-bound>
253
+ </div>
254
+ <style>
255
+ .colored-button1 {
256
+ --reveal-color: red;
257
+ }
258
+ .colored-button2 {
259
+ --reveal-color: #7cbb00;
260
+ }
261
+ .colored-button3 {
262
+ --reveal-color: rgb(255, 187, 0);
263
+ }
264
+ .colored-button4 {
265
+ --reveal-color: #00A1F1;
266
+ }
267
+ </style>
268
+ <div class="code">
269
+ <h2>Colored Button</h2>
270
+ <pre>.colored-button1 {
271
+ --reveal-color: red;
272
+ }
273
+
274
+ .colored-button2 {
275
+ --reveal-color: #7cbb00;
276
+ }
277
+
278
+ .colored-button3 {
279
+ --reveal-color: rgb(255, 187, 0);
280
+ }
281
+
282
+ .colored-button4 {
283
+ --reveal-color: #00A1F1;
284
+ }</pre>
285
+ </div>
286
+ </section>
287
+
288
+ <section class="demo-block">
289
+ <div class="demo">
290
+ <ax-reveal-bound class="detailed-color-adjustment">
291
+ <div class="ax-reveal-ng-container">
292
+ <ax-reveal-ng>
293
+ <button class="ax-reveal-ng-button">Welcome</button>
294
+ </ax-reveal-ng>
295
+ <ax-reveal-ng>
296
+ <button class="ax-reveal-ng-button">To</button>
297
+ </ax-reveal-ng>
298
+ </div>
299
+ <div class="ax-reveal-ng-container">
300
+ <ax-reveal-ng>
301
+ <button class="ax-reveal-ng-button">Project</button>
302
+ </ax-reveal-ng>
303
+ <ax-reveal-ng>
304
+ <button class="ax-reveal-ng-button">Axiom!</button>
305
+ </ax-reveal-ng>
306
+ </div>
307
+ </ax-reveal-bound>
308
+ </div>
309
+ <style>
310
+ .detailed-color-adjustment {
311
+ --reveal-border-color: #FF00C1;
312
+ --reveal-hover-light-color: #00B8FF;
313
+ --reveal-press-animation-color: #FFFFFF;
314
+ --reveal-opacity: 1.0;
315
+ }
316
+ </style>
317
+ <div class="code">
318
+ <h2>Customize Every Parts</h2>
319
+ <pre>.my-reveal-container{
320
+ --reveal-border-color: #FF00C1;
321
+ --reveal-hover-light-color: #00B8FF;
322
+ --reveal-press-animation-color: #FFFFFF;
323
+ --reveal-opacity: 1.0;
324
+ }</pre>
325
+ </div>
326
+ </section>
327
+
328
+ <section class="demo-block">
329
+ <div class="demo">
330
+ <ax-reveal-bound class="border-width">
331
+ <div class="ax-reveal-ng-container">
332
+ <ax-reveal-ng>
333
+ <button class="ax-reveal-ng-button">Welcome</button>
334
+ </ax-reveal-ng>
335
+ <ax-reveal-ng>
336
+ <button class="ax-reveal-ng-button">To</button>
337
+ </ax-reveal-ng>
338
+ </div>
339
+ <div class="ax-reveal-ng-container">
340
+ <ax-reveal-ng>
341
+ <button class="ax-reveal-ng-button">Project</button>
342
+ </ax-reveal-ng>
343
+ <ax-reveal-ng>
344
+ <button class="ax-reveal-ng-button">Axiom!</button>
345
+ </ax-reveal-ng>
346
+ </div>
347
+ </ax-reveal-bound>
348
+ </div>
349
+ <style>
350
+ .border-width {
351
+ --reveal-border-width: 3px;
352
+ }
353
+ </style>
354
+ <div class="code">
355
+ <h2>Border Width</h2>
356
+ <pre>.my-reveal-container{
357
+ --reveal-border-width: 3px;
358
+ }</pre>
359
+ </div>
360
+ </section>
361
+
362
+ <section class="demo-block">
363
+ <div class="demo">
364
+ <ax-reveal-bound class="border-fill-radius">
365
+ <div class="ax-reveal-ng-container">
366
+ <ax-reveal-ng>
367
+ <button class="ax-reveal-ng-button">Welcome</button>
368
+ </ax-reveal-ng>
369
+ <ax-reveal-ng>
370
+ <button class="ax-reveal-ng-button">To</button>
371
+ </ax-reveal-ng>
372
+ </div>
373
+ <div class="ax-reveal-ng-container">
374
+ <ax-reveal-ng>
375
+ <button class="ax-reveal-ng-button">Project</button>
376
+ </ax-reveal-ng>
377
+ <ax-reveal-ng>
378
+ <button class="ax-reveal-ng-button">Axiom!</button>
379
+ </ax-reveal-ng>
380
+ </div>
381
+ </ax-reveal-bound>
382
+ </div>
383
+ <style>
384
+ .border-fill-radius {
385
+ --reveal-border-fill-radius: 0.2;
386
+ }
387
+ </style>
388
+ <div class="code">
389
+ <h2>Border Fill Radius</h2>
390
+ <pre>.my-reveal-container{
391
+ --reveal-border-fill-radius: 0.2;
392
+ }</pre>
393
+ </div>
394
+ </section>
395
+
396
+ <section class="demo-block">
397
+ <div class="demo">
398
+ <ax-reveal-bound class="no-border">
399
+ <div class="ax-reveal-ng-container">
400
+ <ax-reveal-ng>
401
+ <button class="ax-reveal-ng-button">Welcome</button>
402
+ </ax-reveal-ng>
403
+ <ax-reveal-ng>
404
+ <button class="ax-reveal-ng-button">To</button>
405
+ </ax-reveal-ng>
406
+ </div>
407
+ <div class="ax-reveal-ng-container">
408
+ <ax-reveal-ng>
409
+ <button class="ax-reveal-ng-button">Project</button>
410
+ </ax-reveal-ng>
411
+ <ax-reveal-ng>
412
+ <button class="ax-reveal-ng-button">Axiom!</button>
413
+ </ax-reveal-ng>
414
+ </div>
415
+ </ax-reveal-bound>
416
+ </div>
417
+ <style>
418
+ .no-border {
419
+ --reveal-border-width: 0;
420
+ }
421
+ </style>
422
+ <div class="code">
423
+ <h2>No border</h2>
424
+ <pre>.my-reveal-container{
425
+ --reveal-border-width: 0;
426
+ }</pre>
427
+ </div>
428
+ </section>
429
+
430
+ <section class="demo-block">
431
+ <div class="demo">
432
+ <ax-reveal-bound class="different-sides">
433
+ <div>No Single Border</div>
434
+ <div class="ax-reveal-ng-container">
435
+ <ax-reveal-ng class="no-top">
436
+ <button class="ax-reveal-ng-button">No Top</button>
437
+ </ax-reveal-ng>
438
+ <ax-reveal-ng class="no-bottom">
439
+ <button class="ax-reveal-ng-button">No Bottom</button>
440
+ </ax-reveal-ng>
441
+ </div>
442
+ <div class="ax-reveal-ng-container">
443
+ <ax-reveal-ng class="no-left">
444
+ <button class="ax-reveal-ng-button">No Left</button>
445
+ </ax-reveal-ng>
446
+ <ax-reveal-ng class="no-right">
447
+ <button class="ax-reveal-ng-button">No Right</button>
448
+ </ax-reveal-ng>
449
+ </div>
450
+ <div class="ax-reveal-ng-container">
451
+ <ax-reveal-ng class="horizontal">
452
+ <button class="ax-reveal-ng-button">Horizontal</button>
453
+ </ax-reveal-ng>
454
+ <ax-reveal-ng class="vertical">
455
+ <button class="ax-reveal-ng-button">Vertical</button>
456
+ </ax-reveal-ng>
457
+ </div>
458
+ <div class="ax-reveal-ng-container">
459
+ <ax-reveal-ng class="only-top">
460
+ <button class="ax-reveal-ng-button">Only Top</button>
461
+ </ax-reveal-ng>
462
+ <ax-reveal-ng class="only-bottom">
463
+ <button class="ax-reveal-ng-button">Only Bottom</button>
464
+ </ax-reveal-ng>
465
+ </div>
466
+ <div class="ax-reveal-ng-container">
467
+ <ax-reveal-ng class="only-left">
468
+ <button class="ax-reveal-ng-button">Only Left</button>
469
+ </ax-reveal-ng>
470
+ <ax-reveal-ng class="only-right">
471
+ <button class="ax-reveal-ng-button">Only Right</button>
472
+ </ax-reveal-ng>
473
+ </div>
474
+ <div>With Round Border Radius</div>
475
+ <div class="ax-reveal-ng-container round-corner">
476
+ <ax-reveal-ng class="no-top">
477
+ <button class="ax-reveal-ng-button">No Top</button>
478
+ </ax-reveal-ng>
479
+ <ax-reveal-ng class="no-bottom">
480
+ <button class="ax-reveal-ng-button">No Bottom</button>
481
+ </ax-reveal-ng>
482
+ </div>
483
+ <div class="ax-reveal-ng-container round-corner">
484
+ <ax-reveal-ng class="no-left">
485
+ <button class="ax-reveal-ng-button">No Left</button>
486
+ </ax-reveal-ng>
487
+ <ax-reveal-ng class="no-right">
488
+ <button class="ax-reveal-ng-button">No Right</button>
489
+ </ax-reveal-ng>
490
+ </div>
491
+ <div class="ax-reveal-ng-container round-corner">
492
+ <ax-reveal-ng class="horizontal">
493
+ <button class="ax-reveal-ng-button">Horizontal</button>
494
+ </ax-reveal-ng>
495
+ <ax-reveal-ng class="vertical">
496
+ <button class="ax-reveal-ng-button">Vertical</button>
497
+ </ax-reveal-ng>
498
+ </div>
499
+ <div class="ax-reveal-ng-container round-corner">
500
+ <ax-reveal-ng class="only-top">
501
+ <button class="ax-reveal-ng-button">Only Top</button>
502
+ </ax-reveal-ng>
503
+ <ax-reveal-ng class="only-bottom">
504
+ <button class="ax-reveal-ng-button">Only Bottom</button>
505
+ </ax-reveal-ng>
506
+ </div>
507
+ <div class="ax-reveal-ng-container round-corner">
508
+ <ax-reveal-ng class="only-left">
509
+ <button class="ax-reveal-ng-button">Only Left</button>
510
+ </ax-reveal-ng>
511
+ <ax-reveal-ng class="only-right">
512
+ <button class="ax-reveal-ng-button">Only Right</button>
513
+ </ax-reveal-ng>
514
+ </div>
515
+ <div>With Bevel Border Radius</div>
516
+ <div class="ax-reveal-ng-container bevel-corner">
517
+ <ax-reveal-ng class="no-top">
518
+ <button class="ax-reveal-ng-button">No Top</button>
519
+ </ax-reveal-ng>
520
+ <ax-reveal-ng class="no-bottom">
521
+ <button class="ax-reveal-ng-button">No Bottom</button>
522
+ </ax-reveal-ng>
523
+ </div>
524
+ <div class="ax-reveal-ng-container bevel-corner">
525
+ <ax-reveal-ng class="no-left">
526
+ <button class="ax-reveal-ng-button">No Left</button>
527
+ </ax-reveal-ng>
528
+ <ax-reveal-ng class="no-right">
529
+ <button class="ax-reveal-ng-button">No Right</button>
530
+ </ax-reveal-ng>
531
+ </div>
532
+ <div class="ax-reveal-ng-container bevel-corner">
533
+ <ax-reveal-ng class="horizontal">
534
+ <button class="ax-reveal-ng-button">Horizontal</button>
535
+ </ax-reveal-ng>
536
+ <ax-reveal-ng class="vertical">
537
+ <button class="ax-reveal-ng-button">Vertical</button>
538
+ </ax-reveal-ng>
539
+ </div>
540
+ <div class="ax-reveal-ng-container bevel-corner">
541
+ <ax-reveal-ng class="only-top">
542
+ <button class="ax-reveal-ng-button">Only Top</button>
543
+ </ax-reveal-ng>
544
+ <ax-reveal-ng class="only-bottom">
545
+ <button class="ax-reveal-ng-button">Only Bottom</button>
546
+ </ax-reveal-ng>
547
+ </div>
548
+ <div class="ax-reveal-ng-container bevel-corner">
549
+ <ax-reveal-ng class="only-left">
550
+ <button class="ax-reveal-ng-button">Only Left</button>
551
+ </ax-reveal-ng>
552
+ <ax-reveal-ng class="only-right">
553
+ <button class="ax-reveal-ng-button">Only Right</button>
554
+ </ax-reveal-ng>
555
+ </div>
556
+ </ax-reveal-bound>
557
+ </div>
558
+ <style>
559
+ .no-top {
560
+ --reveal-border-top-type: none;
561
+ }
562
+ .no-bottom {
563
+ --reveal-border-bottom-type: none;
564
+ }
565
+ .no-left {
566
+ --reveal-border-left-type: none;
567
+ }
568
+ .no-right {
569
+ --reveal-border-right-type: none;
570
+ }
571
+ .horizontal {
572
+ --reveal-border-left-type: none;
573
+ --reveal-border-right-type: none;
574
+ }
575
+ .vertical {
576
+ --reveal-border-top-type: none;
577
+ --reveal-border-bottom-type: none;
578
+ }
579
+ .only-top {
580
+ --reveal-border-bottom-type: none;
581
+ --reveal-border-left-type: none;
582
+ --reveal-border-right-type: none;
583
+ }
584
+ .only-bottom {
585
+ --reveal-border-top-type: none;
586
+ --reveal-border-left-type: none;
587
+ --reveal-border-right-type: none;
588
+ }
589
+ .only-left {
590
+ --reveal-border-top-type: none;
591
+ --reveal-border-bottom-type: none;
592
+ --reveal-border-right-type: none;
593
+ }
594
+ .only-right {
595
+ --reveal-border-top-type: none;
596
+ --reveal-border-bottom-type: none;
597
+ --reveal-border-left-type: none;
598
+ }
599
+ </style>
600
+ <div class="code">
601
+ <h2>No border</h2>
602
+ <pre>.no-top {
603
+ --reveal-border-top-type: none;
604
+ }
605
+
606
+ .no-bottom {
607
+ --reveal-border-bottom-type: none;
608
+ }
609
+
610
+ .no-left {
611
+ --reveal-border-left-type: none;
612
+ }
613
+
614
+ .no-right {
615
+ --reveal-border-right-type: none;
616
+ }
617
+
618
+ .horizontal {
619
+ --reveal-border-left-type: none;
620
+ --reveal-border-right-type: none;
621
+ }
622
+
623
+ .vertical {
624
+ --reveal-border-top-type: none;
625
+ --reveal-border-bottom-type: none;
626
+ }
627
+
628
+ .only-top {
629
+ --reveal-border-bottom-type: none;
630
+ --reveal-border-left-type: none;
631
+ --reveal-border-right-type: none;
632
+ }
633
+
634
+ .only-bottom {
635
+ --reveal-border-top-type: none;
636
+ --reveal-border-left-type: none;
637
+ --reveal-border-right-type: none;
638
+ }
639
+
640
+ .only-left {
641
+ --reveal-border-top-type: none;
642
+ --reveal-border-bottom-type: none;
643
+ --reveal-border-right-type: none;
644
+ }
645
+
646
+ .only-right {
647
+ --reveal-border-top-type: none;
648
+ --reveal-border-bottom-type: none;
649
+ --reveal-border-right-type: none;
650
+ }</pre>
651
+ </div>
652
+ </section>
653
+
654
+ <section class="demo-block">
655
+ <div class="demo">
656
+ <ax-reveal-bound class="fill-radius">
657
+ <div class="ax-reveal-ng-container">
658
+ <ax-reveal-ng>
659
+ <button class="ax-reveal-ng-button">Welcome</button>
660
+ </ax-reveal-ng>
661
+ <ax-reveal-ng>
662
+ <button class="ax-reveal-ng-button">To</button>
663
+ </ax-reveal-ng>
664
+ </div>
665
+ <div class="ax-reveal-ng-container">
666
+ <ax-reveal-ng>
667
+ <button class="ax-reveal-ng-button">Project</button>
668
+ </ax-reveal-ng>
669
+ <ax-reveal-ng>
670
+ <button class="ax-reveal-ng-button">Axiom!</button>
671
+ </ax-reveal-ng>
672
+ </div>
673
+ </ax-reveal-bound>
674
+ </div>
675
+ <style>
676
+ .fill-radius {
677
+ --reveal-hover-light-fill-radius: 0.2;
678
+ }
679
+ </style>
680
+ <div class="code">
681
+ <h2>Fill Radius</h2>
682
+ <pre>.my-reveal-container{
683
+ --reveal-hover-light-fill-radius: 0.2;
684
+ }</pre>
685
+ </div>
686
+ </section>
687
+
688
+ <section class="demo-block">
689
+ <div class="demo">
690
+ <ax-reveal-bound class="no-fill">
691
+ <div class="ax-reveal-ng-container">
692
+ <ax-reveal-ng>
693
+ <button class="ax-reveal-ng-button">Welcome</button>
694
+ </ax-reveal-ng>
695
+ <ax-reveal-ng>
696
+ <button class="ax-reveal-ng-button">To</button>
697
+ </ax-reveal-ng>
698
+ </div>
699
+ <div class="ax-reveal-ng-container">
700
+ <ax-reveal-ng>
701
+ <button class="ax-reveal-ng-button">Project</button>
702
+ </ax-reveal-ng>
703
+ <ax-reveal-ng>
704
+ <button class="ax-reveal-ng-button">Axiom!</button>
705
+ </ax-reveal-ng>
706
+ </div>
707
+ </ax-reveal-bound>
708
+ </div>
709
+ <style>
710
+ .no-fill {
711
+ --reveal-hover-light: false;
712
+ }
713
+ </style>
714
+ <div class="code">
715
+ <h2>No Fill</h2>
716
+ <pre>.my-reveal-container{
717
+ --reveal-hover-light: false;
718
+ }</pre>
719
+ </div>
720
+ </section>
721
+
722
+ <section class="demo-block">
723
+ <div class="demo">
724
+ <ax-reveal-bound class="hold-animation">
725
+ <div class="ax-reveal-ng-container">
726
+ <ax-reveal-ng>
727
+ <button class="ax-reveal-ng-button">Welcome</button>
728
+ </ax-reveal-ng>
729
+ <ax-reveal-ng>
730
+ <button class="ax-reveal-ng-button">To</button>
731
+ </ax-reveal-ng>
732
+ </div>
733
+ <div class="ax-reveal-ng-container">
734
+ <ax-reveal-ng>
735
+ <button class="ax-reveal-ng-button">Project</button>
736
+ </ax-reveal-ng>
737
+ <ax-reveal-ng>
738
+ <button class="ax-reveal-ng-button">Axiom!</button>
739
+ </ax-reveal-ng>
740
+ </div>
741
+ </ax-reveal-bound>
742
+ </div>
743
+ <style>
744
+ .hold-animation {
745
+ --reveal-press-animation-speed: 8000;
746
+ }
747
+ </style>
748
+ <div class="code">
749
+ <h2>Hold animation</h2>
750
+ <pre>.my-reveal-container{
751
+ --reveal-animate-speed: 8000;
752
+ }</pre>
753
+ </div>
754
+ </section>
755
+
756
+ <section class="demo-block">
757
+ <div class="demo">
758
+ <ax-reveal-bound class="release-animation">
759
+ <div class="ax-reveal-ng-container">
760
+ <ax-reveal-ng>
761
+ <button class="ax-reveal-ng-button">Welcome</button>
762
+ </ax-reveal-ng>
763
+ <ax-reveal-ng>
764
+ <button class="ax-reveal-ng-button">To</button>
765
+ </ax-reveal-ng>
766
+ </div>
767
+ <div class="ax-reveal-ng-container">
768
+ <ax-reveal-ng>
769
+ <button class="ax-reveal-ng-button">Project</button>
770
+ </ax-reveal-ng>
771
+ <ax-reveal-ng>
772
+ <button class="ax-reveal-ng-button">Axiom!</button>
773
+ </ax-reveal-ng>
774
+ </div>
775
+ </ax-reveal-bound>
776
+ </div>
777
+ <style>
778
+ .release-animation {
779
+ --reveal-release-animation-accelerate-rate: 20;
780
+ }
781
+ </style>
782
+ <div class="code">
783
+ <h2>Release animation</h2>
784
+ <pre>.my-reveal-container{
785
+ --reveal-released-accelerate-rate: 20;
786
+ }</pre>
787
+ </div>
788
+ </section>
789
+
790
+ <section class="demo-block">
791
+ <div class="demo">
792
+ <ax-reveal-bound class="fill-mode">
793
+ <div class="ax-reveal-ng-container">
794
+ <ax-reveal-ng>
795
+ <button class="ax-reveal-ng-button">Welcome</button>
796
+ </ax-reveal-ng>
797
+ <ax-reveal-ng>
798
+ <button class="ax-reveal-ng-button">To</button>
799
+ </ax-reveal-ng>
800
+ </div>
801
+ <div class="ax-reveal-ng-container">
802
+ <ax-reveal-ng>
803
+ <button class="ax-reveal-ng-button">Project</button>
804
+ </ax-reveal-ng>
805
+ <ax-reveal-ng>
806
+ <button class="ax-reveal-ng-button">Axiom!</button>
807
+ </ax-reveal-ng>
808
+ </div>
809
+ </ax-reveal-bound>
810
+ </div>
811
+ <style>
812
+ .fill-mode {
813
+ --reveal-hover-light-fill-radius: 0.1;
814
+ --reveal-press-animation-radius-mode: constrained;
815
+ }
816
+ </style>
817
+ <div class="code">
818
+ <h2>Animation Fill Mode</h2>
819
+ <pre>.my-reveal-container{
820
+ --reveal-hover-light-fill-radius: 0.1;
821
+ --reveal-press-animation-radius-mode: constrained;
822
+ }</pre>
823
+ </div>
824
+ </section>
825
+
826
+ <section class="demo-block">
827
+ <div class="demo">
828
+ <ax-reveal-bound class="no-animation">
829
+ <div class="ax-reveal-ng-container">
830
+ <ax-reveal-ng>
831
+ <button class="ax-reveal-ng-button">Welcome</button>
832
+ </ax-reveal-ng>
833
+ <ax-reveal-ng>
834
+ <button class="ax-reveal-ng-button">To</button>
835
+ </ax-reveal-ng>
836
+ </div>
837
+ <div class="ax-reveal-ng-container">
838
+ <ax-reveal-ng>
839
+ <button class="ax-reveal-ng-button">Project</button>
840
+ </ax-reveal-ng>
841
+ <ax-reveal-ng>
842
+ <button class="ax-reveal-ng-button">Axiom!</button>
843
+ </ax-reveal-ng>
844
+ </div>
845
+ </ax-reveal-bound>
846
+ </div>
847
+ <style>
848
+ .no-animation {
849
+ --reveal-press-animation: false;
850
+ }
851
+ </style>
852
+ <div class="code">
853
+ <h2>No animation</h2>
854
+ <pre>.my-reveal-container{
855
+ --reveal-press-animation: false;
856
+ }</pre>
857
+ </div>
858
+ </section>
859
+
860
+ <section class="demo-block">
861
+ <div class="demo">
862
+ <ax-reveal-bound class="dynamic-size">
863
+ <div class="ax-reveal-ng-container">
864
+ <ax-reveal-ng>
865
+ <button class="ax-reveal-ng-button">Welcome</button>
866
+ </ax-reveal-ng>
867
+ <ax-reveal-ng>
868
+ <button class="ax-reveal-ng-button">To</button>
869
+ </ax-reveal-ng>
870
+ </div>
871
+ <div class="ax-reveal-ng-container">
872
+ <ax-reveal-ng>
873
+ <button class="ax-reveal-ng-button">Project</button>
874
+ </ax-reveal-ng>
875
+ <ax-reveal-ng>
876
+ <button class="ax-reveal-ng-button">Axiom!</button>
877
+ </ax-reveal-ng>
878
+ </div>
879
+ </ax-reveal-bound>
880
+ </div>
881
+ <style>
882
+ .dynamic-size.large ax-reveal-ng {
883
+ width: 160px;
884
+ height: 160px;
885
+ }
886
+
887
+ .dynamic-size.large .ax-reveal-ng-button {
888
+ min-width: 160px;
889
+ height: 160px;
890
+ }
891
+ </style>
892
+ <div class="code">
893
+ <h2>Dynamic size</h2>
894
+ <button
895
+ onclick="document.querySelector('.dynamic-size')?.classList.toggle('large')"
896
+ >
897
+ Click here
898
+ </button>
899
+ </div>
900
+ </section>
901
+
902
+ <section class="demo-block">
903
+ <div class="demo">
904
+ <div class="long-list no-diffuse">
905
+ <ax-reveal-bound>
906
+ <div class="ax-reveal-ng-container">
907
+ <ax-reveal-ng>
908
+ <button class="ax-reveal-ng-button">A lovely item</button>
909
+ </ax-reveal-ng>
910
+ <ax-reveal-ng>
911
+ <button class="ax-reveal-ng-button">A lovely item</button>
912
+ </ax-reveal-ng>
913
+ <ax-reveal-ng>
914
+ <button class="ax-reveal-ng-button">A lovely item</button>
915
+ </ax-reveal-ng>
916
+ <ax-reveal-ng>
917
+ <button class="ax-reveal-ng-button">A lovely item</button>
918
+ </ax-reveal-ng>
919
+ <ax-reveal-ng>
920
+ <button class="ax-reveal-ng-button">A lovely item</button>
921
+ </ax-reveal-ng>
922
+ </div>
923
+ </div>
924
+ </ax-reveal-bound>
925
+ </div>
926
+ <style>
927
+ .no-diffuse {
928
+ --reveal-diffuse: false;
929
+ overflow-y: auto;
930
+ height: auto;
931
+ }
932
+ </style>
933
+ <div class="code">
934
+ <h2>No diffuse</h2>
935
+ <pre>.my-reveal-container{
936
+ --reveal-diffuse: false;
937
+ }</pre>
938
+ </div>
939
+ </section>
940
+ <section class="round-corner benchmark">
941
+ <h2>Benchmark (100 Items)</h2>
942
+ <ax-reveal-bound>
943
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
944
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
945
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
946
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
947
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
948
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
949
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
950
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
951
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
952
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
953
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
954
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
955
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
956
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
957
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
958
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
959
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
960
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
961
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
962
+ <ax-reveal-ng>🥩</ax-reveal-ng><ax-reveal-ng>🥚</ax-reveal-ng><ax-reveal-ng>🥛</ax-reveal-ng><ax-reveal-ng>👀</ax-reveal-ng><ax-reveal-ng>📎</ax-reveal-ng>
963
+ </ax-reveal-bound>
964
+
965
+ <style>
966
+ .benchmark {
967
+ font-size: 0;
968
+ }
969
+
970
+ .benchmark ax-reveal-ng {
971
+ width: 40px;
972
+ height: 40px;
973
+ margin: 4px;
974
+ padding: 8px;
975
+ font-size: 24px;
976
+ text-align: center;
977
+ line-height: 40px;
978
+ cursor: default;
979
+ }
980
+ </style>
981
+ </section>
982
+ </ax-reveal-provider>
983
+ <script type="module">
984
+ // For package developer.
985
+ import { register } from '../../../es/index.js';
986
+ // import { register } from 'https://unpkg.com/@ax-design/reveal-highlight/es/index.js';
987
+ register({
988
+ compat: true,
989
+ borderDetectionMode: 'experimentalAutoFit',
990
+ });
991
+ </script>
992
+ </body>