@threadlabs/looma 0.5.1 → 0.6.0-rc.1

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 (341) hide show
  1. package/README.md +1 -1
  2. package/components/shared/overlay.js +3 -0
  3. package/components/ui-button/ui-button.html +27 -14
  4. package/components/ui-callout/ui-callout.html +1 -1
  5. package/components/ui-checkbox/ui-checkbox.html +1 -1
  6. package/components/ui-cluster/ui-cluster.html +6 -6
  7. package/components/ui-combobox/ui-combobox.html +35 -27
  8. package/components/ui-container/ui-container.html +4 -4
  9. package/components/ui-context-menu/ui-context-menu.html +2 -2
  10. package/components/ui-dialog/ui-dialog.html +21 -8
  11. package/components/ui-disclosure/ui-disclosure.html +19 -4
  12. package/components/ui-editable/ui-editable.html +6 -6
  13. package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html +21 -21
  14. package/components/ui-editor-mention-menu/ui-editor-mention-menu.html +26 -26
  15. package/components/ui-editor-slash-menu/ui-editor-slash-menu.html +39 -39
  16. package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html +26 -22
  17. package/components/ui-editor-table-overlay/ui-editor-table-overlay.html +68 -52
  18. package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html +42 -38
  19. package/components/ui-editor-toolbar/ui-editor-toolbar.html +9 -9
  20. package/components/ui-floating-action-button/ui-floating-action-button.html +16 -22
  21. package/components/ui-form-field/ui-form-field.html +18 -7
  22. package/components/ui-grid/ui-grid.html +6 -6
  23. package/components/ui-icon/ui-icon.html +5 -1
  24. package/components/ui-icon-button/ui-icon-button.html +68 -34
  25. package/components/ui-input/ui-input.html +2 -2
  26. package/components/ui-menu/ui-menu.html +15 -4
  27. package/components/ui-menu-item/ui-menu-item.html +5 -5
  28. package/components/ui-popover/ui-popover.html +3 -3
  29. package/components/ui-popover/ui-popover.js +10 -2
  30. package/components/ui-reel/ui-reel.html +6 -6
  31. package/components/ui-search-result-row/ui-search-result-row.html +9 -9
  32. package/components/ui-search-shell/ui-search-shell.html +10 -3
  33. package/components/ui-search-shell/ui-search-shell.js +9 -0
  34. package/components/ui-select/ui-select.html +2 -2
  35. package/components/ui-sidebar/ui-sidebar.html +11 -11
  36. package/components/ui-stack/ui-stack.html +6 -6
  37. package/components/ui-switcher/ui-switcher.html +6 -6
  38. package/components/ui-tabs/ui-tabs.html +19 -5
  39. package/components/ui-textarea/ui-textarea.html +2 -2
  40. package/components/ui-toast-region/ui-toast-region.html +3 -3
  41. package/components/ui-tooltip/ui-tooltip.html +1 -1
  42. package/components/ui-top-bar/ui-top-bar.html +5 -5
  43. package/components/ui-tree/ui-tree.html +7 -0
  44. package/components/ui-tree-item/ui-tree-item.html +20 -7
  45. package/dist/index.d.ts +1 -1
  46. package/dist/index.js +2 -2
  47. package/package.json +2 -2
  48. package/styles/ui-affordance-scope.css +1 -1
  49. package/styles/ui-avatar-group.css +1 -1
  50. package/styles/ui-avatar.css +1 -1
  51. package/styles/ui-badge.css +1 -1
  52. package/styles/ui-button.css +25 -15
  53. package/styles/ui-callout.css +2 -2
  54. package/styles/ui-checkbox.css +2 -2
  55. package/styles/ui-cluster.css +7 -7
  56. package/styles/ui-combobox.css +24 -24
  57. package/styles/ui-container.css +5 -5
  58. package/styles/ui-context-menu.css +3 -3
  59. package/styles/ui-dialog.css +26 -9
  60. package/styles/ui-disclosure.css +23 -7
  61. package/styles/ui-editable.css +7 -7
  62. package/styles/ui-editor-insert-table-grid.css +21 -21
  63. package/styles/ui-editor-mention-menu.css +26 -26
  64. package/styles/ui-editor-slash-menu.css +40 -40
  65. package/styles/ui-editor-table-context-menu.css +21 -21
  66. package/styles/ui-editor-table-overlay.css +49 -49
  67. package/styles/ui-editor-table-toolbar.css +35 -35
  68. package/styles/ui-editor-toolbar.css +10 -10
  69. package/styles/ui-floating-action-button.css +17 -23
  70. package/styles/ui-form-field.css +24 -10
  71. package/styles/ui-grid.css +7 -7
  72. package/styles/ui-icon-button.css +74 -35
  73. package/styles/ui-icon.css +1 -1
  74. package/styles/ui-input.css +3 -3
  75. package/styles/ui-menu-item.css +6 -6
  76. package/styles/ui-menu.css +19 -7
  77. package/styles/ui-popover.css +4 -4
  78. package/styles/ui-radio-group.css +1 -1
  79. package/styles/ui-radio.css +1 -1
  80. package/styles/ui-reel.css +7 -7
  81. package/styles/ui-search-result-row.css +10 -10
  82. package/styles/ui-search-shell.css +14 -5
  83. package/styles/ui-select.css +3 -3
  84. package/styles/ui-separator.css +1 -1
  85. package/styles/ui-sidebar.css +12 -12
  86. package/styles/ui-stack.css +7 -7
  87. package/styles/ui-switch.css +1 -1
  88. package/styles/ui-switcher.css +7 -7
  89. package/styles/ui-tabs.css +21 -7
  90. package/styles/ui-textarea.css +3 -3
  91. package/styles/ui-toast-region.css +3 -3
  92. package/styles/ui-tooltip.css +2 -2
  93. package/styles/ui-top-bar.css +6 -6
  94. package/styles/ui-tree-item.css +30 -9
  95. package/styles/ui-tree.css +8 -2
  96. package/theme-dark.css +42 -103
  97. package/theme-high-contrast.css +18 -22
  98. package/theme-light.css +15 -41
  99. package/tokens.css +149 -201
  100. package/vanilla/UiAffordanceScope.d.ts +1 -1
  101. package/vanilla/UiAffordanceScope.js +2 -2
  102. package/vanilla/UiAvatar.d.ts +1 -1
  103. package/vanilla/UiAvatar.js +2 -2
  104. package/vanilla/UiAvatarGroup.d.ts +1 -1
  105. package/vanilla/UiAvatarGroup.js +2 -2
  106. package/vanilla/UiBadge.d.ts +1 -1
  107. package/vanilla/UiBadge.js +2 -2
  108. package/vanilla/UiButton.d.ts +3 -1
  109. package/vanilla/UiButton.js +3 -3
  110. package/vanilla/UiCallout.d.ts +1 -1
  111. package/vanilla/UiCallout.js +2 -2
  112. package/vanilla/UiCheckbox.d.ts +1 -1
  113. package/vanilla/UiCheckbox.js +2 -2
  114. package/vanilla/UiCluster.d.ts +1 -1
  115. package/vanilla/UiCluster.js +2 -2
  116. package/vanilla/UiCombobox.d.ts +1 -1
  117. package/vanilla/UiCombobox.js +3 -3
  118. package/vanilla/UiContainer.d.ts +1 -1
  119. package/vanilla/UiContainer.js +2 -2
  120. package/vanilla/UiContextMenu.d.ts +1 -1
  121. package/vanilla/UiContextMenu.js +2 -2
  122. package/vanilla/UiDialog.d.ts +1 -1
  123. package/vanilla/UiDialog.js +2 -2
  124. package/vanilla/UiDisclosure.d.ts +2 -1
  125. package/vanilla/UiDisclosure.js +3 -3
  126. package/vanilla/UiEditable.d.ts +1 -1
  127. package/vanilla/UiEditable.js +2 -2
  128. package/vanilla/UiEditorInsertTableGrid.d.ts +1 -1
  129. package/vanilla/UiEditorInsertTableGrid.js +3 -3
  130. package/vanilla/UiEditorMentionMenu.d.ts +1 -1
  131. package/vanilla/UiEditorMentionMenu.js +3 -3
  132. package/vanilla/UiEditorSlashMenu.d.ts +1 -1
  133. package/vanilla/UiEditorSlashMenu.js +2 -2
  134. package/vanilla/UiEditorTableContextMenu.d.ts +1 -1
  135. package/vanilla/UiEditorTableContextMenu.js +3 -3
  136. package/vanilla/UiEditorTableOverlay.d.ts +1 -1
  137. package/vanilla/UiEditorTableOverlay.js +3 -3
  138. package/vanilla/UiEditorTableToolbar.d.ts +1 -1
  139. package/vanilla/UiEditorTableToolbar.js +3 -3
  140. package/vanilla/UiEditorToolbar.d.ts +1 -1
  141. package/vanilla/UiEditorToolbar.js +2 -2
  142. package/vanilla/UiFloatingActionButton.d.ts +1 -1
  143. package/vanilla/UiFloatingActionButton.js +2 -2
  144. package/vanilla/UiFormField.d.ts +1 -1
  145. package/vanilla/UiFormField.js +15 -6
  146. package/vanilla/UiGrid.d.ts +1 -1
  147. package/vanilla/UiGrid.js +2 -2
  148. package/vanilla/UiIcon.d.ts +1 -1
  149. package/vanilla/UiIcon.js +3 -3
  150. package/vanilla/UiIconButton.d.ts +1 -1
  151. package/vanilla/UiIconButton.js +2 -2
  152. package/vanilla/UiInput.d.ts +1 -1
  153. package/vanilla/UiInput.js +2 -2
  154. package/vanilla/UiMenu.d.ts +2 -1
  155. package/vanilla/UiMenu.js +3 -3
  156. package/vanilla/UiMenuItem.d.ts +1 -1
  157. package/vanilla/UiMenuItem.js +2 -2
  158. package/vanilla/UiPopover.d.ts +1 -1
  159. package/vanilla/UiPopover.js +2 -2
  160. package/vanilla/UiRadio.d.ts +1 -1
  161. package/vanilla/UiRadio.js +2 -2
  162. package/vanilla/UiRadioGroup.d.ts +1 -1
  163. package/vanilla/UiRadioGroup.js +2 -2
  164. package/vanilla/UiReel.d.ts +1 -1
  165. package/vanilla/UiReel.js +2 -2
  166. package/vanilla/UiSearchResultRow.d.ts +1 -1
  167. package/vanilla/UiSearchResultRow.js +2 -2
  168. package/vanilla/UiSearchShell.d.ts +1 -1
  169. package/vanilla/UiSearchShell.js +2 -2
  170. package/vanilla/UiSelect.d.ts +1 -1
  171. package/vanilla/UiSelect.js +2 -2
  172. package/vanilla/UiSeparator.d.ts +1 -1
  173. package/vanilla/UiSeparator.js +2 -2
  174. package/vanilla/UiSidebar.d.ts +1 -1
  175. package/vanilla/UiSidebar.js +2 -2
  176. package/vanilla/UiStack.d.ts +1 -1
  177. package/vanilla/UiStack.js +2 -2
  178. package/vanilla/UiSwitch.d.ts +1 -1
  179. package/vanilla/UiSwitch.js +2 -2
  180. package/vanilla/UiSwitcher.d.ts +1 -1
  181. package/vanilla/UiSwitcher.js +2 -2
  182. package/vanilla/UiTabs.d.ts +2 -1
  183. package/vanilla/UiTabs.js +3 -3
  184. package/vanilla/UiTextarea.d.ts +1 -1
  185. package/vanilla/UiTextarea.js +2 -2
  186. package/vanilla/UiToastRegion.d.ts +1 -1
  187. package/vanilla/UiToastRegion.js +3 -3
  188. package/vanilla/UiTooltip.d.ts +1 -1
  189. package/vanilla/UiTooltip.js +2 -2
  190. package/vanilla/UiTopBar.d.ts +1 -1
  191. package/vanilla/UiTopBar.js +1 -1
  192. package/vanilla/UiTree.d.ts +2 -1
  193. package/vanilla/UiTree.js +3 -3
  194. package/vanilla/UiTreeItem.d.ts +1 -1
  195. package/vanilla/UiTreeItem.js +2 -2
  196. package/vue/UiAffordanceScope.d.ts +2 -2
  197. package/vue/UiAffordanceScope.vue +92 -73
  198. package/vue/UiAvatar.d.ts +7 -7
  199. package/vue/UiAvatar.vue +145 -105
  200. package/vue/UiAvatarGroup.d.ts +4 -4
  201. package/vue/UiAvatarGroup.vue +134 -118
  202. package/vue/UiBadge.d.ts +4 -4
  203. package/vue/UiBadge.vue +113 -114
  204. package/vue/UiButton.d.ts +10 -6
  205. package/vue/UiButton.vue +295 -248
  206. package/vue/UiCallout.d.ts +2 -2
  207. package/vue/UiCallout.vue +154 -87
  208. package/vue/UiCheckbox.d.ts +14 -10
  209. package/vue/UiCheckbox.vue +228 -162
  210. package/vue/UiCluster.d.ts +2 -2
  211. package/vue/UiCluster.vue +53 -60
  212. package/vue/UiCombobox.d.ts +36 -32
  213. package/vue/UiCombobox.vue +1005 -416
  214. package/vue/UiContainer.d.ts +2 -2
  215. package/vue/UiContainer.vue +48 -51
  216. package/vue/UiContextMenu.d.ts +6 -4
  217. package/vue/UiContextMenu.vue +205 -116
  218. package/vue/UiDialog.d.ts +11 -9
  219. package/vue/UiDialog.vue +287 -212
  220. package/vue/UiDisclosure.d.ts +10 -6
  221. package/vue/UiDisclosure.vue +265 -159
  222. package/vue/UiEditable.d.ts +16 -12
  223. package/vue/UiEditable.vue +325 -205
  224. package/vue/UiEditorInsertTableGrid.d.ts +8 -8
  225. package/vue/UiEditorInsertTableGrid.vue +216 -157
  226. package/vue/UiEditorMentionMenu.d.ts +9 -9
  227. package/vue/UiEditorMentionMenu.vue +265 -222
  228. package/vue/UiEditorSlashMenu.d.ts +7 -7
  229. package/vue/UiEditorSlashMenu.vue +286 -240
  230. package/vue/UiEditorTableContextMenu.d.ts +5 -5
  231. package/vue/UiEditorTableContextMenu.vue +306 -193
  232. package/vue/UiEditorTableOverlay.d.ts +2 -2
  233. package/vue/UiEditorTableOverlay.vue +600 -369
  234. package/vue/UiEditorTableToolbar.d.ts +7 -7
  235. package/vue/UiEditorTableToolbar.vue +443 -268
  236. package/vue/UiEditorToolbar.d.ts +2 -2
  237. package/vue/UiEditorToolbar.vue +134 -121
  238. package/vue/UiFloatingActionButton.d.ts +6 -6
  239. package/vue/UiFloatingActionButton.vue +95 -99
  240. package/vue/UiFormField.d.ts +6 -6
  241. package/vue/UiFormField.vue +112 -80
  242. package/vue/UiGrid.d.ts +2 -2
  243. package/vue/UiGrid.vue +51 -57
  244. package/vue/UiIcon.d.ts +2 -2
  245. package/vue/UiIcon.vue +118 -89
  246. package/vue/UiIconButton.d.ts +11 -11
  247. package/vue/UiIconButton.vue +287 -217
  248. package/vue/UiInput.d.ts +9 -9
  249. package/vue/UiInput.vue +153 -127
  250. package/vue/UiMenu.d.ts +10 -6
  251. package/vue/UiMenu.vue +227 -143
  252. package/vue/UiMenuItem.d.ts +4 -4
  253. package/vue/UiMenuItem.vue +53 -46
  254. package/vue/UiPopover.d.ts +8 -6
  255. package/vue/UiPopover.vue +197 -137
  256. package/vue/UiRadio.d.ts +14 -10
  257. package/vue/UiRadio.vue +183 -117
  258. package/vue/UiRadioGroup.d.ts +14 -12
  259. package/vue/UiRadioGroup.vue +172 -111
  260. package/vue/UiReel.d.ts +3 -3
  261. package/vue/UiReel.vue +77 -77
  262. package/vue/UiSearchResultRow.d.ts +4 -4
  263. package/vue/UiSearchResultRow.vue +121 -115
  264. package/vue/UiSearchShell.d.ts +10 -8
  265. package/vue/UiSearchShell.vue +245 -176
  266. package/vue/UiSelect.d.ts +9 -9
  267. package/vue/UiSelect.vue +162 -134
  268. package/vue/UiSeparator.d.ts +2 -2
  269. package/vue/UiSeparator.vue +22 -27
  270. package/vue/UiSidebar.d.ts +20 -18
  271. package/vue/UiSidebar.vue +307 -224
  272. package/vue/UiStack.d.ts +3 -3
  273. package/vue/UiStack.vue +64 -70
  274. package/vue/UiSwitch.d.ts +12 -8
  275. package/vue/UiSwitch.vue +218 -150
  276. package/vue/UiSwitcher.d.ts +3 -3
  277. package/vue/UiSwitcher.vue +73 -75
  278. package/vue/UiTabs.d.ts +12 -8
  279. package/vue/UiTabs.vue +268 -210
  280. package/vue/UiTextarea.d.ts +11 -11
  281. package/vue/UiTextarea.vue +155 -128
  282. package/vue/UiToastRegion.d.ts +10 -8
  283. package/vue/UiToastRegion.vue +261 -198
  284. package/vue/UiTooltip.d.ts +14 -12
  285. package/vue/UiTooltip.vue +241 -177
  286. package/vue/UiTopBar.vue +51 -42
  287. package/vue/UiTree.d.ts +10 -6
  288. package/vue/UiTree.vue +180 -70
  289. package/vue/UiTreeItem.d.ts +24 -22
  290. package/vue/UiTreeItem.vue +464 -339
  291. package/vue/chunks/UiAffordanceScope.js +9 -16
  292. package/vue/chunks/UiAvatar.js +23 -29
  293. package/vue/chunks/UiAvatarGroup.js +16 -39
  294. package/vue/chunks/UiBadge.js +3 -12
  295. package/vue/chunks/UiButton.js +15 -18
  296. package/vue/chunks/UiCallout.js +8 -17
  297. package/vue/chunks/UiCheckbox.js +37 -40
  298. package/vue/chunks/UiCluster.js +3 -12
  299. package/vue/chunks/UiCombobox.js +224 -266
  300. package/vue/chunks/UiContainer.js +3 -12
  301. package/vue/chunks/UiContextMenu.js +39 -34
  302. package/vue/chunks/UiDialog.js +36 -39
  303. package/vue/chunks/UiDisclosure.js +44 -48
  304. package/vue/chunks/UiEditable.js +55 -57
  305. package/vue/chunks/UiEditorInsertTableGrid.js +55 -73
  306. package/vue/chunks/UiEditorMentionMenu.js +40 -81
  307. package/vue/chunks/UiEditorSlashMenu.js +28 -52
  308. package/vue/chunks/UiEditorTableContextMenu.js +32 -56
  309. package/vue/chunks/UiEditorTableOverlay.js +58 -82
  310. package/vue/chunks/UiEditorTableToolbar.js +61 -85
  311. package/vue/chunks/UiEditorToolbar.js +4 -13
  312. package/vue/chunks/UiFloatingActionButton.js +7 -21
  313. package/vue/chunks/UiFormField.js +15 -12
  314. package/vue/chunks/UiGrid.js +3 -12
  315. package/vue/chunks/UiIcon.js +20 -43
  316. package/vue/chunks/UiIconButton.js +16 -28
  317. package/vue/chunks/UiInput.js +20 -25
  318. package/vue/chunks/UiMenu.js +30 -33
  319. package/vue/chunks/UiMenuItem.js +4 -10
  320. package/vue/chunks/UiPopover.js +28 -29
  321. package/vue/chunks/UiRadio.js +36 -39
  322. package/vue/chunks/UiRadioGroup.js +30 -34
  323. package/vue/chunks/UiReel.js +6 -15
  324. package/vue/chunks/UiSearchResultRow.js +6 -19
  325. package/vue/chunks/UiSearchShell.js +25 -28
  326. package/vue/chunks/UiSelect.js +20 -23
  327. package/vue/chunks/UiSeparator.js +2 -8
  328. package/vue/chunks/UiSidebar.js +39 -44
  329. package/vue/chunks/UiStack.js +6 -15
  330. package/vue/chunks/UiSwitch.js +35 -38
  331. package/vue/chunks/UiSwitcher.js +6 -15
  332. package/vue/chunks/UiTabs.js +52 -85
  333. package/vue/chunks/UiTextarea.js +21 -26
  334. package/vue/chunks/UiToastRegion.js +38 -72
  335. package/vue/chunks/UiTooltip.js +34 -35
  336. package/vue/chunks/UiTopBar.js +1 -1
  337. package/vue/chunks/UiTree.js +27 -16
  338. package/vue/chunks/UiTreeItem.js +85 -102
  339. package/vue/components.css +4027 -3800
  340. package/vue/editor/LoomaEditor.d.ts +11 -0
  341. package/vue/editor/index.js +9 -0
