@shoper/phoenix_design_system 1.18.4 → 1.18.6

package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js

@@ -42,6 +42,25 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
         this._selectedOptionsObserver = new observer.Observer(this._handleSelectedOptionChanged);
         this.selectedOptions$.subscribe(this._selectedOptionsObserver);
     }
+    _getParsedOptionContent(option) {
+        const contentLines = (option.content || '')
+            .split('\n')
+            .map((line) => line.trim())
+            .filter((line) => line.length > 0);
+        return {
+            name: contentLines[0] || '',
+            addon: contentLines.slice(1).join(' ')
+        };
+    }
+    _renderTogglerContent(option) {
+        const { name, addon } = this._getParsedOptionContent(option);
+        return litHtml.html `
+            <div class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerLayout}>
+                <span class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerName}>${name}</span>
+                ${addon ? litHtml.html `<span class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerAddon}>${addon}</span>` : litHtml.nothing}
+            </div>
+        `;
+    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
@@ -53,18 +72,21 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
         return litHtml.html `
             ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
             var _a;
-            if (!selectOptions.length)
+            if (!selectOptions.length) {
                 return litHtml.html `${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : litHtml.html `<span class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>Select</span>`}`;
+            }
             return litHtml.html ` <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
                     ${this.isMultiselect
-                ? selectOptions.map((option) => litHtml.html ` <li>
+                ? selectOptions.map((option) => {
+                    const content = this._renderTogglerContent(option);
+                    return litHtml.html ` <li>
                                   <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
-                                      ${option.content}
-
+                                      ${content}
                                       <h-tag-remove-button></h-tag-remove-button>
                                   </h-tag>
-                              </li>`)
-                : litHtml.html ` <li>${selectOptions[0].content}</li>`}
+                              </li>`;
+                })
+                : litHtml.html `<li>${this._renderTogglerContent(selectOptions[0])}</li>`}
                 </ul>`;
         })}
 

package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map

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

package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js

@@ -7,7 +7,10 @@ const SELECT_TOGGLER_CSS_CLASSES = {
     selectToggler: baseClass,
     selectTogglerSelected: `${baseClass}_selected`,
     selectTogglerValues: `${baseClass}__values`,
-    selectTogglerPlaceholder: `${baseClass}__placeholder`
+    selectTogglerPlaceholder: `${baseClass}__placeholder`,
+    selectTogglerLayout: `${baseClass}__layout`,
+    selectTogglerName: `${baseClass}__name`,
+    selectTogglerAddon: `${baseClass}__addon`
 };
 
 exports.SELECT_TOGGLER_CSS_CLASSES = SELECT_TOGGLER_CSS_CLASSES;

package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js.map

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

package/build/cjs/packages/phoenix/src/components/scroller/scroller-pause.js

@@ -17,7 +17,7 @@ exports.HScrollerPause = class HScrollerPause extends phoenix_light_lit_element.
             }));
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'pause';
-        this.className = `${scroller_constants.SCROLLER_CLASS_NAME.scrollerControlsPause} ${this.className}`;
+        this.className = `${scroller_constants.SCROLLER_CLASS_NAME.scrollerControls} ${scroller_constants.SCROLLER_CLASS_NAME.scrollerControlsPause} ${this.className}`;
         this._btnController = new btn_controller.BtnController(this, this._dispatchScrollerEvent);
     }
     connectedCallback() {

package/build/cjs/packages/phoenix/src/components/scroller/scroller-play.js

@@ -17,7 +17,7 @@ exports.HScrollerPlay = class HScrollerPlay extends phoenix_light_lit_element.Ph
             }));
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'play';
-        this.className = `${scroller_constants.SCROLLER_CLASS_NAME.scrollerControlsPlay} ${this.className}`;
+        this.className = `${scroller_constants.SCROLLER_CLASS_NAME.scrollerControls} ${scroller_constants.SCROLLER_CLASS_NAME.scrollerControlsPlay}  ${this.className}`;
         this._btnController = new btn_controller.BtnController(this, this._dispatchScrollerEvent);
     }
     connectedCallback() {

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

@@ -52,6 +52,8 @@ exports.HScroller = class HScroller extends phoenix_light_lit_element.PhoenixLig
         }
         this.addEventListener(scroller_constants.SCROLLER_EVENTS.pause, () => this.pause());
         this.addEventListener(scroller_constants.SCROLLER_EVENTS.play, () => this.play());
+    }
+    firstUpdated() {
         this._handlePausePlayState();
     }
     updated(changedProperties) {

package/build/cjs/packages/phoenix/src/components/scroller/scroller.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,yBAAyB,gEAAoE;AAC7F,4CAA4C,4GAAgH;AAC5J;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA,yBAAyB,gEAAoE;AAC7F,4CAA4C,4GAAgH;AAC5J;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/scroller/scroller_constants.js

@@ -12,6 +12,7 @@ const SCROLLER_CONTROLS_NAMES = {
     scrollerControlsPause: 'h-scroller-pause'
 };
 const SCROLLER_CLASS_NAME = {
+    scrollerControls: 'scroller__controls',
     scrollerControlsPlay: 'scroller__controls_play',
     scrollerControlsPause: 'scroller__controls_pause'
 };

package/build/cjs/packages/phoenix/src/components/scroller/scroller_constants.js.map

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

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

@@ -10,17 +10,21 @@ var _VisibilityController_host;
 class VisibilityController {
     constructor(host) {
         _VisibilityController_host.set(this, void 0);
-        this._handleResize = debounce['default'](this._setVisibilityValue, 100);
+        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();
+        const isVisibleBasedOnCssStyle = this._isVisibleBasedOnCssStyle();
+        this.initialVisibilityState = isVisibleBasedOnCssStyle;
+        const isVisible = isVisibleBasedOnCssStyle && !tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden');
+        isVisible ? this.show() : this.hide();
         tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").addEventListener('resize', this._handleResize);
     }
     _setVisibilityValue() {
-        const isVisible = this._isVisibleBasedOnCssStyle() && !tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").getAttribute('hidden');
+        const isVisible = this._isVisibleBasedOnCssStyle() && !tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden');
         isVisible ? this.show() : this.hide();
     }
     _isVisibleBasedOnCssStyle() {
@@ -29,10 +33,16 @@ class VisibilityController {
     }
     hide() {
         this.isVisible = false;
+        if (tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden')) {
+            return;
+        }
         tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").setAttribute('hidden', '');
     }
     show() {
         this.isVisible = true;
+        if (!tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden')) {
+            return;
+        }
         tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").removeAttribute('hidden');
     }
     hostDisconnected() {

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,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;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -11,6 +11,8 @@ export declare class HSelectToggler extends PhoenixLightLitElement {
     private _subscribeObserver;
     private _handleSelectedOptionChanged;
     private _dispatchOptionDeselect;
+    private _getParsedOptionContent;
+    private _renderTogglerContent;
     disconnectedCallback(): void;
     render(): TemplateResult | undefined;
 }

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

@@ -4,7 +4,7 @@ import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_el
 import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
 import { SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
 import { Observer } from '../../../../../core/classes/observer/observer.js';
-import { html } from 'lit-html';
+import { html, nothing } from 'lit-html';
 import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
 import { SELECT_EVENT_NAMES, SELECT_SLOT_NAMES, SELECT_CONTEXTS } from '../../select_constants.js';
 import { observe } from '../../../../../directives/observable_directive.js';
@@ -38,6 +38,25 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
         this._selectedOptionsObserver = new Observer(this._handleSelectedOptionChanged);
         this.selectedOptions$.subscribe(this._selectedOptionsObserver);
     }
+    _getParsedOptionContent(option) {
+        const contentLines = (option.content || '')
+            .split('\n')
+            .map((line) => line.trim())
+            .filter((line) => line.length > 0);
+        return {
+            name: contentLines[0] || '',
+            addon: contentLines.slice(1).join(' ')
+        };
+    }
+    _renderTogglerContent(option) {
+        const { name, addon } = this._getParsedOptionContent(option);
+        return html `
+            <div class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerLayout}>
+                <span class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerName}>${name}</span>
+                ${addon ? html `<span class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerAddon}>${addon}</span>` : nothing}
+            </div>
+        `;
+    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
@@ -49,18 +68,21 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
         return html `
             ${observe(this.selectedOptions$, (selectOptions) => {
             var _a;
-            if (!selectOptions.length)
+            if (!selectOptions.length) {
                 return html `${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : html `<span class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>Select</span>`}`;
+            }
             return html ` <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
                     ${this.isMultiselect
-                ? selectOptions.map((option) => html ` <li>
+                ? selectOptions.map((option) => {
+                    const content = this._renderTogglerContent(option);
+                    return html ` <li>
                                   <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
-                                      ${option.content}
-
+                                      ${content}
                                       <h-tag-remove-button></h-tag-remove-button>
                                   </h-tag>
-                              </li>`)
-                : html ` <li>${selectOptions[0].content}</li>`}
+                              </li>`;
+                })
+                : html `<li>${this._renderTogglerContent(selectOptions[0])}</li>`}
                 </ul>`;
         })}
 

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/toggler/select_toggler_constants.d.ts

