@shoper/phoenix_design_system 1.17.1 → 1.17.3-0

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

@@ -154,7 +154,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             return;
         this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
             if (index > numberOfVisibleColors - 1) {
-                $colorSwatchesChild.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+                $colorSwatchesChild.setAttribute('hidden', '');
             }
         });
     }
@@ -164,9 +164,9 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             if (!this._$colorSwatchesChildren)
                 return;
             this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
-                $colorSwatchesChild.removeAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+                $colorSwatchesChild.removeAttribute('hidden');
             });
-            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+            (_a = this.querySelector('h-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
         });
     }
     _handleChangeToNextColorItem({ target }) {
@@ -232,10 +232,12 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
     }
     render() {
         return lit.html `
-            ${this.getSlot('default')}
-            ${this._$colors.length > this.numberOfVisibleColors
-            ? lit.html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
+            <h-show-more count="15" selector="h-color-item">
+                ${this.getSlot('default')}
+                ${this._$colors.length > this.numberOfVisibleColors
+            ? lit.html `<h-show-more-button>${this.showMoreBtnText}</h-show-more-button>`
             : lit.nothing}
+            </h-show-more>
         `;
     }
 };

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map

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

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js

@@ -12,11 +12,9 @@ const COLOR_SWATCHES_EVENT_NAMES = {
     change: 'change',
     markDisabledItems: 'markDisabledItems',
     showMore: 'showMore'
-};
-const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
+};
 
 exports.COLOR_ITEM_TAG_NAME = COLOR_ITEM_TAG_NAME;
 exports.COLOR_SWATCHES_CSS_CLASSES = COLOR_SWATCHES_CSS_CLASSES;
 exports.COLOR_SWATCHES_EVENT_NAMES = COLOR_SWATCHES_EVENT_NAMES;
-exports.COLOR_SWATCHES_HIDDEN_ATTRIBUTE = COLOR_SWATCHES_HIDDEN_ATTRIBUTE;
 //# sourceMappingURL=color_swatches_constants.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_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;"}

package/build/cjs/packages/phoenix/src/components/form/radio/radio_control.js

@@ -41,11 +41,12 @@ exports.HRadioControl = class HRadioControl extends phoenix_light_lit_element.Ph
                 ?readonly="${this.readonly}"
                 ?hidden="${this.hidden}"
                 .checked="${this.checked}"
+                aria-label="${ifDefined_js.ifDefined(this.ariaLabel)}"
                 aria-describedby="${ifDefined_js.ifDefined(this.ariaDescribedby)}"
                 @change="${this._handleChangeEvent}"
             />
 
