@shoper/phoenix_design_system 1.0.0 → 1.0.2

package/build/esm/packages/phoenix/src/{controllers/keystrokes_controller/keystrokes_controller_constants.js.map → components/color_swatches/color_item/color_item_constants.js.map}

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

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_types.d.ts

@@ -0,0 +1,5 @@
+export declare type TColorItemConstructorOptions = {
+    color: string;
+    label: string;
+    disabled: boolean;
+};

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=color_item_types.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_item_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_swatches/color_item/color_item_types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,21 @@
+import { HColorItem } from "./color_item/color_item";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HColorSwatches extends PhoenixLightLitElement {
+    multiple: boolean;
+    numberOfVisibleColors: number;
+    selectedColors: HColorItem[];
+    connectedCallback(): void;
+    private _addCssClasses;
+    private _hideItems;
+    private _showAllItemsEvent;
+    private _setupEvents;
+    private _handleColorClicked;
+    private _handleColorClickedForMultipleMode;
+    private _handleColorClickedForSingleMode;
+    private _toggleSelectedAttribute;
+    private _isColorAlreadyExistInArray;
+    private _removeExistingColorFromArray;
+    private _dispatchColorSelectEvent;
+    private _setColorsDispatchValue;
+    private _getOnlyColorValues;
+}

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

@@ -0,0 +1,113 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property, 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 { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
+import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
+import { SHOW_MORE_EVENT_NAMES } from './show-more/show_more_constants.js';
+
+let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.multiple = false;
+        this.selectedColors = [];
+        this._handleColorClicked = ({ target }) => {
+            const $colorItem = target;
+            this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+        };
+        this._dispatchColorSelectEvent = () => {
+            const detail = {
+                colors: this._setColorsDispatchValue(this.selectedColors)
+            };
+            this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_EVENT_NAMES.selected, {
+                bubbles: true,
+                detail
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+        this._addCssClasses();
+        this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
+        this._showAllItemsEvent();
+    }
+    _addCssClasses() {
+        this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
+        this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
+    }
+    _hideItems(numberOfVisibleColors) {
+        this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem, index) => {
+            if (index > numberOfVisibleColors - 1) {
+                $colorItem.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+            }
+        });
+    }
+    _showAllItemsEvent() {
+        this.addEventListener(SHOW_MORE_EVENT_NAMES.showMore, () => {
+            var _a;
+            this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => {
+                $colorItem.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+            });
+            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+        });
+    }
+    _setupEvents() {
+        this.addEventListener(COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
+    }
+    _handleColorClickedForMultipleMode($colorItem) {
+        !this._isColorAlreadyExistInArray($colorItem)
+            ? (this.selectedColors = [...this.selectedColors, $colorItem])
+            : this._removeExistingColorFromArray($colorItem);
+        this._toggleSelectedAttribute($colorItem);
+        this._dispatchColorSelectEvent();
+    }
+    _handleColorClickedForSingleMode($colorItem) {
+        const $previouslySelected = this.selectedColors[0];
+        this._toggleSelectedAttribute($colorItem);
+        if ($previouslySelected && $previouslySelected !== $colorItem)
+            $previouslySelected.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE);
+        this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
+        this._dispatchColorSelectEvent();
+    }
+    _toggleSelectedAttribute($colorItem) {
+        $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
+            ? $colorItem.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
+            : $colorItem.setAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+    }
+    _isColorAlreadyExistInArray($colorItem) {
+        return this.selectedColors.includes($colorItem);
+    }
+    _removeExistingColorFromArray($colorItem) {
+        const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
+        this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
+    }
+    _setColorsDispatchValue(selectedColors) {
+        if (this.selectedColors.length > 1)
+            return this._getOnlyColorValues(selectedColors);
+        if (this.selectedColors.length === 1)
+            return selectedColors[0].color;
+        return '';
+    }
+    _getOnlyColorValues(selectedColors) {
+        return selectedColors.map((selectedColor) => selectedColor.color);
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HColorSwatches.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Number, attribute: 'number-of-visible-colors' }),
+    __metadata("design:type", Number)
+], HColorSwatches.prototype, "numberOfVisibleColors", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], HColorSwatches.prototype, "selectedColors", void 0);
+HColorSwatches = __decorate([
+    phoenixCustomElement('h-color-swatches')
+], HColorSwatches);
+
+export { HColorSwatches };
+//# sourceMappingURL=color_swatches.js.map

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

@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches/color_swatches_constants.d.ts

