@lapismd/design-core 0.1.0 → 0.1.2

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 (67) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +1 -1
  3. package/package.json +12 -8
  4. package/spec/src/styling-and-themes.md +9 -9
  5. package/src/shared/ai/chat.css +2 -1
  6. package/src/shared/ai/composer-input/ComposerInput.svelte +3 -2
  7. package/src/shared/ai/experimental/reaction-bar/ReactionBar.svelte +1 -1
  8. package/src/shared/ai/tool-calls/ToolCalls.svelte +1 -1
  9. package/src/shared/ai/trigger-menu.ts +2 -3
  10. package/src/shared/diff/file-diff/FileDiff.svelte +5 -8
  11. package/src/shared/diff/file-listing/FileListingViewModeToggle.css +42 -5
  12. package/src/shared/diff/merge-editor/MergeEditor.svelte +2 -7
  13. package/src/shared/filter/filter-query/filters.ts +2 -2
  14. package/src/shared/filter/filter-query/parser.ts +9 -8
  15. package/src/shared/filter/power-search/PowerSearch.svelte +1 -1
  16. package/src/shared/filter/search-filter-bar/SearchFilterBar.svelte +2 -2
  17. package/src/shared/filter/search-filter-bar/SearchFilterInput.svelte +1 -1
  18. package/src/shared/filter/search-filter-bar/SearchFilterPredicateEditor.svelte +1 -1
  19. package/src/shared/filter/search-filter-bar/search-filter-syntax.ts +1 -1
  20. package/src/shared/forms/autocomplete-input/AutocompleteInput.svelte +19 -7
  21. package/src/shared/shadcn/command/command-dialog.svelte +1 -1
  22. package/src/shared/shadcn/command/command-group.svelte +3 -1
  23. package/src/shared/shadcn/command-view/command-view.svelte +1 -6
  24. package/src/shared/shadcn/dropdown-menu/dropdown-menu-checkbox-item.svelte +0 -691
  25. package/src/shared/shadcn/dropdown-menu/dropdown-menu-content.svelte +691 -0
  26. package/src/shared/shadcn/dropdown-menu/dropdown-menu-radio-group.svelte +1 -1
  27. package/src/shared/shadcn/scroll-area/scroll-area.svelte +2 -0
  28. package/src/shared/shadcn/spinner/spinner.svelte +3 -3
  29. package/src/shared/shell/app-shell/AppShell.demo.css +37 -0
  30. package/src/shared/shell/app-shell/AppShellBodyContent.svelte +5 -1
  31. package/src/shared/shell/app-shell/AppShellBodySidebar.svelte +5 -1
  32. package/src/shared/shell/app-shell/AppShellMobilePanelSelector.svelte +1 -1
  33. package/src/shared/shell/app-shell/app-shell-controller.svelte.ts +23 -9
  34. package/src/shared/shell/app-shell/examples/AppShellBodyDemo.svelte +4 -0
  35. package/src/shared/shell/app-shell/examples/AppShellCompleteDemo.svelte +1 -0
  36. package/src/shared/shell/app-shell/examples/AppShellConversationDemo.svelte +1 -0
  37. package/src/shared/shell/app-shell/examples/AppShellExamples.css +521 -0
  38. package/src/shared/shell/app-shell/examples/AppShellFilesSidebarDemo.svelte +1 -0
  39. package/src/shared/shell/app-shell/examples/AppShellMarkdownDocumentDemo.svelte +6 -1
  40. package/src/shared/shell/app-shell/examples/AppShellMarkdownFilesDemo.svelte +1 -0
  41. package/src/shared/shell/app-shell/examples/AppShellModeSwitchDemo.svelte +1 -0
  42. package/src/shared/shell/app-shell/examples/AppShellProjectSidebarDemo.svelte +1 -0
  43. package/src/shared/shell/app-shell/examples/AppShellSidebarDemo.svelte +1 -0
  44. package/src/shared/shell/app-shell/examples/AppShellToolbarDemo.svelte +1 -0
  45. package/src/shared/workspace/menu/WorkspaceContextMenuItems.svelte +2 -1
  46. package/src/shared/workspace/menu/WorkspaceMenuItems.svelte +2 -1
  47. package/src/shared/workspace/problems/ProblemsQuickFix.svelte +1 -4
  48. package/src/shared/workspace/settings/AppSettingsContent.svelte +6 -0
  49. package/src/shared/workspace/settings/AppSettingsNavigation.svelte +7 -0
  50. package/src/shared/workspace/settings/CopyableValue.svelte +81 -0
  51. package/src/shared/workspace/settings/DeclarativeSettingsSection.svelte +20 -0
  52. package/src/shared/workspace/settings/WorkspaceSettingField.svelte +110 -41
  53. package/src/shared/workspace/settings/WorkspaceSettingMultiSelect.svelte +7 -6
  54. package/src/shared/workspace/settings/WorkspaceSettingObjectTable.svelte +187 -23
  55. package/src/shared/workspace/settings/WorkspaceSettingSelect.svelte +29 -29
  56. package/src/shared/workspace/settings/WorkspaceSettings.css +190 -4
  57. package/src/shared/workspace/settings/WorkspaceSettingsStoryCustomField.svelte +2 -2
  58. package/src/shared/workspace/settings/WorkspaceSettingsStoryCustomPage.svelte +13 -0
  59. package/src/shared/workspace/settings/WorkspaceSettingsSurface.svelte +50 -0
  60. package/src/shared/workspace/settings/configuration.ts +5 -0
  61. package/src/shared/workspace/settings/copyable-value.ts +10 -0
  62. package/src/shared/workspace/settings/index.ts +5 -0
  63. package/src/shared/workspace/settings/settings-controller.svelte.ts +349 -15
  64. package/src/shared/workspace/settings/types.ts +90 -8
  65. package/src/storybook/app-shell-reference/AppShellTwoExpandedSidebarsReference.css +25 -0
  66. package/src/storybook/app-shell-reference/AppShellTwoExpandedSidebarsReference.svelte +48 -0
  67. package/src/storybook/app-shell-reference/index.ts +1 -0
