@threadlabs/looma 0.1.24 → 0.1.26

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 (208) hide show
  1. package/dist/{chunk-IMHSPETJ.js → chunk-XRJRF3MM.js} +33 -32
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/looma.cjs.js +1 -1
  4. package/dist/cjs/{ui-combobox.cjs.entry.js → ui-chip_2.cjs.entry.js} +29 -4
  5. package/dist/cjs/ui-context-menu.cjs.entry.js +1 -1
  6. package/dist/cjs/ui-dialog.cjs.entry.js +1 -1
  7. package/dist/cjs/ui-disclosure.cjs.entry.js +1 -1
  8. package/dist/cjs/ui-editable.cjs.entry.js +100 -0
  9. package/dist/cjs/ui-floating-action-button.cjs.entry.js +1 -1
  10. package/dist/cjs/ui-form-field.cjs.entry.js +1 -1
  11. package/dist/cjs/ui-icon-button.cjs.entry.js +1 -1
  12. package/dist/cjs/ui-input.cjs.entry.js +1 -1
  13. package/dist/cjs/ui-menu-item.cjs.entry.js +1 -1
  14. package/dist/cjs/ui-menu.cjs.entry.js +1 -1
  15. package/dist/cjs/ui-multi-combobox.cjs.entry.js +190 -0
  16. package/dist/cjs/ui-popover.cjs.entry.js +1 -1
  17. package/dist/cjs/ui-radio-group.cjs.entry.js +1 -1
  18. package/dist/cjs/ui-radio.cjs.entry.js +1 -1
  19. package/dist/cjs/ui-search-result-row.cjs.entry.js +1 -1
  20. package/dist/cjs/ui-search-shell.cjs.entry.js +1 -1
  21. package/dist/cjs/ui-select.cjs.entry.js +1 -1
  22. package/dist/cjs/ui-switch.cjs.entry.js +2 -2
  23. package/dist/cjs/ui-tabs.cjs.entry.js +1 -1
  24. package/dist/cjs/ui-textarea.cjs.entry.js +1 -1
  25. package/dist/cjs/ui-toast-region.cjs.entry.js +1 -1
  26. package/dist/cjs/ui-tooltip.cjs.entry.js +1 -1
  27. package/dist/cjs/ui-top-bar.cjs.entry.js +1 -1
  28. package/dist/cjs/ui-tree-item.cjs.entry.js +2 -2
  29. package/dist/cjs/ui-tree.cjs.entry.js +1 -1
  30. package/dist/collection/collection-manifest.json +2 -0
  31. package/dist/collection/components/ui-chip/ui-chip.css +4 -0
  32. package/dist/collection/components/ui-chip/ui-chip.js +23 -1
  33. package/dist/collection/components/ui-combobox/ui-combobox.js +49 -4
  34. package/dist/collection/components/ui-context-menu/ui-context-menu.js +1 -1
  35. package/dist/collection/components/ui-dialog/ui-dialog.js +1 -1
  36. package/dist/collection/components/ui-disclosure/ui-disclosure.js +1 -1
  37. package/dist/collection/components/ui-editable/ui-editable.css +2 -0
  38. package/dist/collection/components/ui-editable/ui-editable.js +196 -0
  39. package/dist/collection/components/ui-floating-action-button/ui-floating-action-button.js +1 -1
  40. package/dist/collection/components/ui-form-field/ui-form-field.js +1 -1
  41. package/dist/collection/components/ui-icon-button/ui-icon-button.js +1 -1
  42. package/dist/collection/components/ui-input/ui-input.js +1 -1
  43. package/dist/collection/components/ui-menu/ui-menu.js +1 -1
  44. package/dist/collection/components/ui-menu-item/ui-menu-item.js +1 -1
  45. package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.css +29 -0
  46. package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.js +553 -0
  47. package/dist/collection/components/ui-popover/ui-popover.js +1 -1
  48. package/dist/collection/components/ui-radio/ui-radio.js +1 -1
  49. package/dist/collection/components/ui-radio-group/ui-radio-group.js +1 -1
  50. package/dist/collection/components/ui-search-result-row/ui-search-result-row.js +1 -1
  51. package/dist/collection/components/ui-search-shell/ui-search-shell.js +1 -1
  52. package/dist/collection/components/ui-select/ui-select.js +1 -1
  53. package/dist/collection/components/ui-switch/ui-switch.js +2 -2
  54. package/dist/collection/components/ui-tabs/ui-tabs.js +1 -1
  55. package/dist/collection/components/ui-textarea/ui-textarea.js +1 -1
  56. package/dist/collection/components/ui-toast-region/ui-toast-region.js +1 -1
  57. package/dist/collection/components/ui-tooltip/ui-tooltip.js +1 -1
  58. package/dist/collection/components/ui-top-bar/ui-top-bar.js +1 -1
  59. package/dist/collection/components/ui-tree/ui-tree.js +1 -1
  60. package/dist/collection/components/ui-tree-item/ui-tree-item.js +2 -2
  61. package/dist/collection/field/editable.js +1 -0
  62. package/dist/collection/field/multi-combobox.js +1 -0
  63. package/dist/components/index.d.ts +4 -0
  64. package/dist/components/index.js +1 -1
  65. package/dist/components/{p-DIGcRYAW.js → p-B9CzOHvE.js} +1 -1
  66. package/dist/components/p-BMgIcOh-.js +1 -0
  67. package/dist/components/p-BVteuP_d.js +1 -0
  68. package/dist/components/{p-Bk55QiUK.js → p-C6p-ygxq.js} +1 -1
  69. package/dist/components/ui-chip.js +1 -1
  70. package/dist/components/ui-combobox.js +1 -1
  71. package/dist/components/ui-context-menu.js +1 -1
  72. package/dist/components/ui-dialog.js +1 -1
  73. package/dist/components/ui-disclosure.js +1 -1
  74. package/dist/components/ui-editable.d.ts +11 -0
  75. package/dist/components/ui-editable.js +1 -0
  76. package/dist/components/ui-floating-action-button.js +1 -1
  77. package/dist/components/ui-form-field.js +1 -1
  78. package/dist/components/ui-icon-button.js +1 -1
  79. package/dist/components/ui-input.js +1 -1
  80. package/dist/components/ui-menu-item.js +1 -1
  81. package/dist/components/ui-menu.js +1 -1
  82. package/dist/components/ui-multi-combobox.d.ts +11 -0
  83. package/dist/components/ui-multi-combobox.js +1 -0
  84. package/dist/components/ui-popover.js +1 -1
  85. package/dist/components/ui-radio-group.js +1 -1
  86. package/dist/components/ui-radio.js +1 -1
  87. package/dist/components/ui-search-result-row.js +1 -1
  88. package/dist/components/ui-search-shell.js +1 -1
  89. package/dist/components/ui-select.js +1 -1
  90. package/dist/components/ui-switch.js +1 -1
  91. package/dist/components/ui-tabs.js +1 -1
  92. package/dist/components/ui-textarea.js +1 -1
  93. package/dist/components/ui-toast-region.js +1 -1
  94. package/dist/components/ui-tooltip.js +1 -1
  95. package/dist/components/ui-top-bar.js +1 -1
  96. package/dist/components/ui-tree-item.js +1 -1
  97. package/dist/components/ui-tree.js +1 -1
  98. package/dist/esm/loader.js +1 -1
  99. package/dist/esm/looma.js +1 -1
  100. package/dist/esm/{ui-combobox.entry.js → ui-chip_2.entry.js} +30 -6
  101. package/dist/esm/ui-context-menu.entry.js +1 -1
  102. package/dist/esm/ui-dialog.entry.js +1 -1
  103. package/dist/esm/ui-disclosure.entry.js +1 -1
  104. package/dist/esm/ui-editable.entry.js +98 -0
  105. package/dist/esm/ui-floating-action-button.entry.js +1 -1
  106. package/dist/esm/ui-form-field.entry.js +1 -1
  107. package/dist/esm/ui-icon-button.entry.js +1 -1
  108. package/dist/esm/ui-input.entry.js +1 -1
  109. package/dist/esm/ui-menu-item.entry.js +1 -1
  110. package/dist/esm/ui-menu.entry.js +1 -1
  111. package/dist/esm/ui-multi-combobox.entry.js +188 -0
  112. package/dist/esm/ui-popover.entry.js +1 -1
  113. package/dist/esm/ui-radio-group.entry.js +1 -1
  114. package/dist/esm/ui-radio.entry.js +1 -1
  115. package/dist/esm/ui-search-result-row.entry.js +1 -1
  116. package/dist/esm/ui-search-shell.entry.js +1 -1
  117. package/dist/esm/ui-select.entry.js +1 -1
  118. package/dist/esm/ui-switch.entry.js +2 -2
  119. package/dist/esm/ui-tabs.entry.js +1 -1
  120. package/dist/esm/ui-textarea.entry.js +1 -1
  121. package/dist/esm/ui-toast-region.entry.js +1 -1
  122. package/dist/esm/ui-tooltip.entry.js +1 -1
  123. package/dist/esm/ui-top-bar.entry.js +1 -1
  124. package/dist/esm/ui-tree-item.entry.js +2 -2
  125. package/dist/esm/ui-tree.entry.js +1 -1
  126. package/dist/index.cjs +368 -63
  127. package/dist/index.d.cts +18 -1
  128. package/dist/index.d.ts +18 -1
  129. package/dist/index.js +2 -2
  130. package/dist/looma/looma.esm.js +1 -1
  131. package/dist/looma/p-05592219.entry.js +1 -0
  132. package/dist/looma/{p-314d5c7c.entry.js → p-0e1741cb.entry.js} +1 -1
  133. package/dist/looma/{p-bd00d4e8.entry.js → p-0ef4bf13.entry.js} +1 -1
  134. package/dist/looma/{p-8e254bc4.entry.js → p-166f8593.entry.js} +1 -1
  135. package/dist/looma/p-262a542c.entry.js +1 -0
  136. package/dist/looma/{p-672e3d16.entry.js → p-26d357ae.entry.js} +1 -1
  137. package/dist/looma/{p-b63f6d4f.entry.js → p-30f01909.entry.js} +1 -1
  138. package/dist/looma/p-393e3e02.entry.js +1 -0
  139. package/dist/looma/p-3a44b9f9.entry.js +1 -0
  140. package/dist/looma/{p-fd1e4d22.entry.js → p-558d4f5b.entry.js} +1 -1
  141. package/dist/looma/{p-25e18ad6.entry.js → p-5780cefa.entry.js} +1 -1
  142. package/dist/looma/p-5a7261e1.entry.js +1 -0
  143. package/dist/looma/{p-03f44c45.entry.js → p-7319c147.entry.js} +1 -1
  144. package/dist/looma/{p-f1750fd7.entry.js → p-78b7e466.entry.js} +1 -1
  145. package/dist/looma/{p-7c4a225f.entry.js → p-7eb04f09.entry.js} +1 -1
  146. package/dist/looma/{p-e0f241ab.entry.js → p-81c533f5.entry.js} +1 -1
  147. package/dist/looma/{p-8e6b1001.entry.js → p-87f501cf.entry.js} +1 -1
  148. package/dist/looma/{p-cc915913.entry.js → p-89e71bbb.entry.js} +1 -1
  149. package/dist/looma/{p-a63e2561.entry.js → p-92cd1841.entry.js} +1 -1
  150. package/dist/looma/{p-5a900d89.entry.js → p-95eb3b58.entry.js} +1 -1
  151. package/dist/looma/{p-839faf55.entry.js → p-96ec4d7a.entry.js} +1 -1
  152. package/dist/looma/{p-2c03fa73.entry.js → p-bcb1b47b.entry.js} +1 -1
  153. package/dist/looma/{p-68430534.entry.js → p-d62da01d.entry.js} +1 -1
  154. package/dist/looma/{p-13f8195a.entry.js → p-dbcb479c.entry.js} +1 -1
  155. package/dist/looma/{p-920656cf.entry.js → p-e14024bf.entry.js} +1 -1
  156. package/dist/looma/{p-3ef2a21b.entry.js → p-fc180770.entry.js} +1 -1
  157. package/dist/types/components/ui-chip/ui-chip.d.ts +2 -0
  158. package/dist/types/components/ui-combobox/ui-combobox.d.ts +4 -0
  159. package/dist/types/components/ui-editable/ui-editable.d.ts +24 -0
  160. package/dist/types/components/ui-multi-combobox/ui-multi-combobox.d.ts +51 -0
  161. package/dist/types/components.d.ts +244 -0
  162. package/dist/types/field/editable.d.ts +5 -0
  163. package/dist/types/field/multi-combobox.d.ts +11 -0
  164. package/dist/{ui-affordance-scope.entry-3TUZ6GLW.js → ui-affordance-scope.entry-6N4ZQ5FM.js} +1 -1
  165. package/dist/{ui-avatar-group.entry-XGJKN25W.js → ui-avatar-group.entry-FTZVEFGI.js} +1 -1
  166. package/dist/{ui-avatar.entry-SN3G44HW.js → ui-avatar.entry-SST735OH.js} +1 -1
  167. package/dist/{ui-badge.entry-B6WDCWJX.js → ui-badge.entry-DZGS7MUT.js} +1 -1
  168. package/dist/{ui-button.entry-AZYUELLV.js → ui-button.entry-5WX56ARJ.js} +1 -1
  169. package/dist/{ui-callout.entry-QRPWRMPC.js → ui-callout.entry-OI5RNRXV.js} +1 -1
  170. package/dist/{ui-checkbox.entry-OB6GFC4M.js → ui-checkbox.entry-HCGIQPSE.js} +1 -1
  171. package/dist/{ui-combobox.entry-IIMMUJF7.js → ui-chip_2.entry-G2IGWJTL.js} +32 -7
  172. package/dist/{ui-context-menu.entry-AIULIE5Y.js → ui-context-menu.entry-K2LRT2WV.js} +2 -2
  173. package/dist/{ui-dialog.entry-QSYWYHLY.js → ui-dialog.entry-4W2T27R6.js} +2 -2
  174. package/dist/{ui-disclosure.entry-3BJEYU3U.js → ui-disclosure.entry-ONYMXRKR.js} +2 -2
  175. package/dist/ui-editable.entry-4ZHXIOER.js +110 -0
  176. package/dist/{ui-floating-action-button.entry-JEVNV6FI.js → ui-floating-action-button.entry-XU4JO2ZV.js} +2 -2
  177. package/dist/{ui-form-field.entry-PKSY7UU4.js → ui-form-field.entry-BZSEWR4A.js} +2 -2
  178. package/dist/{ui-icon-button.entry-TPX7BE7R.js → ui-icon-button.entry-MHJKL5OZ.js} +2 -2
  179. package/dist/{ui-input.entry-6NCLNW4E.js → ui-input.entry-BL6EX3GC.js} +2 -2
  180. package/dist/{ui-menu-item.entry-KA2K3PKV.js → ui-menu-item.entry-LERF3A4G.js} +2 -2
  181. package/dist/{ui-menu.entry-7GDO5L2T.js → ui-menu.entry-WXDYGFJE.js} +2 -2
  182. package/dist/ui-multi-combobox.entry-WSNWVRXE.js +196 -0
  183. package/dist/{ui-popover.entry-FR6YRNK6.js → ui-popover.entry-P6STTQVS.js} +2 -2
  184. package/dist/{ui-radio-group.entry-7QHXQSNO.js → ui-radio-group.entry-GZLHOY2M.js} +2 -2
  185. package/dist/{ui-radio.entry-YNMXKLDW.js → ui-radio.entry-4PXIRDKT.js} +2 -2
  186. package/dist/{ui-search-result-row.entry-AHVVAAIO.js → ui-search-result-row.entry-LHNOT7MK.js} +2 -2
  187. package/dist/{ui-search-shell.entry-CNBEAMEZ.js → ui-search-shell.entry-GQCMEU2Z.js} +2 -2
  188. package/dist/{ui-select.entry-TUY6TCTC.js → ui-select.entry-TZU7XX4U.js} +2 -2
  189. package/dist/{ui-switch.entry-26LFI7B5.js → ui-switch.entry-QFH3YDYP.js} +3 -3
  190. package/dist/{ui-tabs.entry-LXB62RJJ.js → ui-tabs.entry-A57JVDT2.js} +2 -2
  191. package/dist/{ui-textarea.entry-JYGMGPX2.js → ui-textarea.entry-L3RLZIGO.js} +2 -2
  192. package/dist/{ui-toast-region.entry-TOW4KZLZ.js → ui-toast-region.entry-XKKEY4K7.js} +2 -2
  193. package/dist/{ui-tooltip.entry-SKFNYXPH.js → ui-tooltip.entry-5WQTX7XF.js} +2 -2
  194. package/dist/{ui-top-bar.entry-S3YP52EA.js → ui-top-bar.entry-KMJEFYOM.js} +2 -2
  195. package/dist/{ui-tree-item.entry-LWYIPYLC.js → ui-tree-item.entry-TUBC57FI.js} +3 -3
  196. package/dist/{ui-tree.entry-LXKUQFRU.js → ui-tree.entry-Y75CRURL.js} +2 -2
  197. package/package.json +1 -1
  198. package/vue/{chunk-D4AJULDE.js → chunk-2DDIBSFD.js} +87 -1
  199. package/vue/editor/index.js +1 -1
  200. package/vue/index.d.ts +127 -2
  201. package/vue/index.js +5 -1
  202. package/dist/cjs/ui-chip.cjs.entry.js +0 -19
  203. package/dist/esm/ui-chip.entry.js +0 -17
  204. package/dist/looma/p-82f2fa3d.entry.js +0 -1
  205. package/dist/looma/p-97e8cb0e.entry.js +0 -1
  206. package/dist/looma/p-9e1c4020.entry.js +0 -1
  207. package/dist/looma/p-cfba8f7c.entry.js +0 -1
  208. package/dist/ui-chip.entry-XSNPJXX3.js +0 -22
