@typlog/ui 0.12.2 → 0.12.3

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 (13) hide show
  1. package/components/badge.css +13 -11
  2. package/components/checkbox.css +11 -9
  3. package/components/dropdown.css +14 -5
  4. package/components/{scrollarea.css → scroll-area.css} +14 -5
  5. package/components/separator.css +11 -9
  6. package/components/table.css +15 -7
  7. package/components/tabs.css +25 -26
  8. package/components/toggle.css +37 -29
  9. package/components.css +502 -272
  10. package/components.d.ts +179 -54
  11. package/components.js +614 -383
  12. package/package.json +1 -1
  13. package/components/dialog.css +0 -159
package/components/badge.css CHANGED
@@ -1,16 +1,18 @@
1
1
 
2
+ @layer components {
2
3
  .ui-Badge {
3
- display: inline-flex;
4
- align-items: center;
5
- white-space: nowrap;
6
- font-weight: var(--font-weight-medium);
7
- font-style: normal;
8
- flex-shrink: 0;
9
- line-height: 1;
10
- height: -moz-fit-content;
11
- height: fit-content;
12
- width: -moz-fit-content;
13
- width: fit-content;
4
+ display: inline-flex;
5
+ align-items: center;
6
+ white-space: nowrap;
7
+ font-weight: var(--font-weight-medium);
8
+ font-style: normal;
9
+ flex-shrink: 0;
10
+ line-height: 1;
11
+ height: -moz-fit-content;
12
+ height: fit-content;
13
+ width: -moz-fit-content;
14
+ width: fit-content;
15
+ }
14
16
  }
15
17
  .ui-Badge:where(.r-size-1) {
16
18
  font-size: var(--font-size-1);
package/components/checkbox.css CHANGED
@@ -1,14 +1,16 @@
1
1
 
2
+ @layer components {
2
3
  .ui-Checkbox {
3
- position: relative;
4
- display: inline-flex;
5
- align-items: center;
6
- justify-content: center;
7
- vertical-align: top;
8
- flex-shrink: 0;
9
- cursor: default;
10
- height: var(--checkbox-size);
11
- border-radius: var(--checkbox-border-radius);
4
+ position: relative;
5
+ display: inline-flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ vertical-align: top;
9
+ flex-shrink: 0;
10
+ cursor: default;
11
+ height: var(--checkbox-size);
12
+ border-radius: var(--checkbox-border-radius);
13
+ }
12
14
  }
13
15
  .ui-Checkbox::before {
14
16
  content: '';
package/components/dropdown.css CHANGED
@@ -9,12 +9,14 @@
9
9
  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
10
10
  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
11
11
  }
12
+ @layer components {
12
13
  .ui-ScrollArea {
13
- display: flex;
14
- flex-direction: column;
15
- overflow: hidden;
16
- width: 100%;
17
- height: 100%;
14
+ display: flex;
15
+ flex-direction: column;
16
+ overflow: hidden;
17
+ width: 100%;
18
+ height: 100%;
19
+ }
18
20
  }
19
21
  .ui-ScrollAreaViewport {
20
22
  display: flex;
@@ -22,6 +24,13 @@
22
24
  width: 100%;
23
25
  height: 100%;
24
26
  }
27
+ .ui-ScrollAreaViewport > div {
28
+ display: block;
29
+ min-width: -moz-fit-content;
30
+ min-width: fit-content;
31
+ width: 100%;
32
+ flex-grow: 1;
33
+ }
25
34
  .ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
26
35
  position: absolute;
27
36
  inset: 0;
package/components/{scrollarea.css → scroll-area.css} RENAMED
@@ -9,12 +9,14 @@
9
9
  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
10
10
  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
11
11
  }
12
+ @layer components {
12
13
  .ui-ScrollArea {
13
- display: flex;
14
- flex-direction: column;
15
- overflow: hidden;
16
- width: 100%;
17
- height: 100%;
14
+ display: flex;
15
+ flex-direction: column;
16
+ overflow: hidden;
17
+ width: 100%;
18
+ height: 100%;
19
+ }
18
20
  }
19
21
  .ui-ScrollAreaViewport {
20
22
  display: flex;
@@ -22,6 +24,13 @@
22
24
  width: 100%;
23
25
  height: 100%;
24
26
  }
27
+ .ui-ScrollAreaViewport > div {
28
+ display: block;
29
+ min-width: -moz-fit-content;
30
+ min-width: fit-content;
31
+ width: 100%;
32
+ flex-grow: 1;
33
+ }
25
34
  .ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
