@typlog/ui 0.11.3 → 0.11.4

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 (11) hide show
  1. package/dist/addons.d.ts +1 -1
  2. package/dist/base.css +28 -4
  3. package/dist/components/button.css +1 -16
  4. package/dist/components/dialog.css +7 -149
  5. package/dist/components/dropdown.css +2 -2
  6. package/dist/components/pagination.css +1 -16
  7. package/dist/components/popover.css +4 -4
  8. package/dist/components.css +18 -61
  9. package/dist/components.d.ts +61 -58
  10. package/dist/components.js +192 -211
  11. package/package.json +1 -1
package/dist/addons.d.ts CHANGED
@@ -25,8 +25,8 @@ export declare const Turnstile: DefineComponent<TurnstileProps, {}, {}, {}, {},
25
25
  "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
26
26
  }>, {
27
27
  size: "normal" | "compact";
28
- resetInterval: number;
29
28
  theme: "light" | "dark" | "auto";
29
+ resetInterval: number;
30
30
  action: string;
31
31
  appearance: "always" | "execute" | "interaction-only";
32
32
  renderOnMount: boolean;
package/dist/base.css CHANGED
@@ -6399,6 +6399,34 @@
6399
6399
  --gray-track: var(--slate-track);
6400
6400
  }
6401
6401
 
6402
+ .ui-root:where([data-scaling="90%"]) {
6403
+ --scaling: 0.9;
6404
+ }
6405
+
6406
+ .ui-root:where([data-scaling="95%"]) {
6407
+ --scaling: 0.95;
6408
+ }
6409
+
6410
+ .ui-root:where([data-scaling="100%"]) {
6411
+ --scaling: 1;
6412
+ }
6413
+
6414
+ .ui-root:where([data-scaling="105%"]) {
6415
+ --scaling: 1.05;
6416
+ }
6417
+
6418
+ .ui-root:where([data-scaling="110%"]) {
6419
+ --scaling: 1.1;
6420
+ }
6421
+
6422
+ .ui-root:where([data-scaling="115%"]) {
6423
+ --scaling: 1.15;
6424
+ }
6425
+
6426
+ .ui-root:where([data-scaling="120%"]) {
6427
+ --scaling: 1.2;
6428
+ }
6429
+
6402
6430
  html.light {
6403
6431
  --light-0: white;
6404
6432
  --light-a1: var(--white-a1);
@@ -6808,7 +6836,3 @@ html.dark {
6808
6836
  -webkit-font-smoothing: antialiased;
6809
6837
  -moz-osx-font-smoothing: grayscale;
6810
6838
  }
6811
-
6812
- .ui-root {
6813
- --scaling: 1;
6814
- }
package/dist/components/button.css CHANGED
@@ -257,26 +257,11 @@
257
257
  background-color: var(--gray-a2);
258
258
  }
259
259
 
