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