@threadlabs/looma 0.32.1 → 0.33.0

package/vue/editor/index.js

@@ -593,7 +593,7 @@ function createAnchoredSurface$1(surface, options = {}) {
 		});
 	};
 	surface.style.position = "fixed";
-	surface.style.margin = "0";
+	surface.style.setProperty("margin", "0", "important");
 	const presentation = createViewportSurface$1(surface, {
 		position,
 		bare: options.bare
@@ -4931,7 +4931,7 @@ function createAnchoredSurface(surface, options = {}) {
 		});
 	};
 	surface.style.position = "fixed";
-	surface.style.margin = "0";
+	surface.style.setProperty("margin", "0", "important");
 	const presentation = createViewportSurface(surface, {
 		position,
 		bare: options.bare
@@ -5473,9 +5473,13 @@ function connect$9(host) {
 	};
 	const wire = () => {
 		const label = element.querySelector("[slot=\"label\"], label");
-		const input = element.querySelector("input, textarea, select");
-		const help = element.querySelector(":scope > .help > *, [slot=\"help\"]");
-		const error = element.querySelector(":scope > .error > *, [slot=\"error\"], [role=\"alert\"]");
+		const selector = "[data-ui-field-control], input:not([type=hidden]), textarea, select";
+		const target = label?.getAttribute("for") ? element.ownerDocument.getElementById(label.getAttribute("for")) : null;
+		const input = (target && element.contains(target) ? target.matches(selector) ? target : target.querySelector(selector) : null) ?? element.querySelector(selector);
+		const helpRegion = element.querySelector(":scope > .help");
+		const help = element.querySelector(":scope > .help > *, [slot=\"help\"]") ?? (helpRegion?.textContent.trim() ? helpRegion : null);
+		const errorRegion = element.querySelector(":scope > .error");
+		const error = element.querySelector(":scope > .error > *, [slot=\"error\"], [role=\"alert\"]") ?? (errorRegion?.textContent.trim() ? errorRegion : null);
 		if (input !== activeInput) {
 			removeOwned(activeInput);
 			activeInput = input;
@@ -5484,7 +5488,7 @@ function connect$9(host) {
 		if (!input) return;
 		if (DEV) warnOnce(warned, fieldProblems(label, input), element);
 		if (!input.id) input.id = id("form-field-input");
-		if (label && !label.getAttribute("for")) label.setAttribute("for", input.id);
+		if (label && (!label.getAttribute("for") || target && target !== input && target.contains(input))) label.setAttribute("for", input.id);
 		const external = descriptionIds(input).filter((value) => !owned.has(value));
 		const described = [];
 		if (help) {
@@ -5500,6 +5504,7 @@ function connect$9(host) {
 		if (next && input.getAttribute("aria-describedby") !== next) input.setAttribute("aria-describedby", next);
 		else if (!next && input.hasAttribute("aria-describedby")) input.removeAttribute("aria-describedby");
 		input.disabled = Boolean(host.props.disabled.value);
+		if (input.matches("[data-ui-field-control]")) for (const value of element.querySelectorAll("[data-ui-field-value]")) value.disabled = input.disabled;
 		input.required = Boolean(host.props.required.value);
 		input.setAttribute("aria-invalid", String(Boolean(host.props.invalid.value)));
 	};
@@ -6671,6 +6676,10 @@ function createUiIcon(options = {}, html) {
 			"tag": "path",
 			"d": "M3 9h18"
 		}],
+		"paperclip": [{
+			"tag": "path",
+			"d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"
+		}],
 		"pencil": [{
 			"tag": "path",
 			"d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
@@ -16221,8 +16230,10 @@ var LoomaEditor = defineComponent({
 					style: mobileToolbarStyle.value,
 					role: "toolbar",
 					"aria-label": mobileToolbarMode.value === "table" ? "Table editing" : "Text formatting"
-				}, mobileToolbarMode.value === "table" ? [h("button", {
-					class: "looma-editor__mobile-toolbar-back",
+				}, mobileToolbarMode.value === "table" ? [h(Button, {
+					size: "sm",
+					variant: "ghost",
+					tone: "neutral",
 					type: "button",
 					"aria-label": "Formatting tools",
 					onClick: () => {
@@ -16230,7 +16241,10 @@ var LoomaEditor = defineComponent({
 						editor.value?.commands.focus();
 						nextTick(updateMobileViewport);
 					}
-				}, [loomaIcon("chevron-left"), h("span", "Formatting")]), h(EditorTableToolbar, tableProps)] : [renderToolbar(instance)]) : null,
+				}, {
+					start: () => loomaIcon("chevron-left"),
+					default: () => "Formatting"
+				}), h(EditorTableToolbar, tableProps)] : [renderToolbar(instance)]) : null,
 				h("input", {
 					ref: fileInput,
 					class: "looma-editor__file-input",
@@ -16268,13 +16282,16 @@ var LoomaEditor = defineComponent({
 				uploadState.value.failed ? h("div", {
 					class: "looma-editor__upload-error",
 					role: "alert"
-				}, [h("span", "Couldn’t upload image."), h("button", {
+				}, [h("span", "Couldn’t upload image."), h(Button, {
+					size: "sm",
+					variant: "ghost",
+					tone: "neutral",
 					type: "button",
 					disabled: uploadState.value.uploading,
 					onClick: () => {
 						uploads?.retry();
 					}
-				}, uploadState.value.uploading ? "Retrying…" : "Retry")]) : null,
+				}, () => uploadState.value.uploading ? "Retrying…" : "Retry")]) : null,
 				dragOver.value ? h("div", {
 					class: "looma-editor__drop-overlay",
 					"aria-hidden": "true"

package/vue/index.d.ts

@@ -10,6 +10,7 @@ export { default as Callout } from "./UiCallout.js";
 export { default as Card } from "./UiCard.js";
 export { default as Checkbox } from "./UiCheckbox.js";
 export { default as Cluster } from "./UiCluster.js";
+export { default as ColorPicker } from "./UiColorPicker.js";
 export { default as Combobox } from "./UiCombobox.js";
 export { default as Container } from "./UiContainer.js";
 export { default as ContextMenu } from "./UiContextMenu.js";

package/vue/index.js

@@ -12,6 +12,8 @@ import { t as UiCallout_default } from "./chunks/UiCallout.js";
 import { t as UiCard_default } from "./chunks/UiCard.js";
 import { t as UiCheckbox_default } from "./chunks/UiCheckbox.js";
 import { t as UiCluster_default } from "./chunks/UiCluster.js";
+import { t as UiInput_default } from "./chunks/UiInput.js";
+import { t as UiColorPicker_default } from "./chunks/UiColorPicker.js";
 import { t as UiTooltip_default } from "./chunks/UiTooltip.js";
 import { t as UiCombobox_default } from "./chunks/UiCombobox.js";
 import { t as UiContainer_default } from "./chunks/UiContainer.js";
@@ -26,7 +28,6 @@ import { t as UiEditable_default } from "./chunks/UiEditable.js";
 import { t as UiMenu_default } from "./chunks/UiMenu.js";
 import { t as UiMenuItem_default } from "./chunks/UiMenuItem.js";
 import { t as UiEditorBlockActions_default } from "./chunks/UiEditorBlockActions.js";
-import { t as UiInput_default } from "./chunks/UiInput.js";
 import { t as UiRadioGroup_default } from "./chunks/UiRadioGroup.js";
 import { t as UiStack_default } from "./chunks/UiStack.js";
 import { t as UiSwatch_default } from "./chunks/UiSwatch.js";
@@ -82,4 +83,4 @@ import { t as UiTopBar_default } from "./chunks/UiTopBar.js";
 import { t as UiTree_default } from "./chunks/UiTree.js";
 import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
 import { trackInputModality } from "@threadlabs/looma/components/shared/input-modality.js";
-export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorFootnoteEditor_default as EditorFootnoteEditor, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
+export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiColorPicker_default as ColorPicker, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorFootnoteEditor_default as EditorFootnoteEditor, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };