@soybeanjs/headless 0.16.0 → 0.18.0

package/README.md

@@ -13,6 +13,8 @@ A collection of unstyled, accessible UI primitives for Vue 3.
 
 Some multi-slot components also expose `Compact` aggregators, such as `AccordionCompact` and `TableCompact`. These headless entry points own item iteration and default content/icon composition, while styled wrappers stay focused on classes and prop forwarding.
 
+Current Compact coverage also includes stable structures such as card, date-field, dialog, editable, hover-card, layout, navigation-menu, pagination, popover, and stepper.
+
 ## 📦 Installation
 
 ```bash
@@ -63,27 +65,30 @@ import {
 
 ```
 headless/src/
-├── components/    # 50 primitives (accordion, dialog, select…)
-├── composables/   # 26 shared hooks (state, focus, floating, selection…)
+├── components/    # 95 component dirs (accordion, dialog, select…)
+├── composables/   # 25 shared hooks (state, focus, floating, selection…)
 ├── shared/        # Pure TS utilities (DOM, focus, tree, form, guard)
 ├── constants/     # ARIA attributes, component keys
+├── date/          # Shared date and calendar helpers
 ├── types/         # Global types (ClassValue, UiClass, PropsToContext…)
-└── index.ts        # Main barrel export
+└── index.ts       # Main barrel export
 ```
 
 ### Sub-path Exports
 
 ```ts
 import { AccordionRoot } from '@soybeanjs/headless'; // components + types
-import { useControllableState } from '@soybeanjs/headless/composables'; // 26 composables
+import { useControllableState } from '@soybeanjs/headless/composables'; // 25 composables
 import { transformPropsToContext } from '@soybeanjs/headless/shared'; // pure TS utils
+import { createMonth } from '@soybeanjs/headless/date'; // shared date helpers
 import * as H from '@soybeanjs/headless/namespaced'; // namespace object
 import type { AccordionUiSlot } from '@soybeanjs/headless/accordion'; // per-component
+import type { UiClass } from '@soybeanjs/headless/types'; // shared type surface
 ```
 
 ## 🧩 Composables
 
-26 hooks organized by category:
+25 hooks organized by category:
 
 | Category      | Composables                                                    |
 | ------------- | -------------------------------------------------------------- |

package/README.zh-CN.md

@@ -13,6 +13,8 @@
 
 部分多插槽组件还会暴露 `Compact` 聚合层，例如 `AccordionCompact` 和 `TableCompact`。这些 headless 入口负责条目遍历以及默认内容 / 图标组合，而样式包装层只专注于类名和 props 转发。
 
+目前这类 Compact 约定式组合还覆盖了 card、date-field、dialog、editable、hover-card、layout、navigation-menu、pagination、popover、stepper 等稳定结构。
+
 ## 📦 安装
 
 ```bash
