@skdx/web-components 0.26.0

package/dist/tour/TourTitle.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tour-title>` — the active step's accessible name: renders an `<h2>` in
+ * shadow DOM, and takes the light-DOM `id` that `<skdx-tour-content>`'s
+ * `aria-labelledby` already points at. Every step should have one.
+ *
+ * This is the *visible* heading. The string announced on a step change comes
+ * from the step's own `title` in the `steps` array — set both, and keep them
+ * saying the same thing.
+ *
+ * @csspart title - The `<h2>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-tour-content>
+ *   <skdx-tour-title>Your inbox</skdx-tour-title>
+ * </skdx-tour-content>
+ * ```
+ */
+export declare class SkdxTourTitle extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-title': SkdxTourTitle;
+    }
+}

package/dist/tour/TourTitle.js

@@ -0,0 +1,5 @@
+var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var c=(l,t,s,r)=>{for(var e=r>1?void 0:r?d(t,s):t,i=l.length-1,a;i>=0;i--)(a=l[i])&&(e=(r?a(t,s,e):a(e))||e);return r&&e&&n(t,s,e),e};import{css as m,html as p,LitElement as f}from"lit";import{customElement as h}from"../internal/define.js";import{findTourRoot as b}from"./Tour.js";var o=class extends f{connectedCallback(){super.connectedCallback();let t=b(this);t&&(this.id=t.titleId)}render(){return p`<h2 part="title"><slot></slot></h2>`}};o.styles=m`
+    :host {
+      display: block;
+    }
+  `,o=c([h("skdx-tour-title","tour","title")],o);export{o as SkdxTourTitle};

package/dist/tour/TourTrigger.cjs

@@ -0,0 +1,17 @@
+"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var f=(r,o)=>{for(var t in o)l(r,t,{get:o[t],enumerable:!0})},R=(r,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of m(o))!b.call(r,e)&&e!==t&&l(r,e,{get:()=>o[e],enumerable:!(n=h(o,e))||n.enumerable});return r};var k=r=>R(l({},"__esModule",{value:!0}),r),u=(r,o,t,n)=>{for(var e=n>1?void 0:n?h(o,t):o,c=r.length-1,p;c>=0;c--)(p=r[c])&&(e=(n?p(o,t,e):p(e))||e);return n&&e&&l(o,t,e),e};var E={};f(E,{SkdxTourTrigger:()=>s});module.exports=k(E);var i=require("lit"),v=require("../internal/define.cjs"),a=require("../internal/styles.cjs"),d=require("./Tour.cjs");var s=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!0)}connectedCallback(){super.connectedCallback(),this.root=(0,d.findTourRoot)(this),this.root?.addEventListener(d.TOUR_INTERNAL_UPDATE,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(d.TOUR_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let t=this.shadowRoot?.querySelector("button");this.root&&t&&(this.root.triggerEl=t)}render(){let t=this.root;return t?i.html`
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded=${t.open}
+        aria-controls=${t.contentId}
+        data-state=${t.open?"open":"closed"}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `:i.nothing}};s.shadowRootOptions=a.delegatesFocusShadowRootOptions,s.styles=[a.resetNativeControl,i.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],s=u([(0,v.customElement)("skdx-tour-trigger","tour","trigger")],s);0&&(module.exports={SkdxTourTrigger});

package/dist/tour/TourTrigger.d.cts

@@ -0,0 +1,33 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-tour-trigger>` — starts the closest ancestor `<skdx-tour>` when
+ * clicked. Renders `<button type="button">` in shadow DOM with
+ * `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls` pointing at
+ * `<skdx-tour-content>`, and `data-state` (`open`/`closed`).
+ *
+ * It is also where focus goes back to when the tour completes or is skipped —
+ * whatever was focused when the tour started is what `<skdx-tour-content>`
+ * restores, and for a tour started from a button that is this button.
+ *
+ * Unlike `<skdx-popover-trigger>` it does not toggle: clicking it while the
+ * tour is already running restarts nothing and closes nothing, exactly as in
+ * React. Ending a tour is what Skip, Close and Escape are for.
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxTourTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-trigger': SkdxTourTrigger;
+    }
+}

package/dist/tour/TourTrigger.d.ts

