@scalewing/react 1.10.0 → 1.10.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 (40) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/README.md +5 -1
  3. package/dist/anchored-position.d.ts +17 -5
  4. package/dist/anchored-position.js +19 -4
  5. package/dist/components/ActionMenu.js +2 -58
  6. package/dist/components/action-menu/ActionMenuList.d.ts +21 -0
  7. package/dist/components/action-menu/ActionMenuList.js +27 -0
  8. package/dist/components/date-field/CalendarDialog.js +1 -1
  9. package/dist/components/use-anchored-popover.d.ts +14 -0
  10. package/dist/components/{date-field/use-anchored-popover.js → use-anchored-popover.js} +31 -9
  11. package/dist/css/css-action-menu.js +25 -6
  12. package/dist/css/css-calendar-button.js +2 -3
  13. package/dist/css/css-components.js +2 -25
  14. package/dist/css/css-date-field.js +2 -1
  15. package/dist/css/css-palettes.js +11 -1
  16. package/dist/css/css-text.d.ts +1 -0
  17. package/dist/css/css-text.js +42 -0
  18. package/dist/css/stacking.js +2 -1
  19. package/dist/css/touch-target.d.ts +2 -0
  20. package/dist/css/touch-target.js +7 -0
  21. package/dist/palette/amber.css +2 -0
  22. package/dist/palette/capri.css +2 -0
  23. package/dist/palette/cerulean.css +2 -0
  24. package/dist/palette/cornflower.css +2 -0
  25. package/dist/palette/fuchsia.css +2 -0
  26. package/dist/palette/harvest.css +2 -0
  27. package/dist/palette/ink.css +2 -0
  28. package/dist/palette/mocha.css +2 -0
  29. package/dist/palette/navy.css +2 -0
  30. package/dist/palette/postcard.css +2 -0
  31. package/dist/palette/raspberry.css +2 -0
  32. package/dist/palette/signal.css +2 -0
  33. package/dist/palette/sky.css +2 -0
  34. package/dist/palette/soft-blue.css +2 -0
  35. package/dist/palette/sunburst.css +2 -0
  36. package/dist/palette/synthwave.css +2 -0
  37. package/dist/palette/tangerine.css +2 -0
  38. package/dist/styles.css +70 -13
  39. package/package.json +1 -1
  40. package/dist/components/date-field/use-anchored-popover.d.ts +0 -8