@@ -0,0 +1,11 @@
+export declare const COLOR_ITEM_TAG_NAME = "h-color-item";
+export declare const COLOR_SWATCHES_CSS_CLASSES: {
+    readonly colorItem: "color-item";
+    readonly colorSwatches: "color-swatches";
+    readonly colorSwatchesItem: "color-swatches__color-item";
+    readonly colorSwatchesItems: "color-swatches__color-items";
+};
+export declare const COLOR_SWATCHES_EVENT_NAMES: {
+    readonly selected: "colorSwatchesSelected";
+};
+export declare const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = "hidden";

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js

@@ -0,0 +1,15 @@
+const baseCssClass = 'color-swatches';
+const COLOR_ITEM_TAG_NAME = 'h-color-item';
+const COLOR_SWATCHES_CSS_CLASSES = {
+    colorItem: 'color-item',
+    colorSwatches: baseCssClass,
+    colorSwatchesItem: `${baseCssClass}__color-item`,
+    colorSwatchesItems: `${baseCssClass}__color-items`
+};
+const COLOR_SWATCHES_EVENT_NAMES = {
+    selected: 'colorSwatchesSelected'
+};
+const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
+
+export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE };
+//# sourceMappingURL=color_swatches_constants.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map

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

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.d.ts

@@ -0,0 +1,3 @@
+export interface IColorSelectValue {
+    colors: string | string[] | undefined;
+}

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=color_swatches_types.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_swatches_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_swatches/color_swatches_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more.d.ts

@@ -0,0 +1,9 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HColorSwatchesShowMore extends PhoenixLightLitElement {
+    private _btnController;
+    constructor();
+    connectedCallback(): void;
+    private _addCssClasses;
+    private setupEvents;
+    private _dispatchClickedEvent;
+}

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more.js

