@shoper/phoenix_design_system 0.19.2 → 0.19.3-1

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

@@ -3,12 +3,15 @@
 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');
 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');
@@ -27,6 +30,10 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this.transition = 'direction';
         this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
         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)
@@ -52,10 +59,11 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                     }, 0);
                     const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
                     setTimeout(() => {
-                        var _a;
+                        var _a, _b;
                         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();
                         resolve();
                     }, transitionDuration);
                 });
@@ -82,8 +90,10 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             }
             await this.hide();
         };
-        this.hide = async () => new Promise((resolve) => {
+        this.hide = async (ev) => new Promise((resolve) => {
             var _a;
+            if (ev && ev.detail.name !== this.name)
+                return;
             (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
             const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
             window.requestAnimationFrame(() => {
@@ -124,6 +134,23 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                 return;
             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();
+                    this._focusOnNextSibling(this);
+                    await this._hideDropdownsSequentially();
+                }
+            }
+        };
         this._hoverToggle = async (ev) => {
             if (window.innerWidth < global_constants.BREAKPOINTS.xs)
                 return;
@@ -148,8 +175,12 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         };
     }
     connectedCallback() {
+        var _a;
         super.connectedCallback();
         HDropdown_1._appendDropdownPortal();
+        if (!this._rootDropdown)
+            this._rootDropdown =
+                ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'h-dropdown-content' ? this._findRootDropdown(this.parentElement) : this;
         if (!this.$dropdownContent)
             this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
@@ -176,6 +207,11 @@ 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) {
@@ -184,13 +220,21 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             document.body.appendChild($portalTarget);
         }
     }
+    _findRootDropdown(element) {
+        var _a;
+        if (((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) !== dropdown_constants.DROPDOWN_CONTENT_NAME && element.tagName.toLowerCase() === dropdown_constants.DROPDOWN_CONTAINER_NAME)
+            return element;
+        return this._findRootDropdown(element.parentElement || document.body);
+    }
     _setupListeners() {
         var _a;
         this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
         this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
+        document.addEventListener(dropdown_constants.DROPDOWN_EVENTS.hide, this.hide);
         window.addEventListener('resize', this._observeScrollToggling);
         document.addEventListener('keydown', this._closeDropdownOnEscape);
+        document.addEventListener('keydown', this._handleFocusWithinDropdown);
         if (this.toggleOnHover)
             document.addEventListener('mouseover', this._hoverToggle);
     }
@@ -210,6 +254,12 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(global_constants.SCROLLABLE_CLASS_NAME);
         }
     }
+    _focusOnNextSibling(el) {
+        el.focus();
+        if (el === document.activeElement)
+            return;
+        this._focusOnNextSibling(el.nextElementSibling);
+    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)
@@ -239,6 +289,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
         window.removeEventListener('resize', this._observeScrollToggling);
         document.removeEventListener('keydown', this._closeDropdownOnEscape);
+        document.removeEventListener(dropdown_constants.DROPDOWN_EVENTS.hide, this.hide);
+        document.removeEventListener('keydown', this._handleFocusWithinDropdown);
         if (this.toggleOnHover)
             document.removeEventListener('mouseover', this._hoverToggle);
         if (this.opened) {
@@ -251,7 +303,9 @@ 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>
         `;
     }
@@ -280,6 +334,14 @@ tslib_es6.__decorate([
     decorators_js.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "portalTarget", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "_firstFocusableElement", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "_lastFocusableElement", void 0);
 exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-dropdown')
 ], exports.HDropdown);

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,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;"}
+{"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;"}

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

@@ -22,7 +22,6 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
                 bubbles: true
             });
             this.dispatchEvent(toggleDropdownEvent);
-            this._toggleElementAriaController.toggleAriaExpandedAttribute();
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
         this.className = `${dropdown_constants.DROPDOWN_TOGGLER_CSS_CLASS} ${this.className}`;

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.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;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;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

@@ -1,8 +1,9 @@
+import { IDropdown } from "./dropdown_types";
 import { TemplateResult } from 'lit-html';
 import { HDropdownContent } from './dropdown_content';
 import { HDropdownToggler } from './dropdown_toggler';
-import { IDropdown } from "./dropdown_types";
 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";
@@ -18,21 +19,30 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _dropdownContentChildrenHeight;
     private _hasScrollableClassInitially;
     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;
     private _handleClickOutside;
     toggle: () => Promise<void>;
     show: () => Promise<void>;
     private _dispatchShowDropdownEvent;
     private _hideDropdownsSequentially;
-    hide: () => Promise<void>;
+    hide: (ev?: Event) => Promise<void>;
     private _dispatchHideDropdownEvent;
     private _handleDisabledPositioning;
     private _handleEnabledPositioning;
     private _observeScrollToggling;
     private _toggleScroll;
     private _closeDropdownOnEscape;
+    private _handleFocusWithinDropdown;
+    private _focusOnNextSibling;
     private _hoverToggle;
     private _isHoveredWithinDropdown;
     private _setupInitialDropdownProperties;

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

@@ -1,10 +1,13 @@
 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';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 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';
@@ -23,6 +26,10 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this.transition = 'direction';
         this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
         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)
@@ -48,10 +55,11 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                     }, 0);
                     const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
                     setTimeout(() => {
-                        var _a;
+                        var _a, _b;
                         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();
                         resolve();
                     }, transitionDuration);
                 });
@@ -78,8 +86,10 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             }
             await this.hide();
         };
-        this.hide = async () => new Promise((resolve) => {
+        this.hide = async (ev) => new Promise((resolve) => {
             var _a;
+            if (ev && ev.detail.name !== this.name)
+                return;
             (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
             const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
             window.requestAnimationFrame(() => {
@@ -120,6 +130,23 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 return;
             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();
+                    this._focusOnNextSibling(this);
+                    await this._hideDropdownsSequentially();
+                }
+            }
+        };
         this._hoverToggle = async (ev) => {
             if (window.innerWidth < BREAKPOINTS.xs)
                 return;
@@ -144,8 +171,12 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         };
     }
     connectedCallback() {
+        var _a;
         super.connectedCallback();
         HDropdown_1._appendDropdownPortal();
+        if (!this._rootDropdown)
+            this._rootDropdown =
+                ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'h-dropdown-content' ? this._findRootDropdown(this.parentElement) : this;
         if (!this.$dropdownContent)
             this.$dropdownContent = this.querySelector(DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
@@ -172,6 +203,11 @@ 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) {
@@ -180,13 +216,21 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             document.body.appendChild($portalTarget);
         }
     }
+    _findRootDropdown(element) {
+        var _a;
+        if (((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) !== DROPDOWN_CONTENT_NAME && element.tagName.toLowerCase() === DROPDOWN_CONTAINER_NAME)
+            return element;
+        return this._findRootDropdown(element.parentElement || document.body);
+    }
     _setupListeners() {
         var _a;
         this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
         this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
+        document.addEventListener(DROPDOWN_EVENTS.hide, this.hide);
         window.addEventListener('resize', this._observeScrollToggling);
         document.addEventListener('keydown', this._closeDropdownOnEscape);
+        document.addEventListener('keydown', this._handleFocusWithinDropdown);
         if (this.toggleOnHover)
             document.addEventListener('mouseover', this._hoverToggle);
     }
@@ -206,6 +250,12 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
         }
     }
+    _focusOnNextSibling(el) {
+        el.focus();
+        if (el === document.activeElement)
+            return;
+        this._focusOnNextSibling(el.nextElementSibling);
+    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)
@@ -235,6 +285,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
         window.removeEventListener('resize', this._observeScrollToggling);
         document.removeEventListener('keydown', this._closeDropdownOnEscape);
+        document.removeEventListener(DROPDOWN_EVENTS.hide, this.hide);
+        document.removeEventListener('keydown', this._handleFocusWithinDropdown);
         if (this.toggleOnHover)
             document.removeEventListener('mouseover', this._hoverToggle);
         if (this.opened) {
@@ -247,7 +299,9 @@ 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>
         `;
     }
@@ -276,6 +330,14 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], HDropdown.prototype, "portalTarget", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "_firstFocusableElement", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "_lastFocusableElement", void 0);
 HDropdown = HDropdown_1 = __decorate([
     phoenixCustomElement('h-dropdown')
 ], HDropdown);

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;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;AACA;"}

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