-            <label class="${radio_constants.RADIO_CONTROL_CSS_CLASSES.radioLabel}" for="${ifDefined_js.ifDefined(this.controlId)}"></label>
+            <label class="${radio_constants.RADIO_CONTROL_CSS_CLASSES.radioLabel}" for="${ifDefined_js.ifDefined(this.controlId)}" aria-hidden="true"></label>
         `;
     }
 };
@@ -81,6 +82,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HRadioControl.prototype, "value", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'aria-label' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HRadioControl.prototype, "ariaLabel", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'aria-describedby' }),
     tslib_es6.__metadata("design:type", String)

package/build/cjs/packages/phoenix/src/components/form/radio/radio_control.js.map

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

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var global_constants = require('../../global_constants.js');
+var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
+var throttle = require('../../../../../external/lodash/throttle.js');
+var show_more_constants = require('./show_more_constants.js');
+
+exports.HShowMore = class HShowMore extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._$showMoreButton = null;
+        this._showMore = () => {
+            this._showAllItems();
+            this._hideButton();
+            this._focusNextItem();
+        };
+        this._onResize = throttle['default'](() => {
+            if (window.innerWidth > global_constants.BREAKPOINTS.xs) {
+                this._showAllItems();
+                this._hideButton();
+                window.removeEventListener('resize', this._onResize);
+            }
+        }, relative_position_controller_constants.DEFAULT_THROTTLE_WAIT_TIME);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._$showMoreButton = this.querySelector('h-show-more-button');
+        this._$items = [...this.querySelectorAll(this.selector)];
+        this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASSES.showMore);
+        this._updateComponentVisibility();
+        this._setupListeners();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this._onResize);
+    }
+    _updateComponentVisibility() {
+        const hasOverflowItems = this._$items.length > this.count;
+        const isMobileView = window.innerWidth <= global_constants.BREAKPOINTS.xs;
+        const shouldBeActive = (!this.mobileOnly || isMobileView) && hasOverflowItems;
+        if (shouldBeActive) {
+            this._hideExcessItems();
+        }
+        else {
+            this._hideButton();
+        }
+    }
+    _hideExcessItems() {
+        this._$items.forEach(($item, index) => {
+            $item.removeAttribute('hidden');
+            if (index >= this.count)
+                $item.setAttribute('hidden', '');
+        });
+    }
+    _showAllItems() {
+        this._$items.forEach(($item) => $item.removeAttribute('hidden'));
+    }
+    _hideButton() {
+        var _a;
+        (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
+    }
+    _setupListeners() {
+        this.addEventListener(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore, this._showMore);
+        if (this.mobileOnly && window.innerWidth <= global_constants.BREAKPOINTS.xs) {
+            window.addEventListener('resize', this._onResize);
+        }
+    }
+    _focusNextItem() {
+        const $nextItem = this._$items[this.count];
+        if (!$nextItem)
+            return;
+        if (!$nextItem.getAttribute('tabindex'))
+            $nextItem.setAttribute('tabindex', '-1');
+        $nextItem.focus();
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Number }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HShowMore.prototype, "count", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HShowMore.prototype, "selector", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: 'mobile-only' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HShowMore.prototype, "mobileOnly", void 0);
+exports.HShowMore = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-show-more')
+], exports.HShowMore);
+//# sourceMappingURL=show_more.js.map

package/build/cjs/packages/phoenix/src/components/show-more/show_more.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/show-more/show_more_button.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
+var show_more_constants = require('./show_more_constants.js');
+
+exports.HShowMoreButton = class HShowMoreButton extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = () => {
+            this.emitCustomEvent(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore);
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchClickedEvent);
+        this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASSES.showMoreButton);
+    }
+};
+exports.HShowMoreButton = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-show-more-button'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HShowMoreButton);
+//# sourceMappingURL=show_more_button.js.map

package/build/cjs/packages/phoenix/src/components/show-more/show_more_button.js.map

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

package/build/cjs/packages/phoenix/src/components/show-more/show_more_constants.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SHOW_MORE_CSS_CLASSES = {
+    showMore: 'show-more',
+    showMoreButton: 'show-more__button'
+};
+const SHOW_MORE_EVENT_NAMES = {
+    showMore: 'showMore'
+};
+
+exports.SHOW_MORE_CSS_CLASSES = SHOW_MORE_CSS_CLASSES;
+exports.SHOW_MORE_EVENT_NAMES = SHOW_MORE_EVENT_NAMES;
+//# sourceMappingURL=show_more_constants.js.map

package/build/cjs/packages/phoenix/src/components/show-more/show_more_constants.js.map

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

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

@@ -8,6 +8,7 @@ var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var splide_esm = require('../../../../../external/@splidejs/splide/dist/js/splide.esm.js');
+var slider_constants = require('./slider_constants.js');
 
 exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -21,6 +22,37 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
             focus: 'center'
         };
         this._slider = null;
+        this._$focusableElements = [];
+        this._showFocusableNodes = (slideComponent) => {
+            this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
+        };
+        this._hideFocusableNodes = (slideComponent) => {
+            this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
+        };
+        this._handleFocusableNodes = ({ slide }, action) => {
+            const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
+            if ($focusableSlideChildren.length === 0)
+                return;
+            const updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
+            $focusableSlideChildren.forEach(($element) => (updateFocusability($element)));
+        };
+        this._scanMutationsForNewFocusableElements = (mutationList) => {
+            for (const mutation of mutationList) {
+                if (mutation.type !== "childList")
+                    continue;
+                const $target = mutation.target;
+                const isFocusable = utilities.UiDomUtils.isFocusable($target);
+                const $focusableChildren = [...$target.querySelectorAll(utilities.UiDomUtils.getFocusableSelector())];
+                isFocusable && this._initializeFocusableElement($target);
+                $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
+            }
+        };
+        this._initializeFocusableElement = ($element) => {
+            !this._$focusableElements.includes($element) && this._$focusableElements.push($element);
+            if ($element.closest('[aria-hidden="true"]')) {
+                this._hideFocusableElement($element);
+            }
+        };
     }
     get sliderSettings() {
         return this._settings;
@@ -40,10 +72,28 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
         if (this._settings.mountOnConnectedCallback) {
             this._slider.mount();
         }
+        this._slider.on('visible', this._showFocusableNodes);
+        this._slider.on('hidden', this._hideFocusableNodes);
+        const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
+        mutationObserver.observe(this, { childList: true, subtree: true, attributes: true });
+    }
+    _showFocusableElement($element) {
+        $element.setAttribute('tabindex', '0');
+        $element.removeAttribute('aria-hidden');
+    }
+    _hideFocusableElement($element) {
+        $element.setAttribute('tabindex', '-1');
+        $element.setAttribute('aria-hidden', 'true');
     }
     getSlider() {
         return this._slider;
     }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
+        (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
+    }
 };
 tslib_es6.__decorate([
     decorators.property({ reflect: true }),

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

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = {
+    show: 'show',
+    hide: 'hide'
+};
+
+exports.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS;
+//# sourceMappingURL=slider_constants.js.map

package/build/cjs/packages/phoenix/src/components/slider/slider_constants.js.map

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

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

@@ -86,7 +86,6 @@ var color_swatches_control_constants = require('./components/form/color_swatches
 var color_swatches = require('./components/color_swatches/color_swatches.js');
 var color_item = require('./components/color_swatches/color_item/color_item.js');
 var color_swatches_control = require('./components/form/color_swatches_control/color_swatches_control.js');
-var show_more = require('./components/color_swatches/show-more/show_more.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
 var slider = require('./components/slider/slider.js');
 var scroller = require('./components/scroller/scroller.js');
@@ -126,6 +125,8 @@ var toggle = require('./components/toggle/toggle.js');
 var toggle_button$1 = require('./components/toggle/toggle_button.js');
 var navigator_share = require('./components/navigator/navigator_share/navigator_share.js');
 var navigator_controller = require('./components/navigator/navigator_controller/navigator_controller.js');
+var show_more_button = require('./components/show-more/show_more_button.js');
+var show_more = require('./components/show-more/show_more.js');
 
 
 
@@ -528,12 +529,6 @@ Object.defineProperty(exports, 'HColorSwatchesControl', {
 		return color_swatches_control.HColorSwatchesControl;
 	}
 });
-Object.defineProperty(exports, 'HColorSwatchesShowMore', {
-	enumerable: true,
-	get: function () {
-		return show_more.HColorSwatchesShowMore;
-	}
-});
 exports.VisibilityController = visibility_controller.VisibilityController;
 Object.defineProperty(exports, 'HSlider', {
 	enumerable: true,
@@ -755,4 +750,16 @@ Object.defineProperty(exports, 'NavigatorController', {
 		return navigator_controller.NavigatorController;
 	}
 });
+Object.defineProperty(exports, 'HShowMoreButton', {
+	enumerable: true,
+	get: function () {
+		return show_more_button.HShowMoreButton;
+	}
+});
+Object.defineProperty(exports, 'HShowMore', {
+	enumerable: true,
+	get: function () {
+		return show_more.HShowMore;
+	}
+});
 //# sourceMappingURL=index.js.map

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

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

@@ -6,7 +6,7 @@ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/pho
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import 'lit-html';
-import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
+import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES } from './color_swatches_constants.js';
 import { COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
 
 let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
@@ -150,7 +150,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             return;
         this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
             if (index > numberOfVisibleColors - 1) {
-                $colorSwatchesChild.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+                $colorSwatchesChild.setAttribute('hidden', '');
             }
         });
     }
@@ -160,9 +160,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             if (!this._$colorSwatchesChildren)
                 return;
             this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
-                $colorSwatchesChild.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+                $colorSwatchesChild.removeAttribute('hidden');
             });
-            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+            (_a = this.querySelector('h-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
         });
     }
     _handleChangeToNextColorItem({ target }) {
@@ -228,10 +228,12 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
     }
     render() {
         return html `
