@shoper/phoenix_design_system 1.18.8 → 1.18.10-0

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js

@@ -1,140 +1,17 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import 'lit';
-import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { Observer } from '../../core/classes/observer/observer.js';
-import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
-import { ACCORDION_CONTEXTS } from './accordion_constants.js';
-import { TransitionController } from '../../controllers/transition_controller/transition_controller.js';
 
-const RESIZE_DEBOUNCE_MS = 150;
-const MUTATION_DEBOUNCE_MS = 100;
 let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
     constructor() {
         super();
-        this.transitionName = 'accordion-toggle';
-        this._resizeDebounceTimer = null;
-        this._mutationDebounceTimer = null;
-        this._mutationObserver = null;
-        this._handleResize = () => {
-            if (this._resizeDebounceTimer !== null) {
-                window.cancelAnimationFrame(this._resizeDebounceTimer);
-            }
-            this._resizeDebounceTimer = window.requestAnimationFrame(() => {
-                setTimeout(() => {
-                    this._setStylingOptions();
-                }, RESIZE_DEBOUNCE_MS);
-            });
-        };
-        this._setStylingOptions = () => {
-            requestAnimationFrame(() => {
-                const previousDisplay = this.style.display;
-                this.style.setProperty('display', 'block', 'important');
-                this.style.height = 'auto';
-                requestAnimationFrame(() => {
-                    this._setOriginalHeightValue();
-                    this.style.display = previousDisplay;
-                    this.style.height = this.hidden ? '0px' : this._originalHeight;
-                });
-            });
-        };
-        this._handleMutation = () => {
-            if (this._mutationDebounceTimer !== null) {
-                window.clearTimeout(this._mutationDebounceTimer);
-            }
-            this._mutationDebounceTimer = window.setTimeout(() => {
-                requestAnimationFrame(() => {
-                    this.style.height = 'auto';
-                    requestAnimationFrame(() => {
-                        this._setOriginalHeightValue();
-                        if (this.hidden) {
-                            this.style.height = '0px';
-                        }
-                        else {
-                            this.style.height = this._originalHeight;
-                        }
-                    });
-                });
-            }, MUTATION_DEBOUNCE_MS);
-        };
-        this._setOriginalHeightValue = () => {
-            const newHeight = this.getBoundingClientRect().height;
-            if (newHeight !== 0 || this.children.length === 0) {
-                this._originalHeight = `${newHeight}px`;
-            }
-        };
-        this._expand = () => {
-            this._setHeight(this._originalHeight);
-        };
-        this._handleTransitionEnd = (e) => {
-            if (e.propertyName !== 'height' || e.target !== this) {
-                return;
-            }
-            if (!this.hidden && this.style.height !== '0px') {
-                this.style.height = 'auto';
-            }
-        };
-        this._collapse = () => {
-            const currentHeight = this.getBoundingClientRect().height;
-            this._setHeight(`${currentHeight}px`);
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    this._setHeight('0px');
-                });
-            });
-        };
-        this.setAttribute('role', 'region');
-        this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
+        this.slot = this.hasAttribute('slot') ? this.slot : 'content';
     }
     connectedCallback() {
         super.connectedCallback();
-        this._contextConsumer = new ContextConsumerController(this);
-        this._transitionController = new TransitionController(this, this.transitionName);
-        this._subscribeObserver();
-        window.addEventListener('resize', this._handleResize, { passive: true });
-        this.addEventListener('transitionend', this._boundHandleTransitionEnd);
-    }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this._setStylingOptions();
-    }
-    async _subscribeObserver() {
-        this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
-        this._accordionGroupPropsObserver = new Observer((accordionProps) => {
-            this._setAttributes(accordionProps);
-            accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
-        });
-        this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
-        this._mutationObserver = new MutationObserver(this._handleMutation);
-        this._mutationObserver.observe(this, { childList: true, subtree: true });
-    }
-    _setHeight(height) {
-        this.style.height = height;
-    }
-    _setAttributes({ regionId, controlsId }) {
-        this.setAttribute('id', controlsId);
-        this.setAttribute('labelledby', regionId);
-    }
-    disconnectedCallback() {
-        var _a, _b;
-        super.disconnectedCallback();
-        (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
-        (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        window.removeEventListener('resize', this._handleResize);
-        this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
-        if (this._resizeDebounceTimer !== null) {
-            window.cancelAnimationFrame(this._resizeDebounceTimer);
-        }
-        if (this._mutationDebounceTimer !== null) {
-            window.clearTimeout(this._mutationDebounceTimer);
-        }
+        this.classList.add('accordion-content');
     }
 };
-__decorate([
-    property(),
-    __metadata("design:type", Object)
-], HAccordionContent.prototype, "transitionName", void 0);
 HAccordionContent = __decorate([
     phoenixCustomElement('h-accordion-content'),
     __metadata("design:paramtypes", [])

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

package/build/esm/packages/phoenix/src/components/accordion/accordion_group.d.ts

@@ -1,28 +1,26 @@
 import type { IAccordion, IAccordionGroup } from './accordion_types';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { PropertyValues } from 'lit';
 export declare class HAccordionGroup extends PhoenixLightLitElement implements IAccordionGroup, IAccordion {
     opened: boolean;
     private _isDisabled;
-    private _regionId;
-    private _controlsId;
     private _mode;
-    private _accordionGroupPropsSubject;
-    private _accordionGroupContext;
-    private _accordionContextConsumer;
-    private _accordionProps;
-    private _accordionPropsObserver;
-    constructor();
+    private _$parentAccordion;
+    private _detailsRef;
+    private _togglerId;
     connectedCallback(): void;
-    private _subscribeObserver;
+    firstUpdated(props: PropertyValues): void;
     disconnectedCallback(): void;
+    private _syncWithParentAccordion;
+    private _handleSingleModeConstraint;
+    toggle(): void;
     show(): void;
     hide(): void;
-    toggle(): void;
+    private _hideOtherDetailsGroups;
+    private _dispatchToggleEvent;
     enable(): void;
     disable(): void;
-    private _accordionToggle;
-    private _closeOtherAccordionGroups;
     notify(): void;
-    protected updated(_changedProperties: Map<string, unknown>): void;
-    private _getProps;
+    private _summaryClickHandler;
+    protected render(): unknown;
 }

package/build/esm/packages/phoenix/src/components/accordion/accordion_group.js

@@ -1,109 +1,135 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
 import { property, state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { Observer } from '../../core/classes/observer/observer.js';
-import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
-import { BehaviorSubject } from '../../core/classes/behavior_subject/behavior_subject.js';
-import { ContextProviderController } from '../../core/context/context_provider_controller.js';
-import { ACCORDION_MODE, ACCORDION_CONTEXTS, ACCORDION_EVENTS } from './accordion_constants.js';
+import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
+import { ACCORDION_MODE, ACCORDION_EVENTS, ACCORDION_CSS_CLASSES, ACCORDION_ANIMATION_DURATION } from './accordion_constants.js';
+import { createRef, ref } from 'lit/directives/ref';
 
 let HAccordionGroup = class HAccordionGroup extends PhoenixLightLitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.opened = false;
         this._isDisabled = false;
-        this._regionId = typeof self.crypto.randomUUID === 'function' ? self.crypto.randomUUID() : (Math.random() + 1).toString(36).substring(3);
-        this._controlsId = typeof self.crypto.randomUUID === 'function' ? self.crypto.randomUUID() : (Math.random() + 1).toString(36).substring(3);
         this._mode = ACCORDION_MODE.multi;
-        this._accordionToggle = () => {
-            this.toggle();
+        this._$parentAccordion = null;
+        this._detailsRef = createRef();
+        this._togglerId = v4();
+        this._syncWithParentAccordion = () => {
+            if (!this._$parentAccordion)
+                return;
+            this._mode = this._$parentAccordion.mode;
+            const shouldBeDisabled = this._$parentAccordion.disabled;
+            const hasDisabledStateChanged = shouldBeDisabled !== this._isDisabled;
+            if (hasDisabledStateChanged) {
+                shouldBeDisabled ? this.disable() : this.enable();
+            }
+        };
+        this._hideOtherDetailsGroups = () => {
+            var _a;
+            if (this._isDisabled)
+                return;
+            (_a = this._$parentAccordion) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h-accordion-group').forEach(($accordionGroup) => {
+                if ($accordionGroup === this)
+                    return;
+                $accordionGroup.hide();
+            });
+        };
+        this._summaryClickHandler = (ev) => {
+            ev.preventDefault();
+            if (!this._isDisabled)
+                this.toggle();
         };
-        this._accordionGroupPropsSubject = new BehaviorSubject(this._getProps());
-        this._accordionGroupContext = new ContextProviderController(this);
-        this._accordionGroupContext.provide(ACCORDION_CONTEXTS.accordionGroupProps, this._accordionGroupPropsSubject);
-        this.setAttribute('role', 'none');
     }
     connectedCallback() {
+        var _a;
         super.connectedCallback();
-        this._accordionContextConsumer = new ContextConsumerController(this);
-        this._subscribeObserver();
-        this.addEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
+        this._$parentAccordion = this.closest('h-accordion');
+        (_a = this._$parentAccordion) === null || _a === void 0 ? void 0 : _a.addEventListener(ACCORDION_EVENTS.update, this._syncWithParentAccordion);
+        this._syncWithParentAccordion();
     }
-    async _subscribeObserver() {
-        this._accordionProps = await this._accordionContextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionProps);
-        this._accordionPropsObserver = new Observer((accordionProps) => {
-            this._mode = accordionProps.mode;
-            const hasAccordionBeenDisabled = accordionProps.disabled;
-            if (hasAccordionBeenDisabled) {
-                this.disable();
-                return;
-            }
-            const hasAccordionBeenEnabled = accordionProps.disabled === false;
-            if (hasAccordionBeenEnabled) {
-                this.enable();
-                return;
-            }
-        });
-        this._accordionProps.subscribe(this._accordionPropsObserver);
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        if (this.opened)
+            this.show();
     }
     disconnectedCallback() {
-        this._accordionProps.unsubscribe(this._accordionPropsObserver);
-        this.removeEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
+        var _a;
+        super.disconnectedCallback();
+        (_a = this._$parentAccordion) === null || _a === void 0 ? void 0 : _a.removeEventListener(ACCORDION_EVENTS.update, this._syncWithParentAccordion);
+    }
+    _handleSingleModeConstraint() {
+        if (this._mode === ACCORDION_MODE.single) {
+            this._hideOtherDetailsGroups();
+        }
+    }
+    toggle() {
+        this._handleSingleModeConstraint();
+        const $details = this._detailsRef.value;
+        if (!$details)
+            return;
+        const isOpen = $details.hasAttribute('open');
+        isOpen ? this.hide() : this.show();
     }
     show() {
-        if (this._mode === ACCORDION_MODE.single)
-            this._closeOtherAccordionGroups();
-        this.opened = true;
+        this._handleSingleModeConstraint();
+        const $details = this._detailsRef.value;
+        if (!$details)
+            return;
+        $details.setAttribute('open', '');
+        requestAnimationFrame(() => {
+            $details.classList.add(ACCORDION_CSS_CLASSES.open);
+        });
+        this._dispatchToggleEvent($details, true);
     }
     hide() {
-        this.opened = false;
+        const $details = this._detailsRef.value;
+        if (!$details)
+            return;
+        $details.classList.remove(ACCORDION_CSS_CLASSES.open);
+        setTimeout(() => {
+            $details.removeAttribute('open');
+        }, ACCORDION_ANIMATION_DURATION);
+        this._dispatchToggleEvent($details, false);
     }
-    toggle() {
-        if (this._mode === ACCORDION_MODE.single)
-            this._closeOtherAccordionGroups();
-        this.opened = !this.opened;
+    _dispatchToggleEvent($details, open) {
+        this.emitCustomEvent(ACCORDION_EVENTS.toggle, {
+            detail: { open, target: $details }
+        });
     }
     enable() {
-        if (this._isDisabled) {
-            this.addEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
-            this.hide();
-            this._isDisabled = false;
-        }
+        if (!this._isDisabled)
+            return;
+        this._isDisabled = false;
+        this.hide();
     }
     disable() {
-        if (!this._isDisabled) {
-            this.removeEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
-            this.show();
-            this._isDisabled = true;
-        }
-    }
-    _closeOtherAccordionGroups() {
-        if (!this._isDisabled) {
-            const $accordion = this.closest('h-accordion');
-            const $accordionGroups = [...$accordion.querySelectorAll('h-accordion-group')];
-            const $otherAccordionGroupsWithinAccordion = $accordionGroups.filter(($accordionGroup) => $accordionGroup !== this);
-            $otherAccordionGroupsWithinAccordion.forEach(($accordionGroup) => $accordionGroup.hide());
-        }
-    }
-    notify() {
-        this._accordionGroupPropsSubject.notify(this._getProps());
-    }
-    updated(_changedProperties) {
-        if (_changedProperties.has('opened') ||
-            _changedProperties.has('_isDisabled') ||
-            _changedProperties.has('_regionId') ||
-            _changedProperties.has('_controlsId')) {
-            this.notify();
-        }
+        if (this._isDisabled)
+            return;
+        this._isDisabled = true;
+        this.show();
     }
-    _getProps() {
-        return {
-            opened: this.opened,
-            disabled: this._isDisabled,
-            regionId: this._regionId,
-            controlsId: this._controlsId
-        };
+    notify() { }
+    render() {
+        return html `
+            <details
+                ${ref(this._detailsRef)}
+                class="accordion__details ${this._isDisabled ? 'accordion__details_disabled' : ''}"
+                aria-disabled="${this._isDisabled ? 'true' : 'false'}"
+                aria-labelledby="${this._togglerId}"
+            >
+                <summary
+                    class="accordion__summary"
+                    id="${this._togglerId}"
+                    @click=${this._summaryClickHandler}
+                >
+                    ${this.getSlot('toggler')}
+                </summary>
+
+                ${this.getSlot('content')}
+            </details>
+        `;
     }
 };
 __decorate([
@@ -114,21 +140,12 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], HAccordionGroup.prototype, "_isDisabled", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HAccordionGroup.prototype, "_regionId", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HAccordionGroup.prototype, "_controlsId", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)
 ], HAccordionGroup.prototype, "_mode", void 0);
 HAccordionGroup = __decorate([
-    phoenixCustomElement('h-accordion-group'),
-    __metadata("design:paramtypes", [])
+    phoenixCustomElement('h-accordion-group')
 ], HAccordionGroup);
 
 export { HAccordionGroup };

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

