@vueland/ui 0.0.2 → 0.0.3

package/README.md

@@ -2,32 +2,43 @@
   <img src="https://raw.githubusercontent.com/vueland/vueland/master/logo.png" style="max-width: 100%;">
 </div>
 
-# @vueland/ui
+<div align="center">
+  <h1>@vueland/ui</h1>
+  <p>UI layer of the <a href="https://github.com/vueland/vueland">Vueland platform</a></p>
+  <p>
+    <a href="https://vueland.github.io/vueland/en/components/">Documentation</a> ·
+    <a href="https://www.npmjs.com/package/@vueland/ui">npm</a>
+  </p>
+  <p>
+    <a href="https://github.com/vueland/vueland">
+      <img src="https://img.shields.io/github/stars/vueland/vueland?style=flat&logo=github&label=Star%20us%20on%20GitHub" alt="GitHub Stars">
+    </a>
+  </p>
+</div>
+
+---
 
 > **⚠️ Active development — not production ready**
-> The library is under active development. APIs may change between releases without notice. Use in production at your own risk.
+> APIs may change between releases without notice. Production-ready components are marked **Stable** in the docs.
 
-Vue 3 component library for the Vueland platform. Provides a set of UI components, a 12-column flexbox grid system, utility classes, and a single breakpoint configuration shared across all layers.
+`@vueland/ui` is the UI layer of the Vueland platform. It provides components built for real-world frontend needs: a 12-column grid, form controls with validation and presets, overlays, composables, and a slot-first architecture that lets you replace visual sections of complex components without losing their behavior.
 
 ## Documentation
 
-Full documentation, examples, and guides are available at:
+Full documentation, examples, and component API references:
 
 https://vueland.github.io/vueland/en/guide/getting-started
 
 ## Installation
 
-::: code-group
-
-```bash [pnpm]
+```bash
+# pnpm
 pnpm add @vueland/ui
-```
 
-```bash [npm]
+# npm
 npm install @vueland/ui
-```
 
-```bash [yarn]
+# yarn
 yarn add @vueland/ui
 ```
 
@@ -41,8 +52,8 @@ import { createApp } from 'vue'
 import { createVuelandUI } from '@vueland/ui'
 import * as components from '@vueland/ui/components'
 
-import '@vueland/ui/src/styles/styles.scss'
-import '@vueland/ui/src/styles/themes/default-theme.scss'
+import '@vueland/ui/styles/styles.scss'
+import '@vueland/ui/styles/lib.scss'
 
 import App from './App.vue'
 
@@ -51,7 +62,7 @@ app.use(createVuelandUI({ components }))
 app.mount('#app')
 ```
 
-> **Import SCSS source, not pre-compiled CSS.** The styles are compiled by Vite at build time. If you import `dist/styles.css`, custom breakpoints configured via `@vueland/utils-jit` will not be applied.
+> **Import SCSS source, not pre-compiled CSS.** Styles are compiled by Vite at build time. If you import `dist/styles.css`, breakpoints configured via `@vueland/utils-jit` will not be applied.
 
 ### 2. Use components
 
@@ -59,17 +70,17 @@ Components are registered globally after `app.use(vueland)`:
 
 ```vue
 <template>
-  <c-row>
-    <c-col cols="12" sm="6" md="4">
-      <c-card class="pa-4 elevation-2">Hello Vueland</c-card>
-    </c-col>
-  </c-row>
+  <CRow>
+    <CCol cols="12" sm="6" md="4">
+      <CCard class="pa-4 elevation-2">Hello Vueland</CCard>
+    </CCol>
+  </CRow>
 </template>
 ```
 
 ## Breakpoints
 
-The default breakpoint scale follows Material Design:
+Material Design breakpoint scale, shared across the grid, utility classes, and `useDisplay`:
 
 | Name | min-width |
 |------|-----------|
@@ -80,29 +91,20 @@ The default breakpoint scale follows Material Design:
 | xl   | 1920px    |
 | xxl  | 2560px    |
 