-            ${this.getSlot('default')}
-            ${this._$colors.length > this.numberOfVisibleColors
-            ? html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
+            <h-show-more count="15" selector="h-color-item">
+                ${this.getSlot('default')}
+                ${this._$colors.length > this.numberOfVisibleColors
+            ? html `<h-show-more-button>${this.showMoreBtnText}</h-show-more-button>`
             : nothing}
+            </h-show-more>
         `;
     }
 };

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

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

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.d.ts

@@ -9,4 +9,3 @@ export declare const COLOR_SWATCHES_EVENT_NAMES: {
     readonly markDisabledItems: "markDisabledItems";
     readonly showMore: "showMore";
 };
-export declare const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = "hidden";

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js

@@ -8,8 +8,7 @@ const COLOR_SWATCHES_EVENT_NAMES = {
     change: 'change',
     markDisabledItems: 'markDisabledItems',
     showMore: 'showMore'
-};
-const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
+};
 
-export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE };
+export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES };
 //# sourceMappingURL=color_swatches_constants.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_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;"}
+{"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/form/radio/radio_control.d.ts

@@ -9,6 +9,7 @@ export declare class HRadioControl extends PhoenixLightLitElement {
     readonly: boolean;
     checked: boolean;
     value: string;
+    ariaLabel: string;
     ariaDescribedby: string;
     constructor();
     connectedCallback(): void;

package/build/esm/packages/phoenix/src/components/form/radio/radio_control.js

@@ -37,11 +37,12 @@ let HRadioControl = class HRadioControl extends PhoenixLightLitElement {
                 ?readonly="${this.readonly}"
                 ?hidden="${this.hidden}"
                 .checked="${this.checked}"
+                aria-label="${ifDefined(this.ariaLabel)}"
                 aria-describedby="${ifDefined(this.ariaDescribedby)}"
                 @change="${this._handleChangeEvent}"
             />
 
-            <label class="${RADIO_CONTROL_CSS_CLASSES.radioLabel}" for="${ifDefined(this.controlId)}"></label>
+            <label class="${RADIO_CONTROL_CSS_CLASSES.radioLabel}" for="${ifDefined(this.controlId)}" aria-hidden="true"></label>
         `;
     }
 };
