@shoper/phoenix_design_system 0.16.1 → 0.18.0-1

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

@@ -15,7 +15,7 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
         this.name = '';
         this.setAttribute('role', 'menu');
         this.slot = this.hasAttribute('slot') ? this.slot : 'content';
-        this.className = `${dropdown_constants.DROPDOWN_CONTENT_CSS_CLASS} ${this.className}`;
+        this.classList.add(dropdown_constants.DROPDOWN_CONTENT_CSS_CLASS);
         Array.from(this.children).forEach((element) => {
             element.setAttribute('role', 'menuitem');
         });

package/build/cjs/packages/phoenix/src/components/groups/toggle_button_group/toggle_button.js

@@ -0,0 +1,55 @@
+'use strict';
+
+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.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var toggle_button_group_constants = require('./toggle_button_group_constants.js');
+
+exports.HToggleButton = class HToggleButton extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.toggledOn = false;
+    }
+    willUpdate(propertyValues) {
+        var _a;
+        if (propertyValues.has('toggledOn')) {
+            (_a = this.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', this.toggledOn.toString());
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'presentation');
+        }
+        this.addEventListener('click', this._componentClickHandler);
+        this._emmitComponentConnected();
+    }
+    _emmitComponentConnected() {
+        const detail = {
+            target: this
+        };
+        this.dispatchEvent(new CustomEvent(toggle_button_group_constants.TOGGLE_BUTTON_EVENT_NAMES.connected, { bubbles: true, detail }));
+    }
+    _componentClickHandler(event) {
+        event.stopPropagation();
+        this._emitComponentClickedCustomEvent();
+    }
+    _emitComponentClickedCustomEvent() {
+        const detail = {
+            target: this
+        };
+        this.dispatchEvent(new CustomEvent(toggle_button_group_constants.TOGGLE_BUTTON_EVENT_NAMES.clicked, { bubbles: true, detail }));
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: toggle_button_group_constants.TOGGLED_ON_ATTRIBUTE_NAME }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HToggleButton.prototype, "toggledOn", void 0);
+exports.HToggleButton = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-toggle-button')
+], exports.HToggleButton);
+//# sourceMappingURL=toggle_button.js.map

package/build/cjs/packages/phoenix/src/components/groups/toggle_button_group/toggle_button.js.map

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

package/build/cjs/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
+var toggle_button_group_constants = require('./toggle_button_group_constants.js');
+
+var HToggleButtonGroup_1;
+exports.HToggleButtonGroup = HToggleButtonGroup_1 = class HToggleButtonGroup extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.toggleButtonsRegistry = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'group');
+        }
+        this.addEventListener(toggle_button_group_constants.TOGGLE_BUTTON_EVENT_NAMES.connected, this._toggleButtonConnectedHandler);
+        this.addEventListener(toggle_button_group_constants.TOGGLE_BUTTON_EVENT_NAMES.clicked, this._toggleButtonClickHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.toggleButtonsRegistry = [];
+    }
+    _toggleButtonConnectedHandler(event) {
+        event.stopPropagation();
+        const toggleButton = event.detail.target;
+        this._registerToggleButton(toggleButton);
+        if (toggleButton.getAttribute(toggle_button_group_constants.TOGGLED_ON_ATTRIBUTE_NAME) === '') {
+            this._emitSingleToggleOnModeToggleChange(toggleButton.getAttribute('value'));
+        }
+    }
+    _registerToggleButton(toggleButton) {
+        toggleButton.setAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME, v4['default']());
+        this.toggleButtonsRegistry = [...this.toggleButtonsRegistry, toggleButton];
+    }
+    _toggleButtonClickHandler(event) {
+        event.stopPropagation();
+        const target = event.detail.target;
+        this._performSingleToggleOnActionOnToggleButtons(target);
+        this._emitSingleToggleOnModeToggleChange(target.getAttribute('value'));
+    }
+    _performSingleToggleOnActionOnToggleButtons(toggleButton) {
+        this.toggleButtonsRegistry.forEach((element) => {
+            const canToggleOnButton = element.getAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME) ===
+                toggleButton.getAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME);
+            if (canToggleOnButton) {
+                element.setAttribute(toggle_button_group_constants.TOGGLED_ON_ATTRIBUTE_NAME, '');
+                return;
+            }
+            element.removeAttribute(toggle_button_group_constants.TOGGLED_ON_ATTRIBUTE_NAME);
+        });
+    }
+    _emitSingleToggleOnModeToggleChange(value) {
+        const detail = { value };
+        this.dispatchEvent(new CustomEvent(toggle_button_group_constants.TOGGLE_BUTTON_GROUP_EVENT_NAMES.toggleChange, { bubbles: true, detail }));
+    }
+};
+exports.HToggleButtonGroup.DATA_TOGGLE_ID_ATTRIBUTE_NAME = 'data-toggle-button-id';
+exports.HToggleButtonGroup = HToggleButtonGroup_1 = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-toggle-button-group')
+], exports.HToggleButtonGroup);
+//# sourceMappingURL=toggle_button_group.js.map

