@shoper/phoenix_design_system 1.18.8-1 → 1.18.8-11

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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/details/details.d.ts

@@ -0,0 +1,8 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import './details_types';
+import type { TAccordionMode } from "../accordion/accordion_types";
+export declare class HDetails extends PhoenixLightLitElement {
+    disabled: boolean;
+    mode: TAccordionMode;
+    updated(): void;
+}

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

@@ -0,0 +1,31 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+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 { ACCORDION_MODE } from '../accordion/accordion_constants.js';
+import { DETAILS_EVENTS } from './details_constants.js';
+
+let HDetails = class HDetails extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.mode = ACCORDION_MODE.multi;
+    }
+    updated() {
+        this.dispatchEvent(new Event(DETAILS_EVENTS.update));
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], HDetails.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HDetails.prototype, "mode", void 0);
+HDetails = __decorate([
+    phoenixCustomElement('h-details')
+], HDetails);
+
+export { HDetails };
+//# sourceMappingURL=details.js.map

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

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

package/build/esm/packages/phoenix/src/components/details/details_constants.d.ts

@@ -0,0 +1,11 @@
+export declare const DETAILS_EVENTS: {
+    readonly toggle: "toggle";
+    readonly update: "update";
+};
+export declare const DETAILS_CSS_CLASSES: {
+    readonly smoothDetails: "smooth-details";
+    readonly isOpen: "is-open";
+    readonly contentWrapper: "content-wrapper";
+    readonly content: "content";
+};
+export declare const DETAILS_TRANSITION_DURATION = 400;

package/build/esm/packages/phoenix/src/components/details/details_constants.js

@@ -0,0 +1,14 @@
+const DETAILS_EVENTS = {
+    toggle: 'toggle',
+    update: 'update'
+};
+const DETAILS_CSS_CLASSES = {
+    smoothDetails: 'smooth-details',
+    isOpen: 'is-open',
+    contentWrapper: 'content-wrapper',
+    content: 'content'
+};
+const DETAILS_TRANSITION_DURATION = 400;
+
+export { DETAILS_CSS_CLASSES, DETAILS_EVENTS, DETAILS_TRANSITION_DURATION };
+//# sourceMappingURL=details_constants.js.map

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

package/build/esm/packages/phoenix/src/components/details/details_content.d.ts

@@ -0,0 +1,6 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import './details_types';
+export declare class HDetailsContent extends PhoenixLightLitElement {
+    constructor();
+    connectedCallback(): void;
+}

package/build/esm/packages/phoenix/src/components/details/details_content.js

@@ -0,0 +1,21 @@
+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';
+
+let HDetailsContent = class HDetailsContent extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'content';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add('content-wrapper');
+    }
+};
+HDetailsContent = __decorate([
+    phoenixCustomElement('h-details-content'),
+    __metadata("design:paramtypes", [])
+], HDetailsContent);
+
+export { HDetailsContent };
+//# sourceMappingURL=details_content.js.map

package/build/esm/packages/phoenix/src/components/details/details_content.js.map

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

package/build/esm/packages/phoenix/src/components/details/details_group.d.ts

@@ -0,0 +1,23 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import './details_types';
+import { PropertyValues } from 'lit';
+export declare class HDetailsGroup extends PhoenixLightLitElement {
+    opened: boolean;
+    private _isDisabled;
+    private _mode;
+    private _$detailsWrapper;
+    private _togglerId;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues): void;
+    disconnectedCallback(): void;
+    private _syncWithDetailsWrapper;
+    toggle(details?: HTMLElement): void;
+    show(details?: HTMLElement): void;
+    hide(details?: HTMLElement): void;
+    private _hideOtherDetailsGroups;
+    private _dispatchToggleEvent;
+    enable(): void;
+    disable(): void;
+    private _summaryClickHandler;
+    protected render(): unknown;
+}

package/build/esm/packages/phoenix/src/components/details/details_group.js