@@ -0,0 +1,36 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { BtnController } from '../../../controllers/btn_controller.js';
+import { SHOW_MORE_EVENT_NAMES, SHOW_MORE_CSS_CLASS } from './show_more_constants.js';
+
+let HColorSwatchesShowMore = class HColorSwatchesShowMore extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = () => {
+            this.dispatchEvent(new CustomEvent(SHOW_MORE_EVENT_NAMES.showMore, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupEvents();
+        this._addCssClasses();
+        this.classList.add(SHOW_MORE_CSS_CLASS);
+    }
+    _addCssClasses() {
+        this.classList.add(SHOW_MORE_CSS_CLASS);
+    }
+    setupEvents() {
+        this.addEventListener('click', this._dispatchClickedEvent);
+    }
+};
+HColorSwatchesShowMore = __decorate([
+    phoenixCustomElement('h-color-swatches-show-more'),
+    __metadata("design:paramtypes", [])
+], HColorSwatchesShowMore);
+
+export { HColorSwatchesShowMore };
+//# sourceMappingURL=show_more.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches/show-more/show_more_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SHOW_MORE_CSS_CLASS = "color-swatches-show-more";
+export declare const SHOW_MORE_EVENT_NAMES: {
+    readonly showMore: "colorSwatchesShowMore";
+};

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more_constants.js

@@ -0,0 +1,7 @@
+const SHOW_MORE_CSS_CLASS = 'color-swatches-show-more';
+const SHOW_MORE_EVENT_NAMES = {
+    showMore: 'colorSwatchesShowMore'
+};
+
+export { SHOW_MORE_CSS_CLASS, SHOW_MORE_EVENT_NAMES };
+//# sourceMappingURL=show_more_constants.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more_constants.js.map

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

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

@@ -1,11 +1,11 @@
-import { IDropdown } from "./dropdown_types";
+import type { IDropdown, TDropdownDirection } from "./dropdown_types";
 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";
 export declare class HDropdown extends PhoenixLightLitElement implements IDropdown {
     opened: boolean;
-    direction: "bottom-center";
+    direction: TDropdownDirection;
     toggleOnHover: boolean;
     name: string;
     transition: string;
@@ -20,7 +20,8 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _backdropController;
     _lastFocusableElement: HTMLElement | undefined;
     private _rootDropdown?;
-    connectedCallback(): void;
+    constructor();
+    connectedCallback(): Promise<void>;
     private static _appendDropdownPortal;
     private _findRootDropdown;
     private _setupListeners;
@@ -29,18 +30,20 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     show: () => Promise<void>;
     private _dispatchShowDropdownEvent;
     private _hideDropdownsSequentially;
-    hide: (ev?: Event | undefined) => Promise<void>;
+    hide: (ev?: Event) => Promise<void>;
     private _dispatchHideDropdownEvent;
     private _handleDisabledPositioning;
     private _handleEnabledPositioning;
     private _observeScrollToggling;
     private _toggleScroll;
     private _closeDropdownOnEscape;
-    private _handleFocusWithinDropdown;
-    private _focusOnNextSibling;
+    private _handleForwardFocus;
+    private _focusOnNextElementAfterToggler;
+    private _handleBackwardFocus;
     private _hoverToggle;
     private _isHoveredWithinDropdown;
     private _setupInitialDropdownProperties;
+    isOpened: () => boolean;
     private _positionDropdownContent;
     disconnectedCallback(): void;
     render(): TemplateResult;

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

@@ -7,8 +7,9 @@ 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 { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.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 { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_TOGGLER_NAME, DROPDOWN_CONTENT_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';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import throttle_1 from '../../../../../external/lodash/throttle.js';
@@ -17,7 +18,7 @@ import { RelativePositionController } from '../../controllers/relative_position_
 var HDropdown_1;
 let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.opened = false;
         this.direction = DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
@@ -36,7 +37,12 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 await this._hideDropdownsSequentially();
         };
         this.toggle = async () => {
-            this.opened ? await this._hideDropdownsSequentially() : await this.show();
+            if (this.opened) {
+                await this._hideDropdownsSequentially();
+                return;
+            }
+            await this.show();
+            UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
         };
         this.show = async () => {
             return new Promise((resolve) => {
@@ -51,13 +57,12 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                     }, 0);
                     const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
                     setTimeout(() => {
-                        var _a, _b, _c;
+                        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();
                         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);
                 });
@@ -128,20 +133,35 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 return;
             await this.hide();
         };
-        this._handleFocusWithinDropdown = async (ev) => {
+        this._handleForwardFocus = async (ev) => {
+            const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent);
+            const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
+            const isActiveElementLastFocusableElement = document.activeElement === this._lastFocusableElement;
+            if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
+                this._focusOnNextElementAfterToggler(ev);
+        };
+        this._focusOnNextElementAfterToggler = async (ev) => {
+            ev.preventDefault();
+            const $focusableElements = UiDomUtils.getFocusableElements(document.body);
+            const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
+            const $nextElementToFocus = $focusableElements.find((currentElement, index) => {
+                if (index > indexOfDropdownToggler && !currentElement.closest(`${DROPDOWN_TOGGLER_NAME}[name="${this.name}"]`))
+                    return currentElement;
+                return null;
+            });
+            if ($nextElementToFocus)
+                $nextElementToFocus.focus();
+            await this._hideDropdownsSequentially();
+            await this.hide();
+        };
+        this._handleBackwardFocus = async (ev) => {
             var _a;
-            const hasTabBeenPressed = ev.key.toLowerCase() === 'tab';
-            if (hasTabBeenPressed && document.activeElement === this._lastFocusableElement) {
-                ev.preventDefault();
-                this._focusOnNextSibling(this.nextElementSibling || this);
-                await this._hideDropdownsSequentially();
-            }
             const $firstFocusableElement = this.$dropdownContent && UiDomUtils.getFocusableElement(this.$dropdownContent);
-            if (hasTabBeenPressed && ev.shiftKey && document.activeElement === $firstFocusableElement) {
-                ev.preventDefault();
-                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-                await this._hideDropdownsSequentially();
-            }
+            if (document.activeElement !== $firstFocusableElement)
+                return;
+            ev.preventDefault();
+            (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+            await this._hideDropdownsSequentially();
         };
         this._hoverToggle = async (ev) => {
             if (window.innerWidth < BREAKPOINTS.xs)
@@ -153,11 +173,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
             if (isHoveredWithinDropdown && !this.opened) {
                 await this.show();
+                UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
                 return;
             }
             if (!isHoveredWithinDropdown && this.opened)
                 await this._hideDropdownsSequentially();
         };
+        this.isOpened = () => this.opened;
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
                 this.opened && window.innerWidth < BREAKPOINTS.xs
@@ -165,8 +187,20 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                     : this._positionController.position();
             });
         };
+        new KeystrokesController({
+            host: this,
+            target: document.body,
+            keys: ['tab'],
+            callback: this._handleForwardFocus
+        });
+        new KeystrokesController({
+            host: this,
+            target: document.body,
+            keys: [['shift', 'tab']],
+            callback: this._handleBackwardFocus
+        });
     }
-    connectedCallback() {
+    async connectedCallback() {
         var _a;
         super.connectedCallback();
         HDropdown_1._appendDropdownPortal();
@@ -196,6 +230,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 name: this.name,
                 action: this._handleClickOutside
             });
+        if (this.opened)
+            await this.show();
         this._setupListeners();
         this._setupInitialDropdownProperties();
     }
@@ -221,7 +257,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         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);
     }