package/build/cjs/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/groups/toggle_button_group/toggle_button_group_constants.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TOGGLED_ON_ATTRIBUTE_NAME = 'toggled-on';
+const TOGGLE_BUTTON_GROUP_EVENT_NAMES = {
+    toggleChange: 'toggleChange'
+};
+const TOGGLE_BUTTON_EVENT_NAMES = {
+    connected: 'toggleButtonConnected',
+    clicked: 'toggleButtonClicked'
+};
+
+exports.TOGGLED_ON_ATTRIBUTE_NAME = TOGGLED_ON_ATTRIBUTE_NAME;
+exports.TOGGLE_BUTTON_EVENT_NAMES = TOGGLE_BUTTON_EVENT_NAMES;
+exports.TOGGLE_BUTTON_GROUP_EVENT_NAMES = TOGGLE_BUTTON_GROUP_EVENT_NAMES;
+//# sourceMappingURL=toggle_button_group_constants.js.map

package/build/cjs/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_constants.js.map

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

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

@@ -13,7 +13,7 @@ class KeystrokesController {
         this._buffer = [];
         this._lastKeyTime = Date.now();
         this._catchKeySequence = (ev) => {
-            ev.stopImmediatePropagation();
+            // ev.stopImmediatePropagation();
             const key = ev.key.toLowerCase();
             const currentTime = Date.now();
             if (currentTime - this._lastKeyTime > keystrokes_controller_constants.KEYSTROKE_DELAY_IN_MS) {

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

@@ -3,20 +3,41 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-require('@lit/reactive-element');
+require('lit');
+var debounce = require('../../../../../external/lodash/debounce.js');
 
 var _VisibilityController_host;
 class VisibilityController {
     constructor(host) {
         _VisibilityController_host.set(this, void 0);
+        this._handleResize = debounce['default'](this._setVisibilityValue, 100);
         tslib_es6.__classPrivateFieldSet(this, _VisibilityController_host, host, "f");
+        tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").addController(this);
+    }
+    hostConnected() {
+        this._setVisibilityValue();
+        this.initialVisibilityState = this._isVisibleBasedOnCssStyle();
+        tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").addEventListener('resize', this._handleResize);
+    }
+    _setVisibilityValue() {
+        const isVisible = this._isVisibleBasedOnCssStyle();
+        isVisible ? this.show() : this.hide();
+    }
+    _isVisibleBasedOnCssStyle() {
+        const displayValue = getComputedStyle(tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f")).getPropertyValue('display');
+        return displayValue !== 'none';
     }
     hide() {
+        this.isVisible = false;
         tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").setAttribute('hidden', '');
     }
     show() {
+        this.isVisible = true;
         tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").removeAttribute('hidden');
     }
+    hostDisconnected() {
+        tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").removeEventListener('resize', this._handleResize);
+    }
 }
 _VisibilityController_host = new WeakMap();
 

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

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

@@ -7,16 +7,67 @@ var tslib_es6 = require('../../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
 
+class ComponentsUtils {
+    static isUnknownElement($element) {
+        return $element instanceof HTMLUnknownElement;
+    }
+    static isElementDefined($element) {
+        if (!this.isCustomElement($element))
+            return false;
+        const customElementClass = window.customElements.get($element.tagName.toLowerCase());
+        return !!customElementClass && $element instanceof customElementClass;
+    }
+    static isCustomElement($element) {
+        return $element.tagName.includes('-');
+    }
+    static filterComponentsToInitialize(components) {
+        return components.filter(($element) => ComponentsUtils.isUnknownElement($element) ||
+            (ComponentsUtils.isCustomElement($element) && !ComponentsUtils.isElementDefined($element)) ||
+            (ComponentsUtils.isCustomElement($element) && ComponentsUtils.isElementDefined($element) && !$element.isWebComponentConnected));
+    }
+}
 class PhoenixLightLitElement extends lit.LitElement {
     constructor() {
         super(...arguments);
         this._slots = {};
+        this.isWebComponentConnected = false;
+        this._handleComponentConnected = ({ detail }) => {
+            const connectedElement = detail.$el.tagName.toLowerCase();
+            console.log('connected', connectedElement);
+            if (this.childrenToConnectionWatch.includes(connectedElement)) {
+                const elToRemoveIndex = this.childrenToConnectionWatch.findIndex((tagName) => tagName === connectedElement);
+                this.childrenToConnectionWatch.splice(elToRemoveIndex, elToRemoveIndex + 1);
+            }
+            if (!this.childrenToConnectionWatch.length) {
+                this.allChildrenConnected();
+                this.removeEventListener('connected', this._handleComponentConnected);
+            }
+        };
     }
     firstUpdated(props) {
         super.firstUpdated(props);
         this._slots = this._assignSlots();
         this.requestUpdate();
     }
+    _setupChildrenWatch() {
+        this.childrenToConnectionWatch = this.childrenToConnectionWatch
+            ? this.childrenToConnectionWatch
+            : ComponentsUtils.filterComponentsToInitialize([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
+        console.log(this.childrenToConnectionWatch);
+        this.addEventListener('connected', this._handleComponentConnected);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dispatchEvent(new CustomEvent('connected', {
+            detail: {
+                $el: this
+            },
+            bubbles: true
+        }));
+        if (this.watchChildren)
+            this._setupChildrenWatch();
+    }
+    allChildrenConnected() { }
     _assignSlots() {
         return [...this.querySelectorAll(':scope > [slot]')].reduce((acc, $el) => {
             var _a;
@@ -45,7 +96,11 @@ class PhoenixLightLitElement extends lit.LitElement {
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Object)
-], PhoenixLightLitElement.prototype, "_slots", void 0);
+], PhoenixLightLitElement.prototype, "_slots", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], PhoenixLightLitElement.prototype, "isWebComponentConnected", void 0);
 
 exports.PhoenixLightLitElement = PhoenixLightLitElement;
 //# sourceMappingURL=phoenix_light_lit_element.js.map

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

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

@@ -8,6 +8,7 @@ var context_consumer_controller = require('./core/context/context_consumer_contr
 var phoenix_light_lit_element = require('./core/phoenix_light_lit_element.js');
 var portal_target = require('./components/portal/portal_target.js');
 var portal = require('./components/portal/portal.js');
+var backdrop_controller = require('./components/backdrop/controller/backdrop_controller.js');
 var modal = require('./components/modal/modal.js');
 var modal_opener = require('./components/modal/modal_opener.js');
 var modal_body = require('./components/modal/modal_body.js');
@@ -55,6 +56,8 @@ var relative_position_controller = require('./controllers/relative_position_cont
 var dropdown = require('./components/dropdown/dropdown.js');
 var toggle_element_aria_controller = require('./controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
 var dropdown_toggler = require('./components/dropdown/dropdown_toggler.js');
+var toggle_button_group = require('./components/groups/toggle_button_group/toggle_button_group.js');
+var toggle_button = require('./components/groups/toggle_button_group/toggle_button.js');
 var click_outside_controller_messages = require('./controllers/click_outside_controller/click_outside_controller_messages.js');
 var backdrop = require('./components/backdrop/backdrop.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
@@ -78,6 +81,7 @@ Object.defineProperty(exports, 'HPortal', {
 		return portal.HPortal;
 	}
 });
+exports.BackdropController = backdrop_controller.BackdropController;
 Object.defineProperty(exports, 'HModal', {
 	enumerable: true,
 	get: function () {
@@ -314,6 +318,18 @@ Object.defineProperty(exports, 'HDropdownToggler', {
 		return dropdown_toggler.HDropdownToggler;
 	}
 });
+Object.defineProperty(exports, 'HToggleButtonGroup', {
+	enumerable: true,
+	get: function () {
+		return toggle_button_group.HToggleButtonGroup;
+	}
+});
+Object.defineProperty(exports, 'HToggleButton', {
+	enumerable: true,
+	get: function () {
+		return toggle_button.HToggleButton;
+	}
+});
 exports.CLICK_OUTSIDE_CONTROLLER_MESSAGES = click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES;
 Object.defineProperty(exports, 'HBackdrop', {
 	enumerable: true,

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

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

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

@@ -11,7 +11,7 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
         this.name = '';
         this.setAttribute('role', 'menu');
         this.slot = this.hasAttribute('slot') ? this.slot : 'content';
-        this.className = `${DROPDOWN_CONTENT_CSS_CLASS} ${this.className}`;
+        this.classList.add(DROPDOWN_CONTENT_CSS_CLASS);
         Array.from(this.children).forEach((element) => {
             element.setAttribute('role', 'menuitem');
         });

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button.d.ts

@@ -0,0 +1,10 @@
+import { PropertyValues } from 'lit';
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+export declare class HToggleButton extends PhoenixLightLitElement {
+    toggledOn: boolean;
+    willUpdate(propertyValues: PropertyValues): void;
+    connectedCallback(): void;
+    private _emmitComponentConnected;
+    private _componentClickHandler;
+    private _emitComponentClickedCustomEvent;
+}

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button.js

@@ -0,0 +1,53 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { TOGGLE_BUTTON_EVENT_NAMES, TOGGLED_ON_ATTRIBUTE_NAME } from './toggle_button_group_constants.js';
+
+let HToggleButton = class HToggleButton extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.toggledOn = false;
+    }
+    willUpdate(propertyValues) {
+        var _a;
+        if (propertyValues.has('toggledOn')) {
+            (_a = this.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', this.toggledOn.toString());
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'presentation');
+        }
+        this.addEventListener('click', this._componentClickHandler);
+        this._emmitComponentConnected();
+    }
+    _emmitComponentConnected() {
+        const detail = {
+            target: this
+        };
+        this.dispatchEvent(new CustomEvent(TOGGLE_BUTTON_EVENT_NAMES.connected, { bubbles: true, detail }));
+    }
+    _componentClickHandler(event) {
+        event.stopPropagation();
+        this._emitComponentClickedCustomEvent();
+    }
+    _emitComponentClickedCustomEvent() {
+        const detail = {
+            target: this
+        };
+        this.dispatchEvent(new CustomEvent(TOGGLE_BUTTON_EVENT_NAMES.clicked, { bubbles: true, detail }));
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: TOGGLED_ON_ATTRIBUTE_NAME }),
+    __metadata("design:type", Object)
+], HToggleButton.prototype, "toggledOn", void 0);
+HToggleButton = __decorate([
+    phoenixCustomElement('h-toggle-button')
+], HToggleButton);
+
+export { HToggleButton };
+//# sourceMappingURL=toggle_button.js.map

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button.js.map

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

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group.d.ts

@@ -0,0 +1,12 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+export declare class HToggleButtonGroup extends PhoenixLightLitElement {
+    private static readonly DATA_TOGGLE_ID_ATTRIBUTE_NAME;
+    private toggleButtonsRegistry;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _toggleButtonConnectedHandler;
+    private _registerToggleButton;
+    private _toggleButtonClickHandler;
+    private _performSingleToggleOnActionOnToggleButtons;
+    private _emitSingleToggleOnModeToggleChange;
+}

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group.js

@@ -0,0 +1,65 @@
+import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
+import { TOGGLE_BUTTON_EVENT_NAMES, TOGGLED_ON_ATTRIBUTE_NAME, TOGGLE_BUTTON_GROUP_EVENT_NAMES } from './toggle_button_group_constants.js';
+
+var HToggleButtonGroup_1;
+let HToggleButtonGroup = HToggleButtonGroup_1 = class HToggleButtonGroup extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.toggleButtonsRegistry = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'group');
+        }
+        this.addEventListener(TOGGLE_BUTTON_EVENT_NAMES.connected, this._toggleButtonConnectedHandler);
+        this.addEventListener(TOGGLE_BUTTON_EVENT_NAMES.clicked, this._toggleButtonClickHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.toggleButtonsRegistry = [];
+    }
+    _toggleButtonConnectedHandler(event) {
+        event.stopPropagation();
+        const toggleButton = event.detail.target;
+        this._registerToggleButton(toggleButton);
+        if (toggleButton.getAttribute(TOGGLED_ON_ATTRIBUTE_NAME) === '') {
+            this._emitSingleToggleOnModeToggleChange(toggleButton.getAttribute('value'));
+        }
+    }
+    _registerToggleButton(toggleButton) {
+        toggleButton.setAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME, v4());
+        this.toggleButtonsRegistry = [...this.toggleButtonsRegistry, toggleButton];
+    }
+    _toggleButtonClickHandler(event) {
+        event.stopPropagation();
+        const target = event.detail.target;
+        this._performSingleToggleOnActionOnToggleButtons(target);
+        this._emitSingleToggleOnModeToggleChange(target.getAttribute('value'));
+    }
+    _performSingleToggleOnActionOnToggleButtons(toggleButton) {
+        this.toggleButtonsRegistry.forEach((element) => {
+            const canToggleOnButton = element.getAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME) ===
+                toggleButton.getAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME);
+            if (canToggleOnButton) {
+                element.setAttribute(TOGGLED_ON_ATTRIBUTE_NAME, '');
+                return;
+            }
+            element.removeAttribute(TOGGLED_ON_ATTRIBUTE_NAME);
+        });
+    }
+    _emitSingleToggleOnModeToggleChange(value) {
+        const detail = { value };
+        this.dispatchEvent(new CustomEvent(TOGGLE_BUTTON_GROUP_EVENT_NAMES.toggleChange, { bubbles: true, detail }));
+    }
+};
+HToggleButtonGroup.DATA_TOGGLE_ID_ATTRIBUTE_NAME = 'data-toggle-button-id';
+HToggleButtonGroup = HToggleButtonGroup_1 = __decorate([
+    phoenixCustomElement('h-toggle-button-group')
+], HToggleButtonGroup);
+
+export { HToggleButtonGroup };
+//# sourceMappingURL=toggle_button_group.js.map

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group.js.map

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

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_constants.d.ts

@@ -0,0 +1,8 @@
+export declare const TOGGLED_ON_ATTRIBUTE_NAME = "toggled-on";
+export declare const TOGGLE_BUTTON_GROUP_EVENT_NAMES: {
+    readonly toggleChange: "toggleChange";
+};
+export declare const TOGGLE_BUTTON_EVENT_NAMES: {
+    readonly connected: "toggleButtonConnected";
+    readonly clicked: "toggleButtonClicked";
+};

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_constants.js

@@ -0,0 +1,11 @@
+const TOGGLED_ON_ATTRIBUTE_NAME = 'toggled-on';
+const TOGGLE_BUTTON_GROUP_EVENT_NAMES = {
+    toggleChange: 'toggleChange'
+};
+const TOGGLE_BUTTON_EVENT_NAMES = {
+    connected: 'toggleButtonConnected',
+    clicked: 'toggleButtonClicked'
+};
+
+export { TOGGLED_ON_ATTRIBUTE_NAME, TOGGLE_BUTTON_EVENT_NAMES, TOGGLE_BUTTON_GROUP_EVENT_NAMES };
+//# sourceMappingURL=toggle_button_group_constants.js.map

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_constants.js.map

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

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_types.d.ts

@@ -0,0 +1,6 @@
+export interface ITargetToggleButton {
+    target: HTMLElement;
+}
+export interface ISingleToggleOnModeToggleChange {
+    value: string | null;
+}

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_types.js

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

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_types.js.map

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

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js

@@ -9,7 +9,7 @@ class KeystrokesController {
         this._buffer = [];
         this._lastKeyTime = Date.now();
         this._catchKeySequence = (ev) => {
-            ev.stopImmediatePropagation();
+            // ev.stopImmediatePropagation();
             const key = ev.key.toLowerCase();
             const currentTime = Date.now();
             if (currentTime - this._lastKeyTime > KEYSTROKE_DELAY_IN_MS) {

package/build/esm/packages/phoenix/src/controllers/visibility_controller/visibility_controller.d.ts

@@ -1,8 +1,15 @@
 import { IVisibilityController } from "./visibility_controller_types";
-import { ReactiveControllerHost } from '@lit/reactive-element';
-export declare class VisibilityController implements IVisibilityController {
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class VisibilityController implements IVisibilityController, ReactiveController {
     #private;
+    isVisible: boolean;
+    initialVisibilityState: boolean;
     constructor(host: ReactiveControllerHost & HTMLElement);
+    hostConnected(): void;
+    private _handleResize;
+    private _setVisibilityValue;
+    private _isVisibleBasedOnCssStyle;
     hide(): void;
     show(): void;
+    hostDisconnected(): void;
 }

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

@@ -1,18 +1,39 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
-import '@lit/reactive-element';
+import 'lit';
+import debounce_1 from '../../../../../external/lodash/debounce.js';
 
 var _VisibilityController_host;
 class VisibilityController {
     constructor(host) {
         _VisibilityController_host.set(this, void 0);
+        this._handleResize = debounce_1(this._setVisibilityValue, 100);
         __classPrivateFieldSet(this, _VisibilityController_host, host, "f");
+        __classPrivateFieldGet(this, _VisibilityController_host, "f").addController(this);
+    }
+    hostConnected() {
+        this._setVisibilityValue();
+        this.initialVisibilityState = this._isVisibleBasedOnCssStyle();
+        __classPrivateFieldGet(this, _VisibilityController_host, "f").addEventListener('resize', this._handleResize);
+    }
+    _setVisibilityValue() {
+        const isVisible = this._isVisibleBasedOnCssStyle();
+        isVisible ? this.show() : this.hide();
+    }
+    _isVisibleBasedOnCssStyle() {
+        const displayValue = getComputedStyle(__classPrivateFieldGet(this, _VisibilityController_host, "f")).getPropertyValue('display');
+        return displayValue !== 'none';
     }
     hide() {
+        this.isVisible = false;
         __classPrivateFieldGet(this, _VisibilityController_host, "f").setAttribute('hidden', '');
     }
     show() {
+        this.isVisible = true;
         __classPrivateFieldGet(this, _VisibilityController_host, "f").removeAttribute('hidden');
     }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _VisibilityController_host, "f").removeEventListener('resize', this._handleResize);
+    }
 }
 _VisibilityController_host = new WeakMap();
 

package/build/esm/packages/phoenix/src/controllers/visibility_controller/visibility_controller.js.map

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

package/build/esm/packages/phoenix/src/controllers/visibility_controller/visibility_controller_types.d.ts

@@ -1,4 +1,6 @@
 export interface IVisibilityController {
     show(): void;
     hide(): void;
+    isVisible: boolean;
+    initialVisibilityState: boolean;
 }

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.d.ts

@@ -1,7 +1,14 @@
 import { LitElement, TemplateResult, nothing, PropertyValues } from 'lit';
 export declare class PhoenixLightLitElement extends LitElement {
     _slots: Record<string, TemplateResult[]>;
+    protected childrenToConnectionWatch: string[];
+    watchChildren: boolean;
+    isWebComponentConnected: boolean;
     firstUpdated(props: PropertyValues): void;
+    private _setupChildrenWatch;
+    private _handleComponentConnected;
+    connectedCallback(): void;
+    allChildrenConnected(): void;
     private _assignSlots;
     getSlot(name: string): TemplateResult[] | typeof nothing;
     hasSlot(name: string): boolean;

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

@@ -1,18 +1,69 @@
 import { DEFAULT_SLOT_NAME } from './phoenix_light_lit_elements_constants.js';
 import { __decorate, __metadata } from '../../../../external/tslib/tslib.es6.js';
 import { LitElement, html, nothing } from 'lit';
-import { state } from 'lit/decorators';
+import { state, property } from 'lit/decorators';
 
+class ComponentsUtils {
+    static isUnknownElement($element) {
+        return $element instanceof HTMLUnknownElement;
+    }
+    static isElementDefined($element) {
+        if (!this.isCustomElement($element))
+            return false;
+        const customElementClass = window.customElements.get($element.tagName.toLowerCase());
+        return !!customElementClass && $element instanceof customElementClass;
+    }
+    static isCustomElement($element) {
+        return $element.tagName.includes('-');
+    }
+    static filterComponentsToInitialize(components) {
+        return components.filter(($element) => ComponentsUtils.isUnknownElement($element) ||
+            (ComponentsUtils.isCustomElement($element) && !ComponentsUtils.isElementDefined($element)) ||
+            (ComponentsUtils.isCustomElement($element) && ComponentsUtils.isElementDefined($element) && !$element.isWebComponentConnected));
+    }
+}
 class PhoenixLightLitElement extends LitElement {
     constructor() {
         super(...arguments);
         this._slots = {};
+        this.isWebComponentConnected = false;
+        this._handleComponentConnected = ({ detail }) => {
+            const connectedElement = detail.$el.tagName.toLowerCase();
+            console.log('connected', connectedElement);
+            if (this.childrenToConnectionWatch.includes(connectedElement)) {
+                const elToRemoveIndex = this.childrenToConnectionWatch.findIndex((tagName) => tagName === connectedElement);
+                this.childrenToConnectionWatch.splice(elToRemoveIndex, elToRemoveIndex + 1);
+            }
+            if (!this.childrenToConnectionWatch.length) {
+                this.allChildrenConnected();
+                this.removeEventListener('connected', this._handleComponentConnected);
+            }
+        };
     }
     firstUpdated(props) {
         super.firstUpdated(props);
         this._slots = this._assignSlots();
         this.requestUpdate();
     }
+    _setupChildrenWatch() {
+        this.childrenToConnectionWatch = this.childrenToConnectionWatch
+            ? this.childrenToConnectionWatch
+            : ComponentsUtils.filterComponentsToInitialize([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
+        console.log(this.childrenToConnectionWatch);
+        this.addEventListener('connected', this._handleComponentConnected);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dispatchEvent(new CustomEvent('connected', {
+            detail: {
+                $el: this
+            },
+            bubbles: true
+        }));
+        if (this.watchChildren)
+            this._setupChildrenWatch();
+    }
+    allChildrenConnected() { }
     _assignSlots() {
         return [...this.querySelectorAll(':scope > [slot]')].reduce((acc, $el) => {
             var _a;
@@ -41,7 +92,11 @@ class PhoenixLightLitElement extends LitElement {
 __decorate([
     state(),
     __metadata("design:type", Object)
-], PhoenixLightLitElement.prototype, "_slots", void 0);
+], PhoenixLightLitElement.prototype, "_slots", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], PhoenixLightLitElement.prototype, "isWebComponentConnected", void 0);
 
 export { PhoenixLightLitElement };
 //# sourceMappingURL=phoenix_light_lit_element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,uCAAuC,yCAA6C;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uCAAuC,yCAA6C;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/directives/observable_directive.d.ts

@@ -0,0 +1,13 @@
+import { AsyncDirective } from 'lit/async-directive.js';
+import { ISubject } from "../core/classes/subject/subject_types";
+declare class ObserveDirective<T = unknown> extends AsyncDirective {
+    private _observable;
+    private observable;
+    private observer;
+    render(observable: ISubject<T>, render?: Function): symbol;
+    subscribe(observable: ISubject<T>, render?: Function): void;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const observe: (observable: ISubject<unknown>, render?: Function | undefined) => import("lit/async-directive.js").DirectiveResult<typeof ObserveDirective>;
+export {};

package/build/esm/packages/phoenix/src/directives/observable_directive.js

@@ -0,0 +1,32 @@
+import { noChange } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+import { Observer } from '@phoenixRoot/core/classes/observer/observer';
+import '@phoenixRoot/core/classes/subject/subject_types';
+class ObserveDirective extends AsyncDirective {
+    render(observable, render) {
+        var _a;
+        if (this._observable !== observable) {
+            (_a = this.observable) === null || _a === void 0 ? void 0 : _a.unsubscribe(this.observer);
+            this._observable = observable;
+            if (this.isConnected)
+                this.subscribe(observable, render);
+        }
+        return noChange;
+    }
+    subscribe(observable, render) {
+        this.observable = observable;
+        this.observer = new Observer((value) => {
+            this.setValue(typeof render === 'function' ? render(value) : value);
+        });
+        observable.subscribe(this.observer);
+    }
+    disconnected() {
+        var _a;
+        (_a = this.observable) === null || _a === void 0 ? void 0 : _a.unsubscribe(this.observer);
+    }
+    reconnected() {
+        this.subscribe(this._observable);
+    }
+}
+export const observe = directive(ObserveDirective);
+//# sourceMappingURL=observable_directive.js.map

package/build/esm/packages/phoenix/src/directives/observable_directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observable_directive.js","sourceRoot":"","sources":["../../../../../../src/directives/observable_directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AACvE,OAAyB,iDAAiD,CAAC;AAE3E,MAAM,gBAA8B,SAAQ,cAAc;IAK/C,MAAM,CAAC,UAAuB,EAAE,MAAiB;;QACpD,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE;YACjC,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC5C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;YAE9B,IAAI,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;SAC5D;QAED,OAAO,QAAQ,CAAC;IACpB,CAAC;IAEM,SAAS,CAAC,UAAuB,EAAE,MAAiB;QACvD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,QAAQ,CAAC,CAAC,KAAQ,EAAE,EAAE;YACtC,IAAI,CAAC,QAAQ,CAAC,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACxE,CAAC,CAAC,CAAC;QAEH,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAEM,YAAY;;QACf,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAEM,WAAW;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;CACJ;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAC"}

package/build/esm/packages/phoenix/src/index.d.ts

@@ -54,6 +54,9 @@ export { BtnController } from './controllers/btn_controller';
 export { HDropdown } from './components/dropdown/dropdown';
 export { HDropdownToggler } from './components/dropdown/dropdown_toggler';
 export { HDropdownContent } from './components/dropdown/dropdown_content';
+export { HToggleButtonGroup } from './components/groups/toggle_button_group/toggle_button_group';
+export { HToggleButton } from './components/groups/toggle_button_group/toggle_button';
+export type { ISingleToggleOnModeToggleChange } from './components/groups/toggle_button_group/toggle_button_group_types';
 export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller';
 export { IClickOutsideController } from "./controllers/click_outside_controller/click_outside_controller_types";
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from "./controllers/click_outside_controller/click_outside_controller_messages";

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

@@ -4,6 +4,7 @@ export { ContextConsumerController } from './core/context/context_consumer_contr
 export { PhoenixLightLitElement } from './core/phoenix_light_lit_element.js';
 export { HPortalTarget } from './components/portal/portal_target.js';
 export { HPortal } from './components/portal/portal.js';
+export { BackdropController } from './components/backdrop/controller/backdrop_controller.js';
 export { HModal } from './components/modal/modal.js';
 export { HModalOpener } from './components/modal/modal_opener.js';
 export { HModalBody } from './components/modal/modal_body.js';
@@ -51,6 +52,8 @@ export { RelativePositionController } from './controllers/relative_position_cont
 export { HDropdown } from './components/dropdown/dropdown.js';
 export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
 export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
+export { HToggleButtonGroup } from './components/groups/toggle_button_group/toggle_button_group.js';
+export { HToggleButton } from './components/groups/toggle_button_group/toggle_button.js';
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
 export { HBackdrop } from './components/backdrop/backdrop.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';

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

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "0.16.1",
+  "version": "0.18.0-1",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",