@@ -10,7 +10,7 @@ import {
10
10
  getElement,
11
11
  h,
12
12
  registerInstance
13
- } from "./chunk-IMHSPETJ.js";
13
+ } from "./chunk-XRJRF3MM.js";
14
14
 
15
15
  // dist/esm/ui-switch.entry.js
16
16
  var uiSwitchCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([aria-disabled='true']),:host([data-disabled='true']){opacity:0.6;cursor:not-allowed}:host([role='switch']){cursor:pointer}:host input[type='checkbox']{appearance:none;-webkit-appearance:none;display:block;position:relative;width:2.25rem;height:1.25rem;padding:0;border:1px solid var(--ui-border-default);border-radius:999px;background:var(--ui-surface-muted);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);margin:0}:host input[type='checkbox']::after{content:'';position:absolute;top:2px;left:2px;width:0.875rem;height:0.875rem;border-radius:999px;background:var(--ui-surface-default);border:1px solid var(--ui-border-default);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}:host input[type='checkbox']:checked{background:var(--ui-accent-solid);border-color:var(--ui-accent-solid)}:host input[type='checkbox']:checked::after{transform:translateX(calc(2.25rem - 0.875rem - 4px));background:var(--ui-text-on-accent);border-color:var(--ui-text-on-accent)}:host input[type='checkbox']:focus-visible{outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
@@ -59,7 +59,7 @@ var UISwitch = class {
59
59
  this.toggle("pointer");
60
60
  };
61
61
  render() {
62
- return h(Host, { key: "e11500e37da6a52c0cb4e143254363f85911aac1", role: "switch", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.onKeydown, onClick: this.onClick }, h("input", { key: "777310a90b66f67e6a8eb0f77da5274e32f10db0", type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
62
+ return h(Host, { key: "a37ded5259d71a57308cba6dd158ae4ae81e4e8b", role: "switch", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.onKeydown, onClick: this.onClick }, h("input", { key: "882f81f39d752430f1de1554a5d83176416f4617", type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
63
63
  const input = e.target;
64
64
  const checked = input.checked;
65
65
  if (!isControlled(this.checked))
@@ -71,7 +71,7 @@ var UISwitch = class {
71
71
  });
72
72
  if (isControlled(this.checked))
73
73
  input.checked = this.internalChecked;
74
- } }), h("slot", { key: "7d72db5b720c0af0c4561b485ca558de61e1ce6e" }));
74
+ } }), h("slot", { key: "b3b2b5afae622d1ae79cadd84f60c6b6c2df55a4" }));
75
75
  }