package/build/esm/packages/phoenix/src/components/accordion/accordion_toggler.d.ts

@@ -1,12 +1,4 @@
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HAccordionToggler extends PhoenixLightLitElement {
-    private _contextConsumer;
-    private _accordionGroupProps;
-    private _accordionGroupPropsObserver;
     constructor();
-    connectedCallback(): Promise<void>;
-    private _setAttributes;
-    private _emitTogglerClickedWithKeyboard;
-    private _emitTogglerClicked;
-    disconnectedCallback(): void;
 }

package/build/esm/packages/phoenix/src/components/accordion/accordion_toggler.js

@@ -1,51 +1,11 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { Observer } from '../../core/classes/observer/observer.js';
-import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
-import { ACCORDION_EVENTS, ACCORDION_CONTEXTS } from './accordion_constants.js';
 
 let HAccordionToggler = class HAccordionToggler extends PhoenixLightLitElement {
     constructor() {
         super();
-        this._emitTogglerClickedWithKeyboard = (ev) => {
-            if (ev.key !== ' ' && ev.key !== 'Enter')
-                return;
-            if (this.getAttribute('aria-disabled') === 'true')
-                return;
-            this._emitTogglerClicked();
-        };
-        this._emitTogglerClicked = () => {
-            this.emitCustomEvent(ACCORDION_EVENTS.toggle);
-        };
-        this._contextConsumer = new ContextConsumerController(this);
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
-        this._accordionGroupPropsObserver = new Observer((accordionProps) => this._setAttributes(accordionProps));
-        this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
-        this.addEventListener('click', this._emitTogglerClicked);
-        this.addEventListener('keydown', this._emitTogglerClickedWithKeyboard);
-    }
-    _setAttributes({ regionId, opened, controlsId, disabled }) {
-        this.setAttribute('id', regionId);
-        this.setAttribute('aria-expanded', opened ? 'true' : 'false');
-        this.setAttribute('aria-controls', controlsId);
-        this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
-        if (disabled) {
-            this.removeAttribute('role');
-            this.setAttribute('tabindex', '-1');
-        }
-        else {
-            this.setAttribute('role', 'button');
-            this.setAttribute('tabindex', '0');
-        }
-    }
-    disconnectedCallback() {
-        if (this._accordionGroupProps) {
-            this._accordionGroupProps.unsubscribe(this._accordionGroupPropsObserver);
-        }
+        this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
     }
 };
 HAccordionToggler = __decorate([

package/build/esm/packages/phoenix/src/components/accordion/accordion_toggler.js.map

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

package/build/esm/packages/phoenix/src/components/accordion/accordion_types.d.ts

@@ -15,16 +15,6 @@ export interface IAccordionGroup {
     toggle(): void;
 }
 export declare type TAccordionMode = Any.Keys<typeof ACCORDION_MODE>;
-export declare type TAccordionProps = {
-    disabled: boolean;
-    mode: TAccordionMode;
-};
-export declare type TAccordionGroupProps = {
-    opened: boolean;
-    disabled: boolean;
-    regionId: string;
-    controlsId: string;
-};
 declare global {
     interface HTMLElementTagNameMap {
         'h-accordion': HAccordion;

package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts

@@ -6,6 +6,7 @@ export declare class SelectOption {
     inactive: boolean;
     hidden: boolean;
     content: string;
+    isPlaceholder: boolean;
     private constructor();
     static create(options: TSelectOptionConstructorOptions): SelectOption;
 }

package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js

@@ -1,11 +1,12 @@
 class SelectOption {
-    constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
+    constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
         this.value = value;
         this.selected = selected;
         this.hidden = hidden;
         this.disabled = disabled;
         this.content = content;
         this.inactive = inactive;
+        this.isPlaceholder = isPlaceholder;
     }
     static create(options) {
         return new SelectOption(options);

package/build/esm/packages/phoenix/src/components/form/select/model/select_option.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;"}
+{"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/form/select/model/select_option_mapper.js

@@ -6,7 +6,7 @@ class SelectOptionMapper {
         const $optionContent = $option.querySelector(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
         const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
         const value = $option.getAttribute('value');
-        if (!value)
+        if (value === null || value === undefined)
             throw new Error('h-option must contain a unique value');
         if (!optionContentText)
             throw new Error('h-options must contains a h-option-content element inside');
@@ -16,7 +16,8 @@ class SelectOptionMapper {
             hidden: $option.hasAttribute('hidden'),
             inactive: $option.hasAttribute('inactive'),
             content: optionContentText,
-            selected: $option.hasAttribute('selected')
+            selected: $option.hasAttribute('selected'),
+            isPlaceholder: $option.hasAttribute('placeholder')
         });
     }
 }

package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.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;"}

package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.d.ts

@@ -5,5 +5,6 @@ export declare type TSelectOption = {
     disabled?: boolean;
     hidden?: boolean;
     inactive?: boolean;
+    isPlaceholder?: boolean;
 };
 export declare type TSelectOptionConstructorOptions = TSelectOption;

package/build/esm/packages/phoenix/src/components/form/select/select.d.ts

@@ -23,6 +23,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     optionsList?: TSelectOption[];
     noDeselect: boolean;
     assistiveTitleId: string;
+    isDevSelectPlaceholderFlagEnabled: boolean;
     translations: Record<string, string>;
     private _selectOptionsId;
     get selectedIndex(): number;
@@ -53,6 +54,10 @@ export declare class HSelect extends PhoenixLightLitElement {
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     private _updateOptions;
     private _getOptions;
+    private _addPlaceholderOptionIfNeeded;
+    private get _canAddPlaceholder();
+    private _createPlaceholderOption;
+    private _injectOptionIntoDOM;
     private _setupEvents;
     private _handleOptionDeselect;
     private _updateOptionsView;