@typlog/ui 0.11.2 → 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 (12) hide show
  1. package/dist/addons.d.ts +1 -1
  2. package/dist/base.css +28 -4
  3. package/dist/components/button.css +2 -17
  4. package/dist/components/dialog.css +130 -218
  5. package/dist/components/dropdown.css +2 -2
  6. package/dist/components/inset.css +29 -8
  7. package/dist/components/pagination.css +2 -17
  8. package/dist/components/popover.css +4 -4
  9. package/dist/components.css +105 -94
  10. package/dist/components.d.ts +102 -89
  11. package/dist/components.js +199 -189
  12. 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
@@ -154,7 +154,7 @@
154
154
  background-color: var(--gray-a3);
155
155
  }
156
156
  .ui-Button:where(.r-variant-ghost) {
157
- padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
157
+ padding: var(--button-ghost-padding-y) var(--button-padding-x);
158
158
  }
159
159
  @media (hover: hover) {
160
160
  .ui-Button:where(.r-variant-ghost):where(:hover) {
@@ -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
@@ -1,127 +1,4 @@
1
1
 
2
- .ui-DialogOverlay {
3
- position: fixed;
4
- inset: 0;
5
- }
6
- .ui-DialogOverlay::before {
7
- position: fixed;
8
- content: '';
9
- inset: 0;
10
- background-color: var(--color-overlay);
11
- }
12
- .ui-DialogScroll {
13
- display: flex;
14
- overflow: auto;
15
- position: absolute;
16
- inset: 0;
17
- }
18
- .ui-DialogScrollPadding {
19
- flex-grow: 1;
20
- margin: auto;
21
- padding-top: var(--space-6);
22
- padding-bottom: max(var(--space-6), 6vh);
23
- padding-left: var(--space-4);
24
- padding-right: var(--space-4);
25
- }
26
- .ui-DialogScrollPadding[data-align="start"] {
27
- margin-top: 0;
28
- }
29
- .ui-DialogScrollPadding[data-align="center"] {
30
- margin-top: auto;
31
- }
32
- .ui-DialogContent {
33
- margin: auto;
34
- width: 100%;
35
- max-height: calc(100vh - var(--space-6) * 2);
36
- position: relative;
37
- box-sizing: border-box;
38
- overflow: auto;
39
- text-align: left;
40
-
41
- --inset-padding-top: var(--dialog-content-padding);
42
- --inset-padding-right: var(--dialog-content-padding);
43
- --inset-padding-bottom: var(--dialog-content-padding);
44
- --inset-padding-left: var(--dialog-content-padding);
45
- padding: var(--dialog-content-padding);
46
- box-sizing: border-box;
47
-
48
- background-color: var(--color-panel-solid);
49
- box-shadow: var(--shadow-6);
50
- outline: none;
51
- }
52
- .ui-DialogContent[data-size="1"] {
53
- --dialog-content-padding: var(--space-3);
54
- border-radius: var(--radius-4);
55
- }
56
- .ui-DialogContent[data-size="2"] {
57
- --dialog-content-padding: var(--space-4);
58
- border-radius: var(--radius-4);
59
- }
60
- .ui-DialogContent[data-size="3"] {
61
- --dialog-content-padding: var(--space-5);
62
- border-radius: var(--radius-5);
63
- }
64
- .ui-DialogContent[data-size="4"] {
65
- --dialog-content-padding: var(--space-6);
66
- border-radius: var(--radius-5);
67
- }
68
- @media (prefers-reduced-motion: no-preference) {
69
- @keyframes ui-dialog-overlay-no-op {
70
- from {
71
- opacity: 1;
72
- }
73
- to {
74
- opacity: 1;
75
- }
76
- }
77
- @keyframes ui-dialog-content-show {
78
- from {
79
- opacity: 0;
80
- transform: translateY(5px) scale(0.97);
81
- }
82
- to {
83
- opacity: 1;
84
- transform: translateY(0px) scale(1);
85
- }
86
- }
87
- @keyframes ui-dialog-content-hide {
88
- from {
89
- opacity: 1;
90
- transform: translateY(0px) scale(1);
91
- }
92
- to {
93
- opacity: 0;
94
- transform: translateY(5px) scale(0.99);
95
- }
96
- }
97
- .ui-DialogOverlay[data-state='closed'] {
98
- animation: ui-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
99
- }
100
- .ui-DialogOverlay[data-state='open']::before {
101
- animation: ui-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
102
- }
103
- .ui-DialogOverlay[data-state='closed']::before {
104
- animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
105
- }
106
- .ui-DialogContent[data-state='open'] {
107
- animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
108
- }
109
- .ui-DialogContent[data-state='closed'] {
110
- animation: ui-dialog-content-hide 100ms cubic-bezier(0.16, 1, 0.3, 1);
111
- }
112
- }
113
- .ui-DialogContent > h2[id^="reka-dialog-title"] {
114
- font-size: var(--font-size-5);
115
- font-weight: var(--font-weight-bold);
116
- line-height: var(--line-height-4);
117
- margin-bottom: var(--space-3);
118
- }
119
- .ui-DialogContent > p[id^="reka-dialog-description"] {
120
- font-size: var(--font-size-2);
121
- line-height: var(--line-height-2);
122
- letter-spacing: var(--letter-spacing-2);
123
- }
124
-
125
2
  .ui-Button {
126
3
  display: inline-flex;
127
4
  align-items: center;
@@ -277,7 +154,7 @@ to {
277
154
  background-color: var(--gray-a3);
278
155
  }
279
156
  .ui-Button:where(.r-variant-ghost) {
280
- padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
157
+ padding: var(--button-ghost-padding-y) var(--button-padding-x);
281
158
  }
282
159
  @media (hover: hover) {
283
160
  .ui-Button:where(.r-variant-ghost):where(:hover) {
@@ -380,109 +257,144 @@ to {
380
257
  background-color: var(--gray-a2);
381
258
  }
382
259
 
383
- .ui-Button.ui-IconButton:where(:not(.r-variant-ghost)) {
260
+ .ui-Button.ui-IconButton {
384
261
  height: var(--button-height);
385
262
  width: var(--button-height);
386
263
  padding: 0;
387
264
  }
388
- .ui-IconButton:where(.r-variant-ghost) {
389
- padding: var(--icon-button-ghost-padding);
390
- }
391
- .ui-IconButton:where(.r-size-1) {
392
- --icon-button-ghost-padding: var(--space-1);
265
+
266
+ .ui-DialogOverlay {
267
+ position: fixed;
268
+ inset: 0;
393
269
  }
394
- .ui-IconButton:where(.r-size-2) {
395
- --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
270
+ .ui-DialogOverlay::before {
271
+ position: fixed;
272
+ content: '';
273
+ inset: 0;
274
+ background-color: var(--color-overlay);
396
275
  }
397
- .ui-IconButton:where(.r-size-3) {
398
- --icon-button-ghost-padding: var(--space-2);
276
+ .ui-DialogWrapper {
277
+ display: flex;
278
+ overflow: hidden;
279
+ position: absolute;
280
+ inset: 0;
399
281
  }
400
- .ui-IconButton:where(.r-size-4) {
401
- --icon-button-ghost-padding: var(--space-3);
282
+ .ui-DialogContainer {
283
+ display: flex;
284
+ flex-direction: column;
285
+ flex-grow: 1;
286
+ align-items: center;
287
+ justify-content: flex-end;
288
+ width: 100%;
289
+ box-sizing: border-box;
290
+ padding-top: var(--space-6);
402
291
  }
292
+ .ui-DialogContent {
293
+ --inset-padding-top: var(--dialog-content-padding);
294
+ --inset-padding-right: var(--dialog-content-padding);
295
+ --inset-padding-bottom: var(--dialog-content-padding);
296
+ --inset-padding-left: var(--dialog-content-padding);
403
297
 
404
- .ui-Inset {
298
+ width: 100%;
299
+ max-height: calc(100vh - var(--space-6) * 2);
300
+ position: relative;
405
301
  box-sizing: border-box;
406
- --margin-top: 0px;
407
- --margin-right: 0px;
408
- --margin-bottom: 0px;
409
- --margin-left: 0px;
410
- overflow: hidden;
411
- margin-top: var(--margin-top-override);
412
- margin-right: var(--margin-right-override);
413
- margin-bottom: var(--margin-bottom-override);
414
- margin-left: var(--margin-left-override);
415
- }
416
- .ui-Inset > * {
417
- --margin-top-override: initial;
418
- --margin-right-override: initial;
419
- --margin-bottom-override: initial;
420
- --margin-left-override: initial;
421
- }
422
- .ui-Inset:where(.r-clip-border-box) {
423
- --inset-border-radius-calc: calc(var(--inset-border-radius, 0px) - var(--inset-border-width, 0px));
424
- --inset-padding-top-calc: var(--inset-padding-top, 0px);
425
- --inset-padding-right-calc: var(--inset-padding-right, 0px);
426
- --inset-padding-bottom-calc: var(--inset-padding-bottom, 0px);
427
- --inset-padding-left-calc: var(--inset-padding-left, 0px);
428
- }
429
- .ui-Inset:where(.r-clip-padding-box) {
430
- --inset-border-radius-calc: var(--inset-border-radius, 0px);
431
- --inset-padding-top-calc: calc(var(--inset-padding-top, 0px) + var(--inset-border-width, 0px));
432
- --inset-padding-right-calc: calc(var(--inset-padding-right, 0px) + var(--inset-border-width, 0px));
433
- --inset-padding-bottom-calc: calc(var(--inset-padding-bottom, 0px) + var(--inset-border-width, 0px));
434
- --inset-padding-left-calc: calc(var(--inset-padding-left, 0px) + var(--inset-border-width, 0px));
435
- }
436
- .ui-Inset:where(.inset-top) {
437
- --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
438
- --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
439
- --margin-bottom-override: var(--margin-bottom);
440
- --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
441
- border-top-left-radius: var(--inset-border-radius-calc);
442
- border-top-right-radius: var(--inset-border-radius-calc);
443
- border-bottom-left-radius: 0px;
444
- border-bottom-right-radius: 0px;
445
- }
446
- .ui-Inset:where(.inset-bottom) {
447
- --margin-top-override: var(--margin-top);
448
- --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
449
- --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
450
- --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
451
- border-top-left-radius: 0px;
452
- border-top-right-radius: 0px;
453
- border-bottom-left-radius: var(--inset-border-radius-calc);
454
- border-bottom-right-radius: var(--inset-border-radius-calc);
455
- }
456
- .ui-Inset:where(.inset-left) {
457
- --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
458
- --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
459
- --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
460
- --margin-right-override: var(--margin-right);
461
- border-top-left-radius: var(--inset-border-radius-calc);
462
- border-top-right-radius: 0px;
463
- border-bottom-left-radius: var(--inset-border-radius-calc);
464
- border-bottom-right-radius: 0px;
465
- }
466
- .ui-Inset:where(.inset-right) {
467
- --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
468
- --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
469
- --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
470
- --margin-left-override: var(--margin-left);
471
- border-top-left-radius: 0px;
472
- border-top-right-radius: var(--inset-border-radius-calc);
473
- border-bottom-left-radius: 0px;
474
- border-bottom-right-radius: var(--inset-border-radius-calc);
302
+ overflow: auto;
303
+ text-align: left;
304
+ padding: var(--dialog-content-padding);
305
+ box-sizing: border-box;
306
+ background-color: var(--color-panel-solid);
307
+ outline: none;
308
+ border-top-left-radius: var(--dialog-content-radius);
309
+ border-top-right-radius: var(--dialog-content-radius);
310
+ }
311
+ .ui-DialogContent:where(.r-size-1) {
312
+ --dialog-content-radius: var(--radius-4);
313
+ --dialog-content-padding: var(--space-2);
314
+ }
315
+ .ui-DialogContent:where(.r-size-2) {
316
+ --dialog-content-radius: var(--radius-4);
317
+ --dialog-content-padding: var(--space-3);
318
+ }
319
+ .ui-DialogContent:where(.r-size-3) {
320
+ --dialog-content-radius: var(--radius-5);
321
+ --dialog-content-padding: var(--space-4);
322
+ }
323
+ .ui-DialogContent:where(.r-size-4) {
324
+ --dialog-content-radius: var(--radius-5);
325
+ --dialog-content-padding: var(--space-5);
326
+ }
327
+ .ui-DialogContentClose {
328
+ position: absolute;
329
+ top: calc(var(--dialog-content-padding) / 1.5);
330
+ right: var(--dialog-content-padding);
331
+ }
332
+ .ui-DialogContent > h2[id^="reka-dialog-title"] {
333
+ font-size: var(--font-size-5);
334
+ font-weight: var(--font-weight-bold);
335
+ line-height: var(--line-height-4);
336
+ margin-bottom: var(--space-3);
337
+ }
338
+ .ui-DialogContent > p[id^="reka-dialog-description"] {
339
+ font-size: var(--font-size-3);
340
+ line-height: var(--line-height-2);
341
+ letter-spacing: var(--letter-spacing-2);
342
+ }
343
+ @media (min-width: 520px) {
344
+ .ui-DialogContainer {
345
+ justify-content: center;
346
+ padding-bottom: max(var(--space-6), 6vh);
347
+ padding-left: var(--space-4);
348
+ padding-right: var(--space-4);
349
+ }
350
+ .ui-DialogContent {
351
+ box-shadow: var(--shadow-6);
352
+ border-bottom-left-radius: var(--dialog-content-radius);
353
+ border-bottom-right-radius: var(--dialog-content-radius);
354
+ }
355
+ }
356
+ @media (prefers-reduced-motion: no-preference) {
357
+ @keyframes ui-dialog-overlay-no-op {
358
+ from {
359
+ opacity: 1;
360
+ }
361
+ to {
362
+ opacity: 1;
363
+ }
364
+ }
365
+ @keyframes ui-dialog-content-show {
366
+ from {
367
+ opacity: 0.1;
368
+ transform: translateY(var(--space-6));
369
+ }
370
+ to {
371
+ opacity: 1;
372
+ transform: translateY(0);
373
+ }
374
+ }
375
+ @keyframes ui-dialog-content-hide {
376
+ from {
377
+ opacity: 1;
378
+ transform: translateY(0);
379
+ }
380
+ to {
381
+ opacity: 0.1;
382
+ transform: translateY(var(--space-6));
383
+ }
384
+ }
385
+ .ui-DialogOverlay[data-state='closed'] {
386
+ animation: ui-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
387
+ }
388
+ .ui-DialogOverlay[data-state='open']::before {
389
+ animation: ui-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
390
+ }
391
+ .ui-DialogOverlay[data-state='closed']::before {
392
+ animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
393
+ }
394
+ .ui-DialogOverlay[data-state='open'] :where(.ui-DialogContent) {
395
+ animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
396
+ }
397
+ .ui-DialogOverlay[data-state='closed'] :where(.ui-DialogContent) {
398
+ animation: ui-dialog-content-hide 150ms cubic-bezier(0.16, 1, 0.3, 1);
475
399
  }
476
-
477
- .ui-DialogHead {
478
- position: sticky;
479
- top: calc(0px - var(--inset-padding-top-calc));
480
- display: flex;
481
- justify-content: space-between;
482
- align-items: center;
483
- margin-top: calc(0px - var(--inset-padding-top-calc));
484
- padding: calc(var(--dialog-content-padding) / 2) var(--dialog-content-padding);
485
- border-bottom: 1px solid var(--gray-a4);
486
- background-color: var(--color-background);
487
- z-index: 1;
488
400
  }
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/inset.css CHANGED
@@ -6,10 +6,10 @@
6
6
  --margin-bottom: 0px;
7
7
  --margin-left: 0px;
8
8
  overflow: hidden;
9
- margin-top: var(--margin-top-override);
10
- margin-right: var(--margin-right-override);
11
- margin-bottom: var(--margin-bottom-override);
12
- margin-left: var(--margin-left-override);
9
+ margin-top: var(--margin-top-override, var(--margin-top));
10
+ margin-right: var(--margin-right-override, var(--margin-right));
11
+ margin-bottom: var(--margin-bottom-override, var(--margin-bottom));
12
+ margin-left: var(--margin-left-override, var(--margin-left));
13
13
  }
14
14
  .ui-Inset > * {
15
15
  --margin-top-override: initial;
@@ -31,7 +31,7 @@
31
31
  --inset-padding-bottom-calc: calc(var(--inset-padding-bottom, 0px) + var(--inset-border-width, 0px));
32
32
  --inset-padding-left-calc: calc(var(--inset-padding-left, 0px) + var(--inset-border-width, 0px));
33
33
  }
34
- .ui-Inset:where(.inset-top) {
34
+ .ui-Inset:where(.r-side-top) {
35
35
  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
36
36
  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
37
37
  --margin-bottom-override: var(--margin-bottom);
@@ -41,7 +41,7 @@
41
41
  border-bottom-left-radius: 0px;
42
42
  border-bottom-right-radius: 0px;
43
43
  }
44
- .ui-Inset:where(.inset-bottom) {
44
+ .ui-Inset:where(.r-side-bottom) {
45
45
  --margin-top-override: var(--margin-top);
46
46
  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
47
47
  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
@@ -51,7 +51,7 @@
51
51
  border-bottom-left-radius: var(--inset-border-radius-calc);
52
52
  border-bottom-right-radius: var(--inset-border-radius-calc);
53
53
  }
54
- .ui-Inset:where(.inset-left) {
54
+ .ui-Inset:where(.r-side-left) {
55
55
  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
56
56
  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
57
57
  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
@@ -61,7 +61,7 @@
61
61
  border-bottom-left-radius: var(--inset-border-radius-calc);
62
62
  border-bottom-right-radius: 0px;
63
63
  }
64
- .ui-Inset:where(.inset-right) {
64
+ .ui-Inset:where(.r-side-right) {
65
65
  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
66
66
  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
67
67
  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
@@ -71,3 +71,24 @@
71
71
  border-bottom-left-radius: 0px;
72
72
  border-bottom-right-radius: var(--inset-border-radius-calc);
73
73
  }
74
+ .ui-Inset:where(.r-side-x) {
75
+ --margin-top-override: var(--margin-top);
76
+ --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
77
+ --margin-bottom-override: var(--margin-bottom);
78
+ --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
79
+ border-radius: 0px;
80
+ }
81
+ .ui-Inset:where(.r-side-y) {
82
+ --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
83
+ --margin-right-override: var(--margin-right);
84
+ --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
85
+ --margin-left-override: var(--margin-left);
86
+ border-radius: 0px;
87
+ }
88
+ .ui-Inset:where(.r-side-all) {
89
+ --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
90
+ --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
91
+ --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
92
+ --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
93
+ border-radius: var(--inset-border-radius-calc);
94
+ }
package/dist/components/pagination.css CHANGED
@@ -154,7 +154,7 @@
154
154
  background-color: var(--gray-a3);
155
155
  }
156
156
  .ui-Button:where(.r-variant-ghost) {
157
- padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
157
+ padding: var(--button-ghost-padding-y) var(--button-padding-x);
158
158
  }
159
159
  @media (hover: hover) {
160
160
  .ui-Button:where(.r-variant-ghost):where(:hover) {
@@ -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
  }