@threadlabs/looma 0.39.1 → 0.39.2

package/vue/UiLightEditor.vue

@@ -23,6 +23,7 @@ import {
   vPropValidity,
   vuePropInputs,
 } from './props'
+import UiDisclosure from './UiDisclosure.vue'
 import UiIcon from './UiIcon.vue'
 import UiNumberInput from './UiNumberInput.vue'
 
@@ -262,46 +263,45 @@ useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'
               class="ui-icon"
               name="lightbulb"
             /></span>
-        </button></span></span>{{ ' ' }}<span
-      class="coordinates"
-      data-hn-ui-light-editor
-    ><UiNumberInput
-        class="ui-number-input"
-        data-coordinate="x"
-        :min="0"
-        :max="100"
-        :step="1"
-        unit="%"
-        label="Light horizontal position"
-        :value="horizontal"
-        :size="checkedProps.size"
-        :disabled="checkedProps.disabled"
-        v-bind="{
-          [BINDING_INPUTS_PROP]: {
-            size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
-            disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
-          },
-        }"
-      />{{ ' ' }}<UiNumberInput
-        class="ui-number-input"
-        data-coordinate="y"
-        :min="0"
-        :max="100"
-        :step="1"
-        unit="%"
-        label="Light vertical position"
-        :value="vertical"
-        :size="checkedProps.size"
-        :disabled="checkedProps.disabled"
-        v-bind="{
-          [BINDING_INPUTS_PROP]: {
-            size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
-            disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
-          },
-        }"
-      /></span>{{ ' ' }}<span class="hint" data-hn-ui-light-editor
-    >Drag the light, tap the background, use arrow keys, or enter its position. Escape cancels a
-      drag. Top centre is 50%, 0%.</span></span>
+        </button></span></span>{{ ' ' }}<span class="hint" data-hn-ui-light-editor
+    >Drag or tap to move the light. Arrow keys adjust; Escape cancels.</span>{{ ' ' }}<UiDisclosure
+      class="ui-disclosure"
+      summary="Exact position"
+    ><span class="coordinates" data-slotted="ui-light-editor" data-hn-ui-light-editor><UiNumberInput
+          class="ui-number-input"
+          data-coordinate="x"
+          :min="0"
+          :max="100"
+          :step="1"
+          unit="%"
+          label="Light horizontal position"
+          :value="horizontal"
+          :size="checkedProps.size"
+          :disabled="checkedProps.disabled"
+          v-bind="{
+            [BINDING_INPUTS_PROP]: {
+              size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+              disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            },
+          }"
+        />{{ ' ' }}<UiNumberInput
+          class="ui-number-input"
+          data-coordinate="y"
+          :min="0"
+          :max="100"
+          :step="1"
+          unit="%"
+          label="Light vertical position"
+          :value="vertical"
+          :size="checkedProps.size"
+          :disabled="checkedProps.disabled"
+          v-bind="{
+            [BINDING_INPUTS_PROP]: {
+              size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+              disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            },
+          }"
+        /></span></UiDisclosure></span>
 </template>
 
 <style scoped>
@@ -418,4 +418,120 @@ useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'
     }
   }
 }
+@scope ([data-slotted~="ui-light-editor"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+  :global(:where(.ui-light-editor):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where([data-hn-ui-light-editor])) {
+    display: grid !important;
+    gap: var(--ui-space-3) !important;
+    min-inline-size: 0;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+  :global(.stage:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    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));
+  }
+  :global(.plane:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    position: relative;
+    display: block !important;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  :global(svg:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  :global(path:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    fill: none;
+    stroke: var(--ui-border);
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+  }
+  :global(.specimen:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    position: absolute;
+    inset: 0;
+    display: grid !important;
+    place-items: center !important;
+  }
+  :global(.source:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    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;
+  }
+  :global(.source-glyph:where(:scope, :scope *):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(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope
+    *):where([data-hn-ui-light-editor])::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);
+  }
+  :global(.source:active:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    cursor: grabbing;
+  }
+  :global(.source:focus-visible:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-space-1);
+  }
+  :global(.source:disabled:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    cursor: not-allowed;
+  }
+  :global(.source:disabled:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope
+    *):where([data-hn-ui-light-editor])::after) {
+    background: var(--ui-disabled-surface);
+    border-color: var(--ui-disabled-border);
+    box-shadow: none;
+  }
+  :global(.coordinates:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: var(--ui-space-2) !important;
+  }
+  :global(.hint:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+  }
+  @media (forced-colors: active) {
+    :global(.source-glyph:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+      color: CanvasText;
+    }
+    :global(.source:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope
+      *):where([data-hn-ui-light-editor])::after) {
+      background: Canvas;
+      border-color: CanvasText;
+    }
+    :global(.source:focus-visible:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+      outline-color: Highlight;
+    }
+  }
+}
 </style>