76
76
  static get watchers() {
77
77
  return {
@@ -11,7 +11,7 @@ import {
11
11
  getElement,
12
12
  h,
13
13
  registerInstance
14
- } from "./chunk-IMHSPETJ.js";
14
+ } from "./chunk-XRJRF3MM.js";
15
15
 
16
16
  // dist/esm/ui-tabs.entry.js
17
17
  var uiTabsCss = () => `:host{display:flex;flex-direction:column;gap:0}:host([data-orientation='vertical']){flex-direction:row}::slotted([role='tablist']){display:flex;gap:0;max-inline-size:100%;overflow-x:auto;overscroll-behavior-inline:contain;border-bottom:1px solid var(--ui-border-default)}:host([data-orientation='vertical']) ::slotted([role='tablist']){flex-direction:column;border-bottom:none;border-inline-end:1px solid var(--ui-border-default)}::slotted(button[role='tab']),::slotted([role='tab']),::slotted(ui-button) button[role='tab']{padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-medium, 500);color:var(--ui-text-secondary);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--ui-motion-fast) var(--ui-motion-ease);box-shadow:none}::slotted(button[role='tab']:hover),::slotted([role='tab']:hover){color:var(--ui-text-primary)}::slotted(button[role='tab'][aria-selected='true']),::slotted([role='tab'][aria-selected='true']){color:var(--ui-accent-solid);border-bottom-color:var(--ui-accent-solid)}:host([data-orientation='vertical']) ::slotted(button[role='tab']),:host([data-orientation='vertical']) ::slotted([role='tab']){border-bottom:none;border-inline-end:2px solid transparent;margin-bottom:0;margin-inline-end:-1px}:host([data-orientation='vertical']) ::slotted(button[role='tab'][aria-selected='true']),:host([data-orientation='vertical']) ::slotted([role='tab'][aria-selected='true']){border-inline-end-color:var(--ui-accent-solid)}::slotted([role='tabpanel']){padding:var(--ui-space-4)}`;
@@ -106,7 +106,7 @@ var UITabs = class {
106
106
  }
107
107
  };
