@jsswift/ui 1.0.54 → 2.0.1

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