@jsswift/ui 1.0.41

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 (55) hide show
  1. package/dist/css/animation.css +121 -0
  2. package/dist/css/base.css +621 -0
  3. package/dist/css/docs.css +216 -0
  4. package/dist/css/min-ui.css +1 -0
  5. package/dist/css/responsive.css +3259 -0
  6. package/dist/css/ui-components.css +8757 -0
  7. package/dist/css/ui.css +12765 -0
  8. package/dist/css/ui.min.css +1 -0
  9. package/dist/fonts/Nunito-Black.ttf +0 -0
  10. package/dist/fonts/Nunito-BlackItalic.ttf +0 -0
  11. package/dist/fonts/Nunito-Bold.ttf +0 -0
  12. package/dist/fonts/Nunito-BoldItalic.ttf +0 -0
  13. package/dist/fonts/Nunito-ExtraBold.ttf +0 -0
  14. package/dist/fonts/Nunito-ExtraBoldItalic.ttf +0 -0
  15. package/dist/fonts/Nunito-ExtraLight.ttf +0 -0
  16. package/dist/fonts/Nunito-ExtraLightItalic.ttf +0 -0
  17. package/dist/fonts/Nunito-Italic.ttf +0 -0
  18. package/dist/fonts/Nunito-Light.ttf +0 -0
  19. package/dist/fonts/Nunito-LightItalic.ttf +0 -0
  20. package/dist/fonts/Nunito-Medium.ttf +0 -0
  21. package/dist/fonts/Nunito-MediumItalic.ttf +0 -0
  22. package/dist/fonts/Nunito-Regular.ttf +0 -0
  23. package/dist/fonts/Nunito-SemiBold.ttf +0 -0
  24. package/dist/fonts/Nunito-SemiBoldItalic.ttf +0 -0
  25. package/dist/img/logo.svg +131 -0
  26. package/dist/img/svg/tabler-icons-sprite.svg +39534 -0
  27. package/dist/min-ui.js +34 -0
  28. package/dist/ui.js +21027 -0
  29. package/dist/ui.min.js +34 -0
  30. package/package.json +40 -0
  31. package/src/00-bootstrap.js +330 -0
  32. package/src/01-foundation-helpers.js +1208 -0
  33. package/src/10-primitives-layout.js +5972 -0
  34. package/src/20-display-content.js +1014 -0
  35. package/src/21-list-content.js +341 -0
  36. package/src/22-banner-content.js +489 -0
  37. package/src/23-tooltip.js +326 -0
  38. package/src/31-form-advanced.js +3149 -0
  39. package/src/40-navigation.js +1454 -0
  40. package/src/41-tab-panel.js +1090 -0
  41. package/src/50-feedback.js +1209 -0
  42. package/src/51-feedback-service.js +166 -0
  43. package/src/60-shell-app.js +1483 -0
  44. package/src/61-form-service.js +450 -0
  45. package/src/70-dialog.js +401 -0
  46. package/src/71-menu-overlays.js +1442 -0
  47. package/src/80-data.js +503 -0
  48. package/src/README.md +159 -0
  49. package/src/css/README.md +17 -0
  50. package/src/css/animation.css +121 -0
  51. package/src/css/base.css +621 -0
  52. package/src/css/docs.css +216 -0
  53. package/src/css/responsive.css +3259 -0
  54. package/src/css/ui-components.css +8757 -0
  55. package/src/modules.json +176 -0