@@ -63,27 +65,30 @@ import {
 
 ```
 headless/src/
-├── components/    # 50 个原语组件（accordion、dialog、select…）
-├── composables/   # 26 个共享 hook（状态、焦点、浮层、选择…）
+├── components/    # 95 个组件目录（accordion、dialog、select…）
+├── composables/   # 25 个共享 hook（状态、焦点、浮层、选择…）
 ├── shared/        # 纯 TS 工具函数（DOM、焦点、树、表单、守卫）
 ├── constants/     # ARIA 属性常量、组件标识键
+├── date/          # 共享日期与日历工具
 ├── types/         # 全局类型（ClassValue、UiClass、PropsToContext…）
-└── index.ts        # 主 barrel 导出
+└── index.ts       # 主 barrel 导出
 ```
 
 ### 子路径导出
 
 ```ts
 import { AccordionRoot } from '@soybeanjs/headless'; // 组件 + 类型
-import { useControllableState } from '@soybeanjs/headless/composables'; // 26 个 composable
+import { useControllableState } from '@soybeanjs/headless/composables'; // 25 个 composable
 import { transformPropsToContext } from '@soybeanjs/headless/shared'; // 纯 TS 工具
+import { createMonth } from '@soybeanjs/headless/date'; // 日期工具
 import * as H from '@soybeanjs/headless/namespaced'; // 命名空间导入
 import type { AccordionUiSlot } from '@soybeanjs/headless/accordion'; // 单组件类型
+import type { UiClass } from '@soybeanjs/headless/types'; // 共享类型导出
 ```
 
 ## 🧩 Composables
 
-26 个 hook，按功能分类：
+25 个 hook，按功能分类：
 
 | 分类     | Composables                                                    |
 | -------- | -------------------------------------------------------------- |

package/dist/components/_icon/types.d.ts

@@ -1,8 +1,17 @@
 import { Component, VNode } from "vue";
 
 //#region src/components/_icon/types.d.ts
+/**
+ * Type information for IconValue.
+ */
 type IconValue = VNode | Component | string | null | undefined;
+/**
+ * Properties for the Icon component.
+ */
 interface IconProps {
+  /**
+   * Icon rendered by the component.
+   */
   icon: IconValue;
 }
 //#endregion

package/dist/components/accordion/types.d.ts

@@ -4,6 +4,9 @@ import { CollapsibleContentProps, CollapsibleRootProps, CollapsibleTriggerProps
 import { ComputedRef, HTMLAttributes, ShallowRef } from "vue";
 
 //#region src/components/accordion/types.d.ts
+/**
+ * Properties for the AccordionRoot component.
+ */
 interface AccordionRootProps<M extends boolean = false> extends SelectionProps<M>, /** @vue-ignore */HTMLAttributes {
   /**
    * When type is "single", allows closing content when clicking trigger for an open item.
@@ -38,15 +41,36 @@ interface AccordionRootProps<M extends boolean = false> extends SelectionProps<M
    */
   unmountOnHide?: boolean;
 }
+/**
+ * Events for the AccordionRoot component.
+ */
 type AccordionRootEmits<M extends boolean = false> = SelectionEmits<M>;
+/**
+ * Properties for the AccordionItem component.
+ */
 interface AccordionItemProps extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {
   /** Value of the accordion item. All items within an accordion should use a unique value. */
   value: string;
 }
+/**
+ * Properties for the AccordionHeader component.
+ */
 interface AccordionHeaderProps extends /** @vue-ignore */HTMLAttributes {}
+/**
+ * Properties for the AccordionTrigger component.
+ */
 interface AccordionTriggerProps extends CollapsibleTriggerProps {}
+/**
+ * Properties for the AccordionContent component.
+ */
 interface AccordionContentProps extends CollapsibleContentProps {}
+/**
+ * Properties for the AccordionDescription component.
+ */
 interface AccordionDescriptionProps extends /** @vue-ignore */HTMLAttributes {}
+/**
+ * Option data for the Accordion component.
+ */
 interface AccordionOptionData extends Pick<AccordionItemProps, 'value' | 'disabled'> {
   /** The title of the accordion item. */
   title?: string;
@@ -57,29 +81,92 @@ interface AccordionOptionData extends Pick<AccordionItemProps, 'value' | 'disabl
    */
   icon?: IconValue;
 }
+/**
+ * Properties for the AccordionCompact component.
+ */
 interface AccordionCompactProps<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> extends AccordionRootProps<M> {
+  /**
+   * Items rendered by the component.
+   */
   items: T[];
+  /**
+   * Properties forwarded to the item element.
+   */
   itemProps?: AccordionItemProps;
+  /**
+   * Properties forwarded to the header element.
+   */
   headerProps?: AccordionHeaderProps;
+  /**
+   * Properties forwarded to the trigger element.
+   */
   triggerProps?: AccordionTriggerProps;
+  /**
+   * Properties forwarded to the content element.
+   */
   contentProps?: AccordionContentProps;
+  /**
+   * Properties forwarded to the description element.
+   */
   descriptionProps?: AccordionDescriptionProps;
 }
+/**
+ * Events for the AccordionCompact component.
+ */
 type AccordionCompactEmits<M extends boolean = false> = AccordionRootEmits<M>;
+/**
+ * Slot properties for the AccordionCompact component.
+ */
 interface AccordionCompactSlotProps<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> {
+  /**
+   * Current item data.
+   */
   item: T;
+  /**
+   * Index of the current item.
+   */
   index: number;
+  /**
+   * Current model value.
+   */
   modelValue: (M extends true ? string[] : string) | undefined;
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
 }
+/**
+ * Slots for the AccordionCompact component.
+ */
 type AccordionCompactSlots<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> = {
+  /**
+   * Custom content for the item slot.
+   */
   item?: (props: AccordionCompactSlotProps<T, M>) => any;
+  /**
+   * Custom content for the leading slot.
+   */
   leading?: (props: AccordionCompactSlotProps<T, M>) => any;
+  /**
+   * Custom content for the title slot.
+   */
   title?: (props: AccordionCompactSlotProps<T, M>) => any;
+  /**
+   * Custom content for the trigger icon slot.
+   */
   'trigger-icon'?: (props: AccordionCompactSlotProps<T, M>) => any;
+  /**
+   * Custom content for the content slot.
+   */
   content?: (props: AccordionCompactSlotProps<T, M>) => any;
 };
+/**
+ * Available UI slots for the Accordion component.
+ */
 type AccordionUiSlot = 'root' | 'item' | 'header' | 'trigger' | 'content' | 'description' | 'triggerLeadingIcon' | 'triggerIcon';
+/**
+ * UI class overrides for the Accordion component.
+ */
 type AccordionUi = UiClass<AccordionUiSlot>;
 //#endregion
 export { AccordionCompactEmits, AccordionCompactProps, AccordionCompactSlotProps, AccordionCompactSlots, AccordionContentProps, AccordionDescriptionProps, AccordionHeaderProps, AccordionItemProps, AccordionOptionData, AccordionRootEmits, AccordionRootProps, AccordionTriggerProps, AccordionUi, AccordionUiSlot };

package/dist/components/affix/types.d.ts

@@ -2,8 +2,17 @@ import { UiClass } from "../../types/common.js";
 import { ComputedRef, HTMLAttributes, ShallowRef } from "vue";
 
 //#region src/components/affix/types.d.ts
+/**
+ * Type information for AffixTarget.
+ */
 type AffixTarget = string | Window | HTMLElement | (() => HTMLElement);
+/**
+ * State values for AffixState.
+ */
 type AffixState = 'fixed' | 'static';
+/**
+ * Properties for the AffixRoot component.
+ */
 interface AffixRootProps extends /** @vue-ignore */Omit<HTMLAttributes, 'onChange'> {
   /**
    * The offset from the top of the target container when the element becomes affixed.
@@ -22,17 +31,47 @@ interface AffixRootProps extends /** @vue-ignore */Omit<HTMLAttributes, 'onChang
    */
   target?: AffixTarget | null;
 }
+/**
+ * Events for the AffixRoot component.
+ */
 type AffixRootEmits = {
+  /**
+   * Emitted when change occurs.
+   */
   change: [affixed: boolean];
 };
+/**
+ * Properties for the AffixPlaceholder component.
+ */
 interface AffixPlaceholderProps extends /** @vue-ignore */HTMLAttributes {}
+/**
+ * Properties for the AffixContent component.
+ */
 interface AffixContentProps extends /** @vue-ignore */HTMLAttributes {}
+/**
+ * Properties for the AffixCompact component.
+ */
 interface AffixCompactProps extends AffixRootProps {
+  /**
+   * Properties forwarded to the placeholder element.
+   */
   placeholderProps?: AffixPlaceholderProps;
+  /**
+   * Properties forwarded to the content element.
+   */
   contentProps?: AffixContentProps;
 }
+/**
+ * Events for the AffixCompact component.
+ */
 type AffixCompactEmits = AffixRootEmits;
+/**
+ * Available UI slots for the Affix component.
+ */
 type AffixUiSlot = 'root' | 'placeholder' | 'content';
+/**
+ * UI class overrides for the Affix component.
+ */
 type AffixUi = UiClass<AffixUiSlot>;
 //#endregion
 export { AffixCompactEmits, AffixCompactProps, AffixContentProps, AffixPlaceholderProps, AffixRootEmits, AffixRootProps, AffixState, AffixTarget, AffixUi, AffixUiSlot };

package/dist/components/alert/types.d.ts

@@ -4,6 +4,9 @@ import { PrimitiveProps } from "../primitive/types.js";
 import { ButtonHTMLAttributes, HTMLAttributes, ShallowRef } from "vue";
 
 //#region src/components/alert/types.d.ts
+/**
+ * Properties for the AlertRoot component.
+ */
 interface AlertRootProps extends /** @vue-ignore */HTMLAttributes {
   /**
    * The controlled open state of the alert. Can be bound with `v-model:open`.
@@ -12,33 +15,108 @@ interface AlertRootProps extends /** @vue-ignore */HTMLAttributes {
    */
   open?: boolean;
 }
+/**
+ * Events for the AlertRoot component.
+ */
 type AlertRootEmits = {
+  /**
+   * Emitted when the open changes.
+   */
   'update:open': [open: boolean];
 };
+/**
+ * Properties for the AlertContent component.
+ */
 interface AlertContentProps extends /** @vue-ignore */HTMLAttributes {}
+/**
+ * Properties for the AlertTitle component.
+ */
 interface AlertTitleProps extends /** @vue-ignore */HTMLAttributes {}
+/**
+ * Properties for the AlertDescription component.
+ */
 interface AlertDescriptionProps extends /** @vue-ignore */HTMLAttributes {}
+/**
+ * Properties for the AlertClose component.
+ */
 interface AlertCloseProps extends PrimitiveProps, /** @vue-ignore */ButtonHTMLAttributes {}
+/**
+ * Properties for the AlertCompact component.
+ */
 interface AlertCompactProps extends AlertRootProps {
+  /**
+   * Title text rendered by the component.
+   */
   title?: string;
+  /**
+   * Description text rendered by the component.
+   */
   description?: string;
+  /**
+   * Icon rendered by the component.
+   */
   icon?: IconValue;
+  /**
+   * Whether the component can be closed.
+   */
   closable?: boolean;
+  /**
+   * Properties forwarded to the content element.
+   */
   contentProps?: AlertContentProps;
+  /**
+   * Properties forwarded to the title element.
+   */
   titleProps?: AlertTitleProps;
+  /**
+   * Properties forwarded to the description element.
+   */
   descriptionProps?: AlertDescriptionProps;
+  /**
+   * Properties forwarded to the close element.
+   */
   closeProps?: AlertCloseProps;
 }
+/**
+ * Events for the AlertCompact component.
+ */
 type AlertCompactEmits = AlertRootEmits;
+/**
+ * Slots for the AlertCompact component.
+ */
 type AlertCompactSlots = {
+  /**
+   * Custom content for the default slot.
+   */
   default?: () => any;
+  /**
+   * Custom content for the leading slot.
+   */
   leading?: () => any;
+  /**
+   * Custom content for the title slot.
+   */
   title?: () => any;
+  /**
+   * Custom content for the description slot.
+   */
   description?: () => any;
+  /**
+   * Custom content for the trailing slot.
+   */
   trailing?: () => any;
+  /**
+   * Custom content for the close slot.
+   */
   close?: () => any;
 };
+/**
+ * Available UI slots for the Alert component.
+ */
 type AlertUiSlot = 'root' | 'icon' | 'title' | 'description' | 'content' | 'close';
+/**
+ * UI class overrides for the Alert component.
+ */
 type AlertUi = UiClass<AlertUiSlot>;
 //#endregion
 export { AlertCloseProps, AlertCompactEmits, AlertCompactProps, AlertCompactSlots, AlertContentProps, AlertDescriptionProps, AlertRootEmits, AlertRootProps, AlertTitleProps, AlertUi, AlertUiSlot };

package/dist/components/anchor/anchor-compact.js

@@ -1 +1 @@
-import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"./anchor-compact-item.js";import n from"./anchor-root.js";import{Fragment as r,createBlock as i,createElementBlock as a,defineComponent as o,mergeProps as s,openBlock as c,renderList as l,unref as u,withCtx as d}from"vue";const f=o({name:`AnchorCompact`,__name:`anchor-compact`,props:{items:{},linkProps:{},indicatorProps:{},titleProps:{},subProps:{},bounds:{},dir:{},getContainer:{type:Function},getCurrentAnchor:{type:Function},modelValue:{},offsetTop:{},orientation:{},replace:{type:Boolean},targetOffset:{},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`activeChange`,`itemSelect`],setup(o,{emit:f}){let p=o,m=f,h=e(p,[`items`,`linkProps`,`indicatorProps`,`titleProps`,`subProps`]),g=e=>{m(`update:modelValue`,e)},_=e=>{m(`activeChange`,e)},v=(e,t)=>{m(`itemSelect`,e,t)};return(e,f)=>(c(),i(n,s(u(h),{onActiveChange:_,onItemSelect:v,"onUpdate:modelValue":g}),{default:d(({modelValue:e})=>[(c(!0),a(r,null,l(o.items,n=>(c(),i(t,{key:n.href,item:n,"model-value":e,"link-props":o.linkProps,"indicator-props":o.indicatorProps,"title-props":o.titleProps,"sub-props":o.subProps},null,8,[`item`,`model-value`,`link-props`,`indicator-props`,`title-props`,`sub-props`]))),128))]),_:1},16))}});export{f as default};
+import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"./anchor-item-compact.js";import n from"./anchor-root.js";import{Fragment as r,createBlock as i,createElementBlock as a,defineComponent as o,mergeProps as s,openBlock as c,renderList as l,unref as u,withCtx as d}from"vue";const f=o({name:`AnchorCompact`,__name:`anchor-compact`,props:{items:{},linkProps:{},indicatorProps:{},titleProps:{},subProps:{},bounds:{},dir:{},getContainer:{type:Function},getCurrentAnchor:{type:Function},modelValue:{},offsetTop:{},orientation:{},replace:{type:Boolean},targetOffset:{},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`activeChange`,`itemSelect`],setup(o,{emit:f}){let p=o,m=f,h=e(p,[`items`,`linkProps`,`indicatorProps`,`titleProps`,`subProps`]),g=e=>{m(`update:modelValue`,e)},_=e=>{m(`activeChange`,e)},v=(e,t)=>{m(`itemSelect`,e,t)};return(e,f)=>(c(),i(n,s(u(h),{onActiveChange:_,onItemSelect:v,"onUpdate:modelValue":g}),{default:d(({modelValue:e})=>[(c(!0),a(r,null,l(o.items,n=>(c(),i(t,{key:n.href,item:n,"model-value":e,"link-props":o.linkProps,"indicator-props":o.indicatorProps,"title-props":o.titleProps,"sub-props":o.subProps},null,8,[`item`,`model-value`,`link-props`,`indicator-props`,`title-props`,`sub-props`]))),128))]),_:1},16))}});export{f as default};

package/dist/components/anchor/{anchor-compact-item.js → anchor-item-compact.js}

@@ -1 +1 @@
-import{useAnchorUi as e}from"./context.js";import t from"./anchor-link.js";import{Fragment as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createVNode as c,defineComponent as l,mergeProps as u,normalizeClass as d,openBlock as f,renderList as p,resolveComponent as m,toDisplayString as h,unref as g,withCtx as _}from"vue";const v=[`data-state`],y=l({name:`AnchorCompactItem`,__name:`anchor-compact-item`,props:{modelValue:{},item:{},linkProps:{},indicatorProps:{},titleProps:{},subProps:{}},setup(l){let y=l,b=e();function x(e,t){return e.href===t?!0:e.children?.some(e=>x(e,t))??!1}let S=r(()=>x(y.item,y.modelValue??``)?`active`:`inactive`);return(e,r)=>{let y=m(`AnchorCompactItem`,!0);return f(),o(`div`,{class:d(g(b).item),"data-state":S.value},[c(t,u(l.linkProps,{href:l.item.href,target:l.item.target,disabled:l.item.disabled}),{default:_(()=>[s(`span`,u(l.indicatorProps,{class:g(b).indicator,"aria-hidden":`true`}),null,16),s(`span`,u(l.titleProps,{class:g(b).title}),h(l.item.title||l.item.href),17)]),_:1},16,[`href`,`target`,`disabled`]),l.item.children?.length?(f(),o(`div`,u({key:0},l.subProps,{class:g(b).sub}),[(f(!0),o(n,null,p(l.item.children,e=>(f(),i(y,{key:e.href,"model-value":l.modelValue,item:e,"link-props":l.linkProps,"indicator-props":l.indicatorProps,"title-props":l.titleProps,"sub-props":l.subProps},null,8,[`model-value`,`item`,`link-props`,`indicator-props`,`title-props`,`sub-props`]))),128))],16)):a(`v-if`,!0)],10,v)}}});export{y as default};
+import{useAnchorUi as e}from"./context.js";import t from"./anchor-link.js";import{Fragment as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createVNode as c,defineComponent as l,mergeProps as u,normalizeClass as d,openBlock as f,renderList as p,resolveComponent as m,toDisplayString as h,unref as g,withCtx as _}from"vue";const v=[`data-state`],y=l({name:`AnchorItemCompact`,__name:`anchor-item-compact`,props:{modelValue:{},item:{},linkProps:{},indicatorProps:{},titleProps:{},subProps:{}},setup(l){let y=l,b=e();function x(e,t){return e.href===t?!0:e.children?.some(e=>x(e,t))??!1}let S=r(()=>x(y.item,y.modelValue??``)?`active`:`inactive`);return(e,r)=>{let y=m(`AnchorItemCompact`,!0);return f(),o(`div`,{class:d(g(b).item),"data-state":S.value},[c(t,u(l.linkProps,{href:l.item.href,target:l.item.target,disabled:l.item.disabled}),{default:_(()=>[s(`span`,u(l.indicatorProps,{class:g(b).indicator,"aria-hidden":`true`}),null,16),s(`span`,u(l.titleProps,{class:g(b).title}),h(l.item.title||l.item.href),17)]),_:1},16,[`href`,`target`,`disabled`]),l.item.children?.length?(f(),o(`div`,u({key:0},l.subProps,{class:g(b).sub}),[(f(!0),o(n,null,p(l.item.children,e=>(f(),i(y,{key:e.href,"model-value":l.modelValue,item:e,"link-props":l.linkProps,"indicator-props":l.indicatorProps,"title-props":l.titleProps,"sub-props":l.subProps},null,8,[`model-value`,`item`,`link-props`,`indicator-props`,`title-props`,`sub-props`]))),128))],16)):a(`v-if`,!0)],10,v)}}});export{y as default};

package/dist/components/anchor/anchor-item-compact.vue.d.ts

@@ -0,0 +1,8 @@
+import { AnchorItemCompactProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/anchor/anchor-item-compact.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<AnchorItemCompactProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<AnchorItemCompactProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };

package/dist/components/anchor/anchor-link.js

@@ -1 +1 @@
-import{Primitive as e}from"../primitive/primitive.js";import"../primitive/index.js";import{useAnchorRootContext as t,useAnchorUi as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,normalizeClass as o,onWatcherCleanup as s,openBlock as c,renderSlot as l,unref as u,watch as d,withCtx as f}from"vue";const p=a({name:`AnchorLink`,__name:`anchor-link`,props:{href:{},asChild:{type:Boolean},as:{default:`a`},disabled:{type:Boolean},target:{}},setup(a){let p=a,m=n(`link`),{activeHref:h,onLinkClick:g,registerLink:_,scrollTo:v,unregisterLink:y}=t(`AnchorLink`),b=r(()=>h.value===p.href),x=r(()=>p.disabled?``:void 0),S=r(()=>b.value?`active`:`inactive`),C=e=>{if(g(e,{href:p.href}),p.disabled){e.preventDefault(),e.stopPropagation();return}!p.href.startsWith(`#`)||e.defaultPrevented||(e.preventDefault(),v(p.href))};return d(()=>p.href,e=>{_(e),s(()=>{y(e)})},{immediate:!0}),(t,n)=>(c(),i(u(e),{as:a.as,"as-child":a.asChild,href:a.href,class:o(u(m)),target:a.target,"aria-current":b.value?`location`:void 0,"aria-disabled":a.disabled?`true`:void 0,"data-disabled":x.value,"data-state":S.value,tabindex:a.disabled?-1:void 0,onClick:C},{default:f(()=>[l(t.$slots,`default`)]),_:3},8,[`as`,`as-child`,`href`,`class`,`target`,`aria-current`,`aria-disabled`,`data-disabled`,`data-state`,`tabindex`]))}});export{p as default};
+import{Primitive as e}from"../primitive/primitive.js";import"../primitive/index.js";import{useAnchorRootContext as t,useAnchorUi as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,normalizeClass as o,onWatcherCleanup as s,openBlock as c,renderSlot as l,unref as u,watch as d,withCtx as f}from"vue";const p=a({name:`AnchorLink`,__name:`anchor-link`,props:{href:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{default:`a`},to:{},external:{type:Boolean},target:{}},setup(a){let p=a,m=n(`link`),{activeHref:h,onLinkClick:g,registerLink:_,scrollTo:v,unregisterLink:y}=t(`AnchorLink`),b=r(()=>h.value===p.href),x=r(()=>p.disabled?``:void 0),S=r(()=>b.value?`active`:`inactive`),C=e=>{if(g(e,{href:p.href}),p.disabled){e.preventDefault(),e.stopPropagation();return}!p.href.startsWith(`#`)||e.defaultPrevented||(e.preventDefault(),v(p.href))};return d(()=>p.href,e=>{_(e),s(()=>{y(e)})},{immediate:!0}),(t,n)=>(c(),i(u(e),{as:a.as,"as-child":a.asChild,href:a.href,class:o(u(m)),target:a.target,"aria-current":b.value?`location`:void 0,"aria-disabled":a.disabled?`true`:void 0,"data-disabled":x.value,"data-state":S.value,tabindex:a.disabled?-1:void 0,onClick:C},{default:f(()=>[l(t.$slots,`default`)]),_:3},8,[`as`,`as-child`,`href`,`class`,`target`,`aria-current`,`aria-disabled`,`data-disabled`,`data-state`,`tabindex`]))}});export{p as default};

package/dist/components/anchor/index.d.ts

@@ -1,6 +1,7 @@
-import { AnchorCompactEmits, AnchorCompactItemProps, AnchorCompactProps, AnchorContainer, AnchorItemData, AnchorLinkProps, AnchorRootEmits, AnchorRootProps, AnchorUi, AnchorUiSlot } from "./types.js";
+import { AnchorCompactEmits, AnchorCompactProps, AnchorContainer, AnchorItemCompactProps, AnchorLinkProps, AnchorOptionData, AnchorRootEmits, AnchorRootProps, AnchorUi, AnchorUiSlot } from "./types.js";
 import { _default } from "./anchor-compact.vue.js";
-import { _default as _default$1 } from "./anchor-link.vue.js";
-import { _default as _default$2 } from "./anchor-root.vue.js";
+import { _default as _default$1 } from "./anchor-item-compact.vue.js";
+import { _default as _default$2 } from "./anchor-link.vue.js";
+import { _default as _default$3 } from "./anchor-root.vue.js";
 import { provideAnchorUi } from "./context.js";
-export { _default as AnchorCompact, type AnchorCompactEmits, type AnchorCompactItemProps, type AnchorCompactProps, type AnchorContainer, type AnchorItemData, _default$1 as AnchorLink, type AnchorLinkProps, _default$2 as AnchorRoot, type AnchorRootEmits, type AnchorRootProps, type AnchorUi, type AnchorUiSlot, provideAnchorUi };
+export { _default as AnchorCompact, type AnchorCompactEmits, type AnchorCompactProps, type AnchorContainer, _default$1 as AnchorItemCompact, type AnchorItemCompactProps, _default$2 as AnchorLink, type AnchorLinkProps, type AnchorOptionData, _default$3 as AnchorRoot, type AnchorRootEmits, type AnchorRootProps, type AnchorUi, type AnchorUiSlot, provideAnchorUi };

package/dist/components/anchor/index.js

@@ -1 +1 @@
-import{provideAnchorUi as e}from"./context.js";import t from"./anchor-link.js";import n from"./anchor-root.js";import r from"./anchor-compact.js";export{r as AnchorCompact,t as AnchorLink,n as AnchorRoot,e as provideAnchorUi};
+import{provideAnchorUi as e}from"./context.js";import t from"./anchor-link.js";import n from"./anchor-item-compact.js";import r from"./anchor-root.js";import i from"./anchor-compact.js";export{i as AnchorCompact,n as AnchorItemCompact,t as AnchorLink,r as AnchorRoot,e as provideAnchorUi};

package/dist/components/anchor/types.d.ts

@@ -1,52 +1,164 @@
 import { DataOrientation, Direction, UiClass } from "../../types/common.js";
 import { PrimitiveProps } from "../primitive/types.js";
-import { LinkProps } from "../link/types.js";
+import { LinkBaseProps } from "../link/types.js";
 import { HTMLAttributes, ShallowRef } from "vue";
 
 //#region src/components/anchor/types.d.ts
+/**
+ * Type information for AnchorContainer.
+ */
 type AnchorContainer = HTMLElement | Window;
-interface AnchorItemData extends Pick<AnchorLinkProps, 'disabled' | 'href' | 'target'> {
-  children?: AnchorItemData[];
-  title?: string;
-}
+/**
+ * Properties for the AnchorRoot component.
+ */
 interface AnchorRootProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {
+  /**
+   * Bounds.
+   */
   bounds?: number;
+  /**
+   * Reading direction of the component.
+   */
   dir?: Direction;
+  /**
+   * Get container.
+   */
   getContainer?: () => AnchorContainer | null;
+  /**
+   * Get current anchor.
+   */
   getCurrentAnchor?: (activeHref: string) => string;
+  /**
+   * Current model value.
+   */
   modelValue?: string;
+  /**
+   * Offset top.
+   */
   offsetTop?: number;
+  /**
+   * Orientation of the component.
+   */
   orientation?: DataOrientation;
+  /**
+   * Whether replace.
+   */
   replace?: boolean;
+  /**
+   * Target offset.
+   */
   targetOffset?: number;
 }
+/**
+ * Events for the AnchorRoot component.
+ */
 type AnchorRootEmits = {
+  /**
+   * Emitted when the model value changes.
+   */
   'update:modelValue': [value: string];
+  /**
+   * Emitted when active change occurs.
+   */
   activeChange: [value: string];
+  /**
+   * Emitted when item select occurs.
+   */
   itemSelect: [event: MouseEvent, payload: {
     href: string;
   }];
 };
-interface AnchorLinkProps extends PrimitiveProps, Pick<LinkProps, 'disabled' | 'target'>, /** @vue-ignore */HTMLAttributes {
+/**
+ * Properties for the AnchorLink component.
+ */
+interface AnchorLinkProps extends PrimitiveProps, LinkBaseProps, /** @vue-ignore */HTMLAttributes {
+  /**
+   * The link of anchor
+   */
   href: string;
+  /**
+   * Whether the component is disabled.
+   */
+  disabled?: boolean;
+}
+/**
+ * Option data for the Anchor component.
+ */
+interface AnchorOptionData extends Pick<AnchorLinkProps, 'disabled' | 'href' | 'target'> {
+  /**
+   * Nested child items.
+   */
+  children?: AnchorOptionData[];
+  /**
+   * Title text rendered by the component.
+   */
+  title?: string;
 }
-interface AnchorCompactItemProps extends /** @vue-ignore */HTMLAttributes {
+/**
+ * Properties for the AnchorItemCompact component.
+ */
+interface AnchorItemCompactProps extends /** @vue-ignore */HTMLAttributes {
+  /**
+   * Current model value.
+   */
   modelValue?: string;
-  item: AnchorItemData;
+  /**
+   * Current item data.
+   */
+  item: AnchorOptionData;
+  /**
+   * Properties forwarded to the link element.
+   */
   linkProps?: AnchorLinkProps;
+  /**
+   * Properties forwarded to the indicator element.
+   */
   indicatorProps?: HTMLAttributes;
+  /**
+   * Properties forwarded to the title element.
+   */
   titleProps?: HTMLAttributes;
+  /**
+   * Properties forwarded to the sub element.
+   */
   subProps?: HTMLAttributes;
 }
+/**
+ * Properties for the AnchorCompact component.
+ */
 interface AnchorCompactProps extends AnchorRootProps {
-  items: AnchorItemData[];
+  /**
+   * Items rendered by the component.
+   */
+  items: AnchorOptionData[];
+  /**
+   * Properties forwarded to the link element.
+   */
   linkProps?: AnchorLinkProps;
+  /**
+   * Properties forwarded to the indicator element.
+   */
   indicatorProps?: HTMLAttributes;
+  /**
+   * Properties forwarded to the title element.
+   */
   titleProps?: HTMLAttributes;
+  /**
+   * Properties forwarded to the sub element.
+   */
   subProps?: HTMLAttributes;
 }
+/**
+ * Events for the AnchorCompact component.
+ */
 type AnchorCompactEmits = AnchorRootEmits;
+/**
+ * Available UI slots for the Anchor component.
+ */
 type AnchorUiSlot = 'root' | 'link' | 'sub' | 'item' | 'indicator' | 'title';
+/**
+ * UI class overrides for the Anchor component.
+ */
 type AnchorUi = UiClass<AnchorUiSlot>;
 //#endregion
-export { AnchorCompactEmits, AnchorCompactItemProps, AnchorCompactProps, AnchorContainer, AnchorItemData, AnchorLinkProps, AnchorRootEmits, AnchorRootProps, AnchorUi, AnchorUiSlot };
+export { AnchorCompactEmits, AnchorCompactProps, AnchorContainer, AnchorItemCompactProps, AnchorLinkProps, AnchorOptionData, AnchorRootEmits, AnchorRootProps, AnchorUi, AnchorUiSlot };

package/dist/components/arrow/types.d.ts

@@ -1,6 +1,9 @@
 import { SVGAttributes } from "vue";
 
 //#region src/components/arrow/types.d.ts
+/**
+ * Properties for the Arrow component.
+ */
 interface ArrowProps extends /** @vue-ignore */SVGAttributes {}
 //#endregion
 export { ArrowProps };