@@ -0,0 +1,152 @@
+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 v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
+import { ACCORDION_MODE } from '../accordion/accordion_constants.js';
+import { DETAILS_EVENTS, DETAILS_CSS_CLASSES, DETAILS_TRANSITION_DURATION } from './details_constants.js';
+
+let HDetailsGroup = class HDetailsGroup extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+        this._isDisabled = false;
+        this._mode = ACCORDION_MODE.multi;
+        this._$detailsWrapper = null;
+        this._togglerId = v4();
+        this._syncWithDetailsWrapper = () => {
+            if (!this._$detailsWrapper)
+                return;
+            this._mode = this._$detailsWrapper.mode;
+            if (this._$detailsWrapper.disabled && !this._isDisabled) {
+                this.disable();
+                this.show();
+            }
+            else if (!this._$detailsWrapper.disabled && this._isDisabled) {
+                this.enable();
+                this.hide();
+            }
+        };
+        this._hideOtherDetailsGroups = () => {
+            var _a;
+            if (this._isDisabled)
+                return;
+            (_a = this._$detailsWrapper) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h-details-group').forEach(($detailsGroup) => {
+                if ($detailsGroup === this)
+                    return;
+                $detailsGroup.hide();
+            });
+        };
+        this._summaryClickHandler = (ev) => {
+            ev.preventDefault();
+            if (this._isDisabled)
+                return;
+            const $summary = ev.currentTarget;
+            const $details = $summary.parentNode;
+            this.toggle($details);
+        };
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this._$detailsWrapper = this.closest('h-details');
+        (_a = this._$detailsWrapper) === null || _a === void 0 ? void 0 : _a.addEventListener(DETAILS_EVENTS.update, this._syncWithDetailsWrapper);
+        this._syncWithDetailsWrapper();
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        if (this.opened) {
+            this.show();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this._$detailsWrapper) === null || _a === void 0 ? void 0 : _a.removeEventListener(DETAILS_EVENTS.update, this._syncWithDetailsWrapper);
+    }
+    toggle(details) {
+        if (this._mode === ACCORDION_MODE.single)
+            this._hideOtherDetailsGroups();
+        const $details = details || this.querySelector('details');
+        if (!$details)
+            return;
+        const isOpen = $details.hasAttribute('open');
+        isOpen ? this.hide($details) : this.show($details);
+    }
+    show(details) {
+        if (this._mode === ACCORDION_MODE.single)
+            this._hideOtherDetailsGroups();
+        const $details = details || this.querySelector('details');
+        if (!$details)
+            return;
+        $details.setAttribute('open', '');
+        requestAnimationFrame(() => {
+            $details.classList.add(DETAILS_CSS_CLASSES.isOpen);
+        });
+        this._dispatchToggleEvent($details, true);
+    }
+    hide(details) {
+        const $details = details || this.querySelector('details');
+        if (!$details)
+            return;
+        $details.classList.remove(DETAILS_CSS_CLASSES.isOpen);
+        setTimeout(() => {
+            $details.removeAttribute('open');
+        }, DETAILS_TRANSITION_DURATION);
+        this._dispatchToggleEvent($details, false);
+    }
+    _dispatchToggleEvent(details, open) {
+        this.emitCustomEvent(DETAILS_EVENTS.toggle, {
+            detail: { open, target: details }
+        });
+    }
+    enable() {
+        if (this._isDisabled) {
+            this.hide();
+            this._isDisabled = false;
+        }
+    }
+    disable() {
+        if (!this._isDisabled) {
+            this.show();
+            this._isDisabled = true;
+        }
+    }
+    render() {
+        return html `
+            <details
+                class="smooth-details"
+                aria-disabled="${this._isDisabled ? 'true' : 'false'}"
+                aria-labelledby="${this._togglerId}"
+            >
+                <summary
+                    id="${this._togglerId}"
+                    @click=${this._summaryClickHandler}
+                >
+                    ${this.getSlot('toggler')}
+                </summary>
+
+                ${this.getSlot('content')}
+            </details>
+        `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], HDetailsGroup.prototype, "opened", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HDetailsGroup.prototype, "_isDisabled", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HDetailsGroup.prototype, "_mode", void 0);
+HDetailsGroup = __decorate([
+    phoenixCustomElement('h-details-group')
+], HDetailsGroup);
+
+export { HDetailsGroup };
+//# sourceMappingURL=details_group.js.map

