vanilla-jui 1.3.9 → 1.3.11

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 (76) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.umd.js +1 -1
  3. package/dist/style.css +1 -1
  4. package/package.json +3 -2
  5. package/src/components/accordion.js +373 -0
  6. package/src/components/components.js +0 -0
  7. package/src/components/drop.js +437 -0
  8. package/src/components/flow.js +1133 -0
  9. package/src/components/form.js +585 -0
  10. package/src/components/icons.js +83 -0
  11. package/src/components/menu.js +422 -0
  12. package/src/components/modal.js +1174 -0
  13. package/src/components/offcanvas.js +332 -0
  14. package/src/components/pagination.js +536 -0
  15. package/src/components/parabola.js +295 -0
  16. package/src/components/sticky.js +271 -0
  17. package/src/components/swiper.js +1123 -0
  18. package/src/components/tabs.js +746 -0
  19. package/src/components/theme.js +353 -0
  20. package/src/components/toast.js +329 -0
  21. package/src/components/toc.js +226 -0
  22. package/src/components/tooltip.js +86 -0
  23. package/src/components/validator.js +586 -0
  24. package/src/core/Component.js +248 -0
  25. package/src/css/accordion.css +72 -0
  26. package/src/css/animation.css +177 -0
  27. package/src/css/avatar.css +62 -0
  28. package/src/css/badge.css +66 -0
  29. package/src/css/breadcrumb.css +106 -0
  30. package/src/css/button.css +296 -0
  31. package/src/css/card.css +151 -0
  32. package/src/css/color.css +1163 -0
  33. package/src/css/color_p3.css +1172 -0
  34. package/src/css/components.css +26 -0
  35. package/src/css/content.css +716 -0
  36. package/src/css/divider.css +9 -0
  37. package/src/css/drop.css +28 -0
  38. package/src/css/flow.css +86 -0
  39. package/src/css/font.css +23 -0
  40. package/src/css/form.css +919 -0
  41. package/src/css/gradient.css +224 -0
  42. package/src/css/icon.css +63 -0
  43. package/src/css/index.css +12 -0
  44. package/src/css/layout.css +782 -0
  45. package/src/css/loading.css +38 -0
  46. package/src/css/menu.css +564 -0
  47. package/src/css/modal.css +94 -0
  48. package/src/css/offcanvas.css +104 -0
  49. package/src/css/pagination.css +25 -0
  50. package/src/css/popup.css +69 -0
  51. package/src/css/skeleton.css +76 -0
  52. package/src/css/status.css +56 -0
  53. package/src/css/swiper.css +160 -0
  54. package/src/css/table.css +52 -0
  55. package/src/css/tabs.css +95 -0
  56. package/src/css/tag.css +97 -0
  57. package/src/css/theme-palette.css +59 -0
  58. package/src/css/tip.css +84 -0
  59. package/src/css/toast.css +154 -0
  60. package/src/css/toc.css +38 -0
  61. package/src/css/tokens.css +1295 -0
  62. package/src/css/toolbar.css +115 -0
  63. package/src/css/tooltip.css +19 -0
  64. package/src/icons/index.js +30 -0
  65. package/src/index.js +45 -0
  66. package/src/locales/index.js +45 -0
  67. package/src/locales/index.min.js +1 -0
  68. package/src/utilities/browser.js +111 -0
  69. package/src/utilities/cache.js +159 -0
  70. package/src/utilities/core.js +502 -0
  71. package/src/utilities/debug.js +103 -0
  72. package/src/utilities/dom.js +313 -0
  73. package/src/utilities/events.js +69 -0
  74. package/src/utilities/http.js +30 -0
  75. package/src/utilities/legacy-dom.js +179 -0
  76. package/src/utilities/storage.js +46 -0