@@ -241,17 +276,6 @@ 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;
-        if (el.firstElementChild) {
-            this._focusOnNextSibling(el.firstElementChild);
-            return;
-        }
-        if (el.nextElementSibling)
-            this._focusOnNextSibling(el.nextElementSibling);
-    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)
@@ -283,7 +307,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         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) {
@@ -307,7 +330,7 @@ __decorate([
 ], HDropdown.prototype, "opened", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], HDropdown.prototype, "direction", void 0);
 __decorate([
     property({ type: Boolean }),
@@ -330,7 +353,8 @@ __decorate([
     __metadata("design:type", Object)
 ], HDropdown.prototype, "_lastFocusableElement", void 0);
 HDropdown = HDropdown_1 = __decorate([
-    phoenixCustomElement('h-dropdown')
+    phoenixCustomElement('h-dropdown'),
+    __metadata("design:paramtypes", [])
 ], HDropdown);
 
 export { 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;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;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -10,7 +10,6 @@ export declare const DROPDOWN_EVENTS: {
     readonly showed: "dropdown.showed";
     readonly hidden: "dropdown.hidden";
 };
-export declare const DROPDOWN_OPENED_ATTRIBUTE_NAME = "opened";
 export declare const DROPDOWN_CSS_CLASS = "dropdown";
 export declare const DROPDOWN_CONTENT_CSS_CLASS: string;
 export declare const DROPDOWN_TOGGLER_CSS_CLASS: string;

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

@@ -11,7 +11,6 @@ const DROPDOWN_EVENTS = {
     showed: `${DROPDOWN_EVENT_NAME}.showed`,
     hidden: `${DROPDOWN_EVENT_NAME}.hidden`
 };
-const DROPDOWN_OPENED_ATTRIBUTE_NAME = 'opened';
 const DROPDOWN_CSS_CLASS = 'dropdown';
 const DROPDOWN_CONTENT_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__content`;
 const DROPDOWN_TOGGLER_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__toggler`;
@@ -19,5 +18,5 @@ const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CSS_CLASS}_visible`;
 const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CSS_CLASS}_show`;
 const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
 
-export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CSS_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CSS_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_OPENED_ATTRIBUTE_NAME, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_TOGGLER_NAME };
+export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CSS_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CSS_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_TOGGLER_NAME };
 //# sourceMappingURL=dropdown_constants.js.map

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_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;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;"}

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

@@ -3,8 +3,11 @@ export declare class HDropdownToggler extends PhoenixLightLitElement {
     name: string;
     private _btnController;
     private _toggleElementAriaController;
+    private _$dropdown;
     toggleOnHover: boolean;
     constructor();
     connectedCallback(): void;
     private _dispatchToggleDropdownEvent;
+    private _handleFocusToOpenedDropdown;
+    disconnectedCallback(): void;
 }

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

@@ -1,9 +1,10 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property, state } from 'lit/decorators';
+import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { BtnController } from '../../controllers/btn_controller.js';
-import { DROPDOWN_EVENTS, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
+import { DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_CSS_CLASS } from './dropdown_constants.js';
 import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
 
 let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
@@ -19,19 +20,38 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
             });
             this.dispatchEvent(toggleDropdownEvent);
         };
+        this._handleFocusToOpenedDropdown = async (ev) => {
+            if (ev.target !== this)
+                return;
+            const isOpened = this._$dropdown.isOpened();
+            if (!isOpened)
+                return;
+            const $dropdownContent = document.querySelector(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`);
+            if (!$dropdownContent)
+                return;
+            ev.preventDefault();
+            UiDomUtils.setFocusToFirstFocusableElementInContainer($dropdownContent);
+        };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
         this.className = `${DROPDOWN_TOGGLER_CSS_CLASS} ${this.className}`;
     }
     connectedCallback() {
+        var _a;
         super.connectedCallback();
         this._btnController = new BtnController(this, this._dispatchToggleDropdownEvent);
-        const dropdown = this.parentElement;
-        this._toggleElementAriaController = new ToggleElementAriaController({
-            host: this,
-            initialAriaExpandedValue: !!(dropdown === null || dropdown === void 0 ? void 0 : dropdown.getAttribute(DROPDOWN_OPENED_ATTRIBUTE_NAME))
-        });
-        this.toggleOnHover = (dropdown === null || dropdown === void 0 ? void 0 : dropdown.getAttribute('toggleOnHover')) !== null;
+        this._$dropdown = this.parentElement;
+        if (this._$dropdown.isOpened)
+            this._toggleElementAriaController = new ToggleElementAriaController({
+                host: this,
+                initialAriaExpandedValue: this._$dropdown.isOpened()
+            });
+        this.toggleOnHover = ((_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.getAttribute('toggleOnHover')) !== null;
         this.addEventListener('click', this._dispatchToggleDropdownEvent);
+        document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
     }
 };
 __decorate([

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