@@ -18,7 +18,6 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
                 bubbles: true
             });
             this.dispatchEvent(toggleDropdownEvent);
-            this._toggleElementAriaController.toggleAriaExpandedAttribute();
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
         this.className = `${DROPDOWN_TOGGLER_CSS_CLASS} ${this.className}`;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_types.d.ts

@@ -8,3 +8,8 @@ export interface IDropdown {
     hide(): void;
     toggle(): void;
 }
+export declare type TDropdownHideEvent = Event & {
+    detail: {
+        name: string;
+    };
+};

package/build/esm/packages/phoenix/src/components/tabs/tab/tab.d.ts

@@ -0,0 +1,14 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class Tab extends PhoenixLightLitElement {
+    panelName: string;
+    get selected(): boolean;
+    disabled: boolean;
+    set selected(selected: boolean);
+    private _btnController;
+    attributeChangedCallback(name: string, value: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    private _setupAttributes;
+    private _bindEvents;
+    private _handleTabClicked;
+    _dispatchSelectedEvent: () => void;
+}

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

@@ -0,0 +1,70 @@
+import { __decorate, __metadata } from "tslib";
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { BtnController } from '@phoenixRoot/controllers/btn_controller';
+import { property } from 'lit/decorators';
+import { TAB_EVENT_NAMES, TAB_SELECTED_ATTRIBUTE_NAME } from '@phoenixRoot/components/tabs/tab/tab_constants';
+import { UiDomUtils } from '@dreamcommerce/utilities/build/esm/ui_dom_utils';
+let Tab = class Tab extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._handleTabClicked = () => {
+            if (this.disabled)
+                return;
+            this._dispatchSelectedEvent();
+        };
+        this._dispatchSelectedEvent = () => {
+            this.dispatchEvent(new CustomEvent(TAB_EVENT_NAMES.selected, {
+                detail: {
+                    $el: this
+                },
+                bubbles: true
+            }));
+        };
+    }
+    get selected() {
+        return this.hasAttribute(TAB_SELECTED_ATTRIBUTE_NAME);
+    }
+    set selected(selected) {
+        selected ? this.setAttribute(TAB_SELECTED_ATTRIBUTE_NAME, '') : this.removeAttribute(TAB_SELECTED_ATTRIBUTE_NAME);
+        this.setAttribute('aria-selected', String(selected));
+        selected ? UiDomUtils.makeNavigable(this) : UiDomUtils.makeUnnavigable(this);
+    }
+    attributeChangedCallback(name, value, newValue) {
+        super.attributeChangedCallback(name, value, newValue);
+        switch (name) {
+            case TAB_SELECTED_ATTRIBUTE_NAME: {
+                this.selected = Boolean(newValue);
+                break;
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._btnController = new BtnController(this, this._dispatchSelectedEvent);
+        this._setupAttributes();
+        this._bindEvents();
+        this.tabIndex = this.selected ? 0 : -1;
+    }
+    _setupAttributes() {
+        this.setAttribute('role', 'tab');
+        this.setAttribute('aria-controls', this.panelName);
+        this.setAttribute('aria-selected', String(this.selected));
+    }
+    _bindEvents() {
+        this.addEventListener('click', this._handleTabClicked);
+    }
+};
+__decorate([
+    property({ type: String, reflect: true, attribute: 'panel-name' }),
+    __metadata("design:type", String)
+], Tab.prototype, "panelName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "disabled", void 0);
+Tab = __decorate([
+    phoenixCustomElement('h-tab')
+], Tab);
+export { Tab };
+//# sourceMappingURL=tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../../../../../../src/components/tabs/tab/tab.ts"],"names":[],"mappings":"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"}

package/build/esm/packages/phoenix/src/components/tabs/tab/tab_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TAB_EVENT_NAMES: {
+    readonly selected: "selected";
+};
+export declare const TAB_SELECTED_ATTRIBUTE_NAME = "selected";

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

@@ -0,0 +1,5 @@
+export const TAB_EVENT_NAMES = {
+    selected: 'selected'
+};
+export const TAB_SELECTED_ATTRIBUTE_NAME = 'selected';
+//# sourceMappingURL=tab_constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab_constants.js","sourceRoot":"","sources":["../../../../../../../../src/components/tabs/tab/tab_constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,QAAQ,EAAE,UAAU;CACd,CAAC;AAEX,MAAM,CAAC,MAAM,2BAA2B,GAAG,UAAU,CAAC"}

package/build/esm/packages/phoenix/src/components/tabs/tab_panel.d.ts

@@ -0,0 +1,9 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class TabPanel extends PhoenixLightLitElement {
+    name: string;
+    hidden: boolean;
+    private _visibilityController;
+    constructor();
+    show(): void;
+    hide(): void;
+}

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

@@ -0,0 +1,33 @@
+import { __decorate, __metadata } from "tslib";
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { property } from 'lit/decorators';
+import '@phoenixRoot/controllers/visibility_controller/visibility_controller_types';
+import { VisibilityController } from '@phoenixRoot/controllers/visibility_controller/visibility_controller';
+let TabPanel = class TabPanel extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.hidden = true;
+        this._visibilityController = new VisibilityController(this);
+    }
+    show() {
+        this._visibilityController.show();
+    }
+    hide() {
+        this._visibilityController.hide();
+    }
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], TabPanel.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], TabPanel.prototype, "hidden", void 0);
+TabPanel = __decorate([
+    phoenixCustomElement('h-tab-panel'),
+    __metadata("design:paramtypes", [])
+], TabPanel);
+export { TabPanel };
+//# sourceMappingURL=tab_panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab_panel.js","sourceRoot":"","sources":["../../../../../../../src/components/tabs/tab_panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAsC,4EAA4E,CAAC;AACnH,OAAO,EAAE,oBAAoB,EAAE,MAAM,sEAAsE,CAAC;AAG5G,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,sBAAsB;IAShD;QACI,KAAK,EAAE,CAAC;QALL,WAAM,GAAG,IAAI,CAAC;QAOjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC;IAEM,IAAI;QACP,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;IACtC,CAAC;IAEM,IAAI;QACP,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;IACtC,CAAC;CACJ,CAAA;AApBG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;sCAC7B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;wCACtB;AALZ,QAAQ;IADpB,oBAAoB,CAAC,aAAa,CAAC;;GACvB,QAAQ,CAsBpB;SAtBY,QAAQ"}

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

