@frame-ui-ng/components 0.1.0-beta.0 → 0.3.0-beta.0

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 (100) hide show
  1. package/accordion/src/styles/_vars.css +25 -25
  2. package/accordion/src/styles/accordion.css +105 -87
  3. package/alert/src/styles/_vars.css +28 -28
  4. package/badge/src/styles/_vars.css +19 -16
  5. package/badge/src/styles/badge.css +132 -125
  6. package/breadcrumb/src/styles/_vars.css +17 -16
  7. package/breadcrumb/src/styles/breadcrumb.css +110 -98
  8. package/button/src/styles/_vars.css +20 -20
  9. package/button/src/styles/button.css +66 -9
  10. package/button-group/src/styles/button-group.css +100 -69
  11. package/calendar/src/styles/_vars.css +29 -29
  12. package/calendar/src/styles/calendar.css +247 -226
  13. package/card/src/styles/_vars.css +17 -17
  14. package/checkbox/src/styles/_vars.css +22 -22
  15. package/collapsible/src/styles/collapsible.css +55 -42
  16. package/combobox/src/styles/_vars.css +61 -60
  17. package/combobox/src/styles/combobox.css +295 -285
  18. package/command/src/styles/_vars.css +47 -37
  19. package/command/src/styles/command.css +236 -171
  20. package/date-picker/src/styles/_vars.css +30 -29
  21. package/date-picker/src/styles/date-picker.css +203 -177
  22. package/dropdown-menu/src/styles/_vars.css +34 -34
  23. package/dropdown-menu/src/styles/dropdown-menu-item.css +87 -87
  24. package/fesm2022/frame-ui-ng-components-accordion.mjs +26 -11
  25. package/fesm2022/frame-ui-ng-components-accordion.mjs.map +1 -1
  26. package/fesm2022/frame-ui-ng-components-badge.mjs +1 -0
  27. package/fesm2022/frame-ui-ng-components-badge.mjs.map +1 -1
  28. package/fesm2022/frame-ui-ng-components-button.mjs +1 -1
  29. package/fesm2022/frame-ui-ng-components-button.mjs.map +1 -1
  30. package/fesm2022/frame-ui-ng-components-calendar.mjs +369 -263
  31. package/fesm2022/frame-ui-ng-components-calendar.mjs.map +1 -1
  32. package/fesm2022/frame-ui-ng-components-command.mjs +20 -2
  33. package/fesm2022/frame-ui-ng-components-command.mjs.map +1 -1
  34. package/fesm2022/frame-ui-ng-components-date-picker.mjs +232 -226
  35. package/fesm2022/frame-ui-ng-components-date-picker.mjs.map +1 -1
  36. package/fesm2022/frame-ui-ng-components-dropdown-menu.mjs +45 -22
  37. package/fesm2022/frame-ui-ng-components-dropdown-menu.mjs.map +1 -1
  38. package/fesm2022/frame-ui-ng-components-input.mjs +6 -3
  39. package/fesm2022/frame-ui-ng-components-input.mjs.map +1 -1
  40. package/fesm2022/frame-ui-ng-components-select.mjs +6 -3
  41. package/fesm2022/frame-ui-ng-components-select.mjs.map +1 -1
  42. package/fesm2022/frame-ui-ng-components-sidebar.mjs +47 -4
  43. package/fesm2022/frame-ui-ng-components-sidebar.mjs.map +1 -1
  44. package/fesm2022/frame-ui-ng-components-toast.mjs +152 -142
  45. package/fesm2022/frame-ui-ng-components-toast.mjs.map +1 -1
  46. package/fesm2022/frame-ui-ng-components-tooltip.mjs +263 -254
  47. package/fesm2022/frame-ui-ng-components-tooltip.mjs.map +1 -1
  48. package/fesm2022/frame-ui-ng-components.mjs +745 -531
  49. package/fesm2022/frame-ui-ng-components.mjs.map +1 -1
  50. package/input/src/styles/_vars.css +65 -65
  51. package/input/src/styles/input-group.css +164 -112
  52. package/input/src/styles/input.css +197 -163
  53. package/input-otp/src/styles/_vars.css +21 -21
  54. package/item/src/styles/_vars.css +34 -34
  55. package/menubar/src/styles/_vars.css +22 -22
  56. package/modal/src/styles/_vars.css +19 -18
  57. package/modal/src/styles/modal.css +202 -179
  58. package/navigation-menu/src/styles/_vars.css +45 -45
  59. package/package.json +12 -3
  60. package/pagination/src/styles/_vars.css +22 -22
  61. package/pagination/src/styles/pagination.css +158 -138
  62. package/progress/src/styles/_vars.css +15 -15
  63. package/radio-group/src/styles/_vars.css +29 -29
  64. package/radio-group/src/styles/radio-group.css +146 -137
  65. package/resizable/src/styles/_vars.css +20 -20
  66. package/select/src/styles/_vars.css +28 -28
  67. package/select/src/styles/select-trigger.css +109 -95
  68. package/separator/src/styles/_vars.css +9 -9
  69. package/sheet/src/styles/_vars.css +20 -18
  70. package/sheet/src/styles/sheet.css +220 -215
  71. package/sidebar/src/styles/sidebar.css +544 -531
  72. package/slider/src/styles/_vars.css +17 -17
  73. package/src/styles/blueprint.css +659 -0
  74. package/src/styles/components.css +47 -47
  75. package/styles/blueprint.css +659 -0
  76. package/styles/components.css +47 -47
  77. package/styles.css +49 -49
  78. package/switch/src/styles/_vars.css +34 -34
  79. package/switch/src/styles/switch.css +130 -131
  80. package/tabs/src/styles/_vars.css +23 -23
  81. package/textarea/src/styles/_vars.css +20 -20
  82. package/textarea/src/styles/textarea.css +62 -60
  83. package/toast/src/styles/_vars.css +48 -47
  84. package/toast/src/styles/toast.css +279 -314
  85. package/toggle/src/styles/_vars.css +24 -24
  86. package/tooltip/src/styles/_vars.css +21 -21
  87. package/tooltip/src/styles/tooltip.css +99 -103
  88. package/types/frame-ui-ng-components-accordion.d.ts +3 -1
  89. package/types/frame-ui-ng-components-badge.d.ts +2 -2
  90. package/types/frame-ui-ng-components-calendar.d.ts +14 -0
  91. package/types/frame-ui-ng-components-command.d.ts +7 -2
  92. package/types/frame-ui-ng-components-context-menu.d.ts +2 -2
  93. package/types/frame-ui-ng-components-date-picker.d.ts +3 -1
  94. package/types/frame-ui-ng-components-dropdown-menu.d.ts +3 -3
  95. package/types/frame-ui-ng-components-input.d.ts +6 -3
  96. package/types/frame-ui-ng-components-select.d.ts +6 -3
  97. package/types/frame-ui-ng-components-sidebar.d.ts +8 -1
  98. package/types/frame-ui-ng-components-tooltip.d.ts +43 -73
  99. package/types/frame-ui-ng-components.d.ts +91 -55
  100. package/virtual-scroll/src/styles/virtual-scroll.css +54 -54
