@shoper/phoenix_design_system 0.20.2 → 0.21.0-0

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
@@ -11,7 +10,6 @@ var portal_constants = require('../portal/portal_constants.js');
 var litHtml = require('lit-html');
 var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
-var ref_js = require('lit-html/directives/ref.js');
 var global_constants = require('../../global_constants.js');
 var dropdown_constants = require('./dropdown_constants.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
@@ -32,8 +30,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this._backdropController = new backdrop_controller.BackdropController();
         this._firstFocusableElement = undefined;
         this._lastFocusableElement = undefined;
-        this._focusSentinelStart = ref_js.createRef();
-        this._focusSentinelEnd = ref_js.createRef();
         this._handleClickOutside = async (target) => {
             var _a, _b;
             if (!this.opened)
@@ -59,11 +55,13 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                     }, 0);
                     const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
                     setTimeout(() => {
-                        var _a, _b;
+                        var _a, _b, _c;
                         this._dispatchShowDropdownEvent();
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
                         this._toggleScroll();
-                        (_b = this._firstFocusableElement) === null || _b === void 0 ? void 0 : _b.focus();
+                        if (!this._lastFocusableElement)
+                            this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
+                        this._focusOnNextSibling((_c = this.$dropdownContent) === null || _c === void 0 ? void 0 : _c.firstElementChild);
                         resolve();
                     }, transitionDuration);
                 });
