@threadlabs/looma 0.10.0 → 0.10.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 (247) hide show
  1. package/components/ui-editor-toolbar/ui-editor-toolbar.html +70 -20
  2. package/components/ui-editor-toolbar/ui-editor-toolbar.js +24 -0
  3. package/dist/index.js +20 -19
  4. package/package.json +2 -2
  5. package/styles/ui-affordance-scope.css +1 -1
  6. package/styles/ui-avatar-group.css +1 -1
  7. package/styles/ui-avatar.css +1 -1
  8. package/styles/ui-badge.css +1 -1
  9. package/styles/ui-button.css +1 -1
  10. package/styles/ui-callout.css +1 -1
  11. package/styles/ui-checkbox.css +1 -1
  12. package/styles/ui-cluster.css +1 -1
  13. package/styles/ui-combobox.css +1 -1
  14. package/styles/ui-container.css +1 -1
  15. package/styles/ui-context-menu.css +1 -1
  16. package/styles/ui-dialog.css +1 -1
  17. package/styles/ui-disclosure.css +1 -1
  18. package/styles/ui-editable.css +1 -1
  19. package/styles/ui-editor-insert-table-grid.css +1 -1
  20. package/styles/ui-editor-mention-menu.css +1 -1
  21. package/styles/ui-editor-slash-menu.css +1 -1
  22. package/styles/ui-editor-table-context-menu.css +1 -1
  23. package/styles/ui-editor-table-overlay.css +1 -1
  24. package/styles/ui-editor-table-toolbar.css +1 -1
  25. package/styles/ui-editor-toolbar.css +73 -19
  26. package/styles/ui-floating-action-button.css +1 -1
  27. package/styles/ui-form-field.css +1 -1
  28. package/styles/ui-grid.css +1 -1
  29. package/styles/ui-icon-button.css +1 -1
  30. package/styles/ui-icon.css +1 -1
  31. package/styles/ui-input.css +1 -1
  32. package/styles/ui-menu-item.css +1 -1
  33. package/styles/ui-menu.css +1 -1
  34. package/styles/ui-popover.css +1 -1
  35. package/styles/ui-radio-group.css +1 -1
  36. package/styles/ui-radio.css +1 -1
  37. package/styles/ui-reel.css +1 -1
  38. package/styles/ui-search-result-row.css +1 -1
  39. package/styles/ui-search-shell.css +1 -1
  40. package/styles/ui-select.css +1 -1
  41. package/styles/ui-separator.css +1 -1
  42. package/styles/ui-sidebar.css +1 -1
  43. package/styles/ui-stack.css +1 -1
  44. package/styles/ui-switch.css +1 -1
  45. package/styles/ui-switcher.css +1 -1
  46. package/styles/ui-tabs.css +1 -1
  47. package/styles/ui-textarea.css +1 -1
  48. package/styles/ui-toast-region.css +1 -1
  49. package/styles/ui-tooltip.css +1 -1
  50. package/styles/ui-top-bar.css +1 -1
  51. package/styles/ui-tree-item.css +1 -1
  52. package/styles/ui-tree.css +1 -1
  53. package/vanilla/UiAffordanceScope.d.ts +1 -1
  54. package/vanilla/UiAffordanceScope.js +1 -1
  55. package/vanilla/UiAvatar.d.ts +1 -1
  56. package/vanilla/UiAvatar.js +1 -1
  57. package/vanilla/UiAvatarGroup.d.ts +1 -1
  58. package/vanilla/UiAvatarGroup.js +1 -1
  59. package/vanilla/UiBadge.d.ts +1 -1
  60. package/vanilla/UiBadge.js +1 -1
  61. package/vanilla/UiButton.d.ts +1 -1
  62. package/vanilla/UiButton.js +1 -1
  63. package/vanilla/UiCallout.d.ts +1 -1
  64. package/vanilla/UiCallout.js +1 -1
  65. package/vanilla/UiCheckbox.d.ts +1 -1
  66. package/vanilla/UiCheckbox.js +1 -1
  67. package/vanilla/UiCluster.d.ts +1 -1
  68. package/vanilla/UiCluster.js +1 -1
  69. package/vanilla/UiCombobox.d.ts +1 -1
  70. package/vanilla/UiCombobox.js +1 -1
  71. package/vanilla/UiContainer.d.ts +1 -1
  72. package/vanilla/UiContainer.js +1 -1
  73. package/vanilla/UiContextMenu.d.ts +1 -1
  74. package/vanilla/UiContextMenu.js +1 -1
  75. package/vanilla/UiDialog.d.ts +1 -1
  76. package/vanilla/UiDialog.js +1 -1
  77. package/vanilla/UiDisclosure.d.ts +1 -1
  78. package/vanilla/UiDisclosure.js +1 -1
  79. package/vanilla/UiEditable.d.ts +1 -1
  80. package/vanilla/UiEditable.js +1 -1
  81. package/vanilla/UiEditorInsertTableGrid.d.ts +1 -1
  82. package/vanilla/UiEditorInsertTableGrid.js +1 -1
  83. package/vanilla/UiEditorMentionMenu.d.ts +1 -1
  84. package/vanilla/UiEditorMentionMenu.js +1 -1
  85. package/vanilla/UiEditorSlashMenu.d.ts +1 -1
  86. package/vanilla/UiEditorSlashMenu.js +1 -1
  87. package/vanilla/UiEditorTableContextMenu.d.ts +1 -1
  88. package/vanilla/UiEditorTableContextMenu.js +1 -1
  89. package/vanilla/UiEditorTableOverlay.d.ts +1 -1
  90. package/vanilla/UiEditorTableOverlay.js +1 -1
  91. package/vanilla/UiEditorTableToolbar.d.ts +1 -1
  92. package/vanilla/UiEditorTableToolbar.js +1 -1
  93. package/vanilla/UiEditorToolbar.d.ts +1 -1
  94. package/vanilla/UiEditorToolbar.js +12 -7
  95. package/vanilla/UiFloatingActionButton.d.ts +1 -1
  96. package/vanilla/UiFloatingActionButton.js +1 -1
  97. package/vanilla/UiFormField.d.ts +1 -1
  98. package/vanilla/UiFormField.js +1 -1
  99. package/vanilla/UiGrid.d.ts +1 -1
  100. package/vanilla/UiGrid.js +1 -1
  101. package/vanilla/UiIcon.d.ts +1 -1
  102. package/vanilla/UiIcon.js +1 -1
  103. package/vanilla/UiIconButton.d.ts +1 -1
  104. package/vanilla/UiIconButton.js +1 -1
  105. package/vanilla/UiInput.d.ts +1 -1
  106. package/vanilla/UiInput.js +1 -1
  107. package/vanilla/UiMenu.d.ts +1 -1
  108. package/vanilla/UiMenu.js +1 -1
  109. package/vanilla/UiMenuItem.d.ts +1 -1
  110. package/vanilla/UiMenuItem.js +1 -1
  111. package/vanilla/UiPopover.d.ts +1 -1
  112. package/vanilla/UiPopover.js +1 -1
  113. package/vanilla/UiRadio.d.ts +1 -1
  114. package/vanilla/UiRadio.js +1 -1
  115. package/vanilla/UiRadioGroup.d.ts +1 -1
  116. package/vanilla/UiRadioGroup.js +1 -1
  117. package/vanilla/UiReel.d.ts +1 -1
  118. package/vanilla/UiReel.js +1 -1
  119. package/vanilla/UiSearchResultRow.d.ts +1 -1
  120. package/vanilla/UiSearchResultRow.js +1 -1
  121. package/vanilla/UiSearchShell.d.ts +1 -1
  122. package/vanilla/UiSearchShell.js +1 -1
  123. package/vanilla/UiSelect.d.ts +1 -1
  124. package/vanilla/UiSelect.js +1 -1
  125. package/vanilla/UiSeparator.d.ts +1 -1
  126. package/vanilla/UiSeparator.js +1 -1
  127. package/vanilla/UiSidebar.d.ts +1 -1
  128. package/vanilla/UiSidebar.js +1 -1
  129. package/vanilla/UiStack.d.ts +1 -1
  130. package/vanilla/UiStack.js +1 -1
  131. package/vanilla/UiSwitch.d.ts +1 -1
  132. package/vanilla/UiSwitch.js +1 -1
  133. package/vanilla/UiSwitcher.d.ts +1 -1
  134. package/vanilla/UiSwitcher.js +1 -1
  135. package/vanilla/UiTabs.d.ts +1 -1
  136. package/vanilla/UiTabs.js +1 -1
  137. package/vanilla/UiTextarea.d.ts +1 -1
  138. package/vanilla/UiTextarea.js +1 -1
  139. package/vanilla/UiToastRegion.d.ts +1 -1
  140. package/vanilla/UiToastRegion.js +1 -1
  141. package/vanilla/UiTooltip.d.ts +1 -1
  142. package/vanilla/UiTooltip.js +1 -1
  143. package/vanilla/UiTopBar.d.ts +1 -1
  144. package/vanilla/UiTopBar.js +1 -1
  145. package/vanilla/UiTree.d.ts +1 -1
  146. package/vanilla/UiTree.js +1 -1
  147. package/vanilla/UiTreeItem.d.ts +1 -1
  148. package/vanilla/UiTreeItem.js +1 -1
  149. package/vue/UiAffordanceScope.vue +1 -1
  150. package/vue/UiAvatar.vue +1 -1
  151. package/vue/UiAvatarGroup.vue +1 -1
  152. package/vue/UiBadge.vue +1 -1
  153. package/vue/UiButton.vue +1 -1
  154. package/vue/UiCallout.vue +1 -1
  155. package/vue/UiCheckbox.vue +1 -1
  156. package/vue/UiCluster.vue +1 -1
  157. package/vue/UiCombobox.vue +1 -1
  158. package/vue/UiContainer.vue +1 -1
  159. package/vue/UiContextMenu.vue +1 -1
  160. package/vue/UiDialog.vue +1 -1
  161. package/vue/UiDisclosure.vue +1 -1
  162. package/vue/UiEditable.vue +1 -1
  163. package/vue/UiEditorInsertTableGrid.vue +1 -1
  164. package/vue/UiEditorMentionMenu.vue +1 -1
  165. package/vue/UiEditorSlashMenu.vue +1 -1
  166. package/vue/UiEditorTableContextMenu.vue +1 -1
  167. package/vue/UiEditorTableOverlay.vue +1 -1
  168. package/vue/UiEditorTableToolbar.vue +1 -1
  169. package/vue/UiEditorToolbar.vue +91 -21
  170. package/vue/UiFloatingActionButton.vue +1 -1
  171. package/vue/UiFormField.vue +1 -1
  172. package/vue/UiGrid.vue +1 -1
  173. package/vue/UiIcon.vue +1 -1
  174. package/vue/UiIconButton.vue +1 -1
  175. package/vue/UiInput.vue +1 -1
  176. package/vue/UiMenu.vue +1 -1
  177. package/vue/UiMenuItem.vue +1 -1
  178. package/vue/UiPopover.vue +1 -1
  179. package/vue/UiRadio.vue +1 -1
  180. package/vue/UiRadioGroup.vue +1 -1
  181. package/vue/UiReel.vue +1 -1
  182. package/vue/UiSearchResultRow.vue +1 -1
  183. package/vue/UiSearchShell.vue +1 -1
  184. package/vue/UiSelect.vue +1 -1
  185. package/vue/UiSeparator.vue +1 -1
  186. package/vue/UiSidebar.vue +1 -1
  187. package/vue/UiStack.vue +1 -1
  188. package/vue/UiSwitch.vue +1 -1
  189. package/vue/UiSwitcher.vue +1 -1
  190. package/vue/UiTabs.vue +1 -1
  191. package/vue/UiTextarea.vue +1 -1
  192. package/vue/UiToastRegion.vue +1 -1
  193. package/vue/UiTooltip.vue +1 -1
  194. package/vue/UiTopBar.vue +1 -1
  195. package/vue/UiTree.vue +1 -1
  196. package/vue/UiTreeItem.vue +1 -1
  197. package/vue/chunks/UiAffordanceScope.js +1 -1
  198. package/vue/chunks/UiAvatar.js +1 -1
  199. package/vue/chunks/UiAvatarGroup.js +1 -1
  200. package/vue/chunks/UiBadge.js +1 -1
  201. package/vue/chunks/UiButton.js +1 -1
  202. package/vue/chunks/UiCallout.js +1 -1
  203. package/vue/chunks/UiCheckbox.js +1 -1
  204. package/vue/chunks/UiCluster.js +1 -1
  205. package/vue/chunks/UiCombobox.js +1 -1
  206. package/vue/chunks/UiContainer.js +1 -1
  207. package/vue/chunks/UiContextMenu.js +1 -1
  208. package/vue/chunks/UiDialog.js +1 -1
  209. package/vue/chunks/UiDisclosure.js +1 -1
  210. package/vue/chunks/UiEditable.js +1 -1
  211. package/vue/chunks/UiEditorInsertTableGrid.js +1 -1
  212. package/vue/chunks/UiEditorMentionMenu.js +1 -1
  213. package/vue/chunks/UiEditorSlashMenu.js +1 -1
  214. package/vue/chunks/UiEditorTableContextMenu.js +1 -1
  215. package/vue/chunks/UiEditorTableOverlay.js +1 -1
  216. package/vue/chunks/UiEditorTableToolbar.js +1 -1
  217. package/vue/chunks/UiEditorToolbar.js +33 -4
  218. package/vue/chunks/UiFloatingActionButton.js +1 -1
  219. package/vue/chunks/UiFormField.js +1 -1
  220. package/vue/chunks/UiGrid.js +1 -1
  221. package/vue/chunks/UiIcon.js +1 -1
  222. package/vue/chunks/UiIconButton.js +1 -1
  223. package/vue/chunks/UiInput.js +1 -1
  224. package/vue/chunks/UiMenu.js +1 -1
  225. package/vue/chunks/UiMenuItem.js +1 -1
  226. package/vue/chunks/UiPopover.js +1 -1
  227. package/vue/chunks/UiRadio.js +1 -1
  228. package/vue/chunks/UiRadioGroup.js +1 -1
  229. package/vue/chunks/UiReel.js +1 -1
  230. package/vue/chunks/UiSearchResultRow.js +1 -1
  231. package/vue/chunks/UiSearchShell.js +1 -1
  232. package/vue/chunks/UiSelect.js +1 -1
  233. package/vue/chunks/UiSeparator.js +1 -1
  234. package/vue/chunks/UiSidebar.js +1 -1
  235. package/vue/chunks/UiStack.js +1 -1
  236. package/vue/chunks/UiSwitch.js +1 -1
  237. package/vue/chunks/UiSwitcher.js +1 -1
  238. package/vue/chunks/UiTabs.js +1 -1
  239. package/vue/chunks/UiTextarea.js +1 -1
  240. package/vue/chunks/UiToastRegion.js +1 -1
  241. package/vue/chunks/UiTooltip.js +1 -1
  242. package/vue/chunks/UiTopBar.js +1 -1
  243. package/vue/chunks/UiTree.js +1 -1
  244. package/vue/chunks/UiTreeItem.js +1 -1
  245. package/vue/chunks/host.js +8 -2
  246. package/vue/components.css +769 -725
  247. package/vue/host.ts +11 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.10.0",
