@threadlabs/looma 0.35.1 → 0.37.0

package/tokens.css

@@ -25,6 +25,9 @@
     --ui-text: #1a1a1a;
     --ui-focus-halo: 0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
 
+    /* The base type token owns the document root; rem-based roles scale from it once. */
+    font-size: var(--ui-font-size);
+
     /* Type. */
     --ui-font-sans:
       system-ui,
@@ -38,7 +41,7 @@
       "Apple Color Emoji",
       "Segoe UI Emoji";
     --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-    --ui-font-size: 1rem;
+    --ui-font-size: 16px;
     --ui-font-medium: 500;
     --ui-line-height: 1.4;
 
@@ -92,14 +95,14 @@
     --ui-accent-line-width: var(--ui-border-width);
 
     /* Type scale, from the base size. */
-    --ui-font-size-2xs: calc(var(--ui-font-size) * 0.6875);
-    --ui-font-size-xs: calc(var(--ui-font-size) * 0.75);
+    --ui-font-size-2xs: calc(1rem * 0.6875);
+    --ui-font-size-xs: calc(1rem * 0.75);
     /* Dense text: controls, labels, and metadata. Two steps below body copy, never one pixel. */
-    --ui-font-size-sm: calc(var(--ui-font-size) * 0.875);
-    --ui-font-size-md: var(--ui-font-size);
-    --ui-font-size-lg: calc(var(--ui-font-size) * 1.125);
-    --ui-font-size-xl: calc(var(--ui-font-size) * 1.25);
-    --ui-font-size-2xl: calc(var(--ui-font-size) * 1.5);
+    --ui-font-size-sm: calc(1rem * 0.875);
+    --ui-font-size-md: 1rem;
+    --ui-font-size-lg: calc(1rem * 1.125);
+    --ui-font-size-xl: calc(1rem * 1.25);
+    --ui-font-size-2xl: calc(1rem * 1.5);
     --ui-line-height-tight: 1.2;
     --ui-line-height-md: var(--ui-line-height);
     /* Prose, not controls: the editor's document body reads at a looser line height. */
@@ -260,14 +263,14 @@
     --ui-control-size-lg: calc(var(--ui-control-size) * 1.2);
 
     /* Choice marks follow typography; row heights follow the shared control scale. */
-    --ui-choice-mark-size: calc(var(--ui-font-size) * 1.125);
-    --ui-choice-track-height: calc(var(--ui-font-size) * 1.5);
-    --ui-choice-track-width: calc(var(--ui-font-size) * 2.5);
+    --ui-choice-mark-size: calc(1rem * 1.125);
+    --ui-choice-track-height: calc(1rem * 1.5);
+    --ui-choice-track-width: calc(1rem * 2.5);
 
     /* Icon sizes, used by icon buttons and field affordances. */
-    --ui-icon-size-sm: var(--ui-font-size);
-    --ui-icon-size-md: calc(var(--ui-font-size) * 1.25);
-    --ui-icon-size-lg: calc(var(--ui-font-size) * 1.5);
+    --ui-icon-size-sm: 1rem;
+    --ui-icon-size-md: calc(1rem * 1.25);
+    --ui-icon-size-lg: calc(1rem * 1.5);
 
     /* Anticipatory interaction: guide → near → direct. */
     --ui-affordance-guide-size: var(--ui-space-1);
@@ -283,6 +286,15 @@
       --ui-motion-fast: 0ms;
     }
   }
+  /* Raise the family together on touch, so the minimum does not collapse sm and md. */
+  @media (pointer: coarse) {
+    :root, :where([data-theme], [data-contrast]) {
+      --ui-control-size-sm: max(calc(var(--ui-control-size) / 1.2), var(--ui-control-min-block-size));
+      --ui-control-size-md: calc(var(--ui-control-size-sm) * 1.2);
+      --ui-control-size-lg: calc(var(--ui-control-size-md) * 1.2);
+    }
+  }
+
 }
 
 /* The scroll fade every Looma scroller uses (see ui-scroll-area). Scroll-driven animations grow each
@@ -383,7 +395,7 @@
     background-color: var(--ui-control-surface);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: calc(var(--ui-font-size) * 0.7);
+    background-size: calc(1rem * 0.7);
   }
 
   [data-ui-choice-option][data-multiple][aria-selected="true"]::before {
@@ -409,4 +421,5 @@
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
+
 }

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/UiAvatar.vue

@@ -366,7 +366,7 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     /* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
-    font-size: calc(var(--ui-font-size) * 0.5625);
+    font-size: calc(var(--ui-font-size-md) * 0.5625);
     letter-spacing: 0.02em;
   }
 

package/vue/UiAvatarGroup.vue

@@ -301,7 +301,7 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     inline-size: 1.25rem;
     block-size: 1.25rem;
     /* Matches the xs Avatar's initials. */
-    font-size: calc(var(--ui-font-size) * 0.5625);
+    font-size: calc(var(--ui-font-size-md) * 0.5625);
     line-height: 1;
   }
 

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/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/chunks/UiAvatar.js

@@ -336,6 +336,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-befec7d5"]]);
+}), [["__scopeId", "data-v-d03c9917"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -229,6 +229,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-2446552a"]]);
+}), [["__scopeId", "data-v-a5b0148e"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

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/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 };