@threadlabs/looma 0.35.0 → 0.36.0

package/vanilla/UiCurveEditor.d.ts

@@ -2,6 +2,7 @@
 export interface UiCurveEditorEventMap {
   input: CustomEvent<{ readonly value: string }>;
   change: CustomEvent<{ readonly value: string }>;
+  cancel: CustomEvent<{ readonly value: string }>;
 }
 export interface UiCurveEditorElement extends HTMLSpanElement {
   addEventListener<K extends keyof UiCurveEditorEventMap>(type: K, listener: (this: UiCurveEditorElement, event: UiCurveEditorEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;

package/vanilla/UiCurveEditor.js

@@ -5,7 +5,7 @@ import "../styles/ui-curve-editor.css";
 
 const T0 = ["",[],"\n    ",["span",["class","plot-frame","role","group"],["span",["class","plot"],"\n        ",["svg",["viewBox","0 0 100 100","preserveAspectRatio","none","aria-hidden","true"],["path",["class","guide","d","M0 66.667 H100 M0 33.333 H100"]],["path",["class","guide","d","M0 66.667 L25 63.333"]],["path",["class","guide","d","M100 33.333 L25 33.333"]],["path",["d","M0 66.667 C25 63.333 25 33.333 100 33.333"]]],"\n        ",["button",["class","handle","type","button","aria-label","First curve handle. Arrow keys adjust; Shift moves faster."],"\n        "],"\n        ",["button",["class","handle second","type","button","aria-label","Second curve handle. Arrow keys adjust; Shift moves faster."],"\n        "],"\n      "]],"\n    ",["span",["class","coordinates"],"\n      ",["span",["class","coordinate"],["span",[],"X1"],["ui-number-input",["data-curve-coordinate","0","min","0","max","1","step","0.01","label","First handle X"]]],"\n      ",["span",["class","coordinate"],["span",[],"Y1"],["ui-number-input",["data-curve-coordinate","1","min","-1","max","2","step","0.01","label","First handle Y"]]],"\n      ",["span",["class","coordinate"],["span",[],"X2"],["ui-number-input",["data-curve-coordinate","2","min","0","max","1","step","0.01","label","Second handle X"]]],"\n      ",["span",["class","coordinate"],["span",[],"Y2"],["ui-number-input",["data-curve-coordinate","3","min","-1","max","2","step","0.01","label","Second handle Y"]]],"\n    "],"\n    ",["output",[],0],"\n  "];
 let P0;
-const S = { n: ["point0","point1","point2","point3"], t: ["s","s","s","s"], f: import.meta.url, g: "ui-curve-editor", d: { "input": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false], "change": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs, i: ["0.25", "0.1", "0.25", "1"] };
+const S = { n: ["point0","point1","point2","point3"], t: ["s","s","s","s"], f: import.meta.url, g: "ui-curve-editor", d: { "input": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false], "change": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false], "cancel": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs, i: ["0.25", "0.1", "0.25", "1"] };
 const D = { g: "ui-curve-editor", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Value", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "value": { "required":false,"default":"cubic-bezier(0.25, 0.1, 0.25, 1)", c: checkString, t: "string", j: 0, m: "s" } } };
 const C = (host) => activateModule(controller, host);
 

package/vanilla/UiLightEditor.d.ts

@@ -2,6 +2,7 @@
 export interface UiLightEditorEventMap {
   input: CustomEvent<{ readonly x: number; readonly y: number }>;
   change: CustomEvent<{ readonly x: number; readonly y: number }>;
+  cancel: CustomEvent<{ readonly x: number; readonly y: number }>;
 }
 export interface UiLightEditorElement extends HTMLSpanElement {
   addEventListener<K extends keyof UiLightEditorEventMap>(type: K, listener: (this: UiLightEditorElement, event: UiLightEditorEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;

package/vanilla/UiLightEditor.js

@@ -3,10 +3,10 @@ import { attachGeneratedController, buildTemplate, NONCONFORMING, textCall, toAt
 import * as controller from "../components/ui-light-editor/ui-light-editor.js";
 import "../styles/ui-light-editor.css";
 
-const T0 = ["",[],"\n    ",["span",["class","stage","role","group"],"\n      ",["span",["class","plane"],"\n        ",["svg",["viewBox","0 0 100 60","preserveAspectRatio","none","aria-hidden","true"],["path",["d","M0 30 H100 M50 0 V60"]]],"\n        ",["span",["class","specimen"],4],"\n        ",["button",["type","button","class","source"]],"\n      "],"\n    "],"\n    ",["span",["class","coordinates"],"\n      ",["ui-number-input",["data-coordinate","x","min","0","max","100","step","1","unit","%","label","Light horizontal position"]],"\n      ",["ui-number-input",["data-coordinate","y","min","0","max","100","step","1","unit","%","label","Light vertical position"]],"\n    "],"\n    ",["span",["class","hint"],"Drag the light, use arrow keys, or enter its position. Top centre is 50%, 0%."],"\n  "];
+const T0 = ["",[],"\n    ",["span",["class","stage","role","group"],"\n      ",["span",["class","plane"],"\n        ",["svg",["viewBox","0 0 100 60","preserveAspectRatio","none","aria-hidden","true"],["path",["d","M0 30 H100 M50 0 V60"]]],"\n        ",["span",["class","specimen"],4],"\n        ",["button",["type","button","class","source"],"\n          ",["span",["class","source-glyph"],["ui-icon",["name","lightbulb"]]],"\n        "],"\n      "],"\n    "],"\n    ",["span",["class","coordinates"],"\n      ",["ui-number-input",["data-coordinate","x","min","0","max","100","step","1","unit","%","label","Light horizontal position"]],"\n      ",["ui-number-input",["data-coordinate","y","min","0","max","100","step","1","unit","%","label","Light vertical position"]],"\n    "],"\n    ",["span",["class","hint"],"Drag the light, tap the background, use arrow keys, or enter its position. Escape cancels a drag. Top centre is 50%, 0%."],"\n  "];
 const T1 = ["",[]];
 let P0, P1;
-const S = { n: ["horizontal","vertical"], t: ["s","s"], f: import.meta.url, g: "ui-light-editor", d: { "input": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false], "change": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs, i: ["50", "0"] };
+const S = { n: ["horizontal","vertical"], t: ["s","s"], f: import.meta.url, g: "ui-light-editor", d: { "input": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false], "change": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false], "cancel": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs, i: ["50", "0"] };
 const D = { g: "ui-light-editor", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Light position", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "x": { "required":false,"default":0.5, c: checkNumber, t: "number", j: 0, m: "n" }, "y": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" } } };
 const C = (host) => activateModule(controller, host);
 

package/vue/UiButton.vue

@@ -1412,9 +1412,11 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     border-color: transparent;
   }
   @media (pointer: coarse) {
-    :global(:scope:where([data-hn-ui-button])),
+    :global(:scope:where([data-hn-ui-button])) {
+      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+    }
     :global(:scope[data-ui-button-state~="size=sm"]:where([data-hn-ui-button])) {
-      min-block-size: var(--ui-control-min-block-size);
+      min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
     }
   }
   :global(html[data-ui-input-modality="touch"]

package/vue/UiColorPicker.vue

@@ -414,7 +414,7 @@ useComponentHost(() => import('../components/ui-color-picker/ui-color-picker.js'
       --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
     }
     :global(:scope[data-ui-color-picker-state~="size=sm"]) {
-      --_size: var(--ui-control-min-block-size);
+      --_size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
       --_font: var(--ui-font-size-md);
     }
   }

package/vue/UiCombobox.vue

@@ -2388,7 +2388,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
        body-size text: below 16px, iOS zooms the page into the focused field. */
     :global(:scope[data-ui-combobox-state~="size=sm"]:where([data-hn-ui-combobox])) {
-      --_row: var(--ui-control-min-block-size);
+      --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
     }
     :global(:scope[data-ui-combobox-state~="size=sm"] input:where([data-hn-ui-combobox])) {
       font-size: inherit;
@@ -2739,7 +2739,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
        body-size text: below 16px, iOS zooms the page into the focused field. */
     :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-      --_row: var(--ui-control-min-block-size);
+      --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
     }
     :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
       input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {

package/vue/UiCurveEditor.d.ts

@@ -20,6 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     input: (event: CustomEvent<{
         readonly value: string;
     }>) => any;
+    cancel: (event: CustomEvent<{
+        readonly value: string;
+    }>) => any;
     change: (event: CustomEvent<{
         readonly value: string;
     }>) => any;
@@ -44,6 +47,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onInput?: ((event: CustomEvent<{
         readonly value: string;
     }>) => any) | undefined;
+    onCancel?: ((event: CustomEvent<{
+        readonly value: string;
+    }>) => any) | undefined;
     onChange?: ((event: CustomEvent<{
         readonly value: string;
     }>) => any) | undefined;

package/vue/UiCurveEditor.vue

@@ -136,6 +136,7 @@ const emit = defineEmits<{
   'update:value': [value: string]
   input: [event: CustomEvent<{ readonly value: string }>]
   change: [event: CustomEvent<{ readonly value: string }>]
+  cancel: [event: CustomEvent<{ readonly value: string }>]
 }>()
 
 const root = ref<HTMLElement | null>(null)
@@ -165,6 +166,7 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   checks: {
     input: isInputDetail,
     change: isInputDetail,
+    cancel: isInputDetail,
   },
   modeled: ['value'],
 })

package/vue/UiInput.vue

@@ -632,7 +632,10 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     :global(:scope[data-ui-input-state~="size=sm"]) {
       min-block-size: var(
         --ui-input-min-block-size,
-        var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
+        var(
+          --_ui-default-input-min-block-size,
+          max(var(--ui-control-size-sm), var(--ui-control-min-block-size))
+        )
       );
     }
   }

package/vue/UiLightEditor.d.ts

@@ -28,6 +28,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly x: number;
         readonly y: number;
     }>) => any;
