@soybeanjs/headless 0.13.8 → 0.15.0-beta.1

package/README.md

@@ -11,6 +11,8 @@ A collection of unstyled, accessible UI primitives for Vue 3.
 
 `@soybeanjs/headless` provides the core logic and accessibility features for UI components, without any styles. It is designed for developers who want to build their own design systems with full control over the visual appearance.
 
+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.
+
 ## 📦 Installation
 
 ```bash
@@ -57,7 +59,76 @@ import {
 - **Composable**: Components are designed to be composed together.
 - **Vue 3**: Built for Vue 3 using Composition API.
 
-## 📚 Documentation
+## 📚 Package Structure
+
+```
+headless/src/
+├── components/    # 50 primitives (accordion, dialog, select…)
+├── composables/   # 26 shared hooks (state, focus, floating, selection…)
+├── shared/        # Pure TS utilities (DOM, focus, tree, form, guard)
+├── constants/     # ARIA attributes, component keys
+├── types/         # Global types (ClassValue, UiClass, PropsToContext…)
+└── 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 { transformPropsToContext } from '@soybeanjs/headless/shared'; // pure TS utils
+import * as H from '@soybeanjs/headless/namespaced'; // namespace object
+import type { AccordionUiSlot } from '@soybeanjs/headless/accordion'; // per-component
+```
+
+## 🧩 Composables
+
+26 hooks organized by category:
+
+| Category      | Composables                                                    |
+| ------------- | -------------------------------------------------------------- |
+| **State**     | `useContext`, `useControllableState`, `useStateMachine`        |
+| **Focus**     | `useFocusScope`, `useFocusGuards`, `useArrowNavigation`        |
+| **Layer**     | `useDismissableLayer`, `useEscapeKeyDown`, `useBodyScrollLock` |
+| **Floating**  | `useFloating`, `useGraceArea`, `usePopupEvents`                |
+| **DOM**       | `useForwardElement`, `useExposedElement`, `useHideOthers`      |
+| **Selection** | `useSelection`, `useCollection`, `useTypeahead`                |
+| **Bridge**    | `useUiContext`, `useOmitProps`, `useForwardListeners`          |
+
+## 🎨 Integrating Your Own Styled Layer
+
+Every multi-slot component provides a `provide{Name}Ui` function. Call it at the top of your styled wrapper and pass a computed class map:
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue';
+import { AccordionRoot, provideAccordionUi } from '@soybeanjs/headless';
+
+const props = defineProps<{ size?: 'sm' | 'md' | 'lg' }>();
+
+// Compute your own classes however you like (CSS modules, CVA, tv(), etc.)
+const ui = computed(() => ({
+  root: 'space-y-1',
+  item: 'border rounded-md',
+  trigger: `flex w-full items-center py-3 px-4 font-medium ${props.size === 'lg' ? 'text-lg' : 'text-sm'}`,
+  content: 'px-4 pb-3 text-sm',
+  header: 'flex',
+  description: ''
+}));
+
+provideAccordionUi(ui);
+</script>
+
+<template>
+  <AccordionRoot v-bind="$props">
+    <slot />
+  </AccordionRoot>
+</template>
+```
+
+For single-element components (like `Button`), there is no UiContext — apply your classes directly via `:class`.
+
+## 📖 Documentation
 
 For full documentation and styled components, visit the [SoybeanUI repository](https://github.com/soybeanjs/soybean-ui).
 

package/README.zh-CN.md

@@ -11,6 +11,8 @@
 
 `@soybeanjs/headless` 为 UI 组件提供了核心逻辑和可访问性功能，但不包含任何样式。它专为希望构建自己的设计系统并完全控制视觉外观的开发者而设计。
 
+部分多插槽组件还会暴露 `Compact` 聚合层，例如 `AccordionCompact` 和 `TableCompact`。这些 headless 入口负责条目遍历以及默认内容 / 图标组合，而样式包装层只专注于类名和 props 转发。
+
 ## 📦 安装
 
 ```bash
@@ -57,9 +59,78 @@ import {
 - **可组合**: 组件设计为可组合使用。
 - **Vue 3**: 使用 Composition API 为 Vue 3 构建。
 
-## 📚 文档
+## 📚 包结构
+
+```
+headless/src/
+├── components/    # 50 个原语组件（accordion、dialog、select…）
+├── composables/   # 26 个共享 hook（状态、焦点、浮层、选择…）
+├── shared/        # 纯 TS 工具函数（DOM、焦点、树、表单、守卫）
+├── constants/     # ARIA 属性常量、组件标识键
+├── types/         # 全局类型（ClassValue、UiClass、PropsToContext…）
+└── index.ts        # 主 barrel 导出
+```
+
+### 子路径导出
+
+```ts
+import { AccordionRoot } from '@soybeanjs/headless'; // 组件 + 类型
+import { useControllableState } from '@soybeanjs/headless/composables'; // 26 个 composable
+import { transformPropsToContext } from '@soybeanjs/headless/shared'; // 纯 TS 工具
+import * as H from '@soybeanjs/headless/namespaced'; // 命名空间导入
+import type { AccordionUiSlot } from '@soybeanjs/headless/accordion'; // 单组件类型
+```
+
+## 🧩 Composables
+
+26 个 hook，按功能分类：
+
+| 分类     | Composables                                                    |
+| -------- | -------------------------------------------------------------- |
+| **状态** | `useContext`、`useControllableState`、`useStateMachine`        |
+| **焦点** | `useFocusScope`、`useFocusGuards`、`useArrowNavigation`        |
+| **层叠** | `useDismissableLayer`、`useEscapeKeyDown`、`useBodyScrollLock` |
+| **浮层** | `useFloating`、`useGraceArea`、`usePopupEvents`                |
+| **DOM**  | `useForwardElement`、`useExposedElement`、`useHideOthers`      |
+| **选择** | `useSelection`、`useCollection`、`useTypeahead`                |
+| **桥接** | `useUiContext`、`useOmitProps`、`useForwardListeners`          |
+
+## 🎨 接入自定义样式层
+
+每个多插槽组件都提供 `provide{Name}Ui` 函数。在样式包装组件中调用它并传入计算好的类名 map：
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue';
+import { AccordionRoot, provideAccordionUi } from '@soybeanjs/headless';
+
+const props = defineProps<{ size?: 'sm' | 'md' | 'lg' }>();
+
+// 用任何方式计算类名（CSS Modules、CVA、tv() 等）
+const ui = computed(() => ({
+  root: 'space-y-1',
+  item: 'border rounded-md',
+  trigger: `flex w-full items-center py-3 px-4 font-medium ${props.size === 'lg' ? 'text-lg' : 'text-sm'}`,
+  content: 'px-4 pb-3 text-sm',
+  header: 'flex',
+  description: ''
+}));
+
+provideAccordionUi(ui);
+</script>
+
+<template>
+  <AccordionRoot v-bind="$props">
+    <slot />
+  </AccordionRoot>
+</template>
+```
+
+对于单元素组件（如 `Button`），没有 UiContext，直接在组件上绑定 `:class` 即可。
+
+## 📖 文档
 
-有关完整文档和带样式的组件，请访问 [SoybeanUI 仓库](https://github.com/soybeanjs/soybean-ui)。
+完整文档和带样式的组件，请访问 [SoybeanUI 仓库](https://github.com/soybeanjs/soybean-ui)。
 
 ## 💝 致谢
 

package/dist/_virtual/_@oxc-project_runtime@0.126.0/helpers/defineProperty.js

@@ -0,0 +1 @@
+import{toPropertyKey as e}from"./toPropertyKey.js";function t(t,n,r){return(n=e(n))in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r,t}export{t as _defineProperty};

package/dist/_virtual/_@oxc-project_runtime@0.126.0/helpers/toPrimitive.js

@@ -0,0 +1 @@
+import{_typeof as e}from"./typeof.js";function t(t,n){if(e(t)!=`object`||!t)return t;var r=t[Symbol.toPrimitive];if(r!==void 0){var i=r.call(t,n||`default`);if(e(i)!=`object`)return i;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(n===`string`?String:Number)(t)}export{t as toPrimitive};

package/dist/_virtual/_@oxc-project_runtime@0.126.0/helpers/toPropertyKey.js

@@ -0,0 +1 @@
+import{_typeof as e}from"./typeof.js";import{toPrimitive as t}from"./toPrimitive.js";function n(n){var r=t(n,`string`);return e(r)==`symbol`?r:r+``}export{n as toPropertyKey};

package/dist/_virtual/_@oxc-project_runtime@0.126.0/helpers/typeof.js

@@ -0,0 +1 @@
+function e(t){"@babel/helpers - typeof";return e=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},e(t)}export{e as _typeof};

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

@@ -0,0 +1 @@
+import{useForwardListeners as e}from"../../composables/use-forward-listeners.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{useAccordionUi as n}from"./context.js";import r from"./accordion-content.js";import i from"./accordion-header.js";import a from"./accordion-item.js";import o from"./accordion-root.js";import s from"./accordion-trigger.js";import c from"../icon/icon-render.js";import{Fragment as l,createBlock as u,createElementBlock as d,createElementVNode as f,createTextVNode as p,createVNode as m,defineComponent as h,mergeProps as g,normalizeClass as _,openBlock as v,renderList as y,renderSlot as b,toDisplayString as x,toHandlers as S,unref as C,withCtx as w}from"vue";const T=h({name:`AccordionCompact`,__name:`accordion-compact`,props:{items:{},itemProps:{},headerProps:{},triggerProps:{},contentProps:{},descriptionProps:{},collapsible:{type:Boolean},dir:{},disabled:{type:Boolean},orientation:{},unmountOnHide:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},singleClearable:{type:Boolean}},emits:[`update:modelValue`],setup(h,{emit:T}){let E=h,D=T,O=t(E,[`items`,`itemProps`,`headerProps`,`triggerProps`,`contentProps`]),k=e(D),A=n();return(e,t)=>(v(),u(o,g(C(O),S(C(k))),{default:w(()=>[(v(!0),d(l,null,y(h.items,(t,n)=>b(e.$slots,`item`,{key:t.value,item:t,index:n,modelValue:h.modelValue},()=>[m(a,g({ref_for:!0},h.itemProps,{value:t.value,disabled:t.disabled}),{default:w(({open:a})=>[m(i,g({ref_for:!0},h.headerProps),{default:w(()=>[m(s,g({ref_for:!0},h.triggerProps),{default:w(()=>[b(e.$slots,`leading`,{item:t,index:n,modelValue:h.modelValue,open:a},()=>[m(c,{icon:t.icon,class:_(C(A).triggerLeadingIcon)},null,8,[`icon`,`class`])]),b(e.$slots,`title`,{item:t,index:n,modelValue:h.modelValue,open:a},()=>[p(x(t.title),1)]),b(e.$slots,`trigger-icon`,{item:t,index:n,modelValue:h.modelValue,open:a},()=>[m(c,{icon:`lucide:chevron-down`,class:_(C(A).triggerIcon)},null,8,[`class`])])]),_:2},1040)]),_:2},1040),m(r,g({ref_for:!0},h.contentProps),{default:w(()=>[b(e.$slots,`content`,{item:t,index:n,modelValue:h.modelValue,open:a},()=>[f(`p`,{class:_(C(A).description)},x(t.description),3)])]),_:2},1040)]),_:2},1040,[`value`,`disabled`])])),128))]),_:3},16))}});export{T as default};

package/dist/components/accordion/accordion-compact.vue.d.ts

@@ -0,0 +1,21 @@
+import { AccordionCompactProps, AccordionCompactSlots, AccordionOptionData } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/accordion/accordion-compact.vue.d.ts
+declare const __VLS_export: <T extends AccordionOptionData = AccordionOptionData, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: _$vue.PublicProps & __VLS_PrettifyLocal<AccordionCompactProps<T, M> & {
+    "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: AccordionCompactSlots<T, M>;
+  emit: (evt: "update:modelValue", value: M extends true ? string[] : string) => void;
+}>) => _$vue.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+//#endregion
+export { _default };

package/dist/components/accordion/accordion-content.js

@@ -1 +1 @@
-import{useAccordionItemContext as e,useAccordionRootContext as t}from"./context.js";import{collapsibleContentCssVars as n}from"../collapsible/shared.js";import r from"../collapsible/collapsible-content.js";import"../collapsible/index.js";import{accordionContentCssVars as i}from"./shared.js";import{createBlock as a,defineComponent as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=o({name:`AccordionContent`,__name:`accordion-content`,props:{asChild:{type:Boolean},as:{},forceMount:{type:Boolean}},setup(o){let{orientation:d}=t(`AccordionContent`),{triggerId:f,dataDisabled:p,dataState:m}=e(`AccordionContent`),h={[i.width]:`var(${n.width})`,[i.height]:`var(${n.height})`};return(e,t)=>(s(),a(l(r),{as:o.as,"as-child":o.asChild,"force-mount":o.forceMount,role:`region`,"aria-labelledby":l(f),"data-disabled":l(p),"data-orientation":l(d),"data-state":l(m),style:h},{default:u(()=>[c(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`force-mount`,`aria-labelledby`,`data-disabled`,`data-orientation`,`data-state`]))}});export{d as default};
+import{useAccordionItemContext as e,useAccordionRootContext as t}from"./context.js";import{collapsibleContentCssVars as n}from"../collapsible/shared.js";import r from"../collapsible/collapsible-content.js";import"../collapsible/index.js";import{accordionContentCssVars as i}from"./shared.js";import{createBlock as a,defineComponent as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=o({name:`AccordionContent`,__name:`accordion-content`,props:{asChild:{type:Boolean},as:{},forceMount:{type:Boolean}},setup(o){let{orientation:d}=t(`AccordionContent`),{triggerId:f,dataDisabled:p,dataState:m}=e(`AccordionContent`),h={[i.width]:`var(${n.width})`,[i.height]:`var(${n.height})`};return(e,t)=>(s(),a(l(r),{as:o.as,"as-child":o.asChild,"force-mount":o.forceMount,role:`region`,"aria-labelledby":l(f),"data-disabled":l(p),"data-orientation":l(d),"data-state":l(m),"data-slot":`content`,style:h},{default:u(()=>[c(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`force-mount`,`aria-labelledby`,`data-disabled`,`data-orientation`,`data-state`]))}});export{d as default};

package/dist/components/accordion/accordion-content.vue.d.ts

@@ -1,12 +1,12 @@
-import { CollapsibleContentProps } from "../collapsible/types.js";
-import * as vue from "vue";
+import { AccordionContentProps } from "./types.js";
+import * as _$vue from "vue";
 
 //#region src/components/accordion/accordion-content.vue.d.ts
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: vue.DefineComponent<CollapsibleContentProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<CollapsibleContentProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: _$vue.DefineComponent<AccordionContentProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<AccordionContentProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/accordion/accordion-header.js

@@ -1 +1 @@
-import{useAccordionItemContext as e,useAccordionRootContext as t,useAccordionUi as n}from"./context.js";import{computed as r,createElementBlock as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c,unref as l}from"vue";const u=[`data-disabled`,`data-orientation`,`data-state`],d=a({name:`AccordionHeader`,__name:`accordion-header`,setup(a){let d=n(),f=r(()=>d?.value?.header),{orientation:p}=t(`AccordionHeader`),{dataDisabled:m,dataState:h}=e(`AccordionHeader`);return(e,t)=>(s(),i(`div`,{class:o(f.value),"data-disabled":l(m),"data-orientation":l(p),"data-state":l(h)},[c(e.$slots,`default`)],10,u))}});export{d as default};
+import{useAccordionItemContext as e,useAccordionRootContext as t,useAccordionUi as n}from"./context.js";import{createElementBlock as r,defineComponent as i,normalizeClass as a,openBlock as o,renderSlot as s,unref as c}from"vue";const l=[`data-disabled`,`data-orientation`,`data-state`],u=i({name:`AccordionHeader`,__name:`accordion-header`,setup(i){let u=n(`header`),{orientation:d}=t(`AccordionHeader`),{dataDisabled:f,dataState:p}=e(`AccordionHeader`);return(e,t)=>(o(),r(`div`,{class:a(c(u)),"data-disabled":c(f),"data-orientation":c(d),"data-state":c(p),"data-slot":`header`},[s(e.$slots,`default`)],10,l))}});export{u as default};

package/dist/components/accordion/accordion-header.vue.d.ts

@@ -1,12 +1,12 @@
 import { AccordionHeaderProps } from "./types.js";
-import * as vue from "vue";
+import * as _$vue from "vue";
 
 //#region src/components/accordion/accordion-header.vue.d.ts
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: vue.DefineComponent<AccordionHeaderProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<AccordionHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: _$vue.DefineComponent<AccordionHeaderProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<AccordionHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/accordion/accordion-item.js

@@ -1 +1 @@
-import{useArrowNavigation as e}from"../../composables/use-arrow-navigation.js";import{getOpenFromSingleOrMultiple as t}from"../../shared/value.js";import{getCollectionItemElements as n}from"../../shared/dom.js";import{transformPropsToContext as r}from"../../shared/vue.js";import"../../shared/index.js";import{useOmitProps as i}from"../../composables/use-props.js";import"../../composables/index.js";import{provideAccordionItemContext as a,useAccordionRootContext as o}from"./context.js";import s from"../collapsible/collapsible-root.js";import"../collapsible/index.js";import{computed as c,createBlock as l,defineComponent as u,mergeProps as d,openBlock as f,renderSlot as p,unref as m,withCtx as h}from"vue";const g=u({name:`AccordionItem`,__name:`accordion-item`,props:{value:{},disabled:{type:Boolean},unmountOnHide:{type:Boolean,default:void 0},asChild:{type:Boolean},as:{}},setup(u,{expose:g}){let _=u,v=i(_,[`value`]),{modelValue:y,disabled:b,isMultiple:x,rootElement:S,orientation:C,dir:w,unmountOnHide:T}=o(`AccordionItem`),E=c(()=>t(_.value,y.value,x.value)),D=c(()=>b.value||_.disabled),O=c(()=>_.unmountOnHide??T.value),{dataDisabled:k,dataState:A}=a({open:E,disabled:D,...r(_,[`value`])}),j=t=>{if(!S.value)return;let r=n(S.value),i=t.target;r.findIndex(e=>e===i)!==-1&&e(t,i,S.value,{arrowKeyOptions:C.value,dir:w.value,focus:!0})};return g({open:E,dataDisabled:k}),(e,t)=>(f(),l(m(s),d(m(v),{open:E.value,disabled:D.value,"unmount-on-hide":O.value,"data-disabled":m(k),"data-orientation":m(C),"data-state":m(A),onKeydown:j}),{default:h(()=>[p(e.$slots,`default`,{open:E.value})]),_:3},16,[`open`,`disabled`,`unmount-on-hide`,`data-disabled`,`data-orientation`,`data-state`]))}});export{g as default};
+import{useArrowNavigation as e}from"../../composables/use-arrow-navigation.js";import{getOpenFromSingleOrMultiple as t}from"../../shared/value.js";import{getCollectionItemElements as n}from"../../shared/dom.js";import{transformPropsToContext as r}from"../../shared/vue.js";import"../../shared/index.js";import{useOmitProps as i}from"../../composables/use-props.js";import"../../composables/index.js";import{provideAccordionItemContext as a,useAccordionRootContext as o}from"./context.js";import s from"../collapsible/collapsible-root.js";import"../collapsible/index.js";import{computed as c,createBlock as l,defineComponent as u,mergeProps as d,openBlock as f,renderSlot as p,unref as m,withCtx as h}from"vue";const g=u({name:`AccordionItem`,__name:`accordion-item`,props:{value:{},disabled:{type:Boolean},unmountOnHide:{type:Boolean,default:void 0},asChild:{type:Boolean},as:{}},setup(u,{expose:g}){let _=u,v=i(_,[`value`]),{modelValue:y,disabled:b,isMultiple:x,rootElement:S,orientation:C,dir:w,unmountOnHide:T}=o(`AccordionItem`),E=c(()=>t(_.value,y.value,x.value)),D=c(()=>b.value||_.disabled),O=c(()=>_.unmountOnHide??T.value),{dataDisabled:k,dataState:A}=a({open:E,disabled:D,...r(_,[`value`])}),j=t=>{if(!S.value)return;let r=n(S.value),i=t.target;r.findIndex(e=>e===i)!==-1&&e(t,i,S.value,{arrowKeyOptions:C.value,dir:w.value,focus:!0})};return g({open:E,dataDisabled:k}),(e,t)=>(f(),l(m(s),d(m(v),{open:E.value,disabled:D.value,"unmount-on-hide":O.value,"data-disabled":m(k),"data-orientation":m(C),"data-state":m(A),"data-slot":`item`,onKeydown:j}),{default:h(()=>[p(e.$slots,`default`,{open:E.value})]),_:3},16,[`open`,`disabled`,`unmount-on-hide`,`data-disabled`,`data-orientation`,`data-state`]))}});export{g as default};

package/dist/components/accordion/accordion-item.vue.d.ts

@@ -1,5 +1,5 @@
 import { AccordionItemProps } from "./types.js";
-import * as vue from "vue";
+import * as _$vue from "vue";
 
 //#region src/components/accordion/accordion-item.vue.d.ts
 declare var __VLS_10: {
@@ -8,12 +8,12 @@ declare var __VLS_10: {
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: vue.DefineComponent<AccordionItemProps, {
-  open: vue.ComputedRef<boolean>;
-  dataDisabled: vue.ComputedRef<"" | undefined>;
-}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<AccordionItemProps> & Readonly<{}>, {
+declare const __VLS_base: _$vue.DefineComponent<AccordionItemProps, {
+  open: _$vue.ComputedRef<boolean>;
+  dataDisabled: _$vue.ComputedRef<"" | undefined>;
+}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<AccordionItemProps> & Readonly<{}>, {
   unmountOnHide: boolean;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/accordion/accordion-root.js

@@ -1 +1 @@
-import{transformPropsToContext as e}from"../../shared/vue.js";import"../../shared/index.js";import{useSelection as t}from"../../composables/use-selection.js";import"../../composables/index.js";import{provideAccordionRootContext as n,useAccordionUi as r}from"./context.js";import{computed as i,createElementBlock as a,defineComponent as o,normalizeClass as s,openBlock as c,renderSlot as l,shallowRef as u,unref as d}from"vue";const f=o({name:`AccordionRoot`,__name:`accordion-root`,props:{collapsible:{type:Boolean,default:!1},dir:{},disabled:{type:Boolean,default:!1},orientation:{default:`vertical`},unmountOnHide:{type:Boolean,default:!0},modelValue:{},defaultValue:{},multiple:{},singleClearable:{type:Boolean}},emits:[`update:modelValue`],setup(o,{emit:f}){let p=o,m=f,h=r(),g=i(()=>h?.value?.root),_=u(),{modelValue:v,isMultiple:y,onModelValueChange:b}=t(p,e=>{m(`update:modelValue`,e)});return n({rootElement:_,modelValue:v,isMultiple:y,onModelValueChange:b,...e(p,[`collapsible`,`disabled`,`orientation`,`dir`,`unmountOnHide`])}),(e,t)=>(c(),a(`div`,{ref_key:`rootElement`,ref:_,class:s(g.value)},[l(e.$slots,`default`,{modelValue:d(v)})],2))}});export{f as default};
+import{transformPropsToContext as e}from"../../shared/vue.js";import"../../shared/index.js";import{useSelection as t}from"../../composables/use-selection.js";import"../../composables/index.js";import{provideAccordionRootContext as n,useAccordionUi as r}from"./context.js";import{useDirection as i}from"../config-provider/context.js";import{createElementBlock as a,defineComponent as o,normalizeClass as s,openBlock as c,renderSlot as l,shallowRef as u,unref as d}from"vue";const f=[`dir`],p=o({name:`AccordionRoot`,__name:`accordion-root`,props:{collapsible:{type:Boolean,default:!1},dir:{},disabled:{type:Boolean,default:!1},orientation:{default:`vertical`},unmountOnHide:{type:Boolean,default:!0},modelValue:{},defaultValue:{},multiple:{},singleClearable:{type:Boolean}},emits:[`update:modelValue`],setup(o,{emit:p}){let m=o,h=p,g=r(`root`),_=u(),v=i(()=>m.dir),{modelValue:y,isMultiple:b,onModelValueChange:x}=t(m,e=>{h(`update:modelValue`,e)});return n({dir:v,rootElement:_,modelValue:y,isMultiple:b,onModelValueChange:x,...e(m,[`collapsible`,`disabled`,`orientation`,`unmountOnHide`])}),(e,t)=>(c(),a(`div`,{ref_key:`rootElement`,ref:_,class:s(d(g)),dir:d(v),"data-slot":`root`},[l(e.$slots,`default`,{modelValue:d(y)})],10,f))}});export{p as default};

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

@@ -1,9 +1,9 @@
 import { AccordionRootProps } from "./types.js";
-import * as vue from "vue";
+import * as _$vue from "vue";
 
 //#region src/components/accordion/accordion-root.vue.d.ts
 declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue.PublicProps & __VLS_PrettifyLocal<AccordionRootProps<M> & {
+  props: _$vue.PublicProps & __VLS_PrettifyLocal<AccordionRootProps<M> & {
     "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -16,7 +16,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     }) => any;
   };
   emit: (evt: "update:modelValue", value: M extends true ? string[] : string) => void;
-}>) => vue.VNode & {
+}>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/accordion/accordion-trigger.js

@@ -1 +1 @@
-import{useAccordionItemContext as e,useAccordionRootContext as t}from"./context.js";import n from"../collapsible/collapsible-trigger.js";import"../collapsible/index.js";import{createBlock as r,defineComponent as i,openBlock as a,renderSlot as o,unref as s,withCtx as c}from"vue";const l=i({name:`AccordionTrigger`,__name:`accordion-trigger`,props:{disabledCollapsible:{type:Boolean},asChild:{type:Boolean},as:{}},setup(i){let{collapsible:l,orientation:u,onModelValueChange:d,isMultiple:f}=t(`AccordionTrigger`),{setTriggerElement:p,triggerId:m,initTriggerId:h,open:g,value:_,dataDisabled:v,dataState:y,disabled:b}=e(`AccordionTrigger`),x=()=>{b.value||!f.value&&g.value&&!l.value||d(_.value)};return h(),(e,t)=>(a(),r(s(n),{id:s(m),ref:s(p),as:i.as,"as-child":i.asChild,"data-soybean-collection-item":``,"aria-disabled":s(b)||void 0,"aria-expanded":s(g)||!1,"data-disabled":s(v),"data-orientation":s(u),"data-state":s(y),disabled:s(b),onClick:x},{default:c(()=>[o(e.$slots,`default`)]),_:3},8,[`id`,`as`,`as-child`,`aria-disabled`,`aria-expanded`,`data-disabled`,`data-orientation`,`data-state`,`disabled`]))}});export{l as default};
+import{useAccordionItemContext as e,useAccordionRootContext as t}from"./context.js";import n from"../collapsible/collapsible-trigger.js";import"../collapsible/index.js";import{createBlock as r,defineComponent as i,openBlock as a,renderSlot as o,unref as s,withCtx as c}from"vue";const l=i({name:`AccordionTrigger`,__name:`accordion-trigger`,props:{disabledCollapsible:{type:Boolean},asChild:{type:Boolean},as:{}},setup(i){let{collapsible:l,orientation:u,onModelValueChange:d,isMultiple:f}=t(`AccordionTrigger`),{setTriggerElement:p,triggerId:m,initTriggerId:h,open:g,value:_,dataDisabled:v,dataState:y,disabled:b}=e(`AccordionTrigger`),x=()=>{b.value||!f.value&&g.value&&!l.value||d(_.value)};return h(),(e,t)=>(a(),r(s(n),{id:s(m),ref:s(p),as:i.as,"as-child":i.asChild,"aria-disabled":s(b)||void 0,"aria-expanded":s(g)||!1,"data-disabled":s(v),"data-orientation":s(u),"data-state":s(y),"data-soybean-collection-item":``,"data-slot":`trigger`,disabled:s(b),onClick:x},{default:c(()=>[o(e.$slots,`default`)]),_:3},8,[`id`,`as`,`as-child`,`aria-disabled`,`aria-expanded`,`data-disabled`,`data-orientation`,`data-state`,`disabled`]))}});export{l as default};

package/dist/components/accordion/accordion-trigger.vue.d.ts

@@ -1,12 +1,12 @@
-import { CollapsibleTriggerProps } from "../collapsible/types.js";
-import * as vue from "vue";
+import { AccordionTriggerProps } from "./types.js";
+import * as _$vue from "vue";
 
 //#region src/components/accordion/accordion-trigger.vue.d.ts
 declare var __VLS_10: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: vue.DefineComponent<CollapsibleTriggerProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<CollapsibleTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: _$vue.DefineComponent<AccordionTriggerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<AccordionTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,8 +1,8 @@
 import { ClassValue, UiClass } from "../../types/common.js";
 import { AccordionUiSlot } from "./types.js";
-import * as vue from "vue";
+import * as _$vue from "vue";
 
 //#region src/components/accordion/context.d.ts
-declare const provideAccordionUi: (ui: vue.ComputedRef<Partial<UiClass<AccordionUiSlot>>>) => vue.ComputedRef<Partial<UiClass<AccordionUiSlot>>>, useAccordionUi: <S extends AccordionUiSlot | undefined = undefined>(slot?: S | undefined) => S extends AccordionUiSlot ? vue.ComputedRef<ClassValue> : vue.ComputedRef<Partial<UiClass<AccordionUiSlot>>>;
+declare const provideAccordionUi: (ui: _$vue.ComputedRef<Partial<UiClass<AccordionUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<AccordionUiSlot>>>, useAccordionUi: <S extends AccordionUiSlot | undefined = undefined>(slot?: S | undefined) => S extends AccordionUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<AccordionUiSlot>>>;
 //#endregion
 export { provideAccordionUi };

package/dist/components/accordion/context.js

@@ -1 +1 @@
-import{getDisclosureState as e}from"../../shared/value.js";import"../../shared/index.js";import{useContext as t}from"../../composables/use-context.js";import{useForwardElement as n}from"../../composables/use-forward-element.js";import{useUiContext as r}from"../../composables/use-ui-context.js";import"../../composables/index.js";import{useDirection as i}from"../config-provider/context.js";import{provideCollapsibleUi as a}from"../collapsible/context.js";import{computed as o,shallowRef as s,useId as c}from"vue";const[l,u]=t(`AccordionRoot`,e=>{let t=i(()=>e.dir.value);return{...e,dir:t}}),[d,f]=t(`AccordionItem`,t=>{let{open:r,disabled:i}=t,[a,l]=n(),u=s(``),d=()=>{u.value||(u.value=`soybean-accordion-trigger-${c()}`)},f=o(()=>i.value?``:void 0),p=o(()=>e(r.value));return{...t,triggerElement:a,setTriggerElement:l,triggerId:u,initTriggerId:d,dataDisabled:f,dataState:p}}),[p,m]=r(`AccordionUi`,e=>(a(o(()=>({root:e.value?.item,trigger:e.value?.trigger,content:e.value?.content}))),e));export{d as provideAccordionItemContext,l as provideAccordionRootContext,p as provideAccordionUi,f as useAccordionItemContext,u as useAccordionRootContext,m as useAccordionUi};
+import{getDisclosureState as e}from"../../shared/value.js";import"../../shared/index.js";import{useContext as t}from"../../composables/use-context.js";import{useForwardElement as n}from"../../composables/use-forward-element.js";import{useUiContext as r}from"../../composables/use-ui-context.js";import"../../composables/index.js";import{provideCollapsibleUi as i}from"../collapsible/context.js";import{computed as a,shallowRef as o,useId as s}from"vue";const[c,l]=t(`AccordionRoot`),[u,d]=t(`AccordionItem`,t=>{let{open:r,disabled:i}=t,[c,l]=n(),u=o(``),d=()=>{u.value||(u.value=`soybean-accordion-trigger-${s()}`)},f=a(()=>i.value?``:void 0),p=a(()=>e(r.value));return{...t,triggerElement:c,setTriggerElement:l,triggerId:u,initTriggerId:d,dataDisabled:f,dataState:p}}),[f,p]=r(`AccordionUi`,e=>(i(a(()=>({root:e.value?.item,trigger:e.value?.trigger,content:e.value?.content}))),e));export{u as provideAccordionItemContext,c as provideAccordionRootContext,f as provideAccordionUi,d as useAccordionItemContext,l as useAccordionRootContext,p as useAccordionUi};

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

@@ -1,9 +1,9 @@
-import { CollapsibleContentProps, CollapsibleTriggerProps } from "../collapsible/types.js";
-import { AccordionHeaderProps, AccordionItemProps, AccordionRootEmits, AccordionRootProps, AccordionUi, AccordionUiSlot } from "./types.js";
-import { _default as _default$3 } from "./accordion-root.vue.js";
-import { _default as _default$2 } from "./accordion-item.vue.js";
-import { _default as _default$4 } from "./accordion-trigger.vue.js";
-import { _default as _default$1 } from "./accordion-header.vue.js";
-import { _default } from "./accordion-content.vue.js";
+import { AccordionCompactBaseSlotProps, AccordionCompactEmits, AccordionCompactProps, AccordionCompactSlots, AccordionContentProps, AccordionHeaderProps, AccordionItemProps, AccordionOptionData, AccordionRootEmits, AccordionRootProps, AccordionTriggerProps, AccordionUi, AccordionUiSlot } from "./types.js";
+import { _default } from "./accordion-compact.vue.js";
+import { _default as _default$4 } from "./accordion-root.vue.js";
+import { _default as _default$3 } from "./accordion-item.vue.js";
+import { _default as _default$5 } from "./accordion-trigger.vue.js";
+import { _default as _default$2 } from "./accordion-header.vue.js";
+import { _default as _default$1 } from "./accordion-content.vue.js";
 import { provideAccordionUi } from "./context.js";
-export { _default as AccordionContent, type CollapsibleContentProps as AccordionContentProps, _default$1 as AccordionHeader, type AccordionHeaderProps, _default$2 as AccordionItem, type AccordionItemProps, _default$3 as AccordionRoot, type AccordionRootEmits, type AccordionRootProps, _default$4 as AccordionTrigger, type CollapsibleTriggerProps as AccordionTriggerProps, type AccordionUi, type AccordionUiSlot, provideAccordionUi };
+export { _default as AccordionCompact, type AccordionCompactBaseSlotProps, type AccordionCompactEmits, type AccordionCompactProps, type AccordionCompactSlots, _default$1 as AccordionContent, type AccordionContentProps, _default$2 as AccordionHeader, type AccordionHeaderProps, _default$3 as AccordionItem, type AccordionItemProps, type AccordionOptionData, _default$4 as AccordionRoot, type AccordionRootEmits, type AccordionRootProps, _default$5 as AccordionTrigger, type AccordionTriggerProps, type AccordionUi, type AccordionUiSlot, provideAccordionUi };

package/dist/components/accordion/index.js

@@ -1 +1 @@
-import{provideAccordionUi as e}from"./context.js";import t from"./accordion-root.js";import n from"./accordion-item.js";import r from"./accordion-trigger.js";import i from"./accordion-header.js";import a from"./accordion-content.js";export{a as AccordionContent,i as AccordionHeader,n as AccordionItem,t as AccordionRoot,r as AccordionTrigger,e as provideAccordionUi};
+import{provideAccordionUi as e}from"./context.js";import t from"./accordion-content.js";import n from"./accordion-header.js";import r from"./accordion-item.js";import i from"./accordion-root.js";import a from"./accordion-trigger.js";import o from"./accordion-compact.js";export{o as AccordionCompact,t as AccordionContent,n as AccordionHeader,r as AccordionItem,i as AccordionRoot,a as AccordionTrigger,e as provideAccordionUi};

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

@@ -1,5 +1,6 @@
 import { DataOrientation, Direction, SelectionEmits, SelectionProps, UiClass } from "../../types/common.js";
 import { CollapsibleContentProps, CollapsibleRootProps, CollapsibleTriggerProps } from "../collapsible/types.js";
+import { IconValue } from "../icon/types.js";
 import { ComputedRef, HTMLAttributes, ShallowRef } from "vue";
 
 //#region src/components/accordion/types.d.ts
@@ -39,11 +40,46 @@ interface AccordionRootProps<M extends boolean = false> extends SelectionProps<M
 }
 type AccordionRootEmits<M extends boolean = false> = SelectionEmits<M>;
 interface AccordionHeaderProps extends /** @vue-ignore */HTMLAttributes {}
+interface AccordionContentProps extends CollapsibleContentProps {}
+interface AccordionDescriptionProps extends /** @vue-ignore */HTMLAttributes {}
+interface AccordionTriggerProps extends CollapsibleTriggerProps {}
 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;
 }
-type AccordionUiSlot = 'root' | 'item' | 'header' | 'trigger' | 'content';
+interface AccordionOptionData extends Pick<AccordionItemProps, 'value' | 'disabled'> {
+  /** The title of the accordion item. */
+  title?: string;
+  /** The description of the accordion content. */
+  description?: string;
+  /**
+   * The icon of the accordion item.
+   */
+  icon?: IconValue;
+}
+interface AccordionCompactProps<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> extends AccordionRootProps<M> {
+  items: T[];
+  itemProps?: AccordionItemProps;
+  headerProps?: AccordionHeaderProps;
+  triggerProps?: AccordionTriggerProps;
+  contentProps?: AccordionContentProps;
+  descriptionProps?: AccordionDescriptionProps;
+}
+type AccordionCompactEmits<M extends boolean = false> = AccordionRootEmits<M>;
+interface AccordionCompactBaseSlotProps<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> {
+  item: T;
+  index: number;
+  modelValue: (M extends true ? string[] : string) | undefined;
+  open: boolean;
+}
+type AccordionCompactSlots<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> = {
+  item?: (props: Omit<AccordionCompactBaseSlotProps<T, M>, 'open'>) => any;
+  leading?: (props: AccordionCompactBaseSlotProps<T, M>) => any;
+  title?: (props: AccordionCompactBaseSlotProps<T, M>) => any;
+  'trigger-icon'?: (props: AccordionCompactBaseSlotProps<T, M>) => any;
+  content?: (props: AccordionCompactBaseSlotProps<T, M>) => any;
+};
+type AccordionUiSlot = 'root' | 'item' | 'header' | 'trigger' | 'content' | 'description' | 'triggerLeadingIcon' | 'triggerIcon';
 type AccordionUi = UiClass<AccordionUiSlot>;
 //#endregion
-export { AccordionHeaderProps, AccordionItemProps, AccordionRootEmits, AccordionRootProps, AccordionUi, AccordionUiSlot };
+export { AccordionCompactBaseSlotProps, AccordionCompactEmits, AccordionCompactProps, AccordionCompactSlots, AccordionContentProps, AccordionHeaderProps, AccordionItemProps, AccordionOptionData, AccordionRootEmits, AccordionRootProps, AccordionTriggerProps, AccordionUi, AccordionUiSlot };

package/dist/components/affix/affix-content.js

@@ -0,0 +1 @@
+import{useAffixRootContext as e,useAffixUi as t}from"./context.js";import{createElementBlock as n,defineComponent as r,normalizeClass as i,normalizeStyle as a,openBlock as o,renderSlot as s,unref as c}from"vue";const l=[`data-state`],u=r({name:`AffixContent`,__name:`affix-content`,setup(r){let u=t(`content`),{affixed:d,affixStyle:f,dataState:p,setContentElement:m}=e(`AffixContent`);return(e,t)=>(o(),n(`div`,{ref:c(m),class:i(c(u)),"data-state":c(p),style:a(c(f))},[s(e.$slots,`default`,{affixed:c(d)})],14,l))}});export{u as default};

package/dist/components/affix/affix-content.vue.d.ts

@@ -0,0 +1,20 @@
+import { AffixContentProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/affix/affix-content.vue.d.ts
+declare var __VLS_1: {
+  affixed: boolean;
+};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<AffixContentProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<AffixContentProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/affix/affix-placeholder.js

@@ -0,0 +1 @@
+import{useAffixRootContext as e,useAffixUi as t}from"./context.js";import{createCommentVNode as n,createElementBlock as r,defineComponent as i,normalizeClass as a,normalizeStyle as o,openBlock as s,unref as c}from"vue";const l=i({name:`AffixPlaceholder`,__name:`affix-placeholder`,setup(i){let l=t(`placeholder`),{affixed:u,placeholderStyle:d}=e(`AffixPlaceholder`);return(e,t)=>c(u)?(s(),r(`div`,{key:0,class:a(c(l)),"aria-hidden":`true`,role:`presentation`,style:o(c(d))},null,6)):n(`v-if`,!0)}});export{l as default};

package/dist/components/affix/affix-placeholder.vue.d.ts

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

package/dist/components/affix/affix-root.js

@@ -0,0 +1 @@
+import{useForwardElement as e}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{getDefaultTarget as t,getFixedBottom as n,getFixedTop as r,getTargetRect as i,isZeroRect as a,resolveAffixTarget as o}from"./shared.js";import{provideAffixRootContext as s,useAffixUi as c}from"./context.js";import{computed as l,createElementBlock as u,defineComponent as d,nextTick as f,normalizeClass as p,onBeforeUnmount as m,onMounted as h,onWatcherCleanup as g,openBlock as _,renderSlot as v,shallowRef as y,unref as b,watch as x}from"vue";import{useEventListener as S,useRafFn as C,useResizeObserver as w}from"@vueuse/core";const T=d({name:`AffixRoot`,__name:`affix-root`,props:{offsetTop:{},offsetBottom:{},target:{type:[String,Function,null]}},emits:[`change`],setup(d,{expose:T,emit:E}){let D=d,O=E,k=c(`root`),[A,j]=e(),M=y(!1),N=y(),P=y(),F=l(()=>M.value?`fixed`:`static`),I=y(o(D.target));function L(){I.value=o(D.target)}let R=l(()=>D.offsetBottom===void 0&&D.offsetTop===void 0?0:D.offsetTop);function z(){if(!M.value){N.value=void 0,P.value=void 0;return}M.value=!1,N.value=void 0,P.value=void 0,O(`change`,!1)}function B(){if(typeof window>`u`)return;let e=A.value,t=I.value;if(!e||!t){z();return}let o=e.getBoundingClientRect();if(a(o)){z();return}let s=i(t),c=r(o,s,R.value),l=n(o,s,D.offsetBottom),u,d;(c!==void 0||l!==void 0)&&(u={left:`${o.left}px`,position:`fixed`,width:`${o.width}px`},c!==void 0&&(u.top=`${c}px`),l!==void 0&&(u.bottom=`${l}px`),d={height:`${o.height}px`,width:`${o.width}px`});let f=!!u;M.value!==f&&O(`change`,f),M.value=f,N.value=u,P.value=d}let{pause:V,resume:H}=C(B,{immediate:!1,once:!0}),{contentElement:U}=s({affixed:M,affixStyle:N,placeholderStyle:P,dataState:F,updatePosition:H});return x([()=>D.target,()=>D.offsetTop,()=>D.offsetBottom],async()=>{L(),await f(),H()},{immediate:!0}),x(I,e=>{if(!e)return;let t=S(e,`scroll`,H),n=S(e,`touchstart`,H),r=S(e,`touchmove`,H),i=S(e,`touchend`,H);g(()=>{t(),n(),r(),i()})},{immediate:!0}),S(t,`load`,H),S(t,`pageshow`,H),S(t,`resize`,H),w(A,H),w(U,H),h(async()=>{await f(),L(),H()}),m(()=>{V()}),T({affixed:M,updatePosition:H}),(e,t)=>(_(),u(`div`,{ref:b(j),class:p(b(k))},[v(e.$slots,`default`,{affixed:M.value})],2))}});export{T as default};

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

@@ -0,0 +1,28 @@
+import { AffixRootProps } from "./types.js";
+import * as _$vue from "vue";
+import * as _$_vueuse_shared0 from "@vueuse/shared";
+
+//#region src/components/affix/affix-root.vue.d.ts
+declare var __VLS_1: {
+  affixed: boolean;
+};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<AffixRootProps, {
+  affixed: _$vue.ShallowRef<boolean, boolean>;
+  updatePosition: _$_vueuse_shared0.Fn;
+}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  change: (affixed: boolean) => any;
+}, string, _$vue.PublicProps, Readonly<AffixRootProps> & Readonly<{
+  onChange?: ((affixed: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

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

@@ -0,0 +1,8 @@
+import { ClassValue, UiClass } from "../../types/common.js";
+import { AffixUiSlot } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/affix/context.d.ts
+declare const provideAffixUi: (ui: _$vue.ComputedRef<Partial<UiClass<AffixUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<AffixUiSlot>>>, useAffixUi: <S extends AffixUiSlot | undefined = undefined>(slot?: S | undefined) => S extends AffixUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<AffixUiSlot>>>;
+//#endregion
+export { provideAffixUi };

package/dist/components/affix/context.js

@@ -0,0 +1 @@
+import{useContext as e}from"../../composables/use-context.js";import{useForwardElement as t}from"../../composables/use-forward-element.js";import{useUiContext as n}from"../../composables/use-ui-context.js";import"../../composables/index.js";const[r,i]=e(`AffixRoot`,e=>{let[n,r]=t();return{...e,contentElement:n,setContentElement:r}}),[a,o]=n(`AffixUi`);export{r as provideAffixRootContext,a as provideAffixUi,i as useAffixRootContext,o as useAffixUi};

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

@@ -0,0 +1,6 @@
+import { AffixContentProps, AffixPlaceholderProps, AffixRootEmits, AffixRootExposed, AffixRootProps, AffixTarget, AffixUi, AffixUiSlot } from "./types.js";
+import { _default as _default$2 } from "./affix-root.vue.js";
+import { _default as _default$1 } from "./affix-placeholder.vue.js";
+import { _default } from "./affix-content.vue.js";
+import { provideAffixUi } from "./context.js";
+export { _default as AffixContent, type AffixContentProps, _default$1 as AffixPlaceholder, type AffixPlaceholderProps, _default$2 as AffixRoot, type AffixRootEmits, type AffixRootExposed, type AffixRootProps, type AffixTarget, type AffixUi, type AffixUiSlot, provideAffixUi };

package/dist/components/affix/index.js

@@ -0,0 +1 @@
+import{provideAffixUi as e}from"./context.js";import t from"./affix-root.js";import n from"./affix-placeholder.js";import r from"./affix-content.js";export{r as AffixContent,n as AffixPlaceholder,t as AffixRoot,e as provideAffixUi};

package/dist/components/affix/shared.js

@@ -0,0 +1 @@
+import{toValue as e}from"vue";function t(){return typeof window>`u`?null:window}function n(e){if(typeof document>`u`)return null;try{return document.querySelector(e)}catch{return null}}function r(r){return r?typeof r==`string`?n(r):e(r)??null:t()}function i(e){return e&&e!==t()&&`getBoundingClientRect`in e?e.getBoundingClientRect():{bottom:window.innerHeight,height:window.innerHeight,left:0,right:window.innerWidth,top:0,width:window.innerWidth,x:0,y:0,toJSON(){return{}}}}function a(e,t,n){if(n!==void 0&&Math.round(t.top)>Math.round(e.top)-n)return n+t.top}function o(e,t,n){if(n!==void 0&&Math.round(t.bottom)<Math.round(e.bottom)+n)return n+(window.innerHeight-t.bottom)}function s(e){return e.top===0&&e.left===0&&e.width===0&&e.height===0}export{t as getDefaultTarget,o as getFixedBottom,a as getFixedTop,i as getTargetRect,s as isZeroRect,r as resolveAffixTarget};