@pantool/components 1.0.0-alpha.0 → 1.0.0-alpha.10
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.
- package/dist/atoms/avatar/avatar.css +1 -0
- package/dist/atoms/avatar/avatar.d.ts +17 -0
- package/dist/atoms/avatar/avatar.js +2 -0
- package/dist/atoms/avatar/avatar.js.map +1 -0
- package/dist/atoms/avatar/avatar.module.js +3 -0
- package/dist/atoms/avatar/avatar.module.js.map +1 -0
- package/dist/atoms/avatar/index.d.ts +1 -0
- package/dist/atoms/avatar/index.js +1 -0
- package/dist/atoms/button/button.css +1 -18
- package/dist/atoms/button/button.d.ts +5 -5
- package/dist/atoms/button/button.js.map +1 -1
- package/dist/atoms/button/button.module.js +1 -0
- package/dist/atoms/button/button.module.js.map +1 -1
- package/dist/atoms/checkbox/checkbox.css +1 -119
- package/dist/atoms/checkbox/checkbox.module.js +1 -0
- package/dist/atoms/checkbox/checkbox.module.js.map +1 -1
- package/dist/atoms/clickable-area/clickable-area.d.ts +15 -0
- package/dist/atoms/clickable-area/clickable-area.js +2 -0
- package/dist/atoms/clickable-area/clickable-area.js.map +1 -0
- package/dist/atoms/clickable-area/index.d.ts +1 -0
- package/dist/atoms/clickable-area/index.js +1 -0
- package/dist/atoms/clickable-area/styles.css +1 -0
- package/dist/atoms/clickable-area/styles.module.js +3 -0
- package/dist/atoms/clickable-area/styles.module.js.map +1 -0
- package/dist/atoms/collapsible/collapsible.css +1 -0
- package/dist/atoms/collapsible/collapsible.d.ts +16 -0
- package/dist/atoms/collapsible/collapsible.js +2 -0
- package/dist/atoms/collapsible/collapsible.js.map +1 -0
- package/dist/atoms/collapsible/collapsible.module.js +3 -0
- package/dist/atoms/collapsible/collapsible.module.js.map +1 -0
- package/dist/atoms/collapsible/index.d.ts +1 -0
- package/dist/atoms/collapsible/index.js +1 -0
- package/dist/atoms/combobox/combobox.css +1 -302
- package/dist/atoms/combobox/combobox.d.ts +3 -3
- package/dist/atoms/combobox/combobox.module.js +1 -0
- package/dist/atoms/combobox/combobox.module.js.map +1 -1
- package/dist/atoms/combobox/index.d.ts +1 -0
- package/dist/atoms/context-menu/context-menu.css +1 -75
- package/dist/atoms/context-menu/context-menu.module.js +1 -0
- package/dist/atoms/context-menu/context-menu.module.js.map +1 -1
- package/dist/atoms/icon/icon.d.ts +2 -2
- package/dist/atoms/icon/icon.js.map +1 -1
- package/dist/atoms/icon-button/icon-button.css +1 -12
- package/dist/atoms/icon-button/icon-button.d.ts +3 -3
- package/dist/atoms/icon-button/icon-button.js.map +1 -1
- package/dist/atoms/icon-button/icon-button.module.js +1 -0
- package/dist/atoms/index.d.ts +8 -3
- package/dist/atoms/index.js +1 -1
- package/dist/atoms/input/input.css +1 -29
- package/dist/atoms/input/input.module.js +1 -0
- package/dist/atoms/input/input.module.js.map +1 -1
- package/dist/atoms/menu/index.d.ts +1 -0
- package/dist/atoms/menu/index.js +1 -0
- package/dist/atoms/menu/menu.css +1 -0
- package/dist/atoms/menu/menu.d.ts +69 -0
- package/dist/atoms/menu/menu.js +2 -0
- package/dist/atoms/menu/menu.js.map +1 -0
- package/dist/atoms/menu/menu.module.js +3 -0
- package/dist/atoms/menu/menu.module.js.map +1 -0
- package/dist/atoms/radio/radio.css +1 -142
- package/dist/atoms/radio/radio.module.js +1 -0
- package/dist/atoms/radio/radio.module.js.map +1 -1
- package/dist/atoms/switch/switch.css +1 -68
- package/dist/atoms/switch/switch.module.js +1 -0
- package/dist/atoms/switch/switch.module.js.map +1 -1
- package/dist/atoms/tabs/tabs.css +1 -92
- package/dist/atoms/tabs/tabs.d.ts +3 -3
- package/dist/atoms/tabs/tabs.module.js +1 -0
- package/dist/atoms/tabs/tabs.module.js.map +1 -1
- package/dist/atoms/text/text.css +1 -273
- package/dist/atoms/text/text.d.ts +3 -3
- package/dist/atoms/text/text.module.js +1 -0
- package/dist/atoms/text/text.module.js.map +1 -1
- package/dist/atoms/toast/toast.css +1 -151
- package/dist/atoms/toast/toast.module.js +1 -0
- package/dist/atoms/toast/toast.module.js.map +1 -1
- package/dist/atoms/tooltip/tooltip.css +1 -92
- package/dist/atoms/tooltip/tooltip.d.ts +3 -3
- package/dist/atoms/tooltip/tooltip.module.js +1 -0
- package/dist/atoms/tooltip/tooltip.module.js.map +1 -1
- package/dist/helpers/flex/flex.d.ts +45 -0
- package/dist/helpers/flex/flex.js +2 -0
- package/dist/helpers/flex/flex.js.map +1 -0
- package/dist/helpers/flex/index.d.ts +1 -0
- package/dist/helpers/flex/index.js +1 -0
- package/dist/helpers/flex/styles.css +1 -0
- package/dist/helpers/flex/styles.module.js +3 -0
- package/dist/helpers/flex/styles.module.js.map +1 -0
- package/dist/helpers/index.d.ts +4 -0
- package/dist/helpers/index.js +1 -0
- package/dist/helpers/portal/context/portal-config.js.map +1 -1
- package/dist/index.d.ts +10 -4
- package/dist/index.js +1 -1
- package/dist/internals/base-button/base-button.css +1 -262
- package/dist/internals/base-button/base-button.d.ts +2 -2
- package/dist/internals/base-button/base-button.js.map +1 -1
- package/dist/internals/base-button/base-button.module.js +1 -0
- package/dist/internals/base-button/base-button.module.js.map +1 -1
- package/dist/internals/base-dialog/base-dialog.css +1 -74
- package/dist/internals/base-dialog/base-dialog.module.js +1 -0
- package/dist/internals/base-field/base-field.css +1 -115
- package/dist/internals/base-field/base-field.module.js +1 -0
- package/dist/internals/base-field/base-field.module.js.map +1 -1
- package/dist/internals/base-svg/base-svg.css +1 -137
- package/dist/internals/base-svg/base-svg.d.ts +2 -2
- package/dist/internals/base-svg/base-svg.js.map +1 -1
- package/dist/internals/base-svg/base-svg.module.js +1 -0
- package/dist/internals/base-svg/base-svg.module.js.map +1 -1
- package/dist/providers/index.d.ts +0 -3
- package/dist/providers/index.js +1 -1
- package/dist/providers/toast-provider/toast-provider.css +1 -13
- package/dist/providers/toast-provider/toast-provider.module.js +1 -0
- package/dist/providers/toast-provider/toast-provider.module.js.map +1 -1
- package/package.json +12 -18
|
@@ -1,302 +1 @@
|
|
|
1
|
-
.KAWYaW_control {
|
|
2
|
-
align-items: center;
|
|
3
|
-
gap: var(--spacing-xs);
|
|
4
|
-
width: 100%;
|
|
5
|
-
display: flex;
|
|
6
|
-
position: relative;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.KAWYaW_start-adornment, .KAWYaW_end-adornment {
|
|
10
|
-
height: var(--field-control-icon-size);
|
|
11
|
-
align-items: center;
|
|
12
|
-
display: flex;
|
|
13
|
-
|
|
14
|
-
& [data-slot="input-adornment-root"] {
|
|
15
|
-
&[data-kind="icon"] {
|
|
16
|
-
width: var(--adornment-icon-size);
|
|
17
|
-
height: var(--adornment-icon-size);
|
|
18
|
-
color: var(--field-label-color);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
&[data-kind="button"] {
|
|
22
|
-
width: var(--adornment-button-size);
|
|
23
|
-
height: var(--adornment-button-size);
|
|
24
|
-
color: var(--field-label-color);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.KAWYaW_control[data-size="sm"] {
|
|
30
|
-
--adornment-icon-size: 1rem;
|
|
31
|
-
--adornment-button-size: 1.5rem;
|
|
32
|
-
--input-group-gap: var(--spacing-xs);
|
|
33
|
-
--combobox-chip-size: 1rem;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.KAWYaW_control[data-size="md"] {
|
|
37
|
-
--adornment-icon-size: 1.5rem;
|
|
38
|
-
--adornment-button-size: 2rem;
|
|
39
|
-
--input-group-gap: var(--spacing-xs);
|
|
40
|
-
--combobox-chip-size: 1rem;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.KAWYaW_control[data-size="lg"] {
|
|
44
|
-
--adornment-icon-size: 2rem;
|
|
45
|
-
--adornment-button-size: 2.5rem;
|
|
46
|
-
--input-group-gap: var(--spacing-sm);
|
|
47
|
-
--combobox-chip-size: 1rem;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.KAWYaW_input-group {
|
|
51
|
-
box-sizing: border-box;
|
|
52
|
-
min-width: 12rem;
|
|
53
|
-
min-height: var(--field-control-height);
|
|
54
|
-
border: 1px solid var(--color-border-primary);
|
|
55
|
-
background-color: var(--color-surface-base);
|
|
56
|
-
border-radius: var(--field-control-radius);
|
|
57
|
-
align-items: center;
|
|
58
|
-
gap: var(--input-group-gap);
|
|
59
|
-
padding: 0 var(--spacing-sm);
|
|
60
|
-
flex-wrap: wrap;
|
|
61
|
-
flex: 1;
|
|
62
|
-
transition: border-color .2s ease-in-out;
|
|
63
|
-
display: flex;
|
|
64
|
-
position: relative;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.KAWYaW_input-group:focus-within {
|
|
68
|
-
outline-style: solid;
|
|
69
|
-
outline-width: var(--stroke-focus-ring);
|
|
70
|
-
outline-color: var(--color-action-info-base);
|
|
71
|
-
outline-offset: var(--spacing-xxs);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.KAWYaW_input {
|
|
75
|
-
box-sizing: border-box;
|
|
76
|
-
min-width: 4rem;
|
|
77
|
-
height: calc(var(--field-control-height) - 2px);
|
|
78
|
-
font-family: var(--typography-typeface-ltr);
|
|
79
|
-
font-size: var(--field-control-font-size);
|
|
80
|
-
line-height: var(--field-control-line-height);
|
|
81
|
-
font-weight: var(--field-control-font-weight);
|
|
82
|
-
color: var(--field-control-text-color);
|
|
83
|
-
background-color: #0000;
|
|
84
|
-
border: none;
|
|
85
|
-
border-radius: 0;
|
|
86
|
-
outline: none;
|
|
87
|
-
flex: 1;
|
|
88
|
-
margin: 0;
|
|
89
|
-
padding: 0;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.KAWYaW_input::placeholder {
|
|
93
|
-
color: var(--field-control-placeholder-color);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.KAWYaW_input:focus {
|
|
97
|
-
outline: none;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.KAWYaW_chips {
|
|
101
|
-
align-items: center;
|
|
102
|
-
gap: var(--spacing-xs);
|
|
103
|
-
padding: var(--spacing-xxs) 0;
|
|
104
|
-
flex-wrap: wrap;
|
|
105
|
-
flex: 1;
|
|
106
|
-
display: flex;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.KAWYaW_chip {
|
|
110
|
-
--combobox-chip-bg: var(--color-surface-secondary);
|
|
111
|
-
--combobox-chip-color: var(--color-content-brand-secondary);
|
|
112
|
-
box-sizing: border-box;
|
|
113
|
-
align-items: center;
|
|
114
|
-
gap: var(--spacing-xxs);
|
|
115
|
-
background-color: var(--combobox-chip-bg);
|
|
116
|
-
color: var(--combobox-chip-color);
|
|
117
|
-
border: 1px solid var(--combobox-chip-color);
|
|
118
|
-
padding: 0 var(--spacing-sm);
|
|
119
|
-
height: calc(var(--field-control-height) * .7);
|
|
120
|
-
border-radius: var(--radius-full);
|
|
121
|
-
font-size: var(--typography-caption-base-size);
|
|
122
|
-
cursor: default;
|
|
123
|
-
outline: none;
|
|
124
|
-
display: flex;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.KAWYaW_chip[data-highlighted] {
|
|
128
|
-
background-color: var(--color-action-neutral-muted);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.KAWYaW_chip-text {
|
|
132
|
-
white-space: nowrap;
|
|
133
|
-
color: var(--combobox-chip-color);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.KAWYaW_chip-remove {
|
|
137
|
-
color: var(--combobox-chip-color);
|
|
138
|
-
background-color: var(--combobox-chip-bg);
|
|
139
|
-
cursor: pointer;
|
|
140
|
-
height: var(--combobox-chip-size);
|
|
141
|
-
width: var(--combobox-chip-size);
|
|
142
|
-
border: none;
|
|
143
|
-
border-radius: 50%;
|
|
144
|
-
justify-content: center;
|
|
145
|
-
align-items: center;
|
|
146
|
-
padding: 0;
|
|
147
|
-
transition: background-color .1s;
|
|
148
|
-
display: flex;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.KAWYaW_chip-remove:hover {
|
|
152
|
-
--combobox-chip-bg: var(--color-surface-tertiary);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.KAWYaW_action-buttons {
|
|
156
|
-
box-sizing: border-box;
|
|
157
|
-
align-items: center;
|
|
158
|
-
gap: var(--spacing-xxs);
|
|
159
|
-
padding-left: var(--spacing-sm);
|
|
160
|
-
height: 100%;
|
|
161
|
-
margin-left: auto;
|
|
162
|
-
display: flex;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.KAWYaW_trigger, .KAWYaW_clear {
|
|
166
|
-
box-sizing: border-box;
|
|
167
|
-
width: var(--field-control-icon-size);
|
|
168
|
-
height: var(--field-control-icon-size);
|
|
169
|
-
color: var(--field-label-color);
|
|
170
|
-
border-radius: var(--radius-full);
|
|
171
|
-
background: none;
|
|
172
|
-
border: none;
|
|
173
|
-
justify-content: center;
|
|
174
|
-
align-items: center;
|
|
175
|
-
padding: 0;
|
|
176
|
-
transition: color .1s, background-color .1s;
|
|
177
|
-
display: flex;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.KAWYaW_trigger:hover, .KAWYaW_clear:hover {
|
|
181
|
-
color: var(--color-content-neutral-base);
|
|
182
|
-
background-color: var(--color-surface-secondary);
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
.KAWYaW_trigger:focus-visible, .KAWYaW_clear:focus-visible {
|
|
186
|
-
outline-style: solid;
|
|
187
|
-
outline-width: var(--stroke-focus-ring);
|
|
188
|
-
outline-color: var(--color-action-info-base);
|
|
189
|
-
outline-offset: var(--spacing-xxs);
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.KAWYaW_trigger[data-disabled], .KAWYaW_clear[data-disabled] {
|
|
193
|
-
cursor: not-allowed;
|
|
194
|
-
user-select: none;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.KAWYaW_positioner {
|
|
198
|
-
z-index: var(--zindex-1);
|
|
199
|
-
outline: 0;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.KAWYaW_popup {
|
|
203
|
-
box-sizing: border-box;
|
|
204
|
-
background-color: var(--color-surface-base);
|
|
205
|
-
color: var(--color-content-neutral-base);
|
|
206
|
-
width: var(--anchor-width);
|
|
207
|
-
max-width: var(--available-width);
|
|
208
|
-
min-width: 12rem;
|
|
209
|
-
transform-origin: var(--transform-origin);
|
|
210
|
-
border: 1px solid var(--color-border-primary);
|
|
211
|
-
transition: opacity .1s, transform .1s;
|
|
212
|
-
overflow: hidden;
|
|
213
|
-
box-shadow: 0 4px 12px #0000001a;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
.KAWYaW_popup.KAWYaW_full-width {
|
|
217
|
-
width: 100%;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.KAWYaW_popup[data-starting-style], .KAWYaW_popup[data-ending-style] {
|
|
221
|
-
opacity: 0;
|
|
222
|
-
transform: scale(.95);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.KAWYaW_list {
|
|
226
|
-
box-sizing: border-box;
|
|
227
|
-
overscroll-behavior: contain;
|
|
228
|
-
padding-block: var(--spacing-xs);
|
|
229
|
-
scroll-padding-block: var(--spacing-xs);
|
|
230
|
-
max-height: min(22.5rem, var(--available-height));
|
|
231
|
-
outline: 0;
|
|
232
|
-
overflow-y: auto;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
.KAWYaW_list[data-empty] {
|
|
236
|
-
padding: 0;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
.KAWYaW_group {
|
|
240
|
-
padding-block: var(--spacing-xs);
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.KAWYaW_group-label {
|
|
244
|
-
padding: var(--spacing-xxs) var(--spacing-md);
|
|
245
|
-
font-size: var(--typography-caption-base-size);
|
|
246
|
-
font-weight: var(--typography-subheading-2-weight);
|
|
247
|
-
color: var(--color-content-neutral-muted);
|
|
248
|
-
text-transform: uppercase;
|
|
249
|
-
letter-spacing: .05em;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.KAWYaW_item {
|
|
253
|
-
box-sizing: border-box;
|
|
254
|
-
cursor: default;
|
|
255
|
-
user-select: none;
|
|
256
|
-
padding-block: var(--spacing-sm);
|
|
257
|
-
padding-left: var(--spacing-md);
|
|
258
|
-
padding-right: var(--spacing-md);
|
|
259
|
-
gap: var(--spacing-sm);
|
|
260
|
-
font-size: var(--field-control-font-size);
|
|
261
|
-
line-height: var(--field-control-line-height);
|
|
262
|
-
font-weight: var(--field-control-font-weight);
|
|
263
|
-
outline: 0;
|
|
264
|
-
grid-template-columns: 1rem 1fr;
|
|
265
|
-
align-items: center;
|
|
266
|
-
transition: background-color .1s;
|
|
267
|
-
display: grid;
|
|
268
|
-
position: relative;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.KAWYaW_item[data-highlighted] {
|
|
272
|
-
background-color: var(--color-surface-secondary);
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
.KAWYaW_item[data-selected] {
|
|
276
|
-
color: var(--color-content-brand-base);
|
|
277
|
-
font-weight: var(--typography-subheading-2-weight);
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
.KAWYaW_item[data-disabled] {
|
|
281
|
-
opacity: .5;
|
|
282
|
-
cursor: not-allowed;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
.KAWYaW_item-indicator {
|
|
286
|
-
grid-column-start: 1;
|
|
287
|
-
justify-content: center;
|
|
288
|
-
align-items: center;
|
|
289
|
-
display: flex;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
.KAWYaW_item-text {
|
|
293
|
-
grid-column-start: 2;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.KAWYaW_empty {
|
|
297
|
-
box-sizing: border-box;
|
|
298
|
-
padding: var(--spacing-md);
|
|
299
|
-
font-size: var(--field-control-font-size);
|
|
300
|
-
color: var(--color-content-neutral-muted);
|
|
301
|
-
text-align: center;
|
|
302
|
-
}
|
|
1
|
+
.KAWYaW_control{align-items:center;gap:var(--spacing-xs);width:100%;display:flex;position:relative}.KAWYaW_start-adornment,.KAWYaW_end-adornment{height:var(--field-control-icon-size);align-items:center;display:flex;& [data-slot=input-adornment-root]{&[data-kind=icon]{width:var(--adornment-icon-size);height:var(--adornment-icon-size);color:var(--field-label-color)}&[data-kind=button]{width:var(--adornment-button-size);height:var(--adornment-button-size);color:var(--field-label-color)}}}.KAWYaW_control[data-size=sm]{--adornment-icon-size:1rem;--adornment-button-size:1.5rem;--input-group-gap:var(--spacing-xs);--combobox-chip-size:1rem}.KAWYaW_control[data-size=md]{--adornment-icon-size:1.5rem;--adornment-button-size:2rem;--input-group-gap:var(--spacing-xs);--combobox-chip-size:1rem}.KAWYaW_control[data-size=lg]{--adornment-icon-size:2rem;--adornment-button-size:2.5rem;--input-group-gap:var(--spacing-sm);--combobox-chip-size:1rem}.KAWYaW_input-group{box-sizing:border-box;min-width:12rem;min-height:var(--field-control-height);border:1px solid var(--color-border-primary);background-color:var(--color-surface-base);border-radius:var(--field-control-radius);align-items:center;gap:var(--input-group-gap);padding:0 var(--spacing-sm);flex-wrap:wrap;flex:1;transition:border-color .2s ease-in-out;display:flex;position:relative}.KAWYaW_input-group:focus-within{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}.KAWYaW_input{box-sizing:border-box;min-width:4rem;height:calc(var(--field-control-height) - 2px);font-family:var(--typography-typeface-ltr);font-size:var(--field-control-font-size);line-height:var(--field-control-line-height);font-weight:var(--field-control-font-weight);color:var(--field-control-text-color);background-color:#0000;border:none;border-radius:0;outline:none;flex:1;margin:0;padding:0}.KAWYaW_input::placeholder{color:var(--field-control-placeholder-color)}.KAWYaW_input:focus{outline:none}.KAWYaW_chips{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xxs) 0;flex-wrap:wrap;flex:1;display:flex}.KAWYaW_chip{--combobox-chip-bg:var(--color-surface-secondary);--combobox-chip-color:var(--color-content-brand-secondary);box-sizing:border-box;align-items:center;gap:var(--spacing-xxs);background-color:var(--combobox-chip-bg);color:var(--combobox-chip-color);border:1px solid var(--combobox-chip-color);padding:0 var(--spacing-sm);height:calc(var(--field-control-height) * .7);border-radius:var(--radius-full);font-size:var(--typography-caption-base-size);cursor:default;outline:none;display:flex}.KAWYaW_chip[data-highlighted]{background-color:var(--color-action-neutral-muted)}.KAWYaW_chip-text{white-space:nowrap;color:var(--combobox-chip-color)}.KAWYaW_chip-remove{color:var(--combobox-chip-color);background-color:var(--combobox-chip-bg);cursor:pointer;height:var(--combobox-chip-size);width:var(--combobox-chip-size);border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:background-color .1s;display:flex}.KAWYaW_chip-remove:hover{--combobox-chip-bg:var(--color-surface-tertiary)}.KAWYaW_action-buttons{box-sizing:border-box;align-items:center;gap:var(--spacing-xxs);padding-left:var(--spacing-sm);height:100%;margin-left:auto;display:flex}.KAWYaW_trigger,.KAWYaW_clear{box-sizing:border-box;width:var(--field-control-icon-size);height:var(--field-control-icon-size);color:var(--field-label-color);border-radius:var(--radius-full);background:0 0;border:none;justify-content:center;align-items:center;padding:0;transition:color .1s,background-color .1s;display:flex}.KAWYaW_trigger:hover,.KAWYaW_clear:hover{color:var(--color-content-neutral-base);background-color:var(--color-surface-secondary)}.KAWYaW_trigger:focus-visible,.KAWYaW_clear:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}.KAWYaW_trigger[data-disabled],.KAWYaW_clear[data-disabled]{cursor:not-allowed;user-select:none}.KAWYaW_positioner{z-index:var(--zindex-1);outline:0}.KAWYaW_popup{box-sizing:border-box;background-color:var(--color-surface-base);color:var(--color-content-neutral-base);width:var(--anchor-width);max-width:var(--available-width);min-width:12rem;transform-origin:var(--transform-origin);border:1px solid var(--color-border-primary);transition:opacity .1s,transform .1s;overflow:hidden;box-shadow:0 4px 12px #0000001a}.KAWYaW_popup.KAWYaW_full-width{width:100%}.KAWYaW_popup[data-starting-style],.KAWYaW_popup[data-ending-style]{opacity:0;transform:scale(.95)}.KAWYaW_list{box-sizing:border-box;overscroll-behavior:contain;padding-block:var(--spacing-xs);scroll-padding-block:var(--spacing-xs);max-height:min(22.5rem, var(--available-height));outline:0;overflow-y:auto}.KAWYaW_list[data-empty]{padding:0}.KAWYaW_group{padding-block:var(--spacing-xs)}.KAWYaW_group-label{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--typography-caption-base-size);font-weight:var(--typography-subheading-2-weight);color:var(--color-content-neutral-muted);text-transform:uppercase;letter-spacing:.05em}.KAWYaW_item{box-sizing:border-box;cursor:default;user-select:none;padding-block:var(--spacing-sm);padding-left:var(--spacing-md);padding-right:var(--spacing-md);gap:var(--spacing-sm);font-size:var(--field-control-font-size);line-height:var(--field-control-line-height);font-weight:var(--field-control-font-weight);outline:0;grid-template-columns:1rem 1fr;align-items:center;transition:background-color .1s;display:grid;position:relative}.KAWYaW_item[data-highlighted]{background-color:var(--color-surface-secondary)}.KAWYaW_item[data-selected]{color:var(--color-content-brand-base);font-weight:var(--typography-subheading-2-weight)}.KAWYaW_item[data-disabled]{opacity:.5;cursor:not-allowed}.KAWYaW_item-indicator{grid-column-start:1;justify-content:center;align-items:center;display:flex}.KAWYaW_item-text{grid-column-start:2}.KAWYaW_empty{box-sizing:border-box;padding:var(--spacing-md);font-size:var(--field-control-font-size);color:var(--color-content-neutral-muted);text-align:center}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FieldProps } from "../../internals/base-field/base-field.js";
|
|
2
2
|
import { ComboboxItem } from "./components/item.js";
|
|
3
|
-
import * as React from "react";
|
|
3
|
+
import * as React$1 from "react";
|
|
4
4
|
import { ComboboxRootProps } from "@base-ui/react/combobox";
|
|
5
5
|
|
|
6
6
|
//#region src/atoms/combobox/combobox.d.ts
|
|
@@ -63,11 +63,11 @@ type ComboboxProps<T = string, Multiple extends boolean | undefined = false> = P
|
|
|
63
63
|
/**
|
|
64
64
|
* Slot for element placed at the start of the input group.
|
|
65
65
|
*/
|
|
66
|
-
startAdornment?: React.ReactNode;
|
|
66
|
+
startAdornment?: React$1.ReactNode;
|
|
67
67
|
/**
|
|
68
68
|
* Slot for element placed at the end of the input group.
|
|
69
69
|
*/
|
|
70
|
-
endAdornment?: React.ReactNode;
|
|
70
|
+
endAdornment?: React$1.ReactNode;
|
|
71
71
|
/**
|
|
72
72
|
* Placeholder text for the input.
|
|
73
73
|
*/
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
import './combobox.css';
|
|
1
2
|
var e={"action-buttons":`KAWYaW_action-buttons`,chip:`KAWYaW_chip`,"chip-remove":`KAWYaW_chip-remove`,"chip-text":`KAWYaW_chip-text`,chips:`KAWYaW_chips`,clear:`KAWYaW_clear`,control:`KAWYaW_control`,empty:`KAWYaW_empty`,"end-adornment":`KAWYaW_end-adornment`,"full-width":`KAWYaW_full-width`,group:`KAWYaW_group`,"group-label":`KAWYaW_group-label`,input:`KAWYaW_input`,"input-group":`KAWYaW_input-group`,item:`KAWYaW_item`,"item-indicator":`KAWYaW_item-indicator`,"item-text":`KAWYaW_item-text`,list:`KAWYaW_list`,popup:`KAWYaW_popup`,positioner:`KAWYaW_positioner`,"start-adornment":`KAWYaW_start-adornment`,trigger:`KAWYaW_trigger`};export{e as default};
|
|
2
3
|
//# sourceMappingURL=combobox.module.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.module.js","names":[],"sources":["../../../src/atoms/combobox/combobox.module.css"],"sourcesContent":[".control {\n display: flex;\n align-items: center;\n gap: var(--spacing-xs);\n position: relative;\n width: 100%;\n}\n\n.start-adornment,\n.end-adornment {\n display: flex;\n align-items: center;\n height: var(--field-control-icon-size);\n\n & [data-slot=\"input-adornment-root\"] {\n &[data-kind=\"icon\"] {\n width: var(--adornment-icon-size);\n height: var(--adornment-icon-size);\n color: var(--field-label-color);\n }\n &[data-kind=\"button\"] {\n width: var(--adornment-button-size);\n height: var(--adornment-button-size);\n color: var(--field-label-color);\n }\n }\n}\n\n.control[data-size=\"sm\"] {\n --adornment-icon-size: 1rem;\n --adornment-button-size: 1.5rem;\n --input-group-gap: var(--spacing-xs);\n --combobox-chip-size: 1rem;\n}\n.control[data-size=\"md\"] {\n --adornment-icon-size: 1.5rem;\n --adornment-button-size: 2rem;\n --input-group-gap: var(--spacing-xs);\n --combobox-chip-size: 1rem;\n}\n.control[data-size=\"lg\"] {\n --adornment-icon-size: 2rem;\n --adornment-button-size: 2.5rem;\n --input-group-gap: var(--spacing-sm);\n --combobox-chip-size: 1rem;\n}\n\n.input-group {\n box-sizing: border-box;\n position: relative;\n flex: 1;\n min-width: 12rem;\n min-height: var(--field-control-height);\n border: 1px solid var(--color-border-primary);\n background-color: var(--color-surface-base);\n border-radius: var(--field-control-radius);\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--input-group-gap);\n padding: 0 var(--spacing-sm);\n transition: border-color 0.2s ease-in-out;\n}\n\n.input-group:focus-within {\n outline-style: solid;\n outline-width: var(--stroke-focus-ring);\n outline-color: var(--color-action-info-base);\n outline-offset: var(--spacing-xxs);\n}\n\n.input {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n border: none;\n border-radius: 0;\n flex: 1;\n min-width: 4rem;\n height: calc(var(--field-control-height) - 2px);\n font-family: var(--typography-typeface-ltr);\n font-size: var(--field-control-font-size);\n line-height: var(--field-control-line-height);\n font-weight: var(--field-control-font-weight);\n background-color: transparent;\n color: var(--field-control-text-color);\n outline: none;\n}\n\n.input::placeholder {\n color: var(--field-control-placeholder-color);\n}\n\n.input:focus {\n outline: none;\n}\n\n.chips {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--spacing-xs);\n padding: var(--spacing-xxs) 0;\n flex: 1;\n}\n\n.chip {\n --combobox-chip-bg: var(--color-surface-secondary);\n --combobox-chip-color: var(--color-content-brand-secondary);\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--spacing-xxs);\n background-color: var(--combobox-chip-bg);\n color: var(--combobox-chip-color);\n border: 1px solid var(--combobox-chip-color);\n padding: 0 var(--spacing-sm);\n height: calc(var(--field-control-height) * 0.7);\n border-radius: var(--radius-full);\n font-size: var(--typography-caption-base-size);\n outline: none;\n cursor: default;\n}\n\n.chip[data-highlighted] {\n background-color: var(--color-action-neutral-muted);\n}\n\n.chip-text {\n white-space: nowrap;\n color: var(--combobox-chip-color);\n}\n\n.chip-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n color: var(--combobox-chip-color);\n background-color: var(--combobox-chip-bg);\n cursor: pointer;\n border-radius: 50%;\n transition: background-color 0.1s;\n height: var(--combobox-chip-size);\n width: var(--combobox-chip-size);\n}\n\n.chip-remove:hover {\n --combobox-chip-bg: var(--color-surface-tertiary);\n}\n\n.action-buttons {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--spacing-xxs);\n margin-left: auto;\n padding-left: var(--spacing-sm);\n height: 100%;\n}\n\n.trigger,\n.clear {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--field-control-icon-size);\n height: var(--field-control-icon-size);\n color: var(--field-label-color);\n border: none;\n padding: 0;\n background: none;\n border-radius: var(--radius-full);\n transition:\n color 0.1s,\n background-color 0.1s;\n}\n\n.trigger:hover,\n.clear:hover {\n color: var(--color-content-neutral-base);\n background-color: var(--color-surface-secondary);\n}\n\n.trigger:focus-visible,\n.clear:focus-visible {\n outline-style: solid;\n outline-width: var(--stroke-focus-ring);\n outline-color: var(--color-action-info-base);\n outline-offset: var(--spacing-xxs);\n}\n\n.trigger[data-disabled],\n.clear[data-disabled] {\n cursor: not-allowed;\n user-select: none;\n}\n\n.positioner {\n outline: 0;\n z-index: var(--zindex-1);\n}\n\n.popup {\n box-sizing: border-box;\n background-color: var(--color-surface-base);\n color: var(--color-content-neutral-base);\n width: var(--anchor-width);\n max-width: var(--available-width);\n min-width: 12rem;\n transition:\n opacity 0.1s,\n transform 0.1s;\n transform-origin: var(--transform-origin);\n border: 1px solid var(--color-border-primary);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.popup.full-width {\n width: 100%;\n}\n\n.popup[data-starting-style],\n.popup[data-ending-style] {\n opacity: 0;\n transform: scale(0.95);\n}\n\n.list {\n box-sizing: border-box;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding-block: var(--spacing-xs);\n scroll-padding-block: var(--spacing-xs);\n outline: 0;\n max-height: min(22.5rem, var(--available-height));\n}\n\n.list[data-empty] {\n padding: 0;\n}\n\n.group {\n padding-block: var(--spacing-xs);\n}\n\n.group-label {\n padding: var(--spacing-xxs) var(--spacing-md);\n font-size: var(--typography-caption-base-size);\n font-weight: var(--typography-subheading-2-weight);\n color: var(--color-content-neutral-muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.item {\n box-sizing: border-box;\n outline: 0;\n cursor: default;\n user-select: none;\n padding-block: var(--spacing-sm);\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n display: grid;\n gap: var(--spacing-sm);\n align-items: center;\n grid-template-columns: 1rem 1fr;\n font-size: var(--field-control-font-size);\n line-height: var(--field-control-line-height);\n font-weight: var(--field-control-font-weight);\n position: relative;\n transition: background-color 0.1s;\n}\n\n.item[data-highlighted] {\n background-color: var(--color-surface-secondary);\n}\n\n.item[data-selected] {\n color: var(--color-content-brand-base);\n font-weight: var(--typography-subheading-2-weight);\n}\n\n.item[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.item-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-column-start: 1;\n}\n\n.item-text {\n grid-column-start: 2;\n}\n\n.empty {\n box-sizing: border-box;\n padding: var(--spacing-md);\n font-size: var(--field-control-font-size);\n color: var(--color-content-neutral-muted);\n text-align: center;\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"combobox.module.js","names":[],"sources":["../../../src/atoms/combobox/combobox.module.css"],"sourcesContent":[".control {\n display: flex;\n align-items: center;\n gap: var(--spacing-xs);\n position: relative;\n width: 100%;\n}\n\n.start-adornment,\n.end-adornment {\n display: flex;\n align-items: center;\n height: var(--field-control-icon-size);\n\n & [data-slot=\"input-adornment-root\"] {\n &[data-kind=\"icon\"] {\n width: var(--adornment-icon-size);\n height: var(--adornment-icon-size);\n color: var(--field-label-color);\n }\n &[data-kind=\"button\"] {\n width: var(--adornment-button-size);\n height: var(--adornment-button-size);\n color: var(--field-label-color);\n }\n }\n}\n\n.control[data-size=\"sm\"] {\n --adornment-icon-size: 1rem;\n --adornment-button-size: 1.5rem;\n --input-group-gap: var(--spacing-xs);\n --combobox-chip-size: 1rem;\n}\n.control[data-size=\"md\"] {\n --adornment-icon-size: 1.5rem;\n --adornment-button-size: 2rem;\n --input-group-gap: var(--spacing-xs);\n --combobox-chip-size: 1rem;\n}\n.control[data-size=\"lg\"] {\n --adornment-icon-size: 2rem;\n --adornment-button-size: 2.5rem;\n --input-group-gap: var(--spacing-sm);\n --combobox-chip-size: 1rem;\n}\n\n.input-group {\n box-sizing: border-box;\n position: relative;\n flex: 1;\n min-width: 12rem;\n min-height: var(--field-control-height);\n border: 1px solid var(--color-border-primary);\n background-color: var(--color-surface-base);\n border-radius: var(--field-control-radius);\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--input-group-gap);\n padding: 0 var(--spacing-sm);\n transition: border-color 0.2s ease-in-out;\n}\n\n.input-group:focus-within {\n outline-style: solid;\n outline-width: var(--stroke-focus-ring);\n outline-color: var(--color-action-info-base);\n outline-offset: var(--spacing-xxs);\n}\n\n.input {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n border: none;\n border-radius: 0;\n flex: 1;\n min-width: 4rem;\n height: calc(var(--field-control-height) - 2px);\n font-family: var(--typography-typeface-ltr);\n font-size: var(--field-control-font-size);\n line-height: var(--field-control-line-height);\n font-weight: var(--field-control-font-weight);\n background-color: transparent;\n color: var(--field-control-text-color);\n outline: none;\n}\n\n.input::placeholder {\n color: var(--field-control-placeholder-color);\n}\n\n.input:focus {\n outline: none;\n}\n\n.chips {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--spacing-xs);\n padding: var(--spacing-xxs) 0;\n flex: 1;\n}\n\n.chip {\n --combobox-chip-bg: var(--color-surface-secondary);\n --combobox-chip-color: var(--color-content-brand-secondary);\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--spacing-xxs);\n background-color: var(--combobox-chip-bg);\n color: var(--combobox-chip-color);\n border: 1px solid var(--combobox-chip-color);\n padding: 0 var(--spacing-sm);\n height: calc(var(--field-control-height) * 0.7);\n border-radius: var(--radius-full);\n font-size: var(--typography-caption-base-size);\n outline: none;\n cursor: default;\n}\n\n.chip[data-highlighted] {\n background-color: var(--color-action-neutral-muted);\n}\n\n.chip-text {\n white-space: nowrap;\n color: var(--combobox-chip-color);\n}\n\n.chip-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n color: var(--combobox-chip-color);\n background-color: var(--combobox-chip-bg);\n cursor: pointer;\n border-radius: 50%;\n transition: background-color 0.1s;\n height: var(--combobox-chip-size);\n width: var(--combobox-chip-size);\n}\n\n.chip-remove:hover {\n --combobox-chip-bg: var(--color-surface-tertiary);\n}\n\n.action-buttons {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--spacing-xxs);\n margin-left: auto;\n padding-left: var(--spacing-sm);\n height: 100%;\n}\n\n.trigger,\n.clear {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--field-control-icon-size);\n height: var(--field-control-icon-size);\n color: var(--field-label-color);\n border: none;\n padding: 0;\n background: none;\n border-radius: var(--radius-full);\n transition:\n color 0.1s,\n background-color 0.1s;\n}\n\n.trigger:hover,\n.clear:hover {\n color: var(--color-content-neutral-base);\n background-color: var(--color-surface-secondary);\n}\n\n.trigger:focus-visible,\n.clear:focus-visible {\n outline-style: solid;\n outline-width: var(--stroke-focus-ring);\n outline-color: var(--color-action-info-base);\n outline-offset: var(--spacing-xxs);\n}\n\n.trigger[data-disabled],\n.clear[data-disabled] {\n cursor: not-allowed;\n user-select: none;\n}\n\n.positioner {\n outline: 0;\n z-index: var(--zindex-1);\n}\n\n.popup {\n box-sizing: border-box;\n background-color: var(--color-surface-base);\n color: var(--color-content-neutral-base);\n width: var(--anchor-width);\n max-width: var(--available-width);\n min-width: 12rem;\n transition:\n opacity 0.1s,\n transform 0.1s;\n transform-origin: var(--transform-origin);\n border: 1px solid var(--color-border-primary);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.popup.full-width {\n width: 100%;\n}\n\n.popup[data-starting-style],\n.popup[data-ending-style] {\n opacity: 0;\n transform: scale(0.95);\n}\n\n.list {\n box-sizing: border-box;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding-block: var(--spacing-xs);\n scroll-padding-block: var(--spacing-xs);\n outline: 0;\n max-height: min(22.5rem, var(--available-height));\n}\n\n.list[data-empty] {\n padding: 0;\n}\n\n.group {\n padding-block: var(--spacing-xs);\n}\n\n.group-label {\n padding: var(--spacing-xxs) var(--spacing-md);\n font-size: var(--typography-caption-base-size);\n font-weight: var(--typography-subheading-2-weight);\n color: var(--color-content-neutral-muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.item {\n box-sizing: border-box;\n outline: 0;\n cursor: default;\n user-select: none;\n padding-block: var(--spacing-sm);\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n display: grid;\n gap: var(--spacing-sm);\n align-items: center;\n grid-template-columns: 1rem 1fr;\n font-size: var(--field-control-font-size);\n line-height: var(--field-control-line-height);\n font-weight: var(--field-control-font-weight);\n position: relative;\n transition: background-color 0.1s;\n}\n\n.item[data-highlighted] {\n background-color: var(--color-surface-secondary);\n}\n\n.item[data-selected] {\n color: var(--color-content-brand-base);\n font-weight: var(--typography-subheading-2-weight);\n}\n\n.item[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.item-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-column-start: 1;\n}\n\n.item-text {\n grid-column-start: 2;\n}\n\n.empty {\n box-sizing: border-box;\n padding: var(--spacing-md);\n font-size: var(--field-control-font-size);\n color: var(--color-content-neutral-muted);\n text-align: center;\n}\n"],"mappings":""}
|
|
@@ -1,75 +1 @@
|
|
|
1
|
-
.K6vv9G_popup {
|
|
2
|
-
box-sizing: border-box;
|
|
3
|
-
font-family: var(--typography-typeface-ltr);
|
|
4
|
-
padding-block: var(--spacing-xs);
|
|
5
|
-
border: 1px solid var(--color-border-primary);
|
|
6
|
-
border-radius: var(--spacing-xs);
|
|
7
|
-
background-color: var(--color-surface-base);
|
|
8
|
-
color: var(--color-content-neutral-base);
|
|
9
|
-
transform-origin: var(--transform-origin);
|
|
10
|
-
outline: none;
|
|
11
|
-
transition: transform .1s ease-out, opacity .1s ease-out;
|
|
12
|
-
box-shadow: 0 4px 16px #0000001a;
|
|
13
|
-
|
|
14
|
-
&[data-starting-style], &[data-ending-style] {
|
|
15
|
-
opacity: 0;
|
|
16
|
-
transform: scale(.98);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.K6vv9G_item {
|
|
21
|
-
font-family: var(--typography-typeface-ltr);
|
|
22
|
-
cursor: default;
|
|
23
|
-
user-select: none;
|
|
24
|
-
padding-block: var(--spacing-sm);
|
|
25
|
-
padding-inline: var(--spacing-md);
|
|
26
|
-
border-radius: var(--spacing-xxs);
|
|
27
|
-
color: var(--color-content-neutral-base);
|
|
28
|
-
outline: none;
|
|
29
|
-
justify-content: space-between;
|
|
30
|
-
font-size: .875rem;
|
|
31
|
-
line-height: 1.4;
|
|
32
|
-
display: flex;
|
|
33
|
-
|
|
34
|
-
&[data-highlighted] {
|
|
35
|
-
z-index: 0;
|
|
36
|
-
color: var(--color-on-brand);
|
|
37
|
-
position: relative;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
&[data-highlighted]:before {
|
|
41
|
-
content: "";
|
|
42
|
-
inset: 0;
|
|
43
|
-
inset-inline: var(--spacing-xs);
|
|
44
|
-
z-index: -1;
|
|
45
|
-
border-radius: var(--spacing-xxs);
|
|
46
|
-
background-color: var(--color-action-brand-base);
|
|
47
|
-
position: absolute;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
&[data-disabled] {
|
|
51
|
-
color: var(--color-content-neutral-muted);
|
|
52
|
-
pointer-events: none;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.K6vv9G_separator {
|
|
57
|
-
margin-block: var(--spacing-xs);
|
|
58
|
-
margin-inline: var(--spacing-sm);
|
|
59
|
-
background-color: var(--color-border-tertiary);
|
|
60
|
-
height: 1px;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.K6vv9G_group-label {
|
|
64
|
-
font-family: var(--typography-typeface-ltr);
|
|
65
|
-
padding-block: var(--spacing-xxs);
|
|
66
|
-
padding-inline: var(--spacing-md);
|
|
67
|
-
color: var(--color-content-neutral-tertiary);
|
|
68
|
-
font-size: .75rem;
|
|
69
|
-
font-weight: 600;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.K6vv9G_chevron {
|
|
73
|
-
width: 1rem;
|
|
74
|
-
height: 1rem;
|
|
75
|
-
}
|
|
1
|
+
.K6vv9G_popup{box-sizing:border-box;font-family:var(--typography-typeface-ltr);width:100%;padding-block:var(--spacing-xs);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background-color:var(--color-surface-base);color:var(--color-content-neutral-base);transform-origin:var(--transform-origin);outline:none;transition:transform .1s ease-out,opacity .1s ease-out;box-shadow:0 4px 16px #0000001a;&[data-starting-style],&[data-ending-style]{opacity:0;transform:scale(.98)}}.K6vv9G_item{font-family:var(--typography-typeface-ltr);cursor:default;user-select:none;padding-block:var(--spacing-sm);padding-inline:var(--spacing-md);border-radius:var(--radius-sm);color:var(--color-content-neutral-base);outline:none;justify-content:space-between;font-size:.875rem;line-height:1.4;display:flex;&[data-highlighted]{z-index:0;color:var(--color-on-brand);position:relative}&[data-highlighted]:before{content:"";inset:0;inset-inline:var(--spacing-xs);z-index:-1;border-radius:var(--radius-sm);background-color:var(--color-action-brand-base);position:absolute}&[data-disabled]{color:var(--color-content-neutral-muted);pointer-events:none}}.K6vv9G_separator{margin-block:var(--spacing-xs);margin-inline:var(--spacing-sm);background-color:var(--color-border-tertiary);height:1px}.K6vv9G_group-label{font-family:var(--typography-typeface-ltr);padding-block:var(--spacing-xxs);padding-inline:var(--spacing-md);color:var(--color-content-neutral-tertiary);font-size:.75rem;font-weight:600}.K6vv9G_chevron{width:1rem;height:1rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context-menu.module.js","names":[],"sources":["../../../src/atoms/context-menu/context-menu.module.css"],"sourcesContent":[".popup {\n box-sizing: border-box;\n font-family: var(--typography-typeface-ltr);\n outline: none;\n padding-block: var(--spacing-xs);\n border: 1px solid var(--color-border-primary);\n border-radius: var(--
|
|
1
|
+
{"version":3,"file":"context-menu.module.js","names":[],"sources":["../../../src/atoms/context-menu/context-menu.module.css"],"sourcesContent":[".popup {\n box-sizing: border-box;\n font-family: var(--typography-typeface-ltr);\n outline: none;\n width: 100%;\n padding-block: var(--spacing-xs);\n border: 1px solid var(--color-border-primary);\n border-radius: var(--radius-md);\n background-color: var(--color-surface-base);\n color: var(--color-content-neutral-base);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n transform-origin: var(--transform-origin);\n transition:\n transform 100ms ease-out,\n opacity 100ms ease-out;\n\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n transform: scale(0.98);\n }\n}\n\n.item {\n font-family: var(--typography-typeface-ltr);\n outline: none;\n cursor: default;\n user-select: none;\n padding-block: var(--spacing-sm);\n padding-inline: var(--spacing-md);\n display: flex;\n justify-content: space-between;\n font-size: 0.875rem;\n line-height: 1.4;\n border-radius: var(--radius-sm);\n color: var(--color-content-neutral-base);\n\n &[data-highlighted] {\n position: relative;\n z-index: 0;\n color: var(--color-on-brand);\n }\n\n &[data-highlighted]::before {\n content: \"\";\n position: absolute;\n inset: 0;\n inset-inline: var(--spacing-xs);\n z-index: -1;\n border-radius: var(--radius-sm);\n background-color: var(--color-action-brand-base);\n }\n\n &[data-disabled] {\n color: var(--color-content-neutral-muted);\n pointer-events: none;\n }\n}\n\n.separator {\n margin-block: var(--spacing-xs);\n margin-inline: var(--spacing-sm);\n height: 1px;\n background-color: var(--color-border-tertiary);\n}\n\n.group-label {\n font-family: var(--typography-typeface-ltr);\n padding-block: var(--spacing-xxs);\n padding-inline: var(--spacing-md);\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--color-content-neutral-tertiary);\n}\n\n.chevron {\n width: 1rem;\n height: 1rem;\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BaseSvgProps } from "../../internals/base-svg/base-svg.js";
|
|
2
|
-
import * as React from "react";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/atoms/icon/icon.d.ts
|
|
5
5
|
interface IconProps extends Omit<BaseSvgProps, "children"> {
|
|
@@ -8,7 +8,7 @@ interface IconProps extends Omit<BaseSvgProps, "children"> {
|
|
|
8
8
|
*/
|
|
9
9
|
data: string;
|
|
10
10
|
}
|
|
11
|
-
declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
|
|
11
|
+
declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
|
|
12
12
|
//#endregion
|
|
13
13
|
export { Icon, IconProps };
|
|
14
14
|
//# sourceMappingURL=icon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.js","names":[],"sources":["../../../src/atoms/icon/icon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseSvg, type BaseSvgProps } from \"../../internals/base-svg\";\n\nexport interface IconProps extends Omit<BaseSvgProps, \"children\"> {\n /**\n * The SVG path string (`d` attribute value).\n */\n data: string;\n}\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {\n const { data, className, ...otherProps } = props;\n\n return (\n <BaseSvg\n data-slot=\"icon\"\n ref={ref}\n className={`${className || \"\"}`.trim()}\n {...otherProps}\n >\n <path d={data} />\n </BaseSvg>\n );\n});\n"],"mappings":"yKAUA,MAAa,
|
|
1
|
+
{"version":3,"file":"icon.js","names":["React"],"sources":["../../../src/atoms/icon/icon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseSvg, type BaseSvgProps } from \"../../internals/base-svg\";\n\nexport interface IconProps extends Omit<BaseSvgProps, \"children\"> {\n /**\n * The SVG path string (`d` attribute value).\n */\n data: string;\n}\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {\n const { data, className, ...otherProps } = props;\n\n return (\n <BaseSvg\n data-slot=\"icon\"\n ref={ref}\n className={`${className || \"\"}`.trim()}\n {...otherProps}\n >\n <path d={data} />\n </BaseSvg>\n );\n});\n"],"mappings":"yKAUA,MAAa,EAAOA,EAAM,YAAsC,EAAO,IAAQ,CAC7E,GAAM,CAAE,OAAM,YAAW,GAAG,GAAe,EAE3C,OACE,EAAC,EAAD,CACE,YAAU,OACL,MACL,UAAW,GAAG,GAAa,KAAK,KAAK,EACrC,GAAI,WAEJ,EAAC,OAAD,CAAM,EAAG,CAAO,CAAA,CACT,CAAA,CAEb,CAAC"}
|
|
@@ -1,12 +1 @@
|
|
|
1
|
-
.fESXeq_root
|
|
2
|
-
width: var(--btn-height);
|
|
3
|
-
padding: 0;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.fESXeq_icon {
|
|
7
|
-
width: var(--btn-icon-size);
|
|
8
|
-
height: var(--btn-icon-size);
|
|
9
|
-
justify-content: center;
|
|
10
|
-
align-items: center;
|
|
11
|
-
display: flex;
|
|
12
|
-
}
|
|
1
|
+
.fESXeq_root{width:var(--btn-height);padding:0}.fESXeq_icon{width:var(--btn-icon-size);height:var(--btn-icon-size);justify-content:center;align-items:center;display:flex}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { BaseButtonProps } from "../../internals/base-button/base-button.js";
|
|
2
|
-
import * as React from "react";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/atoms/icon-button/icon-button.d.ts
|
|
5
5
|
interface IconButtonProps extends Omit<BaseButtonProps, "children"> {
|
|
6
6
|
/** The icon to render inside the button. */
|
|
7
|
-
icon: React.ReactNode;
|
|
7
|
+
icon: React$1.ReactNode;
|
|
8
8
|
/** Required accessible label for screen readers. */
|
|
9
9
|
label: string;
|
|
10
10
|
}
|
|
11
|
-
declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
11
|
+
declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
12
12
|
//#endregion
|
|
13
13
|
export { IconButton, IconButtonProps };
|
|
14
14
|
//# sourceMappingURL=icon-button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.js","names":["styles"],"sources":["../../../src/atoms/icon-button/icon-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseButton, type BaseButtonProps } from \"../../internals/base-button\";\nimport styles from \"./icon-button.module.css\";\n\nexport interface IconButtonProps extends Omit<BaseButtonProps, \"children\"> {\n /** The icon to render inside the button. */\n icon: React.ReactNode;\n /** Required accessible label for screen readers. */\n label: string;\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n (props, ref) => {\n const { icon, label, className, ...rest } = props;\n\n return (\n <BaseButton\n ref={ref}\n className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n aria-label={label}\n {...rest}\n >\n <span className={styles[\"icon\"]}>{icon}</span>\n </BaseButton>\n );\n },\n);\n"],"mappings":"4NAWA,MAAa,
|
|
1
|
+
{"version":3,"file":"icon-button.js","names":["React","styles"],"sources":["../../../src/atoms/icon-button/icon-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseButton, type BaseButtonProps } from \"../../internals/base-button\";\nimport styles from \"./icon-button.module.css\";\n\nexport interface IconButtonProps extends Omit<BaseButtonProps, \"children\"> {\n /** The icon to render inside the button. */\n icon: React.ReactNode;\n /** Required accessible label for screen readers. */\n label: string;\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n (props, ref) => {\n const { icon, label, className, ...rest } = props;\n\n return (\n <BaseButton\n ref={ref}\n className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n aria-label={label}\n {...rest}\n >\n <span className={styles[\"icon\"]}>{icon}</span>\n </BaseButton>\n );\n },\n);\n"],"mappings":"4NAWA,MAAa,EAAaA,EAAM,YAC7B,EAAO,IAAQ,CACd,GAAM,CAAE,OAAM,QAAO,YAAW,GAAG,GAAS,EAE5C,OACE,EAAC,EAAD,CACO,MACL,UAAW,GAAGC,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,aAAY,EACZ,GAAI,WAEJ,EAAC,OAAD,CAAM,UAAWA,EAAO,cAAU,CAAW,CAAA,CACnC,CAAA,CAEhB,CACF"}
|
package/dist/atoms/index.d.ts
CHANGED
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
import { AlertDialog, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
|
|
2
|
+
import { Avatar, AvatarProps } from "./avatar/avatar.js";
|
|
2
3
|
import { Button, ButtonProps } from "./button/button.js";
|
|
3
4
|
import { Checkbox, CheckboxProps } from "./checkbox/checkbox.js";
|
|
5
|
+
import { ClickableArea, ClickableAreaProps } from "./clickable-area/clickable-area.js";
|
|
6
|
+
import { Collapsible } from "./collapsible/collapsible.js";
|
|
7
|
+
import { ComboboxItem } from "./combobox/components/item.js";
|
|
4
8
|
import { Combobox, ComboboxGroup, ComboboxProps } from "./combobox/combobox.js";
|
|
9
|
+
import { ConditionGuard, ConditionGuardProps } from "./condition-guard/condition-guard.js";
|
|
5
10
|
import { ContextMenu } from "./context-menu/context-menu.js";
|
|
6
11
|
import { Dialog, DialogProps } from "./dialog/dialog.js";
|
|
7
|
-
import { Icon, IconProps } from "./icon/icon.js";
|
|
8
12
|
import { IconButton, IconButtonProps } from "./icon-button/icon-button.js";
|
|
13
|
+
import { Icon, IconProps } from "./icon/icon.js";
|
|
9
14
|
import { Input, InputProps } from "./input/input.js";
|
|
15
|
+
import { BaseItem, CheckboxItem, GroupItem, Menu, MenuItemsByMode, MenuMode, MenuProps, NormalItem, RadioItem, SeparatorItem, SubmenuItem } from "./menu/menu.js";
|
|
10
16
|
import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio/radio.js";
|
|
11
17
|
import { Switch, SwitchProps } from "./switch/switch.js";
|
|
12
18
|
import { Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, TabsTabProps } from "./tabs/tabs.js";
|
|
13
19
|
import { TabsListState, TabsPanelState, TabsRootChangeEventDetails, TabsRootState, TabsTabState, TabsTabValue } from "./tabs/index.js";
|
|
14
20
|
import { Text, TextColor, TextProps, TextVariant } from "./text/text.js";
|
|
15
21
|
import { Toast, ToastData, ToastProps } from "./toast/toast.js";
|
|
16
|
-
import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./tooltip/tooltip.js";
|
|
17
|
-
import { ConditionGuard, ConditionGuardProps } from "./condition-guard/condition-guard.js";
|
|
22
|
+
import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./tooltip/tooltip.js";
|
package/dist/atoms/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./button/button.js";import"./button/index.js";import"./text/text.js";import"./text/index.js";import"./alert-dialog/alert-dialog.js";import"./alert-dialog/index.js";import"./icon/icon.js";import"./icon/index.js";import"./checkbox/checkbox.js";import"./checkbox/index.js";import"./combobox/combobox.js";import"./combobox/index.js";import"./context-menu/context-menu.js";import"./context-menu/index.js";import"./dialog/dialog.js";import"./dialog/index.js";import"./icon-button/icon-button.js";import"./icon-button/index.js";import"./input/input.js";import"./input/index.js";import"./
|
|
1
|
+
import"./button/button.js";import"./button/index.js";import"./text/text.js";import"./text/index.js";import"./alert-dialog/alert-dialog.js";import"./alert-dialog/index.js";import"./avatar/avatar.js";import"./avatar/index.js";import"./icon/icon.js";import"./icon/index.js";import"./checkbox/checkbox.js";import"./checkbox/index.js";import"./clickable-area/clickable-area.js";import"./clickable-area/index.js";import"./collapsible/collapsible.js";import"./collapsible/index.js";import"./combobox/combobox.js";import"./combobox/index.js";import"./condition-guard/condition-guard.js";import"./condition-guard/index.js";import"./context-menu/context-menu.js";import"./context-menu/index.js";import"./dialog/dialog.js";import"./dialog/index.js";import"./icon-button/icon-button.js";import"./icon-button/index.js";import"./input/input.js";import"./input/index.js";import"./menu/menu.js";import"./menu/index.js";import"./radio/radio.js";import"./radio/index.js";import"./switch/switch.js";import"./switch/index.js";import"./tabs/tabs.js";import"./tabs/index.js";import"./toast/toast.js";import"./toast/index.js";import"./tooltip/tooltip.js";import"./tooltip/index.js";
|
|
@@ -1,29 +1 @@
|
|
|
1
|
-
.uLevqq_control {
|
|
2
|
-
box-sizing: border-box;
|
|
3
|
-
padding: 0 var(--spacing-sm);
|
|
4
|
-
border-radius: var(--field-control-radius);
|
|
5
|
-
border: 1px solid var(--field-control-border-color);
|
|
6
|
-
width: 100%;
|
|
7
|
-
height: var(--field-control-height);
|
|
8
|
-
font-family: inherit;
|
|
9
|
-
font-size: var(--field-control-font-size, var(--typography-body-2-size));
|
|
10
|
-
line-height: var(--field-control-line-height, var(--typography-body-2-height));
|
|
11
|
-
font-weight: var(--field-control-font-weight, var(--typography-body-2-weight));
|
|
12
|
-
background-color: var(--field-control-bg-color);
|
|
13
|
-
color: var(--field-control-text-color);
|
|
14
|
-
font-family: var(--typography-typeface-ltr);
|
|
15
|
-
margin: 0;
|
|
16
|
-
transition: border-color .2s ease-in-out;
|
|
17
|
-
|
|
18
|
-
&::placeholder {
|
|
19
|
-
color: var(--field-control-placeholder-color);
|
|
20
|
-
font-family: var(--typography-typeface-ltr);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&:focus-visible {
|
|
24
|
-
outline-style: solid;
|
|
25
|
-
outline-width: var(--stroke-focus-ring);
|
|
26
|
-
outline-color: var(--color-action-info-base);
|
|
27
|
-
outline-offset: var(--spacing-xxs);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
1
|
+
.uLevqq_control{box-sizing:border-box;padding:0 var(--spacing-sm);border-radius:var(--field-control-radius);border:1px solid var(--field-control-border-color);width:100%;height:var(--field-control-height);font-family:inherit;font-size:var(--field-control-font-size,var(--typography-body-2-size));line-height:var(--field-control-line-height,var(--typography-body-2-height));font-weight:var(--field-control-font-weight,var(--typography-body-2-weight));background-color:var(--field-control-bg-color);color:var(--field-control-text-color);font-family:var(--typography-typeface-ltr);margin:0;transition:border-color .2s ease-in-out;&::placeholder{color:var(--field-control-placeholder-color);font-family:var(--typography-typeface-ltr)}&:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.module.js","names":[],"sources":["../../../src/atoms/input/input.module.css"],"sourcesContent":[".control {\n box-sizing: border-box;\n padding: 0 var(--spacing-sm);\n margin: 0;\n border-radius: var(--field-control-radius);\n border: 1px solid var(--field-control-border-color);\n width: 100%;\n height: var(--field-control-height);\n font-family: inherit;\n font-size: var(--field-control-font-size, var(--typography-body-2-size));\n line-height: var(\n --field-control-line-height,\n var(--typography-body-2-height)\n );\n font-weight: var(\n --field-control-font-weight,\n var(--typography-body-2-weight)\n );\n background-color: var(--field-control-bg-color);\n color: var(--field-control-text-color);\n transition: border-color 0.2s ease-in-out;\n font-family: var(--typography-typeface-ltr);\n\n &::placeholder {\n color: var(--field-control-placeholder-color);\n font-family: var(--typography-typeface-ltr);\n }\n\n &:focus-visible {\n outline-style: solid;\n outline-width: var(--stroke-focus-ring);\n outline-color: var(--color-action-info-base);\n outline-offset: var(--spacing-xxs);\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.module.js","names":[],"sources":["../../../src/atoms/input/input.module.css"],"sourcesContent":[".control {\n box-sizing: border-box;\n padding: 0 var(--spacing-sm);\n margin: 0;\n border-radius: var(--field-control-radius);\n border: 1px solid var(--field-control-border-color);\n width: 100%;\n height: var(--field-control-height);\n font-family: inherit;\n font-size: var(--field-control-font-size, var(--typography-body-2-size));\n line-height: var(\n --field-control-line-height,\n var(--typography-body-2-height)\n );\n font-weight: var(\n --field-control-font-weight,\n var(--typography-body-2-weight)\n );\n background-color: var(--field-control-bg-color);\n color: var(--field-control-text-color);\n transition: border-color 0.2s ease-in-out;\n font-family: var(--typography-typeface-ltr);\n\n &::placeholder {\n color: var(--field-control-placeholder-color);\n font-family: var(--typography-typeface-ltr);\n }\n\n &:focus-visible {\n outline-style: solid;\n outline-width: var(--stroke-focus-ring);\n outline-color: var(--color-action-info-base);\n outline-offset: var(--spacing-xxs);\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import { BaseItem, CheckboxItem, GroupItem, Menu, MenuItemsByMode, MenuMode, MenuProps, NormalItem, RadioItem, SeparatorItem, SubmenuItem } from "./menu.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"./menu.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.geRtDa_trigger{white-space:nowrap;-webkit-user-select:none;user-select:none;background-color:#0000;border:none;outline:0;justify-content:center;align-items:center;margin:0;font-family:inherit;font-size:.875rem;font-weight:400;line-height:1;display:flex}.geRtDa_positioner{outline:0}.geRtDa_popup{box-sizing:border-box;font-family:var(--typography-typeface-ltr);width:100%;padding-block:var(--spacing-xs);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background-color:var(--color-surface-base);color:var(--color-content-neutral-base);transform-origin:var(--transform-origin);outline:none;transition:transform .1s ease-out,opacity .1s ease-out;box-shadow:0 4px 16px #0000001a;&[data-starting-style],&[data-ending-style]{opacity:0;transform:scale(.98)}}.geRtDa_item{font-family:var(--typography-typeface-ltr);cursor:default;user-select:none;padding-block:var(--spacing-sm);padding-inline:var(--spacing-md);border-radius:var(--radius-sm);color:var(--color-content-neutral-base);outline:none;font-size:.875rem;line-height:1.4;display:flex;&[data-highlighted]{z-index:0;color:var(--color-on-brand);position:relative}&[data-highlighted]:before{content:"";inset:0;inset-inline:var(--spacing-xs);z-index:-1;border-radius:var(--radius-sm);background-color:var(--color-action-brand-base);position:absolute}&[data-disabled]{color:var(--color-content-neutral-muted);pointer-events:none}}.geRtDa_separator{margin-block:var(--spacing-xs);margin-inline:var(--spacing-sm);background-color:var(--color-border-tertiary);height:1px}.geRtDa_group-label{font-family:var(--typography-typeface-ltr);padding-block:var(--spacing-xxs);padding-inline:var(--spacing-md);color:var(--color-content-neutral-tertiary);font-size:.75rem;font-weight:600}.geRtDa_group{flex-direction:column;display:flex}.geRtDa_radio-item{align-items:center;gap:var(--spacing-sm)}.geRtDa_radio-item-indicator{width:1rem;height:1rem;justify-content:center;align-items:center;margin-inline-end:var(--spacing-sm);display:inline-flex}.geRtDa_checkbox-item{align-items:center;gap:var(--spacing-sm)}.geRtDa_checkbox-item-indicator{width:1rem;height:1rem;justify-content:center;align-items:center;margin-inline-end:var(--spacing-sm);display:inline-flex}.geRtDa_check{width:.875rem;height:.875rem}.geRtDa_submenu-trigger{justify-content:space-between;align-items:center;display:flex}.geRtDa_submenu-arrow{opacity:.6;width:.875rem;height:.875rem;margin-left:auto;font-size:.75rem}
|