package/combobox/src/styles/combobox.css CHANGED
@@ -1,285 +1,295 @@
1
- @import './_vars.css';
2
-
3
- [frCombobox],
4
- frame-combobox,
5
- .frame-combobox__anchor{
6
- display: inline-block;
7
- width: 100%;
8
- position: relative;
9
- }
10
-
11
- .frame-combobox__input,
12
- .frame-combobox__trigger,
13
- .frame-combobox__chips {
14
- box-sizing: border-box;
15
- width: 100%;
16
- min-block-size: var(--frame-combobox-control-height);
17
- border: 1px solid var(--frame-combobox-control-border);
18
- border-radius: var(--frame-combobox-control-radius);
19
- background: var(--frame-combobox-control-bg);
20
- color: var(--frame-combobox-control-color);
21
- font: inherit;
22
- font-size: var(--frame-combobox-control-font-size);
23
- outline: none;
24
- transition:
25
- background-color var(--frame-combobox-control-transition-duration) ease,
26
- border-color var(--frame-combobox-control-transition-duration) ease,
27
- box-shadow var(--frame-combobox-control-transition-duration) ease,
28
- color var(--frame-combobox-control-transition-duration) ease;
29
- }
30
-
31
- [frCombobox][data-disabled],
32
- frame-combobox[data-disabled] {
33
- cursor: not-allowed;
34
- }
35
-
36
- [frCombobox][data-disabled] .frame-combobox__input,
37
- [frCombobox][data-disabled] .frame-combobox__trigger,
38
- [frCombobox][data-disabled] .frame-combobox__chips,
39
- frame-combobox[data-disabled] .frame-combobox__input,
40
- frame-combobox[data-disabled] .frame-combobox__trigger,
41
- frame-combobox[data-disabled] .frame-combobox__chips {
42
- background: var(--frame-combobox-control-disabled-bg);
43
- color: var(--frame-combobox-control-disabled-color);
44
- cursor: not-allowed;
45
- opacity: var(--frame-combobox-control-disabled-opacity);
46
- }
47
-
48
- .frame-combobox__input,
49
- .frame-combobox__trigger {
50
- padding-inline: var(--frame-combobox-control-padding-inline);
51
- }
52
-
53
- .frame-combobox__input:focus-visible,
54
- .frame-combobox__trigger:focus-visible,
55
- .frame-combobox__chips:focus-within {
56
- border-color: var(--frame-combobox-control-focus-border);
57
- box-shadow: var(--frame-combobox-control-focus-shadow);
58
- }
59
-
60
- .frame-combobox__input[aria-invalid='true'],
61
- .frame-combobox__chips[data-invalid],
62
- [frCombobox][data-invalid] .frame-combobox__trigger {
63
- border-color: var(--frame-combobox-control-invalid-border);
64
- box-shadow: var(--frame-combobox-control-invalid-shadow);
65
- }
66
-
67
- .frame-combobox__trigger {
68
- display: inline-flex;
69
- align-items: center;
70
- justify-content: space-between;
71
- cursor: pointer;
72
- text-align: start;
73
- }
74
-
75
- .frame-combobox__clear {
76
- position: absolute;
77
- right: var(--frame-combobox-clear-offset);
78
- top: 50%;
79
- transform: translateY(-50%);
80
- display: inline-flex;
81
- align-items: center;
82
- justify-content: center;
83
- border: 0;
84
- border-radius: var(--frame-radius-sm);
85
- background: transparent;
86
- color: var(--frame-muted-foreground);
87
- cursor: pointer;
88
- font: inherit;
89
- }
90
-
91
- [frComboboxInput][data-has-value='false'] ~ .frame-combobox__clear {
92
- opacity: 0;
93
- }
94
-
95
- .frame-combobox__panel {
96
- box-sizing: border-box;
97
- inline-size: 100%;
98
- max-block-size: var(--frame-combobox-panel-max-height);
99
- overflow: auto;
100
- border: 1px solid var(--frame-combobox-panel-border);
101
- border-radius: var(--frame-combobox-panel-radius);
102
- background: var(--frame-combobox-panel-bg);
103
- color: var(--frame-combobox-panel-color);
104
- box-shadow: var(--frame-combobox-panel-shadow);
105
- padding: var(--frame-combobox-panel-padding);
106
- transform-origin: var(--frame-combobox-origin, top left);
107
- animation: frame-combobox-enter var(--frame-combobox-motion-duration) var(--frame-combobox-motion-easing);
108
- will-change: opacity, transform;
109
- }
110
-
111
- .frame-combobox-overlay--bottom .frame-combobox__panel {
112
- --frame-combobox-enter-x: 0;
113
- --frame-combobox-enter-y: calc(var(--frame-combobox-motion-distance) * -1);
114
- --frame-combobox-origin: top left;
115
- }
116
-
117
- .frame-combobox-overlay--top .frame-combobox__panel {
118
- --frame-combobox-enter-x: 0;
119
- --frame-combobox-enter-y: var(--frame-combobox-motion-distance);
120
- --frame-combobox-origin: bottom left;
121
- }
122
-
123
- .frame-combobox__list,
124
- .frame-combobox__collection,
125
- .frame-combobox__group {
126
- display: grid;
127
- gap: var(--frame-combobox-list-gap);
128
- }
129
-
130
- .frame-combobox__item {
131
- position: relative;
132
- display: flex;
133
- align-items: center;
134
- gap: var(--frame-combobox-item-gap);
135
- width: 100%;
136
- min-block-size: var(--frame-combobox-item-height);
137
- border: 0;
138
- border-radius: var(--frame-combobox-item-radius);
139
- background: transparent;
140
- color: inherit;
141
- cursor: pointer;
142
- font: inherit;
143
- font-size: var(--frame-combobox-item-font-size);
144
- line-height: 1;
145
- padding: var(--frame-combobox-item-padding);
146
- text-align: start;
147
- }
148
-
149
- .frame-combobox__item[data-hidden] {
150
- display: none;
151
- }
152
-
153
- .frame-combobox__item[data-highlighted],
154
- .frame-combobox__item:hover {
155
- background: var(--frame-accent);
156
- color: var(--frame-accent-foreground);
157
- }
158
-
159
- .frame-combobox__item[disabled] {
160
- cursor: not-allowed;
161
- opacity: var(--frame-combobox-item-disabled-opacity);
162
- }
163
-
164
- .frame-combobox__item:not(:has([frComboboxItemIndicator], .frame-combobox__item-indicator))::before {
165
- content: '✓';
166
- position: absolute;
167
- inset-inline-start: var(--frame-combobox-item-indicator-offset);
168
- opacity: 0;
169
- }
170
-
171
- .frame-combobox__item:not(:has([frComboboxItemIndicator], .frame-combobox__item-indicator))[data-selected]::before {
172
- opacity: 1;
173
- }
174
-
175
- .frame-combobox__item-indicator {
176
- position: absolute;
177
- inset-inline-start: var(--frame-combobox-item-indicator-offset);
178
- }
179
-
180
- .frame-combobox__item:not([data-selected]) .frame-combobox__item-indicator {
181
- opacity: 0;
182
- }
183
-
184
- .frame-combobox__empty,
185
- .frame-combobox__label {
186
- color: var(--frame-muted-foreground);
187
- font-size: var(--frame-combobox-muted-font-size);
188
- padding: var(--frame-combobox-muted-padding);
189
- }
190
-
191
- .frame-combobox__label {
192
- font-weight: 700;
193
- letter-spacing: 0.04em;
194
- text-transform: uppercase;
195
- }
196
-
197
- .frame-combobox__separator {
198
- block-size: 1px;
199
- margin: var(--frame-combobox-separator-margin);
200
- background: var(--frame-combobox-separator-bg);
201
- }
202
-
203
- .frame-combobox__chips {
204
- display: flex;
205
- flex-wrap: wrap;
206
- align-items: center;
207
- gap: var(--frame-combobox-chips-gap);
208
- padding: var(--frame-combobox-chips-padding);
209
- }
210
-
211
- .frame-combobox__value {
212
- display: inline-flex;
213
- flex-wrap: wrap;
214
- align-items: center;
215
- gap: var(--frame-combobox-chips-gap);
216
- }
217
-
218
- .frame-combobox__chip {
219
- display: inline-flex;
220
- align-items: center;
221
- justify-content: center;
222
- gap: var(--frame-combobox-chip-gap);
223
- min-block-size: var(--frame-combobox-chip-height);
224
- border: 1px solid transparent;
225
- border-radius: var(--frame-combobox-chip-radius);
226
- background: var(--frame-combobox-chip-bg);
227
- color: var(--frame-combobox-chip-color);
228
- box-sizing: border-box;
229
- font-size: var(--frame-combobox-chip-font-size);
230
- font-weight: var(--frame-combobox-chip-font-weight);
231
- line-height: 1;
232
- padding-block: var(--frame-combobox-chip-padding-block);
233
- padding-inline: var(--frame-combobox-chip-padding-inline);
234
- white-space: nowrap;
235
- }
236
-
237
- .frame-combobox__chip button {
238
- display: inline-flex;
239
- align-items: center;
240
- justify-content: center;
241
- inline-size: var(--frame-combobox-chip-remove-size);
242
- block-size: var(--frame-combobox-chip-remove-size);
243
- border: 0;
244
- border-radius: var(--frame-combobox-chip-remove-radius);
245
- background: var(--frame-combobox-chip-remove-bg);
246
- color: inherit;
247
- cursor: pointer;
248
- font: inherit;
249
- line-height: 1;
250
- padding: 0;
251
- }
252
-
253
- .frame-combobox__chip button:hover {
254
- background: var(--frame-combobox-chip-remove-hover-bg);
255
- }
256
-
257
- .frame-combobox__chips-input {
258
- flex: 1 1 var(--frame-combobox-chips-input-min-width);
259
- min-inline-size: var(--frame-combobox-chips-input-min-width);
260
- border: 0;
261
- background: transparent;
262
- color: inherit;
263
- font: inherit;
264
- outline: none;
265
- padding: var(--frame-combobox-chips-input-padding);
266
- }
267
-
268
- .frame-combobox__error {
269
- color: var(--frame-combobox-error-color);
270
- font-size: var(--frame-combobox-error-font-size);
271
- line-height: 1.45;
272
- margin: 0;
273
- }
274
-
275
- @keyframes frame-combobox-enter {
276
- from {
277
- opacity: 0;
278
- transform: translate(var(--frame-combobox-enter-x, 0), var(--frame-combobox-enter-y, calc(var(--frame-combobox-motion-distance) * -1))) scale(var(--frame-combobox-motion-scale));
279
- }
280
-
281
- to {
282
- opacity: 1;
283
- transform: translateY(0) scale(1);
284
- }
285
- }
1
+ @import './_vars.css';
2
+
3
+ [frCombobox],
4
+ frame-combobox,
5
+ .frame-combobox__anchor{
6
+ display: inline-block;
7
+ width: 100%;
8
+ position: relative;
9
+ }
10
+
11
+ .frame-combobox__input,
12
+ .frame-combobox__trigger,
13
+ .frame-combobox__chips {
14
+ box-sizing: border-box;
15
+ width: 100%;
16
+ min-block-size: var(--frame-combobox-control-height);
17
+ border: 1px solid var(--frame-combobox-control-border);
18
+ border-radius: var(--frame-combobox-control-radius);
19
+ background: var(--frame-combobox-control-bg);
20
+ color: var(--frame-combobox-control-color);
21
+ font: inherit;
22
+ font-size: var(--frame-combobox-control-font-size);
23
+ outline: none;
24
+ transition:
25
+ background-color var(--frame-combobox-control-transition-duration) ease,
26
+ border-color var(--frame-combobox-control-transition-duration) ease,
27
+ box-shadow var(--frame-combobox-control-transition-duration) ease,
28
+ color var(--frame-combobox-control-transition-duration) ease,
29
+ transform var(--frame-combobox-control-transition-duration) ease;
30
+ }
31
+
32
+ [frCombobox][data-disabled],
33
+ frame-combobox[data-disabled] {
34
+ cursor: not-allowed;
35
+ }
36
+
37
+ [frCombobox][data-disabled] .frame-combobox__input,
38
+ [frCombobox][data-disabled] .frame-combobox__trigger,
39
+ [frCombobox][data-disabled] .frame-combobox__chips,
40
+ frame-combobox[data-disabled] .frame-combobox__input,
41
+ frame-combobox[data-disabled] .frame-combobox__trigger,
42
+ frame-combobox[data-disabled] .frame-combobox__chips {
43
+ background: var(--frame-combobox-control-disabled-bg);
44
+ color: var(--frame-combobox-control-disabled-color);
45
+ cursor: not-allowed;
46
+ opacity: var(--frame-combobox-control-disabled-opacity);
47
+ }
48
+
49
+ .frame-combobox__input,
50
+ .frame-combobox__trigger {
51
+ padding-inline: var(--frame-combobox-control-padding-inline);
52
+ }
53
+
54
+ .frame-combobox__input:focus-visible,
55
+ .frame-combobox__trigger:focus-visible,
56
+ .frame-combobox__chips:focus-within {
57
+ border-color: var(--frame-combobox-control-focus-border);
58
+ box-shadow: var(--frame-combobox-control-focus-shadow);
59
+ }
60
+
61
+ .frame-combobox__input[aria-expanded='true'],
62
+ .frame-combobox__trigger[aria-expanded='true'] {
63
+ border-color: var(--frame-frame-accent, var(--frame-combobox-control-focus-border));
64
+ background: color-mix(in srgb, var(--frame-combobox-control-bg) 68%, var(--frame-muted));
65
+ transform: translate(-1px, -1px);
66
+ box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
67
+ }
68
+
69
+ .frame-combobox__input[aria-invalid='true'],
70
+ .frame-combobox__chips[data-invalid],
71
+ [frCombobox][data-invalid] .frame-combobox__trigger {
72
+ border-color: var(--frame-combobox-control-invalid-border);
73
+ box-shadow: var(--frame-combobox-control-invalid-shadow);
74
+ }
75
+
76
+ .frame-combobox__trigger {
77
+ display: inline-flex;
78
+ align-items: center;
79
+ justify-content: space-between;
80
+ cursor: pointer;
81
+ text-align: start;
82
+ }
83
+
84
+ .frame-combobox__clear {
85
+ position: absolute;
86
+ right: var(--frame-combobox-clear-offset);
87
+ top: 50%;
88
+ transform: translateY(-50%);
89
+ display: inline-flex;
90
+ align-items: center;
91
+ justify-content: center;
92
+ border: 0;
93
+ border-radius: var(--frame-combobox-clear-radius);
94
+ background: transparent;
95
+ color: var(--frame-muted-foreground);
96
+ cursor: pointer;
97
+ font: inherit;
98
+ }
99
+
100
+ [frComboboxInput][data-has-value='false'] ~ .frame-combobox__clear {
101
+ opacity: 0;
102
+ }
103
+
104
+ .frame-combobox__panel {
105
+ box-sizing: border-box;
106
+ inline-size: 100%;
107
+ max-block-size: var(--frame-combobox-panel-max-height);
108
+ overflow: auto;
109
+ border: 1px solid var(--frame-combobox-panel-border);
110
+ border-radius: var(--frame-combobox-panel-radius);
111
+ background: var(--frame-combobox-panel-bg);
112
+ color: var(--frame-combobox-panel-color);
113
+ box-shadow: var(--frame-combobox-panel-shadow);
114
+ padding: var(--frame-combobox-panel-padding);
115
+ transform-origin: var(--frame-combobox-origin, top left);
116
+ animation: frame-combobox-enter var(--frame-combobox-motion-duration) var(--frame-combobox-motion-easing);
117
+ will-change: opacity, transform;
118
+ }
119
+
120
+ .frame-combobox-overlay--bottom .frame-combobox__panel {
121
+ --frame-combobox-enter-x: 0;
122
+ --frame-combobox-enter-y: calc(var(--frame-combobox-motion-distance) * -1);
123
+ --frame-combobox-origin: top left;
124
+ }
125
+
126
+ .frame-combobox-overlay--top .frame-combobox__panel {
127
+ --frame-combobox-enter-x: 0;
128
+ --frame-combobox-enter-y: var(--frame-combobox-motion-distance);
129
+ --frame-combobox-origin: bottom left;
130
+ }
131
+
132
+ .frame-combobox__list,
133
+ .frame-combobox__collection,
134
+ .frame-combobox__group {
135
+ display: grid;
136
+ gap: var(--frame-combobox-list-gap);
137
+ }
138
+
139
+ .frame-combobox__item {
140
+ position: relative;
141
+ display: flex;
142
+ align-items: center;
143
+ gap: var(--frame-combobox-item-gap);
144
+ width: 100%;
145
+ min-block-size: var(--frame-combobox-item-height);
146
+ border: 0;
147
+ border-radius: var(--frame-combobox-item-radius);
148
+ background: transparent;
149
+ color: inherit;
150
+ cursor: pointer;
151
+ font: inherit;
152
+ font-size: var(--frame-combobox-item-font-size);
153
+ line-height: 1;
154
+ padding: var(--frame-combobox-item-padding);
155
+ text-align: start;
156
+ }
157
+
158
+ .frame-combobox__item[data-hidden] {
159
+ display: none;
160
+ }
161
+
162
+ .frame-combobox__item[data-highlighted],
163
+ .frame-combobox__item:hover {
164
+ background: var(--frame-accent);
165
+ color: var(--frame-accent-foreground);
166
+ transform: translateX(0.25rem);
167
+ }
168
+
169
+ .frame-combobox__item[disabled] {
170
+ cursor: not-allowed;
171
+ opacity: var(--frame-combobox-item-disabled-opacity);
172
+ }
173
+
174
+ .frame-combobox__item:not(:has([frComboboxItemIndicator], .frame-combobox__item-indicator))::before {
175
+ content: '✓';
176
+ position: absolute;
177
+ inset-inline-start: var(--frame-combobox-item-indicator-offset);
178
+ opacity: 0;
179
+ }
180
+
181
+ .frame-combobox__item:not(:has([frComboboxItemIndicator], .frame-combobox__item-indicator))[data-selected]::before {
182
+ opacity: 1;
183
+ }
184
+
185
+ .frame-combobox__item-indicator {
186
+ position: absolute;
187
+ inset-inline-start: var(--frame-combobox-item-indicator-offset);
188
+ }
189
+
190
+ .frame-combobox__item:not([data-selected]) .frame-combobox__item-indicator {
191
+ opacity: 0;
192
+ }
193
+
194
+ .frame-combobox__empty,
195
+ .frame-combobox__label {
196
+ color: var(--frame-muted-foreground);
197
+ font-size: var(--frame-combobox-muted-font-size);
198
+ padding: var(--frame-combobox-muted-padding);
199
+ }
200
+
201
+ .frame-combobox__label {
202
+ font-weight: 700;
203
+ letter-spacing: 0.04em;
204
+ text-transform: uppercase;
205
+ }
206
+
207
+ .frame-combobox__separator {
208
+ block-size: 1px;
209
+ margin: var(--frame-combobox-separator-margin);
210
+ background: var(--frame-combobox-separator-bg);
211
+ }
212
+
213
+ .frame-combobox__chips {
214
+ display: flex;
215
+ flex-wrap: wrap;
216
+ align-items: center;
217
+ gap: var(--frame-combobox-chips-gap);
218
+ padding: var(--frame-combobox-chips-padding);
219
+ }
220
+
221
+ .frame-combobox__value {
222
+ display: inline-flex;
223
+ flex-wrap: wrap;
224
+ align-items: center;
225
+ gap: var(--frame-combobox-chips-gap);
226
+ }
227
+
228
+ .frame-combobox__chip {
229
+ display: inline-flex;
230
+ align-items: center;
231
+ justify-content: center;
232
+ gap: var(--frame-combobox-chip-gap);
233
+ min-block-size: var(--frame-combobox-chip-height);
234
+ border: 1px solid transparent;
235
+ border-radius: var(--frame-combobox-chip-radius);
236
+ background: var(--frame-combobox-chip-bg);
237
+ color: var(--frame-combobox-chip-color);
238
+ box-sizing: border-box;
239
+ font-size: var(--frame-combobox-chip-font-size);
240
+ font-weight: var(--frame-combobox-chip-font-weight);
241
+ line-height: 1;
242
+ padding-block: var(--frame-combobox-chip-padding-block);
243
+ padding-inline: var(--frame-combobox-chip-padding-inline);
244
+ white-space: nowrap;
245
+ }
246
+
247
+ .frame-combobox__chip button {
248
+ display: inline-flex;
249
+ align-items: center;
250
+ justify-content: center;
251
+ inline-size: var(--frame-combobox-chip-remove-size);
252
+ block-size: var(--frame-combobox-chip-remove-size);
253
+ border: 0;
254
+ border-radius: var(--frame-combobox-chip-remove-radius);
255
+ background: var(--frame-combobox-chip-remove-bg);
256
+ color: inherit;
257
+ cursor: pointer;
258
+ font: inherit;
259
+ line-height: 1;
260
+ padding: 0;
261
+ }
262
+
263
+ .frame-combobox__chip button:hover {
264
+ background: var(--frame-combobox-chip-remove-hover-bg);
265
+ }
266
+
267
+ .frame-combobox__chips-input {
268
+ flex: 1 1 var(--frame-combobox-chips-input-min-width);
269
+ min-inline-size: var(--frame-combobox-chips-input-min-width);
270
+ border: 0;
271
+ background: transparent;
272
+ color: inherit;
273
+ font: inherit;
274
+ outline: none;
275
+ padding: var(--frame-combobox-chips-input-padding);
276
+ }
277
+
278
+ .frame-combobox__error {
279
+ color: var(--frame-combobox-error-color);
280
+ font-size: var(--frame-combobox-error-font-size);
281
+ line-height: 1.45;
282
+ margin: 0;
283
+ }
284
+
285
+ @keyframes frame-combobox-enter {
286
+ from {
287
+ opacity: 0;
288
+ transform: translate(var(--frame-combobox-enter-x, 0), var(--frame-combobox-enter-y, calc(var(--frame-combobox-motion-distance) * -1))) scale(var(--frame-combobox-motion-scale));
289
+ }
290
+
291
+ to {
292
+ opacity: 1;
293
+ transform: translateY(0) scale(1);
294
+ }
295
+ }