@@ -77,6 +78,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], HRadioControl.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", String)
+], HRadioControl.prototype, "ariaLabel", void 0);
 __decorate([
     property({ type: String, attribute: 'aria-describedby' }),
     __metadata("design:type", String)

package/build/esm/packages/phoenix/src/components/form/radio/radio_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/show-more/show_more.d.ts

@@ -0,0 +1,18 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HShowMore extends PhoenixLightLitElement {
+    count: number;
+    selector: string;
+    mobileOnly: boolean;
+    private _$showMoreButton;
+    private _$items;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _updateComponentVisibility;
+    private _hideExcessItems;
+    private _showAllItems;
+    private _hideButton;
+    private _setupListeners;
+    private _showMore;
+    private _focusNextItem;
+    private _onResize;
+}

package/build/esm/packages/phoenix/src/components/show-more/show_more.js

@@ -0,0 +1,96 @@
+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 { BREAKPOINTS } from '../../global_constants.js';
+import { DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
+import throttle_1 from '../../../../../external/lodash/throttle.js';
+import { SHOW_MORE_CSS_CLASSES, SHOW_MORE_EVENT_NAMES } from './show_more_constants.js';
+
+let HShowMore = class HShowMore extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._$showMoreButton = null;
+        this._showMore = () => {
+            this._showAllItems();
+            this._hideButton();
+            this._focusNextItem();
+        };
+        this._onResize = throttle_1(() => {
+            if (window.innerWidth > BREAKPOINTS.xs) {
+                this._showAllItems();
+                this._hideButton();
+                window.removeEventListener('resize', this._onResize);
+            }
+        }, DEFAULT_THROTTLE_WAIT_TIME);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._$showMoreButton = this.querySelector('h-show-more-button');
+        this._$items = [...this.querySelectorAll(this.selector)];
+        this.classList.add(SHOW_MORE_CSS_CLASSES.showMore);
+        this._updateComponentVisibility();
+        this._setupListeners();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this._onResize);
+    }
+    _updateComponentVisibility() {
+        const hasOverflowItems = this._$items.length > this.count;
+        const isMobileView = window.innerWidth <= BREAKPOINTS.xs;
+        const shouldBeActive = (!this.mobileOnly || isMobileView) && hasOverflowItems;
+        if (shouldBeActive) {
+            this._hideExcessItems();
+        }
+        else {
+            this._hideButton();
+        }
+    }
+    _hideExcessItems() {
+        this._$items.forEach(($item, index) => {
+            $item.removeAttribute('hidden');
+            if (index >= this.count)
+                $item.setAttribute('hidden', '');
+        });
+    }
+    _showAllItems() {
+        this._$items.forEach(($item) => $item.removeAttribute('hidden'));
+    }
+    _hideButton() {
+        var _a;
+        (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
+    }
+    _setupListeners() {
+        this.addEventListener(SHOW_MORE_EVENT_NAMES.showMore, this._showMore);
+        if (this.mobileOnly && window.innerWidth <= BREAKPOINTS.xs) {
+            window.addEventListener('resize', this._onResize);
+        }
+    }
+    _focusNextItem() {
+        const $nextItem = this._$items[this.count];
+        if (!$nextItem)
+            return;
+        if (!$nextItem.getAttribute('tabindex'))
+            $nextItem.setAttribute('tabindex', '-1');
+        $nextItem.focus();
+    }
+};
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], HShowMore.prototype, "count", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HShowMore.prototype, "selector", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'mobile-only' }),
+    __metadata("design:type", Boolean)
+], HShowMore.prototype, "mobileOnly", void 0);
+HShowMore = __decorate([
+    phoenixCustomElement('h-show-more')
+], HShowMore);
+
+export { HShowMore };
+//# sourceMappingURL=show_more.js.map

