@skdx/vue 0.26.0 → 0.28.0

package/dist/resizable/ResizableHandle.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const f=require("../utils/direction.cjs"),y=require("./context.cjs");let i=require("vue");var _=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-disabled","data-orientation","data-disabled","tabindex"],C=(0,i.defineComponent)({__name:"ResizableHandle",props:{disabled:{type:Boolean,default:!1},step:{default:2}},setup(l){const n=l,p=(0,i.inject)(y.RESIZABLE_CONTEXT);if(!p)throw new Error("SkdxResizableHandle must be used within SkdxResizablePanelGroup.");const t=p,r=t.registerHandle(),s=(0,i.ref)(null),z=f.useDirection(),h=(0,i.computed)(()=>t.getPanelConfig(r)),b=(0,i.computed)(()=>t.sizes.value[r]??0),P=(0,i.computed)(()=>t.direction==="horizontal"?"vertical":"horizontal");function v(e){n.disabled||(e.target.setPointerCapture?.(e.pointerId),s.value={lastPos:t.direction==="horizontal"?e.clientX:e.clientY})}function g(e){if(n.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const a=s.value;if(!a)return;const o=t.groupRef.value?.getBoundingClientRect();if(!o)return;const u=t.direction==="horizontal"?o.width:o.height;if(!u)return;const c=t.direction==="horizontal"?e.clientX:e.clientY;let d=(c-a.lastPos)/u*100;a.lastPos=c,t.direction==="horizontal"&&f.resolveDirection(e.currentTarget,z())==="rtl"&&(d=-d),d!==0&&t.resizePanels(r,d)}function m(e){s.value&&e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),s.value=null}function w(e){if(n.disabled)return;const a=f.directionalKey(e.key,e.currentTarget,z()),o=t.direction==="horizontal";a===(o?"ArrowRight":"ArrowDown")?(e.preventDefault(),t.resizePanels(r,n.step)):a===(o?"ArrowLeft":"ArrowUp")?(e.preventDefault(),t.resizePanels(r,-n.step)):a==="Home"?(e.preventDefault(),t.resizePanels(r,-1e3)):a==="End"&&(e.preventDefault(),t.resizePanels(r,1e3))}const x=(0,i.computed)(()=>({touchAction:"none",cursor:n.disabled?void 0:t.direction==="horizontal"?"col-resize":"row-resize"}));return(e,a)=>((0,i.openBlock)(),(0,i.createElementBlock)("div",{class:"skdx-resizable__handle","data-part":"handle",role:"separator","aria-orientation":P.value,"aria-valuenow":Math.round(b.value),"aria-valuemin":h.value?.minSize,"aria-valuemax":h.value?.maxSize,"aria-disabled":l.disabled||void 0,"data-orientation":(0,i.unref)(t).direction,"data-disabled":l.disabled?"":void 0,"data-skdx-resizable-handle":"",tabindex:l.disabled?void 0:0,style:(0,i.normalizeStyle)(x.value),onKeydown:w,onPointerdown:v,onPointermove:g,onPointerup:m},null,44,_))}});exports.default=C;
+const p=require("../utils/direction.cjs"),H=require("./context.cjs");let a=require("vue");var R=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-valuetext","aria-controls","aria-disabled","data-orientation","data-disabled","data-dragging"],A=(0,a.defineComponent)({__name:"ResizableHandle",props:{disabled:{type:Boolean,default:!1},step:{default:void 0}},setup(c){const i=c,v=(0,a.inject)(H.RESIZABLE_CONTEXT);if(!v)throw new Error("SkdxResizableHandle must be used within SkdxResizablePanelGroup.");const t=v,z=t.registerHandle(),f=(0,a.ref)(null),l=(0,a.ref)(z);(0,a.watch)(t.order,()=>{f.value&&(l.value=t.resolveHandleIndex(f.value,z))},{flush:"post"});function h(e){return t.resolveHandleIndex(e.currentTarget,l.value)}const s=(0,a.ref)(null),g=p.useDirection(),m=(0,a.computed)(()=>i.step??t.step),w=(0,a.computed)(()=>s.value!==null),P=(0,a.computed)(()=>t.getPanelConfig(l.value)),_=(0,a.computed)(()=>P.value?.minSize??10),y=(0,a.computed)(()=>P.value?.maxSize??90),x=(0,a.computed)(()=>t.sizes.value[l.value]??0),I=(0,a.computed)(()=>t.order.value[l.value]),S=(0,a.computed)(()=>t.orientation==="horizontal"?"vertical":"horizontal");function k(e){i.disabled||(e.target.setPointerCapture?.(e.pointerId),s.value={lastPos:t.orientation==="horizontal"?e.clientX:e.clientY})}function C(e){if(i.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const n=s.value;if(!n)return;const r=t.groupRef.value?.getBoundingClientRect();if(!r)return;const u=t.orientation==="horizontal"?r.width:r.height;if(!u)return;const d=t.orientation==="horizontal"?e.clientX:e.clientY;let o=(d-n.lastPos)/u*100;n.lastPos=d,t.orientation==="horizontal"&&p.resolveDirection(e.currentTarget,g())==="rtl"&&(o=-o),o!==0&&t.resizePanels(h(e),o)}function b(e){s.value&&e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),s.value=null,t.commitLayout()}function D(e){if(i.disabled)return;const n=p.directionalKey(e.key,e.currentTarget,g()),r=t.orientation==="horizontal",u=r?"ArrowRight":"ArrowDown",d=r?"ArrowLeft":"ArrowUp",o=h(e);if(n===u)e.preventDefault(),t.resizePanels(o,m.value);else if(n===d)e.preventDefault(),t.resizePanels(o,-m.value);else if(n==="Home")e.preventDefault(),t.resizePanels(o,-1e3);else if(n==="End")e.preventDefault(),t.resizePanels(o,1e3);else return;t.commitLayout()}const E=(0,a.computed)(()=>({touchAction:"none",cursor:i.disabled?void 0:t.orientation==="horizontal"?"col-resize":"row-resize"}));return(e,n)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-resizable__handle","data-part":"handle",ref_key:"handleEl",ref:f,role:"separator","aria-orientation":S.value,"aria-valuenow":Math.round(x.value),"aria-valuemin":_.value,"aria-valuemax":y.value,"aria-valuetext":`${Math.round(x.value)}%`,"aria-controls":I.value,"aria-disabled":c.disabled||void 0,"data-orientation":(0,a.unref)(t).orientation,"data-disabled":c.disabled?"":void 0,"data-dragging":w.value?"":void 0,"data-skdx-resizable-handle":"",tabindex:"0",style:(0,a.normalizeStyle)(E.value),onKeydown:D,onPointerdown:k,onPointermove:C,onPointerup:b,onPointercancel:b},null,44,R))}});exports.default=A;

