@threadlabs/looma 0.14.8 → 0.15.1

package/vue/UiGrid.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    columns?: number;
     gap?: 'xs' | 's' | 'm' | 'l' | 'xl';
     min?: 'sm' | 'md' | 'lg';
 };

package/vue/UiGrid.vue

@@ -5,6 +5,7 @@ import { computed } from 'vue'
 defineOptions({ inheritAttrs: false })
 
 const props = defineProps<{
+  columns?: number
   gap?: 'xs' | 's' | 'm' | 'l' | 'xl'
   min?: 'sm' | 'md' | 'lg'
 }>()
@@ -19,7 +20,12 @@ const hostState = computed(() =>
 </script>
 
 <template>
-  <div data-component="ui-grid" v-bind="$attrs" :data-ui-grid-state="hostState || undefined">
+  <div
+    data-component="ui-grid"
+    v-bind="$attrs"
+    :style="{ '--_grid-column-cap': columns }"
+    :data-ui-grid-state="hostState || undefined"
+  >
     <slot />
   </div>
 </template>
@@ -41,7 +47,25 @@ const hostState = computed(() =>
   display: grid;
   gap: var(--ui-grid-gap, var(--_grid-gap));
   grid-template-columns:
-    repeat(auto-fit, minmax(min(var(--ui-grid-min, var(--_grid-min)), 100%), 1fr));
+    repeat(
+      auto-fit,
+      minmax(
+        min(
+          max(
+            var(--ui-grid-min, var(--_grid-min)),
+            calc(
+              (
+                100% -
+                  (max(1, var(--_grid-column-cap, 9999)) - 1) * var(--ui-grid-gap, var(--_grid-gap))
+              ) /
+                max(1, var(--_grid-column-cap, 9999))
+            )
+          ),
+          100%
+        ),
+        1fr
+      )
+    );
   min-inline-size: 0;
   max-inline-size: 100%;
   margin: 0;

package/vue/UiIcon.vue

@@ -55,6 +55,7 @@ const shapes = computed(() =>
       { tag: 'path', d: 'M12 18h.01' },
       { tag: 'path', d: 'M8 18h.01' },
     ],
+    check: [{ tag: 'path', d: 'M20 6 9 17l-5-5' }],
     'chevron-down': [{ tag: 'path', d: 'm6 9 6 6 6-6' }],
     'chevron-left': [{ tag: 'path', d: 'm15 18-6-6 6-6' }],
     'chevron-right': [{ tag: 'path', d: 'm9 18 6-6-6-6' }],
@@ -62,6 +63,12 @@ const shapes = computed(() =>
       tag: 'path',
       d: 'm9 12 2 2 4-4',
     }],
+    'circle-dot': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, {
+      tag: 'circle',
+      cx: '12',
+      cy: '12',
+      r: '1',
+    }],
     'circle-x': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, { tag: 'path', d: 'm15 9-6 6' }, {
       tag: 'path',
       d: 'm9 9 6 6',
@@ -167,6 +174,10 @@ const shapes = computed(() =>
       { tag: 'rect', width: '7', height: '9', x: '14', y: '12', rx: '1' },
       { tag: 'rect', width: '7', height: '5', x: '3', y: '16', rx: '1' },
     ],
+    link: [{ tag: 'path', d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' }, {
+      tag: 'path',
+      d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+    }],
     list: [
       { tag: 'path', d: 'M3 5h.01' },
       { tag: 'path', d: 'M3 12h.01' },
@@ -306,12 +317,17 @@ const shapes = computed(() =>
       tag: 'path',
       d: 'M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11',
     }],
+    'user-round': [{ tag: 'circle', cx: '12', cy: '8', r: '5' }, {
+      tag: 'path',
+      d: 'M20 21a8 8 0 0 0-16 0',
+    }],
     users: [
       { tag: 'path', d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' },
       { tag: 'path', d: 'M16 3.128a4 4 0 0 1 0 7.744' },
       { tag: 'path', d: 'M22 21v-2a4 4 0 0 0-3-3.87' },
       { tag: 'circle', cx: '9', cy: '7', r: '4' },
     ],
+    x: [{ tag: 'path', d: 'M18 6 6 18' }, { tag: 'path', d: 'm6 6 12 12' }],
   })[props.name]
 )
 

