@shoper/phoenix_design_system 1.17.4-2 → 1.17.5-0

package/build/cjs/packages/phoenix/src/components/messages/base_message.js

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
 var decorators = require('lit/decorators');
 var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
 var portal_constants = require('../portal/portal_constants.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
 var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
 var base_message_constants = require('./base_message_constants.js');
+var ref = require('lit/directives/ref');
 
 class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -20,9 +23,24 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
         this.offset = base_message_constants.DEFAULT_MESSAGE_OFFSET;
         this.mouseonly = false;
         this.tabindex = '-1';
+        this.useAsLabel = false;
+        this._messageId = v4['default']();
+        this._tooltipRef = ref.createRef();
+        this._handleChildrenAriaAttributes = () => {
+            [...this.children].forEach((child) => {
+                if (base_message_constants.LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()) || this._tooltipRef.value === child)
+                    return;
+                const attributeName = this.useAsLabel ? 'aria-labelledby' : 'aria-describedby';
+                child.setAttribute(attributeName, `${child.getAttribute(attributeName) || ''} ${this._messageId}`);
+            });
+        };
         this._setupEventListeners = () => {
+            var _a, _b;
             this.addEventListener('mouseenter', this.open);
             this.addEventListener('mouseleave', this.close);
+            this.addEventListener('keydown', this._closeFromKeyboard);
+            (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.open);
+            (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.close);
             if (!this.mouseonly) {
                 this.addEventListener('focusin', this.open);
                 this.addEventListener('focusout', this.close);
@@ -43,6 +61,13 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
                 this.opened = true;
             }, base_message_constants.MESSAGE_SHOW_DELAY_IN_MS);
         };
+        this._closeFromKeyboard = (ev) => {
+            if (ev.key !== 'Escape' || !this.opened)
+                return;
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.close();
+        };
         this.close = () => {
             this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > base_message_constants.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
             clearTimeout(this._openTimeout);
@@ -83,8 +108,14 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
                 offset: this.offset
             });
         this.setAttribute('tabindex', this.tabindex);
+        if (!this._$baseMessageContent)
+            this._$baseMessageContent = [...this.children].find((child) => base_message_constants.MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
         this._setupEventListeners();
     }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._handleChildrenAriaAttributes();
+    }
     static _appendMessagePortal() {
         const $messagePortalTarget = document.querySelector(`[name="${base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME}"]`);
         if ($messagePortalTarget)
@@ -93,6 +124,24 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
         $portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME);
         document.body.appendChild($portalTarget);
     }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.open);
+        (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.close);
+    }
+    render() {
+        var _a;
+        super.render();
+        return lit.html `
+            <span ${ref.ref(this._tooltipRef)} id="${this._messageId}" class="${base_message_constants.SCREEN_READER_ONLY_CLASS_NAME}" role="tooltip">
+                ${utilities.DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
+            </span>
+            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
+                ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
+            </h-portal>
+        `;
+    }
 }
 tslib_es6.__decorate([
     decorators.property({ type: Boolean, reflect: true }),
@@ -117,7 +166,11 @@ tslib_es6.__decorate([
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
-], BaseMessage.prototype, "tabindex", void 0);
+], BaseMessage.prototype, "tabindex", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: 'use-as-label' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], BaseMessage.prototype, "useAsLabel", void 0);
 
 exports.BaseMessage = BaseMessage;
 //# sourceMappingURL=base_message.js.map

package/build/cjs/packages/phoenix/src/components/messages/base_message.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/messages/base_message_constants.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var portal_constants = require('../portal/portal_constants.js');
 var hint_constants = require('./hints/hint_constants.js');
 var tooltip_constants = require('./tooltips/tooltip_constants.js');
 
@@ -10,16 +11,20 @@ const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
 const MESSAGE_REMOVED_CLASS_NAME = `removed`;
 const DEFAULT_MESSAGE_OFFSET = 10;
 const MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
+const LIST_OF_MESSAGE_CHILDREN = [...MESSAGE_CONTENT_ELEMENTS, portal_constants.PORTAL_COMPONENT_NAME];
 const MESSAGE_SHOW_DELAY_IN_MS = 100;
 const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
-const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+const SCREEN_READER_ONLY_CLASS_NAME = 'sr-only';
 
 exports.DEFAULT_MESSAGE_OFFSET = DEFAULT_MESSAGE_OFFSET;
 exports.DEFAULT_MESSAGE_PORTAL_NAME = DEFAULT_MESSAGE_PORTAL_NAME;