+    cancel: (event: CustomEvent<{
+        readonly x: number;
+        readonly y: number;
+    }>) => any;
     change: (event: CustomEvent<{
         readonly x: number;
         readonly y: number;
@@ -58,6 +62,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly x: number;
         readonly y: number;
     }>) => any) | undefined;
+    onCancel?: ((event: CustomEvent<{
+        readonly x: number;
+        readonly y: number;
+    }>) => any) | undefined;
     onChange?: ((event: CustomEvent<{
         readonly x: number;
         readonly y: number;

package/vue/UiLightEditor.vue

@@ -23,6 +23,7 @@ import {
   vPropValidity,
   vuePropInputs,
 } from './props'
+import UiIcon from './UiIcon.vue'
 import UiNumberInput from './UiNumberInput.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -148,6 +149,7 @@ const emit = defineEmits<{
   'update:y': [value: number]
   input: [event: CustomEvent<{ readonly x: number; readonly y: number }>]
   change: [event: CustomEvent<{ readonly x: number; readonly y: number }>]
+  cancel: [event: CustomEvent<{ readonly x: number; readonly y: number }>]
 }>()
 
 const root = ref<HTMLElement | null>(null)
@@ -180,6 +182,7 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   checks: {
     input: isInputDetail,
     change: isInputDetail,
+    cancel: isInputDetail,
   },
   modeled: ['x', 'y'],
 })