package/vue/UiIconButton.d.ts

@@ -2,19 +2,21 @@ type __VLS_Props = {
     anticipatory?: boolean;
     disabled?: boolean;
     label?: string;
+    pending?: boolean;
     round?: boolean;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'ghost' | 'outline' | 'solid';
 };
-declare var __VLS_1: {};
+declare var __VLS_6: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    round: boolean;
     size: "sm" | "md" | "lg";
     variant: "ghost" | "outline" | "solid";
-    round: boolean;
     disabled: boolean;
+    pending: boolean;
     anticipatory: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiIconButton.vue

@@ -3,6 +3,7 @@
 import { computed, ref } from 'vue'
 import * as controllerModule from '../components/ui-icon-button/ui-icon-button.js'
 import { createDispatch, useComponentHost } from './host'
+import UiSpinner from './UiSpinner.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -11,6 +12,7 @@ const props = withDefaults(
     anticipatory?: boolean
     disabled?: boolean
     label?: string
+    pending?: boolean
     round?: boolean
     size?: 'sm' | 'md' | 'lg'
     variant?: 'ghost' | 'outline' | 'solid'
@@ -18,6 +20,7 @@ const props = withDefaults(
   {
     anticipatory: false,
     disabled: false,
+    pending: false,
     round: false,
     size: 'md',
     variant: 'ghost',
@@ -33,6 +36,7 @@ const hostState = computed(() =>
     props.variant && `variant variant=${props.variant}`,
     props.size && `size size=${props.size}`,
     props.round && 'round',
+    props.pending && 'pending',
   ].filter(Boolean).join(' ')
 )
 
@@ -43,6 +47,19 @@ useComponentHost(controllerModule.default, {
   dispatch,
   props,
 })
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
 </script>
 
 <template>
@@ -52,10 +69,15 @@ useComponentHost(controllerModule.default, {
     v-bind="$attrs"
     :disabled="disabled"
     :aria-label="label"
+    :aria-disabled="typeof (({ true: 'true', false: null })[`${pending}`]) === 'boolean'
+    ? String(({ true: 'true', false: null })[`${pending}`])
+    : attribute(({ true: 'true', false: null })[`${pending}`])"
+    :aria-busy="pending"
     :data-ui-icon-button-state="hostState || undefined"
     ref="root"
   >
-    <slot />
+    <UiSpinner v-if="pending" size="sm" />
+    <span class="content"><slot /></span>
   </button>
 </template>
 
@@ -189,7 +211,7 @@ useComponentHost(controllerModule.default, {
   padding: 0;
   margin: 0;
   border: 1px solid transparent;
-  border-radius: var(--ui-icon-button-radius, var(--ui-radius-md));
+  border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
   background: var(--ui-icon-button-surface, transparent);
   color: inherit;
   display: inline-flex;
@@ -275,24 +297,36 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
   );
 }
 
-[data-component~="ui-icon-button"]:hover:enabled {
+[data-component~="ui-icon-button"]:hover:enabled:not([aria-disabled="true"]) {
   /* Derived from the text colour so the ghost hover shows on any background. */
   background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
   color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
 }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:hover:enabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
   border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
 }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:hover:enabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
   background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
 }
 
-[data-component~="ui-icon-button"]:active:enabled {
+[data-component~="ui-icon-button"]:active:enabled:not([aria-disabled="true"]) {
   transform: scale(var(--ui-icon-button-active-scale, 0.96));
 }
 
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"] {
+  cursor: progress;
+}
+
+.content {
+  display: contents;
+}
+
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"] .content {
+  display: none;
+}
+
 [data-component~="ui-icon-button"]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);

package/vue/UiInput.vue

@@ -133,7 +133,10 @@ useComponentHost(controllerModule.default, {
       --ui-input-border,
       var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong)))
     );
