@skdx/vue 0.27.0 → 0.29.0

package/dist/transfer/TransferAnatomy.vue.d.ts

@@ -0,0 +1,46 @@
+import { type TransferItemData } from './context.js';
+type __VLS_Props = {
+    titles?: {
+        source?: string;
+        target?: string;
+    } | undefined;
+    searchable?: boolean | undefined;
+    renderItem?: ((item: TransferItemData) => unknown) | undefined;
+    emptyText?: {
+        empty?: string;
+        noMatch?: string;
+    } | undefined;
+    showMoveAll?: boolean | undefined;
+    /**
+     * How tightly the skin packs each list's options, applied to the derived List parts.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Outline the skin gives each list, applied to the derived List parts.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders each list at, applied to the derived List parts.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "lg" | (string & {}) | undefined;
+    shape: "square" | "rounded" | (string & {}) | undefined;
+    density: "compact" | (string & {}) | undefined;
+    renderItem: ((item: TransferItemData) => unknown) | undefined;
+    titles: {
+        source?: string;
+        target?: string;
+    } | undefined;
+    searchable: boolean | undefined;
+    emptyText: {
+        empty?: string;
+        noMatch?: string;
+    } | undefined;
+    showMoveAll: boolean | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/transfer/TransferAnatomy.vue.js

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

package/dist/transfer/TransferAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("../utils/Glyph.vue.cjs"),N=require("../utils/injectRequired.cjs"),V=require("./context.cjs"),g=require("./TransferControls.vue.cjs"),c=require("./TransferEmpty.vue.cjs"),s=require("./TransferList.vue.cjs"),f=require("./TransferListHeader.vue.cjs"),m=require("./TransferListSearch.vue.cjs"),h=require("./TransferMoveAllTrigger.vue.cjs"),y=require("./TransferMoveTrigger.vue.cjs");let e=require("vue");var v=(0,e.defineComponent)({__name:"TransferAnatomy",props:{titles:{default:void 0},searchable:{type:Boolean,default:!1},renderItem:{type:Function,default:void 0},emptyText:{default:void 0},showMoveAll:{type:Boolean,default:!1},density:{default:void 0},shape:{default:void 0},size:{default:void 0}},setup(t){const i={empty:"Nothing here.",noMatch:'No match for "{query}".'},d=t;N.injectRequired(V.TRANSFER_CONTEXT,"TransferAnatomy must be used within SkdxTransfer.");const T=(0,e.computed)(()=>d.emptyText?.empty??i.empty),q=(0,e.computed)(()=>d.emptyText?.noMatch??i.noMatch),l=(n,u)=>n==="empty"?T.value:q.value.replaceAll("{query}",u);return(n,u)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(f.default,{side:"source"},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.titles?.source??"Available items"),1)]),_:1}),t.searchable?((0,e.openBlock)(),(0,e.createBlock)(m.default,{key:0,side:"source"})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(s.default,{side:"source","render-item":t.renderItem,density:t.density,shape:t.shape,size:t.size},null,8,["render-item","density","shape","size"]),(0,e.createVNode)(c.default,{side:"source"},{default:(0,e.withCtx)(({reason:a,query:o})=>[(0,e.createTextVNode)((0,e.toDisplayString)(l(a,o)),1)]),_:1}),(0,e.createVNode)(g.default,null,{default:(0,e.withCtx)(()=>[t.showMoveAll?((0,e.openBlock)(),(0,e.createBlock)(h.default,{key:0,direction:"toTarget"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(r.default,{name:"chevrons-right"})]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(y.default,{direction:"toTarget"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(r.default,{name:"arrow-right"})]),_:1}),(0,e.createVNode)(y.default,{direction:"toSource"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(r.default,{name:"arrow-left"})]),_:1}),t.showMoveAll?((0,e.openBlock)(),(0,e.createBlock)(h.default,{key:1,direction:"toSource"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(r.default,{name:"chevrons-left"})]),_:1})):(0,e.createCommentVNode)("",!0)]),_:1}),(0,e.createVNode)(f.default,{side:"target"},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.titles?.target??"Selected items"),1)]),_:1}),t.searchable?((0,e.openBlock)(),(0,e.createBlock)(m.default,{key:1,side:"target"})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(s.default,{side:"target","render-item":t.renderItem,density:t.density,shape:t.shape,size:t.size},null,8,["render-item","density","shape","size"]),(0,e.createVNode)(c.default,{side:"target"},{default:(0,e.withCtx)(({reason:a,query:o})=>[(0,e.createTextVNode)((0,e.toDisplayString)(l(a,o)),1)]),_:1})],64))}});exports.default=v;

package/dist/transfer/TransferAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"../utils/Glyph.vue.js";import{injectRequired as t}from"../utils/injectRequired.js";import{TRANSFER_CONTEXT as r}from"./context.js";import s from"./TransferControls.vue.js";import a from"./TransferEmpty.vue.js";import o from"./TransferList.vue.js";import i from"./TransferListHeader.vue.js";import n from"./TransferListSearch.vue.js";import d from"./TransferMoveAllTrigger.vue.js";import l from"./TransferMoveTrigger.vue.js";import{Fragment as u,computed as m,createBlock as f,createCommentVNode as p,createElementBlock as c,createTextVNode as y,createVNode as v,defineComponent as h,openBlock as T,toDisplayString as g,withCtx as j}from"vue";var _=/* @__PURE__ */h({__name:"TransferAnatomy",props:{titles:{default:void 0},searchable:{type:Boolean,default:!1},renderItem:{type:Function,default:void 0},emptyText:{default:void 0},showMoveAll:{type:Boolean,default:!1},density:{default:void 0},shape:{default:void 0},size:{default:void 0}},setup(h){const _=h;t(r,"TransferAnatomy must be used within SkdxTransfer.");const A=m(()=>_.emptyText?.empty??"Nothing here."),k=m(()=>_.emptyText?.noMatch??'No match for "{query}".'),x=(e,t)=>"empty"===e?A.value:k.value.replaceAll("{query}",t);return(t,r)=>(T(),c(u,null,[v(i,{side:"source"},{default:j(()=>[y(g(h.titles?.source??"Available items"),1)]),_:1}),h.searchable?(T(),f(n,{key:0,side:"source"})):p("",!0),v(o,{side:"source","render-item":h.renderItem,density:h.density,shape:h.shape,size:h.size},null,8,["render-item","density","shape","size"]),v(a,{side:"source"},{default:j(({reason:e,query:t})=>[y(g(x(e,t)),1)]),_:1}),v(s,null,{default:j(()=>[h.showMoveAll?(T(),f(d,{key:0,direction:"toTarget"},{default:j(()=>[v(e,{name:"chevrons-right"})]),_:1})):p("",!0),v(l,{direction:"toTarget"},{default:j(()=>[v(e,{name:"arrow-right"})]),_:1}),v(l,{direction:"toSource"},{default:j(()=>[v(e,{name:"arrow-left"})]),_:1}),h.showMoveAll?(T(),f(d,{key:1,direction:"toSource"},{default:j(()=>[v(e,{name:"chevrons-left"})]),_:1})):p("",!0)]),_:1}),v(i,{side:"target"},{default:j(()=>[y(g(h.titles?.target??"Selected items"),1)]),_:1}),h.searchable?(T(),f(n,{key:1,side:"target"})):p("",!0),v(o,{side:"target","render-item":h.renderItem,density:h.density,shape:h.shape,size:h.size},null,8,["render-item","density","shape","size"]),v(a,{side:"target"},{default:j(({reason:e,query:t})=>[y(g(x(e,t)),1)]),_:1})],64))}});export{_ as default};

package/dist/transfer/TransferControls.vue.d.cts

@@ -1,10 +1,5 @@
 /**
- * The named `role="group"` holding the move triggers. Without it the buttons
- * are announced as loose controls stranded between two lists; with it they are
- * announced as the thing that moves items between them.
- *
- * Purely a wrapper — it owns no state and changes no behaviour, so the triggers
- * work outside it too. Use it anyway.
+ * The named `role="group"` holding move triggers so they announce as controls that move items between lists.
  *
  * @example
  * ```vue

package/dist/transfer/TransferControls.vue.d.ts

@@ -1,10 +1,5 @@
 /**
- * The named `role="group"` holding the move triggers. Without it the buttons
- * are announced as loose controls stranded between two lists; with it they are
- * announced as the thing that moves items between them.
- *
- * Purely a wrapper — it owns no state and changes no behaviour, so the triggers
- * work outside it too. Use it anyway.
+ * The named `role="group"` holding move triggers so they announce as controls that move items between lists.
  *
  * @example
  * ```vue

package/dist/transfer/TransferControls.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("./context.cjs");let e=require("vue");var a=["data-disabled"],s=(0,e.defineComponent)({__name:"TransferControls",setup(l){const r=(0,e.inject)(o.TRANSFER_CONTEXT);if(!r)throw new Error("SkdxTransferControls must be used within SkdxTransfer.");const t=r;return(n,d)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-transfer__controls","data-part":"controls",role:"group","aria-label":"Move items","data-disabled":(0,e.unref)(t).disabled.value?"":void 0},[(0,e.renderSlot)(n.$slots,"default")],8,a))}});exports.default=s;
+const a=require("../utils/injectRequired.cjs"),n=require("./context.cjs");let e=require("vue");var s=["data-disabled"],o=(0,e.defineComponent)({__name:"TransferControls",setup(d){const r=a.injectRequired(n.TRANSFER_CONTEXT,"SkdxTransferControls must be used within SkdxTransfer.");return(t,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-transfer__controls","data-part":"controls",role:"group","aria-label":"Move items","data-disabled":(0,e.unref)(r).disabled.value?"":void 0},[(0,e.renderSlot)(t.$slots,"default")],8,s))}});exports.default=o;

package/dist/transfer/TransferControls.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TRANSFER_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as r,inject as s,openBlock as t,renderSlot as o,unref as n}from"vue";var d=["data-disabled"],l=/* @__PURE__ */r({__name:"TransferControls",setup(r){const l=s(e);if(!l)throw new Error("SkdxTransferControls must be used within SkdxTransfer.");const i=l;return(e,r)=>(t(),a("div",{class:"skdx-transfer__controls","data-part":"controls",role:"group","aria-label":"Move items","data-disabled":n(i).disabled.value?"":void 0},[o(e.$slots,"default")],8,d))}});export{l as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{TRANSFER_CONTEXT as a}from"./context.js";import{createElementBlock as r,defineComponent as s,openBlock as t,renderSlot as o,unref as n}from"vue";var d=["data-disabled"],l=/* @__PURE__ */s({__name:"TransferControls",setup(s){const l=e(a,"SkdxTransferControls must be used within SkdxTransfer.");return(e,a)=>(t(),r("div",{class:"skdx-transfer__controls","data-part":"controls",role:"group","aria-label":"Move items","data-disabled":n(l).disabled.value?"":void 0},[o(e.$slots,"default")],8,d))}});export{l as default};

package/dist/transfer/TransferEmpty.vue.d.cts

@@ -1,30 +1,25 @@
 import { type TransferSide } from './context.cjs';
 /**
- * The message shown while one side has nothing to render — either genuinely
- * empty, or filtered down to nothing. Renders nothing otherwise, so it is safe
- * to leave in the tree permanently.
- *
- * It is a sibling of its `SkdxTransferList`, not a child: a `role="listbox"` may
- * only contain options and groups, and a bare paragraph inside one is invalid
- * ARIA that some screen readers drop entirely. Hence its own `side`.
- *
- * There is no `renderEmpty` prop. This part *is* the empty state, and a render
- * prop alongside it would be two ways to say the same thing that disagree the
- * moment someone uses both.
+ * Message shown while one side is empty or filtered to nothing, publishing `data-reason` and `data-query`.
  *
  * @example
  * ```vue
- * <SkdxTransferList side="source" />
- * <SkdxTransferEmpty side="source">Nothing left to add.</SkdxTransferEmpty>
+ * <SkdxTransferList side=”source” />
+ * <SkdxTransferEmpty side=”source” v-slot=”{ reason, query }”>
+ *   {{ reason === 'empty' ? 'Nothing left to add.' : `No match for “${query}”.` }}
+ * </SkdxTransferEmpty>
  * ```
  */
 type __VLS_Props = {
     /** Which side's emptiness this message covers. */
     side: TransferSide;
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Replacement message, given why the side is empty and the query that filtered it. */
+    default?(props: {
+        reason: 'empty' | 'no-results';
+        query: string;
+    }): unknown;
 };
 declare const __VLS_component: 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>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/transfer/TransferEmpty.vue.d.ts

@@ -1,30 +1,25 @@
 import { type TransferSide } from './context.js';
 /**
- * The message shown while one side has nothing to render — either genuinely
- * empty, or filtered down to nothing. Renders nothing otherwise, so it is safe
- * to leave in the tree permanently.
- *
- * It is a sibling of its `SkdxTransferList`, not a child: a `role="listbox"` may
- * only contain options and groups, and a bare paragraph inside one is invalid
- * ARIA that some screen readers drop entirely. Hence its own `side`.
- *
- * There is no `renderEmpty` prop. This part *is* the empty state, and a render
- * prop alongside it would be two ways to say the same thing that disagree the
- * moment someone uses both.
+ * Message shown while one side is empty or filtered to nothing, publishing `data-reason` and `data-query`.
  *
  * @example
  * ```vue
- * <SkdxTransferList side="source" />
- * <SkdxTransferEmpty side="source">Nothing left to add.</SkdxTransferEmpty>
+ * <SkdxTransferList side=”source” />
+ * <SkdxTransferEmpty side=”source” v-slot=”{ reason, query }”>
+ *   {{ reason === 'empty' ? 'Nothing left to add.' : `No match for “${query}”.` }}
+ * </SkdxTransferEmpty>
  * ```
  */
 type __VLS_Props = {
     /** Which side's emptiness this message covers. */
     side: TransferSide;
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Replacement message, given why the side is empty and the query that filtered it. */
+    default?(props: {
+        reason: 'empty' | 'no-results';
+        query: string;
+    }): unknown;
 };
 declare const __VLS_component: 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>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/transfer/TransferEmpty.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const n=require("./context.cjs");let e=require("vue");var d=["data-side"],i=(0,e.defineComponent)({inheritAttrs:!1,__name:"TransferEmpty",props:{side:{}},setup(t){const r=(0,e.inject)(n.TRANSFER_CONTEXT);if(!r)throw new Error("SkdxTransferEmpty must be used within SkdxTransfer.");const a=r;return(s,u)=>(0,e.unref)(a).visibleItems.value[t.side].length===0?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({key:0,class:"skdx-transfer__empty","data-part":"empty","data-side":t.side,"data-empty":""},s.$attrs),[(0,e.renderSlot)(s.$slots,"default")],16,d)):(0,e.createCommentVNode)("",!0)}});exports.default=i;