@@ -255,6 +258,10 @@ useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'
           :aria-label="guarded"
           ref="sourceElement"
         >
+          <span class="source-glyph" data-hn-ui-light-editor><UiIcon
+              class="ui-icon"
+              name="lightbulb"
+            /></span>
         </button></span></span>{{ ' ' }}<span
       class="coordinates"
       data-hn-ui-light-editor
@@ -293,7 +300,8 @@ useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'
           },
         }"
       /></span>{{ ' ' }}<span class="hint" data-hn-ui-light-editor
-    >Drag the light, use arrow keys, or enter its position. Top centre is 50%, 0%.</span></span>
+    >Drag the light, tap the background, use arrow keys, or enter its position. Escape cancels a
+      drag. Top centre is 50%, 0%.</span></span>
 </template>
 
 <style scoped>
@@ -354,10 +362,18 @@ useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'
     cursor: grab;
     touch-action: none;
   }
+  :global(.source-glyph:where([data-hn-ui-light-editor])) {
+    position: relative;
+    z-index: 1;
+    display: inline-flex !important;
+    color: var(--ui-accent);
+    font-size: var(--ui-font-size-lg);
+  }
   :global(.source:where([data-hn-ui-light-editor])::after) {
     content: "";
-    inline-size: 1rem;
-    block-size: 1rem;
+    position: absolute;
+    inline-size: 2rem;
+    block-size: 2rem;
     border: var(--ui-border-width) solid var(--ui-accent);
     border-radius: 50%;
     background: var(--ui-surface-raised);
@@ -390,6 +406,9 @@ useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'
     color: var(--ui-text-secondary);
   }
   @media (forced-colors: active) {
+    :global(.source-glyph:where([data-hn-ui-light-editor])) {
+      color: CanvasText;
+    }
     :global(.source:where([data-hn-ui-light-editor])::after) {
       background: Canvas;
       border-color: CanvasText;

package/vue/UiReel.vue

@@ -40,7 +40,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'snap' },
       description:
-        'Snaps scrolling to items: start comes to rest with an item\'s start edge at the reel\'s start, and center with an item centred in the reel. Unset, the reel\n      scrolls freely.',
+        'Snaps scrolling to items: start comes to rest with an item\'s start edge at the reel\'s start, and center with an item centred in the reel. Unset, the reel\n      scrolls freely. Wrap a component item in a plain element when snapping: the wrapper receives snap alignment while the component keeps ownership of its\n      root styles.',
       values: ['start', 'center'],
     },
   },

