@skdx/web-components 0.27.0 → 0.28.0

package/dist/transfer/TransferList.d.ts

@@ -1,77 +1,69 @@
 import { SkdxListbox } from '../listbox/Listbox.js';
-import type { TransferSide } from './types.js';
+import type { TransferItemData, TransferSide } from './types.js';
 import './TransferItem.js';
 /**
- * `<skdx-transfer-list>` — one side of a `<skdx-transfer>`: a multi-select
- * `role="listbox"` extending `<skdx-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.
+ * One side of a `<skdx-transfer>`: multi-select `role="listbox"` with roving
+ * focus, typeahead, and marked-for-move selection. Tab moves between lists,
+ * arrows only within one. Renders one `<skdx-transfer-item>` per visible item
+ * (label as text-value), replaced entirely if slot has content. Adds
+ * Shift+ArrowUp/Down (extend from anchor), Ctrl/Cmd+A (toggle all visible),
+ * outward horizontal arrow (move marked to other list; alone if unmarked).
+ * Focus from outside retargets to first marked option or first option (APG
+ * multi-select rule). Publishes `data-side` and `data-empty` (with
+ * `tabindex="0"` so empty list stays focusable). Fires `list-scroll` on scroll.
  *
- * Renders one `<skdx-transfer-item>` per visible item on its side, using each
- * item's `label` as both its content and its typeahead `text-value` — but only
- * while it is empty. Slot anything in and that rendering stops entirely, the
- * same rule as React's `{children ?? visible.map(…)}`; slotted options still
- * get their side, their marked state, and their tab stop from the root.
- *
- * Beyond what `<skdx-listbox>` already handles it adds three keyboard 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 focusable to render,
- * `data-empty` plus `tabindex="0"` — an empty list stays reachable so focus
- * after a move that empties it has somewhere to land.
- *
- * @fires value-change - Fired with this side's new marked values (`string[]`) whenever an item is marked or unmarked.
+ * @fires value-change - Fired with this side's new marked values whenever an item is marked or unmarked.
  */
 export declare class SkdxTransferList extends SkdxListbox {
     /** Which of the two lists this is. Required. */
     side: TransferSide;
+    /**
+     * Renders item content (replaces label). Falls back to root's `renderItem` or plain text.
+     * Property-only, not an attribute.
+     * @default undefined
+     */
+    renderItem?: (item: TransferItemData, state: {
+        side: TransferSide;
+    }) => unknown;
     private transfer;
     private readonly onTransferUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * APG multi-select rule: focus from outside lands on first marked option or
+     * first option (never the roving tab stop), especially needed after search
+     * moves focused option. `relatedTarget` distinguishes outer focus (act) from
+     * inner sibling move (skip, avoid loop when refocusing).
+     */
+    private readonly handleFocusIn;
+    /**
+     * Re-emit scroll geometry to root (list is the scroll container).
+     */
+    private readonly handleScroll;
     /** The items this side renders right now. */
     private get visible();
+    /** Option elements of this list in DOM order, skipping the disabled ones. */
+    private optionElements;
     /** Option values of this list in DOM order, skipping the disabled ones. */
     private optionValues;
     protected willUpdate(): void;
     protected updated(changed: Map<string, unknown>): void;
-    /** The root owns the marked set; `<skdx-listbox>`'s own commit routes into it. */
+    /** Route listbox commit to root's marked set. */
     selectItem(value: string): void;
-    /** Moves the roving focus, mirroring it onto the parent transfer's side. */
+    /** Sync the roving focus position with the root transfer element. */
     setActiveValue(value: string | null): void;
     private readonly handleTransferKeyDown;
     /**
-     * Whether the consumer slotted anything of their own, which replaces the
-     * default rendering entirely.
-     *
-     * *Anything*, not "an option": React renders `{children ?? visible.map(…)}`
-     * (`packages/react/src/transfer/TransferList.tsx:157`), so a list holding
-     * only a header renders that header and nothing else. Asking the narrower
-     * question this used to ask — "is there a `<skdx-transfer-item>` or a
-     * `[role=option]` in here?" — answers "no children" for that consumer and
-     * then generates the rows underneath what they wrote, which is the
-     * duplicate-content defect already fixed in Angular.
+     * Whether consumer slotted anything (replaces default rendering).
+     * Checks *anything*, not just options (header alone blocks render).
      */
     private get hasAuthoredChildren();
     /**
-     * Reconciles one `<skdx-transfer-item>` per visible item, in place.
-     *
-     * Written by hand into the light DOM rather than as a `lit-html` template
-     * because the options have to be real `role="option"` *children* of this
-     * `role="listbox"` host (a template would render into the shadow root, where
-     * `<skdx-listbox>`'s `querySelectorAll` could not see them), and because the
-     * consumer's own authored options have to survive untouched.
+     * Reconcile one `<skdx-transfer-item>` per visible item, in place.
+     * Hand-written to light DOM (not shadow) so listbox's `querySelectorAll` finds them.
      */
     private syncDefaultOptions;
-    /** Hands the list back to the consumer, taking every row this element put there. */
+    /** Remove generated rows, return list to consumer. */
     private removeGeneratedOptions;
 }
 declare global {

package/dist/transfer/TransferList.js

@@ -1 +1 @@
-var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=(n,a,e,t)=>{for(var s=t>1?void 0:t?b(a,e):a,i=n.length-1,r;i>=0;i--)(r=n[i])&&(s=(t?r(a,e,s):r(s))||s);return t&&s&&m(a,e,s),s};import{property as p}from"lit/decorators.js";import{hasAuthoredContent as v,removeGeneratedContent as A}from"../internal/authored.js";import{customElement as g}from"../internal/define.js";import{directionalKey as y}from"../internal/direction.js";import{SkdxListbox as E}from"../listbox/Listbox.js";import{OPTION_SELECTOR as k,TRANSFER_INTERNAL_UPDATE as f}from"./Transfer.js";import"./TransferItem.js";var o="data-skdx-transfer-generated",x={source:"Available items",target:"Selected items"},T={source:"ArrowRight",target:"ArrowLeft"};function w(n,a,e){let t=n.indexOf(a),s=n.indexOf(e);return t===-1||s===-1?n.includes(e)?[e]:[]:n.slice(Math.min(t,s),Math.max(t,s)+1)}function C(n,a,e){return Math.min(Math.max(n,a),e)}var d=class extends E{constructor(){super(...arguments);this.side="source";this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate();this.handleTransferKeyDown=e=>{let t=this.transfer;if(!t||t.disabled)return;let s=this.optionValues();if(s.length===0)return;let i=e.target.getAttribute?.("data-value")??null,r=t.marked[this.side];if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault(),t.setMarked(this.side,s);return}if(e.shiftKey&&(e.key==="ArrowDown"||e.key==="ArrowUp")){let l=i===null?-1:s.indexOf(i);if(l===-1)return;let c=C(l+(e.key==="ArrowDown"?1:-1),0,s.length-1),u=t.anchor[this.side]??s[l];t.anchor[this.side]=u,t.setMarked(this.side,w(s,u,s[c]));return}if(y(e.key,this)===T[this.side]){let l=r.length>0?r:i?[i]:[];if(l.length===0)return;e.preventDefault(),t.move(this.side==="source"?"toTarget":"toSource",l)}}}connectedCallback(){this.multiple=!0,super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(f,this.onTransferUpdate),this.transfer&&(this.transfer.listEls[this.side]=this,this.id||(this.id=this.transfer.listId(this.side))),this.addEventListener("keydown",this.handleTransferKeyDown)}disconnectedCallback(){this.transfer?.removeEventListener(f,this.onTransferUpdate),this.transfer?.listEls[this.side]===this&&(this.transfer.listEls[this.side]=null),this.removeEventListener("keydown",this.handleTransferKeyDown),super.disconnectedCallback()}get visible(){return this.transfer?.visibleItems[this.side]??[]}optionValues(){return Array.from(this.querySelectorAll(k),e=>e.getAttribute("data-value")).filter(e=>e!==null)}willUpdate(){this.value=this.transfer?.marked[this.side]??[],this.disabled=this.transfer?.disabled??!1,super.willUpdate();let e=this.transfer?.getActive(this.side)??null;e!==null&&this.optionValues().includes(e)?this.activeValue=e:this.activeValue!==null&&!this.optionValues().includes(this.activeValue)&&(this.activeValue=null)}updated(e){this.transfer&&(this.hasAuthoredChildren?this.removeGeneratedOptions():this.syncDefaultOptions()),super.updated(e);let t=this.visible,s=this.transfer?.isLabelled(this.side)??!1;this.setAttribute("data-side",this.side),t.length===0?this.setAttribute("data-empty",""):this.removeAttribute("data-empty"),s&&this.transfer?(this.setAttribute("aria-labelledby",this.transfer.headerId(this.side)),this.removeAttribute("aria-label")):(this.removeAttribute("aria-labelledby"),this.setAttribute("aria-label",x[this.side]));let i=t.some(r=>!r.disabled);!this.disabled&&!i?this.tabIndex=0:this.removeAttribute("tabindex")}selectItem(e){if(this.disabled)return;let t=this.transfer?.marked[this.side]??[],s=t.includes(e)?t.filter(i=>i!==e):[...t,e];this.transfer?.setMarked(this.side,s),this.dispatchEvent(new CustomEvent("value-change",{detail:s,bubbles:!0,composed:!0}))}setActiveValue(e){super.setActiveValue(e),this.transfer?.setActive(this.side,e)}get hasAuthoredChildren(){return v(this,o)}syncDefaultOptions(){let e=this.visible,t=new Map(Array.from(this.querySelectorAll(`:scope > skdx-transfer-item[${o}]`),i=>[i.getAttribute("value")??"",i])),s=null;for(let i of e){let r=t.get(i.value);r||(r=document.createElement("skdx-transfer-item"),r.setAttribute("value",i.value),r.setAttribute(o,"")),t.delete(i.value),r.setAttribute("text-value",i.label),i.disabled?r.setAttribute("disabled",""):r.removeAttribute("disabled"),r.textContent!==i.label&&(r.textContent=i.label);let l=s===null?this.firstElementChild:s.nextElementSibling;l!==r&&this.insertBefore(r,l),s=r}for(let i of t.values())i.remove()}removeGeneratedOptions(){A(this,o)}};h([p({type:String,reflect:!0})],d.prototype,"side",2),d=h([g("skdx-transfer-list")],d);export{d as SkdxTransferList};
+var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var h=(a,l,e,s)=>{for(var t=s>1?void 0:s?v(l,e):l,n=a.length-1,r;n>=0;n--)(r=a[n])&&(t=(s?r(l,e,t):r(t))||t);return s&&t&&b(l,e,t),t};import{render as g}from"lit";import{property as m}from"lit/decorators.js";import{hasAuthoredContent as y,removeGeneratedContent as E}from"../internal/authored.js";import{customElement as A,whenUpgraded as k}from"../internal/define.js";import{directionalKey as T}from"../internal/direction.js";import{SkdxListbox as w}from"../listbox/Listbox.js";import{OPTION_SELECTOR as x,TRANSFER_INTERNAL_UPDATE as p}from"./Transfer.js";import"./TransferItem.js";var u="data-skdx-transfer-generated",L={source:"Available items",target:"Selected items"},M={source:"ArrowRight",target:"ArrowLeft"};function f(a,l,e){let s=a.indexOf(l),t=a.indexOf(e);return s===-1||t===-1?a.includes(e)?[e]:[]:a.slice(Math.min(s,t),Math.max(s,t)+1)}function D(a,l,e){return Math.min(Math.max(a,l),e)}var d=class extends w{constructor(){super(...arguments);this.side="source";this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate();this.handleFocusIn=e=>{let s=e.relatedTarget;if(s&&this.contains(s))return;let t=this.transfer?.marked[this.side]??[],n=this.optionElements();if(n.length===0)return;let r=(t.length>0?n.find(i=>t.includes(i.getAttribute("data-value")??"")):void 0)??n[0];e.target!==r&&r.focus()};this.handleScroll=()=>{this.transfer?.emitListScroll(this.side,this)};this.handleTransferKeyDown=e=>{let s=this.transfer;if(!s||s.disabled)return;let t=this.optionValues();if(t.length===0)return;let n=e.target.getAttribute?.("data-value")??null,r=s.marked[this.side];if(e.shiftKey&&(e.ctrlKey||e.metaKey)&&(e.key==="Home"||e.key==="End")){if(n===null)return;e.preventDefault();let i=e.key==="Home"?t[0]:t[t.length-1];s.setMarked(this.side,f(t,n,i));let o=this.optionElements();o[e.key==="Home"?0:o.length-1]?.focus();return}if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault();let i=t.every(o=>r.includes(o));s.setMarked(this.side,i?[]:t);return}if(e.shiftKey&&e.key===" "){if(n===null)return;e.preventDefault();let i=s.anchor[this.side]??n;s.anchor[this.side]=i,s.setMarked(this.side,f(t,i,n));return}if(e.shiftKey&&(e.key==="ArrowDown"||e.key==="ArrowUp")){let i=n===null?-1:t.indexOf(n);if(i===-1)return;let o=D(i+(e.key==="ArrowDown"?1:-1),0,t.length-1),c=s.anchor[this.side]??t[i];s.anchor[this.side]=c,s.setMarked(this.side,f(t,c,t[o]));return}if(T(e.key,this)===M[this.side]){let i=r.length>0?r:n?[n]:[];if(i.length===0)return;e.preventDefault(),s.move(this.side==="source"?"toTarget":"toSource",i)}}}connectedCallback(){this.multiple=!0,super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(p,this.onTransferUpdate),this.addEventListener("keydown",this.handleTransferKeyDown),this.addEventListener("scroll",this.handleScroll),this.addEventListener("focusin",this.handleFocusIn),this.transfer&&k(this.transfer,()=>{this.transfer&&(this.transfer.listEls[this.side]=this,this.id||(this.id=this.transfer.listId(this.side)))})}disconnectedCallback(){this.transfer?.removeEventListener(p,this.onTransferUpdate),this.transfer?.listEls[this.side]===this&&(this.transfer.listEls[this.side]=null),this.removeEventListener("keydown",this.handleTransferKeyDown),this.removeEventListener("scroll",this.handleScroll),this.removeEventListener("focusin",this.handleFocusIn),super.disconnectedCallback()}get visible(){return this.transfer?.visibleItems[this.side]??[]}optionElements(){return Array.from(this.querySelectorAll(x))}optionValues(){return Array.from(this.optionElements(),e=>e.getAttribute("data-value")).filter(e=>e!==null)}willUpdate(){this.value=this.transfer?.marked[this.side]??[],this.disabled=this.transfer?.disabled??!1,super.willUpdate();let e=this.transfer?.getActive(this.side)??null;e!==null&&this.optionValues().includes(e)?this.activeValue=e:this.activeValue!==null&&!this.optionValues().includes(this.activeValue)&&(this.activeValue=null)}updated(e){this.transfer&&(this.hasAuthoredChildren?this.removeGeneratedOptions():this.syncDefaultOptions()),super.updated(e);let s=this.visible,t=this.transfer?.isLabelled(this.side)??!1;this.setAttribute("data-side",this.side),s.length===0?this.setAttribute("data-empty",""):this.removeAttribute("data-empty"),t&&this.transfer?(this.setAttribute("aria-labelledby",this.transfer.headerId(this.side)),this.removeAttribute("aria-label")):(this.removeAttribute("aria-labelledby"),this.setAttribute("aria-label",L[this.side]));let n=s.some(r=>!r.disabled);!this.disabled&&!n?this.tabIndex=0:this.removeAttribute("tabindex")}selectItem(e){if(this.disabled)return;let s=this.transfer?.marked[this.side]??[],t=s.includes(e)?s.filter(n=>n!==e):[...s,e];this.transfer?.setMarked(this.side,t),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0}))}setActiveValue(e){super.setActiveValue(e),this.transfer?.setActive(this.side,e)}get hasAuthoredChildren(){return y(this,u)}syncDefaultOptions(){let e=this.visible,s=this.renderItem??this.transfer?.renderItem,t=new Map(Array.from(this.querySelectorAll(`:scope > skdx-transfer-item[${u}]`),r=>[r.getAttribute("value")??"",r])),n=null;for(let r of e){let i=t.get(r.value);i||(i=document.createElement("skdx-transfer-item"),i.setAttribute("value",r.value),i.setAttribute(u,"")),t.delete(r.value),i.setAttribute("text-value",r.label),r.disabled?i.setAttribute("disabled",""):i.removeAttribute("disabled"),s?g(s(r,{side:this.side}),i,{host:this.transfer}):i.textContent!==r.label&&(i.textContent=r.label);let o=n===null?this.firstElementChild:n.nextElementSibling;o!==i&&this.insertBefore(i,o),n=i}for(let r of t.values())r.remove()}removeGeneratedOptions(){E(this,u)}};h([m({type:String,reflect:!0})],d.prototype,"side",2),h([m({attribute:!1})],d.prototype,"renderItem",2),d=h([A("skdx-transfer-list")],d);export{d as SkdxTransferList};

