@shoper/phoenix_design_system 1.0.4 → 1.1.0-1

package/build/cjs/{packages/phoenix/external → external}/classnames/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _commonjsHelpers = require('../../../../_virtual/_commonjsHelpers.js');
+var _commonjsHelpers = require('../../_virtual/_commonjsHelpers.js');
 
 /*!
-  Copyright (c) 2018 Jed Watson.
+  Copyright (c) 2017 Jed Watson.
   Licensed under the MIT License (MIT), see
   http://jedwatson.github.io/classnames
 */
@@ -17,7 +17,7 @@ var classnames = _commonjsHelpers.createCommonjsModule(function (module) {
 
 	var hasOwn = {}.hasOwnProperty;
 
-	function classNames() {
+	function classNames () {
 		var classes = [];
 
 		for (var i = 0; i < arguments.length; i++) {
@@ -28,22 +28,16 @@ var classnames = _commonjsHelpers.createCommonjsModule(function (module) {
 
 			if (argType === 'string' || argType === 'number') {
 				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				if (arg.length) {
-					var inner = classNames.apply(null, arg);
-					if (inner) {
-						classes.push(inner);
-					}
+			} else if (Array.isArray(arg) && arg.length) {
+				var inner = classNames.apply(null, arg);
+				if (inner) {
+					classes.push(inner);
 				}
 			} else if (argType === 'object') {
-				if (arg.toString === Object.prototype.toString) {
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
 					}
-				} else {
-					classes.push(arg.toString());
 				}
 			}
 		}

package/build/{esm/packages/phoenix → cjs}/external/classnames/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;"}
+{"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;"}

package/build/cjs/external/lit/external/lit-html/async-directive.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var directiveHelpers = require('./directive-helpers.js');
+var directive = require('./directive.js');
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const s=(i,t)=>{var e,o;const r=i._$AN;if(void 0===r)return !1;for(const i of r)null===(o=(e=i)._$AO)||void 0===o||o.call(e,t,!1),s(i,t);return !0},o=i=>{let t,e;do{if(void 0===(t=i._$AM))break;e=t._$AN,e.delete(i),i=t;}while(0===(null==e?void 0:e.size))},r=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(void 0===e)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),l(t);}};function n(i){void 0!==this._$AN?(o(this),this._$AM=i,r(this)):this._$AM=i;}function h(i,t=!1,e=0){const r=this._$AH,n=this._$AN;if(void 0!==n&&0!==n.size)if(t)if(Array.isArray(r))for(let i=e;i<r.length;i++)s(r[i],!1),o(r[i]);else null!=r&&(s(r,!1),o(r));else s(this,i);}const l=i=>{var t,s,o,r;i.type==directive.PartType.CHILD&&(null!==(t=(o=i)._$AP)&&void 0!==t||(o._$AP=h),null!==(s=(r=i)._$AQ)&&void 0!==s||(r._$AQ=n));};class c extends directive.Directive{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,e){super._$AT(i,t,e),r(this),this.isConnected=i._$AU;}_$AO(i,t=!0){var e,r;i!==this.isConnected&&(this.isConnected=i,i?null===(e=this.reconnected)||void 0===e||e.call(this):null===(r=this.disconnected)||void 0===r||r.call(this)),t&&(s(this,i),o(this));}setValue(t){if(directiveHelpers.isSingleExpression(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}}
+
+exports.Directive = directive.Directive;
+exports.PartType = directive.PartType;
+exports.directive = directive.directive;
+exports.AsyncDirective = c;
+//# sourceMappingURL=async-directive.js.map

package/build/cjs/external/lit/external/lit-html/async-directive.js.map

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

package/build/cjs/external/lit/external/lit-html/directive-helpers.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./lit-html.js');
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=o=>void 0===o.strings;
+
+exports.isSingleExpression = e;
+//# sourceMappingURL=directive-helpers.js.map

package/build/cjs/external/lit/external/lit-html/directive-helpers.js.map

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

package/build/cjs/external/lit/external/lit-html/directive.js

@@ -7,8 +7,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
 
 exports.Directive = i;
+exports.PartType = t;
 exports.directive = e;
 //# sourceMappingURL=directive.js.map

package/build/cjs/external/lit/external/lit-html/directive.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;"}

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var context_provider_controller = require('../../core/context/context_provider_controller.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 behavior_subject = require('../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../core/context/context_provider_controller.js');
 var accordion_constants = require('./accordion_constants.js');
 
 exports.HAccordion = class HAccordion extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var context_consumer_controller = require('../../core/context/context_consumer_controller.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 context_consumer_controller = require('../../core/context/context_consumer_controller.js');
 var observer = require('../../core/classes/observer/observer.js');
 var accordion_constants = require('./accordion_constants.js');
 var transition_controller = require('../../controllers/transition_controller/transition_controller.js');

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var context_provider_controller = require('../../core/context/context_provider_controller.js');
-var context_consumer_controller = require('../../core/context/context_consumer_controller.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 context_consumer_controller = require('../../core/context/context_consumer_controller.js');
 var observer = require('../../core/classes/observer/observer.js');
 var behavior_subject = require('../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../core/context/context_provider_controller.js');
 var accordion_constants = require('./accordion_constants.js');
 
 exports.HAccordionGroup = class HAccordionGroup extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var context_consumer_controller = require('../../core/context/context_consumer_controller.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 context_consumer_controller = require('../../core/context/context_consumer_controller.js');
 var observer = require('../../core/classes/observer/observer.js');
 var accordion_constants = require('./accordion_constants.js');
-var btn_controller = require('../../controllers/btn_controller.js');
 
 exports.HAccordionToggler = class HAccordionToggler extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

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

@@ -6,7 +6,7 @@ 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 btn_controller = require('../../../controllers/btn_controller.js');
+var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
 var color_swatches_constants = require('../color_swatches_constants.js');
 var color_item_constants = require('./color_item_constants.js');
 

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

@@ -5,7 +5,7 @@ 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.js');
+var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
 var show_more_constants = require('./show_more_constants.js');
 
 exports.HColorSwatchesShowMore = class HColorSwatchesShowMore extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -7,14 +7,14 @@ var decorators = require('lit/decorators');
 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 portal_constants = require('../portal/portal_constants.js');
-var litHtml = require('lit-html');
-var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
 var keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
+var litHtml = require('lit-html');
 var global_constants = require('../../global_constants.js');
 var dropdown_constants = require('./dropdown_constants.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
+var portal_constants = require('../portal/portal_constants.js');
+var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
 var throttle = require('../../../../../external/lodash/throttle.js');
 var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');

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

@@ -7,7 +7,7 @@ var decorators = require('lit/decorators');
 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 btn_controller = require('../../controllers/btn_controller.js');
+var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
 var dropdown_constants = require('./dropdown_constants.js');
 var toggle_element_aria_controller = require('../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
 

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox.js

@@ -6,9 +6,9 @@ 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 index = require('../../../../../../external/classnames/index.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
-var index = require('../../../../external/classnames/index.js');
 var checkbox_constants = require('./checkbox_constants.js');
 
 exports.HCheckbox = class HCheckbox extends phoenix_light_lit_element.PhoenixLightLitElement {

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox.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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,gDAAoD;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;"}

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js

@@ -5,10 +5,10 @@ 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 litHtml = require('lit-html');
 var decorators_js = require('@lit/reactive-element/decorators.js');
+var litHtml = require('lit-html');
 var ref_js = require('lit-html/directives/ref.js');
-var index = require('../../../../external/classnames/index.js');
+var index = require('../../../../../../external/classnames/index.js');
 var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
 var checkbox_constants = require('./checkbox_constants.js');

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,gDAAoD;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;"}

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js

@@ -5,14 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
+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 index = require('../../../../../../external/classnames/index.js');
 var input_constants = require('../input/input_constants.js');
-var index = require('../../../../external/classnames/index.js');
 var color_swatches_control_constants = require('./color_swatches_control_constants.js');
 var color_swatches_constants = require('../../color_swatches/color_swatches_constants.js');
 
 exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedColors = [];
+    }
     connectedCallback() {
         super.connectedCallback();
         this._setupEvents();
@@ -27,21 +32,14 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
     _setupEvents() {
         this.addEventListener(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
             const eventValue = event.detail.colors;
-            this.selectedColors = Array.isArray(eventValue) ? this._serializeArrayOfColors(eventValue) : eventValue;
+            this.selectedColors = eventValue ? utilities.ArrayUtils.makeAsArray(eventValue) : [];
         });
     }
-    _serializeArrayOfColors(colors) {
-        return colors.reduce((colorPrev, colorCurr) => {
-            return colorPrev ? `${colorPrev}, ${colorCurr}` : colorCurr;
-        }, '');
-    }
     render() {
+        if (!this.selectedColors.length)
+            return;
         return lit.html `
-            <h-input-control
-                controlName="${this.controlName}"
-                type="${input_constants.INPUT_CONTROL_TYPES.hidden}"
-                value="${this.selectedColors}"
-            ></h-input-control>
+            ${this.selectedColors.map((color) => lit.html ` <input name="${this.controlName}" type="${input_constants.INPUT_CONTROL_TYPES.hidden}" value="${color}" /> `)}
         `;
     }
 };
@@ -67,7 +65,7 @@ tslib_es6.__decorate([
 ], exports.HColorSwatchesControl.prototype, "error", void 0);
 tslib_es6.__decorate([
     decorators.state(),
-    tslib_es6.__metadata("design:type", Object)
+    tslib_es6.__metadata("design:type", Array)
 ], exports.HColorSwatchesControl.prototype, "selectedColors", void 0);
 exports.HColorSwatchesControl = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-color-swatches-control')

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,gDAAoD;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;"}

package/build/cjs/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_consumer_controller.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
 require('lit');
 var context_consumer_controller = require('../../../../core/context/context_consumer_controller.js');
-var control_props_sync_controller_constants = require('./control_props_sync_controller_constants.js');
 var observer = require('../../../../core/classes/observer/observer.js');
+var control_props_sync_controller_constants = require('./control_props_sync_controller_constants.js');
 
 var _ControlPropsSyncConsumerController_host, _ControlPropsSyncConsumerController_contextConsumer, _ControlPropsSyncConsumerController_basePropsObservable, _ControlPropsSyncConsumerController_propsObserver, _ControlPropsSyncConsumerController_onPropsUpdated;
 class ControlPropsSyncConsumerController {

package/build/cjs/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_provider_controller.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
 require('lit');
+var behavior_subject = require('../../../../core/classes/behavior_subject/behavior_subject.js');
 var context_provider_controller = require('../../../../core/context/context_provider_controller.js');
 var control_props_sync_controller_constants = require('./control_props_sync_controller_constants.js');
-var behavior_subject = require('../../../../core/classes/behavior_subject/behavior_subject.js');
 
 var _ControlPropsSyncProviderController_host, _ControlPropsSyncProviderController_controlPropsProvider, _ControlPropsSyncProviderController_propsObservable, _ControlPropsSyncProviderController_propsToSync;
 class ControlPropsSyncProviderController {

package/build/cjs/packages/phoenix/src/components/form/input/input.js

@@ -6,10 +6,10 @@ 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 index = require('../../../../../../external/classnames/index.js');
 var input_constants = require('./input_constants.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
-var index = require('../../../../external/classnames/index.js');
 
 exports.HInput = class HInput extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

package/build/cjs/packages/phoenix/src/components/form/input/input.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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,gDAAoD;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;"}

package/build/cjs/packages/phoenix/src/components/form/input/input_icon.js

@@ -7,8 +7,8 @@ var lit = require('lit');
 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 input_constants = require('./input_constants.js');
 var icon_constants = require('../../icon/icon_constants.js');
+var input_constants = require('./input_constants.js');
 
 exports.HInputIcon = class HInputIcon extends phoenix_light_lit_element.PhoenixLightLitElement {
     connectedCallback() {

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

@@ -6,9 +6,9 @@ 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 index = require('../../../../../../external/classnames/index.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
-var index = require('../../../../external/classnames/index.js');
 var checkbox_constants = require('../checkbox/checkbox_constants.js');
 var radio_constants = require('./radio_constants.js');
 

package/build/cjs/packages/phoenix/src/components/form/radio/radio.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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,gDAAoD;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;"}

package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js

@@ -0,0 +1,57 @@
+'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 decorators_js = require('@lit/reactive-element/decorators.js');
+var select_components_constatns = require('../select_components_constatns.js');
+var btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
+var select_option_constants = require('./select_option_constants.js');
+
+exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._dispatchClickedEvent = () => {
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, {
+                bubbles: true,
+                detail: {
+                    $option: this
+                }
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
+        this.classList.add(select_option_constants.SELECT_OPTION_CSS_CLASSES.selectOption);
+        this.setAttribute('role', 'option');
+        this._setupEvents();
+    }
+    _setupEvents() {
+        this.addEventListener('click', this._dispatchClickedEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators_js.property({ type: String, reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HOption.prototype, "value", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HOption.prototype, "selected", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HOption.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HOption.prototype, "hidden", void 0);
+exports.HOption = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option)
+], exports.HOption);
+//# sourceMappingURL=select_option.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js.map

@@ -0,0 +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;"}

package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option_constants.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const selectOption = 'select-option';
+const SELECT_OPTION_CSS_CLASSES = {
+    selectOption: selectOption,
+    selectOptionContent: `${selectOption}__content`
+};
+
+exports.SELECT_OPTION_CSS_CLASSES = SELECT_OPTION_CSS_CLASSES;
+//# sourceMappingURL=select_option_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option_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;"}

package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+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 select_components_constatns = require('../select_components_constatns.js');
+var debounce = require('../../../../../../../../external/lodash/debounce.js');
+var select_search_constants = require('./select_search_constants.js');
+
+exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this._handleInputChange = debounce['default'](({ target }) => {
+            this.value = target.value;
+            this.dispatchEvent(new CustomEvent(select_components_constatns.SELECT_SEARCH_EVENT_NAMES.search, {
+                bubbles: true,
+                detail: target.value
+            }));
+        }, 200);
+    }
+    render() {
+        return lit.html `
+            <div class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch}>
+                <h-icon icon-name="icon-search" class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
+                <input
+                    class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
+                    type="text"
+                    role="search"
+                    .value=${this.value}
+                    aria-autocomplete="list"
+                    autocomplete="false"
+                    @input=${this._handleInputChange}
+                />
+            </div>
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSelectSearch.prototype, "value", void 0);
+exports.HSelectSearch = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.search)
+], exports.HSelectSearch);
+//# sourceMappingURL=select_search.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/search/select_search_constants.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const baseClass = 'select-search';
+const SELECT_SEARCH_CSS_CLASSES = {
+    selectSearch: baseClass,
+    selectSearchIcon: `${baseClass}__icon`,
+    selectSearchInput: `${baseClass}__input`
+};
+
+exports.SELECT_SEARCH_CSS_CLASSES = SELECT_SEARCH_CSS_CLASSES;
+//# sourceMappingURL=select_search_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search_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;"}

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SELECT_OPTION_EVENT_NAMES = {
+    clicked: 'selectOption.clicked'
+};
+const SELECT_OPTIONS_EVENT_NAMES = {
+    clicked: 'selectOptions.clicked'
+};
+const SELECT_SEARCH_EVENT_NAMES = {
+    search: 'selectSearch.search'
+};
+const SELECT_RELATED_COMPONENTS_NAMES = {
+    option: 'h-option',
+    options: 'h-select-options',
+    optionContent: 'h-option-content',
+    value: 'h-select-value',
+    closeBtn: 'h-select-close-btn',
+    search: 'h-select-search'
+};
+const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';
+
+exports.SELECT_INPUT_PLACEHOLDER_SLOT_NAME = SELECT_INPUT_PLACEHOLDER_SLOT_NAME;
+exports.SELECT_OPTIONS_EVENT_NAMES = SELECT_OPTIONS_EVENT_NAMES;
+exports.SELECT_OPTION_EVENT_NAMES = SELECT_OPTION_EVENT_NAMES;
+exports.SELECT_RELATED_COMPONENTS_NAMES = SELECT_RELATED_COMPONENTS_NAMES;
+exports.SELECT_SEARCH_EVENT_NAMES = SELECT_SEARCH_EVENT_NAMES;
+//# sourceMappingURL=select_components_constatns.js.map

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

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