@threadlabs/looma 0.23.1 → 0.23.3

package/package.json

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

package/styles/ui-scroll-area.css

@@ -38,7 +38,7 @@
     }
 
     :scope[data-ui-scroll-area-state~="size=sm"] {
-      max-block-size: 9.375rem;
+      max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
     }
     :scope[data-ui-scroll-area-state~="size=md"] {
       max-block-size: 20rem;

package/vue/UiScrollArea.vue

@@ -23,7 +23,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows, md is 20rem, and lg is 30rem.',
+        'Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows before the overflow fade, md is 20rem, and lg is\n      30rem.',
       values: ['content', 'sm', 'md', 'lg'],
       default: 'content',
     },
@@ -201,7 +201,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
 }
 
 [data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=sm"] {
-  max-block-size: 9.375rem;
+  max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
 }
 [data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=md"] {
   max-block-size: 20rem;

package/vue/chunks/UiScrollArea.js

@@ -47,7 +47,7 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				},
 				required: false,
 				target: { attribute: "size" },
-				description: "Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows, md is 20rem, and lg is 30rem.",
+				description: "Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows before the overflow fade, md is 20rem, and lg is\n      30rem.",
 				values: [
 					"content",
 					"sm",
@@ -140,6 +140,6 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-97150230"]]);
+}), [["__scopeId", "data-v-c514834a"]]);
 //#endregion
 export { UiScrollArea_default as t };

package/vue/components.css

@@ -2340,7 +2340,7 @@ dd[data-v-7a7db3d1] {
 /* The controller sets each fade length from overflow and scroll position. The mask blends
        into whatever is behind the area without needing to know its colour. Before upgrade, its
        zero-length defaults leave the authored scroll area fully visible. */
-[data-component~="ui-scroll-area"][data-v-97150230] {
+[data-component~="ui-scroll-area"][data-v-c514834a] {
   display: block;
   box-sizing: border-box;
   min-block-size: 0;
@@ -2359,29 +2359,29 @@ dd[data-v-7a7db3d1] {
     transparent
   );
 }
-.content[data-v-97150230] {
+.content[data-v-c514834a] {
   display: flow-root;
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="orientation=horizontal"][data-v-97150230] {
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="orientation=horizontal"][data-v-c514834a] {
   overflow-x: auto;
   overflow-y: hidden;
   --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
 }
-[data-component~="ui-scroll-area"][data-v-97150230]:dir(rtl) {
+[data-component~="ui-scroll-area"][data-v-c514834a]:dir(rtl) {
   --_ui-scroll-fade-inline: to left;
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=sm"][data-v-97150230] {
-  max-block-size: 9.375rem;
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=sm"][data-v-c514834a] {
+  max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=md"][data-v-97150230] {
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=md"][data-v-c514834a] {
   max-block-size: 20rem;
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=lg"][data-v-97150230] {
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=lg"][data-v-c514834a] {
   max-block-size: 30rem;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-scroll-area"][hidden][data-v-97150230] {
+[data-component~="ui-scroll-area"][hidden][data-v-c514834a] {
   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,