package/dist/transfer/TransferListHeader.cjs

@@ -1,5 +1,5 @@
-"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(r,e)=>{for(var s in e)n(r,s,{get:e[s],enumerable:!0})},v=(r,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!u.call(r,t)&&t!==s&&n(r,t,{get:()=>e[t],enumerable:!(i=c(e,t))||i.enumerable});return r};var k=r=>v(n({},"__esModule",{value:!0}),r),h=(r,e,s,i)=>{for(var t=i>1?void 0:i?c(e,s):e,o=r.length-1,l;o>=0;o--)(l=r[o])&&(t=(i?l(e,s,t):l(t))||t);return i&&t&&n(e,s,t),t};var y={};b(y,{SkdxTransferListHeader:()=>a});module.exports=k(y);var d=require("lit"),f=require("lit/decorators.js"),p=require("../internal/define.cjs");var a=class extends d.LitElement{constructor(){super(...arguments);this.side="source";this.transfer=null}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer&&(this.id=this.transfer.headerId(this.side)),this.transfer?.registerHeader(this.side,!0),this.setAttribute("data-side",this.side)}disconnectedCallback(){this.transfer?.registerHeader(this.side,!1),super.disconnectedCallback()}updated(s){s.has("side")&&this.transfer&&(this.id=this.transfer.headerId(this.side),this.setAttribute("data-side",this.side),this.transfer.broadcast())}render(){return d.html`<slot></slot>`}};a.styles=d.css`
+"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(s,e)=>{for(var r in e)n(s,r,{get:e[r],enumerable:!0})},v=(s,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!u.call(s,t)&&t!==r&&n(s,t,{get:()=>e[t],enumerable:!(i=c(e,t))||i.enumerable});return s};var g=s=>v(n({},"__esModule",{value:!0}),s),f=(s,e,r,i)=>{for(var t=i>1?void 0:i?c(e,r):e,o=s.length-1,l;o>=0;o--)(l=s[o])&&(t=(i?l(e,r,t):l(t))||t);return i&&t&&n(e,r,t),t};var k={};b(k,{SkdxTransferListHeader:()=>d});module.exports=g(k);var a=require("lit"),p=require("lit/decorators.js"),h=require("../internal/define.cjs");var d=class extends a.LitElement{constructor(){super(...arguments);this.side="source";this.transfer=null}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.setAttribute("data-side",this.side),this.transfer&&(0,h.whenUpgraded)(this.transfer,()=>{this.transfer&&(this.id?this.transfer.setHeaderId(this.side,this.id):this.id=this.transfer.headerId(this.side),this.transfer.registerHeader(this.side,!0))})}disconnectedCallback(){this.transfer?.registerHeader(this.side,!1),super.disconnectedCallback()}updated(r){r.has("side")&&this.transfer&&(this.id?this.transfer.setHeaderId(this.side,this.id):this.id=this.transfer.headerId(this.side),this.setAttribute("data-side",this.side),this.transfer.broadcast())}render(){return a.html`<slot></slot>`}};d.styles=a.css`
     :host {
       display: block;
     }