-Breakpoints are shared across four layers: predefined SCSS utility classes, JIT classes, grid components (`CRow`, `CCol`), and the `useDisplay` composable.
-
-To customize them, use [`@vueland/utils-jit`](https://www.npmjs.com/package/@vueland/utils-jit) — one config in `vite.config.ts` syncs all layers automatically. See the [Breakpoints guide](https://vueland.github.io/vueland/en/guide/breakpoints) for the full step-by-step setup.
+To customize breakpoints, use [`@vueland/utils-jit`](https://www.npmjs.com/package/@vueland/utils-jit) — one config in `vite.config.ts` syncs all layers. See the [Breakpoints guide](https://vueland.github.io/vueland/en/guide/breakpoints).
 
 ## Grid system
 
-12-column flexbox grid built on `CRow`, `CCol`, and `CSpacer`:
-
 ```vue
-<c-row align="center" justify="space-between">
-  <!-- full width on mobile, 6 cols on sm+, 4 cols on md+ -->
-  <c-col cols="12" sm="6" md="4">
-    <c-card class="pa-4">Card</c-card>
-  </c-col>
-</c-row>
+<CRow align="center" justify="space-between">
+  <CCol cols="12" sm="6" md="4">
+    <CCard class="pa-4">Card</CCard>
+  </CCol>
+</CRow>
 ```
 
-Responsive column props, offset, order, and row-level alignment all follow the same breakpoint scale.
-
 ## Utility classes
 
-Predefined utility classes cover spacing, colors, typography, flex, display, sizing, elevation, borders, and more. All support responsive prefixes:
-
 ```html
 <div class="pa-2 md:pa-6 lg:pa-10">responsive padding</div>
 <div class="d-none md:d-flex">hidden on mobile</div>
@@ -111,26 +113,34 @@ Predefined utility classes cover spacing, colors, typography, flex, display, siz
 
 ## `useDisplay` composable
 
-Reactive screen state in JS/Vue, synced to the same breakpoints:
-
 ```vue
 <script setup lang="ts">
-import { inject } from 'vue'
-import { $BREAKPOINTS_KEY } from '@vueland/ui/constants'
+import { useBreakpoints } from '@vueland/ui/composables'
 
-const display = inject($BREAKPOINTS_KEY)!
+const { mdAndUp } = useBreakpoints()
 </script>
 
 <template>
-  <c-col :cols="display.mdAndUp.value ? 6 : 12">
-    Adaptive column
-  </c-col>
+  <CRow>
+    <CCol :cols="mdAndUp ? 6 : 12">Adaptive column</CCol>
+  </CRow>
 </template>
 ```
 
-## npm
+## Part of the Vueland platform
+
+`@vueland/ui` is one part of the Vueland platform. The platform also includes:
+
+- [`@vueland/utils-jit`](https://www.npmjs.com/package/@vueland/utils-jit) — JIT utility class generation for Vite
+- More plugins and adapters coming over time
+
+See the [platform overview](https://github.com/vueland/vueland) for the full picture.
+
+## ⭐ Support the project
+
+If this package is useful to you, a star on GitHub goes a long way.
 
-https://www.npmjs.com/package/@vueland/ui
+**[Star on GitHub →](https://github.com/vueland/vueland)**
 
 ## License
 

package/dist/components/CApp/CApp.js

@@ -1,5 +1,5 @@
 import { defineComponent, provide, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot } from 'vue';
-import { useAppScroll } from '../../composables/use-app-scroll.js';
+import { useApplicationScroll } from '../../composables/use-application-scroll.js';
 import { $APP_API_KEY } from '../../constants/provide-keys.js';
 
 const _hoisted_1 = { class: "c-app__wrapper" };
@@ -14,7 +14,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       getScrollLeft,
       blockScroll,
       unblockScroll
-    } = useAppScroll();
+    } = useApplicationScroll();
     provide($APP_API_KEY, {
       getScrollTop,
       getScrollLeft,

package/dist/components/CAutocomplete/CAutocomplete.js

@@ -1,4 +1,4 @@
-import { defineComponent, useModel, shallowRef, watch, unref, resolveComponent, openBlock, createBlock, mergeProps, withCtx, renderSlot, createElementBlock, toDisplayString, createVNode, Fragment, renderList, createTextVNode, createElementVNode, normalizeProps, guardReactiveProps, isRef, toHandlers, mergeModels } from 'vue';
+import { defineComponent, useModel, shallowRef, computed, unref, watch, resolveComponent, openBlock, createBlock, mergeProps, withCtx, renderSlot, createElementBlock, toDisplayString, createVNode, Fragment, renderList, createTextVNode, createElementVNode, normalizeProps, guardReactiveProps, isRef, toHandlers, mergeModels } from 'vue';
 import { useAutocomplete } from '../../composables/use-autocomplete.js';
 import _sfc_main$1 from '../CInput/CInput.js';
 import _sfc_main$2 from '../CMenu/CMenu.js';
@@ -40,6 +40,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const fieldRef = shallowRef();
     const menuRef = shallowRef();
     const menuListRef = shallowRef();
+    const ariaControls = computed(() => {
+      var _a;
+      return (_a = unref(menuListRef)) == null ? void 0 : _a.listId;
+    });
+    const ariaActiveDescendant = computed(() => {
+      var _a;
+      return (_a = unref(menuListRef)) == null ? void 0 : _a.activeDescendant;
+    });
     const { onKeydown } = useKeyboard({
       Backspace: () => {
         if (!unref(inputValue)) {
@@ -56,9 +64,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         unref(fieldRef).$el.blur();
       },
       ArrowDown: () => {
-        menuListRef.value.focus();
+        var _a;
+        return (_a = unref(menuListRef)) == null ? void 0 : _a.navigateDown();
+      },
+      ArrowUp: () => {
+        var _a;
+        return (_a = unref(menuListRef)) == null ? void 0 : _a.navigateUp();
       }
-    });
+    }, { prevent: ["ArrowDown", "ArrowUp"] });
     function clear() {
       model.value = props.multiple ? [] : void 0;
       inputValue.value = "";
@@ -81,7 +94,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "inputRef",
         ref: inputRef,
         "model-value": model.value
-      }, _ctx.$attrs, { kind: "listbox" }), {
+      }, _ctx.$attrs, {
+        role: "combobox",
+        "aria-controls": ariaControls.value,
+        "aria-activedescendant": ariaActiveDescendant.value
+      }), {
         field: withCtx((field) => {
           var _a;
           return [
@@ -89,7 +106,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               id: `${field.uid}-menu`,
               ref_key: "menuRef",
               ref: menuRef,
-              bottom: "",
+              align: "bottom",
               "open-on-focus": "",
               "close-on-click-outside": "",
               "close-on-content-click": !__props.multiple,
@@ -247,7 +264,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         _: 3
         /* FORWARDED */
-      }, 16, ["model-value"]);
+      }, 16, ["model-value", "aria-controls", "aria-activedescendant"]);
     };
   }
 });

package/dist/components/CCheckbox/CCheckbox.js

@@ -26,7 +26,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event)
       }, _ctx.$attrs), {
         default: withCtx(({ checked, toggle }) => [
-          createVNode(_component_c_input, mergeProps({ "model-value": model.value }, _ctx.$attrs, { kind: "checkbox" }), {
+          createVNode(_component_c_input, mergeProps({ "model-value": model.value }, _ctx.$attrs, { role: "checkbox" }), {
             field: withCtx(({ uid, label, attrs, hasError, readonly, disabled }) => [
               createVNode(_sfc_main$2, mergeProps({
                 id: uid,

package/dist/components/CDateInput/CDateInput.js

@@ -79,7 +79,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         ref: inputRef,
         "model-value": model.value
       }, _ctx.$attrs, {
-        kind: "input",
         label: __props.label,
         details: __props.details,
         "no-details": __props.noDetails,

package/dist/components/CDatePicker/index4.js

@@ -1,4 +1,4 @@
-import _sfc_main from './CDatePickerHeader.js';
+import _sfc_main from './CDatePickerDates.js';
 
 
 

package/dist/components/CDatePicker/index6.js

@@ -1,4 +1,4 @@
-import _sfc_main from './CDatePickerDates.js';
+import _sfc_main from './CDatePickerHeader.js';
 
 
 

package/dist/components/CDialog/index.js

@@ -1,4 +1,4 @@
-import _sfc_main from './CDialogsStack.js';
+import _sfc_main from './CDialog.js';
 
 
 

package/dist/components/CDialog/index2.js

@@ -1,4 +1,4 @@
-import _sfc_main from './CDialog.js';
+import _sfc_main from './CDialogsStack.js';
 
 
 

package/dist/components/CInput/CInput.js

@@ -3,6 +3,8 @@ import { useValidate } from '../../composables/use-validate.js';
 import { useForm } from '../../composables/use-form.js';
 import { useInputPresets } from '../../composables/use-input-presets.js';
 import { FIELD_ATTRS } from '../../constants/attrs.js';
+import { useAriaField } from '../../composables/use-aria-field.js';
+import { useAriaActivator } from '../../composables/use-aria-activator.js';
 import { useId } from '../../composables/use-id.js';
 
 const _hoisted_1 = { class: "c-input__field" };
@@ -26,7 +28,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean },
     focused: { type: Boolean },
     readonly: { type: Boolean },
-    kind: {}
+    role: {}
   }, {
     "focused": { type: Boolean, ...{ default: false } },
     "focusedModifiers": {}
@@ -58,10 +60,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       state,
       errors
     });
-    const fieldId = useId(props.id, { prefix: props.kind });
-    const isLisBox = props.kind === "listbox";
-    const isCheckBox = props.kind === "checkbox";
-    const isRadio = props.kind === "radio";
+    const fieldId = useId(props.id, { prefix: props.role });
+    const isCombobox = props.role === "combobox";
+    const isCheckBox = props.role === "checkbox";
+    const isRadio = props.role === "radio";
     const hasDetails = computed(
       () => !props.noDetails && (!!props.details || !!(slots == null ? void 0 : slots.details) || errors.hasError)
     );
@@ -71,16 +73,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return acc;
     }, {}));
+    const ariaField = useAriaField(() => ({
+      fieldId,
+      label: props.label || isCheckBox || isRadio,
+      hasDetails: unref(hasDetails),
+      hasError: errors.hasError,
+      errorMessage: errors.errorMessage,
+      readonly: props.readonly,
+      disabled: props.disabled
+    }));
+    const ariaActivator = useAriaActivator(() => ({
+      expanded: state.focused,
+      haspopup: "listbox",
+      controls: `${fieldId}-menu`
+    }));
     const fieldAttrs = computed(() => ({
-      ...props.label || isCheckBox || isRadio ? { "aria-labelledby": `${fieldId}-label` } : {},
-      ...unref(hasDetails) ? { "aria-describedby": `${fieldId}-details` } : {},
-      ...errors.hasError ? { "aria-invalid": "true" } : {},
-      ...errors.errorMessage && unref(hasDetails) ? { "aria-errormessage": `${fieldId}-details` } : {},
-      ...props.readonly ? { "aria-readonly": "true" } : {},
-      ...props.disabled ? { "aria-disabled": "true" } : {},
-      ...isLisBox ? { "aria-haspopup": "listbox" } : {},
-      ...isLisBox ? { "aria-controls": `${fieldId}-menu` } : {},
-      ...isLisBox ? { "aria-expanded": `${state.focused}` } : {},
+      ...unref(ariaField),
+      ...isCombobox ? { role: "combobox", ...unref(ariaActivator) } : {},
       ...unref(normalizedAttrsMap)
     }));
     const classes = computed(() => [

package/dist/components/CList/CList.js

@@ -1,8 +1,9 @@
 import { defineComponent, useModel, useAttrs, shallowRef, computed, unref, provide, openBlock, createElementBlock, normalizeClass, renderSlot, mergeModels, toRaw, nextTick } from 'vue';
 import { $LIST_API_KEY } from '../../constants/provide-keys.js';
+import { useId } from '../../composables/use-id.js';
 import { useKeyboard } from '../../composables/use-keyboard.js';
 
-const _hoisted_1 = ["role", "tabindex", "aria-multiselectable"];
+const _hoisted_1 = ["role", "tabindex", "aria-multiselectable", "aria-activedescendant"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "CList",
@@ -27,8 +28,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const attrs = useAttrs();
     const focused = shallowRef(false);
     const listEl = shallowRef();
+    const activeDescendant = shallowRef();
+    const listId = useId(void 0, { prefix: "c-list" });
     let handlers = [];
-    let index = 0;
+    let currentIndex = -1;
     const classes = computed(() => ({
       "c-list--readonly": props.readonly,
       [attrs.class]: !!attrs.class
@@ -58,7 +61,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.readonly) return;
       if (props.multiple) {
         const current = unref(model);
-        if (props.mandatory && (current == null ? void 0 : current.length) <= 1) return;
+        if (props.mandatory && (current == null ? void 0 : current.length) <= 1) {
+          return;
+        }
         model.value = current == null ? void 0 : current.filter((item) => toRaw(item) !== toRaw(listItem));
       } else {
         if (props.mandatory) return;
@@ -74,38 +79,51 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     function register(itemControls) {
+      const idx = handlers.length;
       handlers.push(itemControls);
+      return idx;
     }
     function unregister(itemControls) {
       handlers = handlers.filter((it) => it !== itemControls);
     }
+    function setDescendant(id) {
+      activeDescendant.value = id;
+    }
     async function focus() {
       focused.value = true;
       await nextTick();
       unref(listEl).focus();
     }
+    function navigateDown() {
+      var _a;
+      if (!handlers.length) return;
+      const next = Math.min(handlers.length - 1, currentIndex + 1);
+      (_a = handlers[currentIndex]) == null ? void 0 : _a.blur();
+      handlers[next].focus();
+      currentIndex = next;
+    }
+    function navigateUp() {
+      var _a;
+      if (!handlers.length || currentIndex <= 0) return;
+      const prev = currentIndex - 1;
+      (_a = handlers[currentIndex]) == null ? void 0 : _a.blur();
+      handlers[prev].focus();
+      currentIndex = prev;
+    }
     const { onKeydown } = useKeyboard({
-      ArrowDown: () => {
-        var _a;
-        handlers[index].focus();
-        (_a = handlers[index - 1]) == null ? void 0 : _a.blur();
-        index = Math.min(handlers.length - 1, index + 1);
-      },
-      ArrowUp: () => {
-        var _a;
-        (_a = handlers[index]) == null ? void 0 : _a.blur();
-        index = Math.min(handlers.length - 1, Math.max(0, index - 1));
-        handlers[index].focus();
-      }
+      ArrowDown: navigateDown,
+      ArrowUp: navigateUp
     });
-    __expose({ focus });
+    __expose({ focus, listId, activeDescendant, navigateDown, navigateUp });
     provide($LIST_API_KEY, {
       role,
+      listId,
       register,
       unregister,
       select,
       unselect,
-      isActive
+      isActive,
+      setDescendant
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("ul", {
@@ -115,6 +133,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         role: role.value,
         tabindex: tabindex.value,
         "aria-multiselectable": __props.multiple,
+        "aria-activedescendant": activeDescendant.value,
         onKeydown: _cache[0] || (_cache[0] = //@ts-ignore
         (...args) => unref(onKeydown) && unref(onKeydown)(...args))
       }, [

package/dist/components/CList/CListItem.js

@@ -11,8 +11,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const list = useList();
-    const tabindex = shallowRef(-1);
+    const myIndex = shallowRef(-1);
+    const focused = shallowRef(false);
     const isInActiveList = computed(() => unref(list == null ? void 0 : list.role) === "listbox" || unref(list == null ? void 0 : list.role) === "menu");
+    const myId = computed(
+      () => isInActiveList.value && (list == null ? void 0 : list.listId) && myIndex.value >= 0 ? `${list.listId}-option-${myIndex.value}` : void 0
+    );
     const isSelected = computed(
       () => {
         var _a;
@@ -21,10 +25,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const classes = computed(() => ({
       "c-list-item--active": unref(isSelected),
-      "c-list-item--focused": unref(tabindex) > -1
+      "c-list-item--focused": unref(focused)
     }));
     const attrs = computed(() => ({
-      ...unref(tabindex) > -1 ? { tabindex: 0 } : {},
+      ...unref(myId) ? { id: unref(myId) } : {},
       ...isInActiveList.value ? { role: "option" } : {},
       "aria-selected": unref(isSelected)
     }));
@@ -33,18 +37,19 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       handler == null ? void 0 : handler(props.value);
     }
     function focus() {
-      tabindex.value = 0;
+      var _a;
+      (_a = list == null ? void 0 : list.setDescendant) == null ? void 0 : _a.call(list, unref(myId));
+      focused.value = true;
     }
     function blur() {
-      tabindex.value = -1;
+      var _a;
+      (_a = list == null ? void 0 : list.setDescendant) == null ? void 0 : _a.call(list, void 0);
+      focused.value = false;
     }
-    const handlers = {
-      focus,
-      blur
-    };
+    const handlers = { focus, blur };
     onMounted(() => {
       if (unref(isInActiveList)) {
-        list.register(handlers);
+        myIndex.value = list.register(handlers);
       }
     });
     onBeforeUnmount(() => {

package/dist/components/CMenu/CMenu.js

@@ -1,8 +1,7 @@
-import { defineComponent, useModel, shallowRef, computed, unref, provide, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, renderSlot, createVNode, withCtx, Transition, withDirectives, mergeProps, createElementVNode, vShow, createCommentVNode, mergeModels } from 'vue';
+import { defineComponent, useModel, useAttrs, shallowRef, computed, unref, provide, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, renderSlot, createVNode, withCtx, Transition, withDirectives, mergeProps, createElementVNode, vShow, createCommentVNode, mergeModels } from 'vue';
 import { isDef } from '../../helpers/index.js';
 import { useActivator } from '../../composables/use-activator.js';
 import { useAutoPosition } from '../../composables/use-auto-position.js';
-import { useMenuPresets } from '../../composables/use-menu-presets.js';
 import _sfc_main$1 from '../COverlay/COverlay.js';
 import { vClickOutside } from '../../directives/v-click-outside.js';
 import { useKeyboard } from '../../composables/use-keyboard.js';
@@ -11,8 +10,10 @@ import { useDelayedActions } from '../../composables/use-delay-actions.js';
 import { convertToUnit } from '../../utils/convert-to-unit.js';
 import { $MENU_API_KEY } from '../../constants/provide-keys.js';
 import { IN_BROWSER } from '../../utils/globals.js';
+import { useId } from '../../composables/use-id.js';
 
-const _hoisted_1 = { class: "c-menu__content" };
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "c-menu__content" };
 const THROTTLE_DELAY = 50;
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -38,13 +39,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     positionY: {},
     offsetX: {},
     offsetY: {},
-    left: { type: Boolean },
-    right: { type: Boolean },
-    top: { type: Boolean },
-    bottom: { type: Boolean },
+    align: {},
     openDelay: {},
     closeDelay: {},
-    preset: {},
     modelValue: { type: Boolean },
     to: {},
     closeOnClickOutside: { type: Boolean },
@@ -61,6 +58,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const model = useModel(__props, "modelValue");
     const { transition = "fade" } = props;
+    const attrs = useAttrs();
     const {
       element,
       activatorProps,
@@ -72,9 +70,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       contentRef,
       update
     } = useAutoPosition(props, element);
-    const presets = useMenuPresets({ props });
     const { openDelay, closeDelay } = useDelayedActions(props);
     const mounted = shallowRef(props.ssr || props.modelValue);
+    const _generatedId = useId(void 0, { prefix: "c-menu" });
+    const menuId = computed(() => {
+      var _a;
+      return (_a = attrs.id) != null ? _a : _generatedId;
+    });
     const detached = computed(() => isDef(props.positionX) || isDef(props.positionY));
     const sizesStyles = computed(() => {
       var _a, _b;
@@ -92,16 +94,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       left: convertToUnit(unref(content).left),
       ...unref(sizesStyles)
     }));
-    const classes = computed(() => [
-      { "c-menu--visible": unref(model) },
-      ...unref(presets).root
-    ]);
+    const classes = computed(() => ({ "c-menu--visible": unref(model) }));
     const open = () => {
       mounted.value = true;
       openDelay(() => {
         if (!unref(detached)) {
           model.value = true;
         }
+        update();
         emit("open");
       });
     };
@@ -129,7 +129,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         emit("click");
       }
     };
-    const { onKeydown } = useKeyboard({ Escape: () => close() });
+    const { onKeydown } = useKeyboard({
+      Escape: () => close()
+    });
     const listeners = genListeners({
       open,
       close,
@@ -188,23 +190,19 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             default: withCtx(({ zIndex }) => [
               createVNode(Transition, { name: unref(transition) }, {
                 default: withCtx(() => [
-                  mounted.value ? withDirectives((openBlock(), createElementBlock(
-                    "div",
-                    mergeProps({
-                      key: 0,
-                      ref_key: "contentRef",
-                      ref: contentRef,
-                      class: ["c-menu", classes.value],
-                      style: { ...styles.value, zIndex }
-                    }, _ctx.$attrs, { onClick: onContentClick }),
-                    [
-                      createElementVNode("div", _hoisted_1, [
-                        renderSlot(_ctx.$slots, "default")
-                      ])
-                    ],
-                    16
-                    /* FULL_PROPS */
-                  )), [
+                  mounted.value ? withDirectives((openBlock(), createElementBlock("div", mergeProps({ key: 0 }, _ctx.$attrs, {
+                    id: menuId.value,
+                    ref_key: "contentRef",
+                    ref: contentRef,
+                    class: ["c-menu", classes.value],
+                    style: { ...styles.value, zIndex },
+                    tabindex: "-1",
+                    onClick: onContentClick
+                  }), [
+                    createElementVNode("div", _hoisted_2, [
+                      renderSlot(_ctx.$slots, "default")
+                    ])
+                  ], 16, _hoisted_1)), [
                     [vShow, model.value],
                     [unref(vClickOutside), onClickOutside]
                   ]) : createCommentVNode("v-if", true)