@@ -45,3 +45,694 @@
45
45
  class={className}
46
46
  />
47
47
  </DropdownMenuPortal>
48
+
49
+ <style>
50
+ /* Semantic selectors must be global: they target data attributes and descendants. */
51
+ :global {
52
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
53
+ @layer properties {
54
+ }
55
+ @layer base {
56
+ @supports (not ((-webkit-appearance: -apple-pay-button))) or
57
+ (contain-intrinsic-size: 1px) {
58
+ }
59
+ }
60
+ @layer utilities {
61
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item-indicator"],
62
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item-indicator"] {
63
+ pointer-events: none;
64
+ }
65
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item-indicator"],
66
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item-indicator"] {
67
+ position: absolute;
68
+ }
69
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
70
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
71
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"] {
72
+ position: relative;
73
+ }
74
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item-indicator"],
75
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item-indicator"] {
76
+ right: calc(var(--spacing) * 2);
77
+ }
78
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"] {
79
+ z-index: 50;
80
+ }
81
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-separator"] {
82
+ margin-inline: calc(var(--spacing) * -1);
83
+ }
84
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-separator"] {
85
+ margin-block: var(--spacing);
86
+ }
87
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-shortcut"] {
88
+ margin-left: auto;
89
+ }
90
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
91
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item-indicator"],
92
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
93
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"],
94
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item-indicator"],
95
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
96
+ display: flex;
97
+ }
98
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-separator"] {
99
+ height: 1px;
100
+ }
101
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"] {
102
+ width: var(--bits-dropdown-menu-anchor-width);
103
+ }
104
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
105
+ width: auto;
106
+ }
107
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"] {
108
+ min-width: calc(var(--spacing) * 32);
109
+ }
110
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
111
+ min-width: 96px;
112
+ }
113
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
114
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
115
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"],
116
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
117
+ cursor: default;
118
+ }
119
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
120
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item-indicator"],
121
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
122
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"],
123
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item-indicator"],
124
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
125
+ align-items: center;
126
+ }
127
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item-indicator"],
128
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item-indicator"] {
129
+ justify-content: center;
130
+ }
131
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
132
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
133
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"],
134
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
135
+ gap: calc(var(--spacing) * 2);
136
+ }
137
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"] {
138
+ overflow-x: hidden;
139
+ }
140
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"] {
141
+ overflow-y: auto;
142
+ }
143
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"],
144
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
145
+ border-radius: calc(var(--radius) * 0.8);
146
+ }
147
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
148
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
149
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"],
150
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
151
+ border-radius: calc(var(--radius) * 0.6);
152
+ }
153
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-separator"] {
154
+ background-color: var(--border);
155
+ }
156
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"],
157
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
158
+ background-color: var(--ui-dropdown-menu-background, var(--popover));
159
+ }
160
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"],
161
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
162
+ padding: var(--spacing);
163
+ }
164
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-group-heading"],
165
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
166
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-label"],
167
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
168
+ padding-inline: calc(var(--spacing) * 2);
169
+ }
170
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
171
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-group-heading"],
172
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
173
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-label"],
174
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"],
175
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
176
+ padding-block: calc(var(--spacing) * 1.5);
177
+ }
178
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
179
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"] {
180
+ padding-right: calc(var(--spacing) * 8);
181
+ }
182
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
183
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"] {
184
+ padding-left: calc(var(--spacing) * 2);
185
+ }
186
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
187
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-group-heading"],
188
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
189
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"],
190
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
191
+ font-size: var(--text-sm);
192
+ line-height: var(--tw-leading, var(--text-sm--line-height));
193
+ }
194
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-label"],
195
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-shortcut"] {
196
+ font-size: var(--text-xs);
197
+ line-height: var(--tw-leading, var(--text-xs--line-height));
198
+ }
199
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-label"] {
200
+ --tw-font-weight: var(--font-weight-medium);
201
+ font-weight: var(--font-weight-medium);
202
+ }
203
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-group-heading"] {
204
+ --tw-font-weight: var(--font-weight-semibold);
205
+ font-weight: var(--font-weight-semibold);
206
+ }
207
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-shortcut"] {
208
+ --tw-tracking: var(--tracking-widest);
209
+ letter-spacing: var(--tracking-widest);
210
+ }
211
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-label"],
212
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-shortcut"] {
213
+ color: var(--muted-foreground);
214
+ }
215
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"],
216
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
217
+ color: var(--ui-dropdown-menu-foreground, var(--popover-foreground));
218
+ }
219
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
220
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a),
221
+ 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
222
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
223
+ var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
224
+ }
225
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"] {
226
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a),
227
+ 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
228
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
229
+ var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
230
+ }
231
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"],
232
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
233
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
234
+ calc(1px + var(--tw-ring-offset-width))
235
+ var(--tw-ring-color, currentcolor);
236
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
237
+ var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
238
+ }
239
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"],
240
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
241
+ --tw-ring-color: var(--foreground);
242
+ }
243
+ @supports (color: color-mix(in lab, red, red)) {
244
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"],
245
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
246
+ --tw-ring-color: color-mix(
247
+ in oklab,
248
+ var(--foreground) 10%,
249
+ transparent
250
+ );
251
+ }
252
+ }
253
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
254
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
255
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"],
256
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
257
+ --tw-outline-style: none;
258
+ outline-style: none;
259
+ }
260
+ @media (forced-colors: active) {
261
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
262
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
263
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"],
264
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
265
+ outline-offset: 2px;
266
+ outline: 2px solid #0000;
267
+ }
268
+ }
269
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"],
270
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"] {
271
+ --tw-duration: 0.1s;
272
+ transition-duration: 0.1s;
273
+ }
274
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"] {
275
+ --tw-outline-style: none;
276
+ outline-style: none;
277
+ }
278
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"],
279
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"],
280
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"],
281
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"] {
282
+ -webkit-user-select: none;
283
+ user-select: none;
284
+ }
285
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-shortcut"]:is(
286
+ :where(
287
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]
288
+ ):focus
289
+ *
290
+ ) {
291
+ color: var(--accent-foreground);
292
+ }
293
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"]:focus,
294
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]:focus,
295
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"]:focus,
296
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]:focus {
297
+ background-color: var(--accent);
298
+ }
299
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"]:focus,
300
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]:focus,
301
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"]:focus,
302
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]:focus,
303
+ :is(
304
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"]:focus
305
+ *
306
+ ),
307
+ :is(
308
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"]:focus
309
+ *
310
+ ),
311
+ :is(
312
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]:not(
313
+ [data-variant="destructive"]
314
+ ):focus
315
+ *
316
+ ),
317
+ :is(
318
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]:not(
319
+ [data-variant="destructive"]
320
+ ):focus
321
+ *
322
+ ) {
323
+ color: var(--accent-foreground);
324
+ }
325
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"][data-inset],
326
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"][data-inset],
327
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-label"][data-inset],
328
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"][data-inset],
329
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"][data-inset] {
330
+ padding-left: calc(var(--spacing) * 8);
331
+ }
332
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"][data-disabled],
333
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"][data-disabled] {
334
+ pointer-events: none;
335
+ }
336
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"][data-disabled],
337
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"][data-disabled] {
338
+ opacity: 0.5;
339
+ }
340
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-group-heading"][data-inset] {
341
+ padding-inline-start: calc(var(--spacing) * 8);
342
+ }
343
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"][data-inset],
344
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-label"][data-inset],
345
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"][data-inset] {
346
+ padding-left: calc(var(--spacing) * 8);
347
+ }
348
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"][data-side="bottom"],
349
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"][data-side="bottom"] {
350
+ --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
351
+ }
352
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"][data-side="inline-end"] {
353
+ --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
354
+ }
355
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"][data-side="inline-start"],
356
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"][data-side="left"],
357
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"][data-side="left"] {
358
+ --tw-enter-translate-x: calc(2 * var(--spacing));
359
+ }
360
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"][data-side="right"],
361
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"][data-side="right"] {
362
+ --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
363
+ }
364
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"][data-side="top"],
365
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"][data-side="top"] {
366
+ --tw-enter-translate-y: calc(2 * var(--spacing));
367
+ }
368
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"][data-variant="destructive"] {
369
+ color: var(--destructive);
370
+ }
371
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"][data-variant="destructive"]:focus {
372
+ background-color: var(--destructive);
373
+ }
374
+ @supports (color: color-mix(in lab, red, red)) {
375
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"][data-variant="destructive"]:focus {
376
+ background-color: color-mix(
377
+ in oklab,
378
+ var(--destructive) 10%,
379
+ transparent
380
+ );
381
+ }
382
+ }
383
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"][data-variant="destructive"]:focus {
384
+ color: var(--destructive);
385
+ }
386
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]:is(
387
+ :global(.dark) *
388
+ )[data-variant="destructive"]:focus {
389
+ background-color: var(--destructive);
390
+ }
391
+ @supports (color: color-mix(in lab, red, red)) {
392
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]:is(
393
+ :global(.dark) *
394
+ )[data-variant="destructive"]:focus {
395
+ background-color: color-mix(
396
+ in oklab,
397
+ var(--destructive) 20%,
398
+ transparent
399
+ );
400
+ }
401
+ }
402
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
403
+ [data-state="open"]
404
+ ),
405
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
406
+ [data-state="open"]
407
+ ),
408
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
409
+ [data-open]:not([data-open="false"])
410
+ ),
411
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
412
+ [data-open]:not([data-open="false"])
413
+ ) {
414
+ animation: enter var(--tw-animation-duration, var(--tw-duration, 0.15s))
415
+ var(--tw-ease, ease) var(--tw-animation-delay, 0s)
416
+ var(--tw-animation-iteration-count, 1)
417
+ var(--tw-animation-direction, normal)
418
+ var(--tw-animation-fill-mode, none);
419
+ }
420
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]:where(
421
+ [data-state="open"]
422
+ ),
423
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]:where(
424
+ [data-open]:not([data-open="false"])
425
+ ) {
426
+ background-color: var(--accent);
427
+ }
428
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]:where(
429
+ [data-state="open"]
430
+ ),
431
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]:where(
432
+ [data-open]:not([data-open="false"])
433
+ ) {
434
+ color: var(--accent-foreground);
435
+ }
436
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
437
+ [data-state="open"]
438
+ ),
439
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
440
+ [data-state="open"]
441
+ ),
442
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
443
+ [data-open]:not([data-open="false"])
444
+ ),
445
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
446
+ [data-open]:not([data-open="false"])
447
+ ) {
448
+ --tw-enter-opacity: 0;
449
+ }
450
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
451
+ [data-state="open"]
452
+ ),
453
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
454
+ [data-state="open"]
455
+ ),
456
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
457
+ [data-open]:not([data-open="false"])
458
+ ),
459
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
460
+ [data-open]:not([data-open="false"])
461
+ ) {
462
+ --tw-enter-scale: 0.95;
463
+ }
464
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
465
+ [data-state="closed"]
466
+ ),
467
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
468
+ [data-state="closed"]
469
+ ),
470
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
471
+ [data-closed]:not([data-closed="false"])
472
+ ),
473
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
474
+ [data-closed]:not([data-closed="false"])
475
+ ) {
476
+ animation: exit var(--tw-animation-duration, var(--tw-duration, 0.15s))
477
+ var(--tw-ease, ease) var(--tw-animation-delay, 0s)
478
+ var(--tw-animation-iteration-count, 1)
479
+ var(--tw-animation-direction, normal)
480
+ var(--tw-animation-fill-mode, none);
481
+ }
482
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
483
+ [data-state="closed"]
484
+ ),
485
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
486
+ [data-closed]:not([data-closed="false"])
487
+ ) {
488
+ overflow: hidden;
489
+ }
490
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
491
+ [data-state="closed"]
492
+ ),
493
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
494
+ [data-state="closed"]
495
+ ),
496
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
497
+ [data-closed]:not([data-closed="false"])
498
+ ),
499
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
500
+ [data-closed]:not([data-closed="false"])
501
+ ) {
502
+ --tw-exit-opacity: 0;
503
+ }
504
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
505
+ [data-state="closed"]
506
+ ),
507
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
508
+ [data-state="closed"]
509
+ ),
510
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-content"]:where(
511
+ [data-closed]:not([data-closed="false"])
512
+ ),
513
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-content"]:where(
514
+ [data-closed]:not([data-closed="false"])
515
+ ) {
516
+ --tw-exit-scale: 0.95;
517
+ }
518
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]:where(
519
+ [data-disabled="true"]
520
+ ),
521
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]:where(
522
+ [data-disabled]:not([data-disabled="false"])
523
+ ) {
524
+ pointer-events: none;
525
+ }
526
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]:where(
527
+ [data-disabled="true"]
528
+ ),
529
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]:where(
530
+ [data-disabled]:not([data-disabled="false"])
531
+ ) {
532
+ opacity: 0.5;
533
+ }
534
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"]
535
+ svg,
536
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]
537
+ svg,
538
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"]
539
+ svg,
540
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]
541
+ svg {
542
+ pointer-events: none;
543
+ }
544
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"]
545
+ svg,
546
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]
547
+ svg,
548
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"]
549
+ svg,
550
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]
551
+ svg {
552
+ flex-shrink: 0;
553
+ }
554
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-checkbox-item"]
555
+ svg:not([class*="size-"]),
556
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"]
557
+ svg:not([class*="size-"]),
558
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-radio-item"]
559
+ svg:not([class*="size-"]),
560
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]
561
+ svg:not([class*="size-"]) {
562
+ width: calc(var(--spacing) * 4);
563
+ height: calc(var(--spacing) * 4);
564
+ }
565
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-sub-trigger"]
566
+ svg {
567
+ margin-inline-start: auto;
568
+ }
569
+ :is(
570
+ [data-ui-component="dropdown-menu"][data-ui-part="dropdown-menu-item"][data-variant="destructive"]
571
+ > *
572
+ ):is(svg) {
573
+ color: var(--destructive);
574
+ }
575
+ }
576
+ @property --tw-animation-delay {
577
+ syntax: "*";
578
+ inherits: false;
579
+ initial-value: 0s;
580
+ }
581
+ @property --tw-animation-direction {
582
+ syntax: "*";
583
+ inherits: false;
584
+ initial-value: normal;
585
+ }
586
+ @property --tw-animation-duration {
587
+ syntax: "*";
588
+ inherits: false;
589
+ }
590
+ @property --tw-animation-fill-mode {
591
+ syntax: "*";
592
+ inherits: false;
593
+ initial-value: none;
594
+ }
595
+ @property --tw-animation-iteration-count {
596
+ syntax: "*";
597
+ inherits: false;
598
+ initial-value: 1;
599
+ }
600
+ @property --tw-enter-blur {
601
+ syntax: "*";
602
+ inherits: false;
603
+ initial-value: 0;
604
+ }
605
+ @property --tw-enter-opacity {
606
+ syntax: "*";
607
+ inherits: false;
608
+ initial-value: 1;
609
+ }
610
+ @property --tw-enter-rotate {
611
+ syntax: "*";
612
+ inherits: false;
613
+ initial-value: 0;
614
+ }
615
+ @property --tw-enter-scale {
616
+ syntax: "*";
617
+ inherits: false;
618
+ initial-value: 1;
619
+ }
620
+ @property --tw-enter-translate-x {
621
+ syntax: "*";
622
+ inherits: false;
623
+ initial-value: 0;
624
+ }
625
+ @property --tw-enter-translate-y {
626
+ syntax: "*";
627
+ inherits: false;
628
+ initial-value: 0;
629
+ }
630
+ @property --tw-exit-blur {
631
+ syntax: "*";
632
+ inherits: false;
633
+ initial-value: 0;
634
+ }
635
+ @property --tw-exit-opacity {
636
+ syntax: "*";
637
+ inherits: false;
638
+ initial-value: 1;
639
+ }
640
+ @property --tw-exit-rotate {
641
+ syntax: "*";
642
+ inherits: false;
643
+ initial-value: 0;
644
+ }
645
+ @property --tw-exit-scale {
646
+ syntax: "*";
647
+ inherits: false;
648
+ initial-value: 1;
649
+ }
650
+ @property --tw-exit-translate-x {
651
+ syntax: "*";
652
+ inherits: false;
653
+ initial-value: 0;
654
+ }
655
+ @property --tw-exit-translate-y {
656
+ syntax: "*";
657
+ inherits: false;
658
+ initial-value: 0;
659
+ }
660
+ @property --tw-font-weight {
661
+ syntax: "*";
662
+ inherits: false;
663
+ }
664
+ @property --tw-tracking {
665
+ syntax: "*";
666
+ inherits: false;
667
+ }
668
+ @property --tw-shadow {
669
+ syntax: "*";
670
+ inherits: false;
671
+ initial-value: 0 0 #0000;
672
+ }
673
+ @property --tw-shadow-color {
674
+ syntax: "*";
675
+ inherits: false;
676
+ }
677
+ @property --tw-shadow-alpha {
678
+ syntax: "<percentage>";
679
+ inherits: false;
680
+ initial-value: 100%;
681
+ }
682
+ @property --tw-inset-shadow {
683
+ syntax: "*";
684
+ inherits: false;
685
+ initial-value: 0 0 #0000;
686
+ }
687
+ @property --tw-inset-shadow-color {
688
+ syntax: "*";
689
+ inherits: false;
690
+ }
691
+ @property --tw-inset-shadow-alpha {
692
+ syntax: "<percentage>";
693
+ inherits: false;
694
+ initial-value: 100%;
695
+ }
696
+ @property --tw-ring-color {
697
+ syntax: "*";
698
+ inherits: false;
699
+ }
700
+ @property --tw-ring-shadow {
701
+ syntax: "*";
702
+ inherits: false;
703
+ initial-value: 0 0 #0000;
704
+ }
705
+ @property --tw-inset-ring-color {
706
+ syntax: "*";
707
+ inherits: false;
708
+ }
709
+ @property --tw-inset-ring-shadow {
710
+ syntax: "*";
711
+ inherits: false;
712
+ initial-value: 0 0 #0000;
713
+ }
714
+ @property --tw-ring-inset {
715
+ syntax: "*";
716
+ inherits: false;
717
+ }
718
+ @property --tw-ring-offset-width {
719
+ syntax: "<length>";
720
+ inherits: false;
721
+ initial-value: 0;
722
+ }
723
+ @property --tw-ring-offset-color {
724
+ syntax: "*";
725
+ inherits: false;
726
+ initial-value: #fff;
727
+ }
728
+ @property --tw-ring-offset-shadow {
729
+ syntax: "*";
730
+ inherits: false;
731
+ initial-value: 0 0 #0000;
732
+ }
733
+ @property --tw-duration {
734
+ syntax: "*";
735
+ inherits: false;
736
+ }
737
+ }
738
+ </style>