@xplortech/apollo-core 2.5.0 → 2.7.0

package/dist/collection/components/xpl-tabs/xpl-tabs.js

@@ -1,39 +1,190 @@
 import { Host, h, } from "@stencil/core";
-export class XplTabs {
+const PILL_LABEL_ICON_SELECTORS = '.xpl-button__icon, xpl-icon';
+let xplTabsInstanceCounter = 0;
+function tabHeadingLabelFromElement(tab) {
+    var _a, _b;
+    const pillInner = tab.querySelector('xpl-button button');
+    if (pillInner) {
+        const clone = pillInner.cloneNode(true);
+        if (clone instanceof HTMLElement) {
+            clone.querySelectorAll(PILL_LABEL_ICON_SELECTORS).forEach((node) => node.remove());
+            const text = (_a = clone.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ').trim();
+            if (text) {
+                return text;
+            }
+        }
+    }
+    const underline = tab.querySelector('.xpl-tab__button');
+    if (underline) {
+        return Array.from(underline.childNodes)
+            .filter((node) => node.nodeType === Node.TEXT_NODE)
+            .map((node) => { var _a; return ((_a = node.textContent) !== null && _a !== void 0 ? _a : '').trim(); })
+            .join(' ');
+    }
+    return (_b = tab.getAttribute('target')) !== null && _b !== void 0 ? _b : '';
+}
+export class Tabs {
     constructor() {
-        this.fullWidth = false;
-        this.selectedValue = this.getDefaultValue();
+        this.tabHeadings = [];
+        this.tabPanels = [];
+        this.tablistKeydownBound = false;
         this.activeBarPosition = {
             left: 0,
             width: 0,
         };
+        this.choicesTick = 1;
         this.isMobileSelectChange = false;
-        this.tabHeadings = [];
-        this.tabPanels = [];
+        this.selectedValue = '';
+        this.disabled = false;
+        this.fullWidth = false;
+        this.type = 'tabs';
         this.handleTabChange = (target) => {
-            this.updateTabsSelectedState(target);
+            this.applySelection(target);
+        };
+        this.onTablistKeydown = async (ev) => {
+            var _a, _b;
+            if (this.disabled) {
+                return;
+            }
+            const tabHost = (_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'xpl-tab');
+            if (!tabHost || !this.tabHeadings.includes(tabHost)) {
+                return;
+            }
+            const { key } = ev;
+            const rtl = this.isTablistRtl();
+            let moveForward = false;
+            let moveBackward = false;
+            if (rtl) {
+                if (key === 'ArrowLeft' || key === 'ArrowDown') {
+                    moveForward = true;
+                }
+                else if (key === 'ArrowRight' || key === 'ArrowUp') {
+                    moveBackward = true;
+                }
+            }
+            else if (key === 'ArrowRight' || key === 'ArrowDown') {
+                moveForward = true;
+            }
+            else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+                moveBackward = true;
+            }
+            const isArrow = moveForward || moveBackward;
+            const isHome = key === 'Home';
+            const isEnd = key === 'End';
+            if (!isArrow && !isHome && !isEnd) {
+                return;
+            }
+            const enabled = this.getEnabledTabHeadingsSync();
+            if (enabled.length === 0) {
+                return;
+            }
+            const currentIndex = enabled.indexOf(tabHost);
+            if (currentIndex === -1) {
+                return;
+            }
+            let nextIndex;
+            if (isArrow) {
+                if (moveForward) {
+                    nextIndex = (currentIndex + 1) % enabled.length;
+                }
+                else {
+                    nextIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+                }
+            }
+            else if (isHome) {
+                nextIndex = 0;
+            }
+            else {
+                nextIndex = enabled.length - 1;
+            }
+            const nextTab = enabled[nextIndex];
+            const nextValue = nextTab === null || nextTab === void 0 ? void 0 : nextTab.getAttribute('target');
+            if (!nextValue) {
+                return;
+            }
+            const currentTarget = tabHost.getAttribute('target');
+            ev.preventDefault();
+            if (nextValue === currentTarget) {
+                return;
+            }
+            this.applySelection(nextValue);
+            await nextTab.focusTrigger();
+            this.tabChange.emit(nextValue);
         };
     }
-    onWindowResize() {
-        this.updateActiveBarPosition();
+    onDisabledChanged() {
+        this.syncGroupDisabledOnTabs();
+        if (!this.disabled) {
+            this.syncRovingTabindex();
+        }
     }
-    getDefaultValue() {
-        var _a, _b;
-        return this.value || ((_b = (_a = this.tabHeadings) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getAttribute('target')) || '';
+    onFullWidthChanged() {
+        this.syncFullWidthOnTabs();
     }
-    updateActiveBarPosition() {
-        const tabHeading = this.tabHeadings.find((heading) => heading.getAttribute('target') === this.selectedValue);
-        if (!this.headingsContainerRef || !tabHeading) {
+    onTypeChanged() {
+        this.syncVariantOnTabs();
+    }
+    onValueChanged(newValue) {
+        this.applySelection(newValue);
+    }
+    connectedCallback() {
+        if (!this.el.hasAttribute('data-tabs-instance-id')) {
+            xplTabsInstanceCounter += 1;
+            this.el.setAttribute('data-tabs-instance-id', `xpl-tg-${xplTabsInstanceCounter}`);
+        }
+        if (typeof MutationObserver === 'undefined') {
             return;
         }
-        const tabRect = tabHeading.getBoundingClientRect();
-        const containerRect = this.headingsContainerRef.getBoundingClientRect();
-        this.activeBarPosition = {
-            left: tabRect.left - containerRect.left,
-            width: tabRect.width,
-        };
+        this.observer = new MutationObserver(() => {
+            this.collectTabs(true);
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this.headingsContainerRef && this.tablistKeydownBound) {
+            this.headingsContainerRef.removeEventListener('keydown', this.onTablistKeydown);
+            this.tablistKeydownBound = false;
+        }
+        if (this.rafId !== undefined) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = undefined;
+        }
+    }
+    componentWillLoad() {
+        this.selectedValue = this.getDefaultValue();
     }
-    updateTabsSelectedState(newValue) {
+    componentDidLoad() {
+        this.collectTabs(false);
+        this.attachTablistKeydown();
+    }
+    componentDidUpdate() {
+        this.updateActiveBarPosition();
+        this.syncRovingTabindex();
+    }
+    componentDidRender() {
+        if (!this.tablistKeydownBound && this.headingsContainerRef) {
+            this.attachTablistKeydown();
+        }
+    }
+    onWindowResize() {
+        this.updateActiveBarPosition();
+    }
+    syncGroupDisabledOnTabs() {
+        this.tabHeadings.forEach((tabHeading) => {
+            if (this.disabled) {
+                tabHeading.setAttribute('data-group-disabled', '');
+            }
+            else {
+                tabHeading.removeAttribute('data-group-disabled');
+            }
+        });
+    }
+    applySelection(newValue) {
         this.tabHeadings.forEach((tabHeading) => {
             const isSelected = newValue === tabHeading.getAttribute('target');
             if (isSelected) {
@@ -52,52 +203,125 @@ export class XplTabs {
                 tabPanel.removeAttribute('selected');
             }
         });
-        requestAnimationFrame(() => {
+        this.syncGroupDisabledOnTabs();
+        if (this.rafId !== undefined) {
+            cancelAnimationFrame(this.rafId);
+        }
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = undefined;
             this.selectedValue = newValue;
             this.updateActiveBarPosition();
+            this.syncRovingTabindex();
         });
     }
-    collectTabs() {
-        this.tabHeadings = Array.from(this.el.querySelectorAll('xpl-tab'));
-        this.tabPanels = Array.from(this.el.querySelectorAll('xpl-tab-panel'));
-        this.handleTabChange(this.getDefaultValue());
+    isOwnedTabOrPanel(node) {
+        return node.closest('xpl-tabs') === this.el;
     }
-    renderChoices() {
-        return this.tabHeadings.map((tabHeading) => {
-            var _a, _b;
-            return ({
-                label: Array.from((_b = (_a = tabHeading.querySelector('.xpl-tab__button')) === null || _a === void 0 ? void 0 : _a.childNodes) !== null && _b !== void 0 ? _b : [])
-                    .filter((node) => node.nodeType === Node.TEXT_NODE)
-                    .map((node) => node.textContent.trim())
-                    .join(' '),
-                value: tabHeading.getAttribute('target'),
-            });
+    collectTabs(bumpChoicesTick) {
+        this.tabHeadings = Array.from(this.el.querySelectorAll('xpl-tab')).filter((tab) => this.isOwnedTabOrPanel(tab));
+        this.tabPanels = Array.from(this.el.querySelectorAll('xpl-tab-panel')).filter((panel) => this.isOwnedTabOrPanel(panel));
+        this.syncVariantOnTabs();
+        this.syncFullWidthOnTabs();
+        this.applySelection(this.getDefaultValue());
+        if (bumpChoicesTick) {
+            this.choicesTick += 1;
+        }
+    }
+    syncVariantOnTabs() {
+        this.tabHeadings.forEach((tabHeading) => {
+            tabHeading.variant = this.type;
         });
     }
-    connectedCallback() {
-        if (typeof MutationObserver === 'undefined') {
+    syncFullWidthOnTabs() {
+        this.tabHeadings.forEach((tabHeading) => {
+            tabHeading.fullWidth = this.fullWidth;
+        });
+    }
+    getDefaultValue() {
+        var _a, _b;
+        return this.value || ((_b = (_a = this.tabHeadings) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getAttribute('target')) || '';
+    }
+    async syncRovingTabindex() {
+        if (this.disabled) {
             return;
         }
-        this.observer = new MutationObserver(() => {
-            this.collectTabs();
+        await Promise.all(this.tabHeadings.map(async (tabHeading) => {
+            var _a;
+            const target = (_a = tabHeading.getAttribute('target')) !== null && _a !== void 0 ? _a : '';
+            const isSelected = target === this.selectedValue;
+            await tabHeading.setTabIndex(isSelected ? 0 : -1);
+        }));
+    }
+    getEnabledTabHeadingsSync() {
+        return this.tabHeadings.filter((tabHeading) => {
+            if (this.disabled || tabHeading.hasAttribute('disabled')) {
+                return false;
+            }
+            const btn = tabHeading.variant === 'segment'
+                ? tabHeading.querySelector('xpl-button button')
+                : tabHeading.querySelector('.xpl-tab__button');
+            return Boolean(btn && !btn.disabled);
         });
-        this.observer.observe(this.el, {
-            childList: true,
-            subtree: true,
+    }
+    attachTablistKeydown() {
+        const nav = this.headingsContainerRef;
+        if (!nav || this.tablistKeydownBound) {
+            return;
+        }
+        nav.addEventListener('keydown', this.onTablistKeydown);
+        this.tablistKeydownBound = true;
+    }
+    isTablistRtl() {
+        const nav = this.headingsContainerRef;
+        if (!nav) {
+            return false;
+        }
+        return getComputedStyle(nav).direction === 'rtl';
+    }
+    renderChoices() {
+        return this.tabHeadings.map((tabHeading) => {
+            var _a;
+            const target = (_a = tabHeading.getAttribute('target')) !== null && _a !== void 0 ? _a : '';
+            const tabDisabled = this.disabled || tabHeading.hasAttribute('disabled');
+            const icon = this.type === 'segment' ? tabHeading.getAttribute('icon') || undefined : undefined;
+            return Object.assign({ label: tabHeadingLabelFromElement(tabHeading), value: target, isDisabled: tabDisabled }, (icon ? { icon } : {}));
         });
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    updateActiveBarPosition() {
+        if (this.type === 'segment') {
+            return;
+        }
+        const tabHeading = this.tabHeadings.find((heading) => heading.getAttribute('target') === this.selectedValue);
+        if (!this.headingsContainerRef || !tabHeading) {
+            return;
+        }
+        const tabRect = tabHeading.getBoundingClientRect();
+        const containerRect = this.headingsContainerRef.getBoundingClientRect();
+        const nextLeft = tabRect.left - containerRect.left;
+        const nextWidth = tabRect.width;
+        if (this.activeBarPosition.left === nextLeft &&
+            this.activeBarPosition.width === nextWidth) {
+            return;
+        }
+        this.activeBarPosition = {
+            left: nextLeft,
+            width: nextWidth,
+        };
     }
-    componentDidLoad() {
-        this.collectTabs();
+    mobileSelectClassNames() {
+        const base = 'xpl-tabs__mobile-select';
+        if (this.type === 'segment') {
+            return `${base} xpl-tabs__mobile-select--segment`;
+        }
+        return base;
     }
     render() {
-        return (h(Host, { key: 'c6858318e3adea4fb9a5587d16aff2778a69af0d', class: {
+        const isSegment = this.type === 'segment';
+        return (h(Host, { key: '56e4284e5a8fd492ebedcc963ddc2218f75c58c6', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
-            } }, h("xpl-select", { key: 'f6e67e41dc20da4bd6c3d9d4b60045e0e55c7343', classNames: "xpl-tabs__mobile-select", choices: this.renderChoices(), selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+                'xpl-tabs--segment': isSegment,
+            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: 'bd22e0a513a068915a206d48f8011cb779abdf44', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -108,37 +332,40 @@ export class XplTabs {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), h("nav", { key: '297eb4c0695adf1bea03de7e6874a0b61e108319', class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), h("nav", { key: 'b56a5a8435cbba117f7b66711a4bad4a0df1b808', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
                 this.headingsContainerRef = el;
             }, onTabChange: (event) => {
+                event.stopPropagation();
                 this.isMobileSelectChange = false;
                 this.handleTabChange(event.detail);
-            } }, h("div", { key: 'cd60b8acf47bb319bc92852d5f62ba456acee6f0', class: "xpl-tabs__active-bar", style: {
+                this.tabChange.emit(event.detail);
+            } }, !isSegment && (h("div", { key: '77c1c13e85a172da519e5081364808f8a873eb54', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } }), h("slot", { key: 'a4b73230bfc7178381780a5136a5c1d820be7d65', name: "heading" })), h("div", { key: 'e5d4cf94e1c75dabe73d8a5cc2d00cc97466f1b2', class: "xpl-tabs__panels" }, h("slot", { key: 'e3d2fbfed0ebc74f2fc41f74574e202e834e2129', name: "panel" }))));
+            } })), h("slot", { key: '24e4b6409fbfa26f859d64d4d37493a711006368', name: "heading" })), h("div", { key: '2a364d45d6377131c2809d25373bc90512f11307', class: "xpl-tabs__panels" }, h("slot", { key: '59335370a20458fc36bfa33a2a117744ce4434fc', name: "panel" }))));
     }
     static get is() { return "xpl-tabs"; }
     static get properties() {
         return {
-            "value": {
-                "type": "string",
+            "disabled": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The selected tab target value, defaults to the first tab"
+                    "text": "Disables the whole tab group (headings, mobile select, and segment pills)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
             "fullWidth": {
                 "type": "boolean",
@@ -159,14 +386,54 @@ export class XplTabs {
                 "reflect": false,
                 "attribute": "full-width",
                 "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'tabs' | 'segment'",
+                    "resolved": "\"segment\" | \"tabs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual and layout variant: classic underline tabs or segment (pill) controls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'tabs'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected tab target value, defaults to the first tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }
     static get states() {
         return {
-            "selectedValue": {},
             "activeBarPosition": {},
-            "isMobileSelectChange": {}
+            "choicesTick": {},
+            "isMobileSelectChange": {},
+            "selectedValue": {}
         };
     }
     static get events() {
@@ -178,7 +445,7 @@ export class XplTabs {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the target of the selected tab"
+                    "text": "Emitted when the selected tab changes (click, keyboard, or mobile `xpl-select`).\nThe event `detail` is the selected tab\u2019s `target` string.\nAlways dispatched from this host (including after heading clicks) so `event.target` is\nconsistent for listeners on `xpl-tabs` or bubbling ancestors."
                 },
                 "complexType": {
                     "original": "string",
@@ -190,8 +457,17 @@ export class XplTabs {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "onDisabledChanged"
+            }, {
+                "propName": "fullWidth",
+                "methodName": "onFullWidthChanged"
+            }, {
+                "propName": "type",
+                "methodName": "onTypeChanged"
+            }, {
                 "propName": "value",
-                "methodName": "updateTabsSelectedState"
+                "methodName": "onValueChanged"
             }];
     }
     static get listeners() {

package/dist/collection/components/xpl-tag/tag.stories.js

@@ -0,0 +1,153 @@
+function tagAttrs(args) {
+    const { disabled, dismissible, isDraggable, size, tagId } = args;
+    return [
+        `size="${size}"`,
+        disabled ? 'disabled' : '',
+        dismissible ? '' : 'dismissible="false"',
+        isDraggable ? 'is-draggable' : '',
+        tagId ? `tag-id="${tagId}"` : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+export default {
+    title: 'Components/Tag',
+    component: 'xpl-tag',
+    argTypes: {
+        size: {
+            options: ['default', 'sm'],
+            control: { type: 'select' },
+        },
+        disabled: { control: 'boolean' },
+        dismissible: { control: 'boolean' },
+        isDraggable: { control: 'boolean' },
+        slot: { control: 'text' },
+        tagId: { control: 'text' },
+    },
+};
+export const Tag = (args) => {
+    var _a;
+    const attrs = tagAttrs(args);
+    const text = (_a = args.slot) !== null && _a !== void 0 ? _a : '';
+    return `
+        <div style="padding: var(--xpl-space-32);">
+            <xpl-tag ${attrs}>${text}</xpl-tag>
+        </div>
+
+        <hr style="margin: var(--xpl-space-32) 0; border: none; border-top: var(--xpl-border-small) solid var(--xpl-border-subtle)" />
+
+        <p style="margin: 0 0 var(--xpl-space-12); color: var(--xpl-text-subdued)">Drag tags to reorder them within the container.</p>
+        <div
+            id="drag-playground"
+            style="display: flex; flex-wrap: wrap; gap: var(--xpl-space-8); padding: var(--xpl-space-16); border: var(--xpl-border-large) dashed var(--xpl-border-default); border-radius: var(--xpl-border-radius-default); min-height: var(--xpl-size-300); transition: border-color 0.2s"
+        >
+            <xpl-tag tag-id="tag-design" is-draggable ${attrs}>Design</xpl-tag>
+            <xpl-tag tag-id="tag-develop" is-draggable ${attrs}>Development</xpl-tag>
+            <xpl-tag tag-id="tag-qa" is-draggable ${attrs}>QA</xpl-tag>
+            <xpl-tag tag-id="tag-release" is-draggable ${attrs}>Release</xpl-tag>
+        </div>
+        <script>
+            (function() {
+                const container = document.getElementById('drag-playground');
+                if (!container) return;
+                let draggedElement = null;
+
+                container.addEventListener('dragstart', function(e) {
+                    const tag = e.target instanceof Element ? e.target.closest('xpl-tag') : null;
+                    if (tag) {
+                        draggedElement = tag;
+                        container.style.borderColor = 'var(--xpl-border-accent-information)';
+                    }
+                });
+
+                container.addEventListener('dragend', function() {
+                    draggedElement = null;
+                    container.style.borderColor = '';
+                });
+
+                container.addEventListener('dragover', function(e) {
+                    e.preventDefault();
+                    if (!draggedElement) return;
+                    const afterElement = getDragAfterElement(container, e.clientX);
+                    if (afterElement == null) {
+                        container.appendChild(draggedElement);
+                    } else {
+                        container.insertBefore(draggedElement, afterElement);
+                    }
+                });
+
+                function getDragAfterElement(cont, x) {
+                    const els = [...cont.querySelectorAll('xpl-tag')].filter(el => el !== draggedElement);
+                    return els.reduce((closest, child) => {
+                        const box = child.getBoundingClientRect();
+                        const offset = x - box.left - box.width / 2;
+                        return offset < 0 && offset > closest.offset
+                            ? { offset, element: child }
+                            : closest;
+                    }, { offset: Number.NEGATIVE_INFINITY }).element;
+                }
+            })();
+        </script>
+    `;
+};
+Tag.args = {
+    disabled: false,
+    dismissible: true,
+    isDraggable: false,
+    size: 'default',
+    slot: 'Tag label',
+    tagId: '',
+};
+Tag.parameters = {
+    layout: 'padded',
+    docs: {
+        description: {
+            story: 'Tags represent interactive keywords for labeling and categorization. Use `size` to switch between Default (24px) and Small (20px) variants. Set `dismissible={false}` to hide the close button. Set `disabled` to disable interaction. Try long text in the `slot` control to see truncation at max-width.',
+        },
+    },
+    'web-component': {
+        render: (() => {
+            var _a;
+            const args = Object.assign({}, Tag.args);
+            const attrs = tagAttrs(args);
+            return `<xpl-tag ${attrs}>${(_a = args.slot) !== null && _a !== void 0 ? _a : ''}</xpl-tag>`;
+        })(),
+    },
+    html: {
+        render: (() => {
+            var _a, _b;
+            const args = Object.assign({}, Tag.args);
+            const sizeMod = args.size === 'sm' ? 'xpl-tag--sm' : '';
+            const disabledMod = args.disabled ? 'xpl-tag--disabled' : '';
+            const dismissibleMod = args.dismissible ? 'xpl-tag--dismissible' : '';
+            const dragEnabled = args.isDraggable && !args.disabled;
+            const draggableMod = dragEnabled ? 'xpl-tag--draggable' : '';
+            const hostClasses = [
+                'xpl-tag',
+                'xpl-tag-container',
+                sizeMod,
+                disabledMod,
+                dismissibleMod,
+                draggableMod,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            const contentTag = dragEnabled ? 'div' : 'button';
+            const disabledAttr = args.disabled ? ' disabled' : '';
+            const contentAttrs = dragEnabled
+                ? 'role="button" tabindex="0" draggable="true"'
+                : `type="button"${disabledAttr}`;
+            const contentEl = `<${contentTag} class="xpl-tag__content xpl-tag" ${contentAttrs}>${(_a = args.slot) !== null && _a !== void 0 ? _a : ''}</${contentTag}>`;
+            const dismissLabelBase = ((_b = args.slot) !== null && _b !== void 0 ? _b : '').trim() || 'tag';
+            const dismissAriaLabel = `Dismiss ${dismissLabelBase}`.replace(/"/g, '&quot;');
+            const dismissButton = args.dismissible
+                ? `<button class="xpl-tag__dismiss xpl-tag__close" type="button" aria-label="${dismissAriaLabel}"${disabledAttr}><xpl-icon icon="xmark" size="10"></xpl-icon></button>`
+                : '';
+            return `<div class="${hostClasses}">${contentEl}${dismissButton}</div>`;
+        })(),
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=15243-65363',
+    },
+};