package/dist/resizable/ResizableHandle.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e,resolveDirection as a,useDirection as t}from"../utils/direction.js";import{RESIZABLE_CONTEXT as i}from"./context.js";import{computed as r,createElementBlock as n,defineComponent as o,inject as l,normalizeStyle as s,openBlock as d,ref as u,unref as c}from"vue";var p=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-disabled","data-orientation","data-disabled","tabindex"],v=/* @__PURE__ */o({__name:"ResizableHandle",props:{disabled:{type:Boolean,default:!1},step:{default:2}},setup(o){const v=o,f=l(i);if(!f)throw new Error("SkdxResizableHandle must be used within SkdxResizablePanelGroup.");const z=f,h=z.registerHandle(),b=u(null),m=t(),P=r(()=>z.getPanelConfig(h)),g=r(()=>z.sizes.value[h]??0),w=r(()=>"horizontal"===z.direction?"vertical":"horizontal");function x(e){v.disabled||(e.target.setPointerCapture?.(e.pointerId),b.value={lastPos:"horizontal"===z.direction?e.clientX:e.clientY})}function C(e){if(v.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const t=b.value;if(!t)return;const i=z.groupRef.value?.getBoundingClientRect();if(!i)return;const r="horizontal"===z.direction?i.width:i.height;if(!r)return;const n="horizontal"===z.direction?e.clientX:e.clientY;let o=(n-t.lastPos)/r*100;t.lastPos=n,"horizontal"===z.direction&&"rtl"===a(e.currentTarget,m())&&(o=-o),0!==o&&z.resizePanels(h,o)}function k(e){b.value&&e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),b.value=null}function D(a){if(v.disabled)return;const t=e(a.key,a.currentTarget,m()),i="horizontal"===z.direction;t===(i?"ArrowRight":"ArrowDown")?(a.preventDefault(),z.resizePanels(h,v.step)):t===(i?"ArrowLeft":"ArrowUp")?(a.preventDefault(),z.resizePanels(h,-v.step)):"Home"===t?(a.preventDefault(),z.resizePanels(h,-1e3)):"End"===t&&(a.preventDefault(),z.resizePanels(h,1e3))}const R=r(()=>({touchAction:"none",cursor:v.disabled?void 0:"horizontal"===z.direction?"col-resize":"row-resize"}));return(e,a)=>(d(),n("div",{class:"skdx-resizable__handle","data-part":"handle",role:"separator","aria-orientation":w.value,"aria-valuenow":Math.round(g.value),"aria-valuemin":P.value?.minSize,"aria-valuemax":P.value?.maxSize,"aria-disabled":o.disabled||void 0,"data-orientation":c(z).direction,"data-disabled":o.disabled?"":void 0,"data-skdx-resizable-handle":"",tabindex:o.disabled?void 0:0,style:s(R.value),onKeydown:D,onPointerdown:x,onPointermove:C,onPointerup:k},null,44,p))}});export{v as default};
+import{directionalKey as e,resolveDirection as a,useDirection as t}from"../utils/direction.js";import{RESIZABLE_CONTEXT as n}from"./context.js";import{computed as r,createElementBlock as i,defineComponent as o,inject as l,normalizeStyle as s,openBlock as u,ref as d,unref as v,watch as c}from"vue";var f=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-valuetext","aria-controls","aria-disabled","data-orientation","data-disabled","data-dragging"],p=/* @__PURE__ */o({__name:"ResizableHandle",props:{disabled:{type:Boolean,default:!1},step:{default:void 0}},setup(o){const p=o,h=l(n);if(!h)throw new Error("SkdxResizableHandle must be used within SkdxResizablePanelGroup.");const m=h,z=m.registerHandle(),g=d(null),b=d(z);function P(e){return m.resolveHandleIndex(e.currentTarget,b.value)}c(m.order,()=>{g.value&&(b.value=m.resolveHandleIndex(g.value,z))},{flush:"post"});const w=d(null),x=t(),y=r(()=>p.step??m.step),k=r(()=>null!==w.value),C=r(()=>m.getPanelConfig(b.value)),D=r(()=>C.value?.minSize??10),E=r(()=>C.value?.maxSize??90),I=r(()=>m.sizes.value[b.value]??0),R=r(()=>m.order.value[b.value]),A=r(()=>"horizontal"===m.orientation?"vertical":"horizontal");function H(e){p.disabled||(e.target.setPointerCapture?.(e.pointerId),w.value={lastPos:"horizontal"===m.orientation?e.clientX:e.clientY})}function S(e){if(p.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const t=w.value;if(!t)return;const n=m.groupRef.value?.getBoundingClientRect();if(!n)return;const r="horizontal"===m.orientation?n.width:n.height;if(!r)return;const i="horizontal"===m.orientation?e.clientX:e.clientY;let o=(i-t.lastPos)/r*100;t.lastPos=i,"horizontal"===m.orientation&&"rtl"===a(e.currentTarget,x())&&(o=-o),0!==o&&m.resizePanels(P(e),o)}function _(e){w.value&&e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),w.value=null,m.commitLayout()}function B(a){if(p.disabled)return;const t=e(a.key,a.currentTarget,x()),n="horizontal"===m.orientation,r=n?"ArrowRight":"ArrowDown",i=n?"ArrowLeft":"ArrowUp",o=P(a);if(t===r)a.preventDefault(),m.resizePanels(o,y.value);else if(t===i)a.preventDefault(),m.resizePanels(o,-y.value);else if("Home"===t)a.preventDefault(),m.resizePanels(o,-1e3);else{if("End"!==t)return;a.preventDefault(),m.resizePanels(o,1e3)}m.commitLayout()}const T=r(()=>({touchAction:"none",cursor:p.disabled?void 0:"horizontal"===m.orientation?"col-resize":"row-resize"}));return(e,a)=>(u(),i("div",{class:"skdx-resizable__handle","data-part":"handle",ref_key:"handleEl",ref:g,role:"separator","aria-orientation":A.value,"aria-valuenow":Math.round(I.value),"aria-valuemin":D.value,"aria-valuemax":E.value,"aria-valuetext":`${Math.round(I.value)}%`,"aria-controls":R.value,"aria-disabled":o.disabled||void 0,"data-orientation":v(m).orientation,"data-disabled":o.disabled?"":void 0,"data-dragging":k.value?"":void 0,"data-skdx-resizable-handle":"",tabindex:"0",style:s(T.value),onKeydown:B,onPointerdown:H,onPointermove:S,onPointerup:_,onPointercancel:_},null,44,f))}});export{p as default};

