@shoper/phoenix_design_system 0.19.2 → 0.19.4

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/cjs/packages/phoenix/src/components/form/checkbox/checkbox.js

@@ -6,9 +6,9 @@ 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 index = require('../../../../external/classnames/index.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var index = require('../../../../external/classnames/index.js');
 var checkbox_constants = require('./checkbox_constants.js');
 
 exports.HCheckbox = class HCheckbox extends phoenix_light_lit_element.PhoenixLightLitElement {

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/input/input.js

@@ -7,9 +7,9 @@ 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 input_constants = require('./input_constants.js');
-var index = require('../../../../external/classnames/index.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var index = require('../../../../external/classnames/index.js');
 
 exports.HInput = class HInput extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -23,7 +23,9 @@ exports.HInput = class HInput extends phoenix_light_lit_element.PhoenixLightLitE
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        this.classList.add(input_constants.INPUT_CONTROL_CSS_CLASSES.input);
+        if (this.type !== input_constants.INPUT_CONTROL_TYPES.hidden) {
+            this.classList.add(input_constants.INPUT_CONTROL_CSS_CLASSES.input);
+        }
         const cssClasses = index['default']({
             [input_constants.INPUT_CONTROL_CSS_CLASSES.inputDisabled]: this.disabled,
             [input_constants.INPUT_CONTROL_CSS_CLASSES.inputError]: this.error

package/build/cjs/packages/phoenix/src/components/form/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/radio/radio.js

@@ -6,9 +6,9 @@ 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 index = require('../../../../external/classnames/index.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var index = require('../../../../external/classnames/index.js');
 var checkbox_constants = require('../checkbox/checkbox_constants.js');
 var radio_constants = require('./radio_constants.js');
 

package/build/cjs/packages/phoenix/src/components/form/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/switch/switch.js

@@ -6,9 +6,9 @@ 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 index = require('../../../../external/classnames/index.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var index = require('../../../../external/classnames/index.js');
 var checkbox_constants = require('../checkbox/checkbox_constants.js');
 var switch_constants = require('./switch_constants.js');
 

package/build/cjs/packages/phoenix/src/components/form/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/textarea/textarea.js

@@ -6,9 +6,9 @@ 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 index = require('../../../../external/classnames/index.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var index = require('../../../../external/classnames/index.js');
 var textarea_constants = require('./textarea_constants.js');
 
 exports.HTextarea = class HTextarea extends phoenix_light_lit_element.PhoenixLightLitElement {

package/build/cjs/packages/phoenix/src/components/form/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/checkbox/checkbox.js

@@ -2,9 +2,9 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 import { property } 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 classnames from '../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
+import classnames from '../../../../external/classnames/index.js';
 import { CHECKBOX_PROPS_TO_SYNC, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';
 
 let HCheckbox = class HCheckbox extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox.js.map

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

@@ -1,6 +1,6 @@
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-import type { TInputSizesType } from "./input_types";
 import type { TInputControlType } from "./input_types";
+import type { TInputSizesType } from "./input_types";
 export declare class HInput extends PhoenixLightLitElement {
     controlId: string;
     controlName: string;

package/build/esm/packages/phoenix/src/components/form/input/input.js

@@ -3,9 +3,9 @@ import { property } 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 { INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
-import classnames from '../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
+import classnames from '../../../../external/classnames/index.js';
 
 let HInput = class HInput extends PhoenixLightLitElement {
     constructor() {
@@ -19,7 +19,9 @@ let HInput = class HInput extends PhoenixLightLitElement {
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        this.classList.add(INPUT_CONTROL_CSS_CLASSES.input);
+        if (this.type !== INPUT_CONTROL_TYPES.hidden) {
+            this.classList.add(INPUT_CONTROL_CSS_CLASSES.input);
+        }
         const cssClasses = classnames({
             [INPUT_CONTROL_CSS_CLASSES.inputDisabled]: this.disabled,
             [INPUT_CONTROL_CSS_CLASSES.inputError]: this.error

package/build/esm/packages/phoenix/src/components/form/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/radio/radio.js

@@ -2,9 +2,9 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 import { property } 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 classnames from '../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
+import classnames from '../../../../external/classnames/index.js';
 import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';
 import { RADIO_CONTROL_CSS_CLASSES } from './radio_constants.js';
 

package/build/esm/packages/phoenix/src/components/form/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/switch/switch.js

@@ -2,9 +2,9 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 import { property } 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 classnames from '../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
+import classnames from '../../../../external/classnames/index.js';
 import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';
 import { SWITCH_CONTROL_CSS_CLASSES } from './switch_constants.js';
 

package/build/esm/packages/phoenix/src/components/form/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/textarea/textarea.js

@@ -2,9 +2,9 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 import { property } 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 classnames from '../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
+import classnames from '../../../../external/classnames/index.js';
 import { TEXTAREA_PROPS_TO_SYNC, TEXTAREA_CONTROL_CSS_CLASSES } from './textarea_constants.js';
 
 let HTextarea = class HTextarea extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/components/form/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/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.4",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",