260
- .ui-Button.ui-IconButton:where(:not(.r-variant-ghost)) {
260
+ .ui-Button.ui-IconButton {
261
261
  height: var(--button-height);
262
262
  width: var(--button-height);
263
263
  padding: 0;
264
264
  }
265
- .ui-IconButton:where(.r-variant-ghost) {
266
- padding: var(--icon-button-ghost-padding);
267
- }
268
- .ui-IconButton:where(.r-size-1) {
269
- --icon-button-ghost-padding: var(--space-1);
270
- }
271
- .ui-IconButton:where(.r-size-2) {
272
- --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
273
- }
274
- .ui-IconButton:where(.r-size-3) {
275
- --icon-button-ghost-padding: var(--space-2);
276
- }
277
- .ui-IconButton:where(.r-size-4) {
278
- --icon-button-ghost-padding: var(--space-3);
279
- }
280
265
 
281
266
  .ui-SocialButton {
282
267
  background-color: var(--social-button-background-color);
package/dist/components/dialog.css CHANGED
@@ -257,145 +257,11 @@
257
257
  background-color: var(--gray-a2);
258
258
  }
259
259
 
260
- .ui-Button.ui-IconButton:where(:not(.r-variant-ghost)) {
260
+ .ui-Button.ui-IconButton {
261
261
  height: var(--button-height);
262
262
  width: var(--button-height);
263
263
  padding: 0;
264
264
  }
265
- .ui-IconButton:where(.r-variant-ghost) {
266
- padding: var(--icon-button-ghost-padding);
267
- }
268
- .ui-IconButton:where(.r-size-1) {
269
- --icon-button-ghost-padding: var(--space-1);
270
- }
271
- .ui-IconButton:where(.r-size-2) {
272
- --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
273
- }
274
- .ui-IconButton:where(.r-size-3) {
275
- --icon-button-ghost-padding: var(--space-2);
276
- }
277
- .ui-IconButton:where(.r-size-4) {
278
- --icon-button-ghost-padding: var(--space-3);
279
- }
280
-
281
- .ui-Inset {
282
- box-sizing: border-box;
283
- --margin-top: 0px;
284
- --margin-right: 0px;
285
- --margin-bottom: 0px;
286
- --margin-left: 0px;
287
- overflow: hidden;
288
- margin-top: var(--margin-top-override, var(--margin-top));
289
- margin-right: var(--margin-right-override, var(--margin-right));
290
- margin-bottom: var(--margin-bottom-override, var(--margin-bottom));
291
- margin-left: var(--margin-left-override, var(--margin-left));
292
- }
293
- .ui-Inset > * {
294
- --margin-top-override: initial;
295
- --margin-right-override: initial;
296
- --margin-bottom-override: initial;
297
- --margin-left-override: initial;
298
- }
299
- .ui-Inset:where(.r-clip-border-box) {
300
- --inset-border-radius-calc: calc(var(--inset-border-radius, 0px) - var(--inset-border-width, 0px));
301
- --inset-padding-top-calc: var(--inset-padding-top, 0px);
302
- --inset-padding-right-calc: var(--inset-padding-right, 0px);
303
- --inset-padding-bottom-calc: var(--inset-padding-bottom, 0px);
304
- --inset-padding-left-calc: var(--inset-padding-left, 0px);
305
- }
306
- .ui-Inset:where(.r-clip-padding-box) {
307
- --inset-border-radius-calc: var(--inset-border-radius, 0px);
308
- --inset-padding-top-calc: calc(var(--inset-padding-top, 0px) + var(--inset-border-width, 0px));
309
- --inset-padding-right-calc: calc(var(--inset-padding-right, 0px) + var(--inset-border-width, 0px));
310
- --inset-padding-bottom-calc: calc(var(--inset-padding-bottom, 0px) + var(--inset-border-width, 0px));
311
- --inset-padding-left-calc: calc(var(--inset-padding-left, 0px) + var(--inset-border-width, 0px));
312
- }
313
- .ui-Inset:where(.r-side-top) {
314
- --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
315
- --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
316
- --margin-bottom-override: var(--margin-bottom);
317
- --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
318
- border-top-left-radius: var(--inset-border-radius-calc);
319
- border-top-right-radius: var(--inset-border-radius-calc);
320
- border-bottom-left-radius: 0px;
321
- border-bottom-right-radius: 0px;
322
- }
323
- .ui-Inset:where(.r-side-bottom) {
324
- --margin-top-override: var(--margin-top);
325
- --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
326
- --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
327
- --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
328
- border-top-left-radius: 0px;
329
- border-top-right-radius: 0px;
330
- border-bottom-left-radius: var(--inset-border-radius-calc);
331
- border-bottom-right-radius: var(--inset-border-radius-calc);
332
- }
333
- .ui-Inset:where(.r-side-left) {
334
- --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
335
- --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
336
- --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
337
- --margin-right-override: var(--margin-right);
338
- border-top-left-radius: var(--inset-border-radius-calc);
339
- border-top-right-radius: 0px;
340
- border-bottom-left-radius: var(--inset-border-radius-calc);
341
- border-bottom-right-radius: 0px;
342
- }
343
- .ui-Inset:where(.r-side-right) {
344
- --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
345
- --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
346
- --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
347
- --margin-left-override: var(--margin-left);
348
- border-top-left-radius: 0px;
349
- border-top-right-radius: var(--inset-border-radius-calc);
350
- border-bottom-left-radius: 0px;
351
- border-bottom-right-radius: var(--inset-border-radius-calc);
352
- }
353
- .ui-Inset:where(.r-side-x) {
354
- --margin-top-override: var(--margin-top);
355
- --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
356
- --margin-bottom-override: var(--margin-bottom);
357
- --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
358
- border-radius: 0px;
359
- }
360
- .ui-Inset:where(.r-side-y) {
361
- --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
362
- --margin-right-override: var(--margin-right);
363
- --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
364
- --margin-left-override: var(--margin-left);
365
- border-radius: 0px;
366
- }
367
- .ui-Inset:where(.r-side-all) {
368
- --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
369
- --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
370
- --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
371
- --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
372
- border-radius: var(--inset-border-radius-calc);
373
- }
374
-
375
- .ui-DialogTitle {
376
- display: flex;
377
- justify-content: space-between;
378
- align-items: center;
379
- padding: var(--dialog-content-padding);
380
- background-color: var(--color-panel-solid);
381
- }
382
- .ui-DialogTitle:where(.r-variant-ghost) {
383
- margin-bottom: 0;
384
- }
385
- .ui-DialogTitle:where(.r-variant-outline),
386
- .ui-DialogTitle:where(.r-variant-solid) {
387
- border-bottom: 1px solid var(--gray-a4);
388
- margin-bottom: var(--dialog-content-padding);
389
- }
390
- .ui-DialogTitle:where(.r-variant-solid),
391
- .ui-DialogTitle:where(.r-variant-surface) {
392
- background-color: var(--gray-a2);
393
- margin-bottom: var(--dialog-content-padding);
394
- }
395
- .ui-DialogTitleText {
396
- flex-grow: 1;
397
- font-weight: var(--font-weight-medium);
398
- }
399
265
 
400
266
  .ui-DialogOverlay {
401
267
  position: fixed;
@@ -458,6 +324,11 @@
458
324
  --dialog-content-radius: var(--radius-5);
459
325
  --dialog-content-padding: var(--space-5);
460
326
  }
327
+ .ui-DialogContentClose {
328
+ position: absolute;
329
+ top: calc(var(--dialog-content-padding) / 1.5);
330
+ right: var(--dialog-content-padding);
331
+ }
461
332
  .ui-DialogContent > h2[id^="reka-dialog-title"] {
462
333
  font-size: var(--font-size-5);
463
334
  font-weight: var(--font-weight-bold);
@@ -465,7 +336,7 @@
465
336
  margin-bottom: var(--space-3);
466
337
  }
467
338
  .ui-DialogContent > p[id^="reka-dialog-description"] {
468
- font-size: var(--font-size-2);
339
+ font-size: var(--font-size-3);
469
340
  line-height: var(--line-height-2);
470
341
  letter-spacing: var(--letter-spacing-2);
471
342
  }
@@ -527,16 +398,3 @@ to {
527
398
  animation: ui-dialog-content-hide 150ms cubic-bezier(0.16, 1, 0.3, 1);
528
399
  }
529
400
  }
530
-
531
- .ui-DialogHead {
532
- position: sticky;
533
- top: calc(0px - var(--inset-padding-top-calc));
534
- display: flex;
535
- justify-content: space-between;
536
- align-items: center;
537
- margin-top: calc(0px - var(--inset-padding-top-calc));
538
- padding: calc(var(--dialog-content-padding) / 2) var(--dialog-content-padding);
539
- border-bottom: 1px solid var(--gray-a4);
540
- background-color: var(--color-background);
541
- z-index: 1;
542
- }
package/dist/components/dropdown.css CHANGED
@@ -132,14 +132,14 @@
132
132
  :where(.ui-MenuContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .ui-MenuViewport {
133
133
  padding-right: var(--space-3);
134
134
  }
135
- .ui-MenuContent:where([data-size="1"]) {
135
+ .ui-MenuContent:where(.r-size-1) {
136
136
  --menu-content-padding: var(--space-1);
137
137
  --menu-item-padding-left: calc(var(--space-5) / 1.2);
138
138
  --menu-item-padding-right: var(--space-2);
139
139
  --menu-item-height: var(--space-5);
140
140
  border-radius: var(--radius-3);
141
141
  }
142
- .ui-MenuContent:where([data-size="2"]) {
142
+ .ui-MenuContent:where(.r-size-2) {
143
143
  --menu-content-padding: var(--space-2);
144
144
  --menu-item-padding-left: var(--space-3);
145
145
  --menu-item-padding-right: var(--space-3);
package/dist/components/pagination.css CHANGED
@@ -257,26 +257,11 @@
257
257
  background-color: var(--gray-a2);
258
258
  }
259
259
 
260
- .ui-Button.ui-IconButton:where(:not(.r-variant-ghost)) {
260
+ .ui-Button.ui-IconButton {
261
261
  height: var(--button-height);
262
262
  width: var(--button-height);
263
263
  padding: 0;
264
264
  }
265
- .ui-IconButton:where(.r-variant-ghost) {
266
- padding: var(--icon-button-ghost-padding);
267
- }
268
- .ui-IconButton:where(.r-size-1) {
269
- --icon-button-ghost-padding: var(--space-1);
270
- }
271
- .ui-IconButton:where(.r-size-2) {
272
- --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
273
- }
274
- .ui-IconButton:where(.r-size-3) {
275
- --icon-button-ghost-padding: var(--space-2);
276
- }
277
- .ui-IconButton:where(.r-size-4) {
278
- --icon-button-ghost-padding: var(--space-3);
279
- }
280
265
 
281
266
  .ui-Pagination {
282
267
  display: flex;
package/dist/components/popover.css CHANGED
@@ -16,19 +16,19 @@
16
16
  box-sizing: border-box;
17
17
  transform-origin: var(--reka-popover-content-transform-origin);
18
18
  }
19
- .ui-PopoverContent:where([data-size="1"]) {
19
+ .ui-PopoverContent:where(.r-size-1) {
20
20
  --popover-content-padding: var(--space-3);
21
21
  border-radius: var(--radius-4);
22
22
  }
23
- .ui-PopoverContent:where([data-size="2"]) {
23
+ .ui-PopoverContent:where(.r-size-2) {
24
24
  --popover-content-padding: var(--space-4);
25
25
  border-radius: var(--radius-4);
26
26
  }
27
- .ui-PopoverContent:where([data-size="3"]) {
27
+ .ui-PopoverContent:where(.r-size-3) {
28
28
  --popover-content-padding: var(--space-5);
29
29
  border-radius: var(--radius-5);
30
30
  }
31
- .ui-PopoverContent:where([data-size="4"]) {
31
+ .ui-PopoverContent:where(.r-size-4) {
32
32
  --popover-content-padding: var(--space-6);
33
33
  border-radius: var(--radius-5);
34
34
  }
package/dist/components.css CHANGED
@@ -1,4 +1,9 @@
1
1
 
2
+ .ui-root[data-is-root-theme] {
3
+ position: relative;
4
+ z-index: 0;
5
+ }
6
+
2
7
  .ui-Avatar {
3
8
  display: inline-flex;
4
9
  align-items: center;
@@ -643,26 +648,11 @@
643
648
  background-color: var(--gray-a2);
644
649
  }
645
650
 
646
- .ui-Button.ui-IconButton:where(:not(.r-variant-ghost)) {
651
+ .ui-Button.ui-IconButton {
647
652
  height: var(--button-height);
648
653
  width: var(--button-height);
649
654
  padding: 0;
650
655
  }
651
- .ui-IconButton:where(.r-variant-ghost) {
652
- padding: var(--icon-button-ghost-padding);
653
- }
654
- .ui-IconButton:where(.r-size-1) {
655
- --icon-button-ghost-padding: var(--space-1);
656
- }
657
- .ui-IconButton:where(.r-size-2) {
658
- --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
659
- }
660
- .ui-IconButton:where(.r-size-3) {
661
- --icon-button-ghost-padding: var(--space-2);
662
- }
663
- .ui-IconButton:where(.r-size-4) {
664
- --icon-button-ghost-padding: var(--space-3);
665
- }
666
656
 
667
657
  .ui-SocialButton {
668
658
  background-color: var(--social-button-background-color);
@@ -809,31 +799,6 @@
809
799
  background-color: var(--gray-a9);
810
800
  }
811
801
 
812
- .ui-DialogTitle {
813
- display: flex;
814
- justify-content: space-between;
815
- align-items: center;
816
- padding: var(--dialog-content-padding);
817
- background-color: var(--color-panel-solid);
818
- }
819
- .ui-DialogTitle:where(.r-variant-ghost) {
820
- margin-bottom: 0;
821
- }
822
- .ui-DialogTitle:where(.r-variant-outline),
823
- .ui-DialogTitle:where(.r-variant-solid) {
824
- border-bottom: 1px solid var(--gray-a4);
825
- margin-bottom: var(--dialog-content-padding);
826
- }
827
- .ui-DialogTitle:where(.r-variant-solid),
828
- .ui-DialogTitle:where(.r-variant-surface) {
829
- background-color: var(--gray-a2);
830
- margin-bottom: var(--dialog-content-padding);
831
- }
832
- .ui-DialogTitleText {
833
- flex-grow: 1;
834
- font-weight: var(--font-weight-medium);
835
- }
836
-
837
802
  .ui-DialogOverlay {
838
803
  position: fixed;
839
804
  inset: 0;
@@ -895,6 +860,11 @@
895
860
  --dialog-content-radius: var(--radius-5);
896
861
  --dialog-content-padding: var(--space-5);
897
862
  }
863
+ .ui-DialogContentClose {
864
+ position: absolute;
865
+ top: calc(var(--dialog-content-padding) / 1.5);
866
+ right: var(--dialog-content-padding);
867
+ }
898
868
  .ui-DialogContent > h2[id^="reka-dialog-title"] {
899
869
  font-size: var(--font-size-5);
900
870
  font-weight: var(--font-weight-bold);
@@ -902,7 +872,7 @@
902
872
  margin-bottom: var(--space-3);
903
873
  }
904
874
  .ui-DialogContent > p[id^="reka-dialog-description"] {
905
- font-size: var(--font-size-2);
875
+ font-size: var(--font-size-3);
906
876
  line-height: var(--line-height-2);
907
877
  letter-spacing: var(--letter-spacing-2);
908
878
  }
@@ -965,19 +935,6 @@ to {
965
935
  }
966
936
  }
967
937
 
968
- .ui-DialogHead {
969
- position: sticky;
970
- top: calc(0px - var(--inset-padding-top-calc));
971
- display: flex;
972
- justify-content: space-between;
973
- align-items: center;
974
- margin-top: calc(0px - var(--inset-padding-top-calc));
975
- padding: calc(var(--dialog-content-padding) / 2) var(--dialog-content-padding);
976
- border-bottom: 1px solid var(--gray-a4);
977
- background-color: var(--color-background);
978
- z-index: 1;
979
- }
980
-
981
938
  .ui-MenuContent {
982
939
  --scrollarea-scrollbar-vertical-margin-top: var(--menu-content-padding);
983
940
  --scrollarea-scrollbar-vertical-margin-bottom: var(--menu-content-padding);
@@ -1004,14 +961,14 @@ to {
1004
961
  :where(.ui-MenuContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .ui-MenuViewport {
1005
962
  padding-right: var(--space-3);
1006
963
  }
1007
- .ui-MenuContent:where([data-size="1"]) {
964
+ .ui-MenuContent:where(.r-size-1) {
1008
965
  --menu-content-padding: var(--space-1);
1009
966
  --menu-item-padding-left: calc(var(--space-5) / 1.2);
1010
967
  --menu-item-padding-right: var(--space-2);
1011
968
  --menu-item-height: var(--space-5);
1012
969
  border-radius: var(--radius-3);
1013
970
  }
1014
- .ui-MenuContent:where([data-size="2"]) {
971
+ .ui-MenuContent:where(.r-size-2) {
1015
972
  --menu-content-padding: var(--space-2);
1016
973
  --menu-item-padding-left: var(--space-3);
1017
974
  --menu-item-padding-right: var(--space-3);
@@ -1092,19 +1049,19 @@ to {
1092
1049
  box-sizing: border-box;
1093
1050
  transform-origin: var(--reka-popover-content-transform-origin);
1094
1051
  }
1095
- .ui-PopoverContent:where([data-size="1"]) {
1052
+ .ui-PopoverContent:where(.r-size-1) {
1096
1053
  --popover-content-padding: var(--space-3);
1097
1054
  border-radius: var(--radius-4);
1098
1055
  }
1099
- .ui-PopoverContent:where([data-size="2"]) {
1056
+ .ui-PopoverContent:where(.r-size-2) {
1100
1057
  --popover-content-padding: var(--space-4);
1101
1058
  border-radius: var(--radius-4);
1102
1059
  }
1103
- .ui-PopoverContent:where([data-size="3"]) {
1060
+ .ui-PopoverContent:where(.r-size-3) {
1104
1061
  --popover-content-padding: var(--space-5);
1105
1062
  border-radius: var(--radius-5);
1106
1063
  }
1107
- .ui-PopoverContent:where([data-size="4"]) {
1064
+ .ui-PopoverContent:where(.r-size-4) {
1108
1065
  --popover-content-padding: var(--space-6);
1109
1066
  border-radius: var(--radius-5);
1110
1067
  }