package/dist/resizable/ResizablePanel.vue.d.cts

@@ -1,10 +1,7 @@
 /**
- * A single pane within a `SkdxResizablePanelGroup`. Renders
- * `<div data-skdx-resizable-panel>` with `data-orientation` inherited from the
- * group and `flex-basis` set to its current size percentage (`flex-grow: 0`,
- * `flex-shrink: 0`, `overflow: hidden`). Registers its `defaultSize` /
- * `minSize` / `maxSize` with the group once, on mount. Must be used inside
- * `SkdxResizablePanelGroup`.
+ * Pane within SkdxResizablePanelGroup. Registers size/min/max on mount, renders
+ * resolved id. minSize/maxSize default 10/90 (not 0/100). Collapsible panels snap
+ * at collapsedSize, reopen at minSize.
  */
 type __VLS_Props = {
     /** Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels. */
@@ -13,6 +10,16 @@ type __VLS_Props = {
     minSize?: number;
     /** Maximum size as a percentage (0-100); an adjacent handle won't grow this panel past it. */
     maxSize?: number;
+    /**
+     * Lets this panel close entirely: a resize below `minSize` snaps it to `collapsedSize`, reopening at `minSize` on any resize away.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` and the group emits `collapse`/`expand` crossing it.
+     * @default 0
+     */
+    collapsedSize?: number;
     /** Stable identifier used to track this panel's size across renders. Auto-generated if omitted. */
     id?: string;
 };
@@ -22,9 +29,11 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     id: string;
+    collapsible: boolean;
     defaultSize: number;
     minSize: number;
     maxSize: number;
+    collapsedSize: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/resizable/ResizablePanel.vue.d.ts

@@ -1,10 +1,7 @@
 /**
- * A single pane within a `SkdxResizablePanelGroup`. Renders
- * `<div data-skdx-resizable-panel>` with `data-orientation` inherited from the
- * group and `flex-basis` set to its current size percentage (`flex-grow: 0`,
- * `flex-shrink: 0`, `overflow: hidden`). Registers its `defaultSize` /
- * `minSize` / `maxSize` with the group once, on mount. Must be used inside
- * `SkdxResizablePanelGroup`.
+ * Pane within SkdxResizablePanelGroup. Registers size/min/max on mount, renders
+ * resolved id. minSize/maxSize default 10/90 (not 0/100). Collapsible panels snap
+ * at collapsedSize, reopen at minSize.
  */
 type __VLS_Props = {
     /** Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels. */
@@ -13,6 +10,16 @@ type __VLS_Props = {
     minSize?: number;
     /** Maximum size as a percentage (0-100); an adjacent handle won't grow this panel past it. */
     maxSize?: number;
+    /**
+     * Lets this panel close entirely: a resize below `minSize` snaps it to `collapsedSize`, reopening at `minSize` on any resize away.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` and the group emits `collapse`/`expand` crossing it.
+     * @default 0
+     */
+    collapsedSize?: number;
     /** Stable identifier used to track this panel's size across renders. Auto-generated if omitted. */
     id?: string;
 };
@@ -22,9 +29,11 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     id: string;
+    collapsible: boolean;
     defaultSize: number;
     minSize: number;
     maxSize: number;
+    collapsedSize: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/resizable/ResizablePanel.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const r=require("./context.cjs");let e=require("vue");var u=["data-orientation"],c=(0,e.defineComponent)({__name:"ResizablePanel",props:{defaultSize:{default:void 0},minSize:{default:10},maxSize:{default:90},id:{default:void 0}},setup(d){const t=d,n=(0,e.inject)(r.RESIZABLE_CONTEXT);if(!n)throw new Error("SkdxResizablePanel must be used within SkdxResizablePanelGroup.");const a=n,l=t.id??r.nextResizablePanelId();(0,e.onMounted)(()=>{a.registerPanel(l,{defaultSize:t.defaultSize,minSize:t.minSize,maxSize:t.maxSize})});const o=(0,e.computed)(()=>{const i=a.order.value.indexOf(l);return i>=0?a.sizes.value[i]??0:t.defaultSize??0}),s=(0,e.computed)(()=>({flexBasis:`${o.value}%`,flexGrow:0,flexShrink:0,overflow:"hidden"}));return(i,z)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-resizable__panel","data-part":"panel","data-skdx-resizable-panel":"","data-orientation":(0,e.unref)(a).direction,style:(0,e.normalizeStyle)(s.value)},[(0,e.renderSlot)(i.$slots,"default")],12,u))}});exports.default=c;
+const o=require("./context.cjs");let l=require("vue");var p=["id","data-orientation","data-collapsed"],z=(0,l.defineComponent)({__name:"ResizablePanel",props:{defaultSize:{default:void 0},minSize:{default:10},maxSize:{default:90},collapsible:{type:Boolean,default:!1},collapsedSize:{default:0},id:{default:void 0}},setup(r){const e=r,d=(0,l.inject)(o.RESIZABLE_CONTEXT);if(!d)throw new Error("SkdxResizablePanel must be used within SkdxResizablePanelGroup.");const i=d,t=e.id??o.nextResizablePanelId();(0,l.onMounted)(()=>{i.registerPanel(t,{defaultSize:e.defaultSize,minSize:e.minSize,maxSize:e.maxSize,collapsible:e.collapsible,collapsedSize:e.collapsedSize})}),(0,l.onUnmounted)(()=>i.unregisterPanel(t));const s=(0,l.computed)(()=>{const a=i.order.value.indexOf(t);return a>=0?i.sizes.value[a]:void 0}),u=(0,l.computed)(()=>o.isPanelCollapsed({minSize:e.minSize,maxSize:e.maxSize,collapsible:e.collapsible,collapsedSize:e.collapsedSize},s.value)),c=(0,l.computed)(()=>{const a=s.value,n=a===void 0;return{flexBasis:n?e.defaultSize===void 0?"0%":`${e.defaultSize}%`:`${a}%`,flexGrow:n&&e.defaultSize===void 0?1:0,flexShrink:0,overflow:"hidden"}});return(a,n)=>((0,l.openBlock)(),(0,l.createElementBlock)("div",{class:"skdx-resizable__panel","data-part":"panel","data-skdx-resizable-panel":"",id:(0,l.unref)(t),"data-orientation":(0,l.unref)(i).orientation,"data-collapsed":u.value?"":void 0,style:(0,l.normalizeStyle)(c.value)},[(0,l.renderSlot)(a.$slots,"default")],12,p))}});exports.default=z;

package/dist/resizable/ResizablePanel.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{RESIZABLE_CONTEXT as e,nextResizablePanelId as a}from"./context.js";import{computed as t,createElementBlock as i,defineComponent as l,inject as n,normalizeStyle as s,onMounted as o,openBlock as d,renderSlot as r,unref as u}from"vue";var f=["data-orientation"],z=/* @__PURE__ */l({__name:"ResizablePanel",props:{defaultSize:{default:void 0},minSize:{default:10},maxSize:{default:90},id:{default:void 0}},setup(l){const z=l,m=n(e);if(!m)throw new Error("SkdxResizablePanel must be used within SkdxResizablePanelGroup.");const S=m,p=z.id??a();o(()=>{S.registerPanel(p,{defaultSize:z.defaultSize,minSize:z.minSize,maxSize:z.maxSize})});const x=t(()=>{const e=S.order.value.indexOf(p);return e>=0?S.sizes.value[e]??0:z.defaultSize??0}),c=t(()=>({flexBasis:`${x.value}%`,flexGrow:0,flexShrink:0,overflow:"hidden"}));return(e,a)=>(d(),i("div",{class:"skdx-resizable__panel","data-part":"panel","data-skdx-resizable-panel":"","data-orientation":u(S).direction,style:s(c.value)},[r(e.$slots,"default")],12,f))}});export{z as default};
+import{RESIZABLE_CONTEXT as e,isPanelCollapsed as a,nextResizablePanelId as l}from"./context.js";import{computed as i,createElementBlock as o,defineComponent as t,inject as s,normalizeStyle as d,onMounted as n,onUnmounted as r,openBlock as u,renderSlot as z,unref as p}from"vue";var S=["id","data-orientation","data-collapsed"],c=/* @__PURE__ */t({__name:"ResizablePanel",props:{defaultSize:{default:void 0},minSize:{default:10},maxSize:{default:90},collapsible:{type:Boolean,default:!1},collapsedSize:{default:0},id:{default:void 0}},setup(t){const c=t,f=s(e);if(!f)throw new Error("SkdxResizablePanel must be used within SkdxResizablePanelGroup.");const m=f,v=c.id??l();n(()=>{m.registerPanel(v,{defaultSize:c.defaultSize,minSize:c.minSize,maxSize:c.maxSize,collapsible:c.collapsible,collapsedSize:c.collapsedSize})}),r(()=>m.unregisterPanel(v));const x=i(()=>{const e=m.order.value.indexOf(v);return e>=0?m.sizes.value[e]:void 0}),b=i(()=>a({minSize:c.minSize,maxSize:c.maxSize,collapsible:c.collapsible,collapsedSize:c.collapsedSize},x.value)),k=i(()=>{const e=x.value,a=void 0===e;return{flexBasis:a?void 0===c.defaultSize?"0%":`${c.defaultSize}%`:`${e}%`,flexGrow:a&&void 0===c.defaultSize?1:0,flexShrink:0,overflow:"hidden"}});return(e,a)=>(u(),o("div",{class:"skdx-resizable__panel","data-part":"panel","data-skdx-resizable-panel":"",id:p(v),"data-orientation":p(m).orientation,"data-collapsed":b.value?"":void 0,style:d(k.value)},[z(e.$slots,"default")],12,S))}});export{c as default};

package/dist/resizable/context.cjs

@@ -1 +1 @@
-const e=require("../utils/id.cjs"),r=require("../utils/clamp.cjs");var n=Symbol("skdx-resizable-context");function a(){return e.nextId("resizable-panel")}exports.RESIZABLE_CONTEXT=n;exports.clamp=r.clamp;exports.nextResizablePanelId=a;
+const z=require("../utils/id.cjs"),i=require("../utils/clamp.cjs");var S=Symbol("skdx-resizable-context");function d(){return z.nextId("resizable-panel")}function m(e){return e.collapsible?e.collapsedSize??0:e.minSize}function c(e,a){return!e?.collapsible||a===void 0?!1:a<=(e.collapsedSize??0)}function s(e,a,l){if(!e.collapsible)return i.clamp(l,e.minSize,e.maxSize);const n=e.collapsedSize??0;return a<=n?l>n?i.clamp(l,e.minSize,e.maxSize):n:l<e.minSize?n:i.clamp(l,e.minSize,e.maxSize)}function x(e,a,l,n,u){const t=l+n,r=l+u;if(a.collapsible){const p=s(a,n,t-r);if(c(a,p))return t-p}const o=s(e,l,r);return c(e,o)?o:t-s(a,n,t-o)}function b(e){const a=e.reduce((t,r)=>t+(r?.defaultSize??0),0),l=e.filter(t=>t?.defaultSize==null).length,n=Math.max(0,100-a),u=l>0?n/l:0;return e.map(t=>t?.defaultSize??u)}exports.RESIZABLE_CONTEXT=S;exports.clamp=i.clamp;exports.isPanelCollapsed=c;exports.nextResizablePanelId=d;exports.panelLowerBound=m;exports.resolvePairSize=x;exports.resolvePanelSize=s;exports.seedSizes=b;

package/dist/resizable/context.d.cts

@@ -1,23 +1,72 @@
 import type { InjectionKey, Ref } from 'vue';
-export { clamp } from '../utils/clamp.cjs';
+import { clamp } from '../utils/clamp.cjs';
+export { clamp };
 /** @internal Per-panel size constraints registered with SkdxResizablePanelGroup. */
 export interface PanelConfig {
     defaultSize?: number;
     minSize: number;
     maxSize: number;
+    collapsible?: boolean;
+    collapsedSize?: number;
 }
 /** @internal Injection key a ResizablePanelGroup provides so its parts can read/drive shared state. */
 export interface ResizableContext {
-    direction: 'horizontal' | 'vertical';
+    orientation: 'horizontal' | 'vertical';
     groupRef: Ref<HTMLElement | null>;
     order: Ref<string[]>;
     sizes: Ref<number[]>;
     registerPanel(id: string, config: PanelConfig): void;
+    /** Unregister an unmounted panel; re-seed survivors so indices stay valid. */
+    unregisterPanel(id: string): void;
     registerHandle(): number;
+    /** Handle's index from DOM position, falls back to registration counter. */
+    resolveHandleIndex(handle: Element, fallback: number): number;
     resizePanels(handleIndex: number, deltaPercent: number): void;
+    commitLayout(): void;
     getPanelConfig(index: number): PanelConfig | undefined;
+    /** Arrow key step in percentage points; Handle's `step` prop overrides. */
+    readonly step: number;
+    /** Current sizes as percentages, Panel order. */
+    getSizes(): number[];
+    /** Set layout to sizes (percentages, Panel order), clamped and renormalized. */
+    setSizes(sizes: number[]): void;
+    /** Reset each panel to its defaultSize or even split. */
+    resetSizes(): void;
 }
+/**
+ * Default panel min size. Not 0: dragging a panel to nothing loses it.
+ * Only `collapsible` panels can go lower via `collapsedSize`.
+ */
+export declare const DEFAULT_PANEL_MIN_SIZE = 10;
+/** @see {@link DEFAULT_PANEL_MIN_SIZE} */
+export declare const DEFAULT_PANEL_MAX_SIZE = 90;
 /** @internal Injection key a ResizablePanelGroup provides so its panels and handles share sizes, order, and registration. */
 export declare const RESIZABLE_CONTEXT: InjectionKey<ResizableContext>;
 /** @internal Generates a unique, stable-per-instance id for a ResizablePanel that omits its own id prop. */
 export declare function nextResizablePanelId(): string;
+/**
+ * @internal Lowest size a panel can reach: `collapsedSize` if collapsible, else `minSize`.
+ */
+export declare function panelLowerBound(config: PanelConfig): number;
+/**
+ * @internal Whether size counts as collapsed for config: collapsible panels
+ * at or below collapsedSize. Governs data-collapsed and collapse/expand events.
+ */
+export declare function isPanelCollapsed(config: PanelConfig | undefined, size: number | undefined): boolean;
+/**
+ * @internal Resolve a panel's size when a resize requests `requested`.
+ * Non-collapsible: clamp to [minSize, maxSize]. Collapsible: snap to collapsed
+ * or expand to [minSize, maxSize]. Reopening from collapse on any non-collapsed
+ * request makes collapse keyboard-operable (Arrow moves only `step` percentage points).
+ */
+export declare function resolvePanelSize(config: PanelConfig, current: number, requested: number): number;
+/**
+ * @internal Start panel's next size when handle moves by delta. Total is invariant.
+ * Collapse bypasses the neighbor's maxSize: space has to go somewhere. Neighbor absorbs
+ * space from the collapsed panel, even over its maxSize.
+ */
+export declare function resolvePairSize(leftConfig: PanelConfig, rightConfig: PanelConfig, leftSize: number, rightSize: number, delta: number): number;
+/**
+ * @internal Fresh-mount layout: panels with defaultSize get it; others split remainder evenly.
+ */
+export declare function seedSizes(configs: ReadonlyArray<PanelConfig | undefined>): number[];

package/dist/resizable/context.d.ts

@@ -1,23 +1,72 @@
 import type { InjectionKey, Ref } from 'vue';
-export { clamp } from '../utils/clamp.js';
+import { clamp } from '../utils/clamp.js';
+export { clamp };
 /** @internal Per-panel size constraints registered with SkdxResizablePanelGroup. */
 export interface PanelConfig {
     defaultSize?: number;
     minSize: number;
     maxSize: number;
+    collapsible?: boolean;
+    collapsedSize?: number;
 }
 /** @internal Injection key a ResizablePanelGroup provides so its parts can read/drive shared state. */
 export interface ResizableContext {
-    direction: 'horizontal' | 'vertical';
+    orientation: 'horizontal' | 'vertical';
     groupRef: Ref<HTMLElement | null>;
     order: Ref<string[]>;
     sizes: Ref<number[]>;
     registerPanel(id: string, config: PanelConfig): void;
+    /** Unregister an unmounted panel; re-seed survivors so indices stay valid. */
+    unregisterPanel(id: string): void;
     registerHandle(): number;
+    /** Handle's index from DOM position, falls back to registration counter. */
+    resolveHandleIndex(handle: Element, fallback: number): number;
     resizePanels(handleIndex: number, deltaPercent: number): void;
+    commitLayout(): void;
     getPanelConfig(index: number): PanelConfig | undefined;
+    /** Arrow key step in percentage points; Handle's `step` prop overrides. */
+    readonly step: number;
+    /** Current sizes as percentages, Panel order. */
+    getSizes(): number[];
+    /** Set layout to sizes (percentages, Panel order), clamped and renormalized. */
+    setSizes(sizes: number[]): void;
+    /** Reset each panel to its defaultSize or even split. */
+    resetSizes(): void;
 }
+/**
+ * Default panel min size. Not 0: dragging a panel to nothing loses it.
+ * Only `collapsible` panels can go lower via `collapsedSize`.
+ */
+export declare const DEFAULT_PANEL_MIN_SIZE = 10;
+/** @see {@link DEFAULT_PANEL_MIN_SIZE} */
+export declare const DEFAULT_PANEL_MAX_SIZE = 90;
 /** @internal Injection key a ResizablePanelGroup provides so its panels and handles share sizes, order, and registration. */
 export declare const RESIZABLE_CONTEXT: InjectionKey<ResizableContext>;
 /** @internal Generates a unique, stable-per-instance id for a ResizablePanel that omits its own id prop. */
 export declare function nextResizablePanelId(): string;
+/**
+ * @internal Lowest size a panel can reach: `collapsedSize` if collapsible, else `minSize`.
+ */
+export declare function panelLowerBound(config: PanelConfig): number;
+/**
+ * @internal Whether size counts as collapsed for config: collapsible panels
+ * at or below collapsedSize. Governs data-collapsed and collapse/expand events.
+ */
+export declare function isPanelCollapsed(config: PanelConfig | undefined, size: number | undefined): boolean;
+/**
+ * @internal Resolve a panel's size when a resize requests `requested`.
+ * Non-collapsible: clamp to [minSize, maxSize]. Collapsible: snap to collapsed
+ * or expand to [minSize, maxSize]. Reopening from collapse on any non-collapsed
+ * request makes collapse keyboard-operable (Arrow moves only `step` percentage points).
+ */
+export declare function resolvePanelSize(config: PanelConfig, current: number, requested: number): number;
+/**
+ * @internal Start panel's next size when handle moves by delta. Total is invariant.
+ * Collapse bypasses the neighbor's maxSize: space has to go somewhere. Neighbor absorbs
+ * space from the collapsed panel, even over its maxSize.
+ */
+export declare function resolvePairSize(leftConfig: PanelConfig, rightConfig: PanelConfig, leftSize: number, rightSize: number, delta: number): number;
+/**
+ * @internal Fresh-mount layout: panels with defaultSize get it; others split remainder evenly.
+ */
+export declare function seedSizes(configs: ReadonlyArray<PanelConfig | undefined>): number[];

package/dist/resizable/context.js

@@ -1 +1 @@
-import{nextId as a}from"../utils/id.js";import{clamp as e}from"../utils/clamp.js";var s=/* @__PURE__ */Symbol("skdx-resizable-context");function l(){return a("resizable-panel")}export{s as RESIZABLE_CONTEXT,e as clamp,l as nextResizablePanelId};
+import{nextId as e}from"../utils/id.js";import{clamp as i}from"../utils/clamp.js";var l=/* @__PURE__ */Symbol("skdx-resizable-context");function n(){return e("resizable-panel")}function a(e){return e.collapsible?e.collapsedSize??0:e.minSize}function s(e,i){return!(!e?.collapsible||void 0===i)&&i<=(e.collapsedSize??0)}function t(e,l,n){if(!e.collapsible)return i(n,e.minSize,e.maxSize);const a=e.collapsedSize??0;return l<=a?n>a?i(n,e.minSize,e.maxSize):a:n<e.minSize?a:i(n,e.minSize,e.maxSize)}function o(e,i,l,n,a){const o=l+n,r=l+a;if(i.collapsible){const e=t(i,n,o-r);if(s(i,e))return o-e}const c=t(e,l,r);return s(e,c)?c:o-t(i,n,o-c)}function r(e){const i=e.reduce((e,i)=>e+(i?.defaultSize??0),0),l=e.filter(e=>null==e?.defaultSize).length,n=Math.max(0,100-i),a=l>0?n/l:0;return e.map(e=>e?.defaultSize??a)}export{l as RESIZABLE_CONTEXT,i as clamp,s as isPanelCollapsed,n as nextResizablePanelId,a as panelLowerBound,o as resolvePairSize,t as resolvePanelSize,r as seedSizes};

package/dist/resizable/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Resizable.vue.cjs"),l=require("./ResizablePanel.vue.cjs"),a=require("./ResizableHandle.vue.cjs");exports.SkdxResizableHandle=a.default;exports.SkdxResizablePanel=l.default;exports.SkdxResizablePanelGroup=e.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ResizablePanel.vue.cjs"),l=require("./Resizable.vue.cjs");exports.SkdxResizablePanel=e.default;exports.SkdxResizablePanelGroup=l.default;

package/dist/resizable/index.d.cts

@@ -1,3 +1,3 @@
 export { default as SkdxResizablePanelGroup } from './Resizable.vue.cjs';
 export { default as SkdxResizablePanel } from './ResizablePanel.vue.cjs';
-export { default as SkdxResizableHandle } from './ResizableHandle.vue.cjs';
+export type { ResizablePanelConfig } from './types.cjs';

package/dist/resizable/index.d.ts

@@ -1,3 +1,3 @@
 export { default as SkdxResizablePanelGroup } from './Resizable.vue.js';
 export { default as SkdxResizablePanel } from './ResizablePanel.vue.js';
-export { default as SkdxResizableHandle } from './ResizableHandle.vue.js';
+export type { ResizablePanelConfig } from './types.js';

package/dist/resizable/index.js

@@ -1 +1 @@
-import e from"./Resizable.vue.js";import a from"./ResizablePanel.vue.js";import s from"./ResizableHandle.vue.js";export{s as SkdxResizableHandle,a as SkdxResizablePanel,e as SkdxResizablePanelGroup};
+import e from"./ResizablePanel.vue.js";import a from"./Resizable.vue.js";export{e as SkdxResizablePanel,a as SkdxResizablePanelGroup};

package/dist/resizable/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ResizableHandle.vue.cjs"),l=require("./Resizable.vue.cjs");exports.SkdxResizable=l.default;exports.SkdxResizableHandle=e.default;

package/dist/resizable/primitives.d.cts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `SkdxResizablePanelGroup` — the Handle the recipe
+ * composes. Panel stays in the main barrel since consumers place content in
+ * it. Only Handle is here.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxResizablePanelGroup, SkdxResizablePanel } from '@skdx/vue';
+ * import { SkdxResizableHandle } from '@skdx/vue/primitives/resizable';
+ * </script>
+ *
+ * <template>
+ *   <SkdxResizablePanelGroup>
+ *     <SkdxResizablePanel default-size="30">Sidebar</SkdxResizablePanel>
+ *     <SkdxResizableHandle aria-label="Resize sidebar" />
+ *     <SkdxResizablePanel>Editor</SkdxResizablePanel>
+ *   </SkdxResizablePanelGroup>
+ * </template>
+ * ```
+ */
+export { default as SkdxResizable } from './Resizable.vue.cjs';
+export { default as SkdxResizableHandle } from './ResizableHandle.vue.cjs';

package/dist/resizable/primitives.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `SkdxResizablePanelGroup` — the Handle the recipe
+ * composes. Panel stays in the main barrel since consumers place content in
+ * it. Only Handle is here.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxResizablePanelGroup, SkdxResizablePanel } from '@skdx/vue';
+ * import { SkdxResizableHandle } from '@skdx/vue/primitives/resizable';
+ * </script>
+ *
+ * <template>
+ *   <SkdxResizablePanelGroup>
+ *     <SkdxResizablePanel default-size="30">Sidebar</SkdxResizablePanel>
+ *     <SkdxResizableHandle aria-label="Resize sidebar" />
+ *     <SkdxResizablePanel>Editor</SkdxResizablePanel>
+ *   </SkdxResizablePanelGroup>
+ * </template>
+ * ```
+ */
+export { default as SkdxResizable } from './Resizable.vue.js';
+export { default as SkdxResizableHandle } from './ResizableHandle.vue.js';

package/dist/resizable/primitives.js

@@ -0,0 +1 @@
+import e from"./ResizableHandle.vue.js";import a from"./Resizable.vue.js";export{a as SkdxResizable,e as SkdxResizableHandle};

package/dist/resizable/types.d.cts

@@ -0,0 +1,21 @@
+/** One panel in a `SkdxResizablePanelGroup`'s `panels` array — its size constraints and body together. */
+export interface ResizablePanelConfig {
+    /** Stable identifier tracked across renders. @default undefined — auto-generated. */
+    id?: string;
+    /** Initial size as a percentage of the group's main axis (0-100). @default undefined — split evenly with other auto-sized panels. */
+    defaultSize?: number;
+    /** Minimum size as a percentage of the group's main axis (0-100). @default 10 */
+    minSize?: number;
+    /** Maximum size as a percentage of the group's main axis (0-100). @default 90 */
+    maxSize?: number;
+    /** Lets this panel close entirely below minSize. @default false */
+    collapsible?: boolean;
+    /** Size, as a percentage, a collapsible panel takes while closed. @default 0 */
+    collapsedSize?: number;
+    /**
+     * The panel's body. Override with the `panel` scoped slot for markup a
+     * string can't express.
+     * @default undefined — the derived panel renders empty.
+     */
+    content?: string;
+}

package/dist/resizable/types.d.ts

@@ -0,0 +1,21 @@
+/** One panel in a `SkdxResizablePanelGroup`'s `panels` array — its size constraints and body together. */
+export interface ResizablePanelConfig {
+    /** Stable identifier tracked across renders. @default undefined — auto-generated. */
+    id?: string;
+    /** Initial size as a percentage of the group's main axis (0-100). @default undefined — split evenly with other auto-sized panels. */
+    defaultSize?: number;
+    /** Minimum size as a percentage of the group's main axis (0-100). @default 10 */
+    minSize?: number;
+    /** Maximum size as a percentage of the group's main axis (0-100). @default 90 */
+    maxSize?: number;
+    /** Lets this panel close entirely below minSize. @default false */
+    collapsible?: boolean;
+    /** Size, as a percentage, a collapsible panel takes while closed. @default 0 */
+    collapsedSize?: number;
+    /**
+     * The panel's body. Override with the `panel` scoped slot for markup a
+     * string can't express.
+     * @default undefined — the derived panel renders empty.
+     */
+    content?: string;
+}

package/dist/scroll-area/ScrollArea.vue.d.cts

@@ -1,28 +1,43 @@
-import { type ScrollAreaType } from './context.cjs';
+import type { ScrollAreaScrollbars, ScrollAreaScrollPosition, ScrollAreaScrollToOptions, ScrollAreaType } from './context.cjs';
 /**
- * Wraps a natively-scrollable viewport and exposes a custom, headless
- * scrollbar thumb kept in sync with it. Real scrolling always happens on the
- * viewport (`overflow: auto`); the scrollbar is a synced visual affordance,
- * same split as Radix's ScrollArea. Renders a `<div data-skdx-scroll-area>`
- * with `position: relative`, and tracks pointer enter/leave to drive the
- * `'hover'`/`'scroll'` visibility of child scrollbars. With `type="scroll"`
- * the scrollbar lingers for `scrollHideDelay` ms after scrolling stops.
+ * Wraps SkdxScrollAreaRoot and draws derived anatomy: Viewport, Scrollbar(s), Corner.
+ * Always projects children into Viewport. Manual composition uses SkdxScrollAreaRoot directly.
+ *
+ * ```vue
+ * <SkdxScrollArea aria-label="Release notes" style="block-size: 200px" scrollbars="vertical">
+ *   <LongArticle />
+ * </SkdxScrollArea>
+ * ```
  */
 type __VLS_Props = {
-    /** Mirrors the CSS overflow keywords; drives visibility of child scrollbars. */
+    /** Mirrors CSS overflow; drives Scrollbar visibility. */
     type?: ScrollAreaType;
     /**
-     * How long, in milliseconds, the scrollbar stays visible after scrolling
-     * stops when `type="scroll"`. Only `'scroll'` reads it.
+     * Duration (ms) scrollbar stays visible after scrolling; only used when type="scroll".
      */
     scrollHideDelay?: number;
+    /**
+     * Which axes render a derived Scrollbar.
+     * @default 'both'
+     */
+    scrollbars?: ScrollAreaScrollbars;
 };
-declare var __VLS_1: {};
+/** Scrolls the viewport. */
+declare function scrollTo(options: ScrollAreaScrollToOptions): void;
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Scrolls the viewport to `{ top, left }`, optionally smoothly. */
+    scrollTo: typeof scrollTo;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "scroll-position-change": (position: ScrollAreaScrollPosition) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onScroll-position-change"?: ((position: ScrollAreaScrollPosition) => any) | undefined;
+}>, {
     type: ScrollAreaType;
+    scrollbars: ScrollAreaScrollbars;
     scrollHideDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/scroll-area/ScrollArea.vue.d.ts

@@ -1,28 +1,43 @@
-import { type ScrollAreaType } from './context.js';
+import type { ScrollAreaScrollbars, ScrollAreaScrollPosition, ScrollAreaScrollToOptions, ScrollAreaType } from './context.js';
 /**
- * Wraps a natively-scrollable viewport and exposes a custom, headless
- * scrollbar thumb kept in sync with it. Real scrolling always happens on the
- * viewport (`overflow: auto`); the scrollbar is a synced visual affordance,
- * same split as Radix's ScrollArea. Renders a `<div data-skdx-scroll-area>`
- * with `position: relative`, and tracks pointer enter/leave to drive the
- * `'hover'`/`'scroll'` visibility of child scrollbars. With `type="scroll"`
- * the scrollbar lingers for `scrollHideDelay` ms after scrolling stops.
+ * Wraps SkdxScrollAreaRoot and draws derived anatomy: Viewport, Scrollbar(s), Corner.
+ * Always projects children into Viewport. Manual composition uses SkdxScrollAreaRoot directly.
+ *
+ * ```vue
+ * <SkdxScrollArea aria-label="Release notes" style="block-size: 200px" scrollbars="vertical">
+ *   <LongArticle />
+ * </SkdxScrollArea>
+ * ```
  */
 type __VLS_Props = {
-    /** Mirrors the CSS overflow keywords; drives visibility of child scrollbars. */
+    /** Mirrors CSS overflow; drives Scrollbar visibility. */
     type?: ScrollAreaType;
     /**
-     * How long, in milliseconds, the scrollbar stays visible after scrolling
-     * stops when `type="scroll"`. Only `'scroll'` reads it.
+     * Duration (ms) scrollbar stays visible after scrolling; only used when type="scroll".
      */
     scrollHideDelay?: number;
+    /**
+     * Which axes render a derived Scrollbar.
+     * @default 'both'
+     */
+    scrollbars?: ScrollAreaScrollbars;
 };
-declare var __VLS_1: {};
+/** Scrolls the viewport. */
+declare function scrollTo(options: ScrollAreaScrollToOptions): void;
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Scrolls the viewport to `{ top, left }`, optionally smoothly. */
+    scrollTo: typeof scrollTo;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "scroll-position-change": (position: ScrollAreaScrollPosition) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onScroll-position-change"?: ((position: ScrollAreaScrollPosition) => any) | undefined;
+}>, {
     type: ScrollAreaType;
+    scrollbars: ScrollAreaScrollbars;
     scrollHideDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/scroll-area/ScrollArea.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const f=require("./context.cjs");let e=require("vue");var i=(0,e.defineComponent)({__name:"ScrollArea",props:{type:{default:"hover"},scrollHideDelay:{default:600}},setup(o){const t=o,a=(0,e.ref)(null),n=(0,e.ref)(null),s=(0,e.ref)(!1),c=(0,e.ref)(!1),r=(0,e.ref)(!1),u=(0,e.ref)(!1);return(0,e.provide)(f.SCROLL_AREA_CONTEXT,{type:(0,e.computed)(()=>t.type),viewportRef:a,contentRef:n,scrollbarXEnabled:s,scrollbarYEnabled:c,hovering:r,scrolling:u,scrollHideDelay:(0,e.computed)(()=>t.scrollHideDelay)}),(d,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-scroll-area","data-part":"root","data-skdx-component":"scroll-area","data-skdx-scroll-area":"",style:{position:"relative"},onPointerenter:l[0]||(l[0]=p=>r.value=!0),onPointerleave:l[1]||(l[1]=p=>r.value=!1)},[(0,e.renderSlot)(d.$slots,"default")],32))}});exports.default=i;
+const y=require("./ScrollAreaAnatomy.vue.cjs"),p=require("./ScrollAreaRoot.vue.cjs");let e=require("vue");var _=(0,e.defineComponent)({inheritAttrs:!1,__name:"ScrollArea",props:{type:{default:"hover"},scrollHideDelay:{default:600},scrollbars:{default:"both"}},emits:["scroll-position-change"],setup(r,{expose:i,emit:c}){const u=c,a=(0,e.useAttrs)(),n=(0,e.computed)(()=>a["aria-label"]),d=(0,e.computed)(()=>a["aria-labelledby"]),b=(0,e.computed)(()=>{const{"aria-label":l,"aria-labelledby":t,...o}=a;return o}),s=(0,e.ref)(null);function f(l){s.value?.scrollTo(l)}return i({scrollTo:f}),(l,t)=>((0,e.openBlock)(),(0,e.createBlock)(p.default,(0,e.mergeProps)({ref_key:"rootRef",ref:s,type:r.type,"scroll-hide-delay":r.scrollHideDelay},b.value,{onScrollPositionChange:t[0]||(t[0]=o=>u("scroll-position-change",o))}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)(y.default,{scrollbars:r.scrollbars,"aria-label":n.value,"aria-labelledby":d.value},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(l.$slots,"default")]),_:3},8,["scrollbars","aria-label","aria-labelledby"])]),_:3},16,["type","scroll-hide-delay"]))}});exports.default=_;

package/dist/scroll-area/ScrollArea.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{SCROLL_AREA_CONTEXT as e}from"./context.js";import{computed as l,createElementBlock as a,defineComponent as o,openBlock as r,provide as t,ref as s,renderSlot as n}from"vue";var d=/* @__PURE__ */o({__name:"ScrollArea",props:{type:{default:"hover"},scrollHideDelay:{default:600}},setup(o){const d=o,c=s(null),p=s(null),i=s(!1),u=s(!1),v=s(!1),f=s(!1);return t(e,{type:l(()=>d.type),viewportRef:c,contentRef:p,scrollbarXEnabled:i,scrollbarYEnabled:u,hovering:v,scrolling:f,scrollHideDelay:l(()=>d.scrollHideDelay)}),(e,l)=>(r(),a("div",{class:"skdx-scroll-area","data-part":"root","data-skdx-component":"scroll-area","data-skdx-scroll-area":"",style:{position:"relative"},onPointerenter:l[0]||(l[0]=e=>v.value=!0),onPointerleave:l[1]||(l[1]=e=>v.value=!1)},[n(e.$slots,"default")],32))}});export{d as default};
+import e from"./ScrollAreaAnatomy.vue.js";import l from"./ScrollAreaRoot.vue.js";import{computed as a,createBlock as r,createVNode as o,defineComponent as s,mergeProps as t,openBlock as i,ref as c,renderSlot as n,useAttrs as d,withCtx as u}from"vue";var p=/* @__PURE__ */s({inheritAttrs:!1,__name:"ScrollArea",props:{type:{default:"hover"},scrollHideDelay:{default:600},scrollbars:{default:"both"}},emits:["scroll-position-change"],setup(s,{expose:p,emit:b}){const f=b,y=d(),m=a(()=>y["aria-label"]),h=a(()=>y["aria-labelledby"]),v=a(()=>{const{"aria-label":e,"aria-labelledby":l,...a}=y;return a}),A=c(null);return p({scrollTo:function(e){A.value?.scrollTo(e)}}),(a,c)=>(i(),r(l,t({ref_key:"rootRef",ref:A,type:s.type,"scroll-hide-delay":s.scrollHideDelay},v.value,{onScrollPositionChange:c[0]||(c[0]=e=>f("scroll-position-change",e))}),{default:u(()=>[o(e,{scrollbars:s.scrollbars,"aria-label":m.value,"aria-labelledby":h.value},{default:u(()=>[n(a.$slots,"default")]),_:3},8,["scrollbars","aria-label","aria-labelledby"])]),_:3},16,["type","scroll-hide-delay"]))}});export{p as default};

package/dist/scroll-area/ScrollAreaAnatomy.vue.cjs

@@ -0,0 +1 @@
+const e=require("./ScrollAreaAnatomy.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

package/dist/scroll-area/ScrollAreaAnatomy.vue.d.cts

@@ -0,0 +1,28 @@
+import type { ScrollAreaScrollbars } from './context.cjs';
+/**
+ * The anatomy a `SkdxScrollArea` draws: Viewport holding scrollable content,
+ * Scrollbars per axis, and a Corner where both meet. Default slot is projected into Viewport.
+ * Not exported from the package — must stay in step with React `ScrollAreaAnatomy.tsx`.
+ * @internal
+ */
+type __VLS_Props = {
+    scrollbars?: ScrollAreaScrollbars;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+};
+declare var __VLS_4: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_4) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ariaLabel: string;
+    ariaLabelledby: string;
+    scrollbars: ScrollAreaScrollbars;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};