@skdx/vue 0.26.0 → 0.28.0

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

@@ -0,0 +1,28 @@
+import type { ScrollAreaScrollbars } from './context.js';
+/**
+ * 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;
+    };
+};

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

@@ -0,0 +1 @@
+import e from"./ScrollAreaAnatomy.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

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

@@ -0,0 +1 @@
+const o=require("./ScrollAreaCorner.vue.cjs"),l=require("./ScrollAreaScrollbar.vue.cjs"),a=require("./ScrollAreaThumb.vue.cjs"),c=require("./ScrollAreaViewport.vue.cjs");let e=require("vue");var u=(0,e.defineComponent)({__name:"ScrollAreaAnatomy",props:{scrollbars:{default:"both"},ariaLabel:{default:void 0},ariaLabelledby:{default:void 0}},setup(r){return(t,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(c.default,{"aria-label":r.ariaLabel,"aria-labelledby":r.ariaLabelledby},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"default")]),_:3},8,["aria-label","aria-labelledby"]),r.scrollbars==="vertical"||r.scrollbars==="both"?((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:0,orientation:"vertical"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(a.default)]),_:1})):(0,e.createCommentVNode)("",!0),r.scrollbars==="horizontal"||r.scrollbars==="both"?((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:1,orientation:"horizontal"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(a.default)]),_:1})):(0,e.createCommentVNode)("",!0),r.scrollbars==="both"?((0,e.openBlock)(),(0,e.createBlock)(o.default,{key:2})):(0,e.createCommentVNode)("",!0)],64))}});exports.default=u;

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

@@ -0,0 +1 @@
+import a from"./ScrollAreaCorner.vue.js";import e from"./ScrollAreaScrollbar.vue.js";import r from"./ScrollAreaThumb.vue.js";import l from"./ScrollAreaViewport.vue.js";import{Fragment as o,createBlock as t,createCommentVNode as s,createElementBlock as i,createVNode as b,defineComponent as c,openBlock as d,renderSlot as m,withCtx as n}from"vue";var u=/* @__PURE__ */c({__name:"ScrollAreaAnatomy",props:{scrollbars:{default:"both"},ariaLabel:{default:void 0},ariaLabelledby:{default:void 0}},setup:c=>(u,f)=>(d(),i(o,null,[b(l,{"aria-label":c.ariaLabel,"aria-labelledby":c.ariaLabelledby},{default:n(()=>[m(u.$slots,"default")]),_:3},8,["aria-label","aria-labelledby"]),"vertical"===c.scrollbars||"both"===c.scrollbars?(d(),t(e,{key:0,orientation:"vertical"},{default:n(()=>[b(r)]),_:1})):s("",!0),"horizontal"===c.scrollbars||"both"===c.scrollbars?(d(),t(e,{key:1,orientation:"horizontal"},{default:n(()=>[b(r)]),_:1})):s("",!0),"both"===c.scrollbars?(d(),t(a,{key:2})):s("",!0)],64))});export{u as default};

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