@@ -0,0 +1,33 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-tour-trigger>` — starts the closest ancestor `<skdx-tour>` when
+ * clicked. Renders `<button type="button">` in shadow DOM with
+ * `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls` pointing at
+ * `<skdx-tour-content>`, and `data-state` (`open`/`closed`).
+ *
+ * It is also where focus goes back to when the tour completes or is skipped —
+ * whatever was focused when the tour started is what `<skdx-tour-content>`
+ * restores, and for a tour started from a button that is this button.
+ *
+ * Unlike `<skdx-popover-trigger>` it does not toggle: clicking it while the
+ * tour is already running restarts nothing and closes nothing, exactly as in
+ * React. Ending a tour is what Skip, Close and Escape are for.
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxTourTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tour-trigger': SkdxTourTrigger;
+    }
+}

package/dist/tour/TourTrigger.js

@@ -0,0 +1,17 @@
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(n,r,t,i)=>{for(var o=i>1?void 0:i?p(r,t):r,s=n.length-1,a;s>=0;s--)(a=n[s])&&(o=(i?a(r,t,o):a(o))||o);return i&&o&&c(r,t,o),o};import{css as h,html as u,LitElement as v,nothing as m}from"lit";import{customElement as b}from"../internal/define.js";import{controlBoxOnHost as f,delegatesFocusShadowRootOptions as R,resetNativeControl as k}from"../internal/styles.js";import{findTourRoot as E,TOUR_INTERNAL_UPDATE as l}from"./Tour.js";var e=class extends v{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!0)}connectedCallback(){super.connectedCallback(),this.root=E(this),this.root?.addEventListener(l,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(l,this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let t=this.shadowRoot?.querySelector("button");this.root&&t&&(this.root.triggerEl=t)}render(){let t=this.root;return t?u`
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded=${t.open}
+        aria-controls=${t.contentId}
+        data-state=${t.open?"open":"closed"}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `:m}};e.shadowRootOptions=R,e.styles=[k,h`
+      :host {
+        display: inline-block;
+      }
+    `,f],e=d([b("skdx-tour-trigger","tour","trigger")],e);export{e as SkdxTourTrigger};

package/dist/tour/index.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var D=(o,r)=>{for(var x in r)t(o,x,{get:r[x],enumerable:!0})},h=(o,r,x,T)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of y(r))!C.call(o,e)&&e!==x&&t(o,e,{get:()=>r[e],enumerable:!(T=c(r,e))||T.enumerable});return o};var v=o=>h(t({},"__esModule",{value:!0}),o);var w={};D(w,{SkdxTour:()=>p.SkdxTour,SkdxTourArrow:()=>m.SkdxTourArrow,SkdxTourBackdrop:()=>d.SkdxTourBackdrop,SkdxTourCloseTrigger:()=>P.SkdxTourCloseTrigger,SkdxTourContent:()=>f.SkdxTourContent,SkdxTourDescription:()=>i.SkdxTourDescription,SkdxTourNextTrigger:()=>l.SkdxTourNextTrigger,SkdxTourPortal:()=>k.SkdxTourPortal,SkdxTourPrevTrigger:()=>a.SkdxTourPrevTrigger,SkdxTourProgressText:()=>s.SkdxTourProgressText,SkdxTourSkipTrigger:()=>n.SkdxTourSkipTrigger,SkdxTourSpotlight:()=>u.SkdxTourSpotlight,SkdxTourTitle:()=>g.SkdxTourTitle,SkdxTourTrigger:()=>S.SkdxTourTrigger});module.exports=v(w);var p=require("./Tour.cjs"),S=require("./TourTrigger.cjs"),k=require("./TourPortal.cjs"),d=require("./TourBackdrop.cjs"),u=require("./TourSpotlight.cjs"),f=require("./TourContent.cjs"),m=require("./TourArrow.cjs"),g=require("./TourTitle.cjs"),i=require("./TourDescription.cjs"),s=require("./TourProgressText.cjs"),l=require("./TourNextTrigger.cjs"),a=require("./TourPrevTrigger.cjs"),n=require("./TourSkipTrigger.cjs"),P=require("./TourCloseTrigger.cjs");0&&(module.exports={SkdxTour,SkdxTourArrow,SkdxTourBackdrop,SkdxTourCloseTrigger,SkdxTourContent,SkdxTourDescription,SkdxTourNextTrigger,SkdxTourPortal,SkdxTourPrevTrigger,SkdxTourProgressText,SkdxTourSkipTrigger,SkdxTourSpotlight,SkdxTourTitle,SkdxTourTrigger});

package/dist/tour/index.d.cts

@@ -0,0 +1,15 @@
+export { SkdxTour } from './Tour.cjs';
+export type { SkdxTourStep, SkdxTourStepType, SkdxTourStepTargetMissingDetail } from './Tour.cjs';
+export { SkdxTourTrigger } from './TourTrigger.cjs';
+export { SkdxTourPortal } from './TourPortal.cjs';
+export { SkdxTourBackdrop } from './TourBackdrop.cjs';
+export { SkdxTourSpotlight } from './TourSpotlight.cjs';
+export { SkdxTourContent } from './TourContent.cjs';
+export { SkdxTourArrow } from './TourArrow.cjs';
+export { SkdxTourTitle } from './TourTitle.cjs';
+export { SkdxTourDescription } from './TourDescription.cjs';
+export { SkdxTourProgressText } from './TourProgressText.cjs';
+export { SkdxTourNextTrigger } from './TourNextTrigger.cjs';
+export { SkdxTourPrevTrigger } from './TourPrevTrigger.cjs';
+export { SkdxTourSkipTrigger } from './TourSkipTrigger.cjs';
+export { SkdxTourCloseTrigger } from './TourCloseTrigger.cjs';

package/dist/tour/index.d.ts

@@ -0,0 +1,15 @@
+export { SkdxTour } from './Tour.js';
+export type { SkdxTourStep, SkdxTourStepType, SkdxTourStepTargetMissingDetail } from './Tour.js';
+export { SkdxTourTrigger } from './TourTrigger.js';
+export { SkdxTourPortal } from './TourPortal.js';
+export { SkdxTourBackdrop } from './TourBackdrop.js';
+export { SkdxTourSpotlight } from './TourSpotlight.js';
+export { SkdxTourContent } from './TourContent.js';
+export { SkdxTourArrow } from './TourArrow.js';
+export { SkdxTourTitle } from './TourTitle.js';
+export { SkdxTourDescription } from './TourDescription.js';
+export { SkdxTourProgressText } from './TourProgressText.js';
+export { SkdxTourNextTrigger } from './TourNextTrigger.js';
+export { SkdxTourPrevTrigger } from './TourPrevTrigger.js';
+export { SkdxTourSkipTrigger } from './TourSkipTrigger.js';
+export { SkdxTourCloseTrigger } from './TourCloseTrigger.js';

package/dist/tour/index.js

@@ -0,0 +1 @@
+import{SkdxTour as e}from"./Tour.js";import{SkdxTourTrigger as t}from"./TourTrigger.js";import{SkdxTourPortal as p}from"./TourPortal.js";import{SkdxTourBackdrop as k}from"./TourBackdrop.js";import{SkdxTourSpotlight as u}from"./TourSpotlight.js";import{SkdxTourContent as m}from"./TourContent.js";import{SkdxTourArrow as i}from"./TourArrow.js";import{SkdxTourTitle as l}from"./TourTitle.js";import{SkdxTourDescription as n}from"./TourDescription.js";import{SkdxTourProgressText as c}from"./TourProgressText.js";import{SkdxTourNextTrigger as C}from"./TourNextTrigger.js";import{SkdxTourPrevTrigger as h}from"./TourPrevTrigger.js";import{SkdxTourSkipTrigger as w}from"./TourSkipTrigger.js";import{SkdxTourCloseTrigger as B}from"./TourCloseTrigger.js";export{e as SkdxTour,i as SkdxTourArrow,k as SkdxTourBackdrop,B as SkdxTourCloseTrigger,m as SkdxTourContent,n as SkdxTourDescription,C as SkdxTourNextTrigger,p as SkdxTourPortal,h as SkdxTourPrevTrigger,c as SkdxTourProgressText,w as SkdxTourSkipTrigger,u as SkdxTourSpotlight,l as SkdxTourTitle,t as SkdxTourTrigger};

package/dist/transfer/Transfer.cjs

@@ -0,0 +1,5 @@
+"use strict";var v=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var F=(i,s)=>{for(var e in s)v(i,e,{get:s[e],enumerable:!0})},O=(i,s,e,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let t of w(s))!q.call(i,t)&&t!==e&&v(i,t,{get:()=>s[t],enumerable:!(r=_(s,t))||r.enumerable});return i};var H=i=>O(v({},"__esModule",{value:!0}),i),o=(i,s,e,r)=>{for(var t=r>1?void 0:r?_(s,e):s,d=i.length-1,u;d>=0;d--)(u=i[d])&&(t=(r?u(s,e,t):u(t))||t);return r&&t&&v(s,e,t),t};var V={};F(V,{DESTINATION_OF:()=>p,OPTION_SELECTOR:()=>D,ORIGIN_OF:()=>A,SIDE_NOUN:()=>b,SkdxTransfer:()=>n,TRANSFER_INTERNAL_UPDATE:()=>M,defaultTransferFilter:()=>$,moveAnnouncement:()=>R,moveTriggerLabel:()=>S});module.exports=H(V);var c=require("lit"),l=require("lit/decorators.js"),I=require("../internal/define.cjs"),y=require("../internal/ids.cjs"),E=require("../utils/live-announcer.cjs");var D='[role="option"]:not([data-disabled])',M="skdx-transfer-internal-update",A={toTarget:"source",toSource:"target"},p={toTarget:"target",toSource:"source"},b={source:"available",target:"selected"};function S(i,s,e){let r=b[p[s]],t=e?"Move all":"Move";return i===0?`${t} items to ${r}, ${e?"nothing to move":"nothing selected"}`:`${t} ${i} ${i===1?"item":"items"} to ${r}`}function R({moved:i,remaining:s,from:e,to:r}){return`${i} ${i===1?"item":"items"} moved to ${b[r]}. ${s} remaining in ${b[e]}.`}function $(i,s){return i.label.toLowerCase().includes(s.trim().toLowerCase())}var n=class extends c.LitElement{constructor(){super(...arguments);this.items=[];this.value=[];this.defaultValue=[];this.disabled=!1;this.searchable=!1;this.filter=$;this.baseId=(0,y.nextId)("skdx-transfer");this._marked={source:[],target:[]};this._query={source:"",target:""};this._active={source:null,target:null};this._labelled={source:!1,target:!1};this.anchor={source:null,target:null};this.listEls={source:null,target:null};this._initialized=!1}moveLabel(e,r,t){return(this.getMoveLabel??S)(e,r,t)}connectedCallback(){super.connectedCallback(),this._initialized||(this.defaultValue.length>0&&(this.value=[...this.defaultValue]),this._initialized=!0)}get sideItems(){return{source:this.items.filter(e=>!this.value.includes(e.value)),target:this.items.filter(e=>this.value.includes(e.value))}}get visibleItems(){let e=this.sideItems;if(!this.searchable)return e;let r=t=>this._query[t].trim()===""?e[t]:e[t].filter(d=>this.filter(d,this._query[t]));return{source:r("source"),target:r("target")}}get marked(){let e=this.sideItems,r=t=>this._marked[t].filter(d=>e[t].some(u=>u.value===d));return{source:r("source"),target:r("target")}}getQuery(e){return this._query[e]}getActive(e){return this._active[e]}isLabelled(e){return this._labelled[e]}headerId(e){return`${this.baseId}-${e}-header`}listId(e){return`${this.baseId}-${e}-list`}setMarked(e,r){this._marked={...this._marked,[e]:r},this.broadcast()}setQuery(e,r){this._query[e]!==r&&(this._query={...this._query,[e]:r},this.broadcast())}setActive(e,r){this._active[e]!==r&&(this._active={...this._active,[e]:r},this.broadcast())}registerHeader(e,r){this._labelled[e]!==r&&(this._labelled={...this._labelled,[e]:r},this.broadcast())}move(e,r){if(this.disabled)return;let t=A[e],d=p[e],f=this.sideItems[t],m=r.map(a=>f.find(g=>g.value===a)).filter(a=>a!==void 0&&!a.disabled);if(m.length===0)return;let h=m.map(a=>a.value),L=this.visibleItems[t].filter(a=>!a.disabled),T=h.map(a=>L.findIndex(g=>g.value===a)).filter(a=>a>=0),C=T.length>0?Math.min(...T):0;this.value=e==="toTarget"?[...this.value,...h.filter(a=>!this.value.includes(a))]:this.value.filter(a=>!h.includes(a)),this._marked={...this._marked,[t]:this._marked[t].filter(a=>!h.includes(a))},this.dispatchEvent(new CustomEvent("value-change",{detail:this.value,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("move",{detail:{items:m,direction:e},bubbles:!0,composed:!0})),this.broadcast();let N={moved:m.length,remaining:f.length-m.length,direction:e,from:t,to:d};(0,E.announce)((this.getMoveAnnouncement??R)(N)),this.restoreFocus(t,C)}async restoreFocus(e,r){await this.updateComplete;let t=this.listEls[e];if(!t)return;await t.updateComplete;let d=Array.from(t.querySelectorAll(D)),u=d[Math.min(r,d.length-1)];if(u){let f=u.getAttribute("data-value");f&&this.setActive(e,f),u.focus()}else t.focus()}broadcast(){this.dispatchEvent(new CustomEvent(M))}updated(e){(e.has("items")||e.has("value")||e.has("disabled")||e.has("searchable"))&&this.broadcast(),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return c.html`<slot></slot>`}};n.styles=c.css`
+    :host {
+      display: contents;
+    }
+  `,o([(0,l.property)({type:Array})],n.prototype,"items",2),o([(0,l.property)({type:Array})],n.prototype,"value",2),o([(0,l.property)({type:Array,attribute:"default-value"})],n.prototype,"defaultValue",2),o([(0,l.property)({type:Boolean,reflect:!0})],n.prototype,"disabled",2),o([(0,l.property)({type:Boolean,reflect:!0})],n.prototype,"searchable",2),o([(0,l.property)({attribute:!1})],n.prototype,"filter",2),o([(0,l.property)({attribute:!1})],n.prototype,"getMoveLabel",2),o([(0,l.property)({attribute:!1})],n.prototype,"getMoveAnnouncement",2),o([(0,l.state)()],n.prototype,"_marked",2),o([(0,l.state)()],n.prototype,"_query",2),o([(0,l.state)()],n.prototype,"_active",2),o([(0,l.state)()],n.prototype,"_labelled",2),n=o([(0,I.customElement)("skdx-transfer","transfer","root")],n);0&&(module.exports={DESTINATION_OF,OPTION_SELECTOR,ORIGIN_OF,SIDE_NOUN,SkdxTransfer,TRANSFER_INTERNAL_UPDATE,defaultTransferFilter,moveAnnouncement,moveTriggerLabel});

package/dist/transfer/Transfer.d.cts

@@ -0,0 +1,200 @@
+import { LitElement } from 'lit';
+import type { TransferDirection, TransferFilter, TransferItemData, TransferMoveDetail, TransferSide } from './types.cjs';
+/** @internal Every option that can hold focus or be moved. Disabled options are skipped by both. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/** @internal The broadcast every `<skdx-transfer-*>` part subscribes to for re-render. */
+export declare const TRANSFER_INTERNAL_UPDATE = "skdx-transfer-internal-update";
+/** @internal Where a direction takes items *from*. */
+export declare const ORIGIN_OF: Record<TransferDirection, TransferSide>;
+/** @internal Where a direction takes items *to*. */
+export declare const DESTINATION_OF: Record<TransferDirection, TransferSide>;
+/**
+ * @internal The word each side is called in default accessible names and in the
+ * move announcement. Deliberately the *same* word in both, so "Move 3 items to
+ * selected" and "3 items moved to selected" name the same list.
+ */
+export declare const SIDE_NOUN: Record<TransferSide, string>;
+/**
+ * The accessible name of a move trigger: direction *and* count, because "→" is
+ * unambiguous next to two labelled lists and meaningless read out on its own.
+ *
+ * With nothing to move the name says so rather than going silent — the trigger
+ * stays focusable (`aria-disabled`, not `disabled`), so it is still the thing
+ * that teaches a keyboard user the interaction, and it has to explain why
+ * pressing it does nothing.
+ *
+ * @internal
+ */
+export declare function moveTriggerLabel(count: number, direction: TransferDirection, all: boolean): string;
+/**
+ * The default wording of the post-move announcement. Split out of `move()` so
+ * `getMoveAnnouncement` has something to fall back to, and so a consumer can
+ * call it for the cases they do not want to re-word.
+ */
+export declare function moveAnnouncement({ moved, remaining, from, to }: TransferMoveDetail): string;
+/** Default `filter`: case-insensitive substring match on the item's `label`. */
+export declare function defaultTransferFilter(item: TransferItemData, query: string): boolean;
+/**
+ * `<skdx-transfer>` — the Web Components implementation of the shared Transfer
+ * contract (see `@skdx/shared`'s `transferContract`): a two-list transfer
+ * (also "pick list" or "dual list box"), a pool of items on one side, the
+ * chosen ones on the other, and triggers that move items between them.
+ *
+ * Renders only a `<slot>` (`display: contents`); the two `role="listbox"`
+ * elements are its `<skdx-transfer-list>` parts.
+ *
+ * Membership is the only stored state: `value` holds the ids on the target
+ * side, and both lists are *derived* from `items` plus that array, so the two
+ * sides cannot drift apart. Each list additionally owns a transient
+ * marked-for-move multi-selection, which is cleared for whichever side an item
+ * leaves.
+ *
+ * Every move is reachable without a pointer. Each list is one Tab stop with its
+ * own roving focus, the move triggers are real buttons with names that say
+ * direction and count, each move is announced politely, and focus lands on the
+ * option that took the moved item's place — never on `<body>`.
+ *
+ * `items` is a JSON array attribute (Lit's `Array` converter), so a transfer
+ * works with no script at all; assign the property for anything dynamic.
+ *
+ * @fires value-change - Fired with the new target-side values whenever the selection changes, by a move trigger or by the keyboard.
+ * @fires move - Fired alongside `value-change` with `{ items, direction }` — the items that actually moved and which way they went. Marking alone never fires it.
+ *
+ * @example
+ * ```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 declare class SkdxTransfer extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The whole pool, on both sides. A JSON array attribute, e.g.
+     * `items='[{"value":"react","label":"React"}]'`; assign the property
+     * directly for anything beyond a static list.
+     */
+    items: readonly TransferItemData[];
+    /**
+     * The ids currently on the **target** side. The single source of truth, as
+     * on `<skdx-drawer>`: `default-value` seeds it once on connect, and after that
+     * reading or writing this property is how you observe or drive membership.
+     * Listen for `value-change`.
+     */
+    value: string[];
+    /** Initially on the target side, applied once on connect. */
+    defaultValue: string[];
+    /** Blocks every move and takes the whole widget out of the tab order. */
+    disabled: boolean;
+    /**
+     * Turns on the per-list filter inputs *and* the filtering itself. One prop
+     * for both, because a filter box that stays on screen but no longer filters
+     * is worse than no box at all.
+     */
+    searchable: boolean;
+    /**
+     * Decides whether an item matches a list's filter text. Set as a property.
+     * @default defaultTransferFilter — case-insensitive substring match on `label`.
+     */
+    filter: TransferFilter;
+    /**
+     * Words the accessible name of every `<skdx-transfer-move-trigger>` and
+     * `<skdx-transfer-move-all-trigger>` under this root. `all` distinguishes the
+     * two, and `count` is how many items pressing it would actually move — zero
+     * included, because the trigger stays focusable with nothing to move and has
+     * to say why.
+     *
+     * The only way to translate those names: they are computed from live counts,
+     * so a static `aria-label` on the trigger cannot express them. A function, so
+     * property-only — it cannot come from markup.
+     * @default undefined — the built-in English wording ("Move 3 items to selected").
+     */
+    getMoveLabel?: (count: number, direction: TransferDirection, all: boolean) => string;
+    /**
+     * Words the polite live-region announcement made after each move. Return `''`
+     * to say nothing at all — a transfer inside an already-chatty flow sometimes
+     * wants silence rather than a second sentence. A function, so property-only.
+     * @default undefined — the built-in English wording ("3 items moved to selected. 5 remaining in available.").
+     */
+    getMoveAnnouncement?: (detail: TransferMoveDetail) => string;
+    /**
+     * @internal The accessible name a move trigger gives itself: this root's
+     * `getMoveLabel` when set, the built-in English wording otherwise. Resolved
+     * here so the triggers never have to know which one is in play.
+     */
+    moveLabel(count: number, direction: TransferDirection, all: boolean): string;
+    /** @internal Unique per instance, so two transfers on a page never share a header id. */
+    readonly baseId: string;
+    private _marked;
+    private _query;
+    private _active;
+    private _labelled;
+    /** The last option marked *without* Shift — the fixed end of a Shift range. */
+    readonly anchor: Record<TransferSide, string | null>;
+    /** @internal Each `<skdx-transfer-list>` registers itself, so a move can put focus back. */
+    readonly listEls: Record<TransferSide, HTMLElement | null>;
+    private _initialized;
+    connectedCallback(): void;
+    /** @internal Every item on each side, before filtering. */
+    get sideItems(): Record<TransferSide, TransferItemData[]>;
+    /** @internal What each side actually renders — `sideItems` narrowed by its query. */
+    get visibleItems(): Record<TransferSide, TransferItemData[]>;
+    /**
+     * @internal Each side's marked-for-move set.
+     *
+     * Filtered against what the side actually holds: a marked value that has
+     * since moved to the other side would leave that list's selection pointing at
+     * an option it no longer renders — which is exactly how a transfer ends up
+     * with a tab stop that has nowhere to sit.
+     */
+    get marked(): Record<TransferSide, string[]>;
+    /** @internal */
+    getQuery(side: TransferSide): string;
+    /** @internal The option holding one list's tab stop. */
+    getActive(side: TransferSide): string | null;
+    /** @internal Whether a `<skdx-transfer-list-header>` exists for a side. */
+    isLabelled(side: TransferSide): boolean;
+    /** @internal The DOM id a side's header carries and its list points `aria-labelledby` at. */
+    headerId(side: TransferSide): string;
+    /** @internal The DOM id a side's listbox carries, for the search box's `aria-controls`. */
+    listId(side: TransferSide): string;
+    /** @internal */
+    setMarked(side: TransferSide, values: string[]): void;
+    /** @internal */
+    setQuery(side: TransferSide, next: string): void;
+    /** @internal */
+    setActive(side: TransferSide, next: string | null): void;
+    /** @internal Called by `<skdx-transfer-list-header>` on connect and disconnect. */
+    registerHeader(side: TransferSide, present: boolean): void;
+    /**
+     * @internal Moves `values` one way, then puts focus on whatever took the
+     * first moved option's place.
+     */
+    move(direction: TransferDirection, values: string[]): void;
+    /**
+     * Focus after a move, once the lists have re-rendered. Awaiting the update is
+     * this package's equivalent of React's layout effect — the option that took
+     * the moved one's place does not exist until then.
+     */
+    private restoreFocus;
+    /** @internal Tells every part to re-read the root. */
+    broadcast(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer': SkdxTransfer;
+    }
+}