108
108
  render() {
109
- return h(Host, { key: "8681e699c6afdbafd59ed986b8bf3c815b32cd1c", orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: "673f4db2ae0aded3bd40934c1fff518cf6f83837" }));
109
+ return h(Host, { key: "19207153c7b7a6ea5f5ffb50439e99af70984b44", orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: "5045cd040eeccd028c00328206d47f7d17b622de" }));
110
110
  }
111
111
  static get watchers() {
112
112
  return {
@@ -7,7 +7,7 @@ import {
7
7
  getElement,
8
8
  h,
9
9
  registerInstance
10
- } from "./chunk-IMHSPETJ.js";
10
+ } from "./chunk-XRJRF3MM.js";
11
11
 
12
12
  // dist/esm/ui-textarea.entry.js
13
13
  var uiTextareaCss = () => `:host{display:inline-flex;min-inline-size:0;color:var(--ui-text-primary)}::slotted(textarea){width:100%;appearance:none;border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-radius-2);background:var(--ui-control-surface, var(--ui-surface-default));color:inherit;font:inherit;line-height:var(--ui-line-height-md);min-block-size:calc(var(--ui-space-12, 3rem) * 2);padding:var(--ui-space-2) var(--ui-space-3);margin:0;resize:vertical;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(textarea:hover:not(:focus):not(:disabled)){border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(textarea:focus){border-color:var(--ui-control-focus, var(--ui-focus-ring));box-shadow:0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft))}:host([data-invalid='true'])::slotted(textarea),::slotted(textarea[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(textarea:disabled){background:var(--ui-control-surface-disabled, var(--ui-surface-muted));color:var(--ui-text-muted);cursor:not-allowed}::slotted(textarea:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
@@ -85,7 +85,7 @@ var UITextarea = class {
85
85
  });
86
86
  };
87
87
  render() {
88
- return h(Host, { key: "6ce80349ca316f7a44d08e83862125f6b4d736a6", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "2c1ce87c9019d8346673ae5e7dd8a543d1bcb91c", ref: (el) => this.slotRef = el }));
88
+ return h(Host, { key: "020adfed4a177ef5d07852ff2e6ffb66b6f80742", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "2e9bd0e071e24fcf248eadf38f16484321359503", ref: (el) => this.slotRef = el }));
89
89
  }
90
90
  static get watchers() {
91
91
  return {
@@ -10,7 +10,7 @@ import {
10
10
  getElement,
11
11
  h,
12
12
  registerInstance
13
- } from "./chunk-IMHSPETJ.js";
13
+ } from "./chunk-XRJRF3MM.js";
14
14
 
15
15
  // dist/esm/ui-toast-region.entry.js
16
16
  var uiToastRegionCss = () => `:host{position:fixed;top:calc(var(--ui-space-4) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);inline-size:min(24rem, calc(100vw - (var(--ui-space-4) * 2)));max-inline-size:100%;pointer-events:none}:host([popover]){right:auto;bottom:auto;margin:0}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
@@ -85,7 +85,7 @@ var UIToastRegion = class {
85
85
  });
86
86
  };
87
87
  render() {
88
- return h(Host, { key: "b4430aceacb7a66202c6a43ad7b0bbe31c51eb94", role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "8bfb02d38366fab29a1668a53b7834ccd1a9aa65" }));
88
+ return h(Host, { key: "8a3546bcd59e12f21393ea55fa4d232d3907a34e", role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "a4a4525a1ca768d65ff36b3889a821b8dda8b6f7" }));
89
89
  }
90
90
  static get watchers() {
91
91
  return {
@@ -18,7 +18,7 @@ import {
18
18
  getElement,
19
19
  h,
20
20
  registerInstance
21
- } from "./chunk-IMHSPETJ.js";
21
+ } from "./chunk-XRJRF3MM.js";
22
22
 
23
23
  // dist/esm/ui-tooltip.entry.js
24
24
  var uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;box-sizing:border-box;padding:0;border:0;border-radius:0;background:transparent;opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease), transform var(--ui-motion-fast) var(--ui-motion-ease), display var(--ui-motion-fast) allow-discrete, overlay var(--ui-motion-fast) allow-discrete}.tooltip__surface{box-sizing:border-box;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
@@ -232,7 +232,7 @@ var UITooltip = class {
232
232
  }
233
233
  }
234
234
  render() {
235
- return h(Host, { key: "ce34c51bc3a9c9f7f31b7f0d329175df0cee1ab3", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0 }, h("div", { key: "e5bb2bcb146fe8ec3b4e9a6abb550961181e3c06", class: "tooltip__surface" }, h("slot", { key: "bdb71bfcb0f72c212cbb5c64fb69510fdded4afb" })));
235
+ return h(Host, { key: "6c70f235889d6f1c425f0a51fcfc04e06a96dea4", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0 }, h("div", { key: "5c4f1d264e32d308f5b26af4e967e13369c4238a", class: "tooltip__surface" }, h("slot", { key: "52b5900d67ffa7590b0ff97511f99718d2e8c311" })));
236
236
  }
237
237
  static get watchers() {
238
238
  return {
@@ -3,7 +3,7 @@ import {
3
3
  getElement,
4
4
  h,
5
5
  registerInstance
6
- } from "./chunk-IMHSPETJ.js";
6
+ } from "./chunk-XRJRF3MM.js";
7
7
 
8
8
  // dist/esm/ui-top-bar.entry.js
9
9
  var uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-block-start:env(safe-area-inset-top);padding-inline-start:max( var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-left) );padding-inline-end:max( var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-right) );background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
@@ -40,7 +40,7 @@ var UITopBar = class {
40
40
  this.hasActions = slotHasContent(this.actionsSlot);
41
41
  };
