@threadlabs/looma 0.34.0 → 0.35.1

package/vue/UiLightEditor.vue

@@ -0,0 +1,402 @@
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import {
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import { acceptsControllerWrite } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
+import UiNumberInput from './UiNumberInput.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description: 'Prevents pointer, keyboard and exact edits.',
+      default: false,
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'Accessible name for the position editor.',
+      default: 'Light position',
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Sets both coordinate fields to the shared small, medium or large control height.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    x: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'x' },
+      description:
+        'Horizontal source position from 0 (left) to 1 (right), relative to every surface.',
+      default: 0.5,
+    },
+    y: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'y' },
+      description:
+        'Vertical source position from 0 (top) to 1 (bottom), relative to every surface.',
+      default: 0,
+    },
+  },
+} as const
+const props = defineProps({
+  disabled: { type: null as unknown as PropType<boolean | null> },
+  label: { type: null as unknown as PropType<string | null> },
+  size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
+  x: { type: null as unknown as PropType<number | null> },
+  y: { type: null as unknown as PropType<number | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
+})
+const acceptedProps: Record<string, unknown> = {
+  disabled: false,
+  label: 'Light position',
+  size: 'md',
+  x: 0.5,
+  y: 0,
+}
+const inputTracking = vuePropInputs(acceptedProps, {
+  disabled: false,
+  label: 'Light position',
+  size: 'md',
+  x: 0.5,
+  y: 0,
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'disabled':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'label':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'size':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'x':
+      return checkPropInput(value, { kind: 'terminal', name: 'number' }, true, true)
+    case 'y':
+      return checkPropInput(value, { kind: 'terminal', name: 'number' }, true, true)
+    default:
+      return { ok: false }
+  }
+}, () => {
+  void checkedProps.value
+})
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    disabled: propInputs.value<boolean | null>(
+      'disabled',
+      props['disabled'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    label: propInputs.value<string | null>(
+      'label',
+      props['label'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    size: propInputs.value<'sm' | 'md' | 'lg' | null>(
+      'size',
+      props['size'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'sm' | 'md' | 'lg',
+    x: propInputs.value<number | null>('x', props['x'], props[BINDING_INPUTS_PROP]) as number,
+    y: propInputs.value<number | null>('y', props['y'], props[BINDING_INPUTS_PROP]) as number,
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  'update:x': [value: number]
+  'update:y': [value: number]
+  input: [event: CustomEvent<{ readonly x: number; readonly y: number }>]
+  change: [event: CustomEvent<{ readonly x: number; readonly y: number }>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const planeElement = useTemplateRef<HTMLElement>('planeElement')
+const sourceElement = useTemplateRef<HTMLElement>('sourceElement')
+const horizontal = ref('50')
+const vertical = ref('0')
+let guardedPrevious: any = null
+const guarded = computed(() => {
+  const candidate: any = concat(
+    checkedProps.value.label,
+    '. Arrow keys move the source; Shift moves faster.',
+  )
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedPrevious
+  return guardedPrevious = candidate
+})
+provide('html-next:ui-light-editor:horizontal', horizontal)
+provide('html-next:ui-light-editor:vertical', vertical)
+checkHydratedRoot('span', 'ui-light-editor')
+
+const isInputDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && (typeof (detail as Record<string, unknown>)['x'] === 'number'
+    && Number.isFinite((detail as Record<string, unknown>)['x']))
+  && (typeof (detail as Record<string, unknown>)['y'] === 'number'
+    && Number.isFinite((detail as Record<string, unknown>)['y']))
+  && Object.keys(detail as object).every((key) => ['x', 'y'].includes(key)))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    input: isInputDetail,
+    change: isInputDetail,
+  },
+  modeled: ['x', 'y'],
+})
+
+useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'), {
+  root,
+  module: true,
+  dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        horizontal: { kind: 'terminal', name: 'string' },
+        vertical: { kind: 'terminal', name: 'string' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
+  initials: { horizontal: '50', vertical: '0' },
+  controllerSource: {
+    specifier: '../components/ui-light-editor/ui-light-editor.js',
+    definition: './components/ui-light-editor/ui-light-editor.html',
+  },
+  props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['disabled', 'label', 'size', 'x', 'y'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  refs: { plane: planeElement, source: sourceElement },
+  state: { horizontal, vertical },
+})
+</script>
+
+<template>
+  <span
+    class="ui-light-editor"
+    v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-light-editor
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-ui-light-editor-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-light-editor-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-light-editor-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-light-editor-prop-x="reflectedProp('x', 'x', checkedProps.x, undefined, false)"
+    :data-ui-light-editor-prop-y="reflectedProp('y', 'y', checkedProps.y, undefined, false)"
+    ref="root"
+  ><span
+      class="stage"
+      role="group"
+      data-hn-ui-light-editor
+      :aria-label="checkedProps.label ?? undefined"
+    ><span class="plane" data-hn-ui-light-editor ref="planeElement"><svg
+          viewBox="0 0 100 60"
+          preserveAspectRatio="none"
+          aria-hidden="true"
+          data-hn-ui-light-editor
+        >
+          <path d="M0 30 H100 M50 0 V60" data-hn-ui-light-editor></path>
+        </svg>{{ ' ' }}<span class="specimen" data-hn-ui-light-editor><slot /></span>{{
+          ' '
+        }}<button
+          type="button"
+          class="source"
+          data-hn-ui-light-editor
+          :disabled="checkedProps.disabled ?? undefined"
+          :aria-label="guarded"
+          ref="sourceElement"
+        >
+        </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, use arrow keys, or enter its position. Top centre is 50%, 0%.</span></span>
+</template>
+
+<style scoped>
+@scope (.ui-light-editor) to ([data-hn]) {
+  :global(:scope: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([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([data-hn-ui-light-editor])) {
+    position: relative;
+    display: block !important;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  :global(svg:where([data-hn-ui-light-editor])) {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  :global(path:where([data-hn-ui-light-editor])) {
+    fill: none;
+    stroke: var(--ui-border);
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+  }
+  :global(.specimen:where([data-hn-ui-light-editor])) {
+    position: absolute;
+    inset: 0;
+    display: grid !important;
+    place-items: center !important;
+  }
+  :global(.source: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:where([data-hn-ui-light-editor])::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);
+  }
+  :global(.source:active:where([data-hn-ui-light-editor])) {
+    cursor: grabbing;
+  }
+  :global(.source:focus-visible: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([data-hn-ui-light-editor])) {
+    cursor: not-allowed;
+  }
+  :global(.source:disabled:where([data-hn-ui-light-editor])::after) {
+    background: var(--ui-disabled-surface);
+    border-color: var(--ui-disabled-border);
+    box-shadow: none;
+  }
+  :global(.coordinates: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([data-hn-ui-light-editor])) {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+  }
+  @media (forced-colors: active) {
+    :global(.source:where([data-hn-ui-light-editor])::after) {
+      background: Canvas;
+      border-color: CanvasText;
+    }
+    :global(.source:focus-visible:where([data-hn-ui-light-editor])) {
+      outline-color: Highlight;
+    }
+  }
+}
+</style>

package/vue/UiMenu.vue

@@ -451,6 +451,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.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,
@@ -473,6 +474,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
         0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px) calc(
           var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 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/UiNumberInput.vue

@@ -1,19 +1,23 @@
 <!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import {
   checkHydratedRoot,
   concat,
   createDispatch,
+  initializedState,
   nativeAttrs,
   useComponentHost,
   useReflectedProp,
+  warnUnless,
 } from './host'
+import { acceptsControllerWrite } from './props'
 import {
   BINDING_INPUTS_PROP,
   checkedProp,
   checkPropInput,
+  copyStateSeed,
   evaluateInput,
   type InputBindings,
   inputDefault,
@@ -224,6 +228,23 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
+const display = initializedState<string>(
+  () =>
+    evaluateInput(() => {
+      return inputRead(checkedProps.value.value, propInputs.status('value'))
+    }),
+  (next: unknown) => typeof next === 'string',
+  copyStateSeed,
+  () =>
+    warnUnless(false, 'initializer:display', 'State `display` does not satisfy its declared type.'),
+)
+provide('html-next:ui-number-input:display', display)
+const declarationStatuses = { display: () => display.status() } as Record<
+  string,
+  () => typeof READY_INPUT
+>
+const declarationStatus = (name: string) => declarationStatuses[name]!()
+display.start()
 checkHydratedRoot('span', 'ui-number-input')
 
 const isInputDetail = (
@@ -243,6 +264,12 @@ useComponentHost(() => import('../components/ui-number-input/ui-number-input.js'
   root,
   module: true,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({ display: { kind: 'terminal', name: 'string' } } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-number-input/ui-number-input.js',
     definition: './components/ui-number-input/ui-number-input.html',
@@ -260,6 +287,8 @@ useComponentHost(() => import('../components/ui-number-input/ui-number-input.js'
   propNames: ['disabled', 'label', 'max', 'min', 'name', 'size', 'step', 'unit', 'value'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  state: { display },
+  availability: { display: () => declarationStatus('display') },
 })
 </script>
 
@@ -307,14 +336,14 @@ useComponentHost(() => import('../components/ui-number-input/ui-number-input.js'
       aria-description="Enter calculates arithmetic. Arrow keys step; Shift changes ten steps."
       :size="checkedProps.size"
       :disabled="checkedProps.disabled"
-      :value="checkedProps.value"
+      :value="display"
       :aria-label="checkedProps.label"
       :name="checkedProps.name"
       v-bind="{
         [BINDING_INPUTS_PROP]: {
           size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
           disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
-          value: () => ({ value: checkedProps.value, status: inputStatus('value', true) }),
+          value: () => ({ value: display, status: declarationStatus('display') }),
         },
       }"
     />{{ ' ' }}<template

package/vue/UiPopover.vue

@@ -402,6 +402,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.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,
@@ -424,6 +425,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
         0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(
           var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 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/UiReel.vue

@@ -40,7 +40,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'snap' },
       description:
-        'Snaps scrolling to items: start comes to rest with an item\'s start edge at the reel\'s start, and center with an item centred in the reel. Unset, the reel\n      scrolls freely.',
+        'Snaps scrolling to items: start comes to rest with an item\'s start edge at the reel\'s start, and center with an item centred in the reel. Unset, the reel\n      scrolls freely. Wrap a component item in a plain element when snapping: the wrapper receives snap alignment while the component keeps ownership of its\n      root styles.',
       values: ['start', 'center'],
     },
   },

package/vue/UiSelect.vue

@@ -296,7 +296,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
       var(--ui-control-surface, var(--ui-surface-elevated))
     );
     color: var(--ui-text-primary);
-    color-scheme: light dark;
+    color-scheme: inherit;
     font: inherit;
     line-height: var(--ui-line-height-tight);
     box-shadow: var(--ui-select-shadow, var(--ui-shadow-sm));
@@ -306,15 +306,18 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
       background-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
   :global(:scope:where([data-hn-ui-select])) {
+    --_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")
-    );
+    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;
-    background-size: 1.125rem 1.125rem;
+    background-position: right var(--ui-space-3) center, center;
+    background-size: 1.125rem 1.125rem, 100% 100%;
   }
 
   :global(:scope:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])):where([data-hn-ui-select])) {
@@ -351,6 +354,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
   }
 
   :global(:scope:disabled:where([data-hn-ui-select])) {
+    --_ui-select-highlight: none;
     background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     color: var(--ui-disabled-text);
     box-shadow: none;
@@ -362,8 +366,10 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     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;
-    background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
+    background-position: right var(--ui-space-2) center, center;
+    background-size:
+      var(--ui-icon-size-sm) var(--ui-icon-size-sm),
+      100% 100%;
     font-size: var(--ui-font-size-sm);
   }
 
@@ -371,7 +377,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     min-block-size: var(--ui-control-size-lg);
     padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
     padding-inline-end: calc(var(--ui-space-4) + 1.5rem) !important;
-    background-position: right var(--ui-space-4) center;
+    background-position: right var(--ui-space-4) center, center;
     font-size: var(--ui-font-size-md);
   }
   @media (pointer: coarse) {

package/vue/UiSwitch.vue

@@ -375,6 +375,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
     border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
     border-radius: var(--ui-radius-round);
     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:
@@ -400,6 +401,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
 
   :global(input:checked:where([data-hn-ui-switch])) {
     background-color: var(--ui-accent-solid);
+    background-image: var(--ui-accent-highlight, none);
     border-color: var(--ui-accent-solid);
   }
 
@@ -423,6 +425,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
   :global(:scope[data-ui-switch-state~="disabled"] input:where([data-hn-ui-switch])) {
     border-color: var(--ui-disabled-border);
     background-color: var(--ui-disabled-surface);
+    background-image: none;
     box-shadow: none;
     cursor: not-allowed;
   }

package/vue/UiTabs.vue

@@ -395,10 +395,9 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     max-inline-size: 100%;
     /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
     overflow-x: auto;
-    /* overflow-x: auto would make the block axis scrollable too; a sideways swipe must not scroll the
-       strip or the page vertically. */
+    /* Contain sideways overscroll without trapping vertical page scrolling. */
     overflow-y: hidden;
-    overscroll-behavior: contain;
+    overscroll-behavior-inline: contain;
     scrollbar-width: thin;
     border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
   }

package/vue/UiTextarea.vue

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

package/vue/UiTooltip.vue

@@ -580,7 +580,8 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     border-inline-end-width: var(--ui-border-width);
     border-block-end-width: var(--ui-border-width);
     border-end-end-radius: var(--ui-border-width);
-    transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
+    /* Stretch in screen axes after rotation so both arrow shoulders stay level. */
+    transform: scale(1.25, 0.85) rotate(45deg);
   }
 
   :global(:scope[data-ui-actual-placement="bottom"] .surface:where([data-hn-ui-tooltip])::after) {

package/vue/chunks/UiBadge.js

@@ -181,6 +181,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-8fcdd98a"]]);
+}), [["__scopeId", "data-v-2cdbe261"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -866,6 +866,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ec56b67f"]]);
+}), [["__scopeId", "data-v-bb40b79e"]]);
 //#endregion
 export { UiButton_default as t };