package/dist/transfer/Transfer.d.ts

@@ -0,0 +1,200 @@
+import { LitElement } from 'lit';
+import type { TransferDirection, TransferFilter, TransferItemData, TransferMoveDetail, TransferSide } from './types.js';
+/** @internal Every option that can hold focus or be moved. Disabled options are skipped by both. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/** @internal The broadcast every `<skdx-transfer-*>` part subscribes to for re-render. */
+export declare const TRANSFER_INTERNAL_UPDATE = "skdx-transfer-internal-update";
+/** @internal Where a direction takes items *from*. */
+export declare const ORIGIN_OF: Record<TransferDirection, TransferSide>;
+/** @internal Where a direction takes items *to*. */
+export declare const DESTINATION_OF: Record<TransferDirection, TransferSide>;
+/**
+ * @internal The word each side is called in default accessible names and in the
+ * move announcement. Deliberately the *same* word in both, so "Move 3 items to
+ * selected" and "3 items moved to selected" name the same list.
+ */
+export declare const SIDE_NOUN: Record<TransferSide, string>;
+/**
+ * The accessible name of a move trigger: direction *and* count, because "→" is
+ * unambiguous next to two labelled lists and meaningless read out on its own.
+ *
+ * With nothing to move the name says so rather than going silent — the trigger
+ * stays focusable (`aria-disabled`, not `disabled`), so it is still the thing
+ * that teaches a keyboard user the interaction, and it has to explain why
+ * pressing it does nothing.
+ *
+ * @internal
+ */
+export declare function moveTriggerLabel(count: number, direction: TransferDirection, all: boolean): string;
+/**
+ * The default wording of the post-move announcement. Split out of `move()` so
+ * `getMoveAnnouncement` has something to fall back to, and so a consumer can
+ * call it for the cases they do not want to re-word.
+ */
+export declare function moveAnnouncement({ moved, remaining, from, to }: TransferMoveDetail): string;
+/** Default `filter`: case-insensitive substring match on the item's `label`. */
+export declare function defaultTransferFilter(item: TransferItemData, query: string): boolean;
+/**
+ * `<skdx-transfer>` — the Web Components implementation of the shared Transfer
+ * contract (see `@skdx/shared`'s `transferContract`): a two-list transfer
+ * (also "pick list" or "dual list box"), a pool of items on one side, the
+ * chosen ones on the other, and triggers that move items between them.
+ *
+ * Renders only a `<slot>` (`display: contents`); the two `role="listbox"`
+ * elements are its `<skdx-transfer-list>` parts.
+ *
+ * Membership is the only stored state: `value` holds the ids on the target
+ * side, and both lists are *derived* from `items` plus that array, so the two
+ * sides cannot drift apart. Each list additionally owns a transient
+ * marked-for-move multi-selection, which is cleared for whichever side an item
+ * leaves.
+ *
+ * Every move is reachable without a pointer. Each list is one Tab stop with its
+ * own roving focus, the move triggers are real buttons with names that say
+ * direction and count, each move is announced politely, and focus lands on the
+ * option that took the moved item's place — never on `<body>`.
+ *
+ * `items` is a JSON array attribute (Lit's `Array` converter), so a transfer
+ * works with no script at all; assign the property for anything dynamic.
+ *
+ * @fires value-change - Fired with the new target-side values whenever the selection changes, by a move trigger or by the keyboard.
+ * @fires move - Fired alongside `value-change` with `{ items, direction }` — the items that actually moved and which way they went. Marking alone never fires it.
+ *
+ * @example
+ * ```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 declare class SkdxTransfer extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The whole pool, on both sides. A JSON array attribute, e.g.
+     * `items='[{"value":"react","label":"React"}]'`; assign the property
+     * directly for anything beyond a static list.
+     */
+    items: readonly TransferItemData[];
+    /**
+     * The ids currently on the **target** side. The single source of truth, as
+     * on `<skdx-drawer>`: `default-value` seeds it once on connect, and after that
+     * reading or writing this property is how you observe or drive membership.
+     * Listen for `value-change`.
+     */
+    value: string[];
+    /** Initially on the target side, applied once on connect. */
+    defaultValue: string[];
+    /** Blocks every move and takes the whole widget out of the tab order. */
+    disabled: boolean;
+    /**
+     * Turns on the per-list filter inputs *and* the filtering itself. One prop
+     * for both, because a filter box that stays on screen but no longer filters
+     * is worse than no box at all.
+     */
+    searchable: boolean;
+    /**
+     * Decides whether an item matches a list's filter text. Set as a property.
+     * @default defaultTransferFilter — case-insensitive substring match on `label`.
+     */
+    filter: TransferFilter;
+    /**
+     * Words the accessible name of every `<skdx-transfer-move-trigger>` and
+     * `<skdx-transfer-move-all-trigger>` under this root. `all` distinguishes the
+     * two, and `count` is how many items pressing it would actually move — zero
+     * included, because the trigger stays focusable with nothing to move and has
+     * to say why.
+     *
+     * The only way to translate those names: they are computed from live counts,
+     * so a static `aria-label` on the trigger cannot express them. A function, so
+     * property-only — it cannot come from markup.
+     * @default undefined — the built-in English wording ("Move 3 items to selected").
+     */
+    getMoveLabel?: (count: number, direction: TransferDirection, all: boolean) => string;
+    /**
+     * Words the polite live-region announcement made after each move. Return `''`
+     * to say nothing at all — a transfer inside an already-chatty flow sometimes
+     * wants silence rather than a second sentence. A function, so property-only.
+     * @default undefined — the built-in English wording ("3 items moved to selected. 5 remaining in available.").
+     */
+    getMoveAnnouncement?: (detail: TransferMoveDetail) => string;
+    /**
+     * @internal The accessible name a move trigger gives itself: this root's
+     * `getMoveLabel` when set, the built-in English wording otherwise. Resolved
+     * here so the triggers never have to know which one is in play.
+     */
+    moveLabel(count: number, direction: TransferDirection, all: boolean): string;
+    /** @internal Unique per instance, so two transfers on a page never share a header id. */
+    readonly baseId: string;
+    private _marked;
+    private _query;
+    private _active;
+    private _labelled;
+    /** The last option marked *without* Shift — the fixed end of a Shift range. */
+    readonly anchor: Record<TransferSide, string | null>;
+    /** @internal Each `<skdx-transfer-list>` registers itself, so a move can put focus back. */
+    readonly listEls: Record<TransferSide, HTMLElement | null>;
+    private _initialized;
+    connectedCallback(): void;
+    /** @internal Every item on each side, before filtering. */
+    get sideItems(): Record<TransferSide, TransferItemData[]>;
+    /** @internal What each side actually renders — `sideItems` narrowed by its query. */
+    get visibleItems(): Record<TransferSide, TransferItemData[]>;
+    /**
+     * @internal Each side's marked-for-move set.
+     *
+     * Filtered against what the side actually holds: a marked value that has
+     * since moved to the other side would leave that list's selection pointing at
+     * an option it no longer renders — which is exactly how a transfer ends up
+     * with a tab stop that has nowhere to sit.
+     */
+    get marked(): Record<TransferSide, string[]>;
+    /** @internal */
+    getQuery(side: TransferSide): string;
+    /** @internal The option holding one list's tab stop. */
+    getActive(side: TransferSide): string | null;
+    /** @internal Whether a `<skdx-transfer-list-header>` exists for a side. */
+    isLabelled(side: TransferSide): boolean;
+    /** @internal The DOM id a side's header carries and its list points `aria-labelledby` at. */
+    headerId(side: TransferSide): string;
+    /** @internal The DOM id a side's listbox carries, for the search box's `aria-controls`. */
+    listId(side: TransferSide): string;
+    /** @internal */
+    setMarked(side: TransferSide, values: string[]): void;
+    /** @internal */
+    setQuery(side: TransferSide, next: string): void;
+    /** @internal */
+    setActive(side: TransferSide, next: string | null): void;
+    /** @internal Called by `<skdx-transfer-list-header>` on connect and disconnect. */
+    registerHeader(side: TransferSide, present: boolean): void;
+    /**
+     * @internal Moves `values` one way, then puts focus on whatever took the
+     * first moved option's place.
+     */
+    move(direction: TransferDirection, values: string[]): void;
+    /**
+     * Focus after a move, once the lists have re-rendered. Awaiting the update is
+     * this package's equivalent of React's layout effect — the option that took
+     * the moved one's place does not exist until then.
+     */
+    private restoreFocus;
+    /** @internal Tells every part to re-read the root. */
+    broadcast(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer': SkdxTransfer;
+    }
+}