-  border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-radius-md)));
+  border-radius: var(
+    --ui-input-radius,
+    var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md)))
+  );
   background: var(
     --ui-input-surface,
     var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
@@ -218,7 +221,7 @@ useComponentHost(controllerModule.default, {
 [data-component~="ui-input"]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(
     --ui-input-invalid-border,
-    var(--_ui-default-input-invalid-border, var(--ui-danger-solid))
+    var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
   );
 }
 
@@ -228,7 +231,11 @@ useComponentHost(controllerModule.default, {
     var(
       --_ui-default-input-invalid-focus-shadow,
       var(--ui-control-inset),
-      0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+      0 0 0 3px color-mix(
+        in srgb,
+        var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+        transparent
+      )
     )
   );
 }

package/vue/UiInputGroup.vue

@@ -48,14 +48,26 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+@property --ui-input-group-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-group-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-group-invalid-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
 /* An input with fixed text before or after it, such as a domain after a site's name
-       ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
-       focus ring around the input and its affixes together; the input inside drops its own through
-       its custom properties, so it is still the one ui-input, with its form behaviour intact. The
-       affixes are plain text beside the input, so name the input with a label that says what the
-       whole value is. The action slot takes one button at the end, inside the border, for the one
-       thing the field is for ("Continue" after a site's address), so it reads as the field's action
-       and not the form's. */
+   ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
+   focus ring around the input and its affixes together; the input inside drops its own through
+   its custom properties, so it is still the one ui-input, with its form behaviour intact. The
+   affixes are plain text beside the input, so name the input with a label that says what the
+   whole value is. The action slot takes one button at the end, inside the border, for the one
+   thing the field is for ("Continue" after a site's address), so it reads as the field's action
+   and not the form's. */
 [data-component~="ui-input-group"] {
   /* The group's own border and height stand for the input's, so the group is a lone Input's height.
      Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
@@ -80,7 +92,7 @@ useComponentHost(controllerModule.default, {
   min-block-size: var(--ui-control-size-md);
   /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
   border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-  border-radius: var(--ui-radius-md);
+  border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-control-surface, var(--ui-surface-elevated));
   box-shadow: var(--ui-control-inset);
   overflow: hidden;
@@ -120,13 +132,22 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-input-group"]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
-  border-color: var(--ui-danger-solid);
+  border-color: var(
+    --ui-input-group-invalid-border,
+    var(--ui-field-danger, var(--ui-danger-solid))
+  );
 }
 
 [data-component~="ui-input-group"]:has(input:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
-  box-shadow:
+  box-shadow: var(
+    --ui-input-group-invalid-focus-shadow,
     var(--ui-control-inset),
-    0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    0 0 0 3px color-mix(
+      in srgb,
+      var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+      transparent
+    )
+  );
 }
 
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */

package/vue/UiListbox.d.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    disabled?: boolean;
+    invalid?: boolean;
+    multiple?: boolean;
+    required?: boolean;
+    rows?: number;
+    value?: string;
+    values?: readonly (string)[];
+    modelValue?: string | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    invalid: boolean;
+    disabled: boolean;
+    required: boolean;
+    multiple: boolean;
+    rows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/UiListbox.js

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

package/vue/UiListbox.vue

@@ -0,0 +1,131 @@
+<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import * as controllerModule from '../components/ui-listbox/ui-listbox.js'
+import { createDispatch, useComponentHost } from './host'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    invalid?: boolean
+    multiple?: boolean
+    required?: boolean
+    rows?: number
+    value?: string
+    values?: readonly (string)[]
+    modelValue?: string | null
+  }>(),
+  {
+    disabled: false,
+    invalid: false,
+    multiple: false,
+    required: false,
+    rows: 5,
+  },
+)
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+const model = computed({
+  get: () => props.modelValue ?? props.value ?? undefined,
+  set: (value) => emit('update:modelValue', value as string),
+})
+
+const root = ref<HTMLElement | null>(null)
+
+const dispatch = createDispatch(root)
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+})
+</script>
+
+<template>
+  <select
+    data-component="ui-listbox"
+    v-bind="$attrs"
+    :size="rows"
+    :multiple="multiple"
+    :disabled="disabled"
+    :required="required"
+    :aria-invalid="invalid"
+    v-model="model"
+    ref="root"
+  >
+    <slot />
+  </select>
+</template>
+
+<style scoped>
+@property --ui-listbox-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-listbox-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-listbox-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-listbox-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-listbox-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+
+[data-component~="ui-listbox"] {
+  box-sizing: border-box;
+  display: block;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-min-block-size);
+  margin: 0;
+  padding: var(--ui-space-1);
+  border: 1px solid var(--ui-listbox-border, var(--ui-control-border));
+  border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+  background: var(--ui-listbox-surface, var(--ui-control-surface));
+  color: var(--ui-text-primary);
+  color-scheme: light dark;
+  font: inherit;
+  line-height: var(--ui-line-height-md);
+  box-shadow: var(--ui-control-inset);
+}
+
+[data-component~="ui-listbox"] option,
+[data-component~="ui-listbox"] optgroup {
+  padding: var(--ui-space-2);
+  font: inherit;
+}
+
+[data-component~="ui-listbox"]:focus-visible {
+  border-color: var(--ui-control-focus);
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+  box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
+}
+
+[data-component~="ui-listbox"][aria-invalid="true"],
+[data-component~="ui-listbox"]:is(:user-invalid, [data-user-invalid]) {
+  border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
+}
+
+[data-component~="ui-listbox"]:disabled {
+  background: var(--ui-control-surface-disabled);
+  color: var(--ui-disabled-text);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+[data-component~="ui-listbox"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiMenu.d.ts

@@ -11,6 +11,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (detail: {
         readonly value: string;
+        readonly checked?: boolean;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
     close: (detail: {
@@ -27,6 +28,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((detail: {
         readonly value: string;
+        readonly checked?: boolean;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
     onClose?: ((detail: {

package/vue/UiMenu.vue

@@ -23,7 +23,11 @@ const props = withDefaults(
 const emit = defineEmits<{
   'update:open': [value: boolean]
   select: [
-    detail: { readonly value: string; readonly trigger: 'keyboard' | 'pointer' | 'programmatic' },
+    detail: {
+      readonly value: string
+      readonly checked?: boolean
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
   ]
   open: [
     detail: {
@@ -55,10 +59,12 @@ const hostState = computed(() =>
 const isSelectDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && ((detail as Record<string, unknown>)['checked'] === undefined
+    || typeof (detail as Record<string, unknown>)['checked'] === 'boolean')
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['value', 'trigger'].includes(key))
+  && Object.keys(detail as object).every((key) => ['value', 'checked', 'trigger'].includes(key))
 const isOpenDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
@@ -111,6 +117,22 @@ useComponentHost(controllerModule.default, {
 
 <style scoped>
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-menu-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-menu-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-menu-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-menu-shadow {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-menu-viewport-gap {
   syntax: "*";
   inherits: false;
@@ -128,6 +150,10 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-menu"] {
+  --_ui-menu-surface: var(--ui-menu-surface);
+  --_ui-menu-border: var(--ui-menu-border);
+  --_ui-menu-radius: var(--ui-menu-radius);
+  --_ui-menu-shadow: var(--ui-menu-shadow);
   /* A menu nested in a compact one starts again from its own density. */
   --_ui-default-menu-item-padding-block: initial;
   --_ui-default-menu-item-padding-inline: initial;
@@ -154,14 +180,25 @@ useComponentHost(controllerModule.default, {
   box-sizing: border-box;
   max-inline-size: inherit;
   padding: var(--ui-space-1);
-  background: var(--ui-surface-elevated);
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-lg);
-  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+  background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+  border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+  box-shadow: var(
+    --_ui-menu-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+  );
   max-block-size: inherit;
   overflow: auto;
 }
 
+.surface hr {
+  align-self: stretch;
+  block-size: 0;
+  margin: var(--ui-space-1) 0;
+  border: 0;
+  border-block-start: 1px solid var(--ui-border-default);
+}
+
 [data-component~="ui-menu"]:not([data-component~="ui-menu"][data-ui-menu-state~="internalOpen"]) {
   display: none;
 }

package/vue/UiMenuGroup.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    label?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/UiMenuGroup.js

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