package/build/esm/packages/phoenix/src/components/show-more/show_more.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/show-more/show_more_button.d.ts

@@ -0,0 +1,7 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HShowMoreButton extends PhoenixLightLitElement {
+    private _btnController;
+    constructor();
+    connectedCallback(): void;
+    private _dispatchClickedEvent;
+}

package/build/esm/packages/phoenix/src/components/show-more/show_more_button.js

@@ -0,0 +1,27 @@
+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 { BtnController } from '../../controllers/btn_controller/btn_controller.js';
+import { SHOW_MORE_EVENT_NAMES, SHOW_MORE_CSS_CLASSES } from './show_more_constants.js';
+
+let HShowMoreButton = class HShowMoreButton extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = () => {
+            this.emitCustomEvent(SHOW_MORE_EVENT_NAMES.showMore);
+        };
+        this._btnController = new BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchClickedEvent);
+        this.classList.add(SHOW_MORE_CSS_CLASSES.showMoreButton);
+    }
+};
+HShowMoreButton = __decorate([
+    phoenixCustomElement('h-show-more-button'),
+    __metadata("design:paramtypes", [])
+], HShowMoreButton);
+
+export { HShowMoreButton };
+//# sourceMappingURL=show_more_button.js.map

package/build/esm/packages/phoenix/src/components/show-more/show_more_button.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;"}