package/vue/chunks/UiButton.js

@@ -113,10 +113,14 @@ var _hoisted_10 = {
 	"data-hn-ui-button": ""
 };
 var _hoisted_11 = {
+	class: "label",
+	"data-hn-ui-button": ""
+};
+var _hoisted_12 = {
 	class: "badge",
 	"data-hn-ui-button": ""
 };
-var _hoisted_12 = [
+var _hoisted_13 = [
 	"data-appearance",
 	"data-tone",
 	"type",
@@ -141,12 +145,16 @@ var _hoisted_12 = [
 	"data-ui-button-prop-variant",
 	"data-ui-button-state"
 ];
-var _hoisted_13 = {
+var _hoisted_14 = {
 	key: 0,
 	class: "spinner-wrap",
 	"data-hn-ui-button": ""
 };
-var _hoisted_14 = {
+var _hoisted_15 = {
+	class: "label",
+	"data-hn-ui-button": ""
+};
+var _hoisted_16 = {
 	class: "badge",
 	"data-hn-ui-button": ""
 };
@@ -843,9 +851,9 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					size: "sm"
 				})])) : createCommentVNode("v-if", true),
 				_cache[4] || (_cache[4] = createTextVNode(toDisplayString(" "), -1)),
-				renderSlot(_ctx.$slots, "default", {}, void 0, true),
+				createElementVNode("span", _hoisted_11, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				_cache[5] || (_cache[5] = createTextVNode(toDisplayString(" "), -1)),
-				createElementVNode("span", _hoisted_11, [renderSlot(_ctx.$slots, "badge", {}, void 0, true)])
+				createElementVNode("span", _hoisted_12, [renderSlot(_ctx.$slots, "badge", {}, void 0, true)])
 			], 16, _hoisted_9)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
@@ -880,20 +888,20 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"data-ui-button-state": hostState.value || void 0,
 				ref: "@html-next/root"
 			}), [
-				checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_13, [createVNode(UiSpinner_default, {
+				checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_14, [createVNode(UiSpinner_default, {
 					class: "ui-spinner",
 					size: "sm"
 				})])) : createCommentVNode("v-if", true),
 				_cache[6] || (_cache[6] = createTextVNode(toDisplayString(" "), -1)),
-				renderSlot(_ctx.$slots, "default", {}, void 0, true),
+				createElementVNode("span", _hoisted_15, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				_cache[7] || (_cache[7] = createTextVNode(toDisplayString(" "), -1)),
-				createElementVNode("span", _hoisted_14, [renderSlot(_ctx.$slots, "badge", {}, void 0, true)])
-			], 16, _hoisted_12)), [[unref(vPropValidity), {
+				createElementVNode("span", _hoisted_16, [renderSlot(_ctx.$slots, "badge", {}, void 0, true)])
+			], 16, _hoisted_13)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-1eb598b9"]]);
+}), [["__scopeId", "data-v-290745d7"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCheckbox.js

@@ -356,6 +356,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d551a32f"]]);
+}), [["__scopeId", "data-v-570a9f0b"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiLightEditor.js

@@ -2,7 +2,8 @@ import { C as useReflectedProp, S as useComponentHost, _ as nativeAttrs, a as ch
 import { d as propValidityState, f as requireInputStatus, h as vuePropInputs, i as checkPropInput, m as vPropValidity, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP } 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";
+import { t as UiDisclosure_default } from "./UiDisclosure.js";
+import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiLightEditor.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-ui-light-editor-prop-disabled",
@@ -23,6 +24,7 @@ var _hoisted_5 = {
 };
 var _hoisted_6 = {
 	class: "coordinates",
+	"data-slotted": "ui-light-editor",
 	"data-hn-ui-light-editor": ""
 };
 //#endregion
@@ -288,70 +290,76 @@ var UiLightEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 					})])], 8, _hoisted_4)
 				], 512)], 8, _hoisted_2),
 				_cache[4] || (_cache[4] = createTextVNode(toDisplayString(" "), -1)),
