@threadlabs/looma 0.35.1 → 0.36.0

package/styles/ui-light-editor.css

@@ -7,22 +7,117 @@
 [data-component~="ui-light-editor"] { --html-next-scope-owner: "ui-light-editor" !important; }
 }
 @scope ([data-component~="ui-light-editor"]) to ([data-component], [data-slotted]) {
-:scope:where([data-component~="ui-light-editor"]) { display: grid !important; gap: var(--ui-space-3) !important; min-inline-size: 0; padding: 0 !important; margin: 0 !important; }
-    .stage { box-sizing: border-box !important; display: block !important; block-size: 13rem; padding: calc(var(--ui-control-min-block-size) / 2) !important; border: var(--ui-border-width) solid var(--ui-control-border); border-radius: var(--ui-field-radius, var(--ui-radius-md)); background: var(--ui-neutral-surface, var(--ui-surface)); }
-    .plane { position: relative; display: block !important; inline-size: 100%; block-size: 100%; }
-    svg { inline-size: 100%; block-size: 100%; overflow: visible; }
-    path { fill: none; stroke: var(--ui-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
-    .specimen { position: absolute; inset: 0; display: grid !important; place-items: center !important; }
-    .source { position: absolute; left: 50%; top: 0; translate: -50% -50%; display: grid !important; place-items: center !important; inline-size: max(2rem, var(--ui-control-min-block-size)); block-size: max(2rem, var(--ui-control-min-block-size)); padding: 0 !important; margin: 0 !important; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; }
-    .source:where(:not([data-component], [data-slotted]))::after { content: ""; inline-size: 1rem; block-size: 1rem; border: var(--ui-border-width) solid var(--ui-accent); border-radius: 50%; background: var(--ui-surface-raised); box-shadow: 0 0 0 var(--ui-space-2) color-mix(in srgb, var(--ui-accent) 12%, transparent), var(--ui-shadow-sm); }
-    .source:active { cursor: grabbing; }
-    .source:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-ring); outline-offset: var(--ui-space-1); }
-    .source:disabled { cursor: not-allowed; }
-    .source:disabled:where(:not([data-component], [data-slotted]))::after { background: var(--ui-disabled-surface); border-color: var(--ui-disabled-border); box-shadow: none; }
-    .coordinates { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-space-2) !important; }
-    .hint { font-size: var(--ui-font-size-sm); color: var(--ui-text-secondary); }
-    @media (forced-colors: active) { .source:where(:not([data-component], [data-slotted]))::after { background: Canvas; border-color: CanvasText; } .source:focus-visible { outline-color: Highlight; } }
+:scope:where([data-component~="ui-light-editor"]) {
+      display: grid !important;
+      gap: var(--ui-space-3) !important;
+      min-inline-size: 0;
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+    .stage {
+      box-sizing: border-box !important;
+      display: block !important;
+      block-size: 13rem;
+      padding: calc(var(--ui-control-min-block-size) / 2) !important;
+      border: var(--ui-border-width) solid var(--ui-control-border);
+      border-radius: var(--ui-field-radius, var(--ui-radius-md));
+      background: var(--ui-neutral-surface, var(--ui-surface));
+    }
+    .plane {
+      position: relative;
+      display: block !important;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+    svg {
+      inline-size: 100%;
+      block-size: 100%;
+      overflow: visible;
+    }
+    path {
+      fill: none;
+      stroke: var(--ui-border);
+      stroke-width: 1;
+      vector-effect: non-scaling-stroke;
+    }
+    .specimen {
+      position: absolute;
+      inset: 0;
+      display: grid !important;
+      place-items: center !important;
+    }
+    .source {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      translate: -50% -50%;
+      display: grid !important;
+      place-items: center !important;
+      inline-size: max(2rem, var(--ui-control-min-block-size));
+      block-size: max(2rem, var(--ui-control-min-block-size));
+      padding: 0 !important;
+      margin: 0 !important;
+      border: 0;
+      border-radius: 50%;
+      background: transparent;
+      cursor: grab;
+      touch-action: none;
+    }
+    .source-glyph {
+      position: relative;
+      z-index: 1;
+      display: inline-flex !important;
+      color: var(--ui-accent);
+      font-size: var(--ui-font-size-lg);
+    }
+    .source:where(:not([data-component], [data-slotted]))::after {
+      content: "";
+      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);
+      box-shadow: 0 0 0 var(--ui-space-2) color-mix(in srgb, var(--ui-accent) 12%, transparent), var(--ui-shadow-sm);
+    }
+    .source:active {
+      cursor: grabbing;
+    }
+    .source:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-space-1);
+    }
+    .source:disabled {
+      cursor: not-allowed;
+    }
+    .source:disabled:where(:not([data-component], [data-slotted]))::after {
+      background: var(--ui-disabled-surface);
+      border-color: var(--ui-disabled-border);
+      box-shadow: none;
+    }
+    .coordinates {
+      display: grid !important;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: var(--ui-space-2) !important;
+    }
+    .hint {
+      font-size: var(--ui-font-size-sm);
+      color: var(--ui-text-secondary);
+    }
+    @media (forced-colors: active) {
+      .source-glyph {
+        color: CanvasText;
+      }
+      .source:where(:not([data-component], [data-slotted]))::after {
+        background: Canvas;
+        border-color: CanvasText;
+      }
+      .source:focus-visible {
+        outline-color: Highlight;
+      }
+    }
 }
 @scope ([data-component~="ui-light-editor"]) to ([data-component]) {
-@media (forced-colors: active) { }
+@media (forced-colors: active) {
+    }
 }