package/dist/css/docs.css ADDED
@@ -0,0 +1,216 @@
1
+ .cms-component-docs-hero {
2
+ background:
3
+ radial-gradient(circle at top right, color-mix(in srgb, var(--cms-warning-200) 60%, transparent), transparent 44%),
4
+ linear-gradient(145deg, color-mix(in srgb, var(--cms-theme-color-1) 60%, var(--cms-panel)), color-mix(in srgb, var(--cms-theme-color-1) 70%, var(--cms-panel)));
5
+ box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
6
+ background-size: 101% 101%;
7
+ background-position: top right, bottom left;
8
+ }
9
+
10
+ .cms-component-docs-eyebrow {
11
+ align-items: center;
12
+ }
13
+
14
+ .cms-component-docs-raw-name {
15
+ font-size: 12px;
16
+ letter-spacing: 0.08em;
17
+ color: var(--cms-text-3);
18
+ }
19
+
20
+ .cms-component-docs-title {
21
+ margin: 15px 0;
22
+ font-size: clamp(34px, 5vw, 52px);
23
+ line-height: 0.96;
24
+ letter-spacing: -0.04em;
25
+ }
26
+
27
+ .cms-component-docs-summary {
28
+ margin: 0;
29
+ max-width: 70ch;
30
+ font-size: 16px;
31
+ line-height: 1.6;
32
+ color: var(--cms-text-2);
33
+ }
34
+
35
+ .cms-component-docs-fact-label {
36
+ font-size: 11px;
37
+ letter-spacing: 0.12em;
38
+ text-transform: uppercase;
39
+ color: var(--cms-text-3);
40
+ }
41
+
42
+ .cms-component-docs-fact-value {
43
+ font-size: 15px;
44
+ line-height: 1.5;
45
+ color: var(--cms-text);
46
+ }
47
+
48
+ .cms-component-docs-tabs {
49
+ --cms-tabpanel-accent: var(--cms-primary);
50
+ }
51
+
52
+ .cms-component-docs-tabs>.cms-tabpanel-nav {
53
+ position: sticky;
54
+ top: 12px;
55
+ z-index: 2;
56
+ backdrop-filter: blur(12px);
57
+ }
58
+
59
+ .cms-component-docs-surface-title {
60
+ font-size: 18px;
61
+ }
62
+
63
+ .cms-component-docs-surface-note {
64
+ max-width: 42ch;
65
+ font-size: 13px;
66
+ line-height: 1.5;
67
+ color: var(--cms-text-3);
68
+ }
69
+
70
+ .cms-component-docs-prop {
71
+ border-radius: 14px;
72
+ background: color-mix(in srgb, var(--cms-panel) 76%, var(--cms-theme-color-1));
73
+ border: 1px solid color-mix(in srgb, var(--cms-border-color) 82%, var(--cms-theme-color-1));
74
+ }
75
+
76
+ .cms-component-docs-list-kicker {
77
+ font-size: 11px;
78
+ letter-spacing: 0.12em;
79
+ text-transform: uppercase;
80
+ color: var(--cms-text-3);
81
+ }
82
+
83
+ .cms-component-docs-list-title {
84
+ font-size: 16px;
85
+ font-weight: 700;
86
+ line-height: 1.2;
87
+ }
88
+
89
+ .cms-component-docs-prop-text {
90
+ font-size: 14px;
91
+ line-height: 1.6;
92
+ color: var(--cms-text-2);
93
+ }
94
+
95
+ .cms-component-docs-prop-head {
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: space-between;
99
+ gap: 10px;
100
+ flex-wrap: wrap;
101
+ }
102
+
103
+ .cms-component-docs-prop-default {
104
+ font-size: 12px;
105
+ color: var(--cms-text-3);
106
+ }
107
+
108
+ .cms-component-docs-prop-tags {
109
+ display: flex;
110
+ gap: 8px;
111
+ flex-wrap: wrap;
112
+ }
113
+
114
+ .cms-doc-table-header {
115
+ display: grid;
116
+ gap: 10px;
117
+ padding: 18px 20px 0;
118
+ }
119
+
120
+ .cms-doc-table-title {
121
+ font-size: 22px;
122
+ font-weight: 800;
123
+ letter-spacing: -0.03em;
124
+ }
125
+
126
+ .cms-doc-table-section-title {
127
+ padding: 0 20px;
128
+ font-size: 14px;
129
+ letter-spacing: 0.08em;
130
+ text-transform: uppercase;
131
+ color: var(--cms-text-3);
132
+ }
133
+
134
+ .cms-doc-meta {
135
+ display: grid;
136
+ gap: 14px;
137
+ padding: 16px;
138
+ border-radius: 16px;
139
+ background: color-mix(in srgb, var(--cms-panel) 78%, var(--cms-theme-color-1));
140
+ border: 1px solid color-mix(in srgb, var(--cms-border-color) 84%, var(--cms-theme-color-1));
141
+ }
142
+
143
+ .cms-doc-meta-head {
144
+ display: flex;
145
+ gap: 12px;
146
+ align-items: start;
147
+ justify-content: space-between;
148
+ flex-wrap: wrap;
149
+ }
150
+
151
+ .cms-doc-meta-name {
152
+ font-size: 28px;
153
+ font-weight: 800;
154
+ letter-spacing: -0.03em;
155
+ }
156
+
157
+ .cms-doc-meta-types {
158
+ display: flex;
159
+ gap: 8px;
160
+ flex-wrap: wrap;
161
+ }
162
+
163
+ .cms-doc-meta-grid {
164
+ display: grid;
165
+ grid-template-columns: repeat(2, minmax(0, 1fr));
166
+ gap: 12px;
167
+ }
168
+
169
+ .cms-doc-meta-block {
170
+ display: grid;
171
+ gap: 6px;
172
+ }
173
+
174
+ .cms-doc-meta-label {
175
+ font-size: 11px;
176
+ letter-spacing: 0.12em;
177
+ text-transform: uppercase;
178
+ color: var(--cms-text-3);
179
+ }
180
+
181
+ .cms-doc-meta-value {
182
+ font-size: 14px;
183
+ line-height: 1.6;
184
+ color: var(--cms-text-2);
185
+ }
186
+
187
+ .cms-doc-fallback {
188
+ display: grid;
189
+ gap: 16px;
190
+ padding: 16px 20px 20px;
191
+ }
192
+
193
+ .cms-doc-fallback-item {
194
+ display: grid;
195
+ gap: 12px;
196
+ padding: 14px;
197
+ border-radius: 14px;
198
+ background: color-mix(in srgb, var(--cms-panel) 82%, var(--cms-theme-color-1));
199
+ border: 1px solid color-mix(in srgb, var(--cms-border-color) 82%, var(--cms-theme-color-1));
200
+ }
201
+
202
+ .cms-doc-fallback-title {
203
+ font-size: 16px;
204
+ font-weight: 700;
205
+ }
206
+
207
+ @media (max-width: 980px) {
208
+
209
+ .cms-component-docs-tabs>.cms-tabpanel-nav {
210
+ position: static;
211
+ }
212
+
213
+ .cms-doc-meta-grid {
214
+ grid-template-columns: 1fr;
215
+ }
216
+ }