@@ -1,10 +1,7 @@
 /**
- * The small square filling the gap where a vertical and horizontal
- * `SkdxScrollAreaScrollbar` meet. Renders `<div data-skdx-scroll-area-corner>`,
- * or nothing when both scrollbars aren't simultaneously enabled — unless
- * `forceMount` is set, which is what an always-visible scrollbar pair
- * (`force-mount` on both `SkdxScrollAreaScrollbar`s) needs to avoid an unfilled
- * notch where the two bars meet. Must be used inside `SkdxScrollArea`.
+ * Corner square filling the gap where scrollbars meet. Renders when both
+ * scrollbars are enabled, or when `forceMount` is true. Must be used inside
+ * `SkdxScrollArea`.
  */
 type __VLS_Props = {
     /** Renders the corner even when the two scrollbars are not both enabled by overflow. */

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

@@ -1,10 +1,7 @@
 /**
- * The small square filling the gap where a vertical and horizontal
- * `SkdxScrollAreaScrollbar` meet. Renders `<div data-skdx-scroll-area-corner>`,
- * or nothing when both scrollbars aren't simultaneously enabled — unless
- * `forceMount` is set, which is what an always-visible scrollbar pair
- * (`force-mount` on both `SkdxScrollAreaScrollbar`s) needs to avoid an unfilled
- * notch where the two bars meet. Must be used inside `SkdxScrollArea`.
+ * Corner square filling the gap where scrollbars meet. Renders when both
+ * scrollbars are enabled, or when `forceMount` is true. Must be used inside
+ * `SkdxScrollArea`.
  */
 type __VLS_Props = {
     /** Renders the corner even when the two scrollbars are not both enabled by overflow. */

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

@@ -1 +1 @@
-const a=require("./context.cjs");let e=require("vue");var l={key:0,class:"skdx-scroll-area__corner","data-part":"corner","data-skdx-scroll-area-corner":""},c=(0,e.defineComponent)({__name:"ScrollAreaCorner",props:{forceMount:{type:Boolean,default:!1}},setup(t){const n=t,r=(0,e.inject)(a.SCROLL_AREA_CONTEXT);if(!r)throw new Error("SkdxScrollAreaCorner must be used within SkdxScrollArea.");const o=r;return(u,s)=>n.forceMount||(0,e.unref)(o).scrollbarXEnabled.value&&(0,e.unref)(o).scrollbarYEnabled.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",l)):(0,e.createCommentVNode)("",!0)}});exports.default=c;
+const n=require("./context.cjs");let e=require("vue");var l={key:0,class:"skdx-scroll-area__corner","data-part":"corner","data-skdx-scroll-area-corner":"","aria-hidden":"true"},c=(0,e.defineComponent)({__name:"ScrollAreaCorner",props:{forceMount:{type:Boolean,default:!1}},setup(o){const a=o,r=(0,e.inject)(n.SCROLL_AREA_CONTEXT);if(!r)throw new Error("SkdxScrollAreaCorner must be used within SkdxScrollArea.");const t=r;return(u,s)=>a.forceMount||(0,e.unref)(t).scrollbarXEnabled.value&&(0,e.unref)(t).scrollbarYEnabled.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",l)):(0,e.createCommentVNode)("",!0)}});exports.default=c;

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

@@ -1 +1 @@
-import{SCROLL_AREA_CONTEXT as e}from"./context.js";import{createCommentVNode as r,createElementBlock as o,defineComponent as a,inject as t,openBlock as l,unref as n}from"vue";var s={key:0,class:"skdx-scroll-area__corner","data-part":"corner","data-skdx-scroll-area-corner":""},c=/* @__PURE__ */a({__name:"ScrollAreaCorner",props:{forceMount:{type:Boolean,default:!1}},setup(a){const c=a,d=t(e);if(!d)throw new Error("SkdxScrollAreaCorner must be used within SkdxScrollArea.");const u=d;return(e,a)=>c.forceMount||n(u).scrollbarXEnabled.value&&n(u).scrollbarYEnabled.value?(l(),o("div",s)):r("",!0)}});export{c as default};
+import{SCROLL_AREA_CONTEXT as e}from"./context.js";import{createCommentVNode as r,createElementBlock as a,defineComponent as o,inject as t,openBlock as n,unref as l}from"vue";var s={key:0,class:"skdx-scroll-area__corner","data-part":"corner","data-skdx-scroll-area-corner":"","aria-hidden":"true"},c=/* @__PURE__ */o({__name:"ScrollAreaCorner",props:{forceMount:{type:Boolean,default:!1}},setup(o){const c=o,d=t(e);if(!d)throw new Error("SkdxScrollAreaCorner must be used within SkdxScrollArea.");const u=d;return(e,o)=>c.forceMount||l(u).scrollbarXEnabled.value&&l(u).scrollbarYEnabled.value?(n(),a("div",s)):r("",!0)}});export{c as default};

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

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

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

@@ -0,0 +1,40 @@
+import { type ScrollAreaScrollPosition, type ScrollAreaScrollToOptions, type ScrollAreaType } from './context.cjs';
+/**
+ * ScrollArea contract provider. Wraps scrollable viewport with synced visual
+ * scrollbar (like Radix). Publishes data-overflow-x/y for CSS edge effects.
+ * Emits scroll-position-change. scrollTo method. Recipe wraps with anatomy;
+ * compose manually for full control.
+ */
+type __VLS_Props = {
+    /** Mirrors the CSS overflow keywords; drives visibility of child scrollbars. */
+    type?: ScrollAreaType;
+    /**
+     * How long, in milliseconds, the scrollbar stays visible after scrolling
+     * stops when `type="scroll"`. Only `'scroll'` reads it.
+     */
+    scrollHideDelay?: number;
+};
+/** Programmatic scroll; exposed on instance and context. */
+declare function scrollTo(options: ScrollAreaScrollToOptions): void;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+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;
+    scrollHideDelay: number;
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,40 @@
+import { type ScrollAreaScrollPosition, type ScrollAreaScrollToOptions, type ScrollAreaType } from './context.js';
+/**
+ * ScrollArea contract provider. Wraps scrollable viewport with synced visual
+ * scrollbar (like Radix). Publishes data-overflow-x/y for CSS edge effects.
+ * Emits scroll-position-change. scrollTo method. Recipe wraps with anatomy;
+ * compose manually for full control.
+ */
+type __VLS_Props = {
+    /** Mirrors the CSS overflow keywords; drives visibility of child scrollbars. */
+    type?: ScrollAreaType;
+    /**
+     * How long, in milliseconds, the scrollbar stays visible after scrolling
+     * stops when `type="scroll"`. Only `'scroll'` reads it.
+     */
+    scrollHideDelay?: number;
+};
+/** Programmatic scroll; exposed on instance and context. */
+declare function scrollTo(options: ScrollAreaScrollToOptions): void;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+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;
+    scrollHideDelay: number;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/scroll-area/ScrollAreaRoot.vue.js

@@ -0,0 +1 @@
+import e from"./ScrollAreaRoot.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

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

@@ -0,0 +1 @@
+const w=require("./context.cjs");let e=require("vue");var R=["data-overflow-x","data-overflow-y"],b=(0,e.defineComponent)({__name:"ScrollAreaRoot",props:{type:{default:"hover"},scrollHideDelay:{default:600}},emits:["scroll-position-change"],setup(u,{expose:i,emit:f}){const a=u,v=f,t=(0,e.ref)(null),d=(0,e.ref)(null),p=(0,e.ref)(!1),_=(0,e.ref)(!1),r=(0,e.ref)(!1),y=(0,e.ref)(!1),n=(0,e.ref)("none"),s=(0,e.ref)("none");function m(l,o){n.value=o.x,s.value=o.y,v("scroll-position-change",l)}function c(l){t.value&&t.value.scrollTo({behavior:"auto",...l})}return(0,e.provide)(w.SCROLL_AREA_CONTEXT,{type:(0,e.computed)(()=>a.type),viewportRef:t,contentRef:d,scrollbarXEnabled:p,scrollbarYEnabled:_,hovering:r,scrolling:y,scrollHideDelay:(0,e.computed)(()=>a.scrollHideDelay),reportScrollPosition:m,scrollTo:c}),i({scrollTo:c}),(l,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-scroll-area","data-part":"root","data-skdx-component":"scroll-area","data-skdx-scroll-area":"","data-overflow-x":n.value,"data-overflow-y":s.value,style:{position:"relative"},onPointerenter:o[0]||(o[0]=x=>r.value=!0),onPointerleave:o[1]||(o[1]=x=>r.value=!1)},[(0,e.renderSlot)(l.$slots,"default")],40,R))}});exports.default=b;

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

@@ -0,0 +1 @@
+import{SCROLL_AREA_CONTEXT as e}from"./context.js";import{computed as o,createElementBlock as l,defineComponent as a,openBlock as r,provide as t,ref as s,renderSlot as n}from"vue";var c=["data-overflow-x","data-overflow-y"],i=/* @__PURE__ */a({__name:"ScrollAreaRoot",props:{type:{default:"hover"},scrollHideDelay:{default:600}},emits:["scroll-position-change"],setup(a,{expose:i,emit:d}){const v=a,p=d,u=s(null),f=s(null),m=s(!1),y=s(!1),x=s(!1),b=s(!1),h=s("none"),k=s("none");function w(e){u.value&&u.value.scrollTo({behavior:"auto",...e})}return t(e,{type:o(()=>v.type),viewportRef:u,contentRef:f,scrollbarXEnabled:m,scrollbarYEnabled:y,hovering:x,scrolling:b,scrollHideDelay:o(()=>v.scrollHideDelay),reportScrollPosition:function(e,o){h.value=o.x,k.value=o.y,p("scroll-position-change",e)},scrollTo:w}),i({scrollTo:w}),(e,o)=>(r(),l("div",{class:"skdx-scroll-area","data-part":"root","data-skdx-component":"scroll-area","data-skdx-scroll-area":"","data-overflow-x":h.value,"data-overflow-y":k.value,style:{position:"relative"},onPointerenter:o[0]||(o[0]=e=>x.value=!0),onPointerleave:o[1]||(o[1]=e=>x.value=!1)},[n(e.$slots,"default")],40,c))}});export{i as default};

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

@@ -1,10 +1,9 @@
 /**
  * A scrollbar track for one axis. Renders `<div data-skdx-scroll-area-scrollbar>`
  * with `data-orientation` (`'vertical'` | `'horizontal'`) and `data-state`
- * (`'visible'` | `'hidden'`, driven by the parent `SkdxScrollArea`'s `type`).
- * Renders nothing when that axis doesn't overflow, unless `forceMount` is set.
- * Clicking the track (not the thumb) pages the viewport by one client size
- * towards the click. Must be used inside `SkdxScrollArea`.
+ * (`'visible'` | `'hidden'`). Renders nothing when that axis doesn't overflow,
+ * unless `forceMount` is set or `type` is `"always"`. Clicking the track pages
+ * the viewport by one client size. Must be used inside `SkdxScrollArea`.
  */
 type __VLS_Props = {
     /** Which scroll axis this scrollbar controls. */

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

@@ -1,10 +1,9 @@
 /**
  * A scrollbar track for one axis. Renders `<div data-skdx-scroll-area-scrollbar>`
  * with `data-orientation` (`'vertical'` | `'horizontal'`) and `data-state`
- * (`'visible'` | `'hidden'`, driven by the parent `SkdxScrollArea`'s `type`).
- * Renders nothing when that axis doesn't overflow, unless `forceMount` is set.
- * Clicking the track (not the thumb) pages the viewport by one client size
- * towards the click. Must be used inside `SkdxScrollArea`.
+ * (`'visible'` | `'hidden'`). Renders nothing when that axis doesn't overflow,
+ * unless `forceMount` is set or `type` is `"always"`. Clicking the track pages
+ * the viewport by one client size. Must be used inside `SkdxScrollArea`.
  */
 type __VLS_Props = {
     /** Which scroll axis this scrollbar controls. */

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

@@ -1 +1 @@
-const s=require("./context.cjs");let e=require("vue");var p=["data-orientation","data-state"],b=(0,e.defineComponent)({__name:"ScrollAreaScrollbar",props:{orientation:{default:"vertical"},forceMount:{type:Boolean,default:!1}},setup(a){const n=a,i=(0,e.inject)(s.SCROLL_AREA_CONTEXT);if(!i)throw new Error("SkdxScrollAreaScrollbar must be used within SkdxScrollArea.");const r=i;(0,e.provide)(s.SCROLLBAR_ORIENTATION_CONTEXT,(0,e.computed)(()=>n.orientation));const c=(0,e.ref)(null),d=(0,e.computed)(()=>n.orientation==="vertical"?r.scrollbarYEnabled.value:r.scrollbarXEnabled.value),f=(0,e.computed)(()=>r.type.value==="hover"?r.hovering.value:r.type.value==="scroll"?r.hovering.value||r.scrolling.value:!0);function v(l){if(l.target!==l.currentTarget)return;const t=r.viewportRef.value,u=c.value;if(!t||!u)return;const o=u.querySelector("[data-skdx-scroll-area-thumb]")?.getBoundingClientRect();o&&(n.orientation==="vertical"?l.clientY<o.top?t.scrollTop-=t.clientHeight:l.clientY>o.bottom&&(t.scrollTop+=t.clientHeight):l.clientX<o.left?t.scrollLeft-=t.clientWidth:l.clientX>o.right&&(t.scrollLeft+=t.clientWidth))}return(l,t)=>a.forceMount||d.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-scroll-area__scrollbar","data-part":"scrollbar",ref_key:"trackRef",ref:c,"data-skdx-scroll-area-scrollbar":"","data-orientation":a.orientation,"data-state":f.value?"visible":"hidden",onPointerdown:v},[(0,e.renderSlot)(l.$slots,"default")],40,p)):(0,e.createCommentVNode)("",!0)}});exports.default=b;
+const s=require("./context.cjs");let e=require("vue");var _=["data-orientation","data-state"],b=(0,e.defineComponent)({__name:"ScrollAreaScrollbar",props:{orientation:{default:"vertical"},forceMount:{type:Boolean,default:!1}},setup(n){const a=n,i=(0,e.inject)(s.SCROLL_AREA_CONTEXT);if(!i)throw new Error("SkdxScrollAreaScrollbar must be used within SkdxScrollArea.");const r=i;(0,e.provide)(s.SCROLLBAR_ORIENTATION_CONTEXT,(0,e.computed)(()=>a.orientation));const c=(0,e.ref)(null),d=(0,e.computed)(()=>a.orientation==="vertical"?r.scrollbarYEnabled.value:r.scrollbarXEnabled.value),f=(0,e.computed)(()=>r.type.value==="hover"?r.hovering.value:r.type.value==="scroll"?r.hovering.value||r.scrolling.value:!0),v=(0,e.computed)(()=>a.forceMount||r.type.value==="always"||d.value);function p(l){if(l.target!==l.currentTarget)return;const t=r.viewportRef.value,u=c.value;if(!t||!u)return;const o=u.querySelector("[data-skdx-scroll-area-thumb]")?.getBoundingClientRect();o&&(a.orientation==="vertical"?l.clientY<o.top?t.scrollTop-=t.clientHeight:l.clientY>o.bottom&&(t.scrollTop+=t.clientHeight):l.clientX<o.left?t.scrollLeft-=t.clientWidth:l.clientX>o.right&&(t.scrollLeft+=t.clientWidth))}return(l,t)=>v.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-scroll-area__scrollbar","data-part":"scrollbar",ref_key:"trackRef",ref:c,"data-skdx-scroll-area-scrollbar":"","aria-hidden":"true","data-orientation":n.orientation,"data-state":f.value?"visible":"hidden",onPointerdown:p},[(0,e.renderSlot)(l.$slots,"default")],40,_)):(0,e.createCommentVNode)("",!0)}});exports.default=b;

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

@@ -1 +1 @@
-import{SCROLLBAR_ORIENTATION_CONTEXT as e,SCROLL_AREA_CONTEXT as t}from"./context.js";import{computed as r,createCommentVNode as a,createElementBlock as l,defineComponent as o,inject as n,openBlock as i,provide as c,ref as s,renderSlot as d}from"vue";var u=["data-orientation","data-state"],v=/* @__PURE__ */o({__name:"ScrollAreaScrollbar",props:{orientation:{default:"vertical"},forceMount:{type:Boolean,default:!1}},setup(o){const v=o,f=n(t);if(!f)throw new Error("SkdxScrollAreaScrollbar must be used within SkdxScrollArea.");const p=f;c(e,r(()=>v.orientation));const b=s(null),m=r(()=>"vertical"===v.orientation?p.scrollbarYEnabled.value:p.scrollbarXEnabled.value),h=r(()=>"hover"===p.type.value?p.hovering.value:"scroll"!==p.type.value||p.hovering.value||p.scrolling.value);function S(e){if(e.target!==e.currentTarget)return;const t=p.viewportRef.value,r=b.value;if(!t||!r)return;const a=r.querySelector("[data-skdx-scroll-area-thumb]")?.getBoundingClientRect();a&&("vertical"===v.orientation?e.clientY<a.top?t.scrollTop-=t.clientHeight:e.clientY>a.bottom&&(t.scrollTop+=t.clientHeight):e.clientX<a.left?t.scrollLeft-=t.clientWidth:e.clientX>a.right&&(t.scrollLeft+=t.clientWidth))}return(e,t)=>o.forceMount||m.value?(i(),l("div",{key:0,class:"skdx-scroll-area__scrollbar","data-part":"scrollbar",ref_key:"trackRef",ref:b,"data-skdx-scroll-area-scrollbar":"","data-orientation":o.orientation,"data-state":h.value?"visible":"hidden",onPointerdown:S},[d(e.$slots,"default")],40,u)):a("",!0)}});export{v as default};
+import{SCROLLBAR_ORIENTATION_CONTEXT as e,SCROLL_AREA_CONTEXT as t}from"./context.js";import{computed as a,createCommentVNode as r,createElementBlock as l,defineComponent as o,inject as n,openBlock as i,provide as c,ref as s,renderSlot as u}from"vue";var d=["data-orientation","data-state"],v=/* @__PURE__ */o({__name:"ScrollAreaScrollbar",props:{orientation:{default:"vertical"},forceMount:{type:Boolean,default:!1}},setup(o){const v=o,f=n(t);if(!f)throw new Error("SkdxScrollAreaScrollbar must be used within SkdxScrollArea.");const p=f;c(e,a(()=>v.orientation));const b=s(null),h=a(()=>"vertical"===v.orientation?p.scrollbarYEnabled.value:p.scrollbarXEnabled.value),m=a(()=>"hover"===p.type.value?p.hovering.value:"scroll"!==p.type.value||p.hovering.value||p.scrolling.value),S=a(()=>v.forceMount||"always"===p.type.value||h.value);function g(e){if(e.target!==e.currentTarget)return;const t=p.viewportRef.value,a=b.value;if(!t||!a)return;const r=a.querySelector("[data-skdx-scroll-area-thumb]")?.getBoundingClientRect();r&&("vertical"===v.orientation?e.clientY<r.top?t.scrollTop-=t.clientHeight:e.clientY>r.bottom&&(t.scrollTop+=t.clientHeight):e.clientX<r.left?t.scrollLeft-=t.clientWidth:e.clientX>r.right&&(t.scrollLeft+=t.clientWidth))}return(e,t)=>S.value?(i(),l("div",{key:0,class:"skdx-scroll-area__scrollbar","data-part":"scrollbar",ref_key:"trackRef",ref:b,"data-skdx-scroll-area-scrollbar":"","aria-hidden":"true","data-orientation":o.orientation,"data-state":m.value?"visible":"hidden",onPointerdown:g},[u(e.$slots,"default")],40,d)):r("",!0)}});export{v as default};

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

@@ -1,10 +1,7 @@
 /**
- * The draggable handle inside a `SkdxScrollAreaScrollbar`, sized and
- * positioned as a percentage of its track to match the viewport's visible
- * fraction and scroll offset. Renders `<div data-skdx-scroll-area-thumb>`
- * with `data-orientation` inherited from the enclosing scrollbar. Dragging it
- * (pointer capture-based) scrolls the viewport proportionally along that axis.
- * Must be used inside `SkdxScrollArea`.
+ * Draggable handle in `SkdxScrollAreaScrollbar`, sized/positioned as
+ * percentage of track. Dragging (pointer capture) scrolls viewport
+ * proportionally.
  */
 type __VLS_Props = {};
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,10 +1,7 @@
 /**
- * The draggable handle inside a `SkdxScrollAreaScrollbar`, sized and
- * positioned as a percentage of its track to match the viewport's visible
- * fraction and scroll offset. Renders `<div data-skdx-scroll-area-thumb>`
- * with `data-orientation` inherited from the enclosing scrollbar. Dragging it
- * (pointer capture-based) scrolls the viewport proportionally along that axis.
- * Must be used inside `SkdxScrollArea`.
+ * Draggable handle in `SkdxScrollAreaScrollbar`, sized/positioned as
+ * percentage of track. Dragging (pointer capture) scrolls viewport
+ * proportionally.
  */
 type __VLS_Props = {};
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1 +1 @@
-const w=require("./context.cjs");let o=require("vue");var M=["data-orientation"],C=.1,E=(0,o.defineComponent)({__name:"ScrollAreaThumb",setup(L){const d=(0,o.inject)(w.SCROLL_AREA_CONTEXT);if(!d)throw new Error("SkdxScrollAreaThumb must be used within SkdxScrollArea.");const n=d,r=(0,o.inject)(w.SCROLLBAR_ORIENTATION_CONTEXT,(0,o.computed)(()=>"vertical")),h=(0,o.ref)(null),a=(0,o.ref)(0),m=(0,o.ref)(0),f=(0,o.ref)(null);function c(){const e=n.viewportRef.value;if(!e)return;const[t,l,i]=r.value==="vertical"?[e.clientHeight,e.scrollHeight,e.scrollTop]:[e.clientWidth,e.scrollWidth,e.scrollLeft],u=l>0?t/l:1;a.value=Math.min(Math.max(u,C),1);const v=l-t;m.value=v>0?i/v:0}let s,_;(0,o.onMounted)(()=>{c();const e=n.viewportRef.value;if(e&&(_=e,e.addEventListener("scroll",c),typeof ResizeObserver<"u")){s=new ResizeObserver(c),s.observe(e);const t=n.contentRef.value;t&&s.observe(t)}}),(0,o.onBeforeUnmount)(()=>{_?.removeEventListener("scroll",c),s?.disconnect()});function g(e){const t=n.viewportRef.value;t&&(e.target.setPointerCapture?.(e.pointerId),f.value={startPointer:r.value==="vertical"?e.clientY:e.clientX,startScroll:r.value==="vertical"?t.scrollTop:t.scrollLeft})}function P(e){if(!e.target.hasPointerCapture?.(e.pointerId))return;const t=n.viewportRef.value,l=h.value?.parentElement,i=f.value;if(!t||!l||!i)return;const u=r.value==="vertical"?l.clientHeight:l.clientWidth,v=r.value==="vertical"?t.clientHeight:t.clientWidth,p=(r.value==="vertical"?t.scrollHeight:t.scrollWidth)-v;if(p<=0)return;const k=u*a.value,z=Math.max(u-k,1),A=((r.value==="vertical"?e.clientY:e.clientX)-i.startPointer)/z*p,R=Math.min(Math.max(i.startScroll+A,0),p);r.value==="vertical"?t.scrollTop=R:t.scrollLeft=R}function T(e){e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),f.value=null}const b=(0,o.computed)(()=>`${a.value*100}%`),S=(0,o.computed)(()=>`${m.value*(100-a.value*100)}%`),x=(0,o.computed)(()=>r.value==="vertical"?{position:"absolute",top:S.value,height:b.value,left:0,right:0}:{position:"absolute",left:S.value,width:b.value,top:0,bottom:0});return(e,t)=>((0,o.openBlock)(),(0,o.createElementBlock)("div",{class:"skdx-scroll-area__thumb","data-part":"thumb",ref_key:"thumbRef",ref:h,"data-skdx-scroll-area-thumb":"","data-orientation":(0,o.unref)(r),style:(0,o.normalizeStyle)({touchAction:"none",...x.value}),onPointerdown:g,onPointermove:P,onPointerup:T},null,44,M))}});exports.default=E;
+const E=require("../utils/direction.cjs"),g=require("./context.cjs");let r=require("vue");var L=["data-orientation"],O=.1,B=(0,r.defineComponent)({__name:"ScrollAreaThumb",setup(y){const f=(0,r.inject)(g.SCROLL_AREA_CONTEXT);if(!f)throw new Error("SkdxScrollAreaThumb must be used within SkdxScrollArea.");const l=f,o=(0,r.inject)(g.SCROLLBAR_ORIENTATION_CONTEXT,(0,r.computed)(()=>"vertical")),h=(0,r.ref)(null),a=(0,r.ref)(0),m=(0,r.ref)(0),p=(0,r.ref)(null);function c(){const e=l.viewportRef.value;if(!e)return;const[t,n,i]=o.value==="vertical"?[e.clientHeight,e.scrollHeight,e.scrollTop]:[e.clientWidth,e.scrollWidth,e.scrollLeft],u=n>0?t/n:1;a.value=Math.min(Math.max(u,O),1);const v=n-t;m.value=v>0?Math.abs(i)/v:0}let s,_;(0,r.onMounted)(()=>{c();const e=l.viewportRef.value;if(e&&(_=e,e.addEventListener("scroll",c),typeof ResizeObserver<"u")){s=new ResizeObserver(c),s.observe(e);const t=l.contentRef.value;t&&s.observe(t)}}),(0,r.onBeforeUnmount)(()=>{_?.removeEventListener("scroll",c),s?.disconnect()});function P(e){const t=l.viewportRef.value;t&&(e.target.setPointerCapture?.(e.pointerId),p.value={startPointer:o.value==="vertical"?e.clientY:e.clientX,startScroll:o.value==="vertical"?t.scrollTop:t.scrollLeft})}function T(e){if(!e.target.hasPointerCapture?.(e.pointerId))return;const t=l.viewportRef.value,n=h.value?.parentElement,i=p.value;if(!t||!n||!i)return;const u=o.value==="vertical"?n.clientHeight:n.clientWidth,v=o.value==="vertical"?t.clientHeight:t.clientWidth,d=(o.value==="vertical"?t.scrollHeight:t.scrollWidth)-v;if(d<=0)return;const M=u*a.value,k=Math.max(u-M,1),A=((o.value==="vertical"?e.clientY:e.clientX)-i.startPointer)/k*d,w=o.value==="horizontal"&&E.resolveDirection(t)==="rtl",I=w?-d:0,C=w?0:d,R=Math.min(Math.max(i.startScroll+A,I),C);o.value==="vertical"?t.scrollTop=R:t.scrollLeft=R}function x(e){e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),p.value=null}const b=(0,r.computed)(()=>`${a.value*100}%`),S=(0,r.computed)(()=>`${m.value*(100-a.value*100)}%`),z=(0,r.computed)(()=>o.value==="vertical"?{position:"absolute",top:S.value,height:b.value,left:0,right:0}:{position:"absolute",insetInlineStart:S.value,width:b.value,top:0,bottom:0});return(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"skdx-scroll-area__thumb","data-part":"thumb",ref_key:"thumbRef",ref:h,"data-skdx-scroll-area-thumb":"","aria-hidden":"true","data-orientation":(0,r.unref)(o),style:(0,r.normalizeStyle)({touchAction:"none",...z.value}),onPointerdown:P,onPointermove:T,onPointerup:x},null,44,L))}});exports.default=B;

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

@@ -1 +1 @@
-import{SCROLLBAR_ORIENTATION_CONTEXT as e,SCROLL_AREA_CONTEXT as t}from"./context.js";import{computed as l,createElementBlock as r,defineComponent as a,inject as o,normalizeStyle as n,onBeforeUnmount as i,onMounted as s,openBlock as c,ref as u,unref as v}from"vue";var f=["data-orientation"],h=/* @__PURE__ */a({__name:"ScrollAreaThumb",setup(a){const h=o(t);if(!h)throw new Error("SkdxScrollAreaThumb must be used within SkdxScrollArea.");const p=h,d=o(e,l(()=>"vertical")),m=u(null),b=u(0),R=u(0),g=u(null);function T(){const e=p.viewportRef.value;if(!e)return;const[t,l,r]="vertical"===d.value?[e.clientHeight,e.scrollHeight,e.scrollTop]:[e.clientWidth,e.scrollWidth,e.scrollLeft],a=l>0?t/l:1;b.value=Math.min(Math.max(a,.1),1);const o=l-t;R.value=o>0?r/o:0}let w,S;function x(e){const t=p.viewportRef.value;t&&(e.target.setPointerCapture?.(e.pointerId),g.value={startPointer:"vertical"===d.value?e.clientY:e.clientX,startScroll:"vertical"===d.value?t.scrollTop:t.scrollLeft})}function C(e){if(!e.target.hasPointerCapture?.(e.pointerId))return;const t=p.viewportRef.value,l=m.value?.parentElement,r=g.value;if(!t||!l||!r)return;const a="vertical"===d.value?l.clientHeight:l.clientWidth,o="vertical"===d.value?t.clientHeight:t.clientWidth,n=("vertical"===d.value?t.scrollHeight:t.scrollWidth)-o;if(n<=0)return;const i=a*b.value,s=Math.max(a-i,1),c=(("vertical"===d.value?e.clientY:e.clientX)-r.startPointer)/s*n,u=Math.min(Math.max(r.startScroll+c,0),n);"vertical"===d.value?t.scrollTop=u:t.scrollLeft=u}function E(e){e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),g.value=null}s(()=>{T();const e=p.viewportRef.value;if(e&&(S=e,e.addEventListener("scroll",T),typeof ResizeObserver<"u")){w=new ResizeObserver(T),w.observe(e);const t=p.contentRef.value;t&&w.observe(t)}}),i(()=>{S?.removeEventListener("scroll",T),w?.disconnect()});const L=l(()=>100*b.value+"%"),P=l(()=>R.value*(100-100*b.value)+"%"),_=l(()=>"vertical"===d.value?{position:"absolute",top:P.value,height:L.value,left:0,right:0}:{position:"absolute",left:P.value,width:L.value,top:0,bottom:0});return(e,t)=>(c(),r("div",{class:"skdx-scroll-area__thumb","data-part":"thumb",ref_key:"thumbRef",ref:m,"data-skdx-scroll-area-thumb":"","data-orientation":v(d),style:n({touchAction:"none",..._.value}),onPointerdown:x,onPointermove:C,onPointerup:E},null,44,f))}});export{h as default};
+import{resolveDirection as e}from"../utils/direction.js";import{SCROLLBAR_ORIENTATION_CONTEXT as t,SCROLL_AREA_CONTEXT as l}from"./context.js";import{computed as r,createElementBlock as a,defineComponent as o,inject as n,normalizeStyle as i,onBeforeUnmount as s,onMounted as c,openBlock as u,ref as v,unref as h}from"vue";var d=["data-orientation"],f=/* @__PURE__ */o({__name:"ScrollAreaThumb",setup(o){const f=n(l);if(!f)throw new Error("SkdxScrollAreaThumb must be used within SkdxScrollArea.");const p=f,m=n(t,r(()=>"vertical")),b=v(null),R=v(0),g=v(0),S=v(null);function T(){const e=p.viewportRef.value;if(!e)return;const[t,l,r]="vertical"===m.value?[e.clientHeight,e.scrollHeight,e.scrollTop]:[e.clientWidth,e.scrollWidth,e.scrollLeft],a=l>0?t/l:1;R.value=Math.min(Math.max(a,.1),1);const o=l-t;g.value=o>0?Math.abs(r)/o:0}let w,x;function C(e){const t=p.viewportRef.value;t&&(e.target.setPointerCapture?.(e.pointerId),S.value={startPointer:"vertical"===m.value?e.clientY:e.clientX,startScroll:"vertical"===m.value?t.scrollTop:t.scrollLeft})}function E(t){if(!t.target.hasPointerCapture?.(t.pointerId))return;const l=p.viewportRef.value,r=b.value?.parentElement,a=S.value;if(!l||!r||!a)return;const o="vertical"===m.value?r.clientHeight:r.clientWidth,n="vertical"===m.value?l.clientHeight:l.clientWidth,i=("vertical"===m.value?l.scrollHeight:l.scrollWidth)-n;if(i<=0)return;const s=o*R.value,c=Math.max(o-s,1),u=(("vertical"===m.value?t.clientY:t.clientX)-a.startPointer)/c*i,v="horizontal"===m.value&&"rtl"===e(l),h=v?-i:0,d=v?0:i,f=Math.min(Math.max(a.startScroll+u,h),d);"vertical"===m.value?l.scrollTop=f:l.scrollLeft=f}function L(e){e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),S.value=null}c(()=>{T();const e=p.viewportRef.value;if(e&&(x=e,e.addEventListener("scroll",T),typeof ResizeObserver<"u")){w=new ResizeObserver(T),w.observe(e);const t=p.contentRef.value;t&&w.observe(t)}}),s(()=>{x?.removeEventListener("scroll",T),w?.disconnect()});const P=r(()=>100*R.value+"%"),_=r(()=>g.value*(100-100*R.value)+"%"),A=r(()=>"vertical"===m.value?{position:"absolute",top:_.value,height:P.value,left:0,right:0}:{position:"absolute",insetInlineStart:_.value,width:P.value,top:0,bottom:0});return(e,t)=>(u(),a("div",{class:"skdx-scroll-area__thumb","data-part":"thumb",ref_key:"thumbRef",ref:b,"data-skdx-scroll-area-thumb":"","aria-hidden":"true","data-orientation":h(m),style:i({touchAction:"none",...A.value}),onPointerdown:C,onPointermove:E,onPointerup:L},null,44,d))}});export{f as default};

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

@@ -1,12 +1,7 @@
 /**
- * The natively-scrollable region (`overflow: auto`) that renders slotted
- * content. Wraps it in an inner `<div data-skdx-scroll-area-content>` used to
- * measure content size, and watches both elements with a `ResizeObserver` to
- * keep `SkdxScrollArea`'s scrollbar-enabled flags current. Sets
- * `data-skdx-scroll-area-viewport` on the scrollable element and flips
- * `scrolling` true for the root's `scrollHideDelay` (600ms by default) after
- * each scroll event (used to drive
- * `type="scroll"` visibility). Must be used inside `SkdxScrollArea`.
+ * Natively-scrollable region, wraps content in div for measuring.
+ * ResizeObserver watches for changes. tabindex=0 for arrow scrolling. Pass
+ * aria-label/aria-labelledby (together, not separately) to make region.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,12 +1,7 @@
 /**
- * The natively-scrollable region (`overflow: auto`) that renders slotted
- * content. Wraps it in an inner `<div data-skdx-scroll-area-content>` used to
- * measure content size, and watches both elements with a `ResizeObserver` to
- * keep `SkdxScrollArea`'s scrollbar-enabled flags current. Sets
- * `data-skdx-scroll-area-viewport` on the scrollable element and flips
- * `scrolling` true for the root's `scrollHideDelay` (600ms by default) after
- * each scroll event (used to drive
- * `type="scroll"` visibility). Must be used inside `SkdxScrollArea`.
+ * Natively-scrollable region, wraps content in div for measuring.
+ * ResizeObserver watches for changes. tabindex=0 for arrow scrolling. Pass
+ * aria-label/aria-labelledby (together, not separately) to make region.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1 +1 @@
-const u=require("./context.cjs");let r=require("vue");var d=(0,r.defineComponent)({__name:"ScrollAreaViewport",setup(v){const c=(0,r.inject)(u.SCROLL_AREA_CONTEXT);if(!c)throw new Error("SkdxScrollAreaViewport must be used within SkdxScrollArea.");const e=c;function l(){const t=e.viewportRef.value;t&&(e.scrollbarXEnabled.value=t.scrollWidth>t.clientWidth,e.scrollbarYEnabled.value=t.scrollHeight>t.clientHeight)}let n;function s(){l(),e.scrolling.value=!0,clearTimeout(n),n=setTimeout(()=>{e.scrolling.value=!1},e.scrollHideDelay.value)}let o;return(0,r.onMounted)(()=>{l();const t=e.viewportRef.value;if(!t||typeof ResizeObserver>"u")return;o=new ResizeObserver(l),o.observe(t);const a=e.contentRef.value;a&&o.observe(a)}),(0,r.onBeforeUnmount)(()=>{o?.disconnect(),clearTimeout(n)}),(t,a)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"skdx-scroll-area__viewport","data-part":"viewport","data-skdx-scroll-area-viewport":"",tabindex:"0",ref:i=>(0,r.unref)(e).viewportRef.value=i,style:{overflow:"auto"},onScroll:s},[(0,r.createElementVNode)("div",{"data-skdx-scroll-area-content":"",ref:i=>(0,r.unref)(e).contentRef.value=i,style:{"min-width":"100%",display:"table"}},[(0,r.renderSlot)(t.$slots,"default")],512)],544))}});exports.default=d;
+const h=require("./context.cjs");let t=require("vue");var m=["role"],c=1,S=(0,t.defineComponent)({__name:"ScrollAreaViewport",setup(x){function s(e,o,l){const v=o-l;if(v<=c)return"none";const f=Math.abs(e),p=f>c,b=f<v-c;return p&&b?"both":p?"start":"end"}const u=(0,t.inject)(h.SCROLL_AREA_CONTEXT);if(!u)throw new Error("SkdxScrollAreaViewport must be used within SkdxScrollArea.");const r=u,d=(0,t.useAttrs)(),_=(0,t.computed)(()=>d["aria-label"]!=null||d["aria-labelledby"]!=null?"region":void 0);function i(){const e=r.viewportRef.value;e&&(r.scrollbarXEnabled.value=e.scrollWidth>e.clientWidth,r.scrollbarYEnabled.value=e.scrollHeight>e.clientHeight,r.reportScrollPosition({x:e.scrollLeft,y:e.scrollTop},{x:s(e.scrollLeft,e.scrollWidth,e.clientWidth),y:s(e.scrollTop,e.scrollHeight,e.clientHeight)}))}let a;function w(){i(),r.scrolling.value=!0,clearTimeout(a),a=setTimeout(()=>{r.scrolling.value=!1},r.scrollHideDelay.value)}let n;return(0,t.onMounted)(()=>{i();const e=r.viewportRef.value;if(!e||typeof ResizeObserver>"u")return;n=new ResizeObserver(i),n.observe(e);const o=r.contentRef.value;o&&n.observe(o)}),(0,t.onBeforeUnmount)(()=>{n?.disconnect(),clearTimeout(a)}),(e,o)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-scroll-area__viewport","data-part":"viewport","data-skdx-scroll-area-viewport":"",tabindex:"0",role:_.value,ref:l=>(0,t.unref)(r).viewportRef.value=l,style:{overflow:"auto"},onScroll:w},[(0,t.createElementVNode)("div",{"data-skdx-scroll-area-content":"",ref:l=>(0,t.unref)(r).contentRef.value=l,style:{"min-width":"100%",display:"table"}},[(0,t.renderSlot)(e.$slots,"default")],512)],40,m))}});exports.default=S;

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

@@ -1 +1 @@
-import{SCROLL_AREA_CONTEXT as e}from"./context.js";import{createElementBlock as t,createElementVNode as o,defineComponent as r,inject as l,onBeforeUnmount as a,onMounted as s,openBlock as n,renderSlot as i,unref as c}from"vue";var u=/* @__PURE__ */r({__name:"ScrollAreaViewport",setup(r){const u=l(e);if(!u)throw new Error("SkdxScrollAreaViewport must be used within SkdxScrollArea.");const d=u;function v(){const e=d.viewportRef.value;e&&(d.scrollbarXEnabled.value=e.scrollWidth>e.clientWidth,d.scrollbarYEnabled.value=e.scrollHeight>e.clientHeight)}let f,p;function m(){v(),d.scrolling.value=!0,clearTimeout(f),f=setTimeout(()=>{d.scrolling.value=!1},d.scrollHideDelay.value)}return s(()=>{v();const e=d.viewportRef.value;if(!e||typeof ResizeObserver>"u")return;p=new ResizeObserver(v),p.observe(e);const t=d.contentRef.value;t&&p.observe(t)}),a(()=>{p?.disconnect(),clearTimeout(f)}),(e,r)=>(n(),t("div",{class:"skdx-scroll-area__viewport","data-part":"viewport","data-skdx-scroll-area-viewport":"",tabindex:"0",ref:e=>c(d).viewportRef.value=e,style:{overflow:"auto"},onScroll:m},[o("div",{"data-skdx-scroll-area-content":"",ref:e=>c(d).contentRef.value=e,style:{"min-width":"100%",display:"table"}},[i(e.$slots,"default")],512)],544))}});export{u as default};
+import{SCROLL_AREA_CONTEXT as e}from"./context.js";import{computed as t,createElementBlock as l,createElementVNode as o,defineComponent as r,inject as a,onBeforeUnmount as s,onMounted as n,openBlock as i,renderSlot as c,unref as u,useAttrs as d}from"vue";var v=["role"],f=/* @__PURE__ */r({__name:"ScrollAreaViewport",setup(r){function f(e,t,l){const o=t-l;if(o<=1)return"none";const r=Math.abs(e),a=r>1;return a&&r<o-1?"both":a?"start":"end"}const p=a(e);if(!p)throw new Error("SkdxScrollAreaViewport must be used within SkdxScrollArea.");const b=p,m=d(),w=t(()=>null!=m["aria-label"]||null!=m["aria-labelledby"]?"region":void 0);function h(){const e=b.viewportRef.value;e&&(b.scrollbarXEnabled.value=e.scrollWidth>e.clientWidth,b.scrollbarYEnabled.value=e.scrollHeight>e.clientHeight,b.reportScrollPosition({x:e.scrollLeft,y:e.scrollTop},{x:f(e.scrollLeft,e.scrollWidth,e.clientWidth),y:f(e.scrollTop,e.scrollHeight,e.clientHeight)}))}let x,R;function S(){h(),b.scrolling.value=!0,clearTimeout(x),x=setTimeout(()=>{b.scrolling.value=!1},b.scrollHideDelay.value)}return n(()=>{h();const e=b.viewportRef.value;if(!e||typeof ResizeObserver>"u")return;R=new ResizeObserver(h),R.observe(e);const t=b.contentRef.value;t&&R.observe(t)}),s(()=>{R?.disconnect(),clearTimeout(x)}),(e,t)=>(i(),l("div",{class:"skdx-scroll-area__viewport","data-part":"viewport","data-skdx-scroll-area-viewport":"",tabindex:"0",role:w.value,ref:e=>u(b).viewportRef.value=e,style:{overflow:"auto"},onScroll:S},[o("div",{"data-skdx-scroll-area-content":"",ref:e=>u(b).contentRef.value=e,style:{"min-width":"100%",display:"table"}},[c(e.$slots,"default")],512)],40,v))}});export{f as default};

package/dist/scroll-area/context.d.cts

@@ -1,6 +1,26 @@
 import type { InjectionKey, Ref } from 'vue';
-/** @internal When a ScrollArea shows its scrollbars: auto per overflow, always, only while hovering, or only while scrolling. */
+/** When a ScrollArea shows its scrollbars: auto per overflow, always, only while hovering, or only while scrolling. */
 export type ScrollAreaType = 'auto' | 'always' | 'hover' | 'scroll';
+/** Which axes the `SkdxScrollArea` recipe derives a Scrollbar for. */
+export type ScrollAreaScrollbars = 'vertical' | 'horizontal' | 'both';
+/** How much content sits outside the viewport on one axis. Logical, not physical. */
+export type ScrollAreaOverflow = 'none' | 'start' | 'end' | 'both';
+/** The scroll position a ScrollArea reports through `scroll-position-change`. */
+export interface ScrollAreaScrollPosition {
+    /** The viewport's `scrollLeft`, negative in RTL containers. */
+    x: number;
+    /** The viewport's `scrollTop`. */
+    y: number;
+}
+/** Options for the ScrollArea's `scrollTo` method — the subset of `ScrollToOptions` that makes sense here. */
+export interface ScrollAreaScrollToOptions {
+    /** Target `scrollTop`. Omit to leave the block axis where it is. */
+    top?: number;
+    /** Target `scrollLeft`. Omit to leave the inline axis where it is. */
+    left?: number;
+    /** Whether to animate the scroll. @default 'auto' */
+    behavior?: 'auto' | 'smooth';
+}
 /** @internal Injection key a ScrollArea provides so its parts can read/drive shared state. */
 export interface ScrollAreaContext {
     type: Ref<ScrollAreaType>;
@@ -11,6 +31,13 @@ export interface ScrollAreaContext {
     hovering: Ref<boolean>;
     scrolling: Ref<boolean>;
     scrollHideDelay: Ref<number>;
+    /** Emits `scroll-position-change` to the root. */
+    reportScrollPosition(position: ScrollAreaScrollPosition, overflow: {
+        x: ScrollAreaOverflow;
+        y: ScrollAreaOverflow;
+    }): void;
+    /** Scrolls the Viewport, exposed via `defineExpose`. */
+    scrollTo(options: ScrollAreaScrollToOptions): void;
 }
 /** @internal Injection key a ScrollArea provides so its Viewport/Scrollbar/Thumb parts share type and hover/scroll state. */
 export declare const SCROLL_AREA_CONTEXT: InjectionKey<ScrollAreaContext>;

package/dist/scroll-area/context.d.ts

@@ -1,6 +1,26 @@
 import type { InjectionKey, Ref } from 'vue';
-/** @internal When a ScrollArea shows its scrollbars: auto per overflow, always, only while hovering, or only while scrolling. */
+/** When a ScrollArea shows its scrollbars: auto per overflow, always, only while hovering, or only while scrolling. */
 export type ScrollAreaType = 'auto' | 'always' | 'hover' | 'scroll';
+/** Which axes the `SkdxScrollArea` recipe derives a Scrollbar for. */
+export type ScrollAreaScrollbars = 'vertical' | 'horizontal' | 'both';
+/** How much content sits outside the viewport on one axis. Logical, not physical. */
+export type ScrollAreaOverflow = 'none' | 'start' | 'end' | 'both';
+/** The scroll position a ScrollArea reports through `scroll-position-change`. */
+export interface ScrollAreaScrollPosition {
+    /** The viewport's `scrollLeft`, negative in RTL containers. */
+    x: number;
+    /** The viewport's `scrollTop`. */
+    y: number;
+}
+/** Options for the ScrollArea's `scrollTo` method — the subset of `ScrollToOptions` that makes sense here. */
+export interface ScrollAreaScrollToOptions {
+    /** Target `scrollTop`. Omit to leave the block axis where it is. */
+    top?: number;
+    /** Target `scrollLeft`. Omit to leave the inline axis where it is. */
+    left?: number;
+    /** Whether to animate the scroll. @default 'auto' */
+    behavior?: 'auto' | 'smooth';
+}
 /** @internal Injection key a ScrollArea provides so its parts can read/drive shared state. */
 export interface ScrollAreaContext {
     type: Ref<ScrollAreaType>;
@@ -11,6 +31,13 @@ export interface ScrollAreaContext {
     hovering: Ref<boolean>;
     scrolling: Ref<boolean>;
     scrollHideDelay: Ref<number>;
+    /** Emits `scroll-position-change` to the root. */
+    reportScrollPosition(position: ScrollAreaScrollPosition, overflow: {
+        x: ScrollAreaOverflow;
+        y: ScrollAreaOverflow;
+    }): void;
+    /** Scrolls the Viewport, exposed via `defineExpose`. */
+    scrollTo(options: ScrollAreaScrollToOptions): void;
 }
 /** @internal Injection key a ScrollArea provides so its Viewport/Scrollbar/Thumb parts share type and hover/scroll state. */
 export declare const SCROLL_AREA_CONTEXT: InjectionKey<ScrollAreaContext>;

package/dist/scroll-area/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./ScrollArea.vue.cjs"),e=require("./ScrollAreaViewport.vue.cjs"),l=require("./ScrollAreaScrollbar.vue.cjs"),o=require("./ScrollAreaThumb.vue.cjs"),a=require("./ScrollAreaCorner.vue.cjs");exports.SkdxScrollArea=r.default;exports.SkdxScrollAreaCorner=a.default;exports.SkdxScrollAreaScrollbar=l.default;exports.SkdxScrollAreaThumb=o.default;exports.SkdxScrollAreaViewport=e.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ScrollArea.vue.cjs");exports.SkdxScrollArea=e.default;

package/dist/scroll-area/index.d.cts

@@ -1,5 +1,2 @@
 export { default as SkdxScrollArea } from './ScrollArea.vue.cjs';
-export { default as SkdxScrollAreaViewport } from './ScrollAreaViewport.vue.cjs';
-export { default as SkdxScrollAreaScrollbar } from './ScrollAreaScrollbar.vue.cjs';
-export { default as SkdxScrollAreaThumb } from './ScrollAreaThumb.vue.cjs';
-export { default as SkdxScrollAreaCorner } from './ScrollAreaCorner.vue.cjs';
+export type { ScrollAreaScrollbars, ScrollAreaScrollPosition, ScrollAreaScrollToOptions, ScrollAreaType, } from './context.cjs';

package/dist/scroll-area/index.d.ts

@@ -1,5 +1,2 @@
 export { default as SkdxScrollArea } from './ScrollArea.vue.js';
-export { default as SkdxScrollAreaViewport } from './ScrollAreaViewport.vue.js';
-export { default as SkdxScrollAreaScrollbar } from './ScrollAreaScrollbar.vue.js';
-export { default as SkdxScrollAreaThumb } from './ScrollAreaThumb.vue.js';
-export { default as SkdxScrollAreaCorner } from './ScrollAreaCorner.vue.js';
+export type { ScrollAreaScrollbars, ScrollAreaScrollPosition, ScrollAreaScrollToOptions, ScrollAreaType, } from './context.js';

package/dist/scroll-area/index.js

@@ -1 +1 @@
-import r from"./ScrollArea.vue.js";import o from"./ScrollAreaViewport.vue.js";import l from"./ScrollAreaScrollbar.vue.js";import e from"./ScrollAreaThumb.vue.js";import a from"./ScrollAreaCorner.vue.js";export{r as SkdxScrollArea,a as SkdxScrollAreaCorner,l as SkdxScrollAreaScrollbar,e as SkdxScrollAreaThumb,o as SkdxScrollAreaViewport};
+import r from"./ScrollArea.vue.js";export{r as SkdxScrollArea};

package/dist/scroll-area/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./ScrollAreaCorner.vue.cjs"),e=require("./ScrollAreaScrollbar.vue.cjs"),l=require("./ScrollAreaThumb.vue.cjs"),o=require("./ScrollAreaViewport.vue.cjs"),a=require("./ScrollAreaRoot.vue.cjs");exports.SkdxScrollAreaCorner=r.default;exports.SkdxScrollAreaRoot=a.default;exports.SkdxScrollAreaScrollbar=e.default;exports.SkdxScrollAreaThumb=l.default;exports.SkdxScrollAreaViewport=o.default;

package/dist/scroll-area/primitives.d.cts

@@ -0,0 +1,27 @@
+/**
+ * Advanced primitives for custom `SkdxScrollArea` layouts. Recipe built from
+ * these. Note: Root ≠ main barrel SkdxScrollArea.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxScrollAreaCorner, SkdxScrollAreaRoot, SkdxScrollAreaScrollbar, SkdxScrollAreaThumb, SkdxScrollAreaViewport } from '@skdx/vue/primitives/scroll-area';
+ * </script>
+ *
+ * <template>
+ *   <SkdxScrollAreaRoot>
+ *     <SkdxScrollAreaViewport aria-label="Release notes">Scrollable body</SkdxScrollAreaViewport>
+ *     <SkdxScrollAreaScrollbar orientation="vertical">
+ *       <SkdxScrollAreaThumb />
+ *     </SkdxScrollAreaScrollbar>
+ *     <SkdxScrollAreaCorner />
+ *   </SkdxScrollAreaRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxScrollAreaRoot } from './ScrollAreaRoot.vue.cjs';
+export { default as SkdxScrollAreaViewport } from './ScrollAreaViewport.vue.cjs';
+export { default as SkdxScrollAreaScrollbar } from './ScrollAreaScrollbar.vue.cjs';
+export { default as SkdxScrollAreaThumb } from './ScrollAreaThumb.vue.cjs';
+export { default as SkdxScrollAreaCorner } from './ScrollAreaCorner.vue.cjs';
+export type { ScrollAreaScrollPosition, ScrollAreaScrollToOptions, ScrollAreaType, } from './context.cjs';

package/dist/scroll-area/primitives.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Advanced primitives for custom `SkdxScrollArea` layouts. Recipe built from
+ * these. Note: Root ≠ main barrel SkdxScrollArea.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxScrollAreaCorner, SkdxScrollAreaRoot, SkdxScrollAreaScrollbar, SkdxScrollAreaThumb, SkdxScrollAreaViewport } from '@skdx/vue/primitives/scroll-area';
+ * </script>
+ *
+ * <template>
+ *   <SkdxScrollAreaRoot>
+ *     <SkdxScrollAreaViewport aria-label="Release notes">Scrollable body</SkdxScrollAreaViewport>
+ *     <SkdxScrollAreaScrollbar orientation="vertical">
+ *       <SkdxScrollAreaThumb />
+ *     </SkdxScrollAreaScrollbar>
+ *     <SkdxScrollAreaCorner />
+ *   </SkdxScrollAreaRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxScrollAreaRoot } from './ScrollAreaRoot.vue.js';
+export { default as SkdxScrollAreaViewport } from './ScrollAreaViewport.vue.js';
+export { default as SkdxScrollAreaScrollbar } from './ScrollAreaScrollbar.vue.js';
+export { default as SkdxScrollAreaThumb } from './ScrollAreaThumb.vue.js';
+export { default as SkdxScrollAreaCorner } from './ScrollAreaCorner.vue.js';
+export type { ScrollAreaScrollPosition, ScrollAreaScrollToOptions, ScrollAreaType, } from './context.js';

package/dist/scroll-area/primitives.js

@@ -0,0 +1 @@
+import r from"./ScrollAreaCorner.vue.js";import o from"./ScrollAreaScrollbar.vue.js";import l from"./ScrollAreaThumb.vue.js";import e from"./ScrollAreaViewport.vue.js";import a from"./ScrollAreaRoot.vue.js";export{r as SkdxScrollAreaCorner,a as SkdxScrollAreaRoot,o as SkdxScrollAreaScrollbar,l as SkdxScrollAreaThumb,e as SkdxScrollAreaViewport};