package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.d.ts

@@ -0,0 +1,7 @@
+export declare const SHOW_MORE_CSS_CLASSES: {
+    readonly showMore: "show-more";
+    readonly showMoreButton: "show-more__button";
+};
+export declare const SHOW_MORE_EVENT_NAMES: {
+    readonly showMore: "showMore";
+};

package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.js

@@ -0,0 +1,10 @@
+const SHOW_MORE_CSS_CLASSES = {
+    showMore: 'show-more',
+    showMoreButton: 'show-more__button'
+};
+const SHOW_MORE_EVENT_NAMES = {
+    showMore: 'showMore'
+};
+
+export { SHOW_MORE_CSS_CLASSES, SHOW_MORE_EVENT_NAMES };
+//# sourceMappingURL=show_more_constants.js.map

package/build/esm/packages/phoenix/src/components/show-more/show_more_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;"}

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

@@ -7,6 +7,15 @@ export declare class HSlider extends PhoenixLightLitElement {
     set sliderSettings(newSettingsObject: ISliderOptions);
     private _settings;
     private _slider;
+    private _$focusableElements;
     connectedCallback(): void;
+    private _showFocusableNodes;
+    private _hideFocusableNodes;
+    private _handleFocusableNodes;
+    private _showFocusableElement;
+    private _hideFocusableElement;
+    private _scanMutationsForNewFocusableElements;
+    private _initializeFocusableElement;
     getSlider(): ISlider | null;
+    disconnectedCallback(): void;
 }

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