package/styles/ui-select.css

@@ -77,10 +77,12 @@
       --_ui-select-highlight: var(--ui-surface-highlight, linear-gradient(transparent, transparent));
       appearance: none;
       padding-inline-end: calc(var(--ui-space-3) + 1.5rem) !important;
-      background-image: var(
-        --ui-select-chevron,
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
-      ), var(--_ui-select-highlight);
+      background-image:
+        var(
+          --ui-select-chevron,
+          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+        ),
+        var(--_ui-select-highlight);
       background-repeat: no-repeat;
       background-position: right var(--ui-space-3) center, center;
       background-size: 1.125rem 1.125rem, 100% 100%;
@@ -127,7 +129,9 @@
       padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
       padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1)) !important;
       background-position: right var(--ui-space-2) center, center;
-      background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm), 100% 100%;
+      background-size:
+        var(--ui-icon-size-sm) var(--ui-icon-size-sm),
+        100% 100%;
       font-size: var(--ui-font-size-sm);
     }
 
@@ -147,7 +151,7 @@
       }
 
       :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=sm"] {
-        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/theme-system.css

@@ -12,7 +12,8 @@
 
 @layer theme {
   :root {
-    --ui-density: 1;
+    --ui-spacing: 1;
+    --ui-control-roominess: 2.5;
     --ui-scale-ratio: 1.2;
     --ui-space-curve: 1;
     --ui-outer-depth: 0.6;
@@ -32,8 +33,9 @@
   :where(:root, [data-theme], [data-contrast]) {
     /* Controls use a ratio. Spacing uses an independent curve, so increasing the size
        contrast cannot unexpectedly turn linear spacing into quadratic spacing. */
+    --ui-control-size: calc(var(--ui-font-size) * var(--ui-control-roominess));
     --_ui-theme-ratio: max(1, var(--ui-scale-ratio));
-    --_ui-theme-unit: calc(var(--ui-control-size) * 0.1 * max(0, var(--ui-density)));
+    --_ui-theme-unit: calc(var(--ui-font-size) * 0.25 * max(0, var(--ui-spacing)));
     --_ui-theme-curve: max(0, var(--ui-space-curve));
     --ui-control-size-sm: calc(var(--ui-control-size) / var(--_ui-theme-ratio));
     --ui-control-size-md: var(--ui-control-size);
@@ -116,6 +118,16 @@
     --ui-press-scale: 0.98;
   }
 
+  @media (pointer: coarse) {
+    :where(:root, [data-theme], [data-contrast]) {
+      --ui-control-size-sm: max(calc(var(--ui-control-size) / var(--_ui-theme-ratio)), var(--ui-control-min-block-size));
+      --ui-control-size-md: calc(var(--ui-control-size-sm) * var(--_ui-theme-ratio));
+      --ui-control-size-lg: calc(var(--ui-control-size-md) * var(--_ui-theme-ratio));
+      /* Small native fields use body-size text on touch to avoid focus zoom. */
+      --ui-control-inset-block-sm: max(0px, calc((var(--ui-control-size-sm) - var(--ui-font-size-md) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     :where(:root, [data-theme], [data-contrast]) {
       --ui-motion-press: 0ms;

package/tokens.css

@@ -283,6 +283,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
@@ -409,4 +418,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/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/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 };