package/vue/UiSelect.vue

@@ -386,7 +386,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     }
 
     :global(:scope[data-ui-select-state~="size=sm"]:where([data-hn-ui-select])) {
-      min-block-size: var(--ui-control-min-block-size);
+      min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
       font-size: inherit;
     }
   }

package/vue/UiTabs.vue

@@ -395,10 +395,9 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     max-inline-size: 100%;
     /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
     overflow-x: auto;
-    /* overflow-x: auto would make the block axis scrollable too; a sideways swipe must not scroll the
-       strip or the page vertically. */
+    /* Contain sideways overscroll without trapping vertical page scrolling. */
     overflow-y: hidden;
-    overscroll-behavior: contain;
+    overscroll-behavior-inline: contain;
     scrollbar-width: thin;
     border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
   }

package/vue/UiTooltip.vue

@@ -580,7 +580,8 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     border-inline-end-width: var(--ui-border-width);
     border-block-end-width: var(--ui-border-width);
     border-end-end-radius: var(--ui-border-width);
-    transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
+    /* Stretch in screen axes after rotation so both arrow shoulders stay level. */
+    transform: scale(1.25, 0.85) rotate(45deg);
   }
 
   :global(:scope[data-ui-actual-placement="bottom"] .surface:where([data-hn-ui-tooltip])::after) {

package/vue/chunks/UiButton.js

@@ -866,6 +866,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-bb40b79e"]]);
+}), [["__scopeId", "data-v-bf2aad19"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiColorPicker.js

@@ -321,6 +321,6 @@ var UiColorPicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-908b48a2"]]);
+}), [["__scopeId", "data-v-b2a9e21e"]]);
 //#endregion
 export { UiColorPicker_default as t };

package/vue/chunks/UiCombobox.js