+exports.LIST_OF_MESSAGE_CHILDREN = LIST_OF_MESSAGE_CHILDREN;
 exports.MESSAGE_CLOSE_DELAY_IN_MS = MESSAGE_CLOSE_DELAY_IN_MS;
 exports.MESSAGE_CONTENT_ELEMENTS = MESSAGE_CONTENT_ELEMENTS;
 exports.MESSAGE_CONTENT_SLOT_NAME = MESSAGE_CONTENT_SLOT_NAME;
 exports.MESSAGE_REMOVED_CLASS_NAME = MESSAGE_REMOVED_CLASS_NAME;
 exports.MESSAGE_SHOW_DELAY_IN_MS = MESSAGE_SHOW_DELAY_IN_MS;
 exports.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
+exports.SCREEN_READER_ONLY_CLASS_NAME = SCREEN_READER_ONLY_CLASS_NAME;
 //# sourceMappingURL=base_message_constants.js.map

package/build/cjs/packages/phoenix/src/components/messages/base_message_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;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
-var litHtml = require('lit-html');
 var hint_constants = require('./hint_constants.js');
-var base_message_constants = require('../base_message_constants.js');
 var base_message = require('../base_message.js');
 
 exports.HHint = class HHint extends base_message.BaseMessage {
@@ -18,14 +16,6 @@ exports.HHint = class HHint extends base_message.BaseMessage {
         super.connectedCallback(hint_constants.HINT_CLASS_NAME);
         this.classList.add(hint_constants.HINT_CLASS_NAME);
     }
-    render() {
-        super.render();
-        return litHtml.html `
-            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
-                ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
-            </h-portal>
-        `;
-    }
 };
 exports.HHint = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(hint_constants.HINT_ELEMENT_NAME),

package/build/cjs/packages/phoenix/src/components/messages/hints/hint.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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
-var litHtml = require('lit-html');
 var tooltip_constants = require('./tooltip_constants.js');
-var base_message_constants = require('../base_message_constants.js');
 var base_message = require('../base_message.js');
 
 exports.HTooltip = class HTooltip extends base_message.BaseMessage {
@@ -14,14 +12,6 @@ exports.HTooltip = class HTooltip extends base_message.BaseMessage {
         super.connectedCallback(tooltip_constants.TOOLTIP_CLASS_NAME);
         this.classList.add(tooltip_constants.TOOLTIP_CLASS_NAME);
     }
-    render() {
-        super.render();
-        return litHtml.html `
-            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
-                ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
-            </h-portal>
-        `;
-    }
 };
 exports.HTooltip = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(tooltip_constants.TOOLTIP_ELEMENT_NAME)

