@skdx/vue 0.26.0 → 0.28.0

package/dist/rating/RatingAnatomy.vue.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The anatomy `SkdxRating` draws when its default slot is empty: `max` Items,
+ * each with `icon` slot content or default star. Inlined SVG, not `@skdx/icons`,
+ * since framework packages can't depend on icons. React `RatingAnatomy.tsx` must stay synchronized.
+ * @internal
+ */
+type __VLS_Props = {
+    max?: number;
+};
+type __VLS_Slots = {
+    icon?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    max: 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/rating/RatingAnatomy.vue.js

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

package/dist/rating/RatingAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const n=require("./RatingItem.vue.cjs");let e=require("vue");var u=(0,e.defineComponent)({__name:"RatingAnatomy",props:{max:{default:5}},setup(a){return(l,t)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(a.max,r=>((0,e.openBlock)(),(0,e.createBlock)(n.default,{key:r,value:r},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(l.$slots,"icon",{},()=>[t[0]||(t[0]=(0,e.createElementVNode)("svg",{viewBox:"0 0 20 20",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",focusable:"false"},[(0,e.createElementVNode)("path",{d:"M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6-4.5-4.2 6.1-.7z"})],-1))])]),_:3},8,["value"]))),128))}});exports.default=u;

package/dist/rating/RatingAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"./RatingItem.vue.js";import{Fragment as a,createBlock as t,createElementBlock as o,createElementVNode as l,defineComponent as r,openBlock as s,renderList as n,renderSlot as m,withCtx as i}from"vue";var u=/* @__PURE__ */r({__name:"RatingAnatomy",props:{max:{default:5}},setup:r=>(u,d)=>(s(!0),o(a,null,n(r.max,a=>(s(),t(e,{key:a,value:a},{default:i(()=>[m(u.$slots,"icon",{},()=>[d[0]||(d[0]=l("svg",{viewBox:"0 0 20 20",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",focusable:"false"},[l("path",{d:"M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6-4.5-4.2 6.1-.7z"})],-1))])]),_:3},8,["value"]))),128))});export{u as default};

package/dist/rating/RatingItem.vue.d.cts

@@ -1,24 +1,18 @@
 /**
- * A single selectable item (e.g. one star) within a `SkdxRating`. Renders
- * `role="radio"` with `data-highlighted` set for this item and every one
- * before it (up to the hovered item, or the committed value). Selects on
- * click/focus (WAI-ARIA radio pattern); hovering previews the value.
- *
- * When the `SkdxRating` root sets `allowHalf` the item is purely visual —
- * `aria-hidden`, out of the tab order, no `role="radio"` — because the root
- * carries the whole widget's semantics as a `role="slider"`. It still emits
- * `data-highlighted` plus `data-half` (present when the effective value lands
- * on this item's leading half) so a brand layer can paint half a star.
+ * Rating item (e.g. one star): role=radio with data-highlighted. Selects on
+ * click/focus; hovering previews value. With allowHalf: visual only (role=slider).
  */
 type __VLS_Props = {
     /** This item's 1-indexed position within the rating scale. */
     value: number;
-    /** Excludes this item from selection, hover preview, and roving focus. */
+    /** Excludes this item from selection, hover preview, and roving focus. @default false */
     disabled?: boolean;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;

package/dist/rating/RatingItem.vue.d.ts

@@ -1,24 +1,18 @@
 /**
- * A single selectable item (e.g. one star) within a `SkdxRating`. Renders
- * `role="radio"` with `data-highlighted` set for this item and every one
- * before it (up to the hovered item, or the committed value). Selects on
- * click/focus (WAI-ARIA radio pattern); hovering previews the value.
- *
- * When the `SkdxRating` root sets `allowHalf` the item is purely visual —
- * `aria-hidden`, out of the tab order, no `role="radio"` — because the root
- * carries the whole widget's semantics as a `role="slider"`. It still emits
- * `data-highlighted` plus `data-half` (present when the effective value lands
- * on this item's leading half) so a brand layer can paint half a star.
+ * Rating item (e.g. one star): role=radio with data-highlighted. Selects on
+ * click/focus; hovering previews value. With allowHalf: visual only (role=slider).
  */
 type __VLS_Props = {
     /** This item's 1-indexed position within the rating scale. */
     value: number;
-    /** Excludes this item from selection, hover preview, and roving focus. */
+    /** Excludes this item from selection, hover preview, and roving focus. @default false */
     disabled?: boolean;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;

package/dist/rating/RatingItem.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const y=require("../utils/direction.cjs"),x=require("./context.cjs");let e=require("vue");var C=["data-state","data-highlighted","data-half","data-disabled","disabled"],P=(0,e.defineComponent)({__name:"RatingItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(f){const t=f,a=(0,e.inject)(x.RATING_CONTEXT);if(!a)throw new Error("<SkdxRatingItem> must be used inside <SkdxRating>.");const u=(0,e.computed)(()=>a.allowHalf.value),i=(0,e.computed)(()=>a.value.value===t.value||u.value&&a.value.value===t.value-.5),n=(0,e.computed)(()=>a.disabled.value||t.disabled),v=(0,e.computed)(()=>a.hoverValue.value??a.value.value),h=(0,e.computed)(()=>v.value>=(u.value?t.value-.5:t.value)),p=(0,e.computed)(()=>u.value&&v.value===t.value-.5),m=(0,e.computed)(()=>i.value||a.value.value===0&&t.value===1),g=(0,e.computed)(()=>u.value?{"aria-hidden":"true",tabindex:-1}:{role:"radio","aria-checked":i.value,tabindex:m.value?0:-1});function c(l){n.value||a.readOnly.value||a.onValueChange(l)}function r(l){if(!u.value)return t.value;const o=l.currentTarget,d=o.getBoundingClientRect();if(!d.width)return t.value;const s=(l.clientX-d.left)/d.width;return(y.resolveDirection(o)==="rtl"?1-s:s)<=.5?t.value-.5:t.value}function _(l){c(r(l))}function b(){!u.value&&!i.value&&c(t.value)}function k(l){!n.value&&!a.readOnly.value&&a.onHoverValueChange(r(l))}function w(l){!u.value||n.value||a.readOnly.value||a.onHoverValueChange(r(l))}return(l,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",(0,e.mergeProps)({class:"skdx-rating__item","data-part":"item",type:"button"},g.value,{"data-skdx-rating-item":"","data-state":i.value?"checked":"unchecked","data-highlighted":h.value?"":void 0,"data-half":p.value?"":void 0,"data-disabled":n.value?"":void 0,disabled:n.value,onClick:_,onFocus:b,onPointerenter:k,onPointermove:w,onKeydown:o[0]||(o[0]=(0,e.withKeys)((0,e.withModifiers)(()=>{},["prevent"]),["enter"]))}),[(0,e.renderSlot)(l.$slots,"default")],16,C))}});exports.default=P;
+const C=require("../utils/direction.cjs"),x=require("./context.cjs");let e=require("vue");var R=["data-state","data-highlighted","data-half","data-disabled"],B=["data-state","data-highlighted","data-half","data-disabled","disabled"],V=(0,e.defineComponent)({__name:"RatingItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(b){const l=b,a=(0,e.inject)(x.RATING_CONTEXT);if(!a)throw new Error("<SkdxRatingItem> must be used inside <SkdxRating>.");const n=(0,e.computed)(()=>a.allowHalf.value),i=(0,e.computed)(()=>a.value.value===l.value||n.value&&a.value.value===l.value-.5),o=(0,e.computed)(()=>a.disabled.value||l.disabled),s=(0,e.computed)(()=>a.hoverValue.value??a.value.value),c=(0,e.computed)(()=>s.value>=(n.value?l.value-.5:l.value)),h=(0,e.computed)(()=>n.value&&s.value===l.value-.5),y=(0,e.computed)(()=>i.value||a.value.value===0&&l.value===1);let d=!1;const f=(0,e.computed)(()=>n.value?{role:"presentation"}:{role:"radio","aria-checked":i.value,"aria-label":a.itemLabel.value(l.value,a.max.value),tabindex:y.value?0:-1});function p(t,u){if(!(o.value||a.readOnly.value)){if(a.allowClear.value&&t===a.value.value){a.onValueChange(0,u);return}a.onValueChange(t,u)}}function r(t){if(!n.value)return l.value;const u=t.currentTarget,v=u.getBoundingClientRect();if(!v.width)return l.value;const _=(t.clientX-v.left)/v.width;return(C.resolveDirection(u)==="rtl"?1-_:_)<=.5?l.value-.5:l.value}function m(t){p(r(t),"pointer")}function w(){d=!0}function P(){const t=d?"pointer":"keyboard";d=!1,!n.value&&!i.value&&p(l.value,t)}function g(t){!o.value&&!a.readOnly.value&&a.onHoverValueChange(r(t))}function k(t){!n.value||o.value||a.readOnly.value||a.onHoverValueChange(r(t))}return(t,u)=>n.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",(0,e.mergeProps)({key:0,class:"skdx-rating__item","data-part":"item"},f.value,{"data-skdx-rating-item":"","data-state":i.value?"checked":"unchecked","data-highlighted":c.value?"":void 0,"data-half":h.value?"":void 0,"data-disabled":o.value?"":void 0,onClick:m,onPointerenter:g,onPointermove:k}),[(0,e.renderSlot)(t.$slots,"default")],16,R)):((0,e.openBlock)(),(0,e.createElementBlock)("button",(0,e.mergeProps)({key:1,class:"skdx-rating__item","data-part":"item",type:"button"},f.value,{"data-skdx-rating-item":"","data-state":i.value?"checked":"unchecked","data-highlighted":c.value?"":void 0,"data-half":h.value?"":void 0,"data-disabled":o.value?"":void 0,disabled:o.value,onClick:m,onFocus:P,onPointerdown:w,onPointerenter:g,onPointermove:k,onKeydown:u[0]||(u[0]=(0,e.withKeys)((0,e.withModifiers)(()=>{},["prevent"]),["enter"]))}),[(0,e.renderSlot)(t.$slots,"default")],16,B))}});exports.default=V;

package/dist/rating/RatingItem.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{resolveDirection as e}from"../utils/direction.js";import{RATING_CONTEXT as a}from"./context.js";import{computed as t,createElementBlock as l,defineComponent as u,inject as n,mergeProps as i,openBlock as o,renderSlot as v,withKeys as d,withModifiers as r}from"vue";var s=["data-state","data-highlighted","data-half","data-disabled","disabled"],c=/* @__PURE__ */u({__name:"RatingItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(u){const c=u,f=n(a);if(!f)throw new Error("<SkdxRatingItem> must be used inside <SkdxRating>.");const h=t(()=>f.allowHalf.value),m=t(()=>f.value.value===c.value||h.value&&f.value.value===c.value-.5),g=t(()=>f.disabled.value||c.disabled),p=t(()=>f.hoverValue.value??f.value.value),b=t(()=>p.value>=(h.value?c.value-.5:c.value)),k=t(()=>h.value&&p.value===c.value-.5),w=t(()=>m.value||0===f.value.value&&1===c.value),x=t(()=>h.value?{"aria-hidden":"true",tabindex:-1}:{role:"radio","aria-checked":m.value,tabindex:w.value?0:-1});function y(e){g.value||f.readOnly.value||f.onValueChange(e)}function C(a){if(!h.value)return c.value;const t=a.currentTarget,l=t.getBoundingClientRect();if(!l.width)return c.value;const u=(a.clientX-l.left)/l.width;return("rtl"===e(t)?1-u:u)<=.5?c.value-.5:c.value}function R(e){y(C(e))}function _(){!h.value&&!m.value&&y(c.value)}function B(e){!g.value&&!f.readOnly.value&&f.onHoverValueChange(C(e))}function O(e){!h.value||g.value||f.readOnly.value||f.onHoverValueChange(C(e))}return(e,a)=>(o(),l("button",i({class:"skdx-rating__item","data-part":"item",type:"button"},x.value,{"data-skdx-rating-item":"","data-state":m.value?"checked":"unchecked","data-highlighted":b.value?"":void 0,"data-half":k.value?"":void 0,"data-disabled":g.value?"":void 0,disabled:g.value,onClick:R,onFocus:_,onPointerenter:B,onPointermove:O,onKeydown:a[0]||(a[0]=d(r(()=>{},["prevent"]),["enter"]))}),[v(e.$slots,"default")],16,s))}});export{c as default};
+import{resolveDirection as e}from"../utils/direction.js";import{RATING_CONTEXT as a}from"./context.js";import{computed as t,createElementBlock as l,defineComponent as u,inject as n,mergeProps as i,openBlock as o,renderSlot as d,withKeys as v,withModifiers as r}from"vue";var s=["data-state","data-highlighted","data-half","data-disabled"],c=["data-state","data-highlighted","data-half","data-disabled","disabled"],h=/* @__PURE__ */u({__name:"RatingItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(u){const h=u,f=n(a);if(!f)throw new Error("<SkdxRatingItem> must be used inside <SkdxRating>.");const m=t(()=>f.allowHalf.value),g=t(()=>f.value.value===h.value||m.value&&f.value.value===h.value-.5),p=t(()=>f.disabled.value||h.disabled),k=t(()=>f.hoverValue.value??f.value.value),b=t(()=>k.value>=(m.value?h.value-.5:h.value)),w=t(()=>m.value&&k.value===h.value-.5),x=t(()=>g.value||0===f.value.value&&1===h.value);let y=!1;const C=t(()=>m.value?{role:"presentation"}:{role:"radio","aria-checked":g.value,"aria-label":f.itemLabel.value(h.value,f.max.value),tabindex:x.value?0:-1});function _(e,a){if(!p.value&&!f.readOnly.value){if(f.allowClear.value&&e===f.value.value)return void f.onValueChange(0,a);f.onValueChange(e,a)}}function P(a){if(!m.value)return h.value;const t=a.currentTarget,l=t.getBoundingClientRect();if(!l.width)return h.value;const u=(a.clientX-l.left)/l.width;return("rtl"===e(t)?1-u:u)<=.5?h.value-.5:h.value}function R(e){_(P(e),"pointer")}function V(){y=!0}function B(){const e=y?"pointer":"keyboard";y=!1,!m.value&&!g.value&&_(h.value,e)}function O(e){!p.value&&!f.readOnly.value&&f.onHoverValueChange(P(e))}function T(e){!m.value||p.value||f.readOnly.value||f.onHoverValueChange(P(e))}return(e,a)=>m.value?(o(),l("span",i({key:0,class:"skdx-rating__item","data-part":"item"},C.value,{"data-skdx-rating-item":"","data-state":g.value?"checked":"unchecked","data-highlighted":b.value?"":void 0,"data-half":w.value?"":void 0,"data-disabled":p.value?"":void 0,onClick:R,onPointerenter:O,onPointermove:T}),[d(e.$slots,"default")],16,s)):(o(),l("button",i({key:1,class:"skdx-rating__item","data-part":"item",type:"button"},C.value,{"data-skdx-rating-item":"","data-state":g.value?"checked":"unchecked","data-highlighted":b.value?"":void 0,"data-half":w.value?"":void 0,"data-disabled":p.value?"":void 0,disabled:p.value,onClick:R,onFocus:B,onPointerdown:V,onPointerenter:O,onPointermove:T,onKeydown:a[0]||(a[0]=v(r(()=>{},["prevent"]),["enter"]))}),[d(e.$slots,"default")],16,c))}});export{h as default};

package/dist/rating/context.d.cts

@@ -1,12 +1,38 @@
 import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Payload the `value-change` event carries. `reason` distinguishes click,
+ * keyboard, and programmatic sources.
+ */
+export interface SkdxRatingValueChangeDetail {
+    /** The rating value the change settled on. */
+    value: number;
+    /**
+     * The value held before the change, or `null` when it was `0` — 0 and
+     * "unrated" are the same state, so there is no real previous rating to
+     * report.
+     */
+    previousValue: number | null;
+    /**
+     * What drove the change: `'keyboard'` for an arrow key, Home/End, or focus
+     * landing on an item; `'pointer'` for a click; `'programmatic'` when the
+     * application set it (a controlled-prop write, an imperative method, or a
+     * form reset).
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 /** @internal Injection key a Rating provides so its items can read/drive shared state. */
 export interface RatingContext {
     value: ComputedRef<number>;
+    max: ComputedRef<number>;
+    /** Resolved `itemLabel` — each item calls it with its own value and the group's `max` to name itself. */
+    itemLabel: ComputedRef<(value: number, max: number) => string>;
+    /** Whether re-picking the committed value clears the rating to 0. */
+    allowClear: ComputedRef<boolean>;
     allowHalf: ComputedRef<boolean>;
     hoverValue: ComputedRef<number | null>;
     disabled: ComputedRef<boolean>;
     readOnly: ComputedRef<boolean>;
-    onValueChange: (value: number) => void;
+    onValueChange: (value: number, reason: SkdxRatingValueChangeDetail['reason']) => void;
     onHoverValueChange: (value: number | null) => void;
 }
 /** @internal Injection key a Rating provides so its items share the current value, hover value, and change handlers. */

package/dist/rating/context.d.ts

@@ -1,12 +1,38 @@
 import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Payload the `value-change` event carries. `reason` distinguishes click,
+ * keyboard, and programmatic sources.
+ */
+export interface SkdxRatingValueChangeDetail {
+    /** The rating value the change settled on. */
+    value: number;
+    /**
+     * The value held before the change, or `null` when it was `0` — 0 and
+     * "unrated" are the same state, so there is no real previous rating to
+     * report.
+     */
+    previousValue: number | null;
+    /**
+     * What drove the change: `'keyboard'` for an arrow key, Home/End, or focus
+     * landing on an item; `'pointer'` for a click; `'programmatic'` when the
+     * application set it (a controlled-prop write, an imperative method, or a
+     * form reset).
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 /** @internal Injection key a Rating provides so its items can read/drive shared state. */
 export interface RatingContext {
     value: ComputedRef<number>;
+    max: ComputedRef<number>;
+    /** Resolved `itemLabel` — each item calls it with its own value and the group's `max` to name itself. */
+    itemLabel: ComputedRef<(value: number, max: number) => string>;
+    /** Whether re-picking the committed value clears the rating to 0. */
+    allowClear: ComputedRef<boolean>;
     allowHalf: ComputedRef<boolean>;
     hoverValue: ComputedRef<number | null>;
     disabled: ComputedRef<boolean>;
     readOnly: ComputedRef<boolean>;
-    onValueChange: (value: number) => void;
+    onValueChange: (value: number, reason: SkdxRatingValueChangeDetail['reason']) => void;
     onHoverValueChange: (value: number | null) => void;
 }
 /** @internal Injection key a Rating provides so its items share the current value, hover value, and change handlers. */

package/dist/rating/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Rating.vue.cjs"),t=require("./RatingItem.vue.cjs");exports.SkdxRating=e.default;exports.SkdxRatingItem=t.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Rating.vue.cjs");exports.SkdxRating=e.default;

package/dist/rating/index.d.cts

@@ -1,2 +1,2 @@
 export { default as SkdxRating } from './Rating.vue.cjs';
-export { default as SkdxRatingItem } from './RatingItem.vue.cjs';
+export type { SkdxRatingValueChangeDetail } from './context.cjs';

package/dist/rating/index.d.ts

@@ -1,2 +1,2 @@
 export { default as SkdxRating } from './Rating.vue.js';
-export { default as SkdxRatingItem } from './RatingItem.vue.js';
+export type { SkdxRatingValueChangeDetail } from './context.js';

package/dist/rating/index.js

@@ -1 +1 @@
-import t from"./Rating.vue.js";import a from"./RatingItem.vue.js";export{t as SkdxRating,a as SkdxRatingItem};
+import t from"./Rating.vue.js";export{t as SkdxRating};

package/dist/rating/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./RatingItem.vue.cjs"),t=require("./Rating.vue.cjs");exports.SkdxRating=t.default;exports.SkdxRatingItem=e.default;

package/dist/rating/primitives.d.cts

@@ -0,0 +1,19 @@
+/**
+ * Advanced primitives for `SkdxRating` — the parts the recipe composes.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxRating, SkdxRatingItem } from '@skdx/vue/primitives/rating';
+ * </script>
+ *
+ * <template>
+ *   <SkdxRating aria-label="Rate this" :max="5">
+ *     <SkdxRatingItem v-for="i in 5" :key="i" :value="i">★</SkdxRatingItem>
+ *   </SkdxRating>
+ * </template>
+ * ```
+ */
+export { default as SkdxRating } from './Rating.vue.cjs';
+export { default as SkdxRatingItem } from './RatingItem.vue.cjs';
+export type { SkdxRatingValueChangeDetail } from './context.cjs';

package/dist/rating/primitives.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Advanced primitives for `SkdxRating` — the parts the recipe composes.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxRating, SkdxRatingItem } from '@skdx/vue/primitives/rating';
+ * </script>
+ *
+ * <template>
+ *   <SkdxRating aria-label="Rate this" :max="5">
+ *     <SkdxRatingItem v-for="i in 5" :key="i" :value="i">★</SkdxRatingItem>
+ *   </SkdxRating>
+ * </template>
+ * ```
+ */
+export { default as SkdxRating } from './Rating.vue.js';
+export { default as SkdxRatingItem } from './RatingItem.vue.js';
+export type { SkdxRatingValueChangeDetail } from './context.js';

package/dist/rating/primitives.js

@@ -0,0 +1 @@
+import t from"./RatingItem.vue.js";import a from"./Rating.vue.js";export{a as SkdxRating,t as SkdxRatingItem};

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

@@ -1,27 +1,96 @@
+import type { ResizablePanelConfig } from './types.cjs';
 /**
- * Flexbox-based split-pane group. Dragging a handle only ever redistributes
- * size between the two panels immediately adjacent to it — no cascading
- * resize of non-adjacent panels, matching the simplest-correct behavior.
- * Renders a `<div>` with `data-orientation` and `display: flex` along
- * `direction`.
+ * Flexbox-based split-pane group. Drag-to-resize handles only redistribute
+ * size between adjacent panels. Supports dynamic add/remove of panels and handles.
+ * Controlled via `sizes` prop or uncontrolled with panel defaults.
  *
- * Panels and handles are expected to form a static set, registered once
- * during the initial mount (alternating Panel, Handle, Panel, ... in slot
- * order) — dynamically adding/removing panels after mount isn't supported.
+ * `step` sets arrow-key nudge amount in percentage points. Exposes
+ * `getSizes()`, `setSizes()`, and `resetSizes()` for programmatic control.
+ *
+ * @example
+ * ```vue
+ * <SkdxResizablePanelGroup :panels="[
+ *   { defaultSize: 30, content: 'Sidebar' },
+ *   { content: 'Editor' },
+ * ]" />
+ * ```
  */
 type __VLS_Props = {
-    /** Layout axis; also drives data-orientation and which handles resize the group. */
-    direction: 'horizontal' | 'vertical';
+    /**
+     * Layout axis; selects flex direction, arrow-key pair, and resize cursor.
+     * Exposed as `data-orientation` and `aria-orientation` on handles.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Controlled panel sizes as percentages, in slot order. Reports intent via
+     * `layout` and `layout-commit` instead of owning state. Omit to use
+     * panel defaults.
+     * @default undefined — group owns sizes.
+     */
+    sizes?: number[];
+    /**
+     * Arrow-key nudge amount in percentage points. Group default; handle's
+     * own `step` wins. Percentage points, not pixels.
+     * @default 2
+     */
+    step?: number;
+    /**
+     * Panel configs; each renders as a derived `SkdxResizablePanel` with
+     * Handles between pairs. Ignored if default slot has content.
+     * @default undefined — compose Panels and Handles in default slot.
+     */
+    panels?: readonly ResizablePanelConfig[];
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Alternating Panel/Handle composition, or use `panels` prop. */
+    default?(): unknown;
+    /** Panel body for markup `panels` content cannot express. */
+    panel?(props: {
+        panel: ResizablePanelConfig;
+        index: number;
+    }): unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+/** The read half of the layout API — a copy, so a caller cannot mutate the group's state. */
+declare function getSizes(): number[];
+declare function setSizes(next: number[]): void;
+/**
+ * Back to the layout the panels' own `defaultSize`s imply — the same even-split
+ * arithmetic registration does, so "reset" means the layout a fresh mount would
+ * produce rather than whatever was seen first.
+ */
+declare function resetSizes(): void;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Current sizes as percentages, in slot order. */
+    getSizes: typeof getSizes;
+    /** Drives the layout to `sizes`, clamped per panel and renormalised to 100. */
+    setSizes: typeof setSizes;
+    /** Returns every panel to the size its `defaultSize` — or the even split — implies. */
+    resetSizes: typeof resetSizes;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    collapse: (detail: {
+        panelId: string;
+    }) => any;
     layout: (sizes: number[]) => any;
+    "layout-commit": (sizes: number[]) => any;
+    expand: (detail: {
+        panelId: string;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCollapse?: ((detail: {
+        panelId: string;
+    }) => any) | undefined;
     onLayout?: ((sizes: number[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    "onLayout-commit"?: ((sizes: number[]) => any) | undefined;
+    onExpand?: ((detail: {
+        panelId: string;
+    }) => any) | undefined;
+}>, {
+    step: number;
+    orientation: "horizontal" | "vertical";
+    sizes: number[];
+    panels: readonly ResizablePanelConfig[];
+}, {}, {}, {}, 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 & {

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

@@ -1,27 +1,96 @@
+import type { ResizablePanelConfig } from './types.js';
 /**
- * Flexbox-based split-pane group. Dragging a handle only ever redistributes
- * size between the two panels immediately adjacent to it — no cascading
- * resize of non-adjacent panels, matching the simplest-correct behavior.
- * Renders a `<div>` with `data-orientation` and `display: flex` along
- * `direction`.
+ * Flexbox-based split-pane group. Drag-to-resize handles only redistribute
+ * size between adjacent panels. Supports dynamic add/remove of panels and handles.
+ * Controlled via `sizes` prop or uncontrolled with panel defaults.
  *
- * Panels and handles are expected to form a static set, registered once
- * during the initial mount (alternating Panel, Handle, Panel, ... in slot
- * order) — dynamically adding/removing panels after mount isn't supported.
+ * `step` sets arrow-key nudge amount in percentage points. Exposes
+ * `getSizes()`, `setSizes()`, and `resetSizes()` for programmatic control.
+ *
+ * @example
+ * ```vue
+ * <SkdxResizablePanelGroup :panels="[
+ *   { defaultSize: 30, content: 'Sidebar' },
+ *   { content: 'Editor' },
+ * ]" />
+ * ```
  */
 type __VLS_Props = {
-    /** Layout axis; also drives data-orientation and which handles resize the group. */
-    direction: 'horizontal' | 'vertical';
+    /**
+     * Layout axis; selects flex direction, arrow-key pair, and resize cursor.
+     * Exposed as `data-orientation` and `aria-orientation` on handles.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Controlled panel sizes as percentages, in slot order. Reports intent via
+     * `layout` and `layout-commit` instead of owning state. Omit to use
+     * panel defaults.
+     * @default undefined — group owns sizes.
+     */
+    sizes?: number[];
+    /**
+     * Arrow-key nudge amount in percentage points. Group default; handle's
+     * own `step` wins. Percentage points, not pixels.
+     * @default 2
+     */
+    step?: number;
+    /**
+     * Panel configs; each renders as a derived `SkdxResizablePanel` with
+     * Handles between pairs. Ignored if default slot has content.
+     * @default undefined — compose Panels and Handles in default slot.
+     */
+    panels?: readonly ResizablePanelConfig[];
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Alternating Panel/Handle composition, or use `panels` prop. */
+    default?(): unknown;
+    /** Panel body for markup `panels` content cannot express. */
+    panel?(props: {
+        panel: ResizablePanelConfig;
+        index: number;
+    }): unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+/** The read half of the layout API — a copy, so a caller cannot mutate the group's state. */
+declare function getSizes(): number[];
+declare function setSizes(next: number[]): void;
+/**
+ * Back to the layout the panels' own `defaultSize`s imply — the same even-split
+ * arithmetic registration does, so "reset" means the layout a fresh mount would
+ * produce rather than whatever was seen first.
+ */
+declare function resetSizes(): void;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Current sizes as percentages, in slot order. */
+    getSizes: typeof getSizes;
+    /** Drives the layout to `sizes`, clamped per panel and renormalised to 100. */
+    setSizes: typeof setSizes;
+    /** Returns every panel to the size its `defaultSize` — or the even split — implies. */
+    resetSizes: typeof resetSizes;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    collapse: (detail: {
+        panelId: string;
+    }) => any;
     layout: (sizes: number[]) => any;
+    "layout-commit": (sizes: number[]) => any;
+    expand: (detail: {
+        panelId: string;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCollapse?: ((detail: {
+        panelId: string;
+    }) => any) | undefined;
     onLayout?: ((sizes: number[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    "onLayout-commit"?: ((sizes: number[]) => any) | undefined;
+    onExpand?: ((detail: {
+        panelId: string;
+    }) => any) | undefined;
+}>, {
+    step: number;
+    orientation: "horizontal" | "vertical";
+    sizes: number[];
+    panels: readonly ResizablePanelConfig[];
+}, {}, {}, {}, 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 & {

package/dist/resizable/Resizable.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const _=require("../utils/clamp.cjs"),R=require("./context.cjs");let n=require("vue");var b=["data-orientation"],E=(0,n.defineComponent)({__name:"Resizable",props:{direction:{}},emits:["layout"],setup(m,{emit:S}){const v=m,x=S,g=(0,n.ref)(null),l=new Map;let z=0;const i=(0,n.ref)([]),u=(0,n.ref)([]);function h(e,r){if(l.has(e))return;l.set(e,r);const a=i.value.includes(e)?i.value:[...i.value,e],o=a.map(t=>l.get(t)),p=o.reduce((t,s)=>t+(s.defaultSize??0),0),c=o.filter(t=>t.defaultSize==null).length,d=Math.max(0,100-p),f=c>0?d/c:0;i.value=a,u.value=o.map(t=>t.defaultSize??f)}function y(){const e=z;return z+=1,e}function C(e){const r=i.value[e];return r?l.get(r):void 0}function k(e,r){const a=e,o=e+1;if(a<0||o>=i.value.length)return;const p=l.get(i.value[a]),c=l.get(i.value[o]),d=u.value[a],f=u.value[o];let t=_.clamp(r,p.minSize-d,p.maxSize-d);if(t=_.clamp(t,f-c.maxSize,f-c.minSize),t===0)return;const s=[...u.value];s[a]=d+t,s[o]=f-t,u.value=s,x("layout",s)}(0,n.provide)(R.RESIZABLE_CONTEXT,{get direction(){return v.direction},groupRef:g,order:i,sizes:u,registerPanel:h,registerHandle:y,resizePanels:k,getPanelConfig:C});const q=(0,n.computed)(()=>({display:"flex",flexDirection:v.direction==="horizontal"?"row":"column"}));return(e,r)=>((0,n.openBlock)(),(0,n.createElementBlock)("div",{class:"skdx-resizable","data-part":"root","data-skdx-component":"resizable",ref_key:"groupRef",ref:g,"data-orientation":m.direction,style:(0,n.normalizeStyle)(q.value)},[(0,n.renderSlot)(e.$slots,"default")],12,b))}});exports.default=E;
+const $=require("../utils/clamp.cjs"),a=require("./context.cjs"),I=require("./ResizableHandle.vue.cjs"),M=require("./ResizablePanel.vue.cjs");let n=require("vue");var X=["data-orientation"],Z=(0,n.defineComponent)({__name:"Resizable",props:{orientation:{default:"horizontal"},sizes:{default:void 0},step:{default:2},panels:{default:void 0}},emits:["layout","layout-commit","collapse","expand"],setup(c,{expose:R,emit:w}){const d=c,p=w,v=(0,n.ref)(null),r=new Map;let h=0;const i=(0,n.ref)([]),z=(0,n.ref)([]),L=(0,n.computed)(()=>d.sizes!==void 0),f=(0,n.computed)(()=>d.sizes??z.value);function N(e,l){i.value.forEach((t,o)=>{const s=r.get(t);if(!s?.collapsible)return;const u=a.isPanelCollapsed(s,e[o]),m=a.isPanelCollapsed(s,l[o]);u!==m&&(m?p("collapse",{panelId:t}):p("expand",{panelId:t}))})}function k(e){const l=f.value;L.value||(z.value=e),g=!0,b=e,p("layout",e),N(l,e)}function O(e,l){if(r.has(e))return;r.set(e,l);const t=i.value.includes(e)?i.value:[...i.value,e];i.value=t,z.value=a.seedSizes(t.map(o=>r.get(o)))}function H(e){if(r.delete(e),!i.value.includes(e))return;const l=i.value.filter(t=>t!==e);i.value=l,z.value=a.seedSizes(l.map(t=>r.get(t)))}function T(){const e=h;return h+=1,e}function V(e,l){const t=v.value;if(!t)return l;const o=[...t.querySelectorAll("[data-skdx-resizable-handle]")].indexOf(e);return o>=0?o:l}function A(e){const l=i.value[e];return l?r.get(l):void 0}function D(e,l){const t=e,o=e+1;if(t<0||o>=i.value.length)return;const s=f.value,u=r.get(i.value[t]),m=r.get(i.value[o]),S=s[t],E=s[o],y=a.resolvePairSize(u,m,S,E,l);if(y===S)return;const x=[...s];x[t]=y,x[o]=S+E-y,k(x)}let g=!1,b=null;function C(){g&&(g=!1,p("layout-commit",[...b??f.value]))}function _(e){const l=i.value.map((o,s)=>{const u=r.get(o);return $.clamp(e[s]??0,u?a.panelLowerBound(u):0,u?.maxSize??100)}),t=l.reduce((o,s)=>o+s,0);k(t>0?l.map(o=>o/t*100):l),C()}function q(){return[...f.value]}function B(e){_(e)}function P(){_(a.seedSizes(i.value.map(e=>r.get(e))))}R({getSizes:q,setSizes:B,resetSizes:P}),(0,n.provide)(a.RESIZABLE_CONTEXT,{get orientation(){return d.orientation},groupRef:v,order:i,sizes:f,registerPanel:O,unregisterPanel:H,registerHandle:T,resolveHandleIndex:V,resizePanels:D,commitLayout:C,getPanelConfig:A,get step(){return d.step},getSizes:q,setSizes:B,resetSizes:P});const F=(0,n.computed)(()=>({display:"flex",flexDirection:d.orientation==="horizontal"?"row":"column"}));return(e,l)=>((0,n.openBlock)(),(0,n.createElementBlock)("div",{class:"skdx-resizable","data-part":"root","data-skdx-component":"resizable",ref_key:"groupRef",ref:v,"data-orientation":c.orientation,style:(0,n.normalizeStyle)(F.value)},[(0,n.renderSlot)(e.$slots,"default",{},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(c.panels,(t,o)=>((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:t.id??o},[(0,n.createVNode)(M.default,{id:t.id,"default-size":t.defaultSize,"min-size":t.minSize,"max-size":t.maxSize,collapsible:t.collapsible,"collapsed-size":t.collapsedSize},{default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,"panel",{panel:t,index:o},()=>[(0,n.createTextVNode)((0,n.toDisplayString)(t.content),1)])]),_:2},1032,["id","default-size","min-size","max-size","collapsible","collapsed-size"]),c.panels&&o<c.panels.length-1?((0,n.openBlock)(),(0,n.createBlock)(I.default,{key:0})):(0,n.createCommentVNode)("",!0)],64))),128))])],12,X))}});exports.default=Z;

package/dist/resizable/Resizable.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{clamp as e}from"../utils/clamp.js";import{RESIZABLE_CONTEXT as t}from"./context.js";import{computed as a,createElementBlock as n,defineComponent as o,normalizeStyle as r,openBlock as i,provide as l,ref as s,renderSlot as u}from"vue";var c=["data-orientation"],d=/* @__PURE__ */o({__name:"Resizable",props:{direction:{}},emits:["layout"],setup(o,{emit:d}){const f=o,m=d,p=s(null),v=/* @__PURE__ */new Map;let z=0;const g=s([]),S=s([]);l(t,{get direction(){return f.direction},groupRef:p,order:g,sizes:S,registerPanel:function(e,t){if(v.has(e))return;v.set(e,t);const a=g.value.includes(e)?g.value:[...g.value,e],n=a.map(e=>v.get(e)),o=n.reduce((e,t)=>e+(t.defaultSize??0),0),r=n.filter(e=>null==e.defaultSize).length,i=Math.max(0,100-o),l=r>0?i/r:0;g.value=a,S.value=n.map(e=>e.defaultSize??l)},registerHandle:function(){const e=z;return z+=1,e},resizePanels:function(t,a){const n=t,o=t+1;if(n<0||o>=g.value.length)return;const r=v.get(g.value[n]),i=v.get(g.value[o]),l=S.value[n],s=S.value[o];let u=e(a,r.minSize-l,r.maxSize-l);if(u=e(u,s-i.maxSize,s-i.minSize),0===u)return;const c=[...S.value];c[n]=l+u,c[o]=s-u,S.value=c,m("layout",c)},getPanelConfig:function(e){const t=g.value[e];return t?v.get(t):void 0}});const x=a(()=>({display:"flex",flexDirection:"horizontal"===f.direction?"row":"column"}));return(e,t)=>(i(),n("div",{class:"skdx-resizable","data-part":"root","data-skdx-component":"resizable",ref_key:"groupRef",ref:p,"data-orientation":o.direction,style:r(x.value)},[u(e.$slots,"default")],12,c))}});export{d as default};
+import{clamp as e}from"../utils/clamp.js";import{RESIZABLE_CONTEXT as t,isPanelCollapsed as a,panelLowerBound as n,resolvePairSize as l,seedSizes as s}from"./context.js";import o from"./ResizableHandle.vue.js";import i from"./ResizablePanel.vue.js";import{Fragment as r,computed as u,createBlock as c,createCommentVNode as d,createElementBlock as p,createTextVNode as f,createVNode as m,defineComponent as v,normalizeStyle as z,openBlock as g,provide as x,ref as S,renderList as y,renderSlot as b,toDisplayString as k,withCtx as h}from"vue";var P=["data-orientation"],C=/* @__PURE__ */v({__name:"Resizable",props:{orientation:{default:"horizontal"},sizes:{default:void 0},step:{default:2},panels:{default:void 0}},emits:["layout","layout-commit","collapse","expand"],setup(v,{expose:C,emit:R}){const B=v,E=R,_=S(null),j=/* @__PURE__ */new Map;let w=0;const L=S([]),N=S([]),H=u(()=>void 0!==B.sizes),I=u(()=>B.sizes??N.value);function T(e){const t=I.value;H.value||(N.value=e),V=!0,A=e,E("layout",e),function(e,t){L.value.forEach((n,l)=>{const s=j.get(n);if(!s?.collapsible)return;const o=a(s,e[l]),i=a(s,t[l]);o!==i&&E(i?"collapse":"expand",{panelId:n})})}(t,e)}let V=!1,A=null;function D(){V&&(V=!1,E("layout-commit",[...A??I.value]))}function O(t){const a=L.value.map((a,l)=>{const s=j.get(a);return e(t[l]??0,s?n(s):0,s?.maxSize??100)}),l=a.reduce((e,t)=>e+t,0);T(l>0?a.map(e=>e/l*100):a),D()}function $(){return[...I.value]}function q(e){O(e)}function F(){O(s(L.value.map(e=>j.get(e))))}C({getSizes:$,setSizes:q,resetSizes:F}),x(t,{get orientation(){return B.orientation},groupRef:_,order:L,sizes:I,registerPanel:function(e,t){if(j.has(e))return;j.set(e,t);const a=L.value.includes(e)?L.value:[...L.value,e];L.value=a,N.value=s(a.map(e=>j.get(e)))},unregisterPanel:function(e){if(j.delete(e),!L.value.includes(e))return;const t=L.value.filter(t=>t!==e);L.value=t,N.value=s(t.map(e=>j.get(e)))},registerHandle:function(){const e=w;return w+=1,e},resolveHandleIndex:function(e,t){const a=_.value;if(!a)return t;const n=[...a.querySelectorAll("[data-skdx-resizable-handle]")].indexOf(e);return n>=0?n:t},resizePanels:function(e,t){const a=e,n=e+1;if(a<0||n>=L.value.length)return;const s=I.value,o=j.get(L.value[a]),i=j.get(L.value[n]),r=s[a],u=s[n],c=l(o,i,r,u,t);if(c===r)return;const d=[...s];d[a]=c,d[n]=r+u-c,T(d)},commitLayout:D,getPanelConfig:function(e){const t=L.value[e];return t?j.get(t):void 0},get step(){return B.step},getSizes:$,setSizes:q,resetSizes:F});const M=u(()=>({display:"flex",flexDirection:"horizontal"===B.orientation?"row":"column"}));return(e,t)=>(g(),p("div",{class:"skdx-resizable","data-part":"root","data-skdx-component":"resizable",ref_key:"groupRef",ref:_,"data-orientation":v.orientation,style:z(M.value)},[b(e.$slots,"default",{},()=>[(g(!0),p(r,null,y(v.panels,(t,a)=>(g(),p(r,{key:t.id??a},[m(i,{id:t.id,"default-size":t.defaultSize,"min-size":t.minSize,"max-size":t.maxSize,collapsible:t.collapsible,"collapsed-size":t.collapsedSize},{default:h(()=>[b(e.$slots,"panel",{panel:t,index:a},()=>[f(k(t.content),1)])]),_:2},1032,["id","default-size","min-size","max-size","collapsible","collapsed-size"]),v.panels&&a<v.panels.length-1?(g(),c(o,{key:0})):d("",!0)],64))),128))])],12,P))}});export{C as default};

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

@@ -1,17 +1,10 @@
-/**
- * The draggable divider between two `SkdxResizablePanel`s. Renders
- * `role="separator"` with `aria-orientation` set to the axis *perpendicular*
- * to the group's `direction`, plus `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * describing the size of the panel to its start side, `data-orientation`, and
- * `data-disabled`. Draggable via pointer, and keyboard-operable when focused:
- * Arrow Left/Right (horizontal groups) or Arrow Up/Down (vertical groups) nudge
- * by `step`, Home/End jump to the panel's min/max size. Must be used inside
- * `SkdxResizablePanelGroup`.
- */
+/** Draggable divider between two resizable panels (role=separator). */
 type __VLS_Props = {
-    /** Disables dragging and keyboard resizing on this handle. */
+    /** Disables dragging and keyboard resizing on this handle. @default false */
     disabled?: boolean;
-    /** Percentage nudged per Arrow key press. */
+    /**
+     * Percentage points nudged per Arrow key press, overriding the group's own `step` for this one handle. Percentage points, not pixels. @default undefined
+     */
     step?: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {

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

@@ -1,17 +1,10 @@
-/**
- * The draggable divider between two `SkdxResizablePanel`s. Renders
- * `role="separator"` with `aria-orientation` set to the axis *perpendicular*
- * to the group's `direction`, plus `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * describing the size of the panel to its start side, `data-orientation`, and
- * `data-disabled`. Draggable via pointer, and keyboard-operable when focused:
- * Arrow Left/Right (horizontal groups) or Arrow Up/Down (vertical groups) nudge
- * by `step`, Home/End jump to the panel's min/max size. Must be used inside
- * `SkdxResizablePanelGroup`.
- */
+/** Draggable divider between two resizable panels (role=separator). */
 type __VLS_Props = {
-    /** Disables dragging and keyboard resizing on this handle. */
+    /** Disables dragging and keyboard resizing on this handle. @default false */
     disabled?: boolean;
-    /** Percentage nudged per Arrow key press. */
+    /**
+     * Percentage points nudged per Arrow key press, overriding the group's own `step` for this one handle. Percentage points, not pixels. @default undefined
+     */
     step?: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {