Light Editor

Position a shared light source with a draggable, keyboard-operable handle and exact bounded coordinates. The position is relative to each illuminated surface.

Light position

Move the source with a pointer, touch, arrow keys or exact coordinates. The source describes a position relative to every illuminated surface.

Drag or tap to move the light. Arrow keys adjust; Escape cancels.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-light-editor/ui-light-editor.html"
>

<ui-light-editor
  label="Fellowship office light"
  x="0.5"
  y="0"
></ui-light-editor>

<script setup>
  import { UiLightEditor } from "@threadlabs/looma";
</script>

<template>
  <UiLightEditor
    label="Fellowship office light"
    :x="0.5"
    :y="0"
  />
</template>

import { UiLightEditor } from "@threadlabs/looma";

export default function Example() {
  return <UiLightEditor
    label="Fellowship office light"
    x={0.5}
    y={0}
  />;
}

/** @jsxImportSource preact */
import { UiLightEditor } from "@threadlabs/looma";

export default function Example() {
  return <UiLightEditor
    label="Fellowship office light"
    x={0.5}
    y={0}
  />;
}

<script>
  import { UiLightEditor } from "@threadlabs/looma";
</script>

<UiLightEditor
  label="Fellowship office light"
  x={0.5}
  y={0}
/>

import { Component } from "@angular/core";
import { UiLightEditor } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiLightEditor],
  template: `
    <span
      ui-light-editor
      [label]="'Fellowship office light'"
      [x]="0.5"
      [y]="0"
    ></span>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: span

Attributes

Name	Description	Property	Type	Default	Allowed values
`disabled`	Prevents pointer, keyboard and exact edits.	`disabled`	`boolean`	`false`	`—`
`label`	Accessible name for the position editor.	`label`	`string`	`Light position`	`—`
`size`	Sets both coordinate fields to the shared small, medium or large control height.	`size`	`keyword`	`md`	`sm, md, lg`
`x`	Horizontal source position from 0 (left) to 1 (right), relative to every surface.	`x`	`number`	`0.5`	`—`
`y`	Vertical source position from 0 (top) to 1 (bottom), relative to every surface.	`y`	`number`	`0`	`—`

Framework props

Name	Type	Default	Allowed values
`disabled`	`boolean`	`false`	`—`
`label`	`string`	`Light position`	`—`
`size`	`"sm" \| "md" \| "lg"`	`md`	`sm, md, lg`
`x`	`number`	`0.5`	`—`
`y`	`number`	`0`	`—`

Events

Name	Detail	Description
`cancel`	`object` `x`: `number` (required) `y`: `number` (required)	Emitted with the declared detail payload.
`change`	`object` `x`: `number` (required) `y`: `number` (required)	Emitted when a toggleable control changes checked state.
`input`	`object` `x`: `number` (required) `y`: `number` (required)	Emitted with the declared detail payload.

Slots

Name	Purpose
`default`	Default child content.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

Token	Fallback
`--ui-accent`	`—`
`--ui-accent-subtle-text`	`—`
`--ui-border`	`—`
`--ui-border-width`	`—`
`--ui-control-border`	`—`
`--ui-control-min-block-size`	`—`
`--ui-disabled-border`	`—`
`--ui-disabled-surface`	`—`
`--ui-field-radius`	`var(--ui-radius-md)`
`--ui-focus-ring`	`—`
`--ui-focus-width`	`—`
`--ui-font-size-lg`	`—`
`--ui-font-size-sm`	`—`
`--ui-neutral-surface`	`var(--ui-surface)`
`--ui-radius-md`	`—`
`--ui-shadow-sm`	`—`
`--ui-space-1`	`—`
`--ui-space-2`	`—`
`--ui-space-3`	`—`
`--ui-surface`	`—`
`--ui-surface-raised`	`—`
`--ui-text-secondary`	`—`