-  `,h([(0,f.property)({type:String,reflect:!0})],a.prototype,"side",2),a=h([(0,p.customElement)("skdx-transfer-list-header","transfer","list-header")],a);0&&(module.exports={SkdxTransferListHeader});
+  `,f([(0,p.property)({type:String,reflect:!0})],d.prototype,"side",2),d=f([(0,h.customElement)("skdx-transfer-list-header","transfer","list-header")],d);0&&(module.exports={SkdxTransferListHeader});

package/dist/transfer/TransferListHeader.d.cts

@@ -2,17 +2,13 @@ import { LitElement } from 'lit';
 import type { TransferSide } from './types.cjs';
 /**
  * `<skdx-transfer-list-header>` — 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.
+ * lists, and the element that list points `aria-labelledby` at. "Available" and
+ * "Selected" headings make the difference between a usable widget and two
+ * anonymous lists.
  *
- * It sits *beside* its `<skdx-transfer-list>`, 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.
+ * Sits *beside* its `<skdx-transfer-list>`, not inside it — a `role="listbox"`
+ * may only contain options and groups. Rendering one switches its list from a
+ * generic fallback name to this heading's text.
  *
  * @example
  * ```html

package/dist/transfer/TransferListHeader.d.ts

@@ -2,17 +2,13 @@ import { LitElement } from 'lit';
 import type { TransferSide } from './types.js';
 /**
  * `<skdx-transfer-list-header>` — 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.
+ * lists, and the element that list points `aria-labelledby` at. "Available" and
+ * "Selected" headings make the difference between a usable widget and two
+ * anonymous lists.
  *
- * It sits *beside* its `<skdx-transfer-list>`, 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.
+ * Sits *beside* its `<skdx-transfer-list>`, not inside it — a `role="listbox"`
+ * may only contain options and groups. Rendering one switches its list from a
+ * generic fallback name to this heading's text.
  *
  * @example
  * ```html

package/dist/transfer/TransferListHeader.js

@@ -1,5 +1,5 @@
-var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(a,r,s,i)=>{for(var e=i>1?void 0:i?h(r,s):r,d=a.length-1,n;d>=0;d--)(n=a[d])&&(e=(i?n(r,s,e):n(e))||e);return i&&e&&l(r,s,e),e};import{css as c,html as f,LitElement as p}from"lit";import{property as m}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";var t=class extends p{constructor(){super(...arguments);this.side="source";this.transfer=null}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer&&(this.id=this.transfer.headerId(this.side)),this.transfer?.registerHeader(this.side,!0),this.setAttribute("data-side",this.side)}disconnectedCallback(){this.transfer?.registerHeader(this.side,!1),super.disconnectedCallback()}updated(s){s.has("side")&&this.transfer&&(this.id=this.transfer.headerId(this.side),this.setAttribute("data-side",this.side),this.transfer.broadcast())}render(){return f`<slot></slot>`}};t.styles=c`
+var o=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var h=(d,s,r,i)=>{for(var e=i>1?void 0:i?l(s,r):s,a=d.length-1,n;a>=0;a--)(n=d[a])&&(e=(i?n(s,r,e):n(e))||e);return i&&e&&o(s,r,e),e};import{css as f,html as c,LitElement as p}from"lit";import{property as m}from"lit/decorators.js";import{customElement as u,whenUpgraded as b}from"../internal/define.js";var t=class extends p{constructor(){super(...arguments);this.side="source";this.transfer=null}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.setAttribute("data-side",this.side),this.transfer&&b(this.transfer,()=>{this.transfer&&(this.id?this.transfer.setHeaderId(this.side,this.id):this.id=this.transfer.headerId(this.side),this.transfer.registerHeader(this.side,!0))})}disconnectedCallback(){this.transfer?.registerHeader(this.side,!1),super.disconnectedCallback()}updated(r){r.has("side")&&this.transfer&&(this.id?this.transfer.setHeaderId(this.side,this.id):this.id=this.transfer.headerId(this.side),this.setAttribute("data-side",this.side),this.transfer.broadcast())}render(){return c`<slot></slot>`}};t.styles=f`
     :host {
       display: block;
     }
-  `,o([m({type:String,reflect:!0})],t.prototype,"side",2),t=o([u("skdx-transfer-list-header","transfer","list-header")],t);export{t as SkdxTransferListHeader};
+  `,h([m({type:String,reflect:!0})],t.prototype,"side",2),t=h([u("skdx-transfer-list-header","transfer","list-header")],t);export{t as SkdxTransferListHeader};

package/dist/transfer/TransferListSearch.d.cts

@@ -1,33 +1,11 @@
 import { LitElement } from 'lit';
 import type { TransferSide } from './types.cjs';
 /**
- * `<skdx-transfer-list-search>` — the filter input for one list: an
- * `<input type="search">` bound to that side's query. Like
- * `<skdx-transfer-list-header>` it is a sibling of its list rather than a child,
- * since a `role="listbox"` may only contain options — so it takes its own
- * `side`.
+ * Filter input for one transfer list. Hidden if root not `searchable`.
+ * Light DOM (no shadow root) so `aria-controls` IDREF reaches the list and labels can find input.
+ * "Move all" moves visible items only.
  *
- * Hidden while the root is not `searchable`. A filter box that stays on screen
- * but no longer filters is worse than no box at all, so the one prop turns the
- * input and the filtering on together.
- *
- * Filtering narrows what its list renders and therefore what "move all" moves:
- * "move all" moves what you can see, not what you cannot.
- *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root), for the same reason `<skdx-combobox-input>` does: `aria-controls` is an
- * IDREF and an IDREF resolves only within its own tree, so from inside a shadow
- * root it could never reach the `<skdx-transfer-list>` it names — the attribute
- * was inert and the box was not announced as controlling the list. It is also
- * what lets a wrapping `<label>` and `<skdx-field>`'s `findFieldControl()` see
- * the `<input>` at all. `display: contents` on the `<input>` is not an
- * alternative: CSS Display 3 computes it to `none` on form controls.
- *
- * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
- * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
- * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
- * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
- * ordinary descendant instead: `skdx-transfer-list-search > input { … }`.
+ * @csspart input - Native `<input>` (style via descendant selector, `::part()` is inert).
  *
  * @example
  * ```html
@@ -38,12 +16,10 @@ import type { TransferSide } from './types.cjs';
  * ```
  */
 export declare class SkdxTransferListSearch extends LitElement {
-    /** Light DOM, for the IDREF and labelling reasons in the class docblock. */
+    /** Light DOM for IDREF and labelling. */
     createRenderRoot(): this;
     /**
-     * Reaches through to the native `<input>`. The shadow root used to carry
-     * `delegatesFocus`, which did this for free; a light-DOM element has to
-     * forward focus itself.
+     * Forward focus to input (light DOM has no delegatesFocus).
      */
     focus(options?: FocusOptions): void;
     /** Which list this box filters. Required. */

package/dist/transfer/TransferListSearch.d.ts

@@ -1,33 +1,11 @@
 import { LitElement } from 'lit';
 import type { TransferSide } from './types.js';
 /**
- * `<skdx-transfer-list-search>` — the filter input for one list: an
- * `<input type="search">` bound to that side's query. Like
- * `<skdx-transfer-list-header>` it is a sibling of its list rather than a child,
- * since a `role="listbox"` may only contain options — so it takes its own
- * `side`.
+ * Filter input for one transfer list. Hidden if root not `searchable`.
+ * Light DOM (no shadow root) so `aria-controls` IDREF reaches the list and labels can find input.
+ * "Move all" moves visible items only.
  *
- * Hidden while the root is not `searchable`. A filter box that stays on screen
- * but no longer filters is worse than no box at all, so the one prop turns the
- * input and the filtering on together.
- *
- * Filtering narrows what its list renders and therefore what "move all" moves:
- * "move all" moves what you can see, not what you cannot.
- *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root), for the same reason `<skdx-combobox-input>` does: `aria-controls` is an
- * IDREF and an IDREF resolves only within its own tree, so from inside a shadow
- * root it could never reach the `<skdx-transfer-list>` it names — the attribute
- * was inert and the box was not announced as controlling the list. It is also
- * what lets a wrapping `<label>` and `<skdx-field>`'s `findFieldControl()` see
- * the `<input>` at all. `display: contents` on the `<input>` is not an
- * alternative: CSS Display 3 computes it to `none` on form controls.
- *
- * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
- * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
- * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
- * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
- * ordinary descendant instead: `skdx-transfer-list-search > input { … }`.
+ * @csspart input - Native `<input>` (style via descendant selector, `::part()` is inert).
  *
  * @example
  * ```html
@@ -38,12 +16,10 @@ import type { TransferSide } from './types.js';
  * ```
  */
 export declare class SkdxTransferListSearch extends LitElement {
-    /** Light DOM, for the IDREF and labelling reasons in the class docblock. */
+    /** Light DOM for IDREF and labelling. */
     createRenderRoot(): this;
     /**
-     * Reaches through to the native `<input>`. The shadow root used to carry
-     * `delegatesFocus`, which did this for free; a light-DOM element has to
-     * forward focus itself.
+     * Forward focus to input (light DOM has no delegatesFocus).
      */
     focus(options?: FocusOptions): void;
     /** Which list this box filters. Required. */

package/dist/transfer/TransferMoveAllTrigger.d.cts

@@ -1,15 +1,9 @@
 import { SkdxTransferMoveTriggerBase } from './move-trigger.cjs';
 import type { SkdxTransfer } from './Transfer.cjs';
 /**
- * `<skdx-transfer-move-all-trigger>` — the button that moves every item
- * currently **visible** on one side, marked or not. Same rules as
- * `<skdx-transfer-move-trigger>`: real button, name carries direction and count,
- * `aria-disabled` rather than `disabled` when there is nothing to move.
- *
- * "Visible" is the operative word while the root is `searchable`: it moves what
- * the filter is showing, never items hidden behind a query the user has
- * forgotten is applied. Disabled items are excluded on both counts — the name
- * and the move.
+ * `<skdx-transfer-move-all-trigger>` — moves every **visible** item on one side, marked or not.
+ * With a filter, moves only what's showing, not hidden items. Disabled items excluded.
+ * Uses `aria-disabled`, not `disabled`, when nothing to move.
  *
  * @csspart trigger - The native `<button>` element inside the shadow root.
  *

package/dist/transfer/TransferMoveAllTrigger.d.ts

@@ -1,15 +1,9 @@
 import { SkdxTransferMoveTriggerBase } from './move-trigger.js';
 import type { SkdxTransfer } from './Transfer.js';
 /**
- * `<skdx-transfer-move-all-trigger>` — the button that moves every item
- * currently **visible** on one side, marked or not. Same rules as
- * `<skdx-transfer-move-trigger>`: real button, name carries direction and count,
- * `aria-disabled` rather than `disabled` when there is nothing to move.
- *
- * "Visible" is the operative word while the root is `searchable`: it moves what
- * the filter is showing, never items hidden behind a query the user has
- * forgotten is applied. Disabled items are excluded on both counts — the name
- * and the move.
+ * `<skdx-transfer-move-all-trigger>` — moves every **visible** item on one side, marked or not.
+ * With a filter, moves only what's showing, not hidden items. Disabled items excluded.
+ * Uses `aria-disabled`, not `disabled`, when nothing to move.
  *
  * @csspart trigger - The native `<button>` element inside the shadow root.
  *

package/dist/transfer/TransferMoveTrigger.d.cts

@@ -1,19 +1,17 @@
 import { SkdxTransferMoveTriggerBase } from './move-trigger.cjs';
 import type { SkdxTransfer } from './Transfer.cjs';
 /**
- * `<skdx-transfer-move-trigger>` — the button that moves the **marked** items
- * one way. A real `<button>` in the tab order, named for what it does and how
- * much of it — "Move 3 items to selected", not an unnamed arrow glyph.
+ * Button that moves the **marked** items one way. A real `<button>` in the tab
+ * order, named for what it does and how much — "Move 3 items to selected", not
+ * an unnamed glyph.
  *
- * With nothing marked it is **`aria-disabled`, not `disabled`**. A truly
- * disabled button is skipped by Tab, so a keyboard user exploring the widget
- * never meets the control that explains the whole interaction, and would be
- * left guessing why selecting things in a list appears to do nothing. Kept
- * focusable, it announces "Move items to selected, nothing selected" — the
- * instruction and the reason in one. Pressing it is a no-op.
+ * Uses `aria-disabled` (not `disabled`) when nothing is marked, keeping it
+ * focusable so keyboard users discover it. A disabled button is skipped by Tab,
+ * leaving users unable to find the control that explains the interaction.
+ * Announces "Move items to selected, nothing selected" when aria-disabled.
  *
- * Publishes `data-direction` (the logical `'toTarget'`/`'toSource'`),
- * `data-count`, and `data-disabled`.
+ * Publishes `data-direction` (`'toTarget'` or `'toSource'`), `data-count`, and
+ * `data-disabled`.
  *
  * @csspart trigger - The native `<button>` element inside the shadow root.
  *

package/dist/transfer/TransferMoveTrigger.d.ts

@@ -1,19 +1,17 @@
 import { SkdxTransferMoveTriggerBase } from './move-trigger.js';
 import type { SkdxTransfer } from './Transfer.js';
 /**
- * `<skdx-transfer-move-trigger>` — the button that moves the **marked** items
- * one way. A real `<button>` in the tab order, named for what it does and how
- * much of it — "Move 3 items to selected", not an unnamed arrow glyph.
+ * Button that moves the **marked** items one way. A real `<button>` in the tab
+ * order, named for what it does and how much — "Move 3 items to selected", not
+ * an unnamed glyph.
  *
- * With nothing marked it is **`aria-disabled`, not `disabled`**. A truly
- * disabled button is skipped by Tab, so a keyboard user exploring the widget
- * never meets the control that explains the whole interaction, and would be
- * left guessing why selecting things in a list appears to do nothing. Kept
- * focusable, it announces "Move items to selected, nothing selected" — the
- * instruction and the reason in one. Pressing it is a no-op.
+ * Uses `aria-disabled` (not `disabled`) when nothing is marked, keeping it
+ * focusable so keyboard users discover it. A disabled button is skipped by Tab,
+ * leaving users unable to find the control that explains the interaction.
+ * Announces "Move items to selected, nothing selected" when aria-disabled.
  *
- * Publishes `data-direction` (the logical `'toTarget'`/`'toSource'`),
- * `data-count`, and `data-disabled`.
+ * Publishes `data-direction` (`'toTarget'` or `'toSource'`), `data-count`, and
+ * `data-disabled`.
  *
  * @csspart trigger - The native `<button>` element inside the shadow root.
  *

package/dist/transfer/index.cjs

@@ -1 +1 @@
-"use strict";var a=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var v=(e,r)=>{for(var t in r)a(e,t,{get:r[t],enumerable:!0})},c=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let f of l(r))!g.call(e,f)&&f!==t&&a(e,f,{get:()=>r[f],enumerable:!(n=k(r,f))||n.enumerable});return e};var y=e=>c(a({},"__esModule",{value:!0}),e);var D={};v(D,{SkdxTransfer:()=>o.SkdxTransfer,SkdxTransferControls:()=>p.SkdxTransferControls,SkdxTransferEmpty:()=>S.SkdxTransferEmpty,SkdxTransferItem:()=>m.SkdxTransferItem,SkdxTransferList:()=>s.SkdxTransferList,SkdxTransferListHeader:()=>x.SkdxTransferListHeader,SkdxTransferListSearch:()=>T.SkdxTransferListSearch,SkdxTransferMoveAllTrigger:()=>i.SkdxTransferMoveAllTrigger,SkdxTransferMoveTrigger:()=>d.SkdxTransferMoveTrigger,defaultTransferFilter:()=>o.defaultTransferFilter,moveAnnouncement:()=>o.moveAnnouncement});module.exports=y(D);var o=require("./Transfer.cjs"),s=require("./TransferList.cjs"),x=require("./TransferListHeader.cjs"),T=require("./TransferListSearch.cjs"),m=require("./TransferItem.cjs"),p=require("./TransferControls.cjs"),d=require("./TransferMoveTrigger.cjs"),i=require("./TransferMoveAllTrigger.cjs"),S=require("./TransferEmpty.cjs");0&&(module.exports={SkdxTransfer,SkdxTransferControls,SkdxTransferEmpty,SkdxTransferItem,SkdxTransferList,SkdxTransferListHeader,SkdxTransferListSearch,SkdxTransferMoveAllTrigger,SkdxTransferMoveTrigger,defaultTransferFilter,moveAnnouncement});
+"use strict";var s=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var i=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},m=(t,e,n,f)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of o(e))!l.call(t,a)&&a!==n&&s(t,a,{get:()=>e[a],enumerable:!(f=T(e,a))||f.enumerable});return t};var c=t=>m(s({},"__esModule",{value:!0}),t);var d={};i(d,{SkdxTransfer:()=>r.SkdxTransfer,defaultTransferFilter:()=>r.defaultTransferFilter,moveAnnouncement:()=>r.moveAnnouncement,searchResultsAnnouncement:()=>r.searchResultsAnnouncement});module.exports=c(d);var r=require("./Transfer.cjs");0&&(module.exports={SkdxTransfer,defaultTransferFilter,moveAnnouncement,searchResultsAnnouncement});

package/dist/transfer/index.d.cts

@@ -1,10 +1,3 @@
-export { SkdxTransfer, defaultTransferFilter, moveAnnouncement } from './Transfer.cjs';
-export { SkdxTransferList } from './TransferList.cjs';
-export { SkdxTransferListHeader } from './TransferListHeader.cjs';
-export { SkdxTransferListSearch } from './TransferListSearch.cjs';
-export { SkdxTransferItem } from './TransferItem.cjs';
-export { SkdxTransferControls } from './TransferControls.cjs';
-export { SkdxTransferMoveTrigger } from './TransferMoveTrigger.cjs';
-export { SkdxTransferMoveAllTrigger } from './TransferMoveAllTrigger.cjs';
-export { SkdxTransferEmpty } from './TransferEmpty.cjs';
-export type { TransferItemData, TransferSide, TransferDirection, TransferFilter, TransferMoveDetail, } from './types.cjs';
+export { SkdxTransfer, defaultTransferFilter, moveAnnouncement, searchResultsAnnouncement, } from './Transfer.cjs';
+export type { SkdxTransferTitles } from './TransferAnatomy.cjs';
+export type { TransferItemData, TransferSide, TransferDirection, TransferFilter, TransferFilterMatchMode, TransferMoveDetail, TransferTargetOrder, TransferSearchResultsDetail, TransferListScrollDetail, } from './types.cjs';

package/dist/transfer/index.d.ts

@@ -1,10 +1,3 @@
-export { SkdxTransfer, defaultTransferFilter, moveAnnouncement } from './Transfer.js';
-export { SkdxTransferList } from './TransferList.js';
-export { SkdxTransferListHeader } from './TransferListHeader.js';
-export { SkdxTransferListSearch } from './TransferListSearch.js';
-export { SkdxTransferItem } from './TransferItem.js';
-export { SkdxTransferControls } from './TransferControls.js';
-export { SkdxTransferMoveTrigger } from './TransferMoveTrigger.js';
-export { SkdxTransferMoveAllTrigger } from './TransferMoveAllTrigger.js';
-export { SkdxTransferEmpty } from './TransferEmpty.js';
-export type { TransferItemData, TransferSide, TransferDirection, TransferFilter, TransferMoveDetail, } from './types.js';
+export { SkdxTransfer, defaultTransferFilter, moveAnnouncement, searchResultsAnnouncement, } from './Transfer.js';
+export type { SkdxTransferTitles } from './TransferAnatomy.js';
+export type { TransferItemData, TransferSide, TransferDirection, TransferFilter, TransferFilterMatchMode, TransferMoveDetail, TransferTargetOrder, TransferSearchResultsDetail, TransferListScrollDetail, } from './types.js';

package/dist/transfer/index.js

@@ -1 +1 @@
-import{SkdxTransfer as o,defaultTransferFilter as f,moveAnnouncement as t}from"./Transfer.js";import{SkdxTransferList as n}from"./TransferList.js";import{SkdxTransferListHeader as x}from"./TransferListHeader.js";import{SkdxTransferListSearch as m}from"./TransferListSearch.js";import{SkdxTransferItem as d}from"./TransferItem.js";import{SkdxTransferControls as S}from"./TransferControls.js";import{SkdxTransferMoveTrigger as l}from"./TransferMoveTrigger.js";import{SkdxTransferMoveAllTrigger as v}from"./TransferMoveAllTrigger.js";import{SkdxTransferEmpty as y}from"./TransferEmpty.js";export{o as SkdxTransfer,S as SkdxTransferControls,y as SkdxTransferEmpty,d as SkdxTransferItem,n as SkdxTransferList,x as SkdxTransferListHeader,m as SkdxTransferListSearch,v as SkdxTransferMoveAllTrigger,l as SkdxTransferMoveTrigger,f as defaultTransferFilter,t as moveAnnouncement};
+import{SkdxTransfer as t,defaultTransferFilter as a,moveAnnouncement as n,searchResultsAnnouncement as s}from"./Transfer.js";export{t as SkdxTransfer,a as defaultTransferFilter,n as moveAnnouncement,s as searchResultsAnnouncement};

package/dist/transfer/move-trigger.d.cts

@@ -2,10 +2,7 @@ import { LitElement } from 'lit';
 import { type SkdxTransfer } from './Transfer.cjs';
 import type { TransferDirection } from './types.cjs';
 /**
- * @internal Shared base for `<skdx-transfer-move-trigger>` and
- * `<skdx-transfer-move-all-trigger>`. The two differ only in *which* items they
- * consider movable; everything about the button — its name, its counting rule,
- * its `aria-disabled`-not-`disabled` stance — is the same and lives here.
+ * @internal Shared base for move-trigger and move-all-trigger; differ only in which items are movable.
  */
 export declare abstract class SkdxTransferMoveTriggerBase extends LitElement {
     static shadowRootOptions: ShadowRootInit;

package/dist/transfer/move-trigger.d.ts

@@ -2,10 +2,7 @@ import { LitElement } from 'lit';
 import { type SkdxTransfer } from './Transfer.js';
 import type { TransferDirection } from './types.js';
 /**
- * @internal Shared base for `<skdx-transfer-move-trigger>` and
- * `<skdx-transfer-move-all-trigger>`. The two differ only in *which* items they
- * consider movable; everything about the button — its name, its counting rule,
- * its `aria-disabled`-not-`disabled` stance — is the same and lives here.
+ * @internal Shared base for move-trigger and move-all-trigger; differ only in which items are movable.
  */
 export declare abstract class SkdxTransferMoveTriggerBase extends LitElement {
     static shadowRootOptions: ShadowRootInit;

package/dist/transfer/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var l=(e,r)=>{for(var f in r)x(e,f,{get:r[f],enumerable:!0})},L=(e,r,f,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of i(r))!g.call(e,o)&&o!==f&&x(e,o,{get:()=>r[o],enumerable:!(t=k(r,o))||t.enumerable});return e};var v=e=>L(x({},"__esModule",{value:!0}),e);var M={};l(M,{SkdxTransferControls:()=>d.SkdxTransferControls,SkdxTransferEmpty:()=>S.SkdxTransferEmpty,SkdxTransferItem:()=>T.SkdxTransferItem,SkdxTransferList:()=>s.SkdxTransferList,SkdxTransferListHeader:()=>a.SkdxTransferListHeader,SkdxTransferListSearch:()=>m.SkdxTransferListSearch,SkdxTransferMoveAllTrigger:()=>p.SkdxTransferMoveAllTrigger,SkdxTransferMoveTrigger:()=>n.SkdxTransferMoveTrigger});module.exports=v(M);var s=require("./TransferList.cjs"),a=require("./TransferListHeader.cjs"),m=require("./TransferListSearch.cjs"),T=require("./TransferItem.cjs"),d=require("./TransferControls.cjs"),n=require("./TransferMoveTrigger.cjs"),p=require("./TransferMoveAllTrigger.cjs"),S=require("./TransferEmpty.cjs");0&&(module.exports={SkdxTransferControls,SkdxTransferEmpty,SkdxTransferItem,SkdxTransferList,SkdxTransferListHeader,SkdxTransferListSearch,SkdxTransferMoveAllTrigger,SkdxTransferMoveTrigger});

package/dist/transfer/primitives.d.cts

@@ -0,0 +1,33 @@
+/**
+ * Advanced primitives for `<skdx-transfer>` when anatomy isn't needed. Built from these
+ * elements (see TransferAnatomy.ts). Class imports resolve subpaths, not tag names.
+ *
+ * @example
+ * ```ts
+ * import * as Transfer from '@skdx/web-components/primitives/transfer';
+ * ```
+ * ```html
+ * <skdx-transfer items='[{"value":"react","label":"React"}]' default-value='["react"]'>
+ *   <skdx-transfer-list-header side="source">Available</skdx-transfer-list-header>
+ *   <skdx-transfer-list side="source"></skdx-transfer-list>
+ *   <skdx-transfer-empty side="source">Nothing left to add.</skdx-transfer-empty>
+ *
+ *   <skdx-transfer-controls>
+ *     <skdx-transfer-move-trigger direction="toTarget">→</skdx-transfer-move-trigger>
+ *     <skdx-transfer-move-trigger direction="toSource">←</skdx-transfer-move-trigger>
+ *   </skdx-transfer-controls>
+ *
+ *   <skdx-transfer-list-header side="target">Selected</skdx-transfer-list-header>
+ *   <skdx-transfer-list side="target"></skdx-transfer-list>
+ *   <skdx-transfer-empty side="target">Nothing selected yet.</skdx-transfer-empty>
+ * </skdx-transfer>
+ * ```
+ */
+export { SkdxTransferList } from './TransferList.cjs';
+export { SkdxTransferListHeader } from './TransferListHeader.cjs';
+export { SkdxTransferListSearch } from './TransferListSearch.cjs';
+export { SkdxTransferItem } from './TransferItem.cjs';
+export { SkdxTransferControls } from './TransferControls.cjs';
+export { SkdxTransferMoveTrigger } from './TransferMoveTrigger.cjs';
+export { SkdxTransferMoveAllTrigger } from './TransferMoveAllTrigger.cjs';
+export { SkdxTransferEmpty } from './TransferEmpty.cjs';

package/dist/transfer/primitives.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Advanced primitives for `<skdx-transfer>` when anatomy isn't needed. Built from these
+ * elements (see TransferAnatomy.ts). Class imports resolve subpaths, not tag names.
+ *
+ * @example
+ * ```ts
+ * import * as Transfer from '@skdx/web-components/primitives/transfer';
+ * ```
+ * ```html
+ * <skdx-transfer items='[{"value":"react","label":"React"}]' default-value='["react"]'>
+ *   <skdx-transfer-list-header side="source">Available</skdx-transfer-list-header>
+ *   <skdx-transfer-list side="source"></skdx-transfer-list>
+ *   <skdx-transfer-empty side="source">Nothing left to add.</skdx-transfer-empty>
+ *
+ *   <skdx-transfer-controls>
+ *     <skdx-transfer-move-trigger direction="toTarget">→</skdx-transfer-move-trigger>
+ *     <skdx-transfer-move-trigger direction="toSource">←</skdx-transfer-move-trigger>
+ *   </skdx-transfer-controls>
+ *
+ *   <skdx-transfer-list-header side="target">Selected</skdx-transfer-list-header>
+ *   <skdx-transfer-list side="target"></skdx-transfer-list>
+ *   <skdx-transfer-empty side="target">Nothing selected yet.</skdx-transfer-empty>
+ * </skdx-transfer>
+ * ```
+ */
+export { SkdxTransferList } from './TransferList.js';
+export { SkdxTransferListHeader } from './TransferListHeader.js';
+export { SkdxTransferListSearch } from './TransferListSearch.js';
+export { SkdxTransferItem } from './TransferItem.js';
+export { SkdxTransferControls } from './TransferControls.js';
+export { SkdxTransferMoveTrigger } from './TransferMoveTrigger.js';
+export { SkdxTransferMoveAllTrigger } from './TransferMoveAllTrigger.js';
+export { SkdxTransferEmpty } from './TransferEmpty.js';

package/dist/transfer/primitives.js

@@ -0,0 +1 @@
+import{SkdxTransferList as o}from"./TransferList.js";import{SkdxTransferListHeader as x}from"./TransferListHeader.js";import{SkdxTransferListSearch as s}from"./TransferListSearch.js";import{SkdxTransferItem as m}from"./TransferItem.js";import{SkdxTransferControls as d}from"./TransferControls.js";import{SkdxTransferMoveTrigger as p}from"./TransferMoveTrigger.js";import{SkdxTransferMoveAllTrigger as k}from"./TransferMoveAllTrigger.js";import{SkdxTransferEmpty as g}from"./TransferEmpty.js";export{d as SkdxTransferControls,g as SkdxTransferEmpty,m as SkdxTransferItem,o as SkdxTransferList,x as SkdxTransferListHeader,s as SkdxTransferListSearch,k as SkdxTransferMoveAllTrigger,p as SkdxTransferMoveTrigger};