@threadlabs/looma 0.34.0 → 0.35.0

package/vue/UiCard.vue

@@ -51,17 +51,26 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'tone' },
       description:
-        'accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Row highlights follow the\n      surface hue; action controls retain their own intent.',
+        'accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the\n      surface hue; action controls retain their own intent.',
       values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
       default: 'neutral',
     },
+    treatment: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'treatment' },
+      description:
+        'How much of the theme\'s decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment.\n      This does not add elevation or require glass.',
+      values: ['standard', 'expressive'],
+      default: 'standard',
+    },
     variant: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
       target: { attribute: 'variant' },
       description:
-        'The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;\n      elevated floats above the page with a shadow, for a view\'s one card, such as sign-in. glass frames an opaque readable content plane with frosted material;\n      shared glassiness and surface separation govern its treatment.',
-      values: ['outlined', 'subtle', 'elevated', 'glass'],
+        'The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;\n      elevated adds a subtle lift above the page, for a view\'s one card, such as sign-in. Treatment independently controls decorative material.',
+      values: ['outlined', 'subtle', 'elevated'],
       default: 'outlined',
     },
   },
@@ -75,9 +84,8 @@ const props = defineProps({
       'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
     >,
   },
-  variant: {
-    type: null as unknown as PropType<'outlined' | 'subtle' | 'elevated' | 'glass' | null>,
-  },
+  treatment: { type: null as unknown as PropType<'standard' | 'expressive' | null> },
+  variant: { type: null as unknown as PropType<'outlined' | 'subtle' | 'elevated' | null> },
   [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
@@ -85,6 +93,7 @@ const acceptedProps: Record<string, unknown> = {
   padding: 'md',
   size: 'content',
   tone: 'neutral',
+  treatment: 'standard',
   variant: 'outlined',
 }
 const inputTracking = vuePropInputs(acceptedProps, {
@@ -92,6 +101,7 @@ const inputTracking = vuePropInputs(acceptedProps, {
   padding: 'md',
   size: 'content',
   tone: 'neutral',
+  treatment: 'standard',
   variant: 'outlined',
 }, (name, value, source, values) => {
   switch (name) {
@@ -103,6 +113,8 @@ const inputTracking = vuePropInputs(acceptedProps, {
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     case 'tone':
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'treatment':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     case 'variant':
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     default:
@@ -135,11 +147,16 @@ const checkedProps = computed(() => {
       props['tone'],
       props[BINDING_INPUTS_PROP],
     ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
-    variant: propInputs.value<'outlined' | 'subtle' | 'elevated' | 'glass' | null>(
+    treatment: propInputs.value<'standard' | 'expressive' | null>(
+      'treatment',
+      props['treatment'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'standard' | 'expressive',
+    variant: propInputs.value<'outlined' | 'subtle' | 'elevated' | null>(
       'variant',
       props['variant'],
       props[BINDING_INPUTS_PROP],
-    ) as 'outlined' | 'subtle' | 'elevated' | 'glass',
+    ) as 'outlined' | 'subtle' | 'elevated',
   })
 })
 const inputStatus = (name: string, handlesError: boolean) => {
@@ -174,6 +191,9 @@ const hostState = computed(() =>
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+    checkedProps.value.treatment && 'treatment',
+    checkedProps.value.treatment != null
+    && `treatment=${encodeURIComponent(checkedProps.value.treatment)}`,
     checkedProps.value.tone && 'tone',
     checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.size && 'size',
@@ -194,6 +214,7 @@ const hostState = computed(() =>
     :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-treatment="reflectedProp('treatment', 'treatment', checkedProps.treatment, undefined, false)"
     :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
@@ -211,6 +232,7 @@ const hostState = computed(() =>
     :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-treatment="reflectedProp('treatment', 'treatment', checkedProps.treatment, undefined, false)"
     :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
@@ -228,6 +250,7 @@ const hostState = computed(() =>
     :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-treatment="reflectedProp('treatment', 'treatment', checkedProps.treatment, undefined, false)"
     :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
@@ -245,6 +268,7 @@ const hostState = computed(() =>
     :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-treatment="reflectedProp('treatment', 'treatment', checkedProps.treatment, undefined, false)"
     :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
@@ -264,6 +288,7 @@ const hostState = computed(() =>
 @scope (.ui-card) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-card])) {
     --_ui-card-surface: var(--ui-surface-raised);
+    --_ui-card-elevation: 0 0 0 transparent;
     --_ui-selection-context-surface: initial;
     --_ui-selection-context-border: initial;
     --_ui-selection-context-text: initial;
@@ -298,11 +323,12 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-card-state~="variant=elevated"]:where([data-hn-ui-card])) {
+    --_ui-card-elevation: var(--ui-shadow-lg);
     border-color: var(--ui-border-subtle);
     box-shadow: var(--ui-shadow-lg);
   }
 
-  :global(:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card])) {
+  :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
     --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
     --_ui-panel-separation: clamp(0, var(--ui-surface-separation, 0), 1);
     --_ui-panel-rim: calc(
@@ -311,6 +337,7 @@ const hostState = computed(() =>
     border-width: calc(var(--ui-border-width) + var(--_ui-panel-rim));
     border-color: transparent;
     background:
+      var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
       linear-gradient(var(--_ui-card-surface), var(--_ui-card-surface)) padding-box,
       linear-gradient(
       var(--ui-material-glass, var(--ui-surface-raised)),
@@ -318,7 +345,8 @@ const hostState = computed(() =>
     ) border-box,
       var(--_ui-card-surface) padding-box;
     box-shadow:
-      var(--ui-shadow-lg),
+      var(--_ui-card-elevation),
+      var(--ui-material-glow, 0 0 transparent),
       inset 0 0 0 var(--ui-border-width) var(--ui-material-edge, var(--ui-border-strong));
     backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px))
       saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
@@ -326,12 +354,12 @@ const hostState = computed(() =>
       saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
   }
   @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-    :global(:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card])) {
+    :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
       background: var(--_ui-card-surface);
     }
   }
   @media (prefers-reduced-transparency: reduce) {
-    :global(:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card])) {
+    :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
       background: var(--_ui-card-surface);
       border-width: var(--ui-border-width);
       border-color: var(--ui-border-strong);
@@ -340,7 +368,7 @@ const hostState = computed(() =>
     }
   }
   @media (forced-colors: active) {
-    :global(:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card])) {
+    :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
       background: Canvas;
       color: CanvasText;
       border: var(--ui-border-width) solid CanvasText;
@@ -376,10 +404,6 @@ const hostState = computed(() =>
 
   :global(:scope[data-ui-card-state~="tone=danger"]:where([data-hn-ui-card])) {
     border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-    border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
-    /* An accent edge keeps the corners on its side straight. */
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
     --_ui-card-surface: var(--ui-danger-soft);
   }
   :global(:scope[data-ui-card-state~="tone=accent"]:where([data-hn-ui-card])),

package/vue/UiCheckbox.vue

@@ -472,7 +472,8 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     margin: max(0px, calc((1lh - var(--_ui-checkbox-size, 1.125rem)) / 2)) 0 0 !important;
     border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
     border-radius: min(var(--ui-radius-sm), calc(var(--_ui-checkbox-size, 1.125rem) / 4));
-    background: var(--ui-control-surface, var(--ui-surface-default));
+    background-color: var(--ui-control-surface, var(--ui-surface-default));
+    background-image: var(--ui-surface-highlight, none);
     box-shadow: var(--ui-control-inset);
     cursor: pointer;
     transition:
@@ -491,7 +492,8 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
   :global(input:checked:where([data-hn-ui-checkbox])),
   :global(input:indeterminate:where([data-hn-ui-checkbox])) {
     border-color: var(--ui-accent-solid);
-    background: var(--ui-accent-solid);
+    background-color: var(--ui-accent-solid);
+    background-image: var(--ui-accent-highlight, none);
     box-shadow: var(--ui-control-inset);
   }
   :global(input:checked:where([data-hn-ui-checkbox])::after) {

package/vue/UiDialog.vue

@@ -452,6 +452,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       transparent
     );
     background:
+      var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
       linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
       padding-box,
       linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
@@ -474,6 +475,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
         0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(
           var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px
         ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        var(--ui-material-glow, 0 0 transparent),
         inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
           --ui-material-edge,
           var(--ui-border-strong)
@@ -729,6 +731,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       transparent
     );
     background:
+      var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
       linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
       padding-box,
       linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
@@ -751,6 +754,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
         0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(
           var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px
         ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        var(--ui-material-glow, 0 0 transparent),
         inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
           --ui-material-edge,
           var(--ui-border-strong)

package/vue/UiIconButton.vue

@@ -577,7 +577,9 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   :global(:scope:where([data-hn-ui-icon-button])) {
     /* Optional inherited action-group values keep text and icon actions under the same light.
        One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
-       A single ambient lift avoids stacking a face gradient or another inset bevel. */
+       The shared theme supplies reflections and glow independently of the resting lift. */
+    --_tone-highlight: var(--ui-accent-highlight, none);
+    --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
     --_ui-action-start: 1px;
     --_ui-action-edge: var(
       --ui-action-edge,
@@ -606,6 +608,8 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(:scope[data-tone="accent"]:where([data-hn-ui-icon-button])) {
+    --_tone-highlight: var(--ui-accent-highlight, none);
+    --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
     --_icon-button-border: var(--ui-accent-solid);
     --_icon-button-hover-border: var(--ui-accent-hover);
     --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
@@ -618,6 +622,8 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(:scope[data-tone="danger"]:where([data-hn-ui-icon-button])) {
+    --_tone-highlight: var(--ui-danger-highlight, none);
+    --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
     --_icon-button-border: var(--ui-danger);
     --_icon-button-hover-border: var(--ui-danger-hover);
     --_icon-button-text: var(--ui-danger-subtle-text);
@@ -633,6 +639,8 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(:scope[data-tone="success"]:where([data-hn-ui-icon-button])) {
+    --_tone-highlight: var(--ui-success-highlight, none);
+    --_tone-glow: var(--ui-success-glow, 0 0 transparent);
     --_icon-button-border: var(--ui-success);
     --_icon-button-hover-border: var(--ui-success-hover);
     --_icon-button-text: var(--ui-success-subtle-text);
@@ -648,6 +656,8 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(:scope[data-tone="warning"]:where([data-hn-ui-icon-button])) {
+    --_tone-highlight: var(--ui-warning-highlight, none);
+    --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
     --_icon-button-border: var(--ui-warning);
     --_icon-button-hover-border: var(--ui-warning-hover);
     --_icon-button-text: var(--ui-warning-subtle-text);
@@ -663,6 +673,8 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(:scope[data-tone="info"]:where([data-hn-ui-icon-button])) {
+    --_tone-highlight: var(--ui-info-highlight, none);
+    --_tone-glow: var(--ui-info-glow, 0 0 transparent);
     --_icon-button-border: var(--ui-info);
     --_icon-button-hover-border: var(--ui-info-hover);
     --_icon-button-text: var(--ui-info-subtle-text);
@@ -677,9 +689,11 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     color: var(--_icon-button-text);
   }
   :global(:scope[data-tone="neutral"]:where([data-hn-ui-icon-button])) {
-    --_icon-button-solid-surface: var(--ui-text-primary);
-    --_icon-button-solid-hover-surface: var(--ui-text-primary);
-    --_icon-button-solid-text: var(--ui-surface-default);
+    --_tone-highlight: var(--ui-neutral-highlight, none);
+    --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
+    --_icon-button-solid-surface: var(--ui-neutral-surface);
+    --_icon-button-solid-hover-surface: var(--ui-neutral-hover);
+    --_icon-button-solid-text: var(--ui-text);
   }
 
   :global(:scope[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button])) {
@@ -854,9 +868,11 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
       --ui-icon-button-outline-surface,
       var(--_icon-button-outline-surface, var(--ui-surface-default))
     );
-    background-image: none;
+    background-image: var(--ui-surface-highlight, none);
     color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
-    box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
+    box-shadow:
+      var(--ui-action-shadow, var(--_ui-action-shadow)),
+      var(--_tone-glow);
   }
 
   :global(:scope[data-appearance="solid"]:where([data-hn-ui-icon-button])) {
@@ -864,15 +880,14 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
       --ui-icon-button-solid-surface,
       var(--_icon-button-solid-surface, var(--ui-accent-solid))
     );
-    background-image: none;
+    background-image: var(--_tone-highlight);
     color: var(
       --ui-icon-button-solid-text,
       var(--_icon-button-solid-text, var(--ui-text-on-accent))
     );
-    box-shadow: var(
-      --ui-icon-button-solid-shadow,
-      var(--ui-action-shadow, var(--_ui-action-shadow))
-    );
+    box-shadow:
+      var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+      var(--_tone-glow);
   }
 
   :global(:scope:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {

package/vue/UiInput.vue

@@ -581,10 +581,11 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
       --ui-input-radius,
       var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md)))
     );
-    background: var(
+    background-color: var(
       --ui-input-surface,
       var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
     );
+    background-image: var(--_ui-default-input-highlight, var(--ui-surface-highlight, none));
     color: var(--ui-text-primary);
     font: inherit;
     line-height: var(--ui-line-height-tight);

package/vue/UiInputGroup.vue

@@ -279,6 +279,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     --_ui-default-input-focus-outline: none;
     --_ui-default-input-radius: 0;
     --_ui-default-input-surface: transparent;
+    --_ui-default-input-highlight: none;
     --_ui-default-textarea-border-width: 0;
     --_ui-default-textarea-border: transparent;
     --_ui-default-textarea-border-hover: transparent;
@@ -290,6 +291,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     --_ui-default-textarea-focus-outline: none;
     --_ui-default-textarea-radius: 0;
     --_ui-default-textarea-surface: transparent;
+    --_ui-default-textarea-highlight: none;
 
     display: flex !important;
     align-items: stretch !important;
@@ -300,7 +302,8 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
     border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
     border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
-    background: var(--ui-control-surface, var(--ui-surface-elevated));
+    background-color: var(--ui-control-surface, var(--ui-surface-elevated));
+    background-image: var(--ui-surface-highlight, none);
     box-shadow: var(--ui-control-inset);
     overflow: hidden;
     /* A press anywhere in the frame focuses the input. */

package/vue/UiLightEditor.d.ts

@@ -0,0 +1,75 @@
+import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    x: {
+        type: PropType<number | null>;
+    };
+    y: {
+        type: PropType<number | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (event: CustomEvent<{
+        readonly x: number;
+        readonly y: number;
+    }>) => any;
+    change: (event: CustomEvent<{
+        readonly x: number;
+        readonly y: number;
+    }>) => any;
+    "update:x": (value: number) => any;
+    "update:y": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    x: {
+        type: PropType<number | null>;
+    };
+    y: {
+        type: PropType<number | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{
+    onInput?: ((event: CustomEvent<{
+        readonly x: number;
+        readonly y: number;
+    }>) => any) | undefined;
+    onChange?: ((event: CustomEvent<{
+        readonly x: number;
+        readonly y: number;
+    }>) => any) | undefined;
+    "onUpdate:x"?: ((value: number) => any) | undefined;
+    "onUpdate:y"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiLightEditor.js

@@ -0,0 +1,2 @@
+import { t as UiLightEditor_default } from "./chunks/UiLightEditor.js";
+export { UiLightEditor_default as default };