@threadlabs/looma 0.33.1 → 0.35.0

package/vue/UiIconButton.vue

@@ -7,6 +7,7 @@ import {
   checkHydratedRoot,
   concat,
   createDispatch,
+  cycleCheckedComputed,
   nativeAttrs,
   useComponentHost,
   useReflectedProp,
@@ -16,6 +17,9 @@ import {
   checkedProp,
   checkPropInput,
   type InputBindings,
+  inputComputed,
+  inputDefault,
+  inputRead,
   propValidityState,
   READY_INPUT,
   requireInputStatus,
@@ -83,6 +87,15 @@ const propValidityContract = {
       description: 'Deprecated alias for loading.',
       default: false,
     },
+    preset: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'preset' },
+      description:
+        'The same shortcuts as Button: primary is solid accent, standard is solid neutral, quiet is ghost neutral, and destructive is solid danger. A named preset\n      wins over variant and tone; none preserves independent choices.',
+      values: ['none', 'primary', 'standard', 'quiet', 'destructive'],
+      default: 'none',
+    },
     revealed: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -112,8 +125,9 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'tone' },
       description:
-        'Colour for every variant. When omitted, ghost and outline keep their neutral appearance and solid keeps its accent fill. Set accent for a coloured action\n      or neutral for a quiet one. Native aria-pressed="true" keeps an outline toggle visibly pressed; the consumer owns that state.',
-      values: ['accent', 'neutral'],
+        'Colour for every variant. auto preserves the existing variant-specific default. When omitted, ghost and outline keep their neutral appearance and solid\n      keeps its accent fill. Set accent for a coloured action or neutral for a quiet one. danger, success, warning and info share Button\'s intent colors. Native\n      aria-pressed="true" keeps an outline toggle visibly pressed; the consumer owns that state.',
+      values: ['auto', 'accent', 'neutral', 'danger', 'success', 'warning', 'info'],
+      default: 'auto',
     },
     variant: {
       type: { kind: 'terminal', name: 'keyword' },
@@ -134,10 +148,19 @@ const props = defineProps({
   loading: { type: null as unknown as PropType<boolean | null> },
   matchButton: { type: null as unknown as PropType<boolean | null> },
   pending: { type: null as unknown as PropType<boolean | null> },
+  preset: {
+    type: null as unknown as PropType<
+      'none' | 'primary' | 'standard' | 'quiet' | 'destructive' | null
+    >,
+  },
   revealed: { type: null as unknown as PropType<boolean | null> },
   round: { type: null as unknown as PropType<boolean | null> },
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
-  tone: { type: null as unknown as PropType<'accent' | 'neutral' | null> },
+  tone: {
+    type: null as unknown as PropType<
+      'auto' | 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' | null
+    >,
+  },
   variant: { type: null as unknown as PropType<'ghost' | 'outline' | 'solid' | null> },
   [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
@@ -149,10 +172,11 @@ const acceptedProps: Record<string, unknown> = {
   loading: false,
   matchButton: false,
   pending: false,
+  preset: 'none',
   revealed: false,
   round: false,
   size: 'md',
-  tone: null,
+  tone: 'auto',
   variant: 'ghost',
 }
 const inputTracking = vuePropInputs(acceptedProps, {
@@ -162,9 +186,11 @@ const inputTracking = vuePropInputs(acceptedProps, {
   loading: false,
   matchButton: false,
   pending: false,
+  preset: 'none',
   revealed: false,
   round: false,
   size: 'md',
+  tone: 'auto',
   variant: 'ghost',
 }, (name, value, source, values) => {
   switch (name) {
@@ -182,6 +208,8 @@ const inputTracking = vuePropInputs(acceptedProps, {
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'pending':
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'preset':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     case 'revealed':
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'round':
@@ -233,6 +261,11 @@ const checkedProps = computed(() => {
       props['pending'],
       props[BINDING_INPUTS_PROP],
     ) as boolean,
+    preset: propInputs.value<'none' | 'primary' | 'standard' | 'quiet' | 'destructive' | null>(
+      'preset',
+      props['preset'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'none' | 'primary' | 'standard' | 'quiet' | 'destructive',
     revealed: propInputs.value<boolean | null>(
       'revealed',
       props['revealed'],
@@ -248,11 +281,16 @@ const checkedProps = computed(() => {
       props['size'],
       props[BINDING_INPUTS_PROP],
     ) as 'sm' | 'md' | 'lg',
-    tone: propInputs.value<'accent' | 'neutral' | null>(
-      'tone',
-      props['tone'],
-      props[BINDING_INPUTS_PROP],
-    ),
+    tone: propInputs.value<
+      'auto' | 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' | null
+    >('tone', props['tone'], props[BINDING_INPUTS_PROP]) as
+      | 'auto'
+      | 'accent'
+      | 'neutral'
+      | 'danger'
+      | 'success'
+      | 'warning'
+      | 'info',
     variant: propInputs.value<'ghost' | 'outline' | 'solid' | null>(
       'variant',
       props['variant'],
@@ -273,6 +311,38 @@ const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 
 const root = ref<HTMLElement | null>(null)
+const appearance: ReturnType<typeof inputComputed<any>> = inputComputed<any>(
+  () =>
+    (({
+      none: inputRead(checkedProps.value.variant, propInputs.status('variant')),
+      primary: 'solid',
+      standard: 'solid',
+      quiet: 'ghost',
+      destructive: 'solid',
+    }) as Record<string, any>)[
+      inputRead(checkedProps.value.preset, propInputs.status('preset'))
+    ] as any,
+  (read) => {
+    const value = cycleCheckedComputed(read)
+    return { get: () => value.value }
+  },
+)
+const colorTone: ReturnType<typeof inputComputed<any>> = inputComputed<any>(
+  () =>
+    (({
+      none: inputRead(checkedProps.value.tone, propInputs.status('tone')),
+      primary: 'accent',
+      standard: 'neutral',
+      quiet: 'neutral',
+      destructive: 'danger',
+    }) as Record<string, any>)[
+      inputRead(checkedProps.value.preset, propInputs.status('preset'))
+    ] as any,
+  (read) => {
+    const value = cycleCheckedComputed(read)
+    return { get: () => value.value }
+  },
+)
 let guardedPrevious: any = null
 const guarded = computed(() => {
   const candidate: any = ((objectValue: any, indexValue: any) =>
@@ -316,15 +386,10 @@ checkHydratedRoot('button', 'ui-icon-button')
 /** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
-    checkedProps.value.tone && 'tone',
-    checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.anticipatory && 'anticipatory',
     checkedProps.value.guide && 'guide',
     checkedProps.value.guide != null && `guide=${encodeURIComponent(checkedProps.value.guide)}`,
     checkedProps.value.revealed && 'revealed',
-    checkedProps.value.variant && 'variant',
-    checkedProps.value.variant != null
-    && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
     checkedProps.value.loading && 'loading',
     checkedProps.value.pending && 'pending',
     checkedProps.value.size && 'size',
@@ -362,6 +427,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     'loading',
     'matchButton',
     'pending',
+    'preset',
     'revealed',
     'round',
     'size',
@@ -370,6 +436,8 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   ],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  computed: { appearance, colorTone },
+  availability: { appearance: () => appearance.status(), colorTone: () => colorTone.status() },
 })
 </script>
 
@@ -380,6 +448,8 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     v-bind="nativeAttrs($attrs)"
     data-hn
     data-hn-ui-icon-button
+    :data-appearance="attribute(appearance.get())"
+    :data-tone="attribute(colorTone.get())"
     :disabled="checkedProps.disabled ?? undefined"
     :aria-label="checkedProps.label ?? undefined"
     :data-match-button="checkedProps.matchButton ? '' : undefined"
@@ -393,6 +463,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     :data-ui-icon-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-ui-icon-button-prop-match-button="reflectedProp('matchButton', 'match-button', checkedProps.matchButton, undefined, false)"
     :data-ui-icon-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-icon-button-prop-preset="reflectedProp('preset', 'preset', checkedProps.preset, undefined, false)"
     :data-ui-icon-button-prop-revealed="reflectedProp('revealed', 'revealed', checkedProps.revealed, undefined, false)"
     :data-ui-icon-button-prop-round="reflectedProp('round', 'round', checkedProps.round, undefined, false)"
     :data-ui-icon-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -506,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,
@@ -534,7 +607,9 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     --_ui-action-start: -1px;
   }
 
-  :global(:scope[data-ui-icon-button-state~="tone=accent"]:where([data-hn-ui-icon-button])) {
+  :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));
@@ -545,10 +620,80 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     );
     color: var(--_icon-button-text);
   }
-  :global(:scope[data-ui-icon-button-state~="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);
+
+  :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);
+    --_icon-button-outline-surface: color-mix(
+      in srgb,
+      var(--ui-danger) 5%,
+      var(--ui-surface-default)
+    );
+    --_icon-button-solid-surface: var(--ui-danger);
+    --_icon-button-solid-hover-surface: var(--ui-danger-hover);
+    --_icon-button-solid-text: var(--ui-danger-on-strong);
+    color: var(--_icon-button-text);
+  }
+
+  :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);
+    --_icon-button-outline-surface: color-mix(
+      in srgb,
+      var(--ui-success) 5%,
+      var(--ui-surface-default)
+    );
+    --_icon-button-solid-surface: var(--ui-success);
+    --_icon-button-solid-hover-surface: var(--ui-success-hover);
+    --_icon-button-solid-text: var(--ui-success-on-strong);
+    color: var(--_icon-button-text);
+  }
+
+  :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);
+    --_icon-button-outline-surface: color-mix(
+      in srgb,
+      var(--ui-warning) 5%,
+      var(--ui-surface-default)
+    );
+    --_icon-button-solid-surface: var(--ui-warning);
+    --_icon-button-solid-hover-surface: var(--ui-warning-hover);
+    --_icon-button-solid-text: var(--ui-warning-on-strong);
+    color: var(--_icon-button-text);
+  }
+
+  :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);
+    --_icon-button-outline-surface: color-mix(
+      in srgb,
+      var(--ui-info) 5%,
+      var(--ui-surface-default)
+    );
+    --_icon-button-solid-surface: var(--ui-info);
+    --_icon-button-solid-hover-surface: var(--ui-info-hover);
+    --_icon-button-solid-text: var(--ui-info-on-strong);
+    color: var(--_icon-button-text);
+  }
+  :global(:scope[data-tone="neutral"]:where([data-hn-ui-icon-button])) {
+    --_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])) {
@@ -590,13 +735,13 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   @media (hover: hover) and (pointer: fine) {
-    :global(:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])) {
+    :global(:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-appearance="solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])) {
       border-color: transparent;
       background-color: transparent;
       box-shadow: none;
     }
 
-    :global(:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+    :global(:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-appearance="solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
       .content:where([data-hn-ui-icon-button])) {
       opacity: 0;
       transform: scale(0.65);
@@ -604,7 +749,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     }
   }
 
-  :global(:scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])::before) {
+  :global(:scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="revealed"], :scope[data-appearance="solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])::before) {
     opacity: 0;
   }
 
@@ -714,7 +859,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     border-radius: var(--ui-radius-round);
   }
 
-  :global(:scope[data-ui-icon-button-state~="variant=outline"]:where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="outline"]:where([data-hn-ui-icon-button])) {
     border-color: var(
       --ui-icon-button-border,
       var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))
@@ -723,25 +868,26 @@ 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-ui-icon-button-state~="variant=solid"]:where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="solid"]:where([data-hn-ui-icon-button])) {
     background-color: var(
       --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])) {
@@ -753,29 +899,28 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
   }
 
-  :global(:scope[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     border-color: var(
       --ui-icon-button-hover-border,
       var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
     );
   }
 
-  :global(:scope[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     background-color: var(
       --ui-icon-button-solid-hover-surface,
       var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
     );
   }
 
-  :global(:scope[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])),
-  :global(:scope[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     color: var(
       --ui-icon-button-solid-text,
       var(--_icon-button-solid-text, var(--ui-text-on-accent))
     );
   }
 
-  :global(:scope[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     background-color: var(
       --ui-icon-button-active-surface,
       color-mix(in srgb, currentColor 16%, transparent)
@@ -783,7 +928,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
     box-shadow: var(--ui-pressed);
   }
-  :global(:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="outline"][aria-pressed="true"]:enabled:where([data-hn-ui-icon-button])) {
     background-color: var(
       --ui-icon-button-active-surface,
       color-mix(in srgb, currentColor 12%, var(--ui-surface-default))
@@ -823,35 +968,35 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     box-shadow: var(--ui-focus-halo);
   }
 
-  :global(:scope[data-ui-icon-button-state~="variant=outline"]:focus-visible:where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="outline"]:focus-visible:where([data-hn-ui-icon-button])) {
     box-shadow:
       var(--ui-action-shadow, var(--_ui-action-shadow)),
       var(--ui-focus-halo);
   }
 
-  :global(:scope[data-ui-icon-button-state~="variant=solid"]:focus-visible:where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="solid"]:focus-visible:where([data-hn-ui-icon-button])) {
     box-shadow:
       var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
       var(--ui-focus-halo);
   }
 
-  :global(:scope:is(:scope[data-ui-icon-button-state~="variant=outline"], :scope[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
+  :global(:scope:is(:scope[data-appearance="outline"], :scope[data-appearance="solid"]):active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     background-image: none;
     box-shadow: var(--ui-pressed);
   }
 
-  :global(:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible:where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="outline"][aria-pressed="true"]:enabled:focus-visible:where([data-hn-ui-icon-button])) {
     box-shadow:
       var(--ui-pressed),
       var(--ui-focus-halo);
   }
 
   @media (forced-colors: active) {
-    :global(:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:where([data-hn-ui-icon-button])) {
+    :global(:scope[data-appearance="outline"][aria-pressed="true"]:enabled:where([data-hn-ui-icon-button])) {
       outline: var(--ui-focus-width) solid Highlight;
       outline-offset: calc(-2 * var(--ui-focus-width));
     }
-    :global(:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible:where([data-hn-ui-icon-button])) {
+    :global(:scope[data-appearance="outline"][aria-pressed="true"]:enabled:focus-visible:where([data-hn-ui-icon-button])) {
       outline-offset: var(--ui-focus-width);
     }
   }
@@ -866,7 +1011,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     background-image: none;
   }
 
-  :global(:scope[data-ui-icon-button-state~="variant=ghost"]:disabled:where([data-hn-ui-icon-button])) {
+  :global(:scope[data-appearance="ghost"]:disabled:where([data-hn-ui-icon-button])) {
     border-color: transparent;
   }
 

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