package/dist/palette/capri.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #0077B6;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #F2F8FB;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
13
14
  [data-theme='dark'] {
14
15
  --sw-color-accent: #48CAE4;
15
16
  --sw-color-onAccent: #101214;
17
+ --sw-color-accentSubtle: #202D32;
16
18
  --sw-glass-blur: 24px;
17
19
  --sw-glass-saturate: 1.8;
18
20
  --sw-glass-fill: rgba(36, 59, 66, 0.72);
package/dist/palette/cerulean.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #0066CC;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #E6F0FA;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
13
14
  [data-theme='dark'] {
14
15
  --sw-color-accent: #5AC8FA;
15
16
  --sw-color-onAccent: #101214;
17
+ --sw-color-accentSubtle: #222D34;
16
18
  --sw-glass-blur: 24px;
17
19
  --sw-glass-saturate: 1.8;
18
20
  --sw-glass-fill: rgba(39, 59, 70, 0.72);
package/dist/palette/cornflower.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #4F6BED;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #FFFFFF;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
13
14
  [data-theme='dark'] {
14
15
  --sw-color-accent: #93A4FF;
15
16
  --sw-color-onAccent: #101214;
17
+ --sw-color-accentSubtle: #282A35;
16
18
  --sw-glass-blur: 24px;
17
19
  --sw-glass-saturate: 1.8;
18
20
  --sw-glass-fill: rgba(49, 52, 71, 0.72);
package/dist/palette/fuchsia.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #C026D3;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #FEFBFE;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
13
14
  [data-theme='dark'] {
14
15
  --sw-color-accent: #E879F9;
15
16
  --sw-color-onAccent: #101214;
17
+ --sw-color-accentSubtle: #302534;
16
18
  --sw-glass-blur: 24px;
17
19
  --sw-glass-saturate: 1.8;
18
20
  --sw-glass-fill: rgba(65, 45, 69, 0.72);
package/dist/palette/harvest.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --sw-color-muted: #5C5346;
8
8
  --sw-color-accent: #3E3E24;
9
9
  --sw-color-onAccent: #FFFFFF;
10
+ --sw-color-accentSubtle: #DAD5C4;
10
11
  --sw-color-border: #C9C2AE;
11
12
  --sw-button-secondary-border: #C9C2AE;
12
13
  --sw-glass-blur: 24px;
@@ -23,6 +24,7 @@
23
24
  --sw-color-muted: #B8B090;
24
25
  --sw-color-accent: #CEA453;
25
26
  --sw-color-onAccent: #101214;
27
+ --sw-color-accentSubtle: #2F4A2C;
26
28
  --sw-color-border: #3D5238;
27
29
  --sw-button-secondary-border: #3D5238;
28
30
  --sw-glass-blur: 24px;
package/dist/palette/ink.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #1D1D1F;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #E8E8E9;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
13
14
  [data-theme='dark'] {
14
15
  --sw-color-accent: #F5F5F7;
15
16
  --sw-color-onAccent: #101214;
17
+ --sw-color-accentSubtle: #323234;
16
18
  --sw-glass-blur: 24px;
17
19
  --sw-glass-saturate: 1.8;
18
20
  --sw-glass-fill: rgba(67, 67, 69, 0.72);
package/dist/palette/mocha.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --sw-color-muted: #6B5348;
8
8
  --sw-color-accent: #473333;
9
9
  --sw-color-onAccent: #FFFFFF;
10
+ --sw-color-accentSubtle: #E6DBCF;
10
11
  --sw-color-border: #E0CBA8;
11
12
  --sw-button-secondary-border: #E0CBA8;
12
13
  --sw-glass-blur: 24px;
@@ -23,6 +24,7 @@
23
24
  --sw-color-muted: #D4C4A8;
24
25
  --sw-color-accent: #E8C69F;
25
26
  --sw-color-onAccent: #101214;
27
+ --sw-color-accentSubtle: #684F4B;
26
28
  --sw-color-border: #6B5353;
27
29
  --sw-button-secondary-border: #6B5353;
28
30
  --sw-glass-blur: 24px;
package/dist/palette/navy.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #0A2540;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #E7E9EC;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
13
14
  [data-theme='dark'] {
14
15
  --sw-color-accent: #7EB8FF;
15
16
  --sw-color-onAccent: #101214;
17
+ --sw-color-accentSubtle: #262C35;
16
18
  --sw-glass-blur: 24px;
17
19
  --sw-glass-saturate: 1.8;
18
20
  --sw-glass-fill: rgba(46, 56, 71, 0.72);
package/dist/palette/postcard.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --sw-color-muted: #5C5346;
8
8
  --sw-color-accent: #A33B2B;
9
9
  --sw-color-onAccent: #FFFFFF;
10
+ --sw-color-accentSubtle: #E7DCCB;
10
11
  --sw-color-border: #D0D0B8;
11
12
  --sw-button-secondary-border: #D0D0B8;
12
13
  --sw-glass-blur: 24px;
@@ -23,6 +24,7 @@
23
24
  --sw-color-muted: #B8B49A;
24
25
  --sw-color-accent: #EEAF90;
25
26
  --sw-color-onAccent: #101214;
27
+ --sw-color-accentSubtle: #393848;
26
28
  --sw-color-border: #3A4158;
27
29
  --sw-button-secondary-border: #3A4158;
28
30
  --sw-glass-blur: 24px;
package/dist/palette/raspberry.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #DB2777;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #FFFDFE;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
13
14
  [data-theme='dark'] {
14
15
  --sw-color-accent: #F472B6;
15
16
  --sw-color-onAccent: #101214;
17
+ --sw-color-accentSubtle: #32252D;
16
18
  --sw-glass-blur: 24px;
17
19
  --sw-glass-saturate: 1.8;
18
20
  --sw-glass-fill: rgba(67, 43, 57, 0.72);
package/dist/palette/signal.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #0066CC;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #E6F0FA;
6
7
  --sw-color-secondary: #1D1D1F;
7
8
  --sw-color-onSecondary: #FFFFFF;
8
9
  --sw-color-tertiary: #7C5CD6;
@@ -18,6 +19,7 @@
18
19
  [data-theme='dark'] {
19
20
  --sw-color-accent: #5AC8FA;
20
21
  --sw-color-onAccent: #101214;
22
+ --sw-color-accentSubtle: #222D34;
21
23
  --sw-color-secondary: #F5F5F7;
22
24
  --sw-color-onSecondary: #101214;
23
25
  --sw-color-tertiary: #C4B5FD;
package/dist/palette/sky.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #0369A1;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #E6F0F6;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
13
14
  [data-theme='dark'] {
14
15
  --sw-color-accent: #38BDF8;
15
16
  --sw-color-onAccent: #101214;
17
+ --sw-color-accentSubtle: #1F2C34;
16
18
  --sw-glass-blur: 24px;
17
19
  --sw-glass-saturate: 1.8;
18
20
  --sw-glass-fill: rgba(33, 57, 69, 0.72);
package/dist/palette/soft-blue.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #3B6FD4;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #F7F9FD;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
13
14
  [data-theme='dark'] {
14
15
  --sw-color-accent: #8BB8FF;
15
16
  --sw-color-onAccent: #101214;
17
+ --sw-color-accentSubtle: #272C35;
16
18
  --sw-glass-blur: 24px;
17
19
  --sw-glass-saturate: 1.8;
18
20
  --sw-glass-fill: rgba(48, 56, 71, 0.72);
package/dist/palette/sunburst.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --sw-color-muted: #5C5346;
8
8
  --sw-color-accent: #A33B20;
9
9
  --sw-color-onAccent: #FFFFFF;
10
+ --sw-color-accentSubtle: #F2DEC6;
10
11
  --sw-color-border: #E5C48A;
11
12
  --sw-button-secondary-border: #E5C48A;
12
13
  --sw-glass-blur: 24px;
@@ -23,6 +24,7 @@
23
24
  --sw-color-muted: #C4A882;
24
25
  --sw-color-accent: #FAA968;
25
26
  --sw-color-onAccent: #101214;
27
+ --sw-color-accentSubtle: #22485D;
26
28
  --sw-color-border: #1A5A70;
27
29
  --sw-button-secondary-border: #1A5A70;
28
30
  --sw-glass-blur: 24px;
package/dist/palette/synthwave.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #D81B60;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #FDF4F7;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -17,6 +18,7 @@
17
18
  --sw-color-muted: #C9B8E8;
18
19
  --sw-color-accent: #FF2A6D;
19
20
  --sw-color-onAccent: #101214;
21
+ --sw-color-accentSubtle: #2F1145;
20
22
  --sw-color-border: #4A2C6A;
21
23
  --sw-button-secondary-border: #4A2C6A;
22
24
  --sw-glass-blur: 24px;
package/dist/palette/tangerine.css CHANGED
@@ -3,6 +3,7 @@
3
3
  [data-theme='light'] {
4
4
  --sw-color-accent: #C2410C;
5
5
  --sw-color-onAccent: #FFFFFF;
6
+ --sw-color-accentSubtle: #FAEEE9;
6
7
  --sw-glass-blur: 24px;
7
8
  --sw-glass-saturate: 1;
8
9
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -13,6 +14,7 @@
13
14
  [data-theme='dark'] {
14
15
  --sw-color-accent: #FB923C;
15
16
  --sw-color-onAccent: #101214;
17
+ --sw-color-accentSubtle: #322821;
16
18
  --sw-glass-blur: 24px;
17
19
  --sw-glass-saturate: 1.8;
18
20
  --sw-glass-fill: rgba(68, 49, 35, 0.72);
package/dist/styles.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --sw-color-muted: #6E6E73;
8
8
  --sw-color-accent: #5B3DF5;
9
9
  --sw-color-onAccent: #FFFFFF;
10
+ --sw-color-accentSubtle: #EFECFE;
10
11
  --sw-color-secondary: #FFFFFF;
11
12
  --sw-color-onSecondary: #1D1D1F;
12
13
  --sw-color-tertiary: #48484A;
@@ -70,6 +71,7 @@
70
71
  --sw-color-muted: #A1A1A6;
71
72
  --sw-color-accent: #A78BFA;
72
73
  --sw-color-onAccent: #101214;
74
+ --sw-color-accentSubtle: #2A2734;
73
75
  --sw-color-secondary: #1C1C1E;
74
76
  --sw-color-onSecondary: #F5F5F7;
75
77
  --sw-color-tertiary: #D1D1D6;
@@ -129,6 +131,7 @@
129
131
  [data-theme='light'][data-palette='cerulean'] {
130
132
  --sw-color-accent: #0066CC;
131
133
  --sw-color-onAccent: #FFFFFF;
134
+ --sw-color-accentSubtle: #E6F0FA;
132
135
  --sw-glass-blur: 24px;
133
136
  --sw-glass-saturate: 1;
134
137
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -139,6 +142,7 @@
139
142
  [data-theme='dark'][data-palette='cerulean'] {
140
143
  --sw-color-accent: #5AC8FA;
141
144
  --sw-color-onAccent: #101214;
145
+ --sw-color-accentSubtle: #222D34;
142
146
  --sw-glass-blur: 24px;
143
147
  --sw-glass-saturate: 1.8;
144
148
  --sw-glass-fill: rgba(39, 59, 70, 0.72);
@@ -149,6 +153,7 @@
149
153
  [data-theme='light'][data-palette='signal'] {
150
154
  --sw-color-accent: #0066CC;
151
155
  --sw-color-onAccent: #FFFFFF;
156
+ --sw-color-accentSubtle: #E6F0FA;
152
157
  --sw-color-secondary: #1D1D1F;
153
158
  --sw-color-onSecondary: #FFFFFF;
154
159
  --sw-color-tertiary: #7C5CD6;
@@ -164,6 +169,7 @@
164
169
  [data-theme='dark'][data-palette='signal'] {
165
170
  --sw-color-accent: #5AC8FA;
166
171
  --sw-color-onAccent: #101214;
172
+ --sw-color-accentSubtle: #222D34;
167
173
  --sw-color-secondary: #F5F5F7;
168
174
  --sw-color-onSecondary: #101214;
169
175
  --sw-color-tertiary: #C4B5FD;
@@ -179,6 +185,7 @@
179
185
  [data-theme='light'][data-palette='navy'] {
180
186
  --sw-color-accent: #0A2540;
181
187
  --sw-color-onAccent: #FFFFFF;
188
+ --sw-color-accentSubtle: #E7E9EC;
182
189
  --sw-glass-blur: 24px;
183
190
  --sw-glass-saturate: 1;
184
191
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -189,6 +196,7 @@
189
196
  [data-theme='dark'][data-palette='navy'] {
190
197
  --sw-color-accent: #7EB8FF;
191
198
  --sw-color-onAccent: #101214;
199
+ --sw-color-accentSubtle: #262C35;
192
200
  --sw-glass-blur: 24px;
193
201
  --sw-glass-saturate: 1.8;
194
202
  --sw-glass-fill: rgba(46, 56, 71, 0.72);
@@ -199,6 +207,7 @@
199
207
  [data-theme='light'][data-palette='sky'] {
200
208
  --sw-color-accent: #0369A1;
201
209
  --sw-color-onAccent: #FFFFFF;
210
+ --sw-color-accentSubtle: #E6F0F6;
202
211
  --sw-glass-blur: 24px;
203
212
  --sw-glass-saturate: 1;
204
213
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -209,6 +218,7 @@
209
218
  [data-theme='dark'][data-palette='sky'] {
210
219
  --sw-color-accent: #38BDF8;
211
220
  --sw-color-onAccent: #101214;
221
+ --sw-color-accentSubtle: #1F2C34;
212
222
  --sw-glass-blur: 24px;
213
223
  --sw-glass-saturate: 1.8;
214
224
  --sw-glass-fill: rgba(33, 57, 69, 0.72);
@@ -219,6 +229,7 @@
219
229
  [data-theme='light'][data-palette='ink'] {
220
230
  --sw-color-accent: #1D1D1F;
221
231
  --sw-color-onAccent: #FFFFFF;
232
+ --sw-color-accentSubtle: #E8E8E9;
222
233
  --sw-glass-blur: 24px;
223
234
  --sw-glass-saturate: 1;
224
235
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -229,6 +240,7 @@
229
240
  [data-theme='dark'][data-palette='ink'] {
230
241
  --sw-color-accent: #F5F5F7;
231
242
  --sw-color-onAccent: #101214;
243
+ --sw-color-accentSubtle: #323234;
232
244
  --sw-glass-blur: 24px;
233
245
  --sw-glass-saturate: 1.8;
234
246
  --sw-glass-fill: rgba(67, 67, 69, 0.72);
@@ -239,6 +251,7 @@
239
251
  [data-theme='light'][data-palette='cornflower'] {
240
252
  --sw-color-accent: #4F6BED;
241
253
  --sw-color-onAccent: #FFFFFF;
254
+ --sw-color-accentSubtle: #FFFFFF;
242
255
  --sw-glass-blur: 24px;
243
256
  --sw-glass-saturate: 1;
244
257
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -249,6 +262,7 @@
249
262
  [data-theme='dark'][data-palette='cornflower'] {
250
263
  --sw-color-accent: #93A4FF;
251
264
  --sw-color-onAccent: #101214;
265
+ --sw-color-accentSubtle: #282A35;
252
266
  --sw-glass-blur: 24px;
253
267
  --sw-glass-saturate: 1.8;
254
268
  --sw-glass-fill: rgba(49, 52, 71, 0.72);
@@ -259,6 +273,7 @@
259
273
  [data-theme='light'][data-palette='soft-blue'] {
260
274
  --sw-color-accent: #3B6FD4;
261
275
  --sw-color-onAccent: #FFFFFF;
276
+ --sw-color-accentSubtle: #F7F9FD;
262
277
  --sw-glass-blur: 24px;
263
278
  --sw-glass-saturate: 1;
264
279
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -269,6 +284,7 @@
269
284
  [data-theme='dark'][data-palette='soft-blue'] {
270
285
  --sw-color-accent: #8BB8FF;
271
286
  --sw-color-onAccent: #101214;
287
+ --sw-color-accentSubtle: #272C35;
272
288
  --sw-glass-blur: 24px;
273
289
  --sw-glass-saturate: 1.8;
274
290
  --sw-glass-fill: rgba(48, 56, 71, 0.72);
@@ -279,6 +295,7 @@
279
295
  [data-theme='light'][data-palette='capri'] {
280
296
  --sw-color-accent: #0077B6;
281
297
  --sw-color-onAccent: #FFFFFF;
298
+ --sw-color-accentSubtle: #F2F8FB;
282
299
  --sw-glass-blur: 24px;
283
300
  --sw-glass-saturate: 1;
284
301
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -289,6 +306,7 @@
289
306
  [data-theme='dark'][data-palette='capri'] {
290
307
  --sw-color-accent: #48CAE4;
291
308
  --sw-color-onAccent: #101214;
309
+ --sw-color-accentSubtle: #202D32;
292
310
  --sw-glass-blur: 24px;
293
311
  --sw-glass-saturate: 1.8;
294
312
  --sw-glass-fill: rgba(36, 59, 66, 0.72);
@@ -299,6 +317,7 @@
299
317
  [data-theme='light'][data-palette='raspberry'] {
300
318
  --sw-color-accent: #DB2777;
301
319
  --sw-color-onAccent: #FFFFFF;
320
+ --sw-color-accentSubtle: #FFFDFE;
302
321
  --sw-glass-blur: 24px;
303
322
  --sw-glass-saturate: 1;
304
323
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -309,6 +328,7 @@
309
328
  [data-theme='dark'][data-palette='raspberry'] {
310
329
  --sw-color-accent: #F472B6;
311
330
  --sw-color-onAccent: #101214;
331
+ --sw-color-accentSubtle: #32252D;
312
332
  --sw-glass-blur: 24px;
313
333
  --sw-glass-saturate: 1.8;
314
334
  --sw-glass-fill: rgba(67, 43, 57, 0.72);
@@ -319,6 +339,7 @@
319
339
  [data-theme='light'][data-palette='tangerine'] {
320
340
  --sw-color-accent: #C2410C;
321
341
  --sw-color-onAccent: #FFFFFF;
342
+ --sw-color-accentSubtle: #FAEEE9;
322
343
  --sw-glass-blur: 24px;
323
344
  --sw-glass-saturate: 1;
324
345
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -329,6 +350,7 @@
329
350
  [data-theme='dark'][data-palette='tangerine'] {
330
351
  --sw-color-accent: #FB923C;
331
352
  --sw-color-onAccent: #101214;
353
+ --sw-color-accentSubtle: #322821;
332
354
  --sw-glass-blur: 24px;
333
355
  --sw-glass-saturate: 1.8;
334
356
  --sw-glass-fill: rgba(68, 49, 35, 0.72);
@@ -339,6 +361,7 @@
339
361
  [data-theme='light'][data-palette='amber'] {
340
362
  --sw-color-accent: #B45309;
341
363
  --sw-color-onAccent: #FFFFFF;
364
+ --sw-color-accentSubtle: #FAF3EE;
342
365
  --sw-glass-blur: 24px;
343
366
  --sw-glass-saturate: 1;
344
367
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -349,6 +372,7 @@
349
372
  [data-theme='dark'][data-palette='amber'] {
350
373
  --sw-color-accent: #FCD34D;
351
374
  --sw-color-onAccent: #101214;
375
+ --sw-color-accentSubtle: #322E23;
352
376
  --sw-glass-blur: 24px;
353
377
  --sw-glass-saturate: 1.8;
354
378
  --sw-glass-fill: rgba(68, 61, 38, 0.72);
@@ -359,6 +383,7 @@
359
383
  [data-theme='light'][data-palette='fuchsia'] {
360
384
  --sw-color-accent: #C026D3;
361
385
  --sw-color-onAccent: #FFFFFF;
386
+ --sw-color-accentSubtle: #FEFBFE;
362
387
  --sw-glass-blur: 24px;
363
388
  --sw-glass-saturate: 1;
364
389
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -369,6 +394,7 @@
369
394
  [data-theme='dark'][data-palette='fuchsia'] {
370
395
  --sw-color-accent: #E879F9;
371
396
  --sw-color-onAccent: #101214;
397
+ --sw-color-accentSubtle: #302534;
372
398
  --sw-glass-blur: 24px;
373
399
  --sw-glass-saturate: 1.8;
374
400
  --sw-glass-fill: rgba(65, 45, 69, 0.72);
@@ -383,6 +409,7 @@
383
409
  --sw-color-muted: #5C5346;
384
410
  --sw-color-accent: #A33B20;
385
411
  --sw-color-onAccent: #FFFFFF;
412
+ --sw-color-accentSubtle: #F2DEC6;
386
413
  --sw-color-border: #E5C48A;
387
414
  --sw-button-secondary-border: #E5C48A;
388
415
  --sw-glass-blur: 24px;
@@ -399,6 +426,7 @@
399
426
  --sw-color-muted: #C4A882;
400
427
  --sw-color-accent: #FAA968;
401
428
  --sw-color-onAccent: #101214;
429
+ --sw-color-accentSubtle: #22485D;
402
430
  --sw-color-border: #1A5A70;
403
431
  --sw-button-secondary-border: #1A5A70;
404
432
  --sw-glass-blur: 24px;
@@ -415,6 +443,7 @@
415
443
  --sw-color-muted: #5C5346;
416
444
  --sw-color-accent: #3E3E24;
417
445
  --sw-color-onAccent: #FFFFFF;
446
+ --sw-color-accentSubtle: #DAD5C4;
418
447
  --sw-color-border: #C9C2AE;
419
448
  --sw-button-secondary-border: #C9C2AE;
420
449
  --sw-glass-blur: 24px;
@@ -431,6 +460,7 @@
431
460
  --sw-color-muted: #B8B090;
432
461
  --sw-color-accent: #CEA453;
433
462
  --sw-color-onAccent: #101214;
463
+ --sw-color-accentSubtle: #2F4A2C;
434
464
  --sw-color-border: #3D5238;
435
465
  --sw-button-secondary-border: #3D5238;
436
466
  --sw-glass-blur: 24px;
@@ -447,6 +477,7 @@
447
477
  --sw-color-muted: #5C5346;
448
478
  --sw-color-accent: #A33B2B;
449
479
  --sw-color-onAccent: #FFFFFF;
480
+ --sw-color-accentSubtle: #E7DCCB;
450
481
  --sw-color-border: #D0D0B8;
451
482
  --sw-button-secondary-border: #D0D0B8;
452
483
  --sw-glass-blur: 24px;
@@ -463,6 +494,7 @@
463
494
  --sw-color-muted: #B8B49A;
464
495
  --sw-color-accent: #EEAF90;
465
496
  --sw-color-onAccent: #101214;
497
+ --sw-color-accentSubtle: #393848;
466
498
  --sw-color-border: #3A4158;
467
499
  --sw-button-secondary-border: #3A4158;
468
500
  --sw-glass-blur: 24px;
@@ -479,6 +511,7 @@
479
511
  --sw-color-muted: #6B5348;
480
512
  --sw-color-accent: #473333;
481
513
  --sw-color-onAccent: #FFFFFF;
514
+ --sw-color-accentSubtle: #E6DBCF;
482
515
  --sw-color-border: #E0CBA8;
483
516
  --sw-button-secondary-border: #E0CBA8;
484
517
  --sw-glass-blur: 24px;
@@ -495,6 +528,7 @@
495
528
  --sw-color-muted: #D4C4A8;
496
529
  --sw-color-accent: #E8C69F;
497
530
  --sw-color-onAccent: #101214;
531
+ --sw-color-accentSubtle: #684F4B;
498
532
  --sw-color-border: #6B5353;
499
533
  --sw-button-secondary-border: #6B5353;
500
534
  --sw-glass-blur: 24px;
@@ -507,6 +541,7 @@
507
541
  [data-theme='light'][data-palette='synthwave'] {
508
542
  --sw-color-accent: #D81B60;
509
543
  --sw-color-onAccent: #FFFFFF;
544
+ --sw-color-accentSubtle: #FDF4F7;
510
545
  --sw-glass-blur: 24px;
511
546
  --sw-glass-saturate: 1;
512
547
  --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -521,6 +556,7 @@
521
556
  --sw-color-muted: #C9B8E8;
522
557
  --sw-color-accent: #FF2A6D;
523
558
  --sw-color-onAccent: #101214;
559
+ --sw-color-accentSubtle: #2F1145;
524
560
  --sw-color-border: #4A2C6A;
525
561
  --sw-button-secondary-border: #4A2C6A;
526
562
  --sw-glass-blur: 24px;
@@ -734,8 +770,8 @@ body {
734
770
  }
735
771
 
736
772
  /* Backdrop blur makes a glass surface its own stacking context, so it lifts while it holds an open popup (see stacking.ts). */
737
- .sw-card-glass:has(.sw-select-list, .sw-action-menu-list:not([hidden]), .sw-tooltip:not([hidden]), .sw-date-field-calendar),
738
- .sw-accordion:has(.sw-select-list, .sw-action-menu-list:not([hidden]), .sw-tooltip:not([hidden]), .sw-date-field-calendar) {
773
+ .sw-card-glass:has(.sw-select-list, .sw-action-menu-list, .sw-tooltip:not([hidden]), .sw-date-field-calendar),
774
+ .sw-accordion:has(.sw-select-list, .sw-action-menu-list, .sw-tooltip:not([hidden]), .sw-date-field-calendar) {
739
775
  position: relative;
740
776
  z-index: 3;
741
777
  }
@@ -756,10 +792,6 @@ body {
756
792
  background: var(--sw-color-subtle);
757
793
  }
758
794
 
759
- .sw-text-align-start { text-align: start; }
760
- .sw-text-align-center { text-align: center; }
761
- .sw-text-align-end { text-align: end; }
762
-
763
795
  .sw-truncate {
764
796
  overflow: hidden;
765
797
  text-overflow: ellipsis;
@@ -770,6 +802,12 @@ body {
770
802
  font-variant-numeric: tabular-nums;
771
803
  }
772
804
 
805
+ .sw-text-align-start { text-align: start; }
806
+ .sw-text-align-center { text-align: center; }
807
+ .sw-text-align-end { text-align: end; }
808
+
809
+ :where(.sw-text-display, .sw-text-heading, .sw-text-title, .sw-text-body, .sw-text-label, .sw-text-caption, .sw-text-data) { margin: 0; }
810
+
773
811
  .sw-text-display { font-family: var(--sw-font-sans); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.8px; }
774
812
  .sw-text-heading { font-family: var(--sw-font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.45px; }
775
813
  .sw-text-title { font-family: var(--sw-font-sans); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
@@ -1410,7 +1448,8 @@ body {
1410
1448
  height: auto;
1411
1449
  inset: auto;
1412
1450
  margin: 0;
1413
- max-width: calc(100vw - var(--sw-space-2) - var(--sw-space-2));
1451
+ /* On the top layer 100% is the viewport without a classic scrollbar. */
1452
+ max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
1414
1453
  overflow: visible;
1415
1454
  padding: var(--sw-space-3);
1416
1455
  position: fixed;
@@ -1949,20 +1988,22 @@ body {
1949
1988
  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
1950
1989
  box-sizing: border-box;
1951
1990
  color: var(--sw-color-text);
1991
+ /* The popover layer's inset: 0 would ignore the placed left in right-to-left. */
1992
+ inset: auto;
1952
1993
  margin: 0;
1953
1994
  max-height: var(--sw-select-max);
1954
- max-width: calc(100vw - var(--sw-space-2));
1955
- min-width: max-content;
1995
+ /* On the top layer 100% is the viewport without a classic scrollbar. */
1996
+ max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
1997
+ /* Never narrower than a touch target. */
1998
+ min-width: var(--sw-control-md-min-height);
1956
1999
  overflow: auto;
1957
2000
  padding: var(--sw-space-1);
1958
2001
  position: fixed;
2002
+ /* As wide as its longest command, until max-width wraps it. */
2003
+ width: max-content;
1959
2004
  z-index: 10;
1960
2005
  }
1961
2006
 
1962
- .sw-action-menu-list[hidden] {
1963
- display: none;
1964
- }
1965
-
1966
2007
  .sw-action-menu-item {
1967
2008
  align-items: center;
1968
2009
  appearance: none;
@@ -1975,7 +2016,11 @@ body {
1975
2016
  font-family: var(--sw-font-sans);
1976
2017
  font-size: 15px;
1977
2018
  gap: var(--sw-space-2);
2019
+ line-height: 20px;
1978
2020
  min-height: var(--sw-control-xs-min-height);
2021
+ /* A long command wraps inside the capped menu, a word at a time if it must. */
2022
+ overflow-wrap: anywhere;
2023
+ padding-block: var(--sw-space-1);
1979
2024
  padding-inline: var(--sw-control-xs-padding-inline);
1980
2025
  text-align: start;
1981
2026
  width: 100%;
@@ -1995,6 +2040,18 @@ body {
1995
2040
  color: var(--sw-color-danger);
1996
2041
  }
1997
2042
 
2043
+ /* A coarse pointer gets the full touch target: the trigger at least square, and every command as tall. */
2044
+ @media (pointer: coarse) {
2045
+ .sw-action-menu-trigger {
2046
+ min-height: var(--sw-control-md-min-height);
2047
+ min-width: var(--sw-control-md-min-height);
2048
+ }
2049
+
2050
+ .sw-action-menu-item {
2051
+ min-height: var(--sw-control-md-min-height);
2052
+ }
2053
+ }
2054
+
1998
2055
  .sw-action-bar {
1999
2056
  align-items: center;
2000
2057
  background: var(--sw-glass-fill);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scalewing/react",
3
- "version": "1.10.0",
3
+ "version": "1.10.1",
4
4
  "description": "Scalewing DOM components and package-owned CSS utilities.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/dist/components/date-field/use-anchored-popover.d.ts DELETED
@@ -1,8 +0,0 @@
1
- import { type RefObject } from 'react';
2
- /**
3
- * Shows a mounted element on the top layer as a manual popover, keeps it
4
- * beside `anchorRef` through scroll and resize, and calls `onDismiss` for a
5
- * press outside it and outside `ignoreRef` (the button that toggles it).
6
- * Browsers without the popover API get the same fixed placement.
7
- */
8
- export declare function useAnchoredPopover(popoverRef: RefObject<HTMLElement | null>, anchorRef: RefObject<HTMLElement | null>, ignoreRef: RefObject<HTMLElement | null>, onDismiss: () => void): void;