26
35
  position: absolute;
27
36
  inset: 0;
package/components/separator.css CHANGED
@@ -1,16 +1,18 @@
1
1
 
2
+ @layer components {
2
3
  .ui-Separator {
3
- display: block;
4
- box-sizing: border-box;
5
- background-color: var(--accent-a6);
4
+ display: block;
5
+ box-sizing: border-box;
6
+ background-color: var(--accent-a6);
6
7
  }
7
- .ui-Separator[aria-orientation="horizontal"] {
8
- width: var(--separator-size, auto);
9
- height: 1px;
8
+ .ui-Separator:where([aria-orientation="horizontal"]) {
9
+ width: var(--separator-size, auto);
10
+ height: 1px;
11
+ }
12
+ .ui-Separator:where([aria-orientation="vertical"]) {
13
+ width: 1px;
14
+ height: var(--separator-size, auto);
10
15
  }
11
- .ui-Separator[aria-orientation="vertical"] {
12
- width: 1px;
13
- height: var(--separator-size, auto);
14
16
  }
15
17
  .ui-Separator:where(.r-size-1) {
16
18
  --separator-size: var(--space-4);
package/components/table.css CHANGED
@@ -9,12 +9,14 @@
9
9
  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
10
10
  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
11
11
  }
12
+ @layer components {
12
13
  .ui-ScrollArea {
13
- display: flex;
14
- flex-direction: column;
15
- overflow: hidden;
16
- width: 100%;
17
- height: 100%;
14
+ display: flex;
15
+ flex-direction: column;
16
+ overflow: hidden;
17
+ width: 100%;
18
+ height: 100%;
19
+ }
18
20
  }
19
21
  .ui-ScrollAreaViewport {
20
22
  display: flex;
@@ -22,6 +24,13 @@
22
24
  width: 100%;
23
25
  height: 100%;
24
26
  }
27
+ .ui-ScrollAreaViewport > div {
28
+ display: block;
29
+ min-width: -moz-fit-content;
30
+ min-width: fit-content;
31
+ width: 100%;
32
+ flex-grow: 1;
33
+ }
25
34
  .ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
26
35
  position: absolute;
27
36
  inset: 0;
@@ -173,8 +182,7 @@
173
182
  border: 1px solid var(--gray-a5);
174
183
  border-radius: var(--table-border-radius);
175
184
  background-color: var(--color-panel);
176
- -webkit-backdrop-filter: var(--backdrop-filter-panel);
177
- backdrop-filter: var(--backdrop-filter-panel);
185
+ backdrop-filter: var(--backdrop-filter-panel);
178
186
  background-clip: padding-box;
179
187
  position: relative;
180
188
  }
package/components/tabs.css CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
- .ui-TabList::-webkit-scrollbar {
2
+ .ui-TabsList::-webkit-scrollbar {
3
3
  display: none;
4
4
  }
5
- .ui-TabList:where(.r-size-1) {
5
+ .ui-TabsList:where(.r-size-1) {
6
6
  --tab-font-size: var(--font-size-1);
7
7
  --tab-line-height: var(--line-height-1);
8
8
  --tab-letter-spacing: var(--letter-spacing-1);
@@ -13,7 +13,7 @@
13
13
  --tab-inner-padding-x: var(--space-1);
14
14
  --tab-inner-height: var(--space-5);
15
15
  }
16
- .ui-TabList:where(.r-size-2) {
16
+ .ui-TabsList:where(.r-size-2) {
17
17
  --tab-font-size: var(--font-size-2);
18
18
  --tab-line-height: var(--line-height-2);
19
19
  --tab-letter-spacing: var(--letter-spacing-2);
@@ -24,12 +24,12 @@
24
24
  --tab-inner-padding-x: var(--space-2);
25
25
  --tab-inner-height: calc(var(--space-6) - var(--space-1));
26
26
  }
27
- .ui-TabList:where(.r-variant-surface.r-size-1),
28
- .ui-TabList:where(.r-variant-soft.r-size-1) {
27
+ .ui-TabsList:where(.r-variant-surface.r-size-1),
28
+ .ui-TabsList:where(.r-variant-soft.r-size-1) {
29
29
  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
30
30
  }
31
31
  @layer components {
32
- .ui-TabList {
32
+ .ui-TabsList {
33
33
  justify-content: flex-start;
34
34
  position: relative;
35
35
  overflow-x: auto;
@@ -42,34 +42,33 @@
42
42
  }
43
43
 
44
44
  /** classic & surface */
45
- .ui-TabList:where(.r-variant-surface, .r-variant-classic) {
45
+ .ui-TabsList:where(.r-variant-surface, .r-variant-classic) {
46
46
  position: relative;
47
47
  display: inline-flex;
48
48
  width: -moz-fit-content;
49
49
  width: fit-content;
50
50
  align-items: center;
51
- justify-content: center;
52
51
  vertical-align: top;
53
52
  flex-shrink: 0;
54
53
  border-radius: var(--tab-radius);
55
54
  }
56
- .ui-TabList:where(.r-variant-classic) {
55
+ .ui-TabsList:where(.r-variant-classic) {
57
56
  background-color: var(--accent-a3);
58
57
  padding-left: var(--tab-padding-x);
59
58
  padding-right: var(--tab-padding-x);
60
59
  }
61
- .ui-TabList:where(.r-variant-surface) {
60
+ .ui-TabsList:where(.r-variant-surface) {
62
61
  --tab-item-radius: 0;
63
62
  --tab-inner-height: var(--tab-height);
64
63
  box-shadow: inset 0 0 0 1px var(--gray-a6);
65
64
  }
66
65
 
67
66
  /** soft & outline */
68
- .ui-TabList:where(.r-variant-outline, .r-variant-soft) {
67
+ .ui-TabsList:where(.r-variant-outline, .r-variant-soft) {
69
68
  display: flex;
70
69
  box-shadow: inset 0 -1px 0 0 var(--gray-a5);
71
70
  }
72
- .ui-TabList:where(.r-variant-soft) {
71
+ .ui-TabsList:where(.r-variant-soft) {
73
72
  padding-left: var(--tab-padding-x);
74
73
  padding-right: var(--tab-padding-x);
75
74
  }
@@ -81,13 +80,13 @@
81
80
  transform: translateX(var(--reka-tabs-indicator-position));
82
81
  width: var(--reka-tabs-indicator-size);
83
82
  }
84
- .ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
83
+ .ui-TabsList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
85
84
  top: 0;
86
- height: var(--tab-inner-height);
85
+ height: var(--tab-height);
87
86
  background-color: var(--accent-a3);
88
87
  transition-duration: 100ms;
89
88
  }
90
- .ui-TabList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
89
+ .ui-TabsList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
91
90
  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
92
91
  height: var(--tab-inner-height);
93
92
  background-color: var(--color-panel-solid);
@@ -99,14 +98,14 @@
99
98
  border-radius: var(--tab-item-radius);
100
99
  transition-duration: 100ms;
101
100
  }
102
- .ui-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
101
+ .ui-TabsList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
103
102
  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
104
103
  height: var(--tab-inner-height);
105
104
  background-color: var(--accent-a3);
106
105
  border-radius: var(--tab-item-radius);
107
106
  transition-duration: 100ms;
108
107
  }
109
- .ui-TabList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
108
+ .ui-TabsList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
110
109
  bottom: 0;
111
110
  height: 2px;
112
111
  background-color: var(--accent-indicator);
@@ -114,7 +113,7 @@
114
113
  }
115
114
 
116
115
  /** high contrast */
117
- :where(.ui-TabList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
116
+ :where(.ui-TabsList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
118
117
  background-color: var(--accent-12);
119
118
  }
120
119
 
@@ -166,13 +165,13 @@
166
165
  word-spacing: var(--tab-active-word-spacing);
167
166
  }
168
167
  @media (hover: hover) {
169
- .ui-TabList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
168
+ .ui-TabsList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
170
169
  color: var(--gray-12);
171
170
  }
172
- .ui-TabList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
171
+ .ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
173
172
  color: var(--accent-a11);
174
173
  }
175
- .ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger:not(:disabled):hover) :where(.ui-TabTriggerInner) {
174
+ .ui-TabsList:where(.r-variant-outline) :where(.ui-TabTrigger:not(:disabled):hover) :where(.ui-TabTriggerInner) {
176
175
  background-color: var(--gray-a3);
177
176
  }
178
177
  .ui-TabTrigger:where(:focus-visible:hover) :where(.ui-TabTriggerInner) {
@@ -183,19 +182,19 @@
183
182
  outline: 2px solid var(--focus-8);
184
183
  outline-offset: -2px;
185
184
  }
186
- .ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger) {
185
+ .ui-TabsList:where(.r-variant-outline) :where(.ui-TabTrigger) {
187
186
  padding-left: var(--tab-padding-x);
188
187
  padding-right: var(--tab-padding-x);
189
188
  }
190
- .ui-TabList:where(.r-variant-classic, .r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
189
+ .ui-TabsList:where(.r-variant-classic, .r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
191
190
  color: var(--gray-12);
192
191
  }
193
- .ui-TabList:where(.r-variant-soft) :where(.ui-TabTrigger + .ui-TabTrigger) {
192
+ .ui-TabsList:where(.r-variant-soft) :where(.ui-TabTrigger + .ui-TabTrigger) {
194
193
  margin-left: calc(var(--tab-padding-x) / 2)
195
194
  }
196
- .ui-TabList:where(.r-variant-surface) :where(.ui-TabTrigger + .ui-TabTrigger) {
195
+ .ui-TabsList:where(.r-variant-surface) :where(.ui-TabTrigger + .ui-TabTrigger) {
197
196
  box-shadow: inset 1px 0 0 var(--gray-a4);
198
197
  }
199
- .ui-TabList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
198
+ .ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
200
199
  color: var(--accent-a11);
201
200
  }
package/components/toggle.css CHANGED
@@ -1,27 +1,31 @@
1
1
 
2
+ @layer components {
2
3
  .ui-Toggle {
3
- position: relative;
4
- display: inline-flex;
5
- align-items: center;
6
- justify-content: center;
7
- vertical-align: top;
8
- flex-shrink: 0;
9
- width: var(--toggle-size);
10
- height: var(--toggle-size);
4
+ position: relative;
5
+ display: inline-flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ vertical-align: top;
9
+ flex-shrink: 0;
10
+ border-radius: var(--toggle-border-radius);
11
+ font-size: var(--toggle-font-size);
12
+ width: var(--toggle-size);
13
+ height: var(--toggle-size);
14
+ }
11
15
  }
12
16
  .ui-Toggle:where(.r-size-1) {
13
- border-radius: max(var(--radius-1), var(--radius-full));
14
- font-size: var(--font-size-1);
17
+ --toggle-border-radius: max(var(--radius-1), var(--radius-full));
18
+ --toggle-font-size: var(--font-size-1);
15
19
  --toggle-size: var(--space-5);
16
20
  }
17
21
  .ui-Toggle:where(.r-size-2) {
18
- border-radius: max(var(--radius-2), var(--radius-full));
19
- font-size: var(--font-size-3);
22
+ --toggle-border-radius: max(var(--radius-2), var(--radius-full));
23
+ --toggle-font-size: var(--font-size-3);
20
24
  --toggle-size: var(--space-6);
21
25
  }
22
26
  .ui-Toggle:where(.r-size-3) {
23
- border-radius: max(var(--radius-3), var(--radius-full));
24
- font-size: var(--font-size-6);
27
+ --toggle-border-radius: max(var(--radius-3), var(--radius-full));
28
+ --toggle-font-size: var(--font-size-6);
25
29
  --toggle-size: var(--space-7);
26
30
  }
27
31
 
@@ -84,14 +88,16 @@
84
88
  color: var(--gray-1);
85
89
  }
86
90
 
91
+ @layer components {
87
92
  .ui-ToggleGroupRoot {
88
- position: relative;
89
- display: inline-flex;
90
- align-items: center;
91
- justify-content: center;
92
- vertical-align: top;
93
- flex-shrink: 0;
94
- height: var(--toggle-group-height);
93
+ position: relative;
94
+ display: inline-flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ vertical-align: top;
98
+ flex-shrink: 0;
99
+ height: var(--toggle-group-height);
100
+ }
95
101
  }
96
102
  .ui-ToggleGroupRoot:where(.r-size-1) {
97
103
  font-size: var(--font-size-1);
@@ -132,15 +138,17 @@
132
138
  --toggle-item-size: var(--toggle-group-height);
133
139
  }
134
140
 
141
+ @layer components {
135
142
  .ui-ToggleGroupItem {
136
- position: relative;
137
- display: inline-flex;
138
- align-items: center;
139
- justify-content: center;
140
- vertical-align: top;
141
- flex-shrink: 0;
142
- width: var(--toggle-item-size);
143
- height: var(--toggle-item-size);
143
+ position: relative;
144
+ display: inline-flex;
145
+ align-items: center;
146
+ justify-content: center;
147
+ vertical-align: top;
148
+ flex-shrink: 0;
149
+ width: var(--toggle-item-size);
150
+ height: var(--toggle-item-size);
151
+ }
144
152
  }
145
153
  .ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:first-child) {
146
154
  border-top-left-radius: var(--toggle-radius);