package/dist/transfer/Transfer.js

@@ -0,0 +1,5 @@
+var y=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var a=(n,l,e,t)=>{for(var r=t>1?void 0:t?E(l,e):l,o=n.length-1,d;o>=0;o--)(d=n[o])&&(r=(t?d(l,e,r):d(r))||r);return t&&r&&y(l,e,r),r};import{css as D,html as M,LitElement as A}from"lit";import{property as u,state as h}from"lit/decorators.js";import{customElement as S}from"../internal/define.js";import{nextId as R}from"../internal/ids.js";import{announce as $}from"../utils/live-announcer.js";var L='[role="option"]:not([data-disabled])',C="skdx-transfer-internal-update",N={toTarget:"source",toSource:"target"},p={toTarget:"target",toSource:"source"},b={source:"available",target:"selected"};function w(n,l,e){let t=b[p[l]],r=e?"Move all":"Move";return n===0?`${r} items to ${t}, ${e?"nothing to move":"nothing selected"}`:`${r} ${n} ${n===1?"item":"items"} to ${t}`}function q({moved:n,remaining:l,from:e,to:t}){return`${n} ${n===1?"item":"items"} moved to ${b[t]}. ${l} remaining in ${b[e]}.`}function F(n,l){return n.label.toLowerCase().includes(l.trim().toLowerCase())}var i=class extends A{constructor(){super(...arguments);this.items=[];this.value=[];this.defaultValue=[];this.disabled=!1;this.searchable=!1;this.filter=F;this.baseId=R("skdx-transfer");this._marked={source:[],target:[]};this._query={source:"",target:""};this._active={source:null,target:null};this._labelled={source:!1,target:!1};this.anchor={source:null,target:null};this.listEls={source:null,target:null};this._initialized=!1}moveLabel(e,t,r){return(this.getMoveLabel??w)(e,t,r)}connectedCallback(){super.connectedCallback(),this._initialized||(this.defaultValue.length>0&&(this.value=[...this.defaultValue]),this._initialized=!0)}get sideItems(){return{source:this.items.filter(e=>!this.value.includes(e.value)),target:this.items.filter(e=>this.value.includes(e.value))}}get visibleItems(){let e=this.sideItems;if(!this.searchable)return e;let t=r=>this._query[r].trim()===""?e[r]:e[r].filter(o=>this.filter(o,this._query[r]));return{source:t("source"),target:t("target")}}get marked(){let e=this.sideItems,t=r=>this._marked[r].filter(o=>e[r].some(d=>d.value===o));return{source:t("source"),target:t("target")}}getQuery(e){return this._query[e]}getActive(e){return this._active[e]}isLabelled(e){return this._labelled[e]}headerId(e){return`${this.baseId}-${e}-header`}listId(e){return`${this.baseId}-${e}-list`}setMarked(e,t){this._marked={...this._marked,[e]:t},this.broadcast()}setQuery(e,t){this._query[e]!==t&&(this._query={...this._query,[e]:t},this.broadcast())}setActive(e,t){this._active[e]!==t&&(this._active={...this._active,[e]:t},this.broadcast())}registerHeader(e,t){this._labelled[e]!==t&&(this._labelled={...this._labelled,[e]:t},this.broadcast())}move(e,t){if(this.disabled)return;let r=N[e],o=p[e],c=this.sideItems[r],f=t.map(s=>c.find(v=>v.value===s)).filter(s=>s!==void 0&&!s.disabled);if(f.length===0)return;let m=f.map(s=>s.value),T=this.visibleItems[r].filter(s=>!s.disabled),g=m.map(s=>T.findIndex(v=>v.value===s)).filter(s=>s>=0),_=g.length>0?Math.min(...g):0;this.value=e==="toTarget"?[...this.value,...m.filter(s=>!this.value.includes(s))]:this.value.filter(s=>!m.includes(s)),this._marked={...this._marked,[r]:this._marked[r].filter(s=>!m.includes(s))},this.dispatchEvent(new CustomEvent("value-change",{detail:this.value,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("move",{detail:{items:f,direction:e},bubbles:!0,composed:!0})),this.broadcast();let I={moved:f.length,remaining:c.length-f.length,direction:e,from:r,to:o};$((this.getMoveAnnouncement??q)(I)),this.restoreFocus(r,_)}async restoreFocus(e,t){await this.updateComplete;let r=this.listEls[e];if(!r)return;await r.updateComplete;let o=Array.from(r.querySelectorAll(L)),d=o[Math.min(t,o.length-1)];if(d){let c=d.getAttribute("data-value");c&&this.setActive(e,c),d.focus()}else r.focus()}broadcast(){this.dispatchEvent(new CustomEvent(C))}updated(e){(e.has("items")||e.has("value")||e.has("disabled")||e.has("searchable"))&&this.broadcast(),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return M`<slot></slot>`}};i.styles=D`
+    :host {
+      display: contents;
+    }
+  `,a([u({type:Array})],i.prototype,"items",2),a([u({type:Array})],i.prototype,"value",2),a([u({type:Array,attribute:"default-value"})],i.prototype,"defaultValue",2),a([u({type:Boolean,reflect:!0})],i.prototype,"disabled",2),a([u({type:Boolean,reflect:!0})],i.prototype,"searchable",2),a([u({attribute:!1})],i.prototype,"filter",2),a([u({attribute:!1})],i.prototype,"getMoveLabel",2),a([u({attribute:!1})],i.prototype,"getMoveAnnouncement",2),a([h()],i.prototype,"_marked",2),a([h()],i.prototype,"_query",2),a([h()],i.prototype,"_active",2),a([h()],i.prototype,"_labelled",2),i=a([S("skdx-transfer","transfer","root")],i);export{p as DESTINATION_OF,L as OPTION_SELECTOR,N as ORIGIN_OF,b as SIDE_NOUN,i as SkdxTransfer,C as TRANSFER_INTERNAL_UPDATE,F as defaultTransferFilter,q as moveAnnouncement,w as moveTriggerLabel};

package/dist/transfer/TransferControls.cjs

@@ -0,0 +1,5 @@
+"use strict";var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var u=(r,e)=>{for(var s in e)l(r,s,{get:e[s],enumerable:!0})},v=(r,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!m.call(r,t)&&t!==s&&l(r,t,{get:()=>e[t],enumerable:!(a=b(e,t))||a.enumerable});return r};var A=r=>v(l({},"__esModule",{value:!0}),r),h=(r,e,s,a)=>{for(var t=a>1?void 0:a?b(e,s):e,n=r.length-1,o;n>=0;n--)(o=r[n])&&(t=(a?o(e,s,t):o(t))||t);return a&&t&&l(e,s,t),t};var E={};u(E,{SkdxTransferControls:()=>i});module.exports=A(E);var d=require("lit"),p=require("../internal/define.cjs"),c=require("./Transfer.cjs");var i=class extends d.LitElement{constructor(){super(...arguments);this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(c.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.setAttribute("role","group"),!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby")&&this.setAttribute("aria-label","Move items")}disconnectedCallback(){this.transfer?.removeEventListener(c.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),super.disconnectedCallback()}updated(){this.transfer?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return d.html`<slot></slot>`}};i.styles=d.css`
+    :host {
+      display: block;
+    }
+  `,i=h([(0,p.customElement)("skdx-transfer-controls","transfer","controls")],i);0&&(module.exports={SkdxTransferControls});