@@ -1,9 +1,10 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { JsonUtils } from '@dreamcommerce/utilities';
+import { UiDomUtils, JsonUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { Splide } from '../../../../../external/@splidejs/splide/dist/js/splide.esm.js';
+import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants.js';
 
 let HSlider = class HSlider extends PhoenixLightLitElement {
     constructor() {
@@ -17,6 +18,37 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
             focus: 'center'
         };
         this._slider = null;
+        this._$focusableElements = [];
+        this._showFocusableNodes = (slideComponent) => {
+            this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
+        };
+        this._hideFocusableNodes = (slideComponent) => {
+            this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
+        };
+        this._handleFocusableNodes = ({ slide }, action) => {
+            const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
+            if ($focusableSlideChildren.length === 0)
+                return;
+            const updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
+            $focusableSlideChildren.forEach(($element) => (updateFocusability($element)));
+        };
+        this._scanMutationsForNewFocusableElements = (mutationList) => {
+            for (const mutation of mutationList) {
+                if (mutation.type !== "childList")
+                    continue;
+                const $target = mutation.target;
+                const isFocusable = UiDomUtils.isFocusable($target);
+                const $focusableChildren = [...$target.querySelectorAll(UiDomUtils.getFocusableSelector())];
+                isFocusable && this._initializeFocusableElement($target);
+                $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
+            }
+        };
+        this._initializeFocusableElement = ($element) => {
+            !this._$focusableElements.includes($element) && this._$focusableElements.push($element);
+            if ($element.closest('[aria-hidden="true"]')) {
+                this._hideFocusableElement($element);
+            }
+        };
     }
     get sliderSettings() {
         return this._settings;
@@ -36,10 +68,28 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
         if (this._settings.mountOnConnectedCallback) {
             this._slider.mount();
         }
+        this._slider.on('visible', this._showFocusableNodes);
+        this._slider.on('hidden', this._hideFocusableNodes);
+        const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
+        mutationObserver.observe(this, { childList: true, subtree: true, attributes: true });
+    }
+    _showFocusableElement($element) {
+        $element.setAttribute('tabindex', '0');
+        $element.removeAttribute('aria-hidden');
+    }
+    _hideFocusableElement($element) {
+        $element.setAttribute('tabindex', '-1');
+        $element.setAttribute('aria-hidden', 'true');
     }
     getSlider() {
         return this._slider;
     }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
+        (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
+    }
 };
 __decorate([
     property({ reflect: true }),

package/build/esm/packages/phoenix/src/components/slider/slider.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/slider/slider_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS: {
+    readonly show: "show";
+    readonly hide: "hide";
+};

package/build/esm/packages/phoenix/src/components/slider/slider_constants.js

@@ -0,0 +1,7 @@
+const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = {
+    show: 'show',
+    hide: 'hide'
+};
+
+export { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS };
+//# sourceMappingURL=slider_constants.js.map

package/build/esm/packages/phoenix/src/components/{color_swatches/show-more/show_more_constants.js.map → slider/slider_constants.js.map}

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

package/build/esm/packages/phoenix/src/components/slider/slider_types.d.ts

@@ -1,6 +1,9 @@
 import { Options, Splide } from '@splidejs/splide';
+import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants';
+import { Any } from 'ts-toolbelt';
 export interface ISlider extends Splide {
 }
 export interface ISliderOptions extends Options {
     mountOnConnectedCallback: boolean;
 }
+export declare type THandleNodesOption = typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS[Any.Keys<typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS>];

package/build/esm/packages/phoenix/src/components/slider/slider_types.js

@@ -1,2 +1,4 @@
 import '@splidejs/splide';
+import './slider_constants';
+import 'ts-toolbelt';
 //# sourceMappingURL=slider_types.js.map

package/build/esm/packages/phoenix/src/components/slider/slider_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC"}
+{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC;AACnD,OAAsD,oBAAoB,CAAC;AAC3E,OAAoB,aAAa,CAAC"}

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

@@ -91,7 +91,6 @@ export { BACKDROP_EVENTS } from "./components/backdrop/backdrop_constants";
 export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control';
 export { HColorSwatches } from './components/color_swatches/color_swatches';
 export { HColorItem } from './components/color_swatches/color_item/color_item';
-export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more';
 export { TColorSwatchesControlChangeEventDetail } from "./components/color_swatches/color_swatches_types";
 export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from "./components/form/color_swatches_control/color_swatches_control_constants";
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller';
@@ -140,4 +139,6 @@ export * from './components/toggle/toggle_types';
 export * from './components/toggle/toggle_constants';
 export { NavigatorShare } from './components/navigator/navigator_share/navigator_share';
 export { NavigatorController } from './components/navigator/navigator_controller/navigator_controller';
+export { HShowMore } from './components/show-more/show_more';
+export { HShowMoreButton } from './components/show-more/show_more_button';
 export { phoenixCustomElement } from './core/decorators/phoenix_custom_element';

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

@@ -82,7 +82,6 @@ export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './components/form/color_swat
 export { HColorSwatches } from './components/color_swatches/color_swatches.js';
 export { HColorItem } from './components/color_swatches/color_item/color_item.js';
 export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
-export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';
 export { HSlider } from './components/slider/slider.js';
 export { HScroller } from './components/scroller/scroller.js';
@@ -122,4 +121,6 @@ export { HToggle } from './components/toggle/toggle.js';
 export { HToggleBtn } from './components/toggle/toggle_button.js';
 export { NavigatorShare } from './components/navigator/navigator_share/navigator_share.js';
 export { NavigatorController } from './components/navigator/navigator_controller/navigator_controller.js';
+export { HShowMoreButton } from './components/show-more/show_more_button.js';
+export { HShowMore } from './components/show-more/show_more.js';
 //# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.17.1",
+  "version": "1.17.3-0",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -27,15 +27,15 @@
   },
   "peerDependencies": {
     "@dreamcommerce/utilities": "^1.0.0",
-    "@splidejs/splide": "^4.0.7",
-    "@splidejs/splide-extension-auto-scroll": "^0.5.3"
+    "@splidejs/splide": "4.0.7",
+    "@splidejs/splide-extension-auto-scroll": "0.5.3"
   },
   "devDependencies": {
     "@dreamcommerce/utilities": "^1.20.1-0",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",
-    "@splidejs/splide-extension-auto-scroll": "^0.5.3",
+    "@splidejs/splide-extension-auto-scroll": "0.5.3",
     "@storybook/web-components": "6.5.7",
     "lit": "2.4.0"
   },

package/build/cjs/packages/phoenix/src/components/color_swatches/show-more/show_more.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
-var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
-var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
-var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
-var color_swatches_constants = require('../color_swatches_constants.js');
-var show_more_constants = require('./show_more_constants.js');
-
-exports.HColorSwatchesShowMore = class HColorSwatchesShowMore extends phoenix_light_lit_element.PhoenixLightLitElement {
-    constructor() {
-        super();
-        this._dispatchClickedEvent = () => {
-            this.emitCustomEvent(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.showMore);
-        };
-        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setupEvents();
-        this._addCssClasses();
-        this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASS);
-    }
-    _addCssClasses() {
-        this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASS);
-    }
-    setupEvents() {
-        this.addEventListener('click', this._dispatchClickedEvent);
-    }
-};
-exports.HColorSwatchesShowMore = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-color-swatches-show-more'),
-    tslib_es6.__metadata("design:paramtypes", [])
-], exports.HColorSwatchesShowMore);
-//# sourceMappingURL=show_more.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/show-more/show_more.js.map

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

