@threadlabs/looma 0.23.2 → 0.23.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.23.2",
+  "version": "0.23.4",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vanilla/UiTree.d.ts

@@ -2,6 +2,7 @@
 export interface UiTreeEventMap {
   reorder: CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly sourceType: string; readonly targetType: string; readonly sourceScope: string; readonly targetScope: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "reorder-rejected": CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly reason: "max-depth"; readonly maxDepth: number; readonly resultingDepth: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  activate: CustomEvent<{ readonly id: string; readonly trigger: "keyboard" | "pointer" }>;
   select: CustomEvent<{ readonly ids: readonly (string)[]; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }
 export interface UiTreeElement extends HTMLDivElement {

package/vanilla/UiTree.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tree/ui-tree.js";
 import "../styles/ui-tree.css";
 
-const definition = {...{"contract":{"tag":"ui-tree","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"hoverExpandDelay":{"type":"number","required":false,"target":{"attribute":"hoverexpanddelay"},"default":700},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Tree"},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"maxDepth":{"type":"number","required":false,"target":{"attribute":"maxdepth"},"default":0},"selection":{"type":{"kind":"terminal","name":"keyword"},"values":["none","single","multiple"],"required":false,"target":{"attribute":"selection"},"default":"none"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"tree"}],"children":[{"kind":"slot"}]},"declarations":[{"kind":"event","name":"reorder","type":"object","shape":{"kind":"object","fields":[{"name":"sourceId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"position","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["before","inside","after"]},"optional":false},{"name":"sourceType","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetType","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"sourceScope","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetScope","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-rejected","type":"object","shape":{"kind":"object","fields":[{"name":"sourceId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"position","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["before","inside","after"]},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["max-depth"]},"optional":false},{"name":"maxDepth","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"resultingDepth","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select","type":"object","shape":{"kind":"object","fields":[{"name":"ids","type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tree","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"hoverExpandDelay":{"type":"number","required":false,"target":{"attribute":"hoverexpanddelay"},"default":700},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Tree"},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"maxDepth":{"type":"number","required":false,"target":{"attribute":"maxdepth"},"default":0},"selection":{"type":{"kind":"terminal","name":"keyword"},"values":["none","single","multiple"],"required":false,"target":{"attribute":"selection"},"default":"none"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"tree"}],"children":[{"kind":"slot"}]},"declarations":[{"kind":"event","name":"reorder","type":"object","shape":{"kind":"object","fields":[{"name":"sourceId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"position","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["before","inside","after"]},"optional":false},{"name":"sourceType","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetType","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"sourceScope","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetScope","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-rejected","type":"object","shape":{"kind":"object","fields":[{"name":"sourceId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"targetId","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"position","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["before","inside","after"]},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["max-depth"]},"optional":false},{"name":"maxDepth","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"resultingDepth","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"activate","type":"object","shape":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select","type":"object","shape":{"kind":"object","fields":[{"name":"ids","type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTree(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiTree.d.ts

@@ -33,6 +33,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly ids: readonly (string)[];
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    activate: (event: CustomEvent<{
+        readonly id: string;
+        readonly trigger: "keyboard" | "pointer";
+    }>) => any;
     "update:maxDepth": (value: number) => any;
     reorder: (event: CustomEvent<{
         readonly sourceId: string;
@@ -83,6 +87,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly ids: readonly (string)[];
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    onActivate?: ((event: CustomEvent<{
+        readonly id: string;
+        readonly trigger: "keyboard" | "pointer";
+    }>) => any) | undefined;
     "onUpdate:maxDepth"?: ((value: number) => any) | undefined;
     onReorder?: ((event: CustomEvent<{
         readonly sourceId: string;

package/vue/UiTree.vue

@@ -54,7 +54,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'selection' },
       description:
-        'How selection works. None keeps rows for navigation and expansion; single requests one selected item; multiple shows checkboxes and requests an item with\n      its descendants. The application owns each Tree Item\'s selected state and responds to select.',
+        'How selection works. None keeps rows for navigation and expansion; single requests one selected item; multiple shows checkboxes and requests an item with\n      its descendants. The application owns each Tree Item\'s selected state and responds to select. Single-selection rows also request activate on a row click\n      or Enter, including an already selected row. Space requests selection only; controls and disabled rows do not activate.',
       values: ['none', 'single', 'multiple'],
       default: 'none',
     },
@@ -192,6 +192,7 @@ const emit = defineEmits<{
       }
     >,
   ]
+  activate: [event: CustomEvent<{ readonly id: string; readonly trigger: 'keyboard' | 'pointer' }>]
   select: [
     event: CustomEvent<
       {
@@ -270,6 +271,12 @@ const isReorderRejectedDetail = (detail: unknown): boolean =>
     ['sourceId', 'targetId', 'position', 'reason', 'maxDepth', 'resultingDepth', 'trigger']
       .includes(key)
   )
+const isActivateDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['id'] === 'string'
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer')
+  && Object.keys(detail as object).every((key) => ['id', 'trigger'].includes(key))
 const isSelectDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && (Array.isArray((detail as Record<string, unknown>)['ids'])
@@ -284,6 +291,7 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   checks: {
     reorder: isReorderDetail,
     'reorder-rejected': isReorderRejectedDetail,
+    activate: isActivateDetail,
     select: isSelectDetail,
   },
   modeled: ['maxDepth'],

package/vue/chunks/UiTree.js

@@ -47,6 +47,7 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		"update:maxDepth",
 		"reorder",
 		"reorder-rejected",
+		"activate",
 		"select"
 	],
 	setup(__props, { emit: __emit }) {
@@ -109,7 +110,7 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				},
 				required: false,
 				target: { attribute: "selection" },
-				description: "How selection works. None keeps rows for navigation and expansion; single requests one selected item; multiple shows checkboxes and requests an item with\n      its descendants. The application owns each Tree Item's selected state and responds to select.",
+				description: "How selection works. None keeps rows for navigation and expansion; single requests one selected item; multiple shows checkboxes and requests an item with\n      its descendants. The application owns each Tree Item's selected state and responds to select. Single-selection rows also request activate on a row click\n      or Enter, including an already selected row. Space requests selection only; controls and disabled rows do not activate.",
 				values: [
 					"none",
 					"single",
@@ -205,11 +206,13 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			"resultingDepth",
 			"trigger"
 		].includes(key));
+		const isActivateDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer") && Object.keys(detail).every((key) => ["id", "trigger"].includes(key));
 		const isSelectDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Array.isArray(detail["ids"]) && detail["ids"].every((item) => typeof item === "string") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["ids", "trigger"].includes(key));
 		const dispatch = createDispatch(root, emit, {
 			checks: {
 				reorder: isReorderDetail,
 				"reorder-rejected": isReorderRejectedDetail,
+				activate: isActivateDetail,
 				select: isSelectDetail
 			},
 			modeled: ["maxDepth"]
@@ -260,6 +263,6 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ee69a15a"]]);
+}), [["__scopeId", "data-v-ba04ad17"]]);
 //#endregion
 export { UiTree_default as t };

package/vue/components.css

@@ -8245,17 +8245,17 @@ to {
 
 /* Reaches the items the way density does, so the setting lives on the tree the way a reader
    thinks about it: this list scrolls its long names. */
-[data-component~="ui-tree"][data-ui-tree-state~="marquee"][data-v-ee69a15a] {
+[data-component~="ui-tree"][data-ui-tree-state~="marquee"][data-v-ba04ad17] {
   --_ui-default-tree-item-marquee: 1;
 }
 
 /* The items' defaults for this density: an item's own hook still wins. */
-[data-component~="ui-tree"][data-ui-tree-state~="density=compact"][data-v-ee69a15a] {
+[data-component~="ui-tree"][data-ui-tree-state~="density=compact"][data-v-ba04ad17] {
   --_ui-default-tree-item-min-block-size: var(--ui-control-size-sm);
   --_ui-default-tree-item-font-size: var(--ui-font-size-sm);
   --_ui-default-tree-item-label-padding-block: 0;
 }
-[data-component~="ui-tree"][data-v-ee69a15a] {
+[data-component~="ui-tree"][data-v-ba04ad17] {
   /* Hooks do not inherit: the tree hands its own to its items here, and a tree nested in an item
      starts again from its own settings. */
   --_ui-tree-indent: var(--ui-tree-indent);
@@ -8268,7 +8268,7 @@ to {
   min-inline-size: 0;
   padding-inline-start: var(--ui-tree-gutter, 0px);
 }
-[data-component~="ui-tree"][data-move-mode][data-v-ee69a15a]::after {
+[data-component~="ui-tree"][data-move-mode][data-v-ba04ad17]::after {
   content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
   display: block;
   padding: var(--ui-space-2);
@@ -8277,7 +8277,7 @@ to {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tree"][hidden][data-v-ee69a15a] {
+[data-component~="ui-tree"][hidden][data-v-ba04ad17] {
   display: none;
 }
 

package/vue/editor/index.js

@@ -1839,7 +1839,8 @@ var LoomaEditor = defineComponent({
 				"data-active": instance.isActive("link") ? "true" : "false",
 				onPointerenter: () => showTool(linkTriggerId, "Link", false),
 				onPointerleave: hideTool,
-				onPointerdown: () => {
+				onPointerdown: (event) => {
+					event.preventDefault();
 					linkPopoverAnchorId.value = linkTriggerId;
 					const selection = instance.state.selection;
 					linkPressedSelection = selection.empty ? null : {
@@ -2048,7 +2049,7 @@ var LoomaEditor = defineComponent({
 					value: codeUi.language,
 					onValueChange: (event) => chooseCodeLanguage(event.detail)
 				}, () => codeLanguageOptions.value.map((option) => h("option", { value: option.value }, option.label)))]) : null,
-				instance && props.editable && mobile.value && editorFocused.value ? h("div", {
+				instance && props.editable && mobile.value && (editorFocused.value || linkOpen.value) ? h("div", {
 					ref: mobileToolbarShell,
 					class: "looma-editor__mobile-toolbar-shell",
 					"data-mode": mobileToolbarMode.value,