package/src/css/divider.css ADDED
@@ -0,0 +1,9 @@
1
+ @layer components {
2
+ .divider {
3
+ align-self: stretch;
4
+ border-color: currentColor;
5
+ border-left-width: 1px;
6
+ border-top-width: 1px;
7
+ opacity: 0.1;
8
+ }
9
+ }
package/src/css/drop.css ADDED
@@ -0,0 +1,28 @@
1
+ @layer components {
2
+ .j-drop {
3
+ display: none;
4
+ position: absolute;
5
+ top: 0;
6
+ left: 0;
7
+ opacity: 0;
8
+ pointer-events: none;
9
+ transition: opacity 0.2s ease;
10
+ z-index: var(--z-drop);
11
+ }
12
+
13
+ .j-drop.is-active {
14
+ display: block;
15
+ opacity: 1;
16
+ pointer-events: auto;
17
+ }
18
+
19
+ .drop-container {
20
+ border-width: var(--drop-border-width, 1px);
21
+ border-style: var(--drop-border-style, solid);
22
+ border-color: var(--drop-border-color, var(--ui-border));
23
+ border-radius: var(--radius-md);
24
+ background-color: var(--drop-background, var(--ui-bg));
25
+ color: var(--drop-foreground, var(--ui-fg));
26
+ box-shadow: var(--drop-box-shadow, var(--shadow-sm));
27
+ }
28
+ }
package/src/css/flow.css ADDED
@@ -0,0 +1,86 @@
1
+ @layer components {
2
+ .j-flow {
3
+ --flow-gap: var(--s2);
4
+ --flow-step-size: 28px;
5
+ --flow-border: 1px solid var(--ui-border-subtle);
6
+
7
+ display: grid;
8
+ gap: var(--flow-gap);
9
+ }
10
+
11
+ .j-flow .flow-header {
12
+ display: grid;
13
+ gap: calc(var(--space) / 2);
14
+ }
15
+
16
+ .j-flow .flow-title {
17
+ font-size: var(--font-size-lg);
18
+ font-weight: 600;
19
+ }
20
+
21
+ .j-flow .flow-description {
22
+ color: var(--ui-fg-muted);
23
+ font-size: var(--font-size-sm);
24
+ line-height: var(--line-height-paragraph);
25
+ }
26
+
27
+ .j-flow .flow-steps {
28
+ display: flex;
29
+ gap: var(--flow-gap);
30
+ list-style: none;
31
+ margin: 0;
32
+ padding: 0;
33
+ }
34
+
35
+ .j-flow .flow-step {
36
+ min-width: 0;
37
+ }
38
+
39
+ .j-flow .flow-step-button {
40
+ display: inline-flex;
41
+ align-items: center;
42
+ gap: var(--space);
43
+ border: 0;
44
+ background: transparent;
45
+ color: var(--ui-fg-muted);
46
+ cursor: pointer;
47
+ padding: 0;
48
+ }
49
+
50
+ .j-flow .flow-step-button:disabled {
51
+ cursor: not-allowed;
52
+ opacity: 0.55;
53
+ }
54
+
55
+ .j-flow .flow-step-index {
56
+ align-items: center;
57
+ background: var(--ui-surface-muted);
58
+ border-radius: 999px;
59
+ display: inline-flex;
60
+ height: var(--flow-step-size);
61
+ justify-content: center;
62
+ min-width: var(--flow-step-size);
63
+ }
64
+
65
+ .j-flow .flow-step.is-active .flow-step-button {
66
+ color: var(--tone-solid);
67
+ }
68
+
69
+ .j-flow .flow-step.is-active .flow-step-index,
70
+ .j-flow .flow-step.is-complete .flow-step-index {
71
+ background: var(--tone-solid);
72
+ color: var(--tone-fg);
73
+ }
74
+
75
+ .j-flow .flow-body {
76
+ min-width: 0;
77
+ }
78
+
79
+ .j-flow .flow-footer {
80
+ border-top: var(--flow-border);
81
+ display: flex;
82
+ gap: var(--space);
83
+ justify-content: flex-end;
84
+ padding-top: var(--flow-gap);
85
+ }
86
+ }
package/src/css/font.css ADDED
@@ -0,0 +1,23 @@
1
+ @layer font {
2
+ @font-face {
3
+ font-family: Emoji;
4
+ src:
5
+ local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Segoe UI Symbol'),
6
+ local('Noto Color Emoji');
7
+ unicode-range: U+1F000-1F644, U+203C-3299;
8
+ }
9
+
10
+ .font-serif {
11
+ font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
12
+ }
13
+
14
+ .font-mono {
15
+ font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
16
+ }
17
+
18
+ .font-math {
19
+ font-family:
20
+ Cambria Math,
21
+ Latin Modern Math;
22
+ }
23
+ }