package/styles/ui-editor-insert-table-grid.css CHANGED
@@ -1,17 +1,17 @@
1
- /* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
2
2
  @scope ([data-component~="ui-editor-insert-table-grid"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
- padding: var(--ui-space-3, 12px);
5
- background: var(--ui-surface, #fff);
6
- border: 1px solid var(--ui-border, #e5e7eb);
7
- border-radius: var(--ui-radius-md, 6px);
4
+ padding: var(--ui-space-3);
5
+ background: var(--ui-surface);
6
+ border: 1px solid var(--ui-border);
7
+ border-radius: var(--ui-radius-md);
8
8
  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
9
9
  }
10
10
 
11
11
  .hint {
12
- margin: 0 0 var(--ui-space-2, 8px);
13
- font-size: var(--ui-text-sm, 0.875rem);
14
- color: var(--ui-text-muted, #6b7280);
12
+ margin: 0 0 var(--ui-space-2);
13
+ font-size: var(--ui-font-size-sm);
14
+ color: var(--ui-text-muted);
15
15
  }
16
16
 
17
17
  .grid {
@@ -19,39 +19,39 @@
19
19
  grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
20
20
  grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
21
21
  gap: 2px;
22
- margin-bottom: var(--ui-space-2, 8px);
22
+ margin-bottom: var(--ui-space-2);
23
23
  }
24
24
 
25
25
  .cell {
26
26
  width: 1.25rem;
27
27
  height: 1.25rem;
28
28
  padding: 0;
29
- border: 1px solid var(--ui-border, #e5e7eb);
29
+ border: 1px solid var(--ui-border);
30
30
  border-radius: 2px;
31
- background: var(--ui-surface, #fff);
31
+ background: var(--ui-surface);
32
32
  cursor: pointer;
33
33
  }
34
34
 
35
35
  .cell.selected {
36
- background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
37
- border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
36
+ background: var(--ui-accent-solid, var(--ui-accent));
37
+ border-color: var(--ui-accent-solid, var(--ui-accent));
38
38
  }
39
39
 
40
40
  .header {
41
41
  display: block;
42
- margin-bottom: var(--ui-space-2, 8px);
43
- font-size: var(--ui-text-sm, 0.875rem);
42
+ margin-bottom: var(--ui-space-2);
43
+ font-size: var(--ui-font-size-sm);
44
44
  cursor: pointer;
45
45
  }
46
46
 
47
47
  :scope .insert {
48
48
  width: 100%;
49
- padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
50
- border: 1px solid var(--ui-border, #e5e7eb);
51
- border-radius: var(--ui-radius-sm, 4px);
52
- background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
53
- color: var(--ui-accent-contrast, #fff);
54
- font-size: var(--ui-text-sm, 0.875rem);
49
+ padding: var(--ui-space-2) var(--ui-space-3);
50
+ border: 1px solid var(--ui-border);
51
+ border-radius: var(--ui-radius-sm);
52
+ background: var(--ui-accent-solid, var(--ui-accent));
53
+ color: var(--ui-accent-contrast);
54
+ font-size: var(--ui-font-size-sm);
55
55
  cursor: pointer;
56
56
  }
57
57
 
package/styles/ui-editor-mention-menu.css CHANGED
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
2
2
  @scope ([data-component~="ui-editor-mention-menu"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  user-select: none;
@@ -8,9 +8,9 @@
8
8
  display: flex;
9
9
  overflow: hidden;
10
10
  flex-direction: column;
11
- background: var(--ui-surface, #fff);
12
- border: 1px solid var(--ui-border, #e5e7eb);
13
- border-radius: var(--ui-radius-xl, 1rem);
11
+ background: var(--ui-surface);
12
+ border: 1px solid var(--ui-border);
13
+ border-radius: var(--ui-radius-dialog);
14
14
  box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
15
15
  }
16
16
 
@@ -18,25 +18,25 @@
18
18
  display: flex;
19
19
  align-items: center;
20
20
  justify-content: space-between;
21
- gap: var(--ui-space-3, 12px);
22
- padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
23
- color: var(--ui-text-secondary, #4b5563);
24
- border-bottom: 1px solid var(--ui-border, #e5e7eb);
25
- font-size: var(--ui-font-size-xs, 0.75rem);
26
- font-weight: var(--ui-font-semibold, 600);
21
+ gap: var(--ui-space-3);
22
+ padding: var(--ui-space-2) var(--ui-space-3);
23
+ color: var(--ui-text-secondary);
24
+ border-bottom: 1px solid var(--ui-border);
25
+ font-size: var(--ui-font-size-xs);
26
+ font-weight: var(--ui-font-semibold);
27
27
  }
28
28
 
29
29
  .hint {
30
30
  overflow: hidden;
31
- color: var(--ui-text-muted, #6b7280);
32
- font-weight: var(--ui-font-normal, 400);
31
+ color: var(--ui-text-muted);
32
+ font-weight: var(--ui-font-normal);
33
33
  text-overflow: ellipsis;
34
34
  white-space: nowrap;
35
35
  }
36
36
 
37
37
  .list {
38
38
  max-height: 280px;
39
- padding: var(--ui-space-1, 4px) 0;
39
+ padding: var(--ui-space-1) 0;
40
40
  margin: 0;
41
41
  overflow-y: auto;
42
42
  overscroll-behavior: contain;
@@ -47,8 +47,8 @@
47
47
  display: flex;
48
48
  align-items: center;
49
49
  min-height: 44px;
50
- padding: var(--ui-space-1-5, 6px) var(--ui-space-3, 12px);
51
- gap: var(--ui-space-3, 12px);
50
+ padding: var(--ui-space-2) var(--ui-space-3);
51
+ gap: var(--ui-space-3);
52
52
  cursor: pointer;
53
53
  }
54
54
 
@@ -63,11 +63,11 @@
63
63
  width: 32px;
64
64
  height: 32px;
65
65
  flex: 0 0 auto;
66
- color: var(--ui-accent-active, var(--ui-accent-solid, #2563eb));
67
- background: var(--ui-accent-soft, var(--ui-accent-subtle, #eff6ff));
66
+ color: var(--ui-accent-active, var(--ui-accent-solid));
67
+ background: var(--ui-accent-soft, var(--ui-accent-subtle));
68
68
  border-radius: 999px;
69
- font-size: var(--ui-font-size-xs, 0.75rem);
70
- font-weight: var(--ui-font-semibold, 600);
69
+ font-size: var(--ui-font-size-xs);
70
+ font-weight: var(--ui-font-semibold);
71
71
  }
72
72
 
73
73
  .body {
@@ -84,26 +84,26 @@
84
84
  }
85
85
 
86
86
  .label {
87
- color: var(--ui-text-primary, #111827);
88
- font-size: var(--ui-font-size-sm, 0.875rem);
89
- font-weight: var(--ui-font-medium, 500);
87
+ color: var(--ui-text-primary);
88
+ font-size: var(--ui-font-size-sm);
89
+ font-weight: var(--ui-font-medium);
90
90
  }
91
91
 
92
92
  .detail,
93
93
  .loading {
94
- color: var(--ui-text-muted, #6b7280);
95
- font-size: var(--ui-font-size-xs, 0.75rem);
94
+ color: var(--ui-text-muted);
95
+ font-size: var(--ui-font-size-xs);
96
96
  }
97
97
 
98
98
  .loading {
99
99
  min-height: 44px;
100
- padding: var(--ui-space-3, 12px);
100
+ padding: var(--ui-space-3);
101
101
  }
102
102
 
103
103
  @media (max-width: 767px) {
104
104
  :scope {
105
105
  border-bottom: 0;
106
- border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
106
+ border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
107
107
  }
108
108
 
109
109
  .list {
package/styles/ui-editor-slash-menu.css CHANGED
@@ -1,13 +1,13 @@
1
- /* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
2
2
  @scope ([data-component~="ui-editor-slash-menu"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  user-select: none;
5
5
  }
6
6
 
7
7
  :scope {
8
- background: var(--ui-surface, #fff);
9
- border: 1px solid var(--ui-border, #e5e7eb);
10
- border-radius: var(--ui-radius-xl, 1rem);
8
+ background: var(--ui-surface);
9
+ border: 1px solid var(--ui-border);
10
+ border-radius: var(--ui-radius-dialog);
11
11
  box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
12
12
  overflow: hidden;
13
13
  display: flex;
@@ -16,7 +16,7 @@
16
16
 
17
17
  @media (max-width: 767px) {
18
18
  :scope {
19
- border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
19
+ border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
20
20
  border-bottom: none;
21
21
  }
22
22
  }
@@ -24,12 +24,12 @@
24
24
  .header {
25
25
  display: none;
26
26
  align-items: center;
27
- gap: var(--ui-space-2, 8px);
28
- padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px);
29
- border-bottom: 1px solid var(--ui-border, #e5e7eb);
30
- font-size: var(--ui-font-size-xs, 0.75rem);
31
- color: var(--ui-text-muted, #6b7280);
32
- font-weight: var(--ui-font-semibold, 600);
27
+ gap: var(--ui-space-2);
28
+ padding: var(--ui-space-3) var(--ui-space-4);
29
+ border-bottom: 1px solid var(--ui-border);
30
+ font-size: var(--ui-font-size-xs);
31
+ color: var(--ui-text-muted);
32
+ font-weight: var(--ui-font-semibold);
33
33
  text-transform: uppercase;
34
34
  letter-spacing: 0.05em;
35
35
  }
@@ -41,12 +41,12 @@
41
41
  }
42
42
 
43
43
  .header-query {
44
- background: var(--ui-surface-hover, #f3f4f6);
45
- border-radius: var(--ui-radius-sm, 4px);
44
+ background: var(--ui-surface-hover);
45
+ border-radius: var(--ui-radius-sm);
46
46
  padding: 0.1em 0.4em;
47
47
  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
48
- font-size: var(--ui-font-size-xs, 0.75rem);
49
- color: var(--ui-accent, #3b82f6);
48
+ font-size: var(--ui-font-size-xs);
49
+ color: var(--ui-accent);
50
50
  text-transform: none;
51
51
  letter-spacing: 0;
52
52
  }
@@ -54,7 +54,7 @@
54
54
  .list {
55
55
  list-style: none;
56
56
  margin: 0;
57
- padding: var(--ui-space-1, 4px) 0;
57
+ padding: var(--ui-space-1) 0;
58
58
  overflow-y: auto;
59
59
  max-height: 280px;
60
60
  overscroll-behavior: contain;
@@ -63,15 +63,15 @@
63
63
  @media (max-width: 767px) {
64
64
  .list {
65
65
  max-height: calc(60dvh - 80px);
66
- padding: var(--ui-space-1, 4px) 0 var(--ui-space-2, 8px);
66
+ padding: var(--ui-space-1) 0 var(--ui-space-2);
67
67
  }
68
68
  }
69
69
 
70
70
  .item {
71
71
  display: flex;
72
72
  align-items: center;
73
- gap: var(--ui-space-3, 12px);
74
- padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
73
+ gap: var(--ui-space-3);
74
+ padding: var(--ui-space-2) var(--ui-space-3);
75
75
  min-height: 44px;
76
76
  cursor: pointer;
77
77
  transition: background-color 120ms ease;
@@ -87,21 +87,21 @@
87
87
  justify-content: center;
88
88
  width: 32px;
89
89
  height: 32px;
90
- background: var(--ui-surface-hover, #f3f4f6);
91
- border: 1px solid var(--ui-border, #e5e7eb);
92
- border-radius: var(--ui-radius-md, 6px);
93
- font-size: var(--ui-font-size-sm, 0.875rem);
94
- font-weight: var(--ui-font-bold, 700);
95
- color: var(--ui-text-secondary, #4b5563);
90
+ background: var(--ui-surface-hover);
91
+ border: 1px solid var(--ui-border);
92
+ border-radius: var(--ui-radius-md);
93
+ font-size: var(--ui-font-size-sm);
94
+ font-weight: var(--ui-font-bold);
95
+ color: var(--ui-text-secondary);
96
96
  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
97
97
  flex-shrink: 0;
98
98
  line-height: 1;
99
99
  }
100
100
 
101
101
  .item.active .icon {
102
- background: var(--ui-accent, #3b82f6);
103
- border-color: var(--ui-accent, #3b82f6);
104
- color: var(--ui-accent-contrast, #fff);
102
+ background: var(--ui-accent);
103
+ border-color: var(--ui-accent);
104
+ color: var(--ui-accent-contrast);
105
105
  }
106
106
 
107
107
  .icon {
@@ -117,17 +117,17 @@
117
117
  }
118
118
 
119
119
  .title {
120
- font-size: var(--ui-font-size-sm, 0.875rem);
121
- font-weight: var(--ui-font-medium, 500);
122
- color: var(--ui-text, #111827);
120
+ font-size: var(--ui-font-size-sm);
121
+ font-weight: var(--ui-font-medium);
122
+ color: var(--ui-text);
123
123
  white-space: nowrap;
124
124
  overflow: hidden;
125
125
  text-overflow: ellipsis;
126
126
  }
127
127
 
128
128
  .description {
129
- font-size: var(--ui-font-size-xs, 0.75rem);
130
- color: var(--ui-text-muted, #6b7280);
129
+ font-size: var(--ui-font-size-xs);
130
+ color: var(--ui-text-muted);
131
131
  white-space: nowrap;
132
132
  overflow: hidden;
133
133
  text-overflow: ellipsis;
@@ -135,10 +135,10 @@
135
135
 
136
136
  .footer {
137
137
  display: none;
138
- padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
139
- border-top: 1px solid var(--ui-border, #e5e7eb);
140
- font-size: var(--ui-font-size-xs, 0.75rem);
141
- color: var(--ui-text-muted, #6b7280);
138
+ padding: var(--ui-space-2) var(--ui-space-3);
139
+ border-top: 1px solid var(--ui-border);
140
+ font-size: var(--ui-font-size-xs);
141
+ color: var(--ui-text-muted);
142
142
  }
143
143
 
144
144
  @media (min-width: 768px) {
@@ -153,11 +153,11 @@
153
153
  justify-content: center;
154
154
  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
155
155
  font-size: 10px;
156
- background: var(--ui-surface-hover, #f3f4f6);
157
- border: 1px solid var(--ui-border, #e5e7eb);
156
+ background: var(--ui-surface-hover);
157
+ border: 1px solid var(--ui-border);
158
158
  border-radius: 3px;
159
159
  padding: 0 3px;
160
- color: var(--ui-text-secondary, #4b5563);
160
+ color: var(--ui-text-secondary);
161
161
  }
162
162
 
163
163
  :scope[hidden] {
package/styles/ui-editor-table-context-menu.css CHANGED
@@ -1,13 +1,13 @@
1
- /* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
2
2
  @scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  min-width: 14rem;
5
5
  max-width: min(17rem, calc(100vw - 24px));
6
6
  max-height: min(28rem, calc(100vh - 24px));
7
- padding: var(--ui-space-1-5, 6px);
8
- background: var(--ui-surface, #fff);
9
- border: 1px solid var(--ui-border, #e5e7eb);
10
- border-radius: var(--ui-radius-lg, 10px);
7
+ padding: var(--ui-space-2);
8
+ background: var(--ui-surface);
9
+ border: 1px solid var(--ui-border);
10
+ border-radius: var(--ui-radius-lg);
11
11
  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
12
12
  display: flex;
13
13
  flex-direction: column;
@@ -26,17 +26,17 @@
26
26
  :scope button {
27
27
  display: flex;
28
28
  align-items: center;
29
- gap: var(--ui-space-2, 8px);
29
+ gap: var(--ui-space-2);
30
30
  width: 100%;
31
31
  text-align: left;
32
32
  min-height: 32px;
33
- padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
33
+ padding: var(--ui-space-2) var(--ui-space-2);
34
34
  border: none;
35
- border-radius: var(--ui-radius-sm, 4px);
35
+ border-radius: var(--ui-radius-sm);
36
36
  background: none;
37
- font-size: var(--ui-font-size-sm, 0.875rem);
37
+ font-size: var(--ui-font-size-sm);
38
38
  cursor: pointer;
39
- color: var(--ui-text, #111);
39
+ color: var(--ui-text);
40
40
  }
41
41
 
42
42
  :scope button {
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
  :scope button:hover:not(:disabled) {
48
- background: var(--ui-surface-hover, #f3f4f6);
48
+ background: var(--ui-surface-hover);
49
49
  }
50
50
 
51
51
  :scope button.selected {
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  :scope button.danger {
56
- color: var(--ui-danger, #dc2626);
56
+ color: var(--ui-danger);
57
57
  }
58
58
 
59
59
  .swatches {
@@ -65,7 +65,7 @@
65
65
  .swatch-button {
66
66
  display: inline-flex;
67
67
  align-items: center;
68
- gap: var(--ui-space-2, 8px);
68
+ gap: var(--ui-space-2);
69
69
  }
70
70
 
71
71
  .swatch {
@@ -73,7 +73,7 @@
73
73
  width: 1rem;
74
74
  height: 1rem;
75
75
  border-radius: 999px;
76
- border: 1px solid var(--ui-border, #d1d5db);
76
+ border: 1px solid var(--ui-border);
77
77
  background: var(--ui-editor-table-context-swatch, #fff);
78
78
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
79
79
  flex-shrink: 0;
@@ -85,11 +85,11 @@
85
85
  linear-gradient(
86
86
  135deg,
87
87
  transparent calc(50% - 1px),
88
- var(--ui-text-muted, #6b7280) calc(50% - 1px),
89
- var(--ui-text-muted, #6b7280) calc(50% + 1px),
88
+ var(--ui-text-muted) calc(50% - 1px),
89
+ var(--ui-text-muted) calc(50% + 1px),
90
90
  transparent calc(50% + 1px)
91
91
  ),
92
- var(--ui-surface, #fff);
92
+ var(--ui-surface);
93
93
  }
94
94
 
95
95
  .swatch-label {
@@ -98,18 +98,18 @@
98
98
  }
99
99
 
100
100
  .heading {
101
- padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
101
+ padding: var(--ui-space-1) var(--ui-space-2);
102
102
  font-size: 0.6875rem;
103
103
  font-weight: 700;
104
104
  letter-spacing: 0.05em;
105
105
  text-transform: uppercase;
106
- color: var(--ui-text-muted, #6b7280);
106
+ color: var(--ui-text-muted);
107
107
  }
108
108
 
109
109
  .sep {
110
110
  height: 1px;
111
- background: var(--ui-border, #e5e7eb);
112
- margin: var(--ui-space-1, 4px) 0;
111
+ background: var(--ui-border);
112
+ margin: var(--ui-space-1) 0;
113
113
  }
114
114
 
115
115
  :scope[hidden] {
package/styles/ui-editor-table-overlay.css CHANGED
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
2
2
  @scope ([data-component~="ui-editor-table-overlay"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: block;
@@ -46,10 +46,10 @@
46
46
  width: 24px;
47
47
  height: 24px;
48
48
  padding: 0;
49
- border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong, #c8c8c4));
50
- border-radius: var(--ui-radius-round, 999px);
51
- background: color-mix(in srgb, var(--ui-surface-elevated, #fff) 96%, transparent);
52
- color: var(--ui-affordance-near-color, var(--ui-text-secondary, #5c5c5c));
49
+ border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong));
50
+ border-radius: var(--ui-radius-round);
51
+ background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
52
+ color: var(--ui-affordance-near-color, var(--ui-text-secondary));
53
53
  font: inherit;
54
54
  font-size: 16px;
55
55
  line-height: 1;
@@ -57,18 +57,18 @@
57
57
  opacity: 0;
58
58
  scale: 0.72;
59
59
  transition:
60
- opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
61
- scale var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
62
- color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
63
- background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
64
- border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
60
+ opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
61
+ scale var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
62
+ color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
63
+ background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
64
+ border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
65
65
  pointer-events: auto;
66
66
  cursor: pointer;
67
67
  }
68
68
 
69
69
  .handle {
70
70
  --ui-icon-size: 14px;
71
- --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
71
+ --ui-icon-stroke-width: 2;
72
72
  }
73
73
 
74
74
  .handle[data-ui-proximity="near"],
@@ -80,16 +80,16 @@
80
80
 
81
81
  .control.active .handle,
82
82
  .handle:focus-visible {
83
- border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
84
- background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
85
- color: var(--ui-text-on-accent, #fff);
83
+ border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid));
84
+ background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
85
+ color: var(--ui-text-on-accent);
86
86
  box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
87
87
  }
88
88
 
89
89
  .handle:focus-visible,
90
90
  .selector:focus-visible,
91
91
  .cell-menu:focus-visible {
92
- outline: 2px solid var(--ui-focus-ring, #5b55d6);
92
+ outline: 2px solid var(--ui-focus-ring);
93
93
  outline-offset: 2px;
94
94
  }
95
95
 
@@ -117,9 +117,9 @@
117
117
 
118
118
  .line {
119
119
  position: absolute;
120
- background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
120
+ background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
121
121
  opacity: 0;
122
- transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
122
+ transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
123
123
  }
124
124
 
125
125
  .control.row .line {
@@ -138,12 +138,12 @@
138
138
 
139
139
  .guide {
140
140
  position: absolute;
141
- width: var(--ui-affordance-guide-size, 4px);
142
- height: var(--ui-affordance-guide-size, 4px);
143
- border-radius: var(--ui-radius-round, 999px);
144
- background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
145
- opacity: var(--ui-affordance-guide-opacity, 0.42);
146
- transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
141
+ width: var(--ui-affordance-guide-size);
142
+ height: var(--ui-affordance-guide-size);
143
+ border-radius: var(--ui-radius-round);
144
+ background: var(--ui-affordance-guide-color, var(--ui-border-strong));
145
+ opacity: var(--ui-affordance-guide-opacity);
146
+ transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
147
147
  }
148
148
 
149
149
  .control.row .guide {
@@ -168,16 +168,16 @@
168
168
  left: 50%;
169
169
  width: max-content;
170
170
  max-width: 14rem;
171
- padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
172
- border-radius: var(--ui-radius-1, 4px);
173
- background: var(--ui-text-primary, #1a1a1a);
174
- color: var(--ui-surface-elevated, #fff);
175
- font-size: var(--ui-font-size-xs, 0.75rem);
176
- font-weight: var(--ui-font-medium, 500);
177
- line-height: var(--ui-line-height-md, 1.4);
171
+ padding: var(--ui-space-1) var(--ui-space-2);
172
+ border-radius: var(--ui-radius-sm);
173
+ background: var(--ui-text-primary);
174
+ color: var(--ui-surface-elevated);
175
+ font-size: var(--ui-font-size-xs);
176
+ font-weight: var(--ui-font-medium);
177
+ line-height: var(--ui-line-height-md);
178
178
  opacity: 0;
179
179
  transform: translateX(-50%);
180
- transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
180
+ transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
181
181
  pointer-events: none;
182
182
  }
183
183
 
@@ -203,37 +203,37 @@
203
203
  padding: 0;
204
204
  border: 1px solid transparent;
205
205
  background: transparent;
206
- color: var(--ui-text-secondary, #5c5c5c);
206
+ color: var(--ui-text-secondary);
207
207
  box-shadow: none;
208
208
  pointer-events: auto;
209
209
  cursor: pointer;
210
210
  transition:
211
- color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
212
- background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
213
- border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
214
- box-shadow var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
211
+ color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
212
+ background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
213
+ border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
214
+ box-shadow var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
215
215
  }
216
216
 
217
217
  .selector:hover,
218
218
  .cell-menu:hover {
219
- background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted, #f3f4f6));
220
- color: var(--ui-icon-button-hover-color, var(--ui-text-primary, #1a1a1a));
219
+ background: var(--ui-icon-button-hover-surface, var(--ui-surface-muted));
220
+ color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
221
221
  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
222
222
  }
223
223
 
224
224
  .selector {
225
- border-radius: var(--ui-radius-round, 999px);
225
+ border-radius: var(--ui-radius-round);
226
226
  }
227
227
 
228
228
  .selector::before {
229
229
  content: "";
230
230
  position: absolute;
231
231
  inset: 50% auto auto 50%;
232
- border-radius: var(--ui-radius-round, 999px);
233
- background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
234
- opacity: var(--ui-affordance-guide-opacity, 0.42);
232
+ border-radius: var(--ui-radius-round);
233
+ background: var(--ui-affordance-guide-color, var(--ui-border-strong));
234
+ opacity: var(--ui-affordance-guide-opacity);
235
235
  transform: translate(-50%, -50%);
236
- transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
236
+ transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
237
237
  pointer-events: none;
238
238
  }
239
239
 
@@ -242,12 +242,12 @@
242
242
  width: 14px;
243
243
  height: 14px;
244
244
  --ui-icon-size: 14px;
245
- --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
245
+ --ui-icon-stroke-width: 2;
246
246
  opacity: 0;
247
247
  transform: scale(0.72);
248
248
  transition:
249
- opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
250
- transform var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
249
+ opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
250
+ transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
251
251
  }
252
252
 
253
253
  .selector:hover::before,
@@ -299,13 +299,13 @@
299
299
  .cell-menu {
300
300
  width: 24px;
301
301
  height: 24px;
302
- border-radius: var(--ui-radius-1, 4px);
303
- background: color-mix(in srgb, var(--ui-surface-muted, #f3f4f6) 78%, transparent);
302
+ border-radius: var(--ui-radius-sm);
303
+ background: color-mix(in srgb, var(--ui-surface-muted) 78%, transparent);
304
304
  }
305
305
 
306
306
  .cell-menu {
307
307
  --ui-icon-size: 15px;
308
- --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
308
+ --ui-icon-stroke-width: 2;
309
309
  }
310
310
 
311
311
  :scope[hidden] {