@@ -0,0 +1,15 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class Tabs extends PhoenixLightLitElement {
+    private _$selectedTab;
+    private _$tabs;
+    connectedCallback(): void;
+    private _handleArrowNavigation;
+    private _getFocusedTabIndex;
+    private _getNextTabIndex;
+    private _getPrevTabIndex;
+    private _setupEvents;
+    private _handleTabSelected;
+    private _handleTabConnected;
+    switchPanel(newPanelName: string): void;
+    private _dispatchChangedEvent;
+}

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

@@ -0,0 +1,103 @@
+import { __decorate, __metadata } from "tslib";
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { Tab } from '@phoenixRoot/components/tabs/tab/tab';
+import { state } from 'lit/decorators';
+import '@phoenixRoot/components/tabs/tab_panel';
+import { PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_elements_constants';
+import { TABS_EVENT_NAMES } from '@phoenixRoot/components/tabs/tabs_constants';
+import { TAB_EVENT_NAMES } from '@phoenixRoot/components/tabs/tab/tab_constants';
+import '@phoenixRoot/components/tabs/tabs_types';
+import { KeystrokesController } from '@phoenixRoot/controllers/keystrokes_controller/keystrokes_controller';
+import { UiDomUtils } from '@dreamcommerce/utilities/build/esm/ui_dom_utils';
+let Tabs = class Tabs extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._handleArrowNavigation = ({ key }) => {
+            const currentTabIndex = this._getFocusedTabIndex();
+            // console.log('currentTabIndex ', currentTabIndex, ' key', key);
+            if (currentTabIndex === undefined)
+                return;
+            const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
+            // console.log('newTabIndex ', newTabIndex);
+            if (newTabIndex === undefined)
+                return;
+            UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
+            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;
+        };
+        this._handleTabConnected = (event) => {
+            const $connectedTab = event.detail.$el;
+            if (!$connectedTab.selected)
+                return;
+            this._$selectedTab = event.detail.$el;
+            this.switchPanel(this._$selectedTab.panelName);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+        this.setAttribute('role', 'tablist');
+        this._$tabs = [...this.querySelectorAll('h-tab')];
+        new 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_EVENT_NAMES.selected, this._handleTabSelected);
+        this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleTabConnected);
+    }
+    switchPanel(newPanelName) {
+        const $currentPanel = 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_EVENT_NAMES.changed, {
+            detail: {
+                $previousTab,
+                $newTab
+            },
+            bubbles: true
+        }));
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Tab)
+], Tabs.prototype, "_$selectedTab", void 0);
+Tabs = __decorate([
+    phoenixCustomElement('h-tabs')
+], Tabs);
+export { Tabs };
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"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"}