@@ -2134,6 +2134,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ee406b40"]]);
+}), [["__scopeId", "data-v-85d2ac14"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiCurveEditor.js

@@ -37,7 +37,8 @@ var UiCurveEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 	emits: [
 		"update:value",
 		"input",
-		"change"
+		"change",
+		"cancel"
 	],
 	setup(__props, { emit: __emit }) {
 		const propValidityContract = { props: {
@@ -164,7 +165,8 @@ var UiCurveEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		const dispatch = createDispatch(root, emit, {
 			checks: {
 				input: isInputDetail,
-				change: isInputDetail
+				change: isInputDetail,
+				cancel: isInputDetail
 			},
 			modeled: ["value"]
 		});
@@ -408,6 +410,6 @@ var UiCurveEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-b4dfbbee"]]);
+}), [["__scopeId", "data-v-0eaa205c"]]);
 //#endregion
 export { UiCurveEditor_default as t };

package/vue/chunks/UiInput.js

@@ -704,6 +704,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-c67ac937"]]);
+}), [["__scopeId", "data-v-881962d1"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiLightEditor.js

@@ -1,5 +1,6 @@
 import { a as concat, b as useReflectedProp, i as checkHydratedRoot, m as nativeAttrs, o as createDispatch, t as _plugin_vue_export_helper_default, y as useComponentHost } from "./_plugin-vue_export-helper.js";
 import { d as requireInputStatus, i as checkPropInput, m as vuePropInputs, p as vPropValidity, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP, u as propValidityState } from "./props.js";
+import { t as UiIcon_default } from "./UiIcon.js";
 import { t as UiNumberInput_default } from "./UiNumberInput.js";
 import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiLightEditor.vue?vue&type=script&setup=true&lang.ts
@@ -17,6 +18,10 @@ var _hoisted_3 = {
 };
 var _hoisted_4 = ["disabled", "aria-label"];
 var _hoisted_5 = {
+	class: "source-glyph",
+	"data-hn-ui-light-editor": ""
+};
+var _hoisted_6 = {
 	class: "coordinates",
 	"data-hn-ui-light-editor": ""
 };
@@ -37,7 +42,8 @@ var UiLightEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		"update:x",
 		"update:y",
 		"input",
-		"change"
+		"change",
+		"cancel"
 	],
 	setup(__props, { emit: __emit }) {
 		const propValidityContract = { props: {
@@ -178,7 +184,8 @@ var UiLightEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		const dispatch = createDispatch(root, emit, {
 			checks: {
 				input: isInputDetail,
-				change: isInputDetail
+				change: isInputDetail,
+				cancel: isInputDetail
 			},
 			modeled: ["x", "y"]
 		});
@@ -275,10 +282,13 @@ var UiLightEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 						"aria-label": guarded.value,
 						ref_key: "sourceElement",
 						ref: sourceElement
-					}, null, 8, _hoisted_4)
+					}, [createElementVNode("span", _hoisted_5, [createVNode(UiIcon_default, {
+						class: "ui-icon",
+						name: "lightbulb"
+					})])], 8, _hoisted_4)
 				], 512)], 8, _hoisted_2),
 				_cache[4] || (_cache[4] = createTextVNode(toDisplayString(" "), -1)),
-				createElementVNode("span", _hoisted_5, [
+				createElementVNode("span", _hoisted_6, [
 					createVNode(UiNumberInput_default, mergeProps({
 						class: "ui-number-input",
 						"data-coordinate": "x",
@@ -335,13 +345,13 @@ var UiLightEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				_cache[6] || (_cache[6] = createElementVNode("span", {
 					class: "hint",
 					"data-hn-ui-light-editor": ""
-				}, "Drag the light, use arrow keys, or enter its position. Top centre is 50%, 0%.", -1))
+				}, "Drag the light, tap the background, use arrow keys, or enter its position. Escape cancels a drag. Top centre is 50%, 0%.", -1))
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-1cd5c26a"]]);
+}), [["__scopeId", "data-v-dc22fbcf"]]);
 //#endregion
 export { UiLightEditor_default as t };

package/vue/chunks/UiReel.js

@@ -58,7 +58,7 @@ var UiReel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				},
 				required: false,
 				target: { attribute: "snap" },
-				description: "Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel\n      scrolls freely.",
+				description: "Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel\n      scrolls freely. Wrap a component item in a plain element when snapping: the wrapper receives snap alignment while the component keeps ownership of its\n      root styles.",
 				values: ["start", "center"]
 			}
 		} };
@@ -128,6 +128,6 @@ var UiReel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ace220e1"]]);
+}), [["__scopeId", "data-v-fbdba47c"]]);
 //#endregion
 export { UiReel_default as t };

package/vue/chunks/UiSelect.js

@@ -221,6 +221,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-4348aae0"]]);
+}), [["__scopeId", "data-v-1d116383"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiTabs.js

@@ -329,6 +329,6 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-f1705832"]]);
+}), [["__scopeId", "data-v-502b66c9"]]);
 //#endregion
 export { UiTabs_default as t };

package/vue/chunks/UiTooltip.js

@@ -292,6 +292,6 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-4cc4aab6"]]);
+}), [["__scopeId", "data-v-21fb192b"]]);
 //#endregion
 export { UiTooltip_default as t };