-				createElementVNode("span", _hoisted_6, [
-					createVNode(UiNumberInput_default, mergeProps({
-						class: "ui-number-input",
-						"data-coordinate": "x",
-						min: 0,
-						max: 100,
-						step: 1,
-						unit: "%",
-						label: "Light horizontal position",
-						value: horizontal.value,
-						size: checkedProps.value.size,
-						disabled: checkedProps.value.disabled
-					}, { [unref(BINDING_INPUTS_PROP)]: {
-						size: () => ({
-							value: checkedProps.value.size,
-							status: inputStatus("size", true)
-						}),
-						disabled: () => ({
-							value: checkedProps.value.disabled,
-							status: inputStatus("disabled", true)
-						})
-					} }), null, 16, [
-						"value",
-						"size",
-						"disabled"
-					]),
-					_cache[3] || (_cache[3] = createTextVNode(toDisplayString(" "), -1)),
-					createVNode(UiNumberInput_default, mergeProps({
-						class: "ui-number-input",
-						"data-coordinate": "y",
-						min: 0,
-						max: 100,
-						step: 1,
-						unit: "%",
-						label: "Light vertical position",
-						value: vertical.value,
-						size: checkedProps.value.size,
-						disabled: checkedProps.value.disabled
-					}, { [unref(BINDING_INPUTS_PROP)]: {
-						size: () => ({
-							value: checkedProps.value.size,
-							status: inputStatus("size", true)
-						}),
-						disabled: () => ({
-							value: checkedProps.value.disabled,
-							status: inputStatus("disabled", true)
-						})
-					} }), null, 16, [
-						"value",
-						"size",
-						"disabled"
-					])
-				]),
-				_cache[5] || (_cache[5] = createTextVNode(toDisplayString(" "), -1)),
-				_cache[6] || (_cache[6] = createElementVNode("span", {
+				_cache[5] || (_cache[5] = createElementVNode("span", {
 					class: "hint",
 					"data-hn-ui-light-editor": ""
-				}, "Drag the light, tap the background, use arrow keys, or enter its position. Escape cancels a drag. Top centre is 50%, 0%.", -1))
+				}, "Drag or tap to move the light. Arrow keys adjust; Escape cancels.", -1)),
+				_cache[6] || (_cache[6] = createTextVNode(toDisplayString(" "), -1)),
+				createVNode(UiDisclosure_default, {
+					class: "ui-disclosure",
+					summary: "Exact position"
+				}, {
+					default: withCtx(() => [createElementVNode("span", _hoisted_6, [
+						createVNode(UiNumberInput_default, mergeProps({
+							class: "ui-number-input",
+							"data-coordinate": "x",
+							min: 0,
+							max: 100,
+							step: 1,
+							unit: "%",
+							label: "Light horizontal position",
+							value: horizontal.value,
+							size: checkedProps.value.size,
+							disabled: checkedProps.value.disabled
+						}, { [unref(BINDING_INPUTS_PROP)]: {
+							size: () => ({
+								value: checkedProps.value.size,
+								status: inputStatus("size", true)
+							}),
+							disabled: () => ({
+								value: checkedProps.value.disabled,
+								status: inputStatus("disabled", true)
+							})
+						} }), null, 16, [
+							"value",
+							"size",
+							"disabled"
+						]),
+						_cache[3] || (_cache[3] = createTextVNode(toDisplayString(" "), -1)),
+						createVNode(UiNumberInput_default, mergeProps({
+							class: "ui-number-input",
+							"data-coordinate": "y",
+							min: 0,
+							max: 100,
+							step: 1,
+							unit: "%",
+							label: "Light vertical position",
+							value: vertical.value,
+							size: checkedProps.value.size,
+							disabled: checkedProps.value.disabled
+						}, { [unref(BINDING_INPUTS_PROP)]: {
+							size: () => ({
+								value: checkedProps.value.size,
+								status: inputStatus("size", true)
+							}),
+							disabled: () => ({
+								value: checkedProps.value.disabled,
+								status: inputStatus("disabled", true)
+							})
+						} }), null, 16, [
+							"value",
+							"size",
+							"disabled"
+						])
+					])]),
+					_: 1
+				})
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-dc22fbcf"]]);
+}), [["__scopeId", "data-v-7f354401"]]);
 //#endregion
 export { UiLightEditor_default as t };