42
42
  render() {
43
- return h(Host, { key: "b92aa4e03475b3e623212a1e98f45d5532860b51" }, h("header", { key: "a3552708b0e424e762e100ee55fc6bfac4cd830a", class: "top-bar", part: "base" }, h("div", { key: "4c8a9e3a04ff23a615bf09e368f4212dd5b38157", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "64ecc99672b8fd37305810e0776a24bf87ea6f08", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "37fc003aba2b87f7c8c0e654cd6810d7f231f365", class: "top-bar__title" }, h("slot", { key: "e6c901c15852e83340ca8ad1e264fd5e35445e84" })), h("div", { key: "37b1ac319367eeded4182ada401a31e0b9c2555a", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "0a8b5ef500dd843909bb35a1133be548411f3b71", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "7e5054a3ed6ecfe8d9d8b1b36992843aa0fb62eb", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "19fe59c5ba4da7f0ceda764948f1288bfaa2a41d", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
43
+ return h(Host, { key: "ef7cf644a8e8381d7d1f8d093bcfefcdc4620682" }, h("header", { key: "5055594a179d86efefd43529e070a582c51cb1d8", class: "top-bar", part: "base" }, h("div", { key: "bd6ec069ae9d7820a6992250ba1aa997b4cc6754", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "3b9b1b73fb455ad720e1db46757555eb3713c0b8", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "e402cc0cb7ec4418460182f8f32cb161c6139221", class: "top-bar__title" }, h("slot", { key: "fce0cfc11da269167853f591742b1369023864ae" })), h("div", { key: "6861bb04f399076378aa1fa9be24b35db277106a", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "3857f37d53ec99b36a52cb7830e634afdee29d2e", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "538f6297078b6d5aa85906e902066e8809f52540", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "3c45ff59c4b48673e796c6e93842cb11fceb652f", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
44
44
  }
45
45
  };
46
46
  UITopBar.style = uiTopBarCss();
@@ -10,7 +10,7 @@ import {
10
10
  getElement,
11
11
  h,
12
12
  registerInstance
13
- } from "./chunk-IMHSPETJ.js";
13
+ } from "./chunk-XRJRF3MM.js";
14
14
 
15
15
  // dist/esm/ui-tree-item.entry.js
16
16
  var uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease), opacity var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .row-drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .subtree-drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
@@ -126,10 +126,10 @@ var UITreeItem = class {
126
126
  const expanded = this.isExpanded();
127
127
  const disclosureLabel = `${expanded ? "Collapse" : "Expand"} ${this.label || "item"}`;
128
128
  const dragLabel = `Drag ${this.label || "item"} to reorder`;
129
- return h(Host, { key: "36ad9eac3e0fe2a606e63294891b1c0697034b46", role: "treeitem", "aria-label": this.label || void 0, "aria-level": String(level), "aria-expanded": this.container ? String(expanded) : void 0, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? "true" : void 0, "data-container": this.container ? "" : void 0, "data-selected": this.selected ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-drag-type": this.dragType || "item", "data-drop-scope": this.dropScope || void 0, "data-accepts": this.accepts || void 0, tabIndex: this.disabled || !this.tabStop ? -1 : 0, style: {
129
+ return h(Host, { key: "f092fa9586a39aba1a9629ba42e52f8fbc10de05", role: "treeitem", "aria-label": this.label || void 0, "aria-level": String(level), "aria-expanded": this.container ? String(expanded) : void 0, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? "true" : void 0, "data-container": this.container ? "" : void 0, "data-selected": this.selected ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-drag-type": this.dragType || "item", "data-drop-scope": this.dropScope || void 0, "data-accepts": this.accepts || void 0, tabIndex: this.disabled || !this.tabStop ? -1 : 0, style: {
130
130
  "--ui-tree-item-depth": String(level - 1),
131
131
  "margin-inline-start": level > 1 ? "var(--ui-tree-indent, 16px)" : "0px"
132
- } }, h("div", { key: "e92f5bc73accef3b348559ea144e0b769c98c721", class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup("grip-vertical") })) : null, this.container ? h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(expanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { "disclosure-icon": true, "disclosure-icon--expanded": expanded }, innerHTML: loomaIconMarkup("chevron-down") })) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: "dd2d0550d6846d0a4f80a4108968bfc32c18658f", class: "leading", part: "leading" }, h("slot", { key: "622d449a338dce57bc2e64aaf776471e8d3ce1b4", name: "leading" })), h("span", { key: "29c3e6ace4838ab941ada2547356288358faaeb2", class: "label", part: "label" }, h("slot", { key: "f1594c11fa0b9fbe8a3c20df6edce19421cab148" })), h("span", { key: "e4a6408f86b58a325145e713d116fc09322bb0d3", class: "actions", part: "actions" }, h("slot", { key: "ff3afaf1089426e19ee1fc39c6567c3d40ca4272", name: "actions" })), h("span", { key: "efcf23f7aad6c4353fa24bfe2a81001122335f72", class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? h("div", { class: "children", part: "children", role: "group", hidden: !expanded }, h("slot", { name: "children" })) : null, h("span", { key: "21bfc8a6ad6e487cd044b5a3cbd7e8f900f2d1e1", class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" }));
132
+ } }, h("div", { key: "2f16d97219ba9ec9e37688d97ad9144508aa1ed5", class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup("grip-vertical") })) : null, this.container ? h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(expanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { "disclosure-icon": true, "disclosure-icon--expanded": expanded }, innerHTML: loomaIconMarkup("chevron-down") })) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: "d984631c891df304edb3e1dc5bcd19af3ad8e20d", class: "leading", part: "leading" }, h("slot", { key: "81a0e055859df5d4daaa6dac39013b23dcc2831b", name: "leading" })), h("span", { key: "3ae295523d5a3b9feaa9bfaa16d807349e37d78b", class: "label", part: "label" }, h("slot", { key: "db8503a41d087d283074a41e76fa872ff4b2a707" })), h("span", { key: "ac5b5db7128b31a9263b912bd64cd90ac640eaeb", class: "actions", part: "actions" }, h("slot", { key: "c8842a5d80215ec297688c86f6bfe9b4d9bed333", name: "actions" })), h("span", { key: "b7f239bc16867678291850ad61a5cd752d6a7425", class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? h("div", { class: "children", part: "children", role: "group", hidden: !expanded }, h("slot", { name: "children" })) : null, h("span", { key: "2a5f448db2f4f363a34a1a950785e0ee12cc9938", class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" }));
133
133
  }
134
134
  static get watchers() {
135
135
  return {
@@ -6,7 +6,7 @@ import {
6
6
  getElement,
7
7
  h,
8
8
  registerInstance
9
- } from "./chunk-IMHSPETJ.js";
9
+ } from "./chunk-XRJRF3MM.js";
10
10
 
11
11
  // dist/esm/ui-tree.entry.js
12
12
  function classifyDropPosition(rect, clientY, acceptsChildren) {
@@ -461,7 +461,7 @@ var UITree = class {
461
461
  }
462
462
  };
463
463
  render() {
464
- return h(Host, { key: "549c09abc67dc60b16bf2d6b7d6346f214e9d6ae", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "fea59bde97611bf384e32ce4fb2b3eec9aca784f" }));
464
+ return h(Host, { key: "7efbf793fe63471006df57f0045a5fe995c81440", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "1804e391796e7451c93cb58258e0e23ec3ad98c7" }));
465
465
  }
466
466
  };
467
467
  UITree.style = uiTreeCss();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.1.24",
3
+ "version": "0.1.26",
4
4
  "type": "module",
5
5
  "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
6
6
  "license": "MIT",
@@ -109,6 +109,7 @@ var Combobox = defineComponent2({
109
109
  placeholder: String,
110
110
  name: String,
111
111
  size: { type: String, default: "md" },
112
+ labelVisibility: { type: String, default: "visible" },
112
113
  disabled: Boolean,
113
114
  readOnly: Boolean,
114
115
  required: Boolean,
@@ -170,13 +171,93 @@ var Combobox = defineComponent2({
170
171
  required: props.required
171
172
  })]),
172
173
  ...slots.option ? rows.value.map((option) => h2("div", { slot: `option-${option.id}`, key: option.id }, slots.option({ option }))) : [],
173
- ...["loading", "empty", "error", "create"].flatMap((name) => slots[name] ? [h2("div", { slot: name }, slots[name]({}))] : [])
174
+ ...["start", "footer", "loading", "empty", "error", "create"].flatMap((name) => slots[name] ? [h2("div", { slot: name }, slots[name]({}))] : [])
175
+ ]);
176
+ }
177
+ });
178
+
179
+ // src/MultiCombobox.ts
180
+ import { defineComponent as defineComponent3, h as h3, shallowRef as shallowRef3, watch, watchEffect as watchEffect3 } from "vue";
181
+ var MultiCombobox = defineComponent3({
182
+ name: "MultiCombobox",
183
+ inheritAttrs: false,
184
+ props: {
185
+ label: { type: String, required: true },
186
+ items: { type: Array, default: () => [] },
187
+ config: { type: Object, default: () => ({}) },
188
+ query: { type: String, default: void 0 },
189
+ defaultQuery: String,
190
+ tokenSeparators: { type: Array, default: () => [] },
191
+ placeholder: String,
192
+ name: String,
193
+ disabled: Boolean,
194
+ readOnly: Boolean,
195
+ required: Boolean
196
+ },
197
+ emits: {
198
+ "update:query": (_query) => true,
199
+ queryChange: (_detail) => true,
200
+ addItem: (_detail) => true,
201
+ removeItem: (_detail) => true,
202
+ createItem: (_detail) => true,
203
+ optionsChange: (_detail) => true
204
+ },
205
+ slots: Object,
206
+ setup(props, { attrs, slots, emit, expose }) {
207
+ const element = shallowRef3();
208
+ const rows = shallowRef3(props.config.options ?? []);
209
+ const currentQuery = shallowRef3(props.query ?? props.defaultQuery ?? "");
210
+ watch(() => props.query, (query) => {
211
+ if (query !== void 0) currentQuery.value = query;
212
+ });
213
+ watchEffect3(() => {
214
+ if (!element.value) return;
215
+ element.value.items = props.items;
216
+ element.value.config = props.config;
217
+ element.value.query = props.query;
218
+ element.value.tokenSeparators = props.tokenSeparators;
219
+ });
220
+ expose({ focusInput: () => element.value.focusInput() });
221
+ return () => h3("ui-multi-combobox", {
222
+ ...attrs,
223
+ ...Object.fromEntries(Object.entries(props).filter(([key]) => !["items", "config", "query", "tokenSeparators"].includes(key))),
224
+ items: props.items,
225
+ config: props.config,
226
+ query: props.query,
227
+ tokenSeparators: props.tokenSeparators,
228
+ "data-allow-mismatch": "class",
229
+ ref: element,
230
+ class: [attrs.class, element.value?.shadowRoot && "hydrated"],
231
+ "onOptions-change": (event) => {
232
+ rows.value = event.detail;
233
+ emit("optionsChange", event.detail);
234
+ },
235
+ "onQuery-change": (event) => {
236
+ currentQuery.value = event.detail.query;
237
+ emit("update:query", event.detail.query);
238
+ emit("queryChange", event.detail);
239
+ },
240
+ "onAdd-item": (event) => emit("addItem", event.detail),
241
+ "onRemove-item": (event) => emit("removeItem", event.detail),
242
+ "onCreate-item": (event) => emit("createItem", event.detail)
243
+ }, [
244
+ h3("label", { slot: "fallback" }, [props.label, h3("input", {
245
+ value: props.query ?? props.defaultQuery ?? "",
246
+ disabled: props.disabled,
247
+ readonly: props.readOnly,
248
+ required: props.required
249
+ })]),
250
+ ...slots.item ? props.items.map((item) => h3("span", { slot: `item-${item.id}`, key: item.id }, slots.item({ item }))) : [],
251
+ ...slots.option ? rows.value.map((option) => h3("span", { slot: `option-${option.id}`, key: option.id }, slots.option({ option }))) : [],
252
+ ...slots.create ? [h3("span", { slot: "create" }, slots.create({ query: currentQuery.value }))] : [],
253
+ ...["footer", "loading", "empty", "error"].flatMap((name) => slots[name] ? [h3("div", { slot: name }, slots[name]({}))] : [])
174
254
  ]);
175
255
  }
176
256
  });
