@genexus/genexus-ide-ui 0.0.93 → 0.0.94

package/dist/components/tab.js

@@ -1,141 +1,605 @@
-import { proxyCustomElement, HTMLElement, h, createEvent, Host } from '@stencil/core/internal/client';
-import { t as tokenMap } from './utils.js';
+import { proxyCustomElement, HTMLElement, h, createEvent, forceUpdate, Host } from '@stencil/core/internal/client';
+import { a as isRTL, t as tokenMap, i as inBetween } from './utils.js';
+import { C as CAPTION_ID, P as PAGE_ID, S as SELECTED_PART, a as CLOSE_BUTTON_PART, D as DRAG_PREVIEW, b as DRAG_PREVIEW_OUTSIDE, c as DRAG_PREVIEW_INSIDE_INLINE, d as DRAG_PREVIEW_INSIDE_BLOCK, e as DRAG_PREVIEW_ELEMENT, B as BUTTON_CLASS, I as IMAGE_CLASS, f as PAGE_CLASS, g as PAGE_CONTAINER_CLASS, h as PAGE_NAME_CLASS, T as TAB_LIST_CLASS } from './utils2.js';
+import { r as removeElement, i as insertIntoIndex } from './array.js';
+import { f as focusComposedPath } from './helpers.js';
 
-// Classes and parts
-const BUTTON_CLASS = (type) => `${type}__button`;
-const IMAGE_CLASS = (type) => `${type}__img`;
-const PAGE_CLASS = (type) => `${type}__page`;
-const PAGE_CONTAINER_CLASS = (type) => `${type}__page-container`;
-const PAGE_NAME_CLASS = (type) => `${type}__page-name`;
-const TAB_LIST_CLASS = (type) => `${type}__tab-list`;
-// Ids
-const CAPTION_ID = (name) => `caption-${name}`;
-const PAGE_ID = (name) => `page-${name}`;
-// Export part functions
-const CLOSE_BUTTON_PART = "close-button";
-const SELECTED_PART = "selected";
-const additionalParts = `,${CLOSE_BUTTON_PART},${SELECTED_PART}`;
-const TAB_TYPE_PARTS = [
-    BUTTON_CLASS,
-    IMAGE_CLASS,
-    PAGE_CLASS,
-    PAGE_CONTAINER_CLASS,
-    PAGE_NAME_CLASS,
-    TAB_LIST_CLASS
-];
-const INLINE_START_PARTS = TAB_TYPE_PARTS.map(partFunction => partFunction("inlineStart")).join(",") +
-    additionalParts;
-const MAIN_PARTS = TAB_TYPE_PARTS.map(partFunction => partFunction("main")).join(",") +
-    additionalParts;
-const INLINE_END_PARTS = TAB_TYPE_PARTS.map(partFunction => partFunction("inlineEnd")).join(",") +
-    additionalParts;
-const BLOCK_END_PARTS = TAB_TYPE_PARTS.map(partFunction => partFunction("blockEnd")).join(",") +
-    additionalParts;
-const CAPTION_PARTS = (widgets) => widgets.map(item => CAPTION_ID(item.id)).join(",");
-const tabTypeToPart = {
-    inlineStart: widgets => INLINE_START_PARTS + "," + CAPTION_PARTS(widgets),
-    main: widgets => MAIN_PARTS + "," + CAPTION_PARTS(widgets),
-    inlineEnd: widgets => INLINE_END_PARTS + "," + CAPTION_PARTS(widgets),
-    blockEnd: widgets => BLOCK_END_PARTS + "," + CAPTION_PARTS(widgets)
-};
-
-const tabCss = "*,::after,::before{box-sizing:border-box}:host{display:grid;block-size:100%;inline-size:100%}:host([type=blockStart]){grid-auto-flow:row;grid-auto-rows:max-content}:host([type=inlineStart]){grid-template-columns:max-content 1fr}:host([type=main]),:host([type=blockEnd]){grid-template-rows:max-content 1fr}:host([type=inlineEnd]){grid-template-columns:1fr max-content}:where(button){all:unset;display:flex;align-items:center;user-select:none;touch-action:manipulation;-webkit-user-drag:element;cursor:pointer}.caption-image{display:block;block-size:18px;inline-size:18px}.close-button::after{content:\"\";display:flex;block-size:1em;inline-size:1em;-webkit-mask:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 2L15.5 15.5\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.5 2L2 15.5\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') 50% 50%/0.75em 0.75em no-repeat;background-color:currentColor;opacity:0}.main__button,.blockEnd__button{display:flex;align-items:center}.main__button:hover>.close-button::after,.main__button:focus-within>.close-button::after,.main__button[aria-selected=true]>.close-button::after,.blockEnd__button:hover>.close-button::after,.blockEnd__button:focus-within>.close-button::after,.blockEnd__button[aria-selected=true]>.close-button::after{opacity:1}.inlineStart__tab-list,.inlineEnd__tab-list{display:grid;grid-auto-flow:row;grid-auto-rows:max-content}.inlineEnd__tab-list{order:1}.main__tab-list,.blockEnd__tab-list{display:grid;grid-auto-flow:column;grid-auto-columns:max-content}.page-container{display:grid;block-size:100%;inline-size:100%}@supports (content-visibility: hidden){.page-container--collapsed{content-visibility:hidden;inline-size:0}}@supports not (content-visibility: hidden){.page-container--collapsed{display:none}}.inlineStart__page,.inlineEnd__page{display:grid;grid-template-rows:max-content 1fr}.page--hidden{display:none}";
+const tabCss = "*,::after,::before{box-sizing:border-box}:host{--ch-tab-transition-duration:150ms;display:grid;block-size:100%;inline-size:100%}:host([type=inlineStart]){grid-template-columns:max-content 1fr}:host(.ch-tab-direction--block){grid-template-rows:max-content 1fr}:host([type=inlineEnd]){grid-template-columns:1fr max-content}:where(button){all:unset;display:flex;align-items:center;user-select:none;touch-action:manipulation;-webkit-user-drag:element;cursor:pointer}.caption-image,.decorative-image::before{display:block;block-size:18px;inline-size:18px}.decorative-image::before{content:\"\";-webkit-mask:var(--ch-tab-decorative-image) 50% 50%/100% 100% no-repeat;background-color:currentColor}.close-button::after{content:\"\";display:flex;block-size:1em;inline-size:1em;-webkit-mask:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 2L15.5 15.5\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.5 2L2 15.5\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') 50% 50%/0.75em 0.75em no-repeat;background-color:currentColor;opacity:0}.block__button{display:flex;align-items:center}.block__button:hover>.close-button::after,.block__button:focus-within>.close-button::after,.block__button[aria-selected=true]>.close-button::after{opacity:1}.dragged-element{opacity:0}.dragged-element--outside{display:none}.drag-preview{--ch-tab-snap-drag-preview:clamp(\n    var(--ch-tab-tab-list-start),\n    var(--ch-tab-mouse-position),\n    var(--ch-tab-tab-list-end)\n  );position:fixed;left:0;top:0;z-index:108}.drag-preview:popover-open{padding:0;margin:0;border:unset;color:unset;pointer-events:none}.drag-preview-element{cursor:grabbing}.drag-preview--outside-tab-list{transform:translate(calc(var(--ch-tab-mouse-position-x) - var(--ch-tab-mouse-offset-x)), calc(var(--ch-tab-mouse-position-y) - var(--ch-tab-mouse-offset-y)))}.drag-preview--inside-tab-list__block{--ch-tab-mouse-position:calc(\n    var(--ch-tab-mouse-position-x) - var(--ch-tab-mouse-offset-x)\n  );transform:translate(var(--ch-tab-snap-drag-preview), var(--ch-tab-button-position-y))}.drag-preview--inside-tab-list__inline{--ch-tab-mouse-position:calc(\n    var(--ch-tab-mouse-position-y) - var(--ch-tab-mouse-offset-y)\n  );transform:translate(var(--ch-tab-button-position-x), var(--ch-tab-snap-drag-preview))}.shifted-element{transition:transform var(--ch-tab-transition-duration)}:host(.ch-tab-direction--block) .shifted-element--start{transform:translate(calc(var(--ch-tab-button-size) * -1), 0)}:host(.ch-tab-direction--block) .shifted-element--end{transform:translate(var(--ch-tab-button-size), 0)}:host(.ch-tab-direction--inline) .shifted-element--start{transform:translateY(calc(var(--ch-tab-button-size) * -1))}:host(.ch-tab-direction--inline) .shifted-element--end{transform:translateY(var(--ch-tab-button-size))}.inline__tab-list{display:grid;grid-auto-flow:row;grid-auto-rows:max-content}:host([type=inlineEnd])>.inline__tab-list{order:1}.block__tab-list{display:grid;grid-auto-flow:column;grid-auto-columns:max-content}.page-container{display:grid;grid-template:\"selected\" 1fr/1fr;block-size:100%;inline-size:100%}.page--selected{grid-area:selected}@supports (content-visibility: hidden){.page-container--collapsed,.page--hidden{content-visibility:hidden}.page-container--collapsed{inline-size:0}}@supports not (content-visibility: hidden){.page-container--collapsed,.page--hidden{display:none}}";
 
