@ark-ui/vue 5.29.0 → 5.30.0

package/dist/components/anatomy.cjs

@@ -28,6 +28,7 @@ const floatingPanel = require('@zag-js/floating-panel');
 const hoverCard = require('@zag-js/hover-card');
 const marquee = require('@zag-js/marquee');
 const menu = require('@zag-js/menu');
+const navigationMenu = require('@zag-js/navigation-menu');
 const numberInput = require('@zag-js/number-input');
 const pagination = require('@zag-js/pagination');
 const passwordInput = require('@zag-js/password-input');
@@ -118,6 +119,10 @@ Object.defineProperty(exports, "menuAnatomy", {
 	enumerable: true,
 	get: () => menu.anatomy
 });
+Object.defineProperty(exports, "navigationMenuAnatomy", {
+	enumerable: true,
+	get: () => navigationMenu.anatomy
+});
 Object.defineProperty(exports, "numberInputAnatomy", {
 	enumerable: true,
 	get: () => numberInput.anatomy

package/dist/components/anatomy.d.cts

@@ -21,6 +21,7 @@ export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy';
 export { listboxAnatomy } from './listbox/listbox.anatomy';
 export { marqueeAnatomy } from './marquee/marquee.anatomy';
 export { menuAnatomy } from './menu/menu.anatomy';
+export { navigationMenuAnatomy } from './navigation-menu/navigation-menu.anatomy';
 export { numberInputAnatomy } from './number-input/number-input.anatomy';
 export { paginationAnatomy } from './pagination/pagination.anatomy';
 export { passwordInputAnatomy } from './password-input/password-input.anatomy';

package/dist/components/anatomy.d.ts

@@ -21,6 +21,7 @@ export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy';
 export { listboxAnatomy } from './listbox/listbox.anatomy';
 export { marqueeAnatomy } from './marquee/marquee.anatomy';
 export { menuAnatomy } from './menu/menu.anatomy';
+export { navigationMenuAnatomy } from './navigation-menu/navigation-menu.anatomy';
 export { numberInputAnatomy } from './number-input/number-input.anatomy';
 export { paginationAnatomy } from './pagination/pagination.anatomy';
 export { passwordInputAnatomy } from './password-input/password-input.anatomy';

package/dist/components/anatomy.js

@@ -24,6 +24,7 @@ export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
 export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
+export { anatomy as navigationMenuAnatomy } from '@zag-js/navigation-menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
 export { anatomy as paginationAnatomy } from '@zag-js/pagination';
 export { anatomy as passwordInputAnatomy } from '@zag-js/password-input';

package/dist/components/checkbox/use-checkbox-group.cjs

@@ -3,10 +3,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const vue = require('vue');
+const boolean = require('../../utils/boolean.cjs');
+const useFieldsetContext = require('../fieldset/use-fieldset-context.cjs');
 const useVModel = require('../use-v-model.cjs');
 
 function useCheckboxGroup(props, emit) {
-  const interactive = vue.computed(() => !(props.disabled || props.readOnly));
+  const fieldset = useFieldsetContext.useFieldsetContext();
+  const disabled = vue.computed(() => props.disabled ?? fieldset?.value?.disabled);
+  const invalid = vue.computed(() => props.invalid ?? fieldset?.value?.invalid);
+  const interactive = vue.computed(() => !(disabled.value || props.readOnly));
   const { defaultValue } = vue.toRefs(props);
   const valueRef = useVModel.useVModel(props, "modelValue", emit, {
     defaultValue: defaultValue?.value ?? [],
@@ -37,9 +42,9 @@ function useCheckboxGroup(props, emit) {
         }
       },
       name: props.name,
-      disabled: props.disabled,
+      disabled: boolean.toBooleanValue(disabled.value),
       readOnly: props.readOnly,
-      invalid: props.invalid
+      invalid: invalid.value
     };
   };
   const setValue = (value) => {
@@ -49,9 +54,9 @@ function useCheckboxGroup(props, emit) {
     isChecked,
     value: valueRef.value,
     name: props.name,
-    disabled: props.disabled,
+    disabled: boolean.toBooleanValue(disabled.value),
     readOnly: props.readOnly,
-    invalid: props.invalid,
+    invalid: invalid.value,
     addValue,
     setValue,
     toggleValue,

package/dist/components/checkbox/use-checkbox-group.d.cts

@@ -11,7 +11,7 @@ export declare function useCheckboxGroup(props: GroupProps, emit?: EmitFn<GroupE
     isChecked: (val: string | undefined) => boolean;
     value: string[];
     name: string | undefined;
-    disabled: boolean | undefined;
+    disabled: boolean;
     readOnly: boolean | undefined;
     invalid: boolean | undefined;
     addValue: (val: string) => void;
@@ -21,7 +21,7 @@ export declare function useCheckboxGroup(props: GroupProps, emit?: EmitFn<GroupE
         checked: boolean | undefined;
         onCheckedChange(): void;
         name: string | undefined;
-        disabled: boolean | undefined;
+        disabled: boolean;
         readOnly: boolean | undefined;
         invalid: boolean | undefined;
     };

package/dist/components/checkbox/use-checkbox-group.d.ts

@@ -11,7 +11,7 @@ export declare function useCheckboxGroup(props: GroupProps, emit?: EmitFn<GroupE
     isChecked: (val: string | undefined) => boolean;
     value: string[];
     name: string | undefined;
-    disabled: boolean | undefined;
+    disabled: boolean;
     readOnly: boolean | undefined;
     invalid: boolean | undefined;
     addValue: (val: string) => void;
@@ -21,7 +21,7 @@ export declare function useCheckboxGroup(props: GroupProps, emit?: EmitFn<GroupE
         checked: boolean | undefined;
         onCheckedChange(): void;
         name: string | undefined;
-        disabled: boolean | undefined;
+        disabled: boolean;
         readOnly: boolean | undefined;
         invalid: boolean | undefined;
     };

package/dist/components/checkbox/use-checkbox-group.js

@@ -1,8 +1,13 @@
 import { computed, toRefs } from 'vue';
+import { toBooleanValue } from '../../utils/boolean.js';
+import { useFieldsetContext } from '../fieldset/use-fieldset-context.js';
 import { useVModel } from '../use-v-model.js';
 
 function useCheckboxGroup(props, emit) {
-  const interactive = computed(() => !(props.disabled || props.readOnly));
+  const fieldset = useFieldsetContext();
+  const disabled = computed(() => props.disabled ?? fieldset?.value?.disabled);
+  const invalid = computed(() => props.invalid ?? fieldset?.value?.invalid);
+  const interactive = computed(() => !(disabled.value || props.readOnly));
   const { defaultValue } = toRefs(props);
   const valueRef = useVModel(props, "modelValue", emit, {
     defaultValue: defaultValue?.value ?? [],
@@ -33,9 +38,9 @@ function useCheckboxGroup(props, emit) {
         }
       },
       name: props.name,
-      disabled: props.disabled,
+      disabled: toBooleanValue(disabled.value),
       readOnly: props.readOnly,
-      invalid: props.invalid
+      invalid: invalid.value
     };
   };
   const setValue = (value) => {
@@ -45,9 +50,9 @@ function useCheckboxGroup(props, emit) {
     isChecked,
     value: valueRef.value,
     name: props.name,
-    disabled: props.disabled,
+    disabled: toBooleanValue(disabled.value),
     readOnly: props.readOnly,
-    invalid: props.invalid,
+    invalid: invalid.value,
     addValue,
     setValue,
     toggleValue,

package/dist/components/color-picker/color-picker-root.vue.d.cts

@@ -4,7 +4,7 @@ import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './color-picker.types';
 import { ValueChangeDetails, OpenChangeDetails, FormatChangeDetails } from '@zag-js/color-picker';
 import { Color, ColorFormat } from '@zag-js/color-utils';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface ColorPickerRootBaseProps extends RootProps, RenderStrategyProps, PolymorphicProps {
 }
 export interface ColorPickerRootProps extends ColorPickerRootBaseProps, 

package/dist/components/color-picker/color-picker-root.vue.d.ts

@@ -4,7 +4,7 @@ import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './color-picker.types';
 import { ValueChangeDetails, OpenChangeDetails, FormatChangeDetails } from '@zag-js/color-picker';
 import { Color, ColorFormat } from '@zag-js/color-utils';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface ColorPickerRootBaseProps extends RootProps, RenderStrategyProps, PolymorphicProps {
 }
 export interface ColorPickerRootProps extends ColorPickerRootBaseProps, 

package/dist/components/combobox/combobox-root.vue.d.cts

@@ -5,7 +5,7 @@ import { CollectionItem } from '../collection';
 import { PolymorphicProps } from '../factory';
 import { RootProps } from './combobox.types';
 import { ValueChangeDetails, OpenChangeDetails, HighlightChangeDetails, InputValueChangeDetails } from '@zag-js/combobox';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface ComboboxRootBaseProps<T extends CollectionItem> extends RootProps<T>, RenderStrategyProps, PolymorphicProps {
 }
 export interface ComboboxRootProps<T extends CollectionItem> extends ComboboxRootBaseProps<T>, 

package/dist/components/combobox/combobox-root.vue.d.ts

@@ -5,7 +5,7 @@ import { CollectionItem } from '../collection';
 import { PolymorphicProps } from '../factory';
 import { RootProps } from './combobox.types';
 import { ValueChangeDetails, OpenChangeDetails, HighlightChangeDetails, InputValueChangeDetails } from '@zag-js/combobox';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface ComboboxRootBaseProps<T extends CollectionItem> extends RootProps<T>, RenderStrategyProps, PolymorphicProps {
 }
 export interface ComboboxRootProps<T extends CollectionItem> extends ComboboxRootBaseProps<T>, 

package/dist/components/date-picker/date-picker-root.vue.cjs

@@ -44,6 +44,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     translations: {},
     view: {},
     inline: { type: Boolean },
+    invalid: { type: Boolean },
+    required: { type: Boolean },
     lazyMount: { type: Boolean },
     unmountOnExit: { type: Boolean },
     asChild: { type: Boolean }
@@ -52,10 +54,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     defaultOpen: void 0,
     disabled: void 0,
     fixedWeeks: void 0,
+    inline: void 0,
+    invalid: void 0,
     open: void 0,
-    readOnly: void 0,
     outsideDaySelectable: void 0,
-    inline: void 0
+    readOnly: void 0,
+    required: void 0
   }),
   emits: ["focusChange", "openChange", "valueChange", "viewChange", "update:modelValue", "update:open", "update:view", "update:focusedValue"],
   setup(__props, { emit: __emit }) {

package/dist/components/date-picker/date-picker-root.vue.d.cts

@@ -2,8 +2,7 @@ import { HTMLAttributes, DefineComponent, ComponentOptionsMixin, PublicProps, Co
 import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './date-picker.types';
-import { FocusChangeDetails, ValueChangeDetails, OpenChangeDetails, ViewChangeDetails, DateView } from '@zag-js/date-picker';
-import { DateValue } from '@internationalized/date';
+import { FocusChangeDetails, ValueChangeDetails, DateValue, OpenChangeDetails, ViewChangeDetails, DateView } from '@zag-js/date-picker';
 export interface DatePickerRootBaseProps extends RootProps, RenderStrategyProps, PolymorphicProps {
 }
 export interface DatePickerRootProps extends DatePickerRootBaseProps, 
@@ -33,7 +32,9 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<DatePickerRootP
     "onUpdate:view"?: ((view: DateView) => any) | undefined;
     "onUpdate:focusedValue"?: ((focusedValue: DateValue) => any) | undefined;
 }>, {
+    invalid: boolean;
     disabled: boolean;
+    required: boolean;
     open: boolean;
     inline: boolean;
     defaultOpen: boolean;

package/dist/components/date-picker/date-picker-root.vue.d.ts

@@ -2,8 +2,7 @@ import { HTMLAttributes, DefineComponent, ComponentOptionsMixin, PublicProps, Co
 import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './date-picker.types';
-import { FocusChangeDetails, ValueChangeDetails, OpenChangeDetails, ViewChangeDetails, DateView } from '@zag-js/date-picker';
-import { DateValue } from '@internationalized/date';
+import { FocusChangeDetails, ValueChangeDetails, DateValue, OpenChangeDetails, ViewChangeDetails, DateView } from '@zag-js/date-picker';
 export interface DatePickerRootBaseProps extends RootProps, RenderStrategyProps, PolymorphicProps {
 }
 export interface DatePickerRootProps extends DatePickerRootBaseProps, 
@@ -33,7 +32,9 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<DatePickerRootP
     "onUpdate:view"?: ((view: DateView) => any) | undefined;
     "onUpdate:focusedValue"?: ((focusedValue: DateValue) => any) | undefined;
 }>, {
+    invalid: boolean;
     disabled: boolean;
+    required: boolean;
     open: boolean;
     inline: boolean;
     defaultOpen: boolean;

package/dist/components/date-picker/date-picker-root.vue.js

@@ -40,6 +40,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     translations: {},
     view: {},
     inline: { type: Boolean },
+    invalid: { type: Boolean },
+    required: { type: Boolean },
     lazyMount: { type: Boolean },
     unmountOnExit: { type: Boolean },
     asChild: { type: Boolean }
@@ -48,10 +50,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     defaultOpen: void 0,
     disabled: void 0,
     fixedWeeks: void 0,
+    inline: void 0,
+    invalid: void 0,
     open: void 0,
-    readOnly: void 0,
     outsideDaySelectable: void 0,
-    inline: void 0
+    readOnly: void 0,
+    required: void 0
   }),
   emits: ["focusChange", "openChange", "valueChange", "viewChange", "update:modelValue", "update:open", "update:view", "update:focusedValue"],
   setup(__props, { emit: __emit }) {

package/dist/components/date-picker/date-picker.types.d.cts

@@ -171,6 +171,14 @@ export interface RootProps {
      * Whether the date picker is inline
      */
     inline?: boolean;
+    /**
+     * Whether the date picker is in an invalid state
+     */
+    invalid?: boolean;
+    /**
+     * Whether the date picker is required
+     */
+    required?: boolean;
 }
 export type RootEmits = {
     /**

package/dist/components/date-picker/date-picker.types.d.ts

@@ -171,6 +171,14 @@ export interface RootProps {
      * Whether the date picker is inline
      */
     inline?: boolean;
+    /**
+     * Whether the date picker is in an invalid state
+     */
+    invalid?: boolean;
+    /**
+     * Whether the date picker is required
+     */
+    required?: boolean;
 }
 export type RootEmits = {
     /**

package/dist/components/dialog/dialog-root.vue.d.cts

@@ -2,7 +2,7 @@ import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { RootEmits, RootProps } from './dialog.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 import { OpenChangeDetails } from '@zag-js/dialog';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface DialogRootBaseProps extends RootProps, RenderStrategyProps {
 }
 export interface DialogRootProps extends DialogRootBaseProps {

package/dist/components/dialog/dialog-root.vue.d.ts

@@ -2,7 +2,7 @@ import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { RootEmits, RootProps } from './dialog.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 import { OpenChangeDetails } from '@zag-js/dialog';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface DialogRootBaseProps extends RootProps, RenderStrategyProps {
 }
 export interface DialogRootProps extends DialogRootBaseProps {

package/dist/components/editable/editable-root.vue.d.cts

@@ -2,7 +2,7 @@ import { HTMLAttributes, DefineComponent, ComponentOptionsMixin, PublicProps, Co
 import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './editable.types';
 import { ValueChangeDetails, EditChangeDetails } from '@zag-js/editable';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface EditableRootBaseProps extends RootProps, PolymorphicProps {
 }
 export interface EditableRootProps extends EditableRootBaseProps, 

package/dist/components/editable/editable-root.vue.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes, DefineComponent, ComponentOptionsMixin, PublicProps, Co
 import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './editable.types';
 import { ValueChangeDetails, EditChangeDetails } from '@zag-js/editable';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface EditableRootBaseProps extends RootProps, PolymorphicProps {
 }
 export interface EditableRootProps extends EditableRootBaseProps, 

package/dist/components/fieldset/fieldset-root.vue.cjs

@@ -25,7 +25,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     useFieldsetContext.FieldsetProvider(fieldset);
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).fieldset, vue.mergeProps(vue.unref(fieldset).getRootProps(), { "as-child": __props.asChild }), {
+      return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).fieldset, vue.mergeProps(vue.unref(fieldset).getRootProps(), {
+        ref: vue.unref(fieldset).refs.rootRef,
+        "as-child": __props.asChild
+      }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),

package/dist/components/fieldset/fieldset-root.vue.js

@@ -21,7 +21,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     FieldsetProvider(fieldset);
     useForwardExpose();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ark).fieldset, mergeProps(unref(fieldset).getRootProps(), { "as-child": __props.asChild }), {
+      return openBlock(), createBlock(unref(ark).fieldset, mergeProps(unref(fieldset).getRootProps(), {
+        ref: unref(fieldset).refs.rootRef,
+        "as-child": __props.asChild
+      }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),

package/dist/components/fieldset/use-fieldset.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const domQuery = require('@zag-js/dom-query');
 const vue = require('vue');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
+const unrefElement = require('../../utils/unref-element.cjs');
 const fieldset_anatomy = require('./fieldset.anatomy.cjs');
 
 const useFieldset = (props = {}) => {
@@ -19,13 +20,13 @@ const useFieldset = (props = {}) => {
     const fieldsetProps = vue.toValue(props);
     const id = fieldsetProps.id ?? uuid;
     return {
-      labelId: `fieldset::${id}::label`,
+      legendId: `fieldset::${id}::legend`,
       errorTextId: `fieldset::${id}::error-text`,
       helperTextId: `fieldset::${id}::helper-text`
     };
   });
   vue.onMounted(() => {
-    const rootNode = rootRef.value;
+    const rootNode = unrefElement.unrefElement(rootRef);
     if (!rootNode) return;
     const checkTextElements = () => {
       const { errorTextId, helperTextId } = ids.value;
@@ -43,20 +44,21 @@ const useFieldset = (props = {}) => {
   });
   return vue.computed(() => {
     const { disabled, invalid } = vue.toValue(props);
-    const { labelId, errorTextId, helperTextId } = ids.value;
-    const labelIds = [];
-    if (state.hasErrorText && invalid) labelIds.push(errorTextId);
-    if (state.hasHelperText) labelIds.push(helperTextId);
+    const { legendId, errorTextId, helperTextId } = ids.value;
+    const describedByIds = [];
+    if (state.hasErrorText && invalid) describedByIds.push(errorTextId);
+    if (state.hasHelperText) describedByIds.push(helperTextId);
+    const describedBy = describedByIds.length > 0 ? describedByIds.join(" ") : void 0;
     const getRootProps = () => ({
       ...fieldset_anatomy.parts.root.attrs,
       disabled,
       "data-disabled": domQuery.dataAttr(!!disabled),
       "data-invalid": domQuery.dataAttr(invalid),
-      "aria-labelledby": labelId,
-      "aria-describedby": labelIds.join(" ")
+      "aria-labelledby": legendId,
+      "aria-describedby": describedBy
     });
     const getLegendProps = () => ({
-      id: labelId,
+      id: legendId,
       ...fieldset_anatomy.parts.legend.attrs,
       "data-disabled": domQuery.dataAttr(!!disabled),
       "data-invalid": domQuery.dataAttr(invalid)
@@ -74,6 +76,11 @@ const useFieldset = (props = {}) => {
       refs: {
         rootRef
       },
+      ids: {
+        legend: legendId,
+        errorText: errorTextId,
+        helperText: helperTextId
+      },
       disabled,
       invalid,
       getRootProps,

package/dist/components/fieldset/use-fieldset.d.cts

@@ -18,6 +18,11 @@ export declare const useFieldset: (props?: MaybeRef<UseFieldsetProps>) => Comput
     refs: {
         rootRef: Ref<null, null>;
     };
+    ids: {
+        legend: string;
+        errorText: string;
+        helperText: string;
+    };
     disabled: boolean | "false" | "true" | undefined;
     invalid: boolean | undefined;
     getRootProps: () => FieldsetHTMLAttributes;

package/dist/components/fieldset/use-fieldset.d.ts

@@ -18,6 +18,11 @@ export declare const useFieldset: (props?: MaybeRef<UseFieldsetProps>) => Comput
     refs: {
         rootRef: Ref<null, null>;
     };
+    ids: {
+        legend: string;
+        errorText: string;
+        helperText: string;
+    };
     disabled: boolean | "false" | "true" | undefined;
     invalid: boolean | undefined;
     getRootProps: () => FieldsetHTMLAttributes;

package/dist/components/fieldset/use-fieldset.js

@@ -1,6 +1,7 @@
 import { dataAttr } from '@zag-js/dom-query';
 import { reactive, ref, useId, computed, toValue, onMounted, onBeforeUnmount } from 'vue';
 import { useEnvironmentContext, DEFAULT_ENVIRONMENT } from '../../providers/environment/use-environment-context.js';
+import { unrefElement } from '../../utils/unref-element.js';
 import { parts } from './fieldset.anatomy.js';
 
 const useFieldset = (props = {}) => {
@@ -15,13 +16,13 @@ const useFieldset = (props = {}) => {
     const fieldsetProps = toValue(props);
     const id = fieldsetProps.id ?? uuid;
     return {
-      labelId: `fieldset::${id}::label`,
+      legendId: `fieldset::${id}::legend`,
       errorTextId: `fieldset::${id}::error-text`,
       helperTextId: `fieldset::${id}::helper-text`
     };
   });
   onMounted(() => {
-    const rootNode = rootRef.value;
+    const rootNode = unrefElement(rootRef);
     if (!rootNode) return;
     const checkTextElements = () => {
       const { errorTextId, helperTextId } = ids.value;
@@ -39,20 +40,21 @@ const useFieldset = (props = {}) => {
   });
   return computed(() => {
     const { disabled, invalid } = toValue(props);
-    const { labelId, errorTextId, helperTextId } = ids.value;
-    const labelIds = [];
-    if (state.hasErrorText && invalid) labelIds.push(errorTextId);
-    if (state.hasHelperText) labelIds.push(helperTextId);
+    const { legendId, errorTextId, helperTextId } = ids.value;
+    const describedByIds = [];
+    if (state.hasErrorText && invalid) describedByIds.push(errorTextId);
+    if (state.hasHelperText) describedByIds.push(helperTextId);
+    const describedBy = describedByIds.length > 0 ? describedByIds.join(" ") : void 0;
     const getRootProps = () => ({
       ...parts.root.attrs,
       disabled,
       "data-disabled": dataAttr(!!disabled),
       "data-invalid": dataAttr(invalid),
-      "aria-labelledby": labelId,
-      "aria-describedby": labelIds.join(" ")
+      "aria-labelledby": legendId,
+      "aria-describedby": describedBy
     });
     const getLegendProps = () => ({
-      id: labelId,
+      id: legendId,
       ...parts.legend.attrs,
       "data-disabled": dataAttr(!!disabled),
       "data-invalid": dataAttr(invalid)
@@ -70,6 +72,11 @@ const useFieldset = (props = {}) => {
       refs: {
         rootRef
       },
+      ids: {
+        legend: legendId,
+        errorText: errorTextId,
+        helperText: helperTextId
+      },
       disabled,
       invalid,
       getRootProps,

package/dist/components/floating-panel/floating-panel-root.vue.d.cts

@@ -1,8 +1,7 @@
 import { RootEmits, RootProps } from './floating-panel.types';
 import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { OpenChangeDetails, PositionChangeDetails, SizeChangeDetails, StageChangeDetails } from '@zag-js/floating-panel';
-import { Point, Size } from '@zag-js/rect-utils';
+import { OpenChangeDetails, PositionChangeDetails, Point, SizeChangeDetails, Size, StageChangeDetails } from '@zag-js/floating-panel';
 export interface FloatingPanelRootBaseProps extends RootProps, RenderStrategyProps {
 }
 export interface FloatingPanelRootEmits extends RootEmits {

package/dist/components/floating-panel/floating-panel-root.vue.d.ts

@@ -1,8 +1,7 @@
 import { RootEmits, RootProps } from './floating-panel.types';
 import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { OpenChangeDetails, PositionChangeDetails, SizeChangeDetails, StageChangeDetails } from '@zag-js/floating-panel';
-import { Point, Size } from '@zag-js/rect-utils';
+import { OpenChangeDetails, PositionChangeDetails, Point, SizeChangeDetails, Size, StageChangeDetails } from '@zag-js/floating-panel';
 export interface FloatingPanelRootBaseProps extends RootProps, RenderStrategyProps {
 }
 export interface FloatingPanelRootEmits extends RootEmits {

package/dist/components/hover-card/hover-card-root.vue.d.cts

@@ -2,7 +2,7 @@ import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { RootEmits, RootProps } from './hover-card.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 import { OpenChangeDetails } from '@zag-js/hover-card';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface HoverCardRootBaseProps extends RootProps, RenderStrategyProps {
 }
 export interface HoverCardRootProps extends HoverCardRootBaseProps {

package/dist/components/hover-card/hover-card-root.vue.d.ts

@@ -2,7 +2,7 @@ import { RenderStrategyProps } from '../../utils/use-render-strategy';
 import { RootEmits, RootProps } from './hover-card.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 import { OpenChangeDetails } from '@zag-js/hover-card';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface HoverCardRootBaseProps extends RootProps, RenderStrategyProps {
 }
 export interface HoverCardRootProps extends HoverCardRootBaseProps {

package/dist/components/index.cjs

@@ -389,7 +389,9 @@ const useNumberInputContext = require('./number-input/use-number-input-context.c
 const numberInput$1 = require('./number-input/number-input.cjs');
 const paginationContext_vue_vue_type_script_setup_true_lang = require('./pagination/pagination-context.vue.cjs');
 const paginationEllipsis_vue_vue_type_script_setup_true_lang = require('./pagination/pagination-ellipsis.vue.cjs');
+const paginationFirstTrigger_vue_vue_type_script_setup_true_lang = require('./pagination/pagination-first-trigger.vue.cjs');
 const paginationItem_vue_vue_type_script_setup_true_lang = require('./pagination/pagination-item.vue.cjs');
+const paginationLastTrigger_vue_vue_type_script_setup_true_lang = require('./pagination/pagination-last-trigger.vue.cjs');
 const paginationNextTrigger_vue_vue_type_script_setup_true_lang = require('./pagination/pagination-next-trigger.vue.cjs');
 const paginationPrevTrigger_vue_vue_type_script_setup_true_lang = require('./pagination/pagination-prev-trigger.vue.cjs');
 const paginationRootProvider_vue_vue_type_script_setup_true_lang = require('./pagination/pagination-root-provider.vue.cjs');
@@ -1152,7 +1154,9 @@ exports.useNumberInputContext = useNumberInputContext.useNumberInputContext;
 exports.NumberInput = numberInput$1;
 exports.PaginationContext = paginationContext_vue_vue_type_script_setup_true_lang.default;
 exports.PaginationEllipsis = paginationEllipsis_vue_vue_type_script_setup_true_lang.default;
+exports.PaginationFirstTrigger = paginationFirstTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.PaginationItem = paginationItem_vue_vue_type_script_setup_true_lang.default;
+exports.PaginationLastTrigger = paginationLastTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.PaginationNextTrigger = paginationNextTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.PaginationPrevTrigger = paginationPrevTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.PaginationRootProvider = paginationRootProvider_vue_vue_type_script_setup_true_lang.default;

package/dist/components/index.js

@@ -410,7 +410,9 @@ import * as numberInput from './number-input/number-input.js';
 export { numberInput as NumberInput };
 export { default as PaginationContext } from './pagination/pagination-context.vue.js';
 export { default as PaginationEllipsis } from './pagination/pagination-ellipsis.vue.js';
+export { default as PaginationFirstTrigger } from './pagination/pagination-first-trigger.vue.js';
 export { default as PaginationItem } from './pagination/pagination-item.vue.js';
+export { default as PaginationLastTrigger } from './pagination/pagination-last-trigger.vue.js';
 export { default as PaginationNextTrigger } from './pagination/pagination-next-trigger.vue.js';
 export { default as PaginationPrevTrigger } from './pagination/pagination-prev-trigger.vue.js';
 export { default as PaginationRootProvider } from './pagination/pagination-root-provider.vue.js';