@@ -3,4 +3,7 @@ export declare const SELECT_TOGGLER_CSS_CLASSES: {
     readonly selectTogglerSelected: "select-toggler_selected";
     readonly selectTogglerValues: "select-toggler__values";
     readonly selectTogglerPlaceholder: "select-toggler__placeholder";
+    readonly selectTogglerLayout: "select-toggler__layout";
+    readonly selectTogglerName: "select-toggler__name";
+    readonly selectTogglerAddon: "select-toggler__addon";
 };

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

@@ -3,7 +3,10 @@ const SELECT_TOGGLER_CSS_CLASSES = {
     selectToggler: baseClass,
     selectTogglerSelected: `${baseClass}_selected`,
     selectTogglerValues: `${baseClass}__values`,
-    selectTogglerPlaceholder: `${baseClass}__placeholder`
+    selectTogglerPlaceholder: `${baseClass}__placeholder`,
+    selectTogglerLayout: `${baseClass}__layout`,
+    selectTogglerName: `${baseClass}__name`,
+    selectTogglerAddon: `${baseClass}__addon`
 };
 
 export { SELECT_TOGGLER_CSS_CLASSES };

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

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

package/build/esm/packages/phoenix/src/components/scroller/scroller-pause.js

@@ -13,7 +13,7 @@ let HScrollerPause = class HScrollerPause extends PhoenixLightLitElement {
             }));
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'pause';
-        this.className = `${SCROLLER_CLASS_NAME.scrollerControlsPause} ${this.className}`;
+        this.className = `${SCROLLER_CLASS_NAME.scrollerControls} ${SCROLLER_CLASS_NAME.scrollerControlsPause} ${this.className}`;
         this._btnController = new BtnController(this, this._dispatchScrollerEvent);
     }
     connectedCallback() {

package/build/esm/packages/phoenix/src/components/scroller/scroller-play.js

@@ -13,7 +13,7 @@ let HScrollerPlay = class HScrollerPlay extends PhoenixLightLitElement {
             }));
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'play';
-        this.className = `${SCROLLER_CLASS_NAME.scrollerControlsPlay} ${this.className}`;
+        this.className = `${SCROLLER_CLASS_NAME.scrollerControls} ${SCROLLER_CLASS_NAME.scrollerControlsPlay}  ${this.className}`;
         this._btnController = new BtnController(this, this._dispatchScrollerEvent);
     }
     connectedCallback() {

package/build/esm/packages/phoenix/src/components/scroller/scroller.d.ts

@@ -9,6 +9,7 @@ export declare class HScroller extends PhoenixLightLitElement {
     private _settings;
     private _scroller;
     connectedCallback(): void;
+    firstUpdated(): void;
     protected updated(changedProperties: Map<string, any>): void;
     pause(): void;
     play(): void;

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

@@ -48,6 +48,8 @@ let HScroller = class HScroller extends PhoenixLightLitElement {
         }
         this.addEventListener(SCROLLER_EVENTS.pause, () => this.pause());
         this.addEventListener(SCROLLER_EVENTS.play, () => this.play());
+    }
+    firstUpdated() {
         this._handlePausePlayState();
     }
     updated(changedProperties) {

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F,2BAA2B,4GAAgH;AAC3I;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,gEAAoE;AAC3F,2BAA2B,4GAAgH;AAC3I;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/scroller/scroller_constants.d.ts

@@ -8,6 +8,7 @@ export declare const SCROLLER_CONTROLS_NAMES: {
     readonly scrollerControlsPause: "h-scroller-pause";
 };
 export declare const SCROLLER_CLASS_NAME: {
+    readonly scrollerControls: "scroller__controls";
     readonly scrollerControlsPlay: "scroller__controls_play";
     readonly scrollerControlsPause: "scroller__controls_pause";
 };

package/build/esm/packages/phoenix/src/components/scroller/scroller_constants.js

@@ -8,6 +8,7 @@ const SCROLLER_CONTROLS_NAMES = {
     scrollerControlsPause: 'h-scroller-pause'
 };
 const SCROLLER_CLASS_NAME = {
+    scrollerControls: 'scroller__controls',
     scrollerControlsPlay: 'scroller__controls_play',
     scrollerControlsPause: 'scroller__controls_pause'
 };

package/build/esm/packages/phoenix/src/components/scroller/scroller_constants.js.map

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

@@ -6,17 +6,21 @@ var _VisibilityController_host;
 class VisibilityController {
     constructor(host) {
         _VisibilityController_host.set(this, void 0);
-        this._handleResize = debounce_1(this._setVisibilityValue, 100);
+        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();
+        const isVisibleBasedOnCssStyle = this._isVisibleBasedOnCssStyle();
+        this.initialVisibilityState = isVisibleBasedOnCssStyle;
+        const isVisible = isVisibleBasedOnCssStyle && !__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden');
+        isVisible ? this.show() : this.hide();
         __classPrivateFieldGet(this, _VisibilityController_host, "f").addEventListener('resize', this._handleResize);
     }
     _setVisibilityValue() {
-        const isVisible = this._isVisibleBasedOnCssStyle() && !__classPrivateFieldGet(this, _VisibilityController_host, "f").getAttribute('hidden');
+        const isVisible = this._isVisibleBasedOnCssStyle() && !__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden');
         isVisible ? this.show() : this.hide();
     }
     _isVisibleBasedOnCssStyle() {
@@ -25,10 +29,16 @@ class VisibilityController {
     }
     hide() {
         this.isVisible = false;
+        if (__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden')) {
+            return;
+        }
         __classPrivateFieldGet(this, _VisibilityController_host, "f").setAttribute('hidden', '');
     }
     show() {
         this.isVisible = true;
+        if (!__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden')) {
+            return;
+        }
         __classPrivateFieldGet(this, _VisibilityController_host, "f").removeAttribute('hidden');
     }
     hostDisconnected() {

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,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;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/package.json

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