3
+ "version": "0.10.2",
4
4
  "type": "module",
5
5
  "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
6
6
  "license": "MIT",
@@ -77,7 +77,7 @@
77
77
  "./*.css"
78
78
  ],
79
79
  "dependencies": {
80
- "@nextwebwg/html-next": "^1.0.0-alpha.3",
80
+ "@nextwebwg/html-next": "^1.0.0-alpha.5",
81
81
  "lowlight": "^3.3.0",
82
82
  "markdown-it": "14.3.1",
83
83
  "lucide": "~0.554.0"
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-affordance-scope"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: contents;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-avatar-group"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-avatar"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: inline-grid;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-badge"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  --_badge-surface: var(--ui-surface-subtle);
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  --_hue: var(--ui-accent);
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-callout"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  --_callout-surface: var(--ui-info-soft);
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-checkbox"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: inline-flex;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  --_layout-gap: var(--ui-space-3);
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-combobox"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: grid;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-container"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  --_container-measure: 65ch;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-context-menu"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: contents;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @keyframes ui-dialog-enter {
3
3
  from {
4
4
  opacity: 0;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
3
3
  /* Density resolves into the summary row's own values; the public tokens still override them. */
4
4
  :scope {
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-editable"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: flex;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-editor-insert-table-grid"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  padding: var(--ui-space-3);
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. 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;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. 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;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-editor-table-overlay"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: block;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-editor-table-toolbar"]) to ([data-component], [data-slotted]) {
3
3
  .looma-editor__mobile-toolbar-shell :scope {
4
4
  min-width: max-content;
@@ -1,36 +1,83 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-editor-toolbar"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
+ /* The colour the edge fades blend into: whatever the toolbar is painted with. */
5
+ --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
6
+
4
7
  position: sticky;
5
8
  top: 0;
6
9
  z-index: var(--ui-editor-toolbar-z-index, 10);
7
10
  display: flex;
8
11
  align-items: center;
9
- justify-content: flex-start;
10
- gap: var(--ui-editor-toolbar-gap, 2px);
11
12
  padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
12
13
  min-height: var(--ui-editor-toolbar-min-height, 48px);
13
- /* More controls than the column is wide is normal at a readable measure, so the row wraps.
14
- Scrolling hid the tail behind an invisible scrollbar. */
15
- flex-wrap: wrap;
16
- row-gap: var(--ui-editor-toolbar-row-gap, var(--ui-editor-toolbar-gap, 2px));
17
14
  background: var(--ui-editor-toolbar-surface, var(--ui-surface));
18
15
  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
19
16
  }
20
17
 
21
- :scope::-webkit-scrollbar {
18
+ /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
19
+ wrapping into several lines, and a fade at each edge that has more to show says so. */
20
+ .strip {
21
+ display: flex;
22
+ flex: 1 1 auto;
23
+ align-items: center;
24
+ justify-content: flex-start;
25
+ gap: var(--ui-editor-toolbar-gap, 2px);
26
+ min-width: 0;
27
+ overflow-x: auto;
28
+ overflow-y: hidden;
29
+ overscroll-behavior-inline: contain;
30
+ scrollbar-width: none;
31
+ }
32
+
33
+ .strip::-webkit-scrollbar {
22
34
  display: none;
23
35
  }
24
36
 
37
+ /* The fades are mattes laid over the strip in the toolbar's own colour, not a mask, so a floating
38
+ toolbar's border and shadow stay whole. Each appears only while that edge hides controls. */
39
+ :scope::before,
40
+ :scope::after {
41
+ position: absolute;
42
+ z-index: 1;
43
+ inset-block: 0;
44
+ inline-size: var(--ui-editor-toolbar-fade-size, 32px);
45
+ content: "";
46
+ opacity: 0;
47
+ pointer-events: none;
48
+ transition: opacity var(--ui-motion-fast, 120ms) var(--ui-motion-ease, ease);
49
+ }
50
+
51
+ :scope::before {
52
+ inset-inline-start: 0;
53
+ background: linear-gradient(to right, var(--_matte), transparent);
54
+ }
55
+
56
+ :scope::after {
57
+ inset-inline-end: 0;
58
+ background: linear-gradient(to left, var(--_matte), transparent);
59
+ }
60
+
61
+ :scope:dir(rtl)::before {
62
+ background: linear-gradient(to left, var(--_matte), transparent);
63
+ }
64
+
65
+ :scope:dir(rtl)::after {
66
+ background: linear-gradient(to right, var(--_matte), transparent);
67
+ }
68
+
69
+ :scope[data-ui-editor-toolbar-state~="overflowStart"]::before,
70
+ :scope[data-ui-editor-toolbar-state~="overflowEnd"]::after {
71
+ opacity: 1;
72
+ }
73
+
25
74
  :scope[data-ui-editor-toolbar-state~="floating"] {
26
- flex-wrap: nowrap;
27
- position: static;
75
+ position: relative;
28
76
  top: auto;
29
77
  width: max-content;
30
78
  max-width: min(calc(100vw - 24px), 100%);
31
79
  min-height: auto;
32
80
  padding: var(--ui-editor-toolbar-floating-padding, 4px);
33
- overflow-x: visible;
34
81
  background: color-mix(in srgb, var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%, transparent);
35
82
  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
36
83
  border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
@@ -52,7 +99,7 @@
52
99
  }
53
100
 
54
101
  :scope[data-ui-editor-toolbar-state~="floating"] {
55
- position: static;
102
+ position: relative;
56
103
  inset: auto;
57
104
  min-height: auto;
58
105
  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
@@ -63,9 +110,10 @@
63
110
 
64
111
  /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
65
112
  .looma-editor__sticky-toolbar-shell :scope {
66
- position: static;
113
+ --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
114
+
115
+ position: relative;
67
116
  min-height: var(--ui-editor-toolbar-min-height, 48px);
68
- overscroll-behavior-inline: contain;
69
117
  background: transparent;
70
118
  border: 0;
71
119
  box-shadow: none;
@@ -77,10 +125,6 @@
77
125
  max-width: none;
78
126
  min-height: 100%;
79
127
  padding: 0;
80
- overflow-x: auto;
81
- overflow-y: hidden;
82
- overscroll-behavior-inline: contain;
83
- scroll-snap-type: x mandatory;
84
128
  background: transparent;
85
129
  border: 0;
86
130
  border-radius: 0;
@@ -88,16 +132,26 @@
88
132
  backdrop-filter: none;
89
133
  }
90
134
 
135
+ .looma-editor__mobile-toolbar-shell :scope[data-ui-editor-toolbar-state~="floating"] .strip {
136
+ scroll-snap-type: x mandatory;
137
+ }
138
+
91
139
  /* A component that sets its display still honours the hidden attribute on its root. */
92
140
  :scope[hidden] {
93
141
  display: none;
94
142
  }
95
143
  }
96
144
  @scope ([data-component~="ui-editor-toolbar"]) to ([data-component]) {
97
- :scope > :where([data-slotted], [data-slotted] *):is(*) {
145
+ /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
146
+ wrapping into several lines, and a fade at each edge that has more to show says so. */
147
+
148
+ .strip > :where([data-slotted], [data-slotted] *):is(*) {
98
149
  flex: 0 0 auto;
99
150
  }
100
151
 
152
+ /* The fades are mattes laid over the strip in the toolbar's own colour, not a mask, so a floating
153
+ toolbar's border and shadow stay whole. Each appears only while that edge hides controls. */
154
+
101
155
  :where([data-slotted], [data-slotted] *):is(.divider) {
102
156
  width: 1px;
103
157
  height: 20px;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-floating-action-button"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  position: fixed;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-form-field"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: grid;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-grid"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  --_grid-gap: var(--ui-space-4);
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-icon-button"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: inline-flex;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-icon"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: inline-flex;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-input"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  box-sizing: border-box;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-menu-item"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: block;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-menu"]) to ([data-component], [data-slotted]) {
3
3
  /* Compact sets the part tokens its items read, so nothing has to rescale a global. */
4
4
  :scope[data-ui-menu-state~="density=compact"] {
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  box-sizing: border-box;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-radio-group"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: inline-flex;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-radio"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: inline-flex;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-reel"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  --_reel-gap: var(--ui-space-4);
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-search-result-row"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  appearance: none;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-search-shell"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: contents;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-select"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  box-sizing: border-box;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-separator"]) to ([data-component], [data-slotted]) {
3
3
  hr {
4
4
  box-sizing: border-box;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-sidebar"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  position: relative;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  --_layout-gap: var(--ui-space-4);
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-switch"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  display: inline-flex;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-switcher"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  --_switcher-gap: var(--ui-space-4);
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-tabs"]) to ([data-component], [data-slotted]) {
3
3
  /* Density resolves into the tab row's own values; the public tokens still override them. */
4
4
  :scope {
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-textarea"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  box-sizing: border-box;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @keyframes ui-toast-enter {
3
3
  from {
4
4
  opacity: 0;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-tooltip"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  position: fixed;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-top-bar"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  position: sticky;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-tree-item"]) to ([data-component], [data-slotted]) {
3
3
  :scope {
4
4
  --_tree-row-min-height: 32px;
@@ -1,4 +1,4 @@
1
- /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
2
  @scope ([data-component~="ui-tree"]) to ([data-component], [data-slotted]) {
3
3
  :scope[data-ui-tree-state~="density=compact"] {
4
4
  --ui-tree-item-min-block-size: var(--ui-control-size-sm);
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  export interface UiAffordanceScopeEventMap {
3
3
  }
4
4
  export interface UiAffordanceScopeElement extends HTMLSpanElement {
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
3
3
  import * as controller from "../components/ui-affordance-scope/ui-affordance-scope.js";
4
4
  import "../styles/ui-affordance-scope.css";
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  export interface UiAvatarEventMap {
3
3
  }
4
4
  export interface UiAvatarElement extends HTMLSpanElement {
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
3
3
  import * as controller from "../components/ui-avatar/ui-avatar.js";
4
4
  import "../styles/ui-avatar.css";
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  export interface UiAvatarGroupEventMap {
3
3
  }
4
4
  export interface UiAvatarGroupElement extends HTMLDivElement {
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
3
3
  import * as controller from "../components/ui-avatar-group/ui-avatar-group.js";
4
4
  import "../styles/ui-avatar-group.css";
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  export interface UiBadgeEventMap {
3
3
  }
4
4
  export interface UiBadgeElement extends HTMLSpanElement {
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
3
3
  import "../styles/ui-badge.css";
4
4
 
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  export interface UiButtonEventMap {
3
3
  }
4
4
  export interface UiButtonElement extends HTMLButtonElement {
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
3
3
  import "../styles/ui-button.css";
4
4
 
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  export interface UiCalloutEventMap {
3
3
  }
4
4
  export interface UiCalloutElement extends HTMLDivElement {
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
3
3
  import "../styles/ui-callout.css";
4
4
 
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  export interface UiCheckboxEventMap {
3
3
  change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
4
4
  }
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
3
3
  import * as controller from "../components/ui-checkbox/ui-checkbox.js";
4
4
  import "../styles/ui-checkbox.css";
@@ -1,4 +1,4 @@
1
- // Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
2
  export interface UiClusterEventMap {
3
3
  }
4
4
  export interface UiClusterElement extends HTMLDivElement {