package/build/esm/packages/phoenix/src/components/details/details_group.js.map

@@ -0,0 +1 @@
+{"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/details/details_toggler.d.ts

@@ -0,0 +1,5 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import './details_types';
+export declare class HDetailsToggler extends PhoenixLightLitElement {
+    constructor();
+}

package/build/esm/packages/phoenix/src/components/details/details_toggler.js

@@ -0,0 +1,17 @@
+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';
+
+let HDetailsToggler = class HDetailsToggler extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
+    }
+};
+HDetailsToggler = __decorate([
+    phoenixCustomElement('h-details-toggler'),
+    __metadata("design:paramtypes", [])
+], HDetailsToggler);
+
+export { HDetailsToggler };
+//# sourceMappingURL=details_toggler.js.map

package/build/esm/packages/phoenix/src/components/details/details_toggler.js.map

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

package/build/esm/packages/phoenix/src/components/details/details_types.d.ts

@@ -0,0 +1,12 @@
+import type { HDetailsGroup } from './details_group';
+import type { HDetailsContent } from './details_content';
+import type { HDetailsToggler } from './details_toggler';
+import type { HDetails } from './details';
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-details': HDetails;
+        'h-details-group': HDetailsGroup;
+        'h-details-toggler': HDetailsToggler;
+        'h-details-content': HDetailsContent;
+    }
+}

package/build/esm/packages/phoenix/src/components/details/details_types.js

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

package/build/esm/packages/phoenix/src/components/details/details_types.js.map

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

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

@@ -6,7 +6,6 @@ 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,12 +1,11 @@
 class SelectOption {
-    constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
+    constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = 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;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;"}

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 === null || value === undefined)
+        if (!value)
             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,8 +16,7 @@ class SelectOptionMapper {
             hidden: $option.hasAttribute('hidden'),
             inactive: $option.hasAttribute('inactive'),
             content: optionContentText,
-            selected: $option.hasAttribute('selected'),
-            isPlaceholder: $option.hasAttribute('placeholder')
+            selected: $option.hasAttribute('selected')
         });
     }
 }

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;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;"}

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