package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.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;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;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -118,7 +118,8 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
             [...document.body.children].forEach((child) => {
                 const isPortalTarget = child.tagName === portal_constants.PORTAL_TARGET_COMPONENT_NAME.toUpperCase();
                 const isAriaLiveContainer = child.hasAttribute('aria-live');
-                if (!isPortalTarget && !isAriaLiveContainer) {
+                const isBackdrop = child.tagName === 'H-BACKDROP';
+                if (!isPortalTarget && !isAriaLiveContainer && !isBackdrop) {
                     child.setAttribute('inert', '');
                 }
             });

package/build/cjs/packages/phoenix/src/components/modal/modal.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/portal/portal_constants.js

@@ -7,9 +7,11 @@ const PORTAL_EVENTS = {
     close: 'close'
 };
 const PORTAL_TARGET_NAME_PROP = 'name';
+const PORTAL_COMPONENT_NAME = 'h-portal';
 const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
 const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
 
+exports.PORTAL_COMPONENT_NAME = PORTAL_COMPONENT_NAME;
 exports.PORTAL_EVENTS = PORTAL_EVENTS;
 exports.PORTAL_TARGET_ATTRIBUTE_NAME = PORTAL_TARGET_ATTRIBUTE_NAME;
 exports.PORTAL_TARGET_COMPONENT_NAME = PORTAL_TARGET_COMPONENT_NAME;

package/build/cjs/packages/phoenix/src/components/portal/portal_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;"}
+{"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;"}

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

@@ -12,14 +12,6 @@ exports.HTabPanel = class HTabPanel extends phoenix_light_lit_element.PhoenixLig
     constructor() {
         super();
         this._visibilityController = new visibility_controller.VisibilityController(this);
-        this.setAttribute('role', 'tabpanel');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        const $tab = document.querySelector(`[panel-name="${this.name}"]`);
-        if ($tab && $tab.id) {
-            this.setAttribute('aria-labelledby', $tab.id);
-        }
     }
     show() {
         this._visibilityController.show();

package/build/cjs/packages/phoenix/src/components/tabs/tab_panel.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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -16,12 +16,13 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
     constructor() {
         super(...arguments);
         this.watchChildrenRendered = true;
-        this._handleArrowNavigation = (ev) => {
-            ev.preventDefault();
+        this._handleArrowNavigation = ({ key }) => {
             const currentTabIndex = this._getFocusedTabIndex();
             if (currentTabIndex === undefined)
                 return;
-            const newTabIndex = ev.key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
+            const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
+            if (newTabIndex === undefined)
+                return;
             utilities.UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
             utilities.UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
             this._$tabs[newTabIndex].focus();
@@ -58,10 +59,14 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
         return this._$tabs.findIndex(($tab) => $tab === focusedElement);
     }
     _getNextTabIndex(currentTabIndex) {
-        return (currentTabIndex + 1) % this._$tabs.length;
+        if (currentTabIndex >= this._$tabs.length - 1)
+            return;
+        return currentTabIndex + 1;
     }
     _getPrevTabIndex(currentTabIndex) {
-        return (currentTabIndex - 1 + this._$tabs.length) % this._$tabs.length;
+        if (currentTabIndex <= 0)
+            return;
+        return currentTabIndex - 1;
     }
     _setupEvents() {
         document.addEventListener(tab_constants.TAB_EVENT_NAMES.selected, this._handleTabSelected);

package/build/cjs/packages/phoenix/src/components/tabs/tabs.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/messages/base_message.d.ts

@@ -1,6 +1,7 @@
 import { IBaseMessage } from './base_message_types';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import type { TDirection } from '@dreamcommerce/utilities';
+import { PropertyValues, TemplateResult } from 'lit';
 export declare class BaseMessage extends PhoenixLightLitElement implements IBaseMessage {
     opened: boolean;
     portalTarget: string;
@@ -8,6 +9,8 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
     offset: number;
     mouseonly: boolean;
     tabindex: string;
+    useAsLabel: boolean;
+    private _messageId;
     private _positionController;
     private _clickOutsideController;
     private _$messageContent;
@@ -16,11 +19,18 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
     private _shouldDelayClosing;
     private _closeTimeout;
     private _messageComponentName;
+    private _$baseMessageContent?;
+    private _tooltipRef;
     constructor();
     connectedCallback(messageComponentName?: string): void;
+    firstUpdated(props: PropertyValues): void;
+    private _handleChildrenAriaAttributes;
     private static _appendMessagePortal;
     private _setupEventListeners;
     protected _positionMessage: () => void;
     open: () => void;
+    private _closeFromKeyboard;
     close: () => void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/messages/base_message.js

@@ -1,11 +1,14 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
 import { property } from 'lit/decorators';
-import { DIRECTIONS } from '@dreamcommerce/utilities';
+import { DIRECTIONS, DomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
-import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS } from './base_message_constants.js';
+import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, LIST_OF_MESSAGE_CHILDREN, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, SCREEN_READER_ONLY_CLASS_NAME, MESSAGE_CONTENT_SLOT_NAME } from './base_message_constants.js';
+import { createRef, ref } from 'lit/directives/ref';
 
 class BaseMessage extends PhoenixLightLitElement {
     constructor() {
@@ -16,9 +19,24 @@ class BaseMessage extends PhoenixLightLitElement {
         this.offset = DEFAULT_MESSAGE_OFFSET;
         this.mouseonly = false;
         this.tabindex = '-1';
+        this.useAsLabel = false;
+        this._messageId = v4();
+        this._tooltipRef = createRef();
+        this._handleChildrenAriaAttributes = () => {
+            [...this.children].forEach((child) => {
+                if (LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()) || this._tooltipRef.value === child)
+                    return;
+                const attributeName = this.useAsLabel ? 'aria-labelledby' : 'aria-describedby';
+                child.setAttribute(attributeName, `${child.getAttribute(attributeName) || ''} ${this._messageId}`);
+            });
+        };
         this._setupEventListeners = () => {
+            var _a, _b;
             this.addEventListener('mouseenter', this.open);
             this.addEventListener('mouseleave', this.close);
+            this.addEventListener('keydown', this._closeFromKeyboard);
+            (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.open);
+            (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.close);
             if (!this.mouseonly) {
                 this.addEventListener('focusin', this.open);
                 this.addEventListener('focusout', this.close);
@@ -39,6 +57,13 @@ class BaseMessage extends PhoenixLightLitElement {
                 this.opened = true;
             }, MESSAGE_SHOW_DELAY_IN_MS);
         };
+        this._closeFromKeyboard = (ev) => {
+            if (ev.key !== 'Escape' || !this.opened)
+                return;
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.close();
+        };
         this.close = () => {
             this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
             clearTimeout(this._openTimeout);
@@ -79,8 +104,14 @@ class BaseMessage extends PhoenixLightLitElement {
                 offset: this.offset
             });
         this.setAttribute('tabindex', this.tabindex);
+        if (!this._$baseMessageContent)
+            this._$baseMessageContent = [...this.children].find((child) => MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
         this._setupEventListeners();
     }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._handleChildrenAriaAttributes();
+    }
     static _appendMessagePortal() {
         const $messagePortalTarget = document.querySelector(`[name="${DEFAULT_MESSAGE_PORTAL_NAME}"]`);
         if ($messagePortalTarget)
@@ -89,6 +120,24 @@ class BaseMessage extends PhoenixLightLitElement {
         $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
         document.body.appendChild($portalTarget);
     }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.open);
+        (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.close);
+    }
+    render() {
+        var _a;
+        super.render();
+        return html `
+            <span ${ref(this._tooltipRef)} id="${this._messageId}" class="${SCREEN_READER_ONLY_CLASS_NAME}" role="tooltip">
+                ${DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
+            </span>
+            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
+                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
+            </h-portal>
+        `;
+    }
 }
 __decorate([
     property({ type: Boolean, reflect: true }),
@@ -113,7 +162,11 @@ __decorate([
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], BaseMessage.prototype, "tabindex", void 0);
+], BaseMessage.prototype, "tabindex", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'use-as-label' }),
+    __metadata("design:type", Boolean)
+], BaseMessage.prototype, "useAsLabel", void 0);
 
 export { BaseMessage };
 //# sourceMappingURL=base_message.js.map

package/build/esm/packages/phoenix/src/components/messages/base_message.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,qDAAyD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/messages/base_message_constants.d.ts

@@ -4,6 +4,8 @@ export declare const MESSAGE_REMOVED_CLASS_NAME = "removed";
 export declare const DEFAULT_MESSAGE_OFFSET = 10;
 export declare const MESSAGE_ELEMENTS: string[];
 export declare const MESSAGE_CONTENT_ELEMENTS: string[];
+export declare const LIST_OF_MESSAGE_CHILDREN: string[];
 export declare const MESSAGE_SHOW_DELAY_IN_MS = 100;
 export declare const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
 export declare const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+export declare const SCREEN_READER_ONLY_CLASS_NAME = "sr-only";

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js

@@ -1,3 +1,4 @@
+import { PORTAL_COMPONENT_NAME } from '../portal/portal_constants.js';
 import { HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
 import { TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
 
@@ -6,9 +7,11 @@ const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
 const MESSAGE_REMOVED_CLASS_NAME = `removed`;
 const DEFAULT_MESSAGE_OFFSET = 10;
 const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
+const LIST_OF_MESSAGE_CHILDREN = [...MESSAGE_CONTENT_ELEMENTS, PORTAL_COMPONENT_NAME];
 const MESSAGE_SHOW_DELAY_IN_MS = 100;
 const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
-const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+const SCREEN_READER_ONLY_CLASS_NAME = 'sr-only';
 
-export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
+export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, LIST_OF_MESSAGE_CHILDREN, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, SCREEN_READER_ONLY_CLASS_NAME };
 //# sourceMappingURL=base_message_constants.js.map

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map

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

package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts

@@ -1,7 +1,5 @@
-import { TemplateResult } from 'lit-html';
 import { BaseMessage } from '../base_message';
 export declare class HHint extends BaseMessage {
     constructor();
     connectedCallback(): void;
-    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/messages/hints/hint.js

@@ -1,8 +1,6 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { html } from 'lit-html';
 import { HINT_DEFAULT_OFFSET, HINT_CLASS_NAME, HINT_ELEMENT_NAME } from './hint_constants.js';
-import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
 import { BaseMessage } from '../base_message.js';
 
 let HHint = class HHint extends BaseMessage {
@@ -14,14 +12,6 @@ let HHint = class HHint extends BaseMessage {
         super.connectedCallback(HINT_CLASS_NAME);
         this.classList.add(HINT_CLASS_NAME);
     }
-    render() {
-        super.render();
-        return html `
-            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
-                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
-            </h-portal>
-        `;
-    }
 };
 HHint = __decorate([
     phoenixCustomElement(HINT_ELEMENT_NAME),

package/build/esm/packages/phoenix/src/components/messages/hints/hint.js.map

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

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.d.ts

@@ -1,6 +1,4 @@
-import { TemplateResult } from 'lit-html';
 import { BaseMessage } from '../base_message';
 export declare class HTooltip extends BaseMessage {
     connectedCallback(): void;
-    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js

@@ -1,8 +1,6 @@
 import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { html } from 'lit-html';
 import { TOOLTIP_CLASS_NAME, TOOLTIP_ELEMENT_NAME } from './tooltip_constants.js';
-import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
 import { BaseMessage } from '../base_message.js';
 
 let HTooltip = class HTooltip extends BaseMessage {
@@ -10,14 +8,6 @@ let HTooltip = class HTooltip extends BaseMessage {
         super.connectedCallback(TOOLTIP_CLASS_NAME);
         this.classList.add(TOOLTIP_CLASS_NAME);
     }
-    render() {
-        super.render();
-        return html `
-            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
-                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
-            </h-portal>
-        `;
-    }
 };
 HTooltip = __decorate([
     phoenixCustomElement(TOOLTIP_ELEMENT_NAME)

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,2BAA2B,+CAAmD;AAC9E;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,2BAA2B,+CAAmD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -114,7 +114,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             [...document.body.children].forEach((child) => {
                 const isPortalTarget = child.tagName === PORTAL_TARGET_COMPONENT_NAME.toUpperCase();
                 const isAriaLiveContainer = child.hasAttribute('aria-live');
-                if (!isPortalTarget && !isAriaLiveContainer) {
+                const isBackdrop = child.tagName === 'H-BACKDROP';
+                if (!isPortalTarget && !isAriaLiveContainer && !isBackdrop) {
                     child.setAttribute('inert', '');
                 }
             });

package/build/esm/packages/phoenix/src/components/modal/modal.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/portal/portal_constants.js

@@ -3,8 +3,9 @@ const PORTAL_EVENTS = {
     close: 'close'
 };
 const PORTAL_TARGET_NAME_PROP = 'name';
+const PORTAL_COMPONENT_NAME = 'h-portal';
 const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
 const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
 
-export { PORTAL_EVENTS, PORTAL_TARGET_ATTRIBUTE_NAME, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
+export { PORTAL_COMPONENT_NAME, PORTAL_EVENTS, PORTAL_TARGET_ATTRIBUTE_NAME, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
 //# sourceMappingURL=portal_constants.js.map

package/build/esm/packages/phoenix/src/components/portal/portal_constants.js.map

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

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

@@ -3,7 +3,6 @@ export declare class HTabPanel extends PhoenixLightLitElement {
     name: string;
     private _visibilityController;
     constructor();
-    connectedCallback(): void;
     show(): void;
     hide(): void;
 }

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

@@ -8,14 +8,6 @@ let HTabPanel = class HTabPanel extends PhoenixLightLitElement {
     constructor() {
         super();
         this._visibilityController = new VisibilityController(this);
-        this.setAttribute('role', 'tabpanel');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        const $tab = document.querySelector(`[panel-name="${this.name}"]`);
-        if ($tab && $tab.id) {
-            this.setAttribute('aria-labelledby', $tab.id);
-        }
     }
     show() {
         this._visibilityController.show();

package/build/esm/packages/phoenix/src/components/tabs/tab_panel.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;"}
+{"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;"}

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

@@ -12,12 +12,13 @@ let HTabs = class HTabs extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.watchChildrenRendered = true;
-        this._handleArrowNavigation = (ev) => {
-            ev.preventDefault();
+        this._handleArrowNavigation = ({ key }) => {
             const currentTabIndex = this._getFocusedTabIndex();
             if (currentTabIndex === undefined)
                 return;
-            const newTabIndex = ev.key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
+            const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
+            if (newTabIndex === undefined)
+                return;
             UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
             UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
             this._$tabs[newTabIndex].focus();
@@ -54,10 +55,14 @@ let HTabs = class HTabs extends PhoenixLightLitElement {
         return this._$tabs.findIndex(($tab) => $tab === focusedElement);
     }
     _getNextTabIndex(currentTabIndex) {
-        return (currentTabIndex + 1) % this._$tabs.length;
+        if (currentTabIndex >= this._$tabs.length - 1)
+            return;
+        return currentTabIndex + 1;
     }
     _getPrevTabIndex(currentTabIndex) {
-        return (currentTabIndex - 1 + this._$tabs.length) % this._$tabs.length;
+        if (currentTabIndex <= 0)
+            return;
+        return currentTabIndex - 1;
     }
     _setupEvents() {
         document.addEventListener(TAB_EVENT_NAMES.selected, this._handleTabSelected);

package/build/esm/packages/phoenix/src/components/tabs/tabs.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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": "1.17.4-2",
+  "version": "1.17.5-0",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@splidejs/splide-extension-auto-scroll": "^0.5.3"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.20.1-0",
+    "@dreamcommerce/utilities": "^1.20.1-6",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",