package/build/cjs/packages/phoenix/src/components/color_swatches/show-more/show_more_constants.js

@@ -1,8 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const SHOW_MORE_CSS_CLASS = 'color-swatches-show-more';
-
-exports.SHOW_MORE_CSS_CLASS = SHOW_MORE_CSS_CLASS;
-//# sourceMappingURL=show_more_constants.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/show-more/show_more_constants.js.map

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

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more.d.ts

@@ -1,9 +0,0 @@
-import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-export declare class HColorSwatchesShowMore extends PhoenixLightLitElement {
-    private _btnController;
-    constructor();
-    connectedCallback(): void;
-    private _addCssClasses;
-    private setupEvents;
-    private _dispatchClickedEvent;
-}

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more.js

@@ -1,35 +0,0 @@
-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 { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
-import { COLOR_SWATCHES_EVENT_NAMES } from '../color_swatches_constants.js';
-import { SHOW_MORE_CSS_CLASS } from './show_more_constants.js';
-
-let HColorSwatchesShowMore = class HColorSwatchesShowMore extends PhoenixLightLitElement {
-    constructor() {
-        super();
-        this._dispatchClickedEvent = () => {
-            this.emitCustomEvent(COLOR_SWATCHES_EVENT_NAMES.showMore);
-        };
-        this._btnController = new BtnController(this, this._dispatchClickedEvent);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setupEvents();
-        this._addCssClasses();
-        this.classList.add(SHOW_MORE_CSS_CLASS);
-    }
-    _addCssClasses() {
-        this.classList.add(SHOW_MORE_CSS_CLASS);
-    }
-    setupEvents() {
-        this.addEventListener('click', this._dispatchClickedEvent);
-    }
-};
-HColorSwatchesShowMore = __decorate([
-    phoenixCustomElement('h-color-swatches-show-more'),
-    __metadata("design:paramtypes", [])
-], HColorSwatchesShowMore);
-
-export { HColorSwatchesShowMore };
-//# sourceMappingURL=show_more.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more.js.map

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

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more_constants.d.ts

@@ -1 +0,0 @@
-export declare const SHOW_MORE_CSS_CLASS = "color-swatches-show-more";

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more_constants.js

@@ -1,4 +0,0 @@
-const SHOW_MORE_CSS_CLASS = 'color-swatches-show-more';
-
-export { SHOW_MORE_CSS_CLASS };
-//# sourceMappingURL=show_more_constants.js.map