+const d=require("../utils/injectRequired.cjs"),i=require("./context.cjs");let e=require("vue");var o=["data-side","data-reason","data-query"],l=(0,e.defineComponent)({inheritAttrs:!1,__name:"TransferEmpty",props:{side:{}},setup(t){const s=t,r=d.injectRequired(i.TRANSFER_CONTEXT,"SkdxTransferEmpty must be used within SkdxTransfer."),a=(0,e.computed)(()=>r.sideItems.value[s.side].length===0?"empty":"no-results"),u=(0,e.computed)(()=>a.value==="no-results"?r.query.value[s.side]:"");return(n,c)=>(0,e.unref)(r).visibleItems.value[t.side].length===0?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({key:0,class:"skdx-transfer__empty","data-part":"empty","data-side":t.side,"data-empty":"","data-reason":a.value,"data-query":u.value},n.$attrs),[(0,e.renderSlot)(n.$slots,"default",{reason:a.value,query:u.value})],16,o)):(0,e.createCommentVNode)("",!0)}});exports.default=l;

package/dist/transfer/TransferEmpty.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TRANSFER_CONTEXT as e}from"./context.js";import{createCommentVNode as t,createElementBlock as s,defineComponent as a,inject as r,mergeProps as n,openBlock as o,renderSlot as d,unref as i}from"vue";var m=["data-side"],p=/* @__PURE__ */a({inheritAttrs:!1,__name:"TransferEmpty",props:{side:{}},setup(a){const p=r(e);if(!p)throw new Error("SkdxTransferEmpty must be used within SkdxTransfer.");const f=p;return(e,r)=>0===i(f).visibleItems.value[a.side].length?(o(),s("div",n({key:0,class:"skdx-transfer__empty","data-part":"empty","data-side":a.side,"data-empty":""},e.$attrs),[d(e.$slots,"default")],16,m)):t("",!0)}});export{p as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{TRANSFER_CONTEXT as a}from"./context.js";import{computed as t,createCommentVNode as s,createElementBlock as r,defineComponent as d,mergeProps as n,openBlock as o,renderSlot as u,unref as i}from"vue";var l=["data-side","data-reason","data-query"],m=/* @__PURE__ */d({inheritAttrs:!1,__name:"TransferEmpty",props:{side:{}},setup(d){const m=d,p=e(a,"SkdxTransferEmpty must be used within SkdxTransfer."),v=t(()=>0===p.sideItems.value[m.side].length?"empty":"no-results"),f=t(()=>"no-results"===v.value?p.query.value[m.side]:"");return(e,a)=>0===i(p).visibleItems.value[d.side].length?(o(),r("div",n({key:0,class:"skdx-transfer__empty","data-part":"empty","data-side":d.side,"data-empty":"","data-reason":v.value,"data-query":f.value},e.$attrs),[u(e.$slots,"default",{reason:v.value,query:f.value})],16,l)):s("",!0)}});export{m as default};

package/dist/transfer/TransferItem.vue.d.cts

@@ -1,20 +1,4 @@
-/**
- * One option inside an `SkdxTransferList` — a `role="option"` that also knows
- * which side it is on. Marking it does **not** move it: marking is the
- * transient "I want to move this" state, and an `SkdxTransferMoveTrigger` (or
- * the outward arrow key) is what commits the move.
- *
- * Click, Enter, or Space toggles it into the marked set; **Shift+Click** marks
- * the whole range from the anchor — the last option marked without Shift —
- * mirroring Shift+ArrowUp/Down.
- *
- * Publishes `aria-selected`, `data-side`, `data-value`, `data-state`,
- * `data-selected` while marked, `data-disabled`, and the roving `tabindex` its
- * list owns.
- *
- * You only render this yourself when `SkdxTransferList`'s default rendering is
- * not enough — it otherwise renders one per visible item on its side.
- */
+/** Option inside `SkdxTransferList`, `role="option"`, with click/Enter/Space marking and Shift+Click range selection. */
 type __VLS_Props = {
     /** The id of the `TransferItemData` entry this option renders. */
     value: string;
@@ -22,21 +6,21 @@ type __VLS_Props = {
      * Excludes this option from marking, navigation, and moves.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Text typeahead matches this option against, published as
      * `data-text-value`.
      * @default undefined — falls back to the option's rendered text content, indicator glyph included.
      */
-    textValue?: string;
+    textValue?: string | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => 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;
-    textValue: string;
+    disabled: boolean | undefined;
+    textValue: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/transfer/TransferItem.vue.d.ts

@@ -1,20 +1,4 @@
-/**
- * One option inside an `SkdxTransferList` — a `role="option"` that also knows
- * which side it is on. Marking it does **not** move it: marking is the
- * transient "I want to move this" state, and an `SkdxTransferMoveTrigger` (or
- * the outward arrow key) is what commits the move.
- *
- * Click, Enter, or Space toggles it into the marked set; **Shift+Click** marks
- * the whole range from the anchor — the last option marked without Shift —
- * mirroring Shift+ArrowUp/Down.
- *
- * Publishes `aria-selected`, `data-side`, `data-value`, `data-state`,
- * `data-selected` while marked, `data-disabled`, and the roving `tabindex` its
- * list owns.
- *
- * You only render this yourself when `SkdxTransferList`'s default rendering is
- * not enough — it otherwise renders one per visible item on its side.
- */
+/** Option inside `SkdxTransferList`, `role="option"`, with click/Enter/Space marking and Shift+Click range selection. */
 type __VLS_Props = {
     /** The id of the `TransferItemData` entry this option renders. */
     value: string;
@@ -22,21 +6,21 @@ type __VLS_Props = {
      * Excludes this option from marking, navigation, and moves.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Text typeahead matches this option against, published as
      * `data-text-value`.
      * @default undefined — falls back to the option's rendered text content, indicator glyph included.
      */
-    textValue?: string;
+    textValue?: string | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => 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;
-    textValue: string;
+    disabled: boolean | undefined;
+    textValue: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/transfer/TransferItem.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const E=require("../utils/useSelection.cjs"),v=require("./context.cjs");let t=require("vue");var y=["aria-selected","aria-disabled","data-side","data-value","data-text-value","data-state","data-selected","data-disabled","tabindex"],w=(0,t.defineComponent)({inheritAttrs:!1,__name:"TransferItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0}},setup(s){const a=s,f=(0,t.inject)(v.TRANSFER_CONTEXT);if(!f)throw new Error("SkdxTransferItem must be used within SkdxTransfer.");const l=f,m=(0,t.inject)(v.TRANSFER_LIST_CONTEXT);if(!m)throw new Error("SkdxTransferItem must be used within SkdxTransferList.");const b=m,u=(0,t.computed)(()=>b.side.value),r=(0,t.computed)(()=>a.disabled||l.disabled.value),d=(0,t.computed)(()=>l.marked.value[u.value].includes(a.value)),p=(0,t.computed)(()=>r.value?-1:l.active.value[u.value]===a.value?0:-1);function T(e){const n=e.closest('[role="listbox"]');return n?Array.from(n.querySelectorAll(v.OPTION_SELECTOR),i=>i.getAttribute("data-value")).filter(i=>i!==null):[]}function k(){r.value||(l.anchor[u.value]=a.value)}function x(){r.value||l.setMarked(u.value,E.nextSelection(l.marked.value[u.value],a.value,!0))}function _(e){if(r.value||!e.shiftKey){k(),x();return}e.preventDefault();const n=T(e.currentTarget),i=l.anchor[u.value]??a.value,o=n.indexOf(i),c=n.indexOf(a.value);l.setMarked(u.value,o===-1||c===-1?[a.value]:n.slice(Math.min(o,c),Math.max(o,c)+1))}function h(){r.value||l.setActive(u.value,a.value)}function S(e){e.key!==" "&&e.key!=="Enter"||(k(),e.preventDefault(),x())}return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",(0,t.mergeProps)({class:"skdx-transfer__item","data-part":"item",role:"option","aria-selected":d.value,"aria-disabled":r.value||void 0,"data-side":u.value,"data-value":s.value,"data-text-value":s.textValue,"data-state":d.value?"checked":"unchecked","data-selected":d.value?"":void 0,"data-disabled":r.value?"":void 0,tabindex:p.value},e.$attrs,{onClick:_,onFocus:h,onKeydown:S}),[(0,t.renderSlot)(e.$slots,"default")],16,y))}});exports.default=w;
+const k=require("../utils/injectRequired.cjs"),q=require("../utils/selection.cjs"),v=require("./context.cjs");let l=require("vue");var S=["aria-selected","aria-disabled","data-side","data-value","data-text-value","data-state","data-selected","data-disabled","tabindex"],y=(0,l.defineComponent)({inheritAttrs:!1,__name:"TransferItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0}},setup(d){const t=d,a=k.injectRequired(v.TRANSFER_CONTEXT,"SkdxTransferItem must be used within SkdxTransfer."),x=k.injectRequired(v.TRANSFER_LIST_CONTEXT,"SkdxTransferItem must be used within SkdxTransferList."),u=(0,l.computed)(()=>x.side.value),r=(0,l.computed)(()=>t.disabled||a.disabled.value),s=(0,l.computed)(()=>a.marked.value[u.value].includes(t.value)),b=(0,l.computed)(()=>r.value?-1:a.active.value[u.value]===t.value?0:-1);function _(e){const i=e.closest('[role="listbox"]');return i?Array.from(i.querySelectorAll(v.OPTION_SELECTOR),n=>n.getAttribute("data-value")).filter(n=>n!==null):[]}function f(){r.value||(a.anchor[u.value]=t.value)}function m(){r.value||a.setMarked(u.value,q.nextSelection(a.marked.value[u.value],t.value,!0))}function p(e){if(r.value||!e.shiftKey){f(),m();return}e.preventDefault();const i=_(e.currentTarget),n=a.anchor[u.value]??t.value,o=i.indexOf(n),c=i.indexOf(t.value);a.setMarked(u.value,o===-1||c===-1?[t.value]:i.slice(Math.min(o,c),Math.max(o,c)+1))}function T(){r.value||a.setActive(u.value,t.value)}function h(e){e.key!==" "&&e.key!=="Enter"||(e.shiftKey||f(),e.preventDefault(),m())}return(e,i)=>((0,l.openBlock)(),(0,l.createElementBlock)("div",(0,l.mergeProps)({class:"skdx-transfer__item","data-part":"item",role:"option","aria-selected":s.value,"aria-disabled":r.value||void 0,"data-side":u.value,"data-value":d.value,"data-text-value":d.textValue,"data-state":s.value?"checked":"unchecked","data-selected":s.value?"":void 0,"data-disabled":r.value?"":void 0,tabindex:b.value},e.$attrs,{onClick:p,onFocus:T,onKeydown:h}),[(0,l.renderSlot)(e.$slots,"default")],16,S))}});exports.default=y;

package/dist/transfer/TransferItem.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{nextSelection as e}from"../utils/useSelection.js";import{OPTION_SELECTOR as a,TRANSFER_CONTEXT as t,TRANSFER_LIST_CONTEXT as l}from"./context.js";import{computed as u,createElementBlock as r,defineComponent as s,inject as d,mergeProps as n,openBlock as i,renderSlot as o}from"vue";var v=["aria-selected","aria-disabled","data-side","data-value","data-text-value","data-state","data-selected","data-disabled","tabindex"],c=/* @__PURE__ */s({inheritAttrs:!1,__name:"TransferItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0}},setup(s){const c=s,f=d(t);if(!f)throw new Error("SkdxTransferItem must be used within SkdxTransfer.");const m=f,x=d(l);if(!x)throw new Error("SkdxTransferItem must be used within SkdxTransferList.");const k=x,p=u(()=>k.side.value),T=u(()=>c.disabled||m.disabled.value),b=u(()=>m.marked.value[p.value].includes(c.value)),h=u(()=>T.value?-1:m.active.value[p.value]===c.value?0:-1);function S(){T.value||(m.anchor[p.value]=c.value)}function E(){T.value||m.setMarked(p.value,e(m.marked.value[p.value],c.value,!0))}function _(e){if(T.value||!e.shiftKey)return S(),void E();e.preventDefault();const t=function(e){const t=e.closest('[role="listbox"]');return t?Array.from(t.querySelectorAll(a),e=>e.getAttribute("data-value")).filter(e=>null!==e):[]}(e.currentTarget),l=m.anchor[p.value]??c.value,u=t.indexOf(l),r=t.indexOf(c.value);m.setMarked(p.value,-1===u||-1===r?[c.value]:t.slice(Math.min(u,r),Math.max(u,r)+1))}function w(){T.value||m.setActive(p.value,c.value)}function y(e){" "!==e.key&&"Enter"!==e.key||(S(),e.preventDefault(),E())}return(e,a)=>(i(),r("div",n({class:"skdx-transfer__item","data-part":"item",role:"option","aria-selected":b.value,"aria-disabled":T.value||void 0,"data-side":p.value,"data-value":s.value,"data-text-value":s.textValue,"data-state":b.value?"checked":"unchecked","data-selected":b.value?"":void 0,"data-disabled":T.value?"":void 0,tabindex:h.value},e.$attrs,{onClick:_,onFocus:w,onKeydown:y}),[o(e.$slots,"default")],16,v))}});export{c as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{nextSelection as a}from"../utils/selection.js";import{OPTION_SELECTOR as t,TRANSFER_CONTEXT as l,TRANSFER_LIST_CONTEXT as u}from"./context.js";import{computed as d,createElementBlock as s,defineComponent as i,mergeProps as r,openBlock as n,renderSlot as o}from"vue";var v=["aria-selected","aria-disabled","data-side","data-value","data-text-value","data-state","data-selected","data-disabled","tabindex"],c=/* @__PURE__ */i({inheritAttrs:!1,__name:"TransferItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0}},setup(i){const c=i,f=e(l,"SkdxTransferItem must be used within SkdxTransfer."),m=e(u,"SkdxTransferItem must be used within SkdxTransferList."),x=d(()=>m.side.value),p=d(()=>c.disabled||f.disabled.value),k=d(()=>f.marked.value[x.value].includes(c.value)),T=d(()=>p.value?-1:f.active.value[x.value]===c.value?0:-1);function b(){p.value||(f.anchor[x.value]=c.value)}function h(){p.value||f.setMarked(x.value,a(f.marked.value[x.value],c.value,!0))}function S(e){if(p.value||!e.shiftKey)return b(),void h();e.preventDefault();const a=function(e){const a=e.closest('[role="listbox"]');return a?Array.from(a.querySelectorAll(t),e=>e.getAttribute("data-value")).filter(e=>null!==e):[]}(e.currentTarget),l=f.anchor[x.value]??c.value,u=a.indexOf(l),d=a.indexOf(c.value);f.setMarked(x.value,-1===u||-1===d?[c.value]:a.slice(Math.min(u,d),Math.max(u,d)+1))}function y(){p.value||f.setActive(x.value,c.value)}function E(e){" "!==e.key&&"Enter"!==e.key||(e.shiftKey||b(),e.preventDefault(),h())}return(e,a)=>(n(),s("div",r({class:"skdx-transfer__item","data-part":"item",role:"option","aria-selected":k.value,"aria-disabled":p.value||void 0,"data-side":x.value,"data-value":i.value,"data-text-value":i.textValue,"data-state":k.value?"checked":"unchecked","data-selected":k.value?"":void 0,"data-disabled":p.value?"":void 0,tabindex:T.value},e.$attrs,{onClick:S,onFocus:y,onKeydown:E}),[o(e.$slots,"default")],16,v))}});export{c as default};

package/dist/transfer/TransferList.vue.d.cts

@@ -1,38 +1,39 @@
-import { type TransferSide } from './context.cjs';
-/**
- * One side of an `SkdxTransfer`: a multi-select `role="listbox"` with its own tab
- * stop, its own roving focus, its own typeahead, and its own marked-for-move
- * selection. The two lists are two independent roving-focus groups — Tab moves
- * *between* them, arrows only ever move within one.
- *
- * Renders one `SkdxTransferItem` per visible item on its side by default, using
- * each item's `label` as both its content and its typeahead `textValue`. Pass
- * slot content to render the options yourself; they still get their side, their
- * marked state, and their tab stop from the root.
- *
- * Beyond the plain listbox keyboard it adds three paths:
- *
- * - **Shift+ArrowUp/Down** extends the marked range from the anchor (the last
- *   option marked without Shift), the keyboard equivalent of Shift+Click.
- * - **Ctrl/Cmd+A** marks every enabled option currently visible in this list.
- * - **The outward horizontal arrow** moves the marked items to the other list
- *   — ArrowRight from the source under LTR, and ArrowLeft under `dir="rtl"`,
- *   because the target list is on the left there. With nothing marked it moves
- *   the focused option alone.
- *
- * Publishes `data-side` and, while it has nothing to render, `data-empty` plus
- * `tabindex="0"` — an empty list stays reachable so focus after a move that
- * empties it has somewhere to land.
- */
+import { type TransferItemData, type TransferSide } from './context.cjs';
+/** One side of a Transfer: a multi-select listbox with roving focus, typeahead, and marked-for-move selection. */
 type __VLS_Props = {
-    /** Which of the two sides this list renders the items for. */
+    /** Which side (source or target) this list renders. */
     side: TransferSide;
+    /**
+     * Custom renderer for each item (replaces bare label).
+     * @default undefined — renders item.label.
+     */
+    renderItem?: ((item: TransferItemData) => unknown) | undefined;
+    /**
+     * How tightly the skin packs the list's options, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Outline the skin gives the list, reflected as `data-shape`.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders the list at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: 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>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "lg" | (string & {}) | undefined;
+    shape: "square" | "rounded" | (string & {}) | undefined;
+    density: "compact" | (string & {}) | undefined;
+    renderItem: ((item: TransferItemData) => unknown) | undefined;
+}, {}, {}, {}, 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/transfer/TransferList.vue.d.ts

@@ -1,38 +1,39 @@
-import { type TransferSide } from './context.js';
-/**
- * One side of an `SkdxTransfer`: a multi-select `role="listbox"` with its own tab
- * stop, its own roving focus, its own typeahead, and its own marked-for-move
- * selection. The two lists are two independent roving-focus groups — Tab moves
- * *between* them, arrows only ever move within one.
- *
- * Renders one `SkdxTransferItem` per visible item on its side by default, using
- * each item's `label` as both its content and its typeahead `textValue`. Pass
- * slot content to render the options yourself; they still get their side, their
- * marked state, and their tab stop from the root.
- *
- * Beyond the plain listbox keyboard it adds three paths:
- *
- * - **Shift+ArrowUp/Down** extends the marked range from the anchor (the last
- *   option marked without Shift), the keyboard equivalent of Shift+Click.
- * - **Ctrl/Cmd+A** marks every enabled option currently visible in this list.
- * - **The outward horizontal arrow** moves the marked items to the other list
- *   — ArrowRight from the source under LTR, and ArrowLeft under `dir="rtl"`,
- *   because the target list is on the left there. With nothing marked it moves
- *   the focused option alone.
- *
- * Publishes `data-side` and, while it has nothing to render, `data-empty` plus
- * `tabindex="0"` — an empty list stays reachable so focus after a move that
- * empties it has somewhere to land.
- */
+import { type TransferItemData, type TransferSide } from './context.js';
+/** One side of a Transfer: a multi-select listbox with roving focus, typeahead, and marked-for-move selection. */
 type __VLS_Props = {
-    /** Which of the two sides this list renders the items for. */
+    /** Which side (source or target) this list renders. */
     side: TransferSide;
+    /**
+     * Custom renderer for each item (replaces bare label).
+     * @default undefined — renders item.label.
+     */
+    renderItem?: ((item: TransferItemData) => unknown) | undefined;
+    /**
+     * How tightly the skin packs the list's options, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Outline the skin gives the list, reflected as `data-shape`.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders the list at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: 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>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "lg" | (string & {}) | undefined;
+    shape: "square" | "rounded" | (string & {}) | undefined;
+    density: "compact" | (string & {}) | undefined;
+    renderItem: ((item: TransferItemData) => unknown) | undefined;
+}, {}, {}, {}, 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/transfer/TransferList.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const y=require("../utils/direction.cjs"),m=require("../utils/useRovingFocus.cjs"),h=require("../utils/useTypeahead.cjs"),R=require("../utils/clamp.cjs"),d=require("./context.cjs"),D=require("./TransferItem.vue.cjs");let t=require("vue");var K=["id","aria-disabled","data-side","data-disabled","data-empty","aria-labelledby","aria-label","tabindex"],B=(0,t.defineComponent)({inheritAttrs:!1,__name:"TransferList",props:{side:{}},setup(u){const n=u,b=(0,t.inject)(d.TRANSFER_CONTEXT);if(!b)throw new Error("SkdxTransferList must be used within SkdxTransfer.");const a=b,T={source:"Available items",target:"Selected items"},g={source:"ArrowRight",target:"ArrowLeft"};function x(e,i,r){const l=e.indexOf(i),o=e.indexOf(r);return l===-1||o===-1?e.includes(r)?[r]:[]:e.slice(Math.min(l,o),Math.max(l,o)+1)}const s=(0,t.ref)(null),k=y.useDirection();(0,t.provide)(d.TRANSFER_LIST_CONTEXT,{side:(0,t.computed)(()=>n.side)}),(0,t.watchEffect)(e=>{const i=n.side;a.registerList(i,s.value),e(()=>a.registerList(i,null))},{flush:"post"}),m.useRovingTabStop(s,d.OPTION_SELECTOR,"data-value",(0,t.computed)({get:()=>a.active.value[n.side],set:e=>a.setActive(n.side,e)}));const f=(0,t.computed)(()=>a.visibleItems.value[n.side]),p=(0,t.computed)(()=>a.labelled.value[n.side]?`${a.baseId}-${n.side}-header`:void 0),_=(0,t.computed)(()=>a.disabled.value||f.value.some(e=>!e.disabled)?void 0:0);function A(){return Array.from(s.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[],e=>e.getAttribute("data-value")).filter(e=>e!==null)}function w(e){return e.getAttribute("data-text-value")??e.textContent??""}const L=m.useRovingFocus({orientation:"vertical",loop:!1,itemSelector:d.OPTION_SELECTOR,typeahead:!1}),O=h.useTypeahead();function E(e){if(a.disabled.value)return;const i=n.side,r=A();if(r.length===0)return;const l=e.target.getAttribute?.("data-value")??null;if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault(),a.setMarked(i,r);return}if(e.shiftKey&&(e.key==="ArrowDown"||e.key==="ArrowUp")){const o=l===null?-1:r.indexOf(l);if(o===-1)return;const c=R.clamp(o+(e.key==="ArrowDown"?1:-1),0,r.length-1),v=a.anchor[i]??r[o];a.anchor[i]=v,a.setMarked(i,x(r,v,r[c]));return}if(y.directionalKey(e.key,e.currentTarget,k())===g[i]){const o=a.marked.value[i],c=o.length>0?o:l?[l]:[];if(c.length===0)return;e.preventDefault(),a.move(i==="source"?"toTarget":"toSource",c)}}function S(e){if(L(e),e.defaultPrevented||!h.isTypeaheadKey(e))return;const i=s.value;if(!i)return;const r=Array.from(i.querySelectorAll(d.OPTION_SELECTOR)),l=O(e.key,r.map(w),r.indexOf(e.target));l!==-1&&(e.preventDefault(),r[l].focus())}function q(e){E(e),!e.defaultPrevented&&S(e)}return(e,i)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",(0,t.mergeProps)({id:`${(0,t.unref)(a).baseId}-${u.side}-list`,class:"skdx-listbox","data-part":"root","data-skdx-component":"listbox",ref_key:"listRef",ref:s,role:"listbox","aria-multiselectable":"true","data-multiple":"","aria-disabled":(0,t.unref)(a).disabled.value||void 0,"data-side":u.side,"data-disabled":(0,t.unref)(a).disabled.value?"":void 0,"data-empty":f.value.length===0?"":void 0,"aria-labelledby":p.value,"aria-label":p.value?void 0:T[u.side],tabindex:_.value},e.$attrs,{onKeydown:q}),[(0,t.renderSlot)(e.$slots,"default",{},()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(f.value,r=>((0,t.openBlock)(),(0,t.createBlock)(D.default,{key:r.value,value:r.value,disabled:r.disabled,"text-value":r.label},{default:(0,t.withCtx)(()=>[(0,t.createTextVNode)((0,t.toDisplayString)(r.label),1)]),_:2},1032,["value","disabled","text-value"]))),128))])],16,K))}});exports.default=B;
+const M=require("../utils/appearance.cjs"),C=require("../utils/injectRequired.cjs"),g=require("../utils/direction.cjs"),N=require("../utils/typeahead.cjs"),k=require("../utils/useRovingFocus.cjs"),$=require("../utils/useTypeahead.cjs"),H=require("../utils/clamp.cjs"),z=require("../utils/renderProp.cjs"),c=require("./context.cjs"),U=require("./TransferItem.vue.cjs");let a=require("vue");var j=["id","aria-disabled","data-side","data-disabled","data-empty","aria-labelledby","aria-label","tabindex"],X=10,G=(0,a.defineComponent)({inheritAttrs:!1,__name:"TransferList",props:{side:{},renderItem:{type:Function,default:void 0},density:{default:void 0},shape:{default:void 0},size:{default:void 0}},setup(s){const o=s,n=C.injectRequired(c.TRANSFER_CONTEXT,"SkdxTransferList must be used within SkdxTransfer."),b={source:"Available items",target:"Selected items"},h={source:"ArrowRight",target:"ArrowLeft"};function p(e,t,r){const i=e.indexOf(t),u=e.indexOf(r);return i===-1||u===-1?e.includes(r)?[r]:[]:e.slice(Math.min(i,u),Math.max(i,u)+1)}const l=(0,a.ref)(null),T=g.useDirection();(0,a.provide)(c.TRANSFER_LIST_CONTEXT,{side:(0,a.computed)(()=>o.side)}),(0,a.watchEffect)(e=>{const t=o.side;n.registerList(t,l.value),e(()=>n.registerList(t,null))},{flush:"post"}),k.useRovingTabStop(l,c.OPTION_SELECTOR,"data-value",(0,a.computed)({get:()=>n.active.value[o.side],set:e=>n.setActive(o.side,e)}));const y=(0,a.computed)(()=>n.visibleItems.value[o.side]),m=(0,a.computed)(()=>n.labelled.value[o.side]?`${n.baseId}-${o.side}-header`:void 0),v=(0,a.computed)(()=>n.disabled.value||y.value.some(e=>!e.disabled)?void 0:0);function f(){return Array.from(l.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[])}function A(){return Array.from(f(),e=>e.getAttribute("data-value")).filter(e=>e!==null)}function q(e){return e.getAttribute("data-text-value")??e.textContent??""}const x=k.useRovingFocus({orientation:"vertical",loop:!1,itemSelector:c.OPTION_SELECTOR,typeahead:!1}),w=$.useTypeahead();function E(e){if(e.key!=="PageUp"&&e.key!=="PageDown")return!1;const t=f(),r=t.indexOf(e.target);if(r===-1)return!0;e.preventDefault();const i=e.key==="PageDown"?X:-10;return t[Math.min(t.length-1,Math.max(0,r+i))]?.focus(),!0}function R(e,t,r){if(!e.shiftKey||!e.ctrlKey&&!e.metaKey||e.key!=="Home"&&e.key!=="End")return!1;if(r===null)return!0;e.preventDefault();const i=e.key==="Home"?t[0]:t[t.length-1];n.setMarked(o.side,p(t,r,i));const u=f();return u[e.key==="Home"?0:u.length-1].focus(),!0}function O(e,t){if(!e.ctrlKey&&!e.metaKey||e.key.toLowerCase()!=="a")return!1;e.preventDefault();const r=n.marked.value[o.side],i=t.every(u=>r.includes(u));return n.setMarked(o.side,i?[]:t),!0}function S(e,t,r){if(!e.shiftKey||e.key!==" ")return!1;if(r===null)return!0;e.preventDefault();const i=n.anchor[o.side]??r;return n.anchor[o.side]=i,n.setMarked(o.side,p(t,i,r)),!0}function L(e,t,r){if(!e.shiftKey||e.key!=="ArrowDown"&&e.key!=="ArrowUp")return!1;const i=r===null?-1:t.indexOf(r);if(i===-1)return!0;const u=H.clamp(i+(e.key==="ArrowDown"?1:-1),0,t.length-1),d=n.anchor[o.side]??t[i];return n.anchor[o.side]=d,n.setMarked(o.side,p(t,d,t[u])),!0}function _(e,t){if(g.directionalKey(e.key,e.currentTarget,T())!==h[o.side])return;const r=n.marked.value[o.side];let i=[];r.length>0?i=r:t&&(i=[t]),i.length!==0&&(e.preventDefault(),n.move(o.side==="source"?"toTarget":"toSource",i))}function D(e){if(n.disabled.value)return;const t=A();if(t.length===0)return;const r=e.target.getAttribute?.("data-value")??null;E(e)||R(e,t,r)||O(e,t)||S(e,t,r)||L(e,t,r)||_(e,r)}function I(e){if(x(e),e.defaultPrevented||!N.isTypeaheadKey(e))return;const t=l.value;if(!t)return;const r=Array.from(t.querySelectorAll(c.OPTION_SELECTOR)),i=w(e.key,r.map(q),r.indexOf(e.target));i!==-1&&(e.preventDefault(),r[i].focus())}function K(e){n.emitListScroll(o.side,e.currentTarget)}function B(e){if(n.disabled.value)return;if(n.suppressFocusIn.current){n.suppressFocusIn.current=!1;return}const t=l.value;if(!t)return;const r=e.relatedTarget;if(r&&t.contains(r))return;const i=f();if(i.length===0)return;const u=n.marked.value[o.side],d=i.find(P=>u.includes(P.getAttribute("data-value")??""))??i[0];d!==e.target&&d.focus()}function F(e){D(e),!e.defaultPrevented&&I(e)}return(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",(0,a.mergeProps)({id:`${(0,a.unref)(n).baseId}-${s.side}-list`,ref_key:"listRef",ref:l,class:"skdx-listbox","data-part":"root","data-skdx-component":"listbox",role:"listbox","aria-orientation":"vertical","aria-multiselectable":"true","data-multiple":"","aria-disabled":(0,a.unref)(n).disabled.value||void 0,"data-side":s.side,"data-disabled":(0,a.unref)(n).disabled.value?"":void 0,"data-empty":y.value.length===0?"":void 0,"aria-labelledby":m.value,"aria-label":m.value?void 0:b[s.side],tabindex:v.value},{...e.$attrs,...(0,a.unref)(M.appearanceAttrs)({density:s.density,shape:s.shape,size:s.size},e.$attrs)},{onKeydown:F,onScroll:K,onFocusin:B}),[(0,a.renderSlot)(e.$slots,"default",{},()=>[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(y.value,r=>((0,a.openBlock)(),(0,a.createBlock)(U.default,{key:r.value,value:r.value,disabled:r.disabled,"text-value":r.label},{default:(0,a.withCtx)(()=>[typeof s.renderItem=="function"?((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(z.RenderProp),{key:0,render:()=>o.renderItem(r)},null,8,["render"])):((0,a.openBlock)(),(0,a.createElementBlock)(a.Fragment,{key:1},[(0,a.createTextVNode)((0,a.toDisplayString)(r.label),1)],64))]),_:2},1032,["value","disabled","text-value"]))),128))])],16,j))}});exports.default=G;

package/dist/transfer/TransferList.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e,useDirection as t}from"../utils/direction.js";import{useRovingFocus as a,useRovingTabStop as r}from"../utils/useRovingFocus.js";import{isTypeaheadKey as s,useTypeahead as i}from"../utils/useTypeahead.js";import{clamp as l}from"../utils/clamp.js";import{OPTION_SELECTOR as o,TRANSFER_CONTEXT as d,TRANSFER_LIST_CONTEXT as n}from"./context.js";import u from"./TransferItem.vue.js";import{Fragment as c,computed as v,createBlock as f,createElementBlock as m,createTextVNode as b,defineComponent as p,inject as y,mergeProps as g,openBlock as h,provide as x,ref as T,renderList as k,renderSlot as A,toDisplayString as w,unref as S,watchEffect as R,withCtx as E}from"vue";var L=["id","aria-disabled","data-side","data-disabled","data-empty","aria-labelledby","aria-label","tabindex"],O=/* @__PURE__ */p({inheritAttrs:!1,__name:"TransferList",props:{side:{}},setup(p){const O=p,_=y(d);if(!_)throw new Error("SkdxTransferList must be used within SkdxTransfer.");const j=_,C={source:"Available items",target:"Selected items"},D={source:"ArrowRight",target:"ArrowLeft"},I=T(null),K=t();x(n,{side:v(()=>O.side)}),R(e=>{const t=O.side;j.registerList(t,I.value),e(()=>j.registerList(t,null))},{flush:"post"}),r(I,o,"data-value",v({get:()=>j.active.value[O.side],set:e=>j.setActive(O.side,e)}));const N=v(()=>j.visibleItems.value[O.side]),$=v(()=>j.labelled.value[O.side]?`${j.baseId}-${O.side}-header`:void 0),F=v(()=>j.disabled.value||N.value.some(e=>!e.disabled)?void 0:0);function M(e){return e.getAttribute("data-text-value")??e.textContent??""}const P=a({orientation:"vertical",loop:!1,itemSelector:o,typeahead:!1}),B=i();function q(t){(function(t){if(j.disabled.value)return;const a=O.side,r=Array.from(I.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[],e=>e.getAttribute("data-value")).filter(e=>null!==e);if(0===r.length)return;const s=t.target.getAttribute?.("data-value")??null;if((t.ctrlKey||t.metaKey)&&"a"===t.key.toLowerCase())return t.preventDefault(),void j.setMarked(a,r);if(t.shiftKey&&("ArrowDown"===t.key||"ArrowUp"===t.key)){const e=null===s?-1:r.indexOf(s);if(-1===e)return;const i=l(e+("ArrowDown"===t.key?1:-1),0,r.length-1),o=j.anchor[a]??r[e];return j.anchor[a]=o,void j.setMarked(a,function(e,t,a){const r=e.indexOf(t),s=e.indexOf(a);return-1===r||-1===s?e.includes(a)?[a]:[]:e.slice(Math.min(r,s),Math.max(r,s)+1)}(r,o,r[i]))}if(e(t.key,t.currentTarget,K())===D[a]){const e=j.marked.value[a],r=e.length>0?e:s?[s]:[];if(0===r.length)return;t.preventDefault(),j.move("source"===a?"toTarget":"toSource",r)}})(t),!t.defaultPrevented&&function(e){if(P(e),e.defaultPrevented||!s(e))return;const t=I.value;if(!t)return;const a=Array.from(t.querySelectorAll(o)),r=B(e.key,a.map(M),a.indexOf(e.target));-1!==r&&(e.preventDefault(),a[r].focus())}(t)}return(e,t)=>(h(),m("div",g({id:`${S(j).baseId}-${p.side}-list`,class:"skdx-listbox","data-part":"root","data-skdx-component":"listbox",ref_key:"listRef",ref:I,role:"listbox","aria-multiselectable":"true","data-multiple":"","aria-disabled":S(j).disabled.value||void 0,"data-side":p.side,"data-disabled":S(j).disabled.value?"":void 0,"data-empty":0===N.value.length?"":void 0,"aria-labelledby":$.value,"aria-label":$.value?void 0:C[p.side],tabindex:F.value},e.$attrs,{onKeydown:q}),[A(e.$slots,"default",{},()=>[(h(!0),m(c,null,k(N.value,e=>(h(),f(u,{key:e.value,value:e.value,disabled:e.disabled,"text-value":e.label},{default:E(()=>[b(w(e.label),1)]),_:2},1032,["value","disabled","text-value"]))),128))])],16,L))}});export{O as default};
+import{appearanceAttrs as e}from"../utils/appearance.js";import{injectRequired as t}from"../utils/injectRequired.js";import{directionalKey as a,useDirection as r}from"../utils/direction.js";import{isTypeaheadKey as s}from"../utils/typeahead.js";import{useRovingFocus as i,useRovingTabStop as n}from"../utils/useRovingFocus.js";import{useTypeahead as o}from"../utils/useTypeahead.js";import{clamp as l}from"../utils/clamp.js";import{RenderProp as u}from"../utils/renderProp.js";import{OPTION_SELECTOR as d,TRANSFER_CONTEXT as c,TRANSFER_LIST_CONTEXT as f}from"./context.js";import v from"./TransferItem.vue.js";import{Fragment as m,computed as p,createBlock as y,createElementBlock as b,createTextVNode as g,defineComponent as h,mergeProps as k,openBlock as x,provide as T,ref as A,renderList as S,renderSlot as w,toDisplayString as R,unref as j,watchEffect as D,withCtx as I}from"vue";var K=["id","aria-disabled","data-side","data-disabled","data-empty","aria-labelledby","aria-label","tabindex"],L=/* @__PURE__ */h({inheritAttrs:!1,__name:"TransferList",props:{side:{},renderItem:{type:Function,default:void 0},density:{default:void 0},shape:{default:void 0},size:{default:void 0}},setup(h){const L=h,O=t(c,"SkdxTransferList must be used within SkdxTransfer."),E={source:"Available items",target:"Selected items"},F={source:"ArrowRight",target:"ArrowLeft"};function P(e,t,a){const r=e.indexOf(t),s=e.indexOf(a);return-1===r||-1===s?e.includes(a)?[a]:[]:e.slice(Math.min(r,s),Math.max(r,s)+1)}const M=A(null),_=r();T(f,{side:p(()=>L.side)}),D(e=>{const t=L.side;O.registerList(t,M.value),e(()=>O.registerList(t,null))},{flush:"post"}),n(M,d,"data-value",p({get:()=>O.active.value[L.side],set:e=>O.setActive(L.side,e)}));const C=p(()=>O.visibleItems.value[L.side]),$=p(()=>O.labelled.value[L.side]?`${O.baseId}-${L.side}-header`:void 0),N=p(()=>O.disabled.value||C.value.some(e=>!e.disabled)?void 0:0);function q(){return Array.from(M.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[])}function z(e){return e.getAttribute("data-text-value")??e.textContent??""}const B=i({orientation:"vertical",loop:!1,itemSelector:d,typeahead:!1}),H=o();function U(e){O.emitListScroll(L.side,e.currentTarget)}function X(e){if(O.disabled.value)return;if(O.suppressFocusIn.current)return void(O.suppressFocusIn.current=!1);const t=M.value;if(!t)return;const a=e.relatedTarget;if(a&&t.contains(a))return;const r=q();if(0===r.length)return;const s=O.marked.value[L.side],i=r.find(e=>s.includes(e.getAttribute("data-value")??""))??r[0];i!==e.target&&i.focus()}function V(e){(function(e){if(O.disabled.value)return;const t=Array.from(q(),e=>e.getAttribute("data-value")).filter(e=>null!==e);if(0===t.length)return;const r=e.target.getAttribute?.("data-value")??null;(function(e){if("PageUp"!==e.key&&"PageDown"!==e.key)return!1;const t=q(),a=t.indexOf(e.target);if(-1===a)return!0;e.preventDefault();const r="PageDown"===e.key?10:-10;return t[Math.min(t.length-1,Math.max(0,a+r))]?.focus(),!0})(e)||function(e,t,a){if(!e.shiftKey||!e.ctrlKey&&!e.metaKey||"Home"!==e.key&&"End"!==e.key)return!1;if(null===a)return!0;e.preventDefault();const r="Home"===e.key?t[0]:t[t.length-1];O.setMarked(L.side,P(t,a,r));const s=q();return s["Home"===e.key?0:s.length-1].focus(),!0}(e,t,r)||function(e,t){if(!e.ctrlKey&&!e.metaKey||"a"!==e.key.toLowerCase())return!1;e.preventDefault();const a=O.marked.value[L.side],r=t.every(e=>a.includes(e));return O.setMarked(L.side,r?[]:t),!0}(e,t)||function(e,t,a){if(!e.shiftKey||" "!==e.key)return!1;if(null===a)return!0;e.preventDefault();const r=O.anchor[L.side]??a;return O.anchor[L.side]=r,O.setMarked(L.side,P(t,r,a)),!0}(e,t,r)||function(e,t,a){if(!e.shiftKey||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)return!1;const r=null===a?-1:t.indexOf(a);if(-1===r)return!0;const s=l(r+("ArrowDown"===e.key?1:-1),0,t.length-1),i=O.anchor[L.side]??t[r];return O.anchor[L.side]=i,O.setMarked(L.side,P(t,i,t[s])),!0}(e,t,r)||function(e,t){if(a(e.key,e.currentTarget,_())!==F[L.side])return;const r=O.marked.value[L.side];let s=[];r.length>0?s=r:t&&(s=[t]),0!==s.length&&(e.preventDefault(),O.move("source"===L.side?"toTarget":"toSource",s))}(e,r)})(e),!e.defaultPrevented&&function(e){if(B(e),e.defaultPrevented||!s(e))return;const t=M.value;if(!t)return;const a=Array.from(t.querySelectorAll(d)),r=H(e.key,a.map(z),a.indexOf(e.target));-1!==r&&(e.preventDefault(),a[r].focus())}(e)}return(t,a)=>(x(),b("div",k({id:`${j(O).baseId}-${h.side}-list`,ref_key:"listRef",ref:M,class:"skdx-listbox","data-part":"root","data-skdx-component":"listbox",role:"listbox","aria-orientation":"vertical","aria-multiselectable":"true","data-multiple":"","aria-disabled":j(O).disabled.value||void 0,"data-side":h.side,"data-disabled":j(O).disabled.value?"":void 0,"data-empty":0===C.value.length?"":void 0,"aria-labelledby":$.value,"aria-label":$.value?void 0:E[h.side],tabindex:N.value},{...t.$attrs,...j(e)({density:h.density,shape:h.shape,size:h.size},t.$attrs)},{onKeydown:V,onScroll:U,onFocusin:X}),[w(t.$slots,"default",{},()=>[(x(!0),b(m,null,S(C.value,e=>(x(),y(v,{key:e.value,value:e.value,disabled:e.disabled,"text-value":e.label},{default:I(()=>["function"==typeof h.renderItem?(x(),y(j(u),{key:0,render:()=>L.renderItem(e)},null,8,["render"])):(x(),b(m,{key:1},[g(R(e.label),1)],64))]),_:2},1032,["value","disabled","text-value"]))),128))])],16,K))}});export{L as default};

package/dist/transfer/TransferListHeader.vue.d.cts

@@ -1,17 +1,6 @@
 import { type TransferSide } from './context.cjs';
 /**
- * The visible heading naming one of the two lists, and the element that list
- * points `aria-labelledby` at. Give both sides one: "Available" and "Selected"
- * next to two otherwise identical listboxes is the whole difference between a
- * usable widget and two anonymous lists.
- *
- * It sits *beside* its `SkdxTransferList`, not inside it — a `role="listbox"`
- * may only contain options and groups, so a heading inside one is invalid ARIA.
- * That is also why it takes its own `side`: it has no list around it to inherit
- * one from.
- *
- * Rendering one is what switches its list from a generic fallback name
- * ("Available items") to this heading's text.
+ * The visible heading naming one of the two lists, sitting beside (not inside) its `SkdxTransferList`.
  *
  * @example
  * ```vue

package/dist/transfer/TransferListHeader.vue.d.ts

@@ -1,17 +1,6 @@
 import { type TransferSide } from './context.js';
 /**
- * The visible heading naming one of the two lists, and the element that list
- * points `aria-labelledby` at. Give both sides one: "Available" and "Selected"
- * next to two otherwise identical listboxes is the whole difference between a
- * usable widget and two anonymous lists.
- *
- * It sits *beside* its `SkdxTransferList`, not inside it — a `role="listbox"`
- * may only contain options and groups, so a heading inside one is invalid ARIA.
- * That is also why it takes its own `side`: it has no list around it to inherit
- * one from.
- *
- * Rendering one is what switches its list from a generic fallback name
- * ("Available items") to this heading's text.
+ * The visible heading naming one of the two lists, sitting beside (not inside) its `SkdxTransferList`.
  *
  * @example
  * ```vue

package/dist/transfer/TransferListHeader.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const n=require("./context.cjs");let e=require("vue");var o=["id","data-side"],u=(0,e.defineComponent)({__name:"TransferListHeader",props:{side:{}},setup(t){const s=t,d=(0,e.inject)(n.TRANSFER_CONTEXT);if(!d)throw new Error("SkdxTransferListHeader must be used within SkdxTransfer.");const r=d;return r.registerHeader(s.side,!0),(0,e.watch)(()=>s.side,(a,i)=>{r.registerHeader(i,!1),r.registerHeader(a,!0)}),(0,e.onScopeDispose)(()=>r.registerHeader(s.side,!1)),(a,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-transfer__list-header","data-part":"list-header",id:`${(0,e.unref)(r).baseId}-${t.side}-header`,"data-side":t.side},[(0,e.renderSlot)(a.$slots,"default")],8,o))}});exports.default=u;
+const i=require("../utils/injectRequired.cjs"),n=require("./context.cjs");let e=require("vue");var u=["id","data-side"],c=(0,e.defineComponent)({__name:"TransferListHeader",props:{side:{}},setup(t){const s=t,r=i.injectRequired(n.TRANSFER_CONTEXT,"SkdxTransferListHeader must be used within SkdxTransfer.");return r.registerHeader(s.side,!0),(0,e.watch)(()=>s.side,(d,a)=>{r.registerHeader(a,!1),r.registerHeader(d,!0)}),(0,e.onScopeDispose)(()=>r.registerHeader(s.side,!1)),(d,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{id:`${(0,e.unref)(r).baseId}-${t.side}-header`,class:"skdx-transfer__list-header","data-part":"list-header","data-side":t.side},[(0,e.renderSlot)(d.$slots,"default")],8,u))}});exports.default=c;