@@ -5,6 +5,5 @@ 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,7 +23,6 @@ export declare class HSelect extends PhoenixLightLitElement {
     optionsList?: TSelectOption[];
     noDeselect: boolean;
     assistiveTitleId: string;
-    isDevSelectPlaceholderFlagEnabled: boolean;
     translations: Record<string, string>;
     private _selectOptionsId;
     get selectedIndex(): number;
@@ -54,10 +53,6 @@ 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;

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

@@ -39,7 +39,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.type = SELECT_TYPES.select;
         this.noDeselect = false;
         this.assistiveTitleId = '';
-        this.isDevSelectPlaceholderFlagEnabled = false;
         this.translations = {};
         this._selectOptionsId = v4();
         this._searchValue = '';
@@ -54,7 +53,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             const $options = this._getOptions();
             this._$options = $options.reduce((acc, $option) => {
                 const value = $option.getAttribute('value');
-                if (value === null || value === undefined)
+                if (!value)
                     throw Error('Select option must hava a value');
                 if (acc.has(value))
                     throw Error('Select options must hava a unique values.');
@@ -111,24 +110,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             if (!this.$searchLabel)
                 return;
             (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
-            if (this.isDevSelectPlaceholderFlagEnabled) {
-                const hasValidOptions = options.some((option) => !option.isPlaceholder);
-                if (!hasValidOptions)
-                    return;
-                const valueLabelSpan = document.createElement('span');
-                valueLabelSpan.id = 'value-label';
-                valueLabelSpan.className = 'sr-only';
-                valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
-                this.$searchLabel.appendChild(valueLabelSpan);
-            }
-            else {
-                this.$searchLabel.innerHTML = `
-                ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
-                <span id="value-label" class="sr-only">
-                    ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
-                </span>
-            `;
-            }
+            this.$searchLabel.innerHTML = `
+            ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
+            <span id="value-label" class="sr-only">
+                ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
+            </span>
+        `;
         };
         this._handleOptionClicked = ({ detail }) => {
             if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -226,9 +213,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         }
         if (changedProperties.has('optionsList')) {
             this._updateOptions();
-            if (this.isDevSelectPlaceholderFlagEnabled) {
-                this._addPlaceholderOptionIfNeeded();
-            }
         }
         if (this._$optionsList.value) {
             (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -277,9 +261,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
         this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
         this._updateOptions();
-        if (this.isDevSelectPlaceholderFlagEnabled) {
-            this._addPlaceholderOptionIfNeeded();
-        }
         this._setupEvents();
     }
     attributeChangedCallback(name, _old, value) {
@@ -292,50 +273,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
         }
     }
-    _addPlaceholderOptionIfNeeded() {
-        if (!this._canAddPlaceholder)
-            return;
-        const $placeholderOption = this._createPlaceholderOption();
-        this._injectOptionIntoDOM($placeholderOption);
-        this._updateOptions();
-    }
-    get _canAddPlaceholder() {
-        var _a;
-        if (this.multiple || this.required)
-            return false;
-        const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
-        if (hasSelection)
-            return false;
-        const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
-        return !hasExistingPlaceholder;
-    }
-    _createPlaceholderOption() {
-        const $option = document.createElement('h-option');
-        $option.setAttribute('value', '');
-        $option.setAttribute('selected', 'true');
-        $option.setAttribute('placeholder', 'true');
-        $option.setAttribute('slot', SELECT_SLOT_NAMES.content);
-        const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
-        if (typeof this.$placeholder === 'string') {
-            $content.textContent = this.$placeholder;
-        }
-        else if (this.$placeholder instanceof Node) {
-            Array.from(this.$placeholder.childNodes).forEach(node => {
-                $content.appendChild(node.cloneNode(true));
-            });
-        }
-        $option.appendChild($content);
-        return $option;
-    }
-    _injectOptionIntoDOM($option) {
-        const $firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
-        if ($firstOption) {
-            this.insertBefore($option, $firstOption);
-        }
-        else {
-            this.appendChild($option);
-        }
-    }
     _setupEvents() {
         this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -416,7 +353,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         return fragment;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
         const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
         return html `
@@ -440,7 +377,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     aria-activedescendant
                     role="combobox"
                     aria-controls="${this._selectOptionsId}"
-                    aria-labelledby="${this.assistiveTitleId}"
                 >
                     ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
                 </h-dropdown-toggler>
@@ -453,18 +389,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 >
                     <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
 
-                    <div class=${SELECT_CSS_CLASSES.selectLabel}>
-                        ${this.isDevSelectPlaceholderFlagEnabled ?
-            (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
-            html `${this._getClonedPlaceholderElement()}`}
-                    </div>
+                    <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
 
                     ${isSearchEnabled
             ? html ` <h-select-search
                               class=${SELECT_CSS_CLASSES.selectSearch}
                               ${ref(this.$search)}
                               .value=${this._searchValue}
-                              placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
+                              placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
                               @search=${this._handleSearch}
                           ></h-select-search>`
             : nothing}
@@ -485,7 +417,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     ${this._searchNoResult()
             ? html ` <div>
                               <p class=${SELECT_CSS_CLASSES.selectNoResult}>
-                                  ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
+                                  ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
                                   <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
                               </p>
                           </div>`
@@ -494,11 +426,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             ? html `
                               <section class=${SELECT_CSS_CLASSES.selectFooter}>
                                   <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
-                                      ${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
+                                      ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
                                   </button>
                                   <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
                                       ><span slot=${SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
-                                          >${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
+                                          >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
                                       >
                                   </h-select-close-btn>
                               </section>
@@ -572,10 +504,6 @@ __decorate([
     property({ type: String, attribute: 'assistive-title-id' }),
     __metadata("design:type", String)
 ], HSelect.prototype, "assistiveTitleId", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
-    __metadata("design:type", Boolean)
-], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
 __decorate([
     property({
         converter: {