@xplortech/apollo-core 2.6.0 → 2.7.1

package/dist/collection/components/xpl-list/xpl-list-item/xpl-list-item.js

@@ -0,0 +1,818 @@
+import { Fragment, Host, h, } from "@stencil/core";
+function emptyXplListItemSlotPresence() {
+    return {
+        actions: false,
+        avatar: false,
+        badges: false,
+        details: false,
+        errorText: false,
+        metadata: false,
+        stackedExtra1: false,
+        stackedExtra2: false,
+        stackedExtra3: false,
+        titleBadge: false,
+        title: false,
+    };
+}
+export class XplListItem {
+    constructor() {
+        this.dragFromHandle = false;
+        this.slotPresence = emptyXplListItemSlotPresence();
+        this.isKeyboardMode = false;
+        this.disabled = false;
+        this.error = false;
+        this.hidden = false;
+        this.keyboardActive = false;
+        this.reorderable = false;
+        this.selectable = false;
+        this.selected = false;
+        this.showDivider = false;
+        this.handleDragStart = (e) => {
+            if (this.disabled) {
+                e.preventDefault();
+                return;
+            }
+            if (!this.dragFromHandle) {
+                e.preventDefault();
+                return;
+            }
+            this.detachDragHandlePointerReleaseListeners();
+            if (e.dataTransfer) {
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer.setData('text/plain', this.itemId || this.el.id || '');
+            }
+            const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
+            wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.add('dragging');
+            this.itemDragStart.emit({ itemId: this.itemId, item: this.el });
+        };
+        this.handleDrop = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            e.preventDefault();
+            this.detachDragHandlePointerReleaseListeners();
+            this.dragFromHandle = false;
+            this.itemDrop.emit({ itemId: this.itemId, item: this.el });
+        };
+        this.handleDragOver = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            e.preventDefault();
+            if (e.dataTransfer && this.reorderable) {
+                e.dataTransfer.dropEffect = 'move';
+            }
+        };
+        this.handleDragEnter = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            e.preventDefault();
+            const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
+            wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.add('drag-over');
+        };
+        this.handleDragLeave = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
+            if (wrapper && !wrapper.contains(e.relatedTarget)) {
+                wrapper.classList.remove('drag-over');
+            }
+        };
+        this.handleDragEnd = () => {
+            this.detachDragHandlePointerReleaseListeners();
+            this.dragFromHandle = false;
+            const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
+            wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.remove('dragging', 'drag-over');
+            const parent = this.el.parentElement;
+            if (parent) {
+                Array.from(parent.children).forEach((sibling) => {
+                    if (sibling.tagName.toLowerCase() !== 'xpl-list-item') {
+                        return;
+                    }
+                    const siblingWrapper = sibling.querySelector('.xpl-list-item__wrapper');
+                    siblingWrapper === null || siblingWrapper === void 0 ? void 0 : siblingWrapper.classList.remove('drag-over');
+                });
+            }
+            this.itemDragEnd.emit({ itemId: this.itemId, item: this.el });
+        };
+        this.handleDragHandleMouseDown = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.detachDragHandlePointerReleaseListeners();
+            this.dragFromHandle = true;
+            const onPointerEnd = () => {
+                this.detachDragHandlePointerReleaseListeners();
+                this.dragFromHandle = false;
+            };
+            document.addEventListener('pointerup', onPointerEnd, true);
+            document.addEventListener('pointercancel', onPointerEnd, true);
+            this.dragHandlePointerReleaseCleanup = () => {
+                document.removeEventListener('pointerup', onPointerEnd, true);
+                document.removeEventListener('pointercancel', onPointerEnd, true);
+            };
+            this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                bubbles: true,
+                composed: true,
+                detail: { exitKeyboardMode: true },
+            }));
+        };
+        this.preventRowLinkNavigation = (ev) => {
+            if (this.href) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        };
+        this.handleMouseDown = () => {
+            if (this.isKeyboardMode) {
+                this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        itemId: this.itemId,
+                        exitKeyboardMode: true,
+                    },
+                }));
+            }
+        };
+        this.handleDragHandleKeyDown = (e) => {
+            if (this.disabled) {
+                if (e.key === 'Escape' && this.isKeyboardMode) {
+                    e.preventDefault();
+                    this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            itemId: this.itemId,
+                            exitKeyboardMode: true,
+                        },
+                    }));
+                }
+                return;
+            }
+            if (e.key === 'Escape') {
+                if (this.isKeyboardMode) {
+                    e.preventDefault();
+                    this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            itemId: this.itemId,
+                            exitKeyboardMode: true,
+                        },
+                    }));
+                }
+                return;
+            }
+            if (this.isKeyboardMode) {
+                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            direction: e.key === 'ArrowUp' ? 'up' : 'down',
+                            item: this.el,
+                            itemId: this.itemId,
+                            keyboardMode: true,
+                        },
+                    }));
+                }
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        item: this.el,
+                        itemId: this.itemId,
+                        keyboardMode: true,
+                    },
+                }));
+            }
+        };
+        this.handleRadioChange = () => {
+            if (!this.disabled) {
+                this.itemSelect.emit({ itemId: this.itemId });
+            }
+        };
+        this.handleRadioClick = (ev) => {
+            if (this.href) {
+                ev.stopPropagation();
+            }
+        };
+    }
+    handleItemChange() {
+        this.updateSlotPresence();
+    }
+    handleKeyboardActiveChange(newValue) {
+        this.isKeyboardMode = newValue;
+    }
+    handleSelectedChange(newValue) {
+        const radio = this.el.querySelector('.xpl-list-item__selectable input[type="radio"]');
+        if (radio instanceof HTMLInputElement && radio.checked !== newValue) {
+            radio.checked = newValue;
+        }
+    }
+    handleTitleBadgeVariantChange() {
+        this.updateSlotPresence();
+    }
+    connectedCallback() {
+        this.el.addEventListener('mousedown', this.handleMouseDown, true);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('mousedown', this.handleMouseDown, true);
+        this.detachDragHandlePointerReleaseListeners();
+    }
+    componentWillLoad() {
+        this.updateSlotPresence();
+        this.isKeyboardMode = !!this.keyboardActive;
+        const attrItemId = this.el.getAttribute('item-id');
+        if (attrItemId && !this.itemId) {
+            this.itemId = attrItemId;
+        }
+        if (this.el.id && !this.itemId) {
+            this.itemId = this.el.id;
+        }
+    }
+    componentDidRender() {
+        this.syncReorderDragHandleA11y();
+    }
+    handleSlotChange() {
+        this.updateSlotPresence();
+    }
+    updateSlotPresence() {
+        const attrVariant = this.el.getAttribute('title-badge-variant') ||
+            this.el.getAttribute('titlebadgevariant');
+        this.slotPresence = {
+            actions: this.hasSlot('actions'),
+            avatar: this.hasSlot('avatar'),
+            badges: this.hasSlot('badges'),
+            details: this.hasSlot('details'),
+            errorText: this.hasSlot('error-text'),
+            metadata: this.hasSlot('metadata'),
+            stackedExtra1: this.hasSlot('stacked-extra-1'),
+            stackedExtra2: this.hasSlot('stacked-extra-2'),
+            stackedExtra3: this.hasSlot('stacked-extra-3'),
+            title: this.hasSlot('title'),
+            titleBadge: !!((this.titleBadgeVariant && String(this.titleBadgeVariant).length > 0) ||
+                (attrVariant && attrVariant.length > 0)),
+        };
+    }
+    detachDragHandlePointerReleaseListeners() {
+        if (this.dragHandlePointerReleaseCleanup) {
+            this.dragHandlePointerReleaseCleanup();
+            this.dragHandlePointerReleaseCleanup = undefined;
+        }
+    }
+    hasSlot(name) {
+        const hasDirectChildWithSlot = Array.from(this.el.children).some((c) => c.getAttribute('slot') === name);
+        if (hasDirectChildWithSlot) {
+            return true;
+        }
+        const slotEl = Array.from(this.el.querySelectorAll(`slot[name="${name}"]`)).find((s) => s.closest('xpl-list-item') === this.el);
+        if (slotEl && typeof slotEl.assignedNodes === 'function') {
+            return slotEl.assignedNodes({ flatten: true }).length > 0;
+        }
+        return false;
+    }
+    getTitleSlotAccessibleText() {
+        var _a;
+        const directTitle = Array.from(this.el.children).find((c) => c.getAttribute('slot') === 'title');
+        if (directTitle) {
+            return (_a = directTitle.textContent) !== null && _a !== void 0 ? _a : undefined;
+        }
+        const slotEl = Array.from(this.el.querySelectorAll('slot[name="title"]')).find((s) => s.closest('xpl-list-item') === this.el);
+        if (slotEl && typeof slotEl.assignedNodes === 'function') {
+            const combined = slotEl
+                .assignedNodes({ flatten: true })
+                .map((node) => {
+                var _a, _b;
+                if (node.nodeType === Node.TEXT_NODE) {
+                    return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+                }
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    return (_b = node.textContent) !== null && _b !== void 0 ? _b : '';
+                }
+                return '';
+            })
+                .join('')
+                .trim();
+            return combined || undefined;
+        }
+        return undefined;
+    }
+    getRowIdForAccessibleLabel() {
+        var _a, _b, _c;
+        const fromProp = (_a = this.itemId) === null || _a === void 0 ? void 0 : _a.trim();
+        if (fromProp) {
+            return fromProp;
+        }
+        const fromAttr = (_b = this.el.getAttribute('item-id')) === null || _b === void 0 ? void 0 : _b.trim();
+        if (fromAttr) {
+            return fromAttr;
+        }
+        const fromId = (_c = this.el.id) === null || _c === void 0 ? void 0 : _c.trim();
+        if (fromId) {
+            return fromId;
+        }
+        return '';
+    }
+    getSelectableRadioLabel() {
+        var _a;
+        const rowId = this.getRowIdForAccessibleLabel();
+        if (this.slotPresence.title) {
+            const titleText = (_a = this.getTitleSlotAccessibleText()) === null || _a === void 0 ? void 0 : _a.trim();
+            if (titleText) {
+                return titleText;
+            }
+            if (rowId) {
+                return `Select ${rowId}`;
+            }
+            return 'Select list item';
+        }
+        if (rowId) {
+            return `Select ${rowId}`;
+        }
+        return 'Select list item';
+    }
+    renderLegacyAvatarCell() {
+        if (!this.item.avatar || typeof this.item.avatar !== 'string') {
+            return null;
+        }
+        return this.item.avatar.slice(0, 1) === '/' || this.item.avatar.slice(0, 4) === 'http' ? (h("xpl-avatar", { src: this.item.avatar, name: this.item.title })) : (h("xpl-avatar", { name: this.item.title }, this.item.avatar));
+    }
+    renderPropBasedItem() {
+        const { item } = this;
+        const hasRight = item.avatars || item.badges || item.subtext;
+        const Tag = item.href ? 'a' : 'div';
+        const linkProps = item.href ? { href: item.href } : {};
+        return (h(Host, { role: "listitem", class: {
+                'xpl-list-item': true,
+                'xpl-list-item--error': this.error,
+                'xpl-list-item--disabled': this.disabled,
+            }, hidden: this.hidden }, this.renderLegacyAvatarCell(), h(Tag, Object.assign({ class: "xpl-list-item-content" }, linkProps), h("div", { class: "xpl-list-left" }, h("div", null, h("h4", null, item.title), item.metadata && (h("ul", { class: "xpl-list-item-metadata" }, item.metadata.map((d) => {
+            if (typeof d === 'string') {
+                return h("li", null, d);
+            }
+            return (h("li", null, h("xpl-icon", { icon: d.icon }), " ", d.text));
+        }))))), hasRight && (h("div", { class: "xpl-list-right" }, item.subtext && (h("div", { class: "xpl-list-item-subtext" }, item.subtext)), item.avatars && (h("div", { class: "xpl-avatar-group xpl-avatar-group--s" }, item.avatars.map((a) => (h("img", { src: a, alt: "" }))))), item.badges &&
+            item.badges.map((b) => {
+                if (typeof b === 'string') {
+                    return h("xpl-badge", null, b);
+                }
+                return (h("xpl-badge", { dot: b.dot, variant: b.variant }, b.text));
+            }))), item.href ? (h("span", { class: "xpl-list-item__link-chevron", "aria-hidden": "true" }, h("xpl-icon", { icon: "chevron-right", size: 12 }))) : null)));
+    }
+    renderTitleBadge() {
+        if (!this.slotPresence.titleBadge) {
+            return null;
+        }
+        const variant = (this.titleBadgeVariant ||
+            this.el.getAttribute('title-badge-variant') ||
+            this.el.getAttribute('titlebadgevariant') ||
+            'purple');
+        return (h("div", { class: "xpl-list-item__title-badge" }, h("xpl-badge", { dotOnly: true, size: "small", variant: variant })));
+    }
+    renderSlotBasedItem() {
+        var _a;
+        const hasRightSideContent = this.slotPresence.details || this.slotPresence.badges || this.slotPresence.actions;
+        const hasStackedContent = this.slotPresence.title ||
+            this.slotPresence.metadata ||
+            this.slotPresence.stackedExtra1 ||
+            this.slotPresence.stackedExtra2 ||
+            this.slotPresence.stackedExtra3;
+        const radioGroupName = this.radioName || this.el.getAttribute('radio-name') || '';
+        const reorderActive = this.reorderable && !this.disabled;
+        const wrapperClass = 'xpl-list-item__wrapper';
+        const dragSurfaceProps = {
+            draggable: reorderActive,
+            onDragStart: this.handleDragStart,
+            onDragOver: this.handleDragOver,
+            onDragEnter: this.handleDragEnter,
+            onDragLeave: this.handleDragLeave,
+            onDrop: this.handleDrop,
+            onDragEnd: this.handleDragEnd,
+        };
+        const rowBody = (h(Fragment, null, reorderActive && (h("div", { class: "xpl-list-item__reorderable" }, h("xpl-button", { class: {
+                'xpl-list-item__drag-handle': true,
+                'xpl-list-item__drag-handle--keyboard-mode': this.isKeyboardMode,
+            }, type: "button", variant: "tertiary", sentiment: "neutral", iconOnly: true, icon: this.isKeyboardMode ? 'caret-expand-y' : 'grip-dots-vertical', disabled: this.disabled, onClick: this.preventRowLinkNavigation, onMouseDown: this.handleDragHandleMouseDown, onKeyDown: this.handleDragHandleKeyDown }))), this.selectable && radioGroupName ? (h("div", { class: "xpl-list-item__selectable", onClick: this.handleRadioClick }, h("xpl-radio", { checked: this.selected, disabled: this.disabled, name: radioGroupName, value: (_a = this.itemId) !== null && _a !== void 0 ? _a : '', onRadioChange: this.handleRadioChange }, this.getSelectableRadioLabel()))) : null, this.slotPresence.avatar && (h("div", { class: "xpl-list-item__avatar", onClick: this.preventRowLinkNavigation }, h("slot", { name: "avatar" }))), hasStackedContent && (h("div", { class: "xpl-list-item__stacked" }, (this.slotPresence.title || this.slotPresence.titleBadge) && (h("div", { class: "xpl-list-item__title-row" }, h("div", { class: "xpl-list-item__title-wrapper" }, this.renderTitleBadge(), h("slot", { name: "title" })))), this.showDivider && h("xpl-divider", null), this.slotPresence.metadata && (h("div", { class: "xpl-list-item__metadata-row" }, h("slot", { name: "metadata" }))), this.slotPresence.stackedExtra1 && (h("div", { class: "xpl-list-item__stacked-extra-1" }, h("slot", { name: "stacked-extra-1" }))), this.slotPresence.stackedExtra2 && (h("div", { class: "xpl-list-item__stacked-extra-2" }, h("slot", { name: "stacked-extra-2" }))), this.slotPresence.stackedExtra3 && (h("div", { class: "xpl-list-item__stacked-extra-3" }, h("slot", { name: "stacked-extra-3" }))))), hasRightSideContent && (h("div", { class: "xpl-list-item__right" }, this.slotPresence.details && (h("div", { class: "xpl-list-item__details" }, h("slot", { name: "details" }))), this.slotPresence.badges && (h("div", { class: "xpl-list-item__badges" }, h("slot", { name: "badges" }))), this.slotPresence.actions && (h("div", { class: "xpl-list-item__actions", onClick: this.preventRowLinkNavigation }, h("slot", { name: "actions" }))))), this.href ? (h("span", { class: "xpl-list-item__link-chevron", "aria-hidden": "true" }, h("xpl-icon", { icon: "chevron-right", size: 12 }))) : null));
+        return (h(Host, { class: {
+                'xpl-list-item': true,
+                'xpl-list-item--error': this.error || this.slotPresence.errorText,
+                'xpl-list-item--disabled': this.disabled,
+                'xpl-list-item--slot-based': true,
+                'xpl-list-item--selected': this.selected,
+            }, hidden: this.hidden }, this.href ? (h("div", { role: "listitem", class: "xpl-list-item__listitem-shell" }, h("a", Object.assign({ class: wrapperClass, href: this.href }, dragSurfaceProps), rowBody))) : (h("div", Object.assign({ role: "listitem", class: wrapperClass }, dragSurfaceProps), rowBody)), this.slotPresence.errorText && (h("div", { class: "xpl-list-item__error-text" }, h("xpl-icon", { icon: "circle-warning", size: 16 }), h("slot", { name: "error-text" })))));
+    }
+    syncReorderDragHandleA11y() {
+        if (!this.reorderable || this.disabled) {
+            return;
+        }
+        const host = this.el.querySelector('xpl-button.xpl-list-item__drag-handle');
+        const nativeBtn = host === null || host === void 0 ? void 0 : host.querySelector('button');
+        if (!nativeBtn) {
+            return;
+        }
+        const label = this.isKeyboardMode
+            ? 'Press arrow up or down to reorder, Escape to exit'
+            : 'Press Enter or Space to activate keyboard reorder mode, or drag to reorder';
+        nativeBtn.setAttribute('aria-label', label);
+        nativeBtn.setAttribute('aria-pressed', this.isKeyboardMode ? 'true' : 'false');
+    }
+    render() {
+        if (this.hidden) {
+            return h(Host, { hidden: true });
+        }
+        if (this.item) {
+            return this.renderPropBasedItem();
+        }
+        return this.renderSlotBasedItem();
+    }
+    static get is() { return "xpl-list-item"; }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the item in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the row is not shown and does not participate in visible-only list behavior\n(e.g. `orderChange` / `orderedItemIds`, reorder targets). Use for filtering, conditional\ndisplay, or keeping stable `item-id` while the row is off-screen. See `xpl-list` readme\n\u201CHidden rows\u201D.\n\n**Accessibility:** Renders an empty host with the native `hidden` attribute only (no\n`role=\"listitem\"`), consistent with the row not participating as a list item while hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hidden",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for link behavior. When provided, the entire row becomes clickable.\nClicks on `actions` or `avatar` slots are prevented from triggering navigation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "item": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ListItem",
+                    "resolved": "ListItem",
+                    "references": {
+                        "ListItem": {
+                            "location": "import",
+                            "path": "../listitem",
+                            "id": "src/components/components/xpl-list/listitem.ts::ListItem",
+                            "referenceLocation": "ListItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional item data for prop-based rendering.\nWhen provided, this takes precedence over slotted content\nand renders using the legacy ListItem interface.\n**Deprecated.** Prefer slot-based composition (named slots on `xpl-list-item`)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "itemId": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for this item. Used for selection and drag/drop.\nMutable so the host can sync from `item-id` / `id` in `componentWillLoad` without breaking one-way data flow."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-id"
+            },
+            "keyboardActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set by the parent, indicates this item is the active keyboard reorder item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard-active",
+                "defaultValue": "false"
+            },
+            "radioName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for radio inputs (shared across selectable items in a list)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radio-name"
+            },
+            "reorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this item is reorderable (shows a drag handle in **slot-based** layout).\nWhen the deprecated `item` prop is used, legacy markup has **no** reorder handle even if this is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorderable",
+                "defaultValue": "false"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this item is selectable (shows `xpl-radio` in a shared group)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this item is selected (radio checked state)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "showDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a divider below the item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-divider",
+                "defaultValue": "false"
+            },
+            "titleBadgeVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeVariantProp",
+                    "resolved": "\"blue\" | \"error\" | \"gray\" | \"green\" | \"inactive\" | \"orange\" | \"purple\" | \"red\" | \"success\" | \"warning\" | \"yellow\"",
+                    "references": {
+                        "BadgeVariantProp": {
+                            "location": "import",
+                            "path": "../../xpl-badge/xpl-badge",
+                            "id": "src/components/components/xpl-badge/xpl-badge.tsx::BadgeVariantProp",
+                            "referenceLocation": "BadgeVariantProp"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional badge to display next to the title (dot badge).\nOnly used when `item` prop is not provided (slot mode).\nMatches `xpl-badge` variant values (e.g. purple, green, red)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-badge-variant"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "slotPresence": {},
+            "isKeyboardMode": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemDragEnd",
+                "name": "itemDragEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a drag operation ends on this item (after drop or cancel)."
+                },
+                "complexType": {
+                    "original": "{ itemId?: string; item: HTMLElement }",
+                    "resolved": "{ itemId?: string; item: HTMLElement; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemDragStart",
+                "name": "itemDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when drag starts on this item."
+                },
+                "complexType": {
+                    "original": "{ itemId?: string; item: HTMLElement }",
+                    "resolved": "{ itemId?: string; item: HTMLElement; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemDrop",
+                "name": "itemDrop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is dropped on this item."
+                },
+                "complexType": {
+                    "original": "{ itemId?: string; item: HTMLElement }",
+                    "resolved": "{ itemId?: string; item: HTMLElement; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemSelect",
+                "name": "itemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the item is selected (radio change)."
+                },
+                "complexType": {
+                    "original": "{ itemId?: string }",
+                    "resolved": "{ itemId?: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "item",
+                "methodName": "handleItemChange"
+            }, {
+                "propName": "keyboardActive",
+                "methodName": "handleKeyboardActiveChange"
+            }, {
+                "propName": "selected",
+                "methodName": "handleSelectedChange"
+            }, {
+                "propName": "titleBadgeVariant",
+                "methodName": "handleTitleBadgeVariantChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "slotchange",
+                "method": "handleSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}