-const ChTab = /*@__PURE__*/ proxyCustomElement(class ChTab extends HTMLElement {
-    constructor() {
-        this.classes = {};
-        this.lastSelectedItem = -1;
-        this.handleSelectedItemChange = (index, itemId) => (event) => {
-            event.stopPropagation();
-            this.selectedItemChange.emit({
-                lastSelectedIndex: this.lastSelectedItem,
-                newSelectedId: itemId,
-                newSelectedIndex: index,
-                type: this.type
-            });
-            this.lastSelectedItem = index;
-        };
-        this.handleItemDblClick = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.expandMainGroup.emit();
-        };
-        this.handleClose = (itemId) => (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.itemClose.emit(itemId);
-        };
-        this.renderTabBar = () => (h("div", { role: "tablist", "aria-label": this.accessibleName, class: this.classes.TAB_LIST, part: this.classes.TAB_LIST }, this.items.map((item, index) => (h("button", { key: CAPTION_ID(item.id), id: CAPTION_ID(item.id), role: "tab", "aria-controls": PAGE_ID(item.id), "aria-label": !this.showCaptions ? item.name : null, "aria-selected": (!!item.selected).toString(), class: this.classes.BUTTON, part: tokenMap({
-                [this.classes.BUTTON]: true,
-                [CAPTION_ID(item.id)]: true,
-                [SELECTED_PART]: item.selected
-            }), onClick: !item.selected
-                ? this.handleSelectedItemChange(index, item.id)
-                : null, onDblClick: this.type === "main" ? this.handleItemDblClick : null }, item.startImageSrc && (h("img", { "aria-hidden": "true", class: { [this.classes.IMAGE]: true, "caption-image": true }, part: this.classes.IMAGE, alt: "", src: item.startImageSrc, loading: "lazy" })), this.showCaptions && item.name, this.showCaptions && (h("button", { "aria-label": this.closeButtonAccessibleName, class: "close-button", part: CLOSE_BUTTON_PART, type: "button", onClick: this.handleClose(item.id) })))))));
-        this.renderTabPages = () => (h("div", { class: {
-                [this.classes.PAGE_CONTAINER]: true,
-                "page-container": true,
-                "page-container--collapsed": !this.expanded
-            }, part: this.classes.PAGE_CONTAINER }, this.items.map(item => (h("div", { key: PAGE_ID(item.id), id: PAGE_ID(item.id), role: "tabpanel", "aria-labelledby": CAPTION_ID(item.name), class: {
-                [this.classes.PAGE]: true,
-                "page--hidden": !item.selected
-            }, part: this.classes.PAGE }, this.showPageName &&
-            (this.type === "inlineStart" || this.type === "inlineEnd") && (h("span", { "aria-hidden": "true", part: this.classes.PAGE_NAME }, item.name)), item.wasRendered && h("slot", { name: item.id }))))));
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.expandMainGroup = createEvent(this, "expandMainGroup", 7);
-        this.itemClose = createEvent(this, "itemClose", 7);
-        this.selectedItemChange = createEvent(this, "selectedItemChange", 7);
-        this.accessibleName = undefined;
-        this.closeButtonAccessibleName = "Close";
-        this.expanded = true;
-        this.items = undefined;
-        this.showPageName = true;
-        this.type = undefined;
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ChTab_cancelId, _ChTab_classes, _ChTab_parts, _ChTab_direction, _ChTab_selectedIndex, _ChTab_showCaptions, _ChTab_lastDragEvent, _ChTab_needForRAF, _ChTab_initialMousePosition, _ChTab_itemSizes, _ChTab_mouseBoundingLimits, _ChTab_renderedPages, _ChTab_dragPreviewRef, _ChTab_tabListRef, _ChTab_tabPageRef, _ChTab_keyEvents, _ChTab_handleSelectedItemChange, _ChTab_updateRenderedPages, _ChTab_handleItemDblClick, _ChTab_handleDragStart, _ChTab_handleDragEnd, _ChTab_handleItemDrag, _ChTab_handleClose, _ChTab_handleTabFocus, _ChTab_imgRender, _ChTab_renderTabBar, _ChTab_renderTabPages, _ChTab_renderDragPreview, _ChTab_initializeState, _ChTab_setClassesAndParts, _a;
+// Custom vars
+const TRANSITION_DURATION = "--ch-tab-transition-duration";
+const BUTTON_POSITION_X = "--ch-tab-button-position-x";
+const BUTTON_POSITION_Y = "--ch-tab-button-position-y";
+const BUTTON_SIZE = "--ch-tab-button-size";
+const MOUSE_OFFSET_X = "--ch-tab-mouse-offset-x";
+const MOUSE_OFFSET_Y = "--ch-tab-mouse-offset-y";
+const MOUSE_POSITION_X = "--ch-tab-mouse-position-x";
+const MOUSE_POSITION_Y = "--ch-tab-mouse-position-y";
+const TAB_LIST_EDGE_START_POSITION = "--ch-tab-tab-list-start";
+const TAB_LIST_EDGE_END_POSITION = "--ch-tab-tab-list-end";
+const DECORATIVE_IMAGE = "--ch-tab-decorative-image";
+// Key codes
+const ARROW_UP = "ArrowUp";
+const ARROW_RIGHT = "ArrowRight";
+const ARROW_DOWN = "ArrowDown";
+const ARROW_LEFT = "ArrowLeft";
+const HOME = "Home";
+const END = "End";
+// Selectors
+const FIRST_CAPTION_BUTTON = (tabListRef) => tabListRef.querySelector(":scope>button");
+const LAST_CAPTION_BUTTON = (tabListRef) => tabListRef.querySelector(":scope>button:last-child");
+// Utility functions
+const isDecorativeImg = (item) => item.startImageSrc &&
+    (!item.startImageType || item.startImageType === "pseudo-element");
+const getDirection = (type) => type === "main" || type === "blockEnd" ? "block" : "inline";
+const isBlockDirection = (direction) => direction === "block";
+const setProperty = (element, property, value) => element.style.setProperty(property, `${value}px`);
+const setButtonInitialPosition = (element, positionX, positionY) => {
+    setProperty(element, BUTTON_POSITION_X, positionX);
+    setProperty(element, BUTTON_POSITION_Y, positionY);
+};
+const setButtonSize = (element, size) => {
+    setProperty(element, BUTTON_SIZE, size);
+};
+const setMousePosition = (element, positionX, positionY) => {
+    setProperty(element, MOUSE_POSITION_X, positionX);
+    setProperty(element, MOUSE_POSITION_Y, positionY);
+};
+// Useful to implement snap to the edges
+const setTabListStartEndPosition = (element, startPosition, endPosition) => {
+    setProperty(element, TAB_LIST_EDGE_START_POSITION, startPosition);
+    setProperty(element, TAB_LIST_EDGE_END_POSITION, endPosition);
+};
+const getTabListSizesAndSetPosition = (hostRef, tabListRef, direction, buttonRect) => {
+    const tabListRect = tabListRef.getBoundingClientRect();
+    // Tab List information
+    const tabListSizes = {
+        xStart: tabListRect.x,
+        xEnd: tabListRect.x + tabListRect.width,
+        yStart: tabListRect.y,
+        yEnd: tabListRect.y + tabListRect.height
+    };
+    if (isBlockDirection(direction)) {
+        setTabListStartEndPosition(hostRef, tabListSizes.xStart, tabListSizes.xEnd - buttonRect.width);
     }
-    handleItemsChange(newItems) {
-        this.updateSelectedIndex(newItems);
+    else {
+        setTabListStartEndPosition(hostRef, tabListSizes.yStart, tabListSizes.yEnd - buttonRect.height);
     }
-    updateSelectedIndex(items) {
-        if (items == null) {
-            this.lastSelectedItem = -1;
-            return;
-        }
-        this.lastSelectedItem = items.findIndex(item => item.selected);
+    return tabListSizes;
+};
+const setMouseOffset = (element, offsetX, offsetY) => {
+    setProperty(element, MOUSE_OFFSET_X, offsetX);
+    setProperty(element, MOUSE_OFFSET_Y, offsetY);
+};
+const addGrabbingStyle = () => document.body.style.setProperty("cursor", "grabbing");
+const removeGrabbingStyle = () => document.body.style.removeProperty("cursor");
+const focusNextOrPreviousCaption = (focusNextSibling, tabListRef, focusedCaption, event) => {
+    var _b, _c;
+    // Prevent scroll
+    event.preventDefault();
+    let nextFocusedCaption;
+    // Determine the next selected caption button
+    if (focusNextSibling) {
+        nextFocusedCaption = ((_b = focusedCaption.nextElementSibling) !== null && _b !== void 0 ? _b : FIRST_CAPTION_BUTTON(tabListRef));
     }
-    componentWillLoad() {
-        this.updateSelectedIndex(this.items);
-        // Initialize classes
-        this.classes = {
-            BUTTON: BUTTON_CLASS(this.type),
-            IMAGE: IMAGE_CLASS(this.type),
-            PAGE: PAGE_CLASS(this.type),
-            PAGE_CONTAINER: PAGE_CONTAINER_CLASS(this.type),
-            PAGE_NAME: PAGE_NAME_CLASS(this.type),
-            TAB_LIST: TAB_LIST_CLASS(this.type)
-        };
-        this.showCaptions = this.type === "main" || this.type === "blockEnd";
+    else {
+        nextFocusedCaption = ((_c = focusedCaption.previousElementSibling) !== null && _c !== void 0 ? _c : LAST_CAPTION_BUTTON(tabListRef));
     }
-    render() {
-        if (this.items == null || this.items.length === 0) {
-            return "";
+    // Focus and select the caption
+    nextFocusedCaption.focus();
+    nextFocusedCaption.click();
+};
+const ChTab = /*@__PURE__*/ proxyCustomElement((_a = class ChTab extends HTMLElement {
+        constructor() {
+            _ChTab_cancelId.set(this, void 0);
+            // Styling
+            _ChTab_classes.set(this, {});
+            _ChTab_parts.set(this, {});
+            _ChTab_direction.set(this, void 0);
+            _ChTab_selectedIndex.set(this, -1);
+            _ChTab_showCaptions.set(this, void 0);
+            _ChTab_lastDragEvent.set(this, void 0);
+            _ChTab_needForRAF.set(this, true); // To prevent redundant RAF (request animation frame) calls
+            _ChTab_initialMousePosition.set(this, -1);
+            // Allocated at runtime to reduce memory usage
+            _ChTab_itemSizes.set(this, void 0);
+            /**
+             * This variable represents the boundaries of the box where the mouse can be
+             * placed when dragging a caption, to consider that the caption is within the
+             * tab list.
+             */
+            _ChTab_mouseBoundingLimits.set(this, void 0);
+            _ChTab_renderedPages.set(this, new Set());
+            // Refs
+            _ChTab_dragPreviewRef.set(this, void 0);
+            _ChTab_tabListRef.set(this, void 0);
+            _ChTab_tabPageRef.set(this, void 0);
+            // Keyboard interactions
+            _ChTab_keyEvents.set(this, {
+                [ARROW_UP]: (direction, ev, focusedButton) => {
+                    if (direction === "block") {
+                        return;
+                    }
+                    focusNextOrPreviousCaption(false, __classPrivateFieldGet(this, _ChTab_tabListRef, "f"), focusedButton, ev);
+                },
+                [ARROW_RIGHT]: (direction, ev, focusedButton) => {
+                    if (direction === "inline") {
+                        return;
+                    }
+                    focusNextOrPreviousCaption(!isRTL(), __classPrivateFieldGet(this, _ChTab_tabListRef, "f"), focusedButton, ev);
+                },
+                [ARROW_DOWN]: (direction, ev, focusedButton) => {
+                    if (direction === "block") {
+                        return;
+                    }
+                    focusNextOrPreviousCaption(true, __classPrivateFieldGet(this, _ChTab_tabListRef, "f"), focusedButton, ev);
+                },
+                [ARROW_LEFT]: (direction, ev, focusedButton) => {
+                    if (direction === "inline") {
+                        return;
+                    }
+                    focusNextOrPreviousCaption(isRTL(), __classPrivateFieldGet(this, _ChTab_tabListRef, "f"), focusedButton, ev);
+                },
+                [HOME]: () => {
+                    const nextFocusedCaption = FIRST_CAPTION_BUTTON(__classPrivateFieldGet(this, _ChTab_tabListRef, "f"));
+                    // Focus and select the caption
+                    nextFocusedCaption.focus();
+                    nextFocusedCaption.click();
+                },
+                [END]: () => {
+                    const nextFocusedCaption = LAST_CAPTION_BUTTON(__classPrivateFieldGet(this, _ChTab_tabListRef, "f"));
+                    // Focus and select the caption
+                    nextFocusedCaption.focus();
+                    nextFocusedCaption.click();
+                }
+            });
+            _ChTab_handleSelectedItemChange.set(this, (index, itemId) => (event) => {
+                event.stopPropagation();
+                this.selectedItemChange.emit({
+                    lastSelectedIndex: __classPrivateFieldGet(this, _ChTab_selectedIndex, "f"),
+                    newSelectedId: itemId,
+                    newSelectedIndex: index,
+                    type: this.type
+                });
+                __classPrivateFieldSet(this, _ChTab_selectedIndex, index, "f");
+                // this.selectedId = itemId;
+            });
+            /**
+             * Make a set based on the rendered items array to maintain order between the
+             * pages, even when re-ordering tabs. This is useful for optimizing rendering
+             * performance by not re-ordering pages when the caption's order changes.
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _ChTab_updateRenderedPages.set(this, (items) => {
+                (items !== null && items !== void 0 ? items : []).forEach(item => {
+                    if (item.wasRendered) {
+                        __classPrivateFieldGet(this, _ChTab_renderedPages, "f").add(item.id);
+                    }
+                });
+            });
+            _ChTab_handleItemDblClick.set(this, (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.expandMainGroup.emit();
+            });
+            _ChTab_handleDragStart.set(this, (index) => (event) => {
+                // Remove dragover event to allow mousemove event to fire
+                event.preventDefault();
+                // Store the index of the dragged element
+                this.draggedElementIndex = index;
+                // - - - - - - - - - - - DOM read operations - - - - - - - - - - -
+                const mousePositionX = event.clientX;
+                const mousePositionY = event.clientY;
+                const getItemSize = isBlockDirection(__classPrivateFieldGet(this, _ChTab_direction, "f"))
+                    ? (item) => item.getBoundingClientRect().width
+                    : (item) => item.getBoundingClientRect().height;
+                __classPrivateFieldSet(this, _ChTab_itemSizes, [...__classPrivateFieldGet(this, _ChTab_tabListRef, "f").children].map(getItemSize), "f");
+                const buttonRect = event.target.getBoundingClientRect();
+                // Tab List information
+                const tabListSizes = getTabListSizesAndSetPosition(this.el, __classPrivateFieldGet(this, _ChTab_tabListRef, "f"), __classPrivateFieldGet(this, _ChTab_direction, "f"), buttonRect);
+                // Button information
+                const buttonSizes = {
+                    xStart: buttonRect.x,
+                    xEnd: buttonRect.x + buttonRect.width,
+                    yStart: buttonRect.y,
+                    yEnd: buttonRect.y + buttonRect.height
+                };
+                const mouseDistanceToButtonTopEdge = mousePositionY - buttonSizes.yStart;
+                const mouseDistanceToButtonBottomEdge = buttonSizes.yEnd - mousePositionY;
+                const mouseDistanceToButtonLeftEdge = mousePositionX - buttonSizes.xStart;
+                const mouseDistanceToButtonRightEdge = buttonSizes.xEnd - mousePositionX;
+                // Mouse limits
+                __classPrivateFieldSet(this, _ChTab_mouseBoundingLimits, {
+                    xStart: tabListSizes.xStart - mouseDistanceToButtonRightEdge,
+                    xEnd: tabListSizes.xEnd + mouseDistanceToButtonLeftEdge,
+                    yStart: tabListSizes.yStart - mouseDistanceToButtonBottomEdge,
+                    yEnd: tabListSizes.yEnd + mouseDistanceToButtonTopEdge
+                }, "f");
+                // Store initial mouse position
+                __classPrivateFieldSet(this, _ChTab_initialMousePosition, isBlockDirection(__classPrivateFieldGet(this, _ChTab_direction, "f"))
+                    ? mousePositionX
+                    : mousePositionY, "f");
+                // - - - - - - - - - - - DOM write operations - - - - - - - - - - -
+                // Initialize mouse position to avoid initial flickering
+                setMousePosition(this.el, mousePositionX, mousePositionY);
+                // Initialize the button position
+                setButtonInitialPosition(this.el, buttonSizes.xStart, buttonSizes.yStart);
+                setButtonSize(this.el, isBlockDirection(__classPrivateFieldGet(this, _ChTab_direction, "f")) ? buttonRect.width : buttonRect.height);
+                // Update mouse offset to correctly place the dragged element preview
+                setMouseOffset(this.el, mouseDistanceToButtonLeftEdge, mouseDistanceToButtonTopEdge);
+                addGrabbingStyle();
+                // Add listeners
+                document.body.addEventListener("mousemove", __classPrivateFieldGet(this, _ChTab_handleItemDrag, "f"), {
+                    capture: true,
+                    passive: true
+                });
+                document.body.addEventListener("mouseup", __classPrivateFieldGet(this, _ChTab_handleDragEnd, "f"), {
+                    capture: true
+                });
+            });
+            _ChTab_handleDragEnd.set(this, () => {
+                // Since mousemove callbacks are executed on animation frames, we must also
+                // remove the events on animations frame. Otherwise we would remove the
+                // events and in the next frame the mousemove handler will be executes
+                cancelAnimationFrame(__classPrivateFieldGet(this, _ChTab_cancelId, "f"));
+                __classPrivateFieldSet(this, _ChTab_needForRAF, true, "f");
+                document.body.removeEventListener("mousemove", __classPrivateFieldGet(this, _ChTab_handleItemDrag, "f"), {
+                    capture: true
+                });
+                document.body.removeEventListener("mouseup", __classPrivateFieldGet(this, _ChTab_handleDragEnd, "f"), {
+                    capture: true
+                });
+                removeGrabbingStyle();
+                const anItemWasReordered = !this.hasCrossedBoundaries &&
+                    this.draggedElementNewIndex !== this.draggedElementIndex;
+                // Move the item to the new position
+                if (anItemWasReordered) {
+                    const itemToInsert = removeElement(this.items, this.draggedElementIndex);
+                    insertIntoIndex(this.items, itemToInsert, this.draggedElementNewIndex);
+                    // Update last selected index
+                    this.adjustLastSelectedIndexValueAfterReorder();
+                }
+                // Restore visibility of the dragged element
+                this.draggedElementIndex = -1;
+                this.draggedElementNewIndex = -1;
+                // Free the memory
+                __classPrivateFieldSet(this, _ChTab_itemSizes, undefined, "f");
+                // Reset state
+                this.hasCrossedBoundaries = false;
+                this.el.style.removeProperty(TRANSITION_DURATION);
+            });
+            _ChTab_handleItemDrag.set(this, (event) => {
+                __classPrivateFieldSet(this, _ChTab_lastDragEvent, event, "f");
+                if (!__classPrivateFieldGet(this, _ChTab_needForRAF, "f")) {
+                    return;
+                }
+                __classPrivateFieldSet(this, _ChTab_needForRAF, false, "f"); // No need to call RAF up until next frame
+                __classPrivateFieldSet(this, _ChTab_cancelId, requestAnimationFrame(() => {
+                    __classPrivateFieldSet(this, _ChTab_needForRAF, true, "f"); // RAF now consumes the movement instruction so a new one can come
+                    const mousePositionX = __classPrivateFieldGet(this, _ChTab_lastDragEvent, "f").clientX;
+                    const mousePositionY = __classPrivateFieldGet(this, _ChTab_lastDragEvent, "f").clientY;
+                    setMousePosition(this.el, mousePositionX, mousePositionY);
+                    // There is no need to update the preview of the reorder
+                    if (this.hasCrossedBoundaries) {
+                        return;
+                    }
+                    const mouseLimits = __classPrivateFieldGet(this, _ChTab_mouseBoundingLimits, "f");
+                    const draggedButtonIsInsideTheTabList = inBetween(mouseLimits.xStart, mousePositionX, mouseLimits.xEnd) &&
+                        inBetween(mouseLimits.yStart, mousePositionY, mouseLimits.yEnd);
+                    // Emit the itemDragStart event the first time the button is out of the
+                    // mouse bounds (`mouseBoundingLimits`)
+                    if (!draggedButtonIsInsideTheTabList) {
+                        this.hasCrossedBoundaries = true;
+                        // Remove transition before the render to avoid flickering in the animation
+                        this.el.style.setProperty(TRANSITION_DURATION, "0s");
+                        this.itemDragStart.emit(this.draggedElementIndex);
+                        return;
+                    }
+                    // There is no need to re-order the items in the preview
+                    if (this.items.length === 1) {
+                        return;
+                    }
+                    // In this point, the preview is inside the tab list, we should check
+                    // in which place is the preview to give feedback for the item's reorder
+                    const mousePosition = isBlockDirection(__classPrivateFieldGet(this, _ChTab_direction, "f"))
+                        ? mousePositionX
+                        : mousePositionY;
+                    const hasMovedToTheEnd = __classPrivateFieldGet(this, _ChTab_initialMousePosition, "f") < mousePosition;
+                    // Distance traveled from the initial mouse position
+                    let distanceTraveled = Math.abs(__classPrivateFieldGet(this, _ChTab_initialMousePosition, "f") - mousePosition);
+                    let newIndex = this.draggedElementIndex;
+                    if (hasMovedToTheEnd) {
+                        // While it is not the last item and the distance traveled is greater
+                        // than half the size of the next item
+                        while (newIndex < this.items.length - 1 &&
+                            distanceTraveled - __classPrivateFieldGet(this, _ChTab_itemSizes, "f")[newIndex + 1] / 2 > 0) {
+                            distanceTraveled -= __classPrivateFieldGet(this, _ChTab_itemSizes, "f")[newIndex + 1];
+                            newIndex++;
+                        }
+                    }
+                    else {
+                        // While it is not the first item and the distance traveled is greater
+                        // than half the size of the previous item
+                        while (newIndex > 0 &&
+                            distanceTraveled - __classPrivateFieldGet(this, _ChTab_itemSizes, "f")[newIndex - 1] / 2 > 0) {
+                            distanceTraveled -= __classPrivateFieldGet(this, _ChTab_itemSizes, "f")[newIndex - 1];
+                            newIndex--;
+                        }
+                    }
+                    // Check if should update the dragged element index in the preview
+                    if (this.draggedElementNewIndex !== newIndex) {
+                        this.draggedElementNewIndex = newIndex;
+                    }
+                }), "f");
+            });
+            _ChTab_handleClose.set(this, (index, itemId) => (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.itemClose.emit({
+                    itemIndex: index,
+                    itemId: itemId,
+                    type: this.type
+                });
+            });
+            _ChTab_handleTabFocus.set(this, (event) => {
+                if (this.items.length < 2) {
+                    return;
+                }
+                const keyEventHandler = __classPrivateFieldGet(this, _ChTab_keyEvents, "f")[event.code];
+                if (!keyEventHandler) {
+                    return;
+                }
+                const currentFocusedCaption = focusComposedPath()[0].closest("." + __classPrivateFieldGet(this, _ChTab_classes, "f").BUTTON);
+                keyEventHandler(__classPrivateFieldGet(this, _ChTab_direction, "f"), event, currentFocusedCaption);
+            });
+            _ChTab_imgRender.set(this, (item) => item.startImageType === "img" &&
+                item.startImageSrc && (h("img", { "aria-hidden": "true", class: "caption-image " + __classPrivateFieldGet(this, _ChTab_classes, "f").IMAGE, part: __classPrivateFieldGet(this, _ChTab_parts, "f").IMAGE, alt: "", src: item.startImageSrc, loading: "lazy" })));
+            _ChTab_renderTabBar.set(this, (thereAreShiftedElements) => (h("div", { role: "tablist", "aria-label": this.accessibleName, class: __classPrivateFieldGet(this, _ChTab_classes, "f").TAB_LIST, part: __classPrivateFieldGet(this, _ChTab_parts, "f").TAB_LIST, ref: el => (__classPrivateFieldSet(this, _ChTab_tabListRef, el, "f")), onKeyDown: __classPrivateFieldGet(this, _ChTab_handleTabFocus, "f") }, this.items.map((item, index) => (h("button", { key: CAPTION_ID(item.id), id: CAPTION_ID(item.id), role: "tab", "aria-controls": PAGE_ID(item.id), "aria-label": !__classPrivateFieldGet(this, _ChTab_showCaptions, "f") ? item.name : null, "aria-selected": (item.id === this.selectedId).toString(), class: {
+                    [__classPrivateFieldGet(this, _ChTab_classes, "f").BUTTON]: true,
+                    "decorative-image": isDecorativeImg(item),
+                    "dragged-element": this.draggedElementIndex === index,
+                    "dragged-element--outside": this.draggedElementIndex === index &&
+                        this.hasCrossedBoundaries &&
+                        this.items.length > 1,
+                    "shifted-element": this.draggedElementIndex !== -1,
+                    "shifted-element--start": thereAreShiftedElements &&
+                        this.draggedElementIndex < index &&
+                        index <= this.draggedElementNewIndex,
+                    "shifted-element--end": thereAreShiftedElements &&
+                        this.draggedElementNewIndex <= index &&
+                        index < this.draggedElementIndex
+                }, part: tokenMap({
+                    [__classPrivateFieldGet(this, _ChTab_parts, "f").BUTTON]: true,
+                    [CAPTION_ID(item.id)]: true,
+                    [SELECTED_PART]: item.id === this.selectedId
+                }), style: isDecorativeImg(item)
+                    ? { [DECORATIVE_IMAGE]: `url("${item.startImageSrc}")` }
+                    : null, onAuxClick: __classPrivateFieldGet(this, _ChTab_handleClose, "f").call(this, index, item.id), onClick: !(item.id === this.selectedId)
+                    ? __classPrivateFieldGet(this, _ChTab_handleSelectedItemChange, "f").call(this, index, item.id)
+                    : null, onDblClick: this.type === "main" ? __classPrivateFieldGet(this, _ChTab_handleItemDblClick, "f") : null,
+                // Drag and drop
+                onDragStart: !this.dragDisabled ? __classPrivateFieldGet(this, _ChTab_handleDragStart, "f").call(this, index) : null }, __classPrivateFieldGet(this, _ChTab_imgRender, "f").call(this, item), __classPrivateFieldGet(this, _ChTab_showCaptions, "f") && item.name, __classPrivateFieldGet(this, _ChTab_showCaptions, "f") && (h("button", { "aria-label": this.closeButtonAccessibleName, class: "close-button", part: CLOSE_BUTTON_PART, type: "button", onClick: __classPrivateFieldGet(this, _ChTab_handleClose, "f").call(this, index, item.id) }))))))));
+            _ChTab_renderTabPages.set(this, () => (h("div", { class: {
+                    [__classPrivateFieldGet(this, _ChTab_classes, "f").PAGE_CONTAINER]: true,
+                    "page-container": true,
+                    "page-container--collapsed": !this.expanded
+                }, part: __classPrivateFieldGet(this, _ChTab_parts, "f").PAGE_CONTAINER, ref: el => (__classPrivateFieldSet(this, _ChTab_tabPageRef, el, "f")) }, [...__classPrivateFieldGet(this, _ChTab_renderedPages, "f").keys()].map(itemId => (h("div", { key: PAGE_ID(itemId), id: PAGE_ID(itemId), role: "tabpanel", "aria-labelledby": CAPTION_ID(itemId), class: {
+                    [__classPrivateFieldGet(this, _ChTab_classes, "f").PAGE]: true,
+                    "page--selected": itemId === this.selectedId,
+                    "page--hidden": !(itemId === this.selectedId)
+                }, part: __classPrivateFieldGet(this, _ChTab_parts, "f").PAGE }, h("slot", { name: itemId })))))));
+            _ChTab_renderDragPreview.set(this, (draggedElement) => {
+                const classes = {
+                    [DRAG_PREVIEW]: true,
+                    [DRAG_PREVIEW_OUTSIDE]: this.hasCrossedBoundaries,
+                    [DRAG_PREVIEW_INSIDE_INLINE]: !this.hasCrossedBoundaries && !isBlockDirection(__classPrivateFieldGet(this, _ChTab_direction, "f")),
+                    [DRAG_PREVIEW_INSIDE_BLOCK]: !this.hasCrossedBoundaries && isBlockDirection(__classPrivateFieldGet(this, _ChTab_direction, "f"))
+                };
+                return (h("div", { "aria-hidden": "true", class: classes, part: tokenMap(classes), ref: el => (__classPrivateFieldSet(this, _ChTab_dragPreviewRef, el, "f")) }, h("button", { class: {
+                        [__classPrivateFieldGet(this, _ChTab_classes, "f").BUTTON]: true,
+                        [DRAG_PREVIEW_ELEMENT]: true,
+                        "decorative-image": isDecorativeImg(draggedElement)
+                    }, part: tokenMap({
+                        [__classPrivateFieldGet(this, _ChTab_parts, "f").BUTTON]: true,
+                        [CAPTION_ID(draggedElement.id)]: true,
+                        [DRAG_PREVIEW_ELEMENT]: true,
+                        [SELECTED_PART]: draggedElement.id === this.selectedId
+                    }), style: isDecorativeImg(draggedElement)
+                        ? { [DECORATIVE_IMAGE]: `url("${draggedElement.startImageSrc}")` }
+                        : null }, __classPrivateFieldGet(this, _ChTab_imgRender, "f").call(this, draggedElement), __classPrivateFieldGet(this, _ChTab_showCaptions, "f") && draggedElement.name)));
+            });
+            _ChTab_initializeState.set(this, (type) => {
+                __classPrivateFieldSet(this, _ChTab_direction, getDirection(type), "f");
+                __classPrivateFieldGet(this, _ChTab_updateRenderedPages, "f").call(this, this.items);
+                // Initialize classes and parts
+                __classPrivateFieldGet(this, _ChTab_setClassesAndParts, "f").call(this, __classPrivateFieldGet(this, _ChTab_direction, "f"), type);
+                __classPrivateFieldSet(this, _ChTab_showCaptions, isBlockDirection(__classPrivateFieldGet(this, _ChTab_direction, "f")), "f");
+            });
+            _ChTab_setClassesAndParts.set(this, (direction, type) => {
+                __classPrivateFieldSet(this, _ChTab_classes, {
+                    BUTTON: BUTTON_CLASS(direction),
+                    IMAGE: IMAGE_CLASS(direction),
+                    PAGE: PAGE_CLASS(direction),
+                    PAGE_CONTAINER: PAGE_CONTAINER_CLASS(direction),
+                    PAGE_NAME: PAGE_NAME_CLASS(direction),
+                    TAB_LIST: TAB_LIST_CLASS(direction)
+                }, "f");
+                // Add the type information to each part
+                Object.entries(__classPrivateFieldGet(this, _ChTab_classes, "f")).forEach(([key, value]) => {
+                    __classPrivateFieldGet(this, _ChTab_parts, "f")[key] = `${value} ${type}`;
+                });
+            });
+            super();
+            this.__registerHost();
+            this.__attachShadow();
+            this.expandMainGroup = createEvent(this, "expandMainGroup", 7);
+            this.itemClose = createEvent(this, "itemClose", 7);
+            this.selectedItemChange = createEvent(this, "selectedItemChange", 7);
+            this.itemDragStart = createEvent(this, "itemDragStart", 7);
+            this.draggedElementIndex = -1;
+            this.draggedElementNewIndex = -1;
+            this.hasCrossedBoundaries = false;
+            this.accessibleName = undefined;
+            this.closeButtonAccessibleName = "Close";
+            this.dragDisabled = false;
+            this.expanded = true;
+            this.items = undefined;
+            this.selectedId = undefined;
+            this.type = undefined;
         }
-        return (h(Host, null, this.renderTabBar(), this.renderTabPages()));
-    }
-    static get watchers() { return {
-        "items": ["handleItemsChange"]
-    }; }
-    static get style() { return tabCss; }
-}, [1, "ch-tab", {
+        get el() { return this; }
+        handleItemsChange(newItems) {
+            __classPrivateFieldGet(this, _ChTab_updateRenderedPages, "f").call(this, newItems);
+        }
+        handleSelectedIdChange(newSelectedId) {
+            __classPrivateFieldGet(this, _ChTab_renderedPages, "f").add(newSelectedId);
+        }
+        handleTypeChange(newType) {
+            __classPrivateFieldGet(this, _ChTab_initializeState, "f").call(this, newType);
+        }
+        /**
+         * Ends the preview of the dragged item. Useful for ending the preview via
+         * keyboard interaction.
+         */
+        async endDragPreview() {
+            __classPrivateFieldGet(this, _ChTab_handleDragEnd, "f").call(this);
+        }
+        /**
+         * Returns the info associated to the draggable view.
+         */
+        async getDraggableViews() {
+            return {
+                mainView: this.el,
+                pageView: __classPrivateFieldGet(this, _ChTab_tabPageRef, "f"),
+                tabListView: __classPrivateFieldGet(this, _ChTab_tabListRef, "f")
+            };
+        }
+        /**
+         * Promotes the drag preview to the top layer. Useful to avoid z-index issues.
+         */
+        async promoteDragPreviewToTopLayer() {
+            if (this.draggedElementIndex === -1) {
+                return;
+            }
+            // If this property is added in a declarative way via the Stencil's render,
+            // we would have to use requestAnimationFrame to delay the shopPopover()
+            // method, since the popover defaults to "auto", which does not allow to
+            // keep multiple "auto" popover open at the same time
+            __classPrivateFieldGet(this, _ChTab_dragPreviewRef, "f").popover = "manual";
+            __classPrivateFieldGet(this, _ChTab_dragPreviewRef, "f").showPopover();
+        }
+        /**
+         * Given an id, remove the page from the render
+         */
+        async removePage(pageId, forceRerender = true) {
+            __classPrivateFieldGet(this, _ChTab_renderedPages, "f").delete(pageId);
+            if (forceRerender) {
+                forceUpdate(this);
+            }
+        }
+        adjustLastSelectedIndexValueAfterReorder() {
+            var _b, _c;
+            // If the dragged element is the selected element, use the new index
+            if (__classPrivateFieldGet(this, _ChTab_selectedIndex, "f") === this.draggedElementIndex) {
+                __classPrivateFieldSet(this, _ChTab_selectedIndex, this.draggedElementNewIndex, "f");
+            }
+            // Dragged element:
+            //   - Started: Before the selected index
+            //   - Ended: After the selected index or in the same position
+            else if (this.draggedElementIndex < __classPrivateFieldGet(this, _ChTab_selectedIndex, "f") &&
+                __classPrivateFieldGet(this, _ChTab_selectedIndex, "f") <= this.draggedElementNewIndex) {
+                __classPrivateFieldSet(this, _ChTab_selectedIndex, (_b = __classPrivateFieldGet(this, _ChTab_selectedIndex, "f"), _b--, _b), "f");
+            }
+            // Dragged element:
+            //   - Started: After the selected index
+            //   - Ended: Before the selected index or in the same position
+            else if (__classPrivateFieldGet(this, _ChTab_selectedIndex, "f") < this.draggedElementIndex &&
+                this.draggedElementNewIndex <= __classPrivateFieldGet(this, _ChTab_selectedIndex, "f")) {
+                __classPrivateFieldSet(this, _ChTab_selectedIndex, (_c = __classPrivateFieldGet(this, _ChTab_selectedIndex, "f"), _c++, _c), "f");
+            }
+        }
+        componentWillLoad() {
+            __classPrivateFieldGet(this, _ChTab_initializeState, "f").call(this, this.type);
+        }
+        render() {
+            if (this.items == null || this.items.length === 0) {
+                return "";
+            }
+            const draggedIndex = this.draggedElementIndex;
+            const draggedElement = this.items[draggedIndex];
+            const thereAreShiftedElementsInPreview = !this.hasCrossedBoundaries &&
+                this.draggedElementNewIndex !== -1 &&
+                this.draggedElementIndex !== this.draggedElementNewIndex;
+            return (h(Host, { class: `ch-tab-direction--${__classPrivateFieldGet(this, _ChTab_direction, "f")}` }, __classPrivateFieldGet(this, _ChTab_renderTabBar, "f").call(this, thereAreShiftedElementsInPreview), __classPrivateFieldGet(this, _ChTab_renderTabPages, "f").call(this), draggedIndex !== -1 && __classPrivateFieldGet(this, _ChTab_renderDragPreview, "f").call(this, draggedElement)));
+        }
+        static get watchers() { return {
+            "items": ["handleItemsChange"],
+            "selectedId": ["handleSelectedIdChange"],
+            "type": ["handleTypeChange"]
+        }; }
+        static get style() { return tabCss; }
+    },
+    _ChTab_cancelId = new WeakMap(),
+    _ChTab_classes = new WeakMap(),
+    _ChTab_parts = new WeakMap(),
+    _ChTab_direction = new WeakMap(),
+    _ChTab_selectedIndex = new WeakMap(),
+    _ChTab_showCaptions = new WeakMap(),
+    _ChTab_lastDragEvent = new WeakMap(),
+    _ChTab_needForRAF = new WeakMap(),
+    _ChTab_initialMousePosition = new WeakMap(),
+    _ChTab_itemSizes = new WeakMap(),
+    _ChTab_mouseBoundingLimits = new WeakMap(),
+    _ChTab_renderedPages = new WeakMap(),
+    _ChTab_dragPreviewRef = new WeakMap(),
+    _ChTab_tabListRef = new WeakMap(),
+    _ChTab_tabPageRef = new WeakMap(),
+    _ChTab_keyEvents = new WeakMap(),
+    _ChTab_handleSelectedItemChange = new WeakMap(),
+    _ChTab_updateRenderedPages = new WeakMap(),
+    _ChTab_handleItemDblClick = new WeakMap(),
+    _ChTab_handleDragStart = new WeakMap(),
+    _ChTab_handleDragEnd = new WeakMap(),
+    _ChTab_handleItemDrag = new WeakMap(),
+    _ChTab_handleClose = new WeakMap(),
+    _ChTab_handleTabFocus = new WeakMap(),
+    _ChTab_imgRender = new WeakMap(),
+    _ChTab_renderTabBar = new WeakMap(),
+    _ChTab_renderTabPages = new WeakMap(),
+    _ChTab_renderDragPreview = new WeakMap(),
+    _ChTab_initializeState = new WeakMap(),
+    _ChTab_setClassesAndParts = new WeakMap(),
+    _a), [1, "ch-tab", {
         "accessibleName": [1, "accessible-name"],
         "closeButtonAccessibleName": [1, "close-button-accessible-name"],
+        "dragDisabled": [4, "drag-disabled"],
         "expanded": [4],
         "items": [16],
-        "showPageName": [4, "show-page-name"],
-        "type": [513]
+        "selectedId": [1, "selected-id"],
+        "type": [513],
+        "draggedElementIndex": [32],
+        "draggedElementNewIndex": [32],
+        "hasCrossedBoundaries": [32],
+        "endDragPreview": [64],
+        "getDraggableViews": [64],
+        "promoteDragPreviewToTopLayer": [64],
+        "removePage": [64]
     }, undefined, {
-        "items": ["handleItemsChange"]
+        "items": ["handleItemsChange"],
+        "selectedId": ["handleSelectedIdChange"],
+        "type": ["handleTypeChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -151,6 +615,6 @@ function defineCustomElement() {
     } });
 }
 
-export { ChTab as C, defineCustomElement as d, tabTypeToPart as t };
+export { ChTab as C, defineCustomElement as d };
 
 //# sourceMappingURL=tab.js.map