@threadlabs/looma 0.33.0 → 0.34.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)"
@@ -534,7 +605,7 @@ 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])) {
     --_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,7 +616,67 @@ 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])) {
+
+  :global(:scope[data-tone="danger"]:where([data-hn-ui-icon-button])) {
+    --_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])) {
+    --_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])) {
+    --_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])) {
+    --_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])) {
     --_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);
@@ -590,13 +721,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 +735,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 +845,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)))
@@ -728,7 +859,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
   }
 
-  :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))
@@ -753,29 +884,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 +913,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 +953,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 +996,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/UiMenu.vue

@@ -352,6 +352,9 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
 
 /* Small follows its trigger down: an item's own hooks still win. */
 
+/* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+   transparency, saturation and edge light belong to the surrounding decorative material. */
+
 @scope (.ui-menu) to ([data-hn]) {
   :global(:scope[data-ui-menu-state~="density=compact"]:where([data-hn-ui-menu])) {
     --_ui-default-menu-item-padding-block: var(--ui-space-1);
@@ -378,6 +381,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   }
 
   :global(:scope:where([data-hn-ui-menu])) {
+    --_ui-material-scale: 0.28;
     --_ui-menu-surface: var(--ui-menu-surface);
     --_ui-menu-border: var(--ui-menu-border);
     --_ui-menu-radius: var(--ui-menu-radius);
@@ -422,6 +426,91 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     max-block-size: inherit;
     overflow: auto;
   }
+  :global(:scope:not([inline]) .surface:where([data-hn-ui-menu])) {
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+    --_ui-material-active: clamp(
+      0,
+      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
+      1
+    );
+    --_ui-material-rim: calc(
+      (
+        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
+      ) *
+        var(--_ui-material-scale, 0.28) *
+        8px
+    );
+    --_ui-material-content-color: var(
+      --_ui-menu-surface,
+      var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
+    );
+    --_ui-material-rim-color: color-mix(
+      in srgb,
+      var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%),
+      transparent
+    );
+    background:
+      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,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --_ui-menu-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --_ui-menu-shadow,
+      var(
+        --ui-overlay-shadow,
+        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),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        var(--ui-elevation-overlay, var(--ui-shadow-lg))
+      )
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 0.18));
+    -webkit-backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 0.18));
+  }
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    :global(:scope:not([inline]) .surface:where([data-hn-ui-menu])) {
+      background: var(--_ui-material-content-color);
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :global(:scope:not([inline]) .surface:where([data-hn-ui-menu])) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :global(:scope:not([inline]) .surface:where([data-hn-ui-menu])) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
 
   :global(.surface hr:where([data-hn-ui-menu])) {
     align-self: stretch;

package/vue/UiNumberInput.d.ts

@@ -0,0 +1,83 @@
+import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    max: {
+        type: PropType<number | null>;
+    };
+    min: {
+        type: PropType<number | null>;
+    };
+    name: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    step: {
+        type: PropType<number | null>;
+    };
+    unit: {
+        type: PropType<string | null>;
+    };
+    value: {
+        type: PropType<string | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (event: CustomEvent<{
+        readonly value: string;
+    }>) => any;
+    change: (event: CustomEvent<{
+        readonly value: string;
+    }>) => any;
+    "update:value": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    max: {
+        type: PropType<number | null>;
+    };
+    min: {
+        type: PropType<number | null>;
+    };
+    name: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    step: {
+        type: PropType<number | null>;
+    };
+    unit: {
+        type: PropType<string | null>;
+    };
+    value: {
+        type: PropType<string | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{
+    onInput?: ((event: CustomEvent<{
+        readonly value: string;
+    }>) => any) | undefined;
+    onChange?: ((event: CustomEvent<{
+        readonly value: string;
+    }>) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiNumberInput.js

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