177
257
 
178
258
  // src/index.ts
179
259
  var Combobox2 = Combobox;
260
+ var MultiCombobox2 = MultiCombobox;
180
261
  var Stack = createAdapterComponent("ui-stack", "Stack");
181
262
  var Inline = createAdapterComponent("ui-inline", "Inline");
182
263
  var Cluster = createAdapterComponent("ui-cluster", "Cluster");
@@ -187,6 +268,7 @@ var Sidebar = createAdapterComponent("ui-sidebar", "Sidebar", [], "");
187
268
  var Reel = createAdapterComponent("ui-reel", "Reel");
188
269
  var Separator = createAdapterComponent("ui-separator", "Separator");
189
270
  var Disclosure = createAdapterComponent("ui-disclosure", "Disclosure", [], "class", ["open"]);
271
+ var Editable = createAdapterComponent("ui-editable", "Editable", [["edit-change", "onEditChange"]], "class", ["edit"]);
190
272
  var Tabs = createAdapterComponent("ui-tabs", "Tabs", [], "class", ["value"]);
191
273
  var Dialog = createAdapterComponent("ui-dialog", "Dialog", [], "class", ["open"]);
192
274
  var Popover = createAdapterComponent("ui-popover", "Popover", [], "class", ["open"]);
@@ -231,6 +313,7 @@ var TreeItem = createAdapterComponent(
231
313
  );