@@ -135,20 +133,11 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             await this.hide();
         };
         this._handleFocusWithinDropdown = async (ev) => {
-            var _a;
             const hasTabBeenPressed = ev.key.toLowerCase() === 'tab';
-            if (hasTabBeenPressed) {
-                if (ev.shiftKey) {
-                    if (document.activeElement === this._firstFocusableElement) {
-                        (_a = this._lastFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-                        ev.preventDefault();
-                    }
-                }
-                else if (document.activeElement === this._lastFocusableElement) {
-                    ev.preventDefault();
-                    await this._rootDropdown._hideDropdownsSequentially();
-                    this._focusOnNextSibling(this._rootDropdown);
-                }
+            if (hasTabBeenPressed && document.activeElement === this._lastFocusableElement) {
+                ev.preventDefault();
+                this._focusOnNextSibling(this.nextElementSibling || this);
+                await this._hideDropdownsSequentially();
             }
         };
         this._hoverToggle = async (ev) => {
@@ -207,11 +196,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this._setupListeners();
         this._setupInitialDropdownProperties();
     }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this._firstFocusableElement = this._focusSentinelStart.value;
-        this._lastFocusableElement = this._focusSentinelEnd.value;
-    }
     static _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
         if (!$dropdownPortalTarget) {
@@ -258,7 +242,12 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         el.focus();
         if (el === document.activeElement)
             return;
-        this._focusOnNextSibling(el.nextElementSibling);
+        if (el.firstElementChild) {
+            this._focusOnNextSibling(el.firstElementChild);
+            return;
+        }
+        if (el.nextElementSibling)
+            this._focusOnNextSibling(el.nextElementSibling);
     }
     _isHoveredWithinDropdown(element) {
         var _a;
@@ -304,9 +293,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         return litHtml.html `
             ${this.getSlot('toggler')}
             <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionDropdownContent}" to="${this.portalTarget}" hidden>
-                <div tabindex="0" ${ref_js.ref(this._focusSentinelStart)}></div>
                 ${this.getSlot('content')}
-                <div tabindex="0" ${ref_js.ref(this._focusSentinelEnd)}></div>
             </h-portal>
         `;
     }

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js

@@ -22,7 +22,10 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
     }
     render() {
         super.render();
-        return lit.html ` <div role="dialog">${this.getSlot('content')}</div> `;
+        return lit.html `
+            <div role="dialog">${this.getSlot('content')}</div>
+            <div tabindex="0"></div>
+        `;
     }
 };
 tslib_es6.__decorate([

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js

@@ -18,7 +18,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
         this._dispatchToggleDropdownEvent = (ev) => {
             ev.preventDefault();
             ev.stopImmediatePropagation();
-            const toggleDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.toggle, {
+            const toggleDropdownEvent = new CustomEvent(dropdown_constants.DROPDOWN_EVENTS.toggle, {
                 bubbles: true
             });
             this.dispatchEvent(toggleDropdownEvent);

package/build/cjs/packages/phoenix/src/components/slider/slider.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
-var json_utils = require('../../../../utilities/build/esm/json_utils.js');
+var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var splide_esm = require('../../../../../external/@splidejs/splide/dist/js/splide.esm.js');
@@ -25,7 +25,7 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
     connectedCallback() {
         var _a;
         if (this.settings) {
-            this._settings = (_a = json_utils.JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
+            this._settings = (_a = utilities.JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
         }
         this._slider = new splide_esm.Splide(`#${this.id}`, this._settings);
         if (this._settings.mountOnConnectedCallback) {

package/build/cjs/packages/phoenix/src/components/tabs/tab/tab.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var utilities = require('@dreamcommerce/utilities');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var btn_controller = require('../../../controllers/btn_controller.js');
+var tab_constants = require('./tab_constants.js');
+
+exports.HTab = class HTab extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._handleTabClicked = () => {
+            if (this.disabled)
+                return;
+            this._dispatchSelectedEvent();
+        };
+        this._dispatchSelectedEvent = () => {
+            this.dispatchEvent(new CustomEvent(tab_constants.TAB_EVENT_NAMES.selected, {
+                detail: {
+                    $el: this
+                },
+                bubbles: true
+            }));
+        };
+    }
+    get selected() {
+        return this.hasAttribute(tab_constants.TAB_SELECTED_ATTRIBUTE_NAME);
+    }
+    set selected(selected) {
+        selected ? this.setAttribute(tab_constants.TAB_SELECTED_ATTRIBUTE_NAME, '') : this.removeAttribute(tab_constants.TAB_SELECTED_ATTRIBUTE_NAME);
+        this.setAttribute('aria-selected', String(selected));
+        selected ? utilities.UiDomUtils.makeNavigable(this) : utilities.UiDomUtils.makeUnnavigable(this);
+    }
+    attributeChangedCallback(name, value, newValue) {
+        super.attributeChangedCallback(name, value, newValue);
+        switch (name) {
+            case tab_constants.TAB_SELECTED_ATTRIBUTE_NAME: {
+                this.selected = Boolean(newValue);
+                break;
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._btnController = new btn_controller.BtnController(this, this._handleTabClicked);
+        this._setupAttributes();
+        this._bindEvents();
+        this.selected ? utilities.UiDomUtils.makeNavigable(this) : utilities.UiDomUtils.makeUnnavigable(this);
+    }
+    _setupAttributes() {
+        this.setAttribute('role', 'tab');
+        this.setAttribute('aria-controls', this.panelName);
+        this.setAttribute('aria-selected', String(this.selected));
+    }
+    _bindEvents() {
+        this.addEventListener('click', this._handleTabClicked);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, reflect: true, attribute: 'panel-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HTab.prototype, "panelName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HTab.prototype, "disabled", void 0);
+exports.HTab = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-tab')
+], exports.HTab);
+//# sourceMappingURL=tab.js.map

package/build/cjs/packages/phoenix/src/components/tabs/tab/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/tabs/tab/tab_constants.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TAB_EVENT_NAMES = {
+    selected: 'selected'
+};
+const TAB_SELECTED_ATTRIBUTE_NAME = 'selected';
+
+exports.TAB_EVENT_NAMES = TAB_EVENT_NAMES;
+exports.TAB_SELECTED_ATTRIBUTE_NAME = TAB_SELECTED_ATTRIBUTE_NAME;
+//# sourceMappingURL=tab_constants.js.map

package/build/{esm/packages/utilities/build/esm/web_components_utils.js.map → cjs/packages/phoenix/src/components/tabs/tab/tab_constants.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/tabs/tab_panel.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var visibility_controller = require('../../controllers/visibility_controller/visibility_controller.js');
+
+exports.HTabPanel = class HTabPanel extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._visibilityController = new visibility_controller.VisibilityController(this);
+    }
+    show() {
+        this._visibilityController.show();
+    }
+    hide() {
+        this._visibilityController.hide();
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HTabPanel.prototype, "name", void 0);
+exports.HTabPanel = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-tab-panel'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HTabPanel);
+//# sourceMappingURL=tab_panel.js.map

package/build/cjs/packages/phoenix/src/components/tabs/tab_panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/tabs/tabs.js

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var utilities = require('@dreamcommerce/utilities');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
+var tab_constants = require('./tab/tab_constants.js');
+var tab = require('./tab/tab.js');
+var tabs_constants = require('./tabs_constants.js');
+
+exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._handleArrowNavigation = ({ key }) => {
+            const currentTabIndex = this._getFocusedTabIndex();
+            if (currentTabIndex === undefined)
+                return;
+            const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
+            if (newTabIndex === undefined)
+                return;
+            utilities.UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
+            utilities.UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
+            this._$tabs[newTabIndex].focus();
+        };
+        this._handleTabSelected = (event) => {
+            const $newlySelectedTab = event.detail.$el;
+            this.switchPanel($newlySelectedTab.panelName);
+            if (this._$selectedTab)
+                this._$selectedTab.selected = false;
+            $newlySelectedTab.selected = true;
+            this._dispatchChangedEvent(this._$selectedTab, $newlySelectedTab);
+            this._$selectedTab = $newlySelectedTab;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+        this.setAttribute('role', 'tablist');
+        this._$tabs = [...this.querySelectorAll('h-tab')];
+        new keystrokes_controller.KeystrokesController({
+            host: this,
+            keys: ['ArrowRight', 'ArrowLeft'],
+            callback: this._handleArrowNavigation
+        });
+    }
+    _getFocusedTabIndex() {
+        const focusedElement = document.activeElement;
+        if ((focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.tagName) !== 'H-TAB')
+            return;
+        return this._$tabs.findIndex(($tab) => $tab === focusedElement);
+    }
+    _getNextTabIndex(currentTabIndex) {
+        if (currentTabIndex >= this._$tabs.length - 1)
+            return;
+        return currentTabIndex + 1;
+    }
+    _getPrevTabIndex(currentTabIndex) {
+        if (currentTabIndex <= 0)
+            return;
+        return currentTabIndex - 1;
+    }
+    _setupEvents() {
+        this.addEventListener(tab_constants.TAB_EVENT_NAMES.selected, this._handleTabSelected);
+    }
+    allChildrenConnected() {
+        const $selectedTab = this.querySelector('h-tab[selected]');
+        this._hideNotSelectedAndVisiblePanels();
+        if (!$selectedTab)
+            return;
+        this._$selectedTab = $selectedTab;
+        this.switchPanel(this._$selectedTab.panelName);
+    }
+    _hideNotSelectedAndVisiblePanels() {
+        const $notSelectedTabs = [...this.querySelectorAll('h-tab:not([selected])')];
+        $notSelectedTabs
+            .map(($tab) => $tab.panelName)
+            .forEach((panelName) => document.querySelectorAll(`[name="${panelName}"]`).forEach(($panel) => $panel.hide()));
+    }
+    switchPanel(newPanelName) {
+        const $currentPanel = this._$selectedTab && document.querySelectorAll(`[name="${this._$selectedTab.panelName}"]`);
+        const $newPanel = document.querySelectorAll(`[name="${newPanelName}"]`);
+        if ($currentPanel)
+            $currentPanel.forEach(($panel) => $panel.hide());
+        if ($newPanel)
+            $newPanel.forEach(($panel) => $panel.show());
+    }
+    _dispatchChangedEvent($previousTab, $newTab) {
+        this.dispatchEvent(new CustomEvent(tabs_constants.TABS_EVENT_NAMES.changed, {
+            detail: {
+                $previousTab,
+                $newTab
+            },
+            bubbles: true
+        }));
+    }
+};
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", tab.HTab)
+], exports.HTabs.prototype, "_$selectedTab", void 0);
+exports.HTabs = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-tabs')
+], exports.HTabs);
+//# sourceMappingURL=tabs.js.map

package/build/cjs/packages/phoenix/src/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/tabs/tabs_constants.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TABS_EVENT_NAMES = {
+    changed: 'changed'
+};
+
+exports.TABS_EVENT_NAMES = TABS_EVENT_NAMES;
+//# sourceMappingURL=tabs_constants.js.map

package/build/cjs/packages/{utilities/build/esm/web_components_utils.js.map → phoenix/src/components/tabs/tabs_constants.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/controllers/visibility_controller/visibility_controller.js

@@ -20,7 +20,7 @@ class VisibilityController {
         tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").addEventListener('resize', this._handleResize);
     }
     _setVisibilityValue() {
-        const isVisible = this._isVisibleBasedOnCssStyle();
+        const isVisible = this._isVisibleBasedOnCssStyle() && !tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").getAttribute('hidden');
         isVisible ? this.show() : this.hide();
     }
     _isVisibleBasedOnCssStyle() {

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js

@@ -32,6 +32,8 @@ class PhoenixLightLitElement extends lit.LitElement {
     }
     _setupChildrenWatch() {
         this.childrenToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesToWatch();
+        if (!this.childrenToWatch.length)
+            this.allChildrenConnected();
         this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
     }
     _getComponentsNamesToWatch() {
@@ -45,6 +47,7 @@ class PhoenixLightLitElement extends lit.LitElement {
             },
             bubbles: true
         }));
+        this.isWebComponentConnected = true;
         this._setupChildrenWatch();
     }
     allChildrenConnected() { }

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element_utils.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var web_components_utils = require('../../../../utilities/build/esm/web_components_utils.js');
+var utilities = require('@dreamcommerce/utilities');
 
 class PhoenixLightLitElementUtils {
     static getComponentsForWhichToWaitForConnection(components) {
-        return components.filter(($element) => (web_components_utils.WebComponentsUtils.isWebComponent($element) && !web_components_utils.WebComponentsUtils.isWebComponentDefined($element)) ||
-            (web_components_utils.WebComponentsUtils.isWebComponent($element) &&
-                web_components_utils.WebComponentsUtils.isWebComponentDefined($element) &&
+        return components.filter(($element) => (utilities.WebComponentsUtils.isWebComponent($element) && !utilities.WebComponentsUtils.isWebComponentDefined($element)) ||
+            (utilities.WebComponentsUtils.isWebComponent($element) &&
+                utilities.WebComponentsUtils.isWebComponentDefined($element) &&
                 !$element.isWebComponentConnected));
     }
 }

package/build/cjs/packages/phoenix/src/index.js

@@ -62,6 +62,10 @@ var click_outside_controller_messages = require('./controllers/click_outside_con
 var backdrop = require('./components/backdrop/backdrop.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
 var slider = require('./components/slider/slider.js');
+var tab = require('./components/tabs/tab/tab.js');
+var tab_panel = require('./components/tabs/tab_panel.js');
+var tabs_constants = require('./components/tabs/tabs_constants.js');
+var tabs = require('./components/tabs/tabs.js');
 var scroll_to = require('./components/scroll_to/scroll_to.js');
 
 
@@ -345,6 +349,25 @@ Object.defineProperty(exports, 'HSlider', {
 		return slider.HSlider;
 	}
 });
+Object.defineProperty(exports, 'HTab', {
+	enumerable: true,
+	get: function () {
+		return tab.HTab;
+	}
+});
+Object.defineProperty(exports, 'HTabPanel', {
+	enumerable: true,
+	get: function () {
+		return tab_panel.HTabPanel;
+	}
+});
+exports.TABS_EVENT_NAMES = tabs_constants.TABS_EVENT_NAMES;
+Object.defineProperty(exports, 'HTabs', {
+	enumerable: true,
+	get: function () {
+		return tabs.HTabs;
+	}
+});
 Object.defineProperty(exports, 'HScrollTo', {
 	enumerable: true,
 	get: function () {

package/build/cjs/packages/phoenix/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts

@@ -3,7 +3,6 @@ import { TemplateResult } from 'lit-html';
 import { HDropdownContent } from './dropdown_content';
 import { HDropdownToggler } from './dropdown_toggler';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-import { PropertyValues } from 'lit';
 export declare class HDropdown extends PhoenixLightLitElement implements IDropdown {
     opened: boolean;
     direction: "bottom-center";
@@ -21,11 +20,8 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _backdropController;
     _firstFocusableElement: HTMLElement | undefined;
     _lastFocusableElement: HTMLElement | undefined;
-    private _focusSentinelStart;
-    private _focusSentinelEnd;
     private _rootDropdown?;
     connectedCallback(): void;
-    firstUpdated(props: PropertyValues): void;
     private static _appendDropdownPortal;
     private _findRootDropdown;
     private _setupListeners;

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js

@@ -1,5 +1,4 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import 'lit';
 import { state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
@@ -7,7 +6,6 @@ import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal
 import { html } from 'lit-html';
 import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { property } from '@lit/reactive-element/decorators.js';
-import { createRef, ref } from 'lit-html/directives/ref.js';
 import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
 import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
 import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
@@ -28,8 +26,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this._backdropController = new BackdropController();
         this._firstFocusableElement = undefined;
         this._lastFocusableElement = undefined;
-        this._focusSentinelStart = createRef();
-        this._focusSentinelEnd = createRef();
         this._handleClickOutside = async (target) => {
             var _a, _b;
             if (!this.opened)
@@ -55,11 +51,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                     }, 0);
                     const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
                     setTimeout(() => {
-                        var _a, _b;
+                        var _a, _b, _c;
                         this._dispatchShowDropdownEvent();
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
                         this._toggleScroll();
-                        (_b = this._firstFocusableElement) === null || _b === void 0 ? void 0 : _b.focus();
+                        if (!this._lastFocusableElement)
+                            this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
+                        this._focusOnNextSibling((_c = this.$dropdownContent) === null || _c === void 0 ? void 0 : _c.firstElementChild);
                         resolve();
                     }, transitionDuration);
                 });
@@ -131,20 +129,11 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             await this.hide();
         };
         this._handleFocusWithinDropdown = async (ev) => {
-            var _a;
             const hasTabBeenPressed = ev.key.toLowerCase() === 'tab';
-            if (hasTabBeenPressed) {
-                if (ev.shiftKey) {
-                    if (document.activeElement === this._firstFocusableElement) {
-                        (_a = this._lastFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-                        ev.preventDefault();
-                    }
-                }
-                else if (document.activeElement === this._lastFocusableElement) {
-                    ev.preventDefault();
-                    await this._rootDropdown._hideDropdownsSequentially();
-                    this._focusOnNextSibling(this._rootDropdown);
-                }
+            if (hasTabBeenPressed && document.activeElement === this._lastFocusableElement) {
+                ev.preventDefault();
+                this._focusOnNextSibling(this.nextElementSibling || this);
+                await this._hideDropdownsSequentially();
             }
         };
         this._hoverToggle = async (ev) => {
@@ -203,11 +192,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this._setupListeners();
         this._setupInitialDropdownProperties();
     }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this._firstFocusableElement = this._focusSentinelStart.value;
-        this._lastFocusableElement = this._focusSentinelEnd.value;
-    }
     static _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
         if (!$dropdownPortalTarget) {
@@ -254,7 +238,12 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         el.focus();
         if (el === document.activeElement)
             return;
-        this._focusOnNextSibling(el.nextElementSibling);
+        if (el.firstElementChild) {
+            this._focusOnNextSibling(el.firstElementChild);
+            return;
+        }
+        if (el.nextElementSibling)
+            this._focusOnNextSibling(el.nextElementSibling);
     }
     _isHoveredWithinDropdown(element) {
         var _a;
@@ -300,9 +289,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         return html `
             ${this.getSlot('toggler')}
             <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionDropdownContent}" to="${this.portalTarget}" hidden>
-                <div tabindex="0" ${ref(this._focusSentinelStart)}></div>
                 ${this.getSlot('content')}
-                <div tabindex="0" ${ref(this._focusSentinelEnd)}></div>
             </h-portal>
         `;
     }