package/build/esm/packages/phoenix/src/components/tabs/tabs_constants.d.ts

@@ -0,0 +1,3 @@
+export declare const TABS_EVENT_NAMES: {
+    readonly changed: "changed";
+};

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

@@ -0,0 +1,4 @@
+export const TABS_EVENT_NAMES = {
+    changed: 'changed'
+};
+//# sourceMappingURL=tabs_constants.js.map

package/build/esm/packages/phoenix/src/components/tabs/tabs_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs_constants.js","sourceRoot":"","sources":["../../../../../../../src/components/tabs/tabs_constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,OAAO,EAAE,SAAS;CACZ,CAAC"}

package/build/esm/packages/phoenix/src/components/tabs/tabs_types.d.ts

@@ -0,0 +1,7 @@
+import { Tab } from "./tab/tab";
+export declare type TTabConnectedEvent = CustomEvent<{
+    $el: Tab;
+}>;
+export declare type TTabSelectedEvent = CustomEvent<{
+    $el: Tab;
+}>;

package/build/esm/packages/phoenix/src/components/tabs/tabs_types.js

@@ -0,0 +1,2 @@
+import '@phoenixRoot/components/tabs/tab/tab';
+//# sourceMappingURL=tabs_types.js.map

package/build/esm/packages/phoenix/src/components/tabs/tabs_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs_types.js","sourceRoot":"","sources":["../../../../../../../src/components/tabs/tabs_types.ts"],"names":[],"mappings":"AAAA,OAAoB,sCAAsC,CAAC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "0.19.2",
+  "version": "0.19.3-1",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@splidejs/splide": "4.0.7"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^0.9.1",
+    "@dreamcommerce/utilities": "^0.10.1",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",