232
314
  var ADAPTER_COMPONENT_TAG_MAP = {
233
315
  Combobox: "ui-combobox",
316
+ MultiCombobox: "ui-multi-combobox",
234
317
  Stack: "ui-stack",
235
318
  Inline: "ui-inline",
236
319
  Cluster: "ui-cluster",
@@ -241,6 +324,7 @@ var ADAPTER_COMPONENT_TAG_MAP = {
241
324
  Reel: "ui-reel",
242
325
  Separator: "ui-separator",
243
326
  Disclosure: "ui-disclosure",
327
+ Editable: "ui-editable",
244
328
  Tabs: "ui-tabs",
245
329
  Dialog: "ui-dialog",
246
330
  Popover: "ui-popover",
@@ -278,6 +362,7 @@ export {
278
362
  toHTMLElement,
279
363
  createAdapterComponent,
280
364
  Combobox2 as Combobox,
365
+ MultiCombobox2 as MultiCombobox,
281
366
  Stack,
282
367
  Inline,
283
368
  Cluster,
@@ -288,6 +373,7 @@ export {
288
373
  Reel,
289
374
  Separator,
290
375
  Disclosure,
376
+ Editable,
291
377
  Tabs,
292
378
  Dialog,
293
379
  Popover,
@@ -3,7 +3,7 @@ import {
3
3
  Popover,
4
4
  createAdapterComponent,
5
5
  toHTMLElement
6
- } from "../chunk-D4AJULDE.js";
6
+ } from "../chunk-2DDIBSFD.js";
7
7
 
8
8
  // src/editor/index.ts
9
9
  import "@threadlabs/looma/editor";
package/vue/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as _threadlabs_looma_core from '@threadlabs/looma/core';
2
- export { ComboboxChange, ComboboxConfig, ComboboxOption, ComboboxProvider, ComboboxRequest, ComboboxValidationState, FieldFormatter, FieldIssue, FieldSchema, FieldValidation } from '@threadlabs/looma/core';
2
+ import { EditableChange } from '@threadlabs/looma/core';
3
+ export { ComboboxChange, ComboboxConfig, ComboboxOption, ComboboxProvider, ComboboxRequest, ComboboxValidationState, EditableChange, FieldFormatter, FieldIssue, FieldSchema, FieldValidation, MultiComboboxCreate, MultiComboboxItem, MultiComboboxItemChange } from '@threadlabs/looma/core';
3
4
  import * as vue from 'vue';
4
5
 
5
6
  interface VueAdapterEventMap {
@@ -56,6 +57,7 @@ interface VueAdapterEventMap {
56
57
  expanded: boolean;
57
58
  trigger: string;
58
59
  };
60
+ editChange: EditableChange;
59
61
  }
60
62
 
61
63
  interface AdapterBaseProps {
@@ -112,6 +114,12 @@ interface DisclosureProps extends AdapterBaseProps {
112
114
  "onClose"?: ((detail: VueAdapterEventMap['close']) => void) | undefined;
113
115
  "onOpen"?: ((detail: VueAdapterEventMap['open']) => void) | undefined;
114
116
  }
117
+ interface EditableProps extends AdapterBaseProps {
118
+ "edit"?: boolean | undefined;
119
+ "defaultEdit"?: boolean | undefined;
120
+ "disabled"?: boolean | undefined;
121
+ "onEditChange"?: ((detail: VueAdapterEventMap['editChange']) => void) | undefined;
122
+ }
115
123
  interface TabsProps extends AdapterBaseProps {
116
124
  "defaultValue"?: string | undefined;
117
125
  "orientation"?: "horizontal" | "vertical" | undefined;
@@ -248,6 +256,7 @@ interface BadgeProps extends AdapterBaseProps {
248
256
  }
249
257
  interface ChipProps extends AdapterBaseProps {
250
258
  "appearance"?: "tag" | "pill" | undefined;
259
+ "size"?: "xs" | "sm" | undefined;
251
260
  }
252
261
  interface CalloutProps extends AdapterBaseProps {
253
262
  "tone"?: "info" | "note" | "warning" | "success" | "error" | undefined;
@@ -308,6 +317,7 @@ interface AdapterComponentProps {
308
317
  "Reel": ReelProps;
309
318
  "Separator": SeparatorProps;
310
319
  "Disclosure": DisclosureProps;
320
+ "Editable": EditableProps;
311
321
  "Tabs": TabsProps;
312
322
  "Dialog": DialogProps;
313
323
  "Popover": PopoverProps;
@@ -365,6 +375,10 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
365
375
  type: vue.PropType<"sm" | "md">;
366
376
  default: string;
367
377
  };
378
+ labelVisibility: {
379
+ type: vue.PropType<"visible" | "sr-only">;
380
+ default: string;
381
+ };
368
382
  disabled: BooleanConstructor;
369
383
  readOnly: BooleanConstructor;
370
384
  required: BooleanConstructor;
@@ -411,6 +425,10 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
411
425
  type: vue.PropType<"sm" | "md">;
412
426
  default: string;
413
427
  };
428
+ labelVisibility: {
429
+ type: vue.PropType<"visible" | "sr-only">;
430
+ default: string;
431
+ };
414
432
  disabled: BooleanConstructor;
415
433
  readOnly: BooleanConstructor;
416
434
  required: BooleanConstructor;
@@ -440,6 +458,7 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
440
458
  query: string;
441
459
  config: _threadlabs_looma_core.ComboboxConfig;
442
460
  size: "sm" | "md";
461
+ labelVisibility: "visible" | "sr-only";
443
462
  }, vue.SlotsType<{
444
463
  option: {
445
464
  option: _threadlabs_looma_core.ComboboxOption;
@@ -448,6 +467,109 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
448
467
  empty: Record<string, never>;
449
468
  error: Record<string, never>;
450
469
  create: Record<string, never>;
470
+ start: Record<string, never>;
471
+ footer: Record<string, never>;
472
+ }>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
473
+ declare const MultiCombobox: vue.DefineComponent<vue.ExtractPropTypes<{
474
+ label: {
475
+ type: StringConstructor;
476
+ required: true;
477
+ };
478
+ items: {
479
+ type: vue.PropType<readonly _threadlabs_looma_core.MultiComboboxItem[]>;
480
+ default: () => never[];
481
+ };
482
+ config: {
483
+ type: vue.PropType<_threadlabs_looma_core.ComboboxConfig>;
484
+ default: () => {};
485
+ };
486
+ query: {
487
+ type: StringConstructor;
488
+ default: undefined;
489
+ };
490
+ defaultQuery: StringConstructor;
491
+ tokenSeparators: {
492
+ type: vue.PropType<readonly string[]>;
493
+ default: () => never[];
494
+ };
495
+ placeholder: StringConstructor;
496
+ name: StringConstructor;
497
+ disabled: BooleanConstructor;
498
+ readOnly: BooleanConstructor;
499
+ required: BooleanConstructor;
500
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
501
+ [key: string]: any;
502
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
503
+ 'update:query': (_query: string) => true;
504
+ queryChange: (_detail: {
505
+ query: string;
506
+ display: string;
507
+ trigger: string;
508
+ }) => true;
509
+ addItem: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => true;
510
+ removeItem: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => true;
511
+ createItem: (_detail: _threadlabs_looma_core.MultiComboboxCreate) => true;
512
+ optionsChange: (_detail: readonly _threadlabs_looma_core.ComboboxOption[]) => true;
513
+ }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
514
+ label: {
515
+ type: StringConstructor;
516
+ required: true;
517
+ };
518
+ items: {
519
+ type: vue.PropType<readonly _threadlabs_looma_core.MultiComboboxItem[]>;
520
+ default: () => never[];
521
+ };
522
+ config: {
523
+ type: vue.PropType<_threadlabs_looma_core.ComboboxConfig>;
524
+ default: () => {};
525
+ };
526
+ query: {
527
+ type: StringConstructor;
528
+ default: undefined;
529
+ };
530
+ defaultQuery: StringConstructor;
531
+ tokenSeparators: {
532
+ type: vue.PropType<readonly string[]>;
533
+ default: () => never[];
534
+ };
535
+ placeholder: StringConstructor;
536
+ name: StringConstructor;
537
+ disabled: BooleanConstructor;
538
+ readOnly: BooleanConstructor;
539
+ required: BooleanConstructor;
540
+ }>> & Readonly<{
541
+ "onUpdate:query"?: (_query: string) => any;
542
+ onQueryChange?: (_detail: {
543
+ query: string;
544
+ display: string;
545
+ trigger: string;
546
+ }) => any;
547
+ onAddItem?: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => any;
548
+ onRemoveItem?: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => any;
549
+ onCreateItem?: (_detail: _threadlabs_looma_core.MultiComboboxCreate) => any;
550
+ onOptionsChange?: (_detail: readonly _threadlabs_looma_core.ComboboxOption<unknown>[]) => any;
551
+ }>, {
552
+ disabled: boolean;
553
+ readOnly: boolean;
554
+ required: boolean;
555
+ query: string;
556
+ config: _threadlabs_looma_core.ComboboxConfig;
557
+ items: readonly _threadlabs_looma_core.MultiComboboxItem[];
558
+ tokenSeparators: readonly string[];
559
+ }, vue.SlotsType<{
560
+ item: {
561
+ item: _threadlabs_looma_core.MultiComboboxItem;
562
+ };
563
+ option: {
564
+ option: _threadlabs_looma_core.ComboboxOption;
565
+ };
566
+ create: {
567
+ query: string;
568
+ };
569
+ footer: Record<string, never>;
570
+ loading: Record<string, never>;
571
+ empty: Record<string, never>;
572
+ error: Record<string, never>;
451
573
  }>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
452
574
 
453
575
  declare const Stack: vue.DefineComponent<StackProps>;
@@ -460,6 +582,7 @@ declare const Sidebar: vue.DefineComponent<SidebarProps>;
460
582
  declare const Reel: vue.DefineComponent<ReelProps>;
461
583
  declare const Separator: vue.DefineComponent<SeparatorProps>;
462
584
  declare const Disclosure: vue.DefineComponent<DisclosureProps>;
585
+ declare const Editable: vue.DefineComponent<EditableProps>;
463
586
  declare const Tabs: vue.DefineComponent<TabsProps>;
464
587
  declare const Dialog: vue.DefineComponent<DialogProps>;
465
588
  declare const Popover: vue.DefineComponent<PopoverProps>;
@@ -492,6 +615,7 @@ declare const Tree: vue.DefineComponent<TreeProps>;
492
615
  declare const TreeItem: vue.DefineComponent<TreeItemProps>;
493
616
  declare const ADAPTER_COMPONENT_TAG_MAP: {
494
617
  readonly Combobox: "ui-combobox";
618
+ readonly MultiCombobox: "ui-multi-combobox";
495
619
  readonly Stack: "ui-stack";
496
620
  readonly Inline: "ui-inline";
497
621
  readonly Cluster: "ui-cluster";
@@ -502,6 +626,7 @@ declare const ADAPTER_COMPONENT_TAG_MAP: {
502
626
  readonly Reel: "ui-reel";
503
627
  readonly Separator: "ui-separator";
504
628
  readonly Disclosure: "ui-disclosure";
629
+ readonly Editable: "ui-editable";
505
630
  readonly Tabs: "ui-tabs";
506
631
  readonly Dialog: "ui-dialog";
507
632
  readonly Popover: "ui-popover";
@@ -535,4 +660,4 @@ declare const ADAPTER_COMPONENT_TAG_MAP: {
535
660
  };
536
661
  declare const VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custom elements and DOM events map to typed callbacks.";
537
662
 
538
- export { ADAPTER_COMPONENT_TAG_MAP, type AdapterBaseProps, type AdapterComponentProps, AffordanceScope, type AffordanceScopeProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Callout, type CalloutProps, Center, type CenterProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Cluster, type ClusterProps, Combobox, ContextMenu, type ContextMenuProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, FloatingActionButton, type FloatingActionButtonProps, FormField, type FormFieldProps, Grid, type GridProps, IconButton, type IconButtonProps, Inline, type InlineProps, Input, type InputProps, Menu, MenuItem, type MenuItemProps, type MenuProps, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Reel, type ReelProps, SearchResultRow, type SearchResultRowProps, SearchShell, type SearchShellProps, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarProps, Stack, type StackProps, Switch, type SwitchProps, Switcher, type SwitcherProps, Tabs, type TabsProps, Textarea, type TextareaProps, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tree, TreeItem, type TreeItemProps, type TreeProps, VUE_ADAPTER_NOTE, type VueAdapterEventMap };
663
+ export { ADAPTER_COMPONENT_TAG_MAP, type AdapterBaseProps, type AdapterComponentProps, AffordanceScope, type AffordanceScopeProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Callout, type CalloutProps, Center, type CenterProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Cluster, type ClusterProps, Combobox, ContextMenu, type ContextMenuProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, Editable, type EditableProps, FloatingActionButton, type FloatingActionButtonProps, FormField, type FormFieldProps, Grid, type GridProps, IconButton, type IconButtonProps, Inline, type InlineProps, Input, type InputProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MultiCombobox, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Reel, type ReelProps, SearchResultRow, type SearchResultRowProps, SearchShell, type SearchShellProps, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarProps, Stack, type StackProps, Switch, type SwitchProps, Switcher, type SwitcherProps, Tabs, type TabsProps, Textarea, type TextareaProps, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tree, TreeItem, type TreeItemProps, type TreeProps, VUE_ADAPTER_NOTE, type VueAdapterEventMap };
package/vue/index.js CHANGED
@@ -14,6 +14,7 @@ import {
14
14
  ContextMenu,
15
15
  Dialog,
16
16
  Disclosure,
17
+ Editable,
17
18
  FloatingActionButton,
18
19
  FormField,
19
20
  Grid,
@@ -22,6 +23,7 @@ import {
22
23
  Input,
23
24
  Menu,
24
25
  MenuItem,
26
+ MultiCombobox,
25
27
  Popover,
26
28
  Radio,
27
29
  RadioGroup,
@@ -42,7 +44,7 @@ import {
42
44
  Tree,
43
45
  TreeItem,
44
46
  VUE_ADAPTER_NOTE
45
- } from "./chunk-D4AJULDE.js";
47
+ } from "./chunk-2DDIBSFD.js";
46
48
  export {
47
49
  ADAPTER_COMPONENT_TAG_MAP,
48
50
  AffordanceScope,
@@ -59,6 +61,7 @@ export {
59
61
  ContextMenu,
60
62
  Dialog,
61
63
  Disclosure,
64
+ Editable,
62
65
  FloatingActionButton,
63
66
  FormField,
64
67
  Grid,
@@ -67,6 +70,7 @@ export {
67
70
  Input,
68
71
  Menu,
69
72
  MenuItem,
73
+ MultiCombobox,
70
74
  Popover,
71
75
  Radio,
72
76
  RadioGroup,
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-BHG9Rpil.js');
4
-
5
- const uiChipCss = () => `:host{--ui-chip-surface:var(--ui-surface-subtle);--ui-chip-text:var(--ui-text-secondary);--ui-chip-border:var(--ui-border-default);--ui-chip-font-size:var(--ui-font-size-xs);--ui-chip-font-weight:var(--ui-font-normal);--ui-chip-line-height:var(--ui-line-height-tight);--ui-chip-padding-block:var(--ui-space-0-5);--ui-chip-padding-inline:var(--ui-space-2);--ui-chip-notch:var(--ui-space-1);display:inline-flex;max-width:100%}.chip__surface{display:inline-flex;align-items:center;max-width:100%;padding:var(--ui-chip-padding-block) var(--ui-chip-padding-inline);border:1px solid var(--ui-chip-border);background:var(--ui-chip-surface);color:var(--ui-chip-text) !important;font-family:var(--ui-font-family-sans) !important;font-size:var(--ui-chip-font-size) !important;font-weight:var(--ui-chip-font-weight) !important;line-height:var(--ui-chip-line-height) !important;white-space:nowrap}:host([data-appearance='pill']) .chip__surface{border-radius:var(--ui-radius-round)}:host([data-appearance='tag']) .chip__surface{border:0;padding-inline-end:calc(var(--ui-chip-padding-inline) + var(--ui-chip-notch));clip-path:polygon(0 0, calc(100% - var(--ui-chip-notch)) 0, 100% 50%, calc(100% - var(--ui-chip-notch)) 100%, 0 100%)}`;
6
-
7
- const UIChip = class {
8
- constructor(hostRef) {
9
- index.registerInstance(this, hostRef);
10
- }
11
- /** `tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded. */
12
- appearance = 'tag';
13
- render() {
14
- return (index.h(index.Host, { key: 'fe1246a1e698098f0ca9cb04e749d5adf233e50c', "data-appearance": this.appearance }, index.h("span", { key: 'a17237699b9eb20fb0a084adbd900a3aa9bc12b0', class: "chip__surface" }, index.h("slot", { key: '7f4e5dcc82d360083d4ded2617fa39a9dc1fd3ef' }))));
15
- }
16
- };
17
- UIChip.style = uiChipCss();
18
-
19
- exports.ui_chip = UIChip;