@public-ui/angular-v19 4.0.0-alpha.1 → 4.0.0-alpha.11

package/dist/components.js

@@ -126,13 +126,13 @@ function KolAvatar_ng_container_0_stencil_ng_proxy_1_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     const ngContentOutlet_r2 = i0.ɵɵreference(4);
-    i0.ɵɵproperty("_label", ctx_r0._label)("_src", ctx_r0._src);
+    i0.ɵɵproperty("_color", ctx_r0._color)("_label", ctx_r0._label)("_src", ctx_r0._src);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
 } }
 function KolAvatar_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, KolAvatar_ng_container_0_stencil_ng_proxy_1_Template, 3, 3, "stencil-ng-proxy", 4);
+    i0.ɵɵtemplate(1, KolAvatar_ng_container_0_stencil_ng_proxy_1_Template, 3, 4, "stencil-ng-proxy", 4);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -234,13 +234,13 @@ function KolButton_ng_container_0_stencil_ng_proxy_1_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     const ngContentOutlet_r2 = i0.ɵɵreference(4);
-    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_ariaControls", ctx_r0._ariaControls)("_ariaDescription", ctx_r0._ariaDescription)("_ariaExpanded", ctx_r0._ariaExpanded)("_ariaSelected", ctx_r0._ariaSelected)("_customClass", ctx_r0._customClass)("_disabled", ctx_r0._disabled)("_hideLabel", ctx_r0._hideLabel)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_label", ctx_r0._label)("_name", ctx_r0._name)("_on", ctx_r0._on)("_role", ctx_r0._role)("_shortKey", ctx_r0._shortKey)("_tooltipAlign", ctx_r0._tooltipAlign)("_type", ctx_r0._type)("_value", ctx_r0._value)("_variant", ctx_r0._variant);
+    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_ariaControls", ctx_r0._ariaControls)("_ariaDescription", ctx_r0._ariaDescription)("_ariaExpanded", ctx_r0._ariaExpanded)("_ariaSelected", ctx_r0._ariaSelected)("_customClass", ctx_r0._customClass)("_disabled", ctx_r0._disabled)("_hideLabel", ctx_r0._hideLabel)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_inline", ctx_r0._inline)("_label", ctx_r0._label)("_name", ctx_r0._name)("_on", ctx_r0._on)("_role", ctx_r0._role)("_shortKey", ctx_r0._shortKey)("_tooltipAlign", ctx_r0._tooltipAlign)("_type", ctx_r0._type)("_value", ctx_r0._value)("_variant", ctx_r0._variant);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
 } }
 function KolButton_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, KolButton_ng_container_0_stencil_ng_proxy_1_Template, 3, 20, "stencil-ng-proxy", 4);
+    i0.ɵɵtemplate(1, KolButton_ng_container_0_stencil_ng_proxy_1_Template, 3, 21, "stencil-ng-proxy", 4);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -270,7 +270,7 @@ function KolButtonLink_ng_container_0_stencil_ng_proxy_1_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     const ngContentOutlet_r2 = i0.ɵɵreference(4);
-    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_ariaControls", ctx_r0._ariaControls)("_ariaDescription", ctx_r0._ariaDescription)("_ariaExpanded", ctx_r0._ariaExpanded)("_ariaSelected", ctx_r0._ariaSelected)("_disabled", ctx_r0._disabled)("_hideLabel", ctx_r0._hideLabel)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_label", ctx_r0._label)("_name", ctx_r0._name)("_on", ctx_r0._on)("_role", ctx_r0._role)("_shortKey", ctx_r0._shortKey)("_tooltipAlign", ctx_r0._tooltipAlign)("_type", ctx_r0._type)("_value", ctx_r0._value)("_variant", ctx_r0._variant);
+    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_ariaControls", ctx_r0._ariaControls)("_ariaDescription", ctx_r0._ariaDescription)("_ariaExpanded", ctx_r0._ariaExpanded)("_ariaSelected", ctx_r0._ariaSelected)("_disabled", ctx_r0._disabled)("_hideLabel", ctx_r0._hideLabel)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_inline", ctx_r0._inline)("_label", ctx_r0._label)("_name", ctx_r0._name)("_on", ctx_r0._on)("_role", ctx_r0._role)("_shortKey", ctx_r0._shortKey)("_tooltipAlign", ctx_r0._tooltipAlign)("_type", ctx_r0._type)("_value", ctx_r0._value);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
 } }
@@ -378,13 +378,13 @@ function KolCombobox_ng_container_0_stencil_ng_proxy_1_Template(rf, ctx) { if (r
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     const ngContentOutlet_r2 = i0.ɵɵreference(4);
-    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_disabled", ctx_r0._disabled)("_hideLabel", ctx_r0._hideLabel)("_hideMsg", ctx_r0._hideMsg)("_hint", ctx_r0._hint)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_label", ctx_r0._label)("_msg", ctx_r0._msg)("_name", ctx_r0._name)("_on", ctx_r0._on)("_placeholder", ctx_r0._placeholder)("_required", ctx_r0._required)("_shortKey", ctx_r0._shortKey)("_suggestions", ctx_r0._suggestions)("_tooltipAlign", ctx_r0._tooltipAlign)("_touched", ctx_r0._touched)("_value", ctx_r0._value);
+    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_disabled", ctx_r0._disabled)("_hasClearButton", ctx_r0._hasClearButton)("_hideLabel", ctx_r0._hideLabel)("_hideMsg", ctx_r0._hideMsg)("_hint", ctx_r0._hint)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_label", ctx_r0._label)("_msg", ctx_r0._msg)("_name", ctx_r0._name)("_on", ctx_r0._on)("_placeholder", ctx_r0._placeholder)("_required", ctx_r0._required)("_shortKey", ctx_r0._shortKey)("_suggestions", ctx_r0._suggestions)("_tooltipAlign", ctx_r0._tooltipAlign)("_touched", ctx_r0._touched)("_value", ctx_r0._value);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
 } }
 function KolCombobox_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, KolCombobox_ng_container_0_stencil_ng_proxy_1_Template, 3, 19, "stencil-ng-proxy", 4);
+    i0.ɵɵtemplate(1, KolCombobox_ng_container_0_stencil_ng_proxy_1_Template, 3, 20, "stencil-ng-proxy", 4);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1026,7 +1026,7 @@ function KolLink_ng_container_0_stencil_ng_proxy_1_Template(rf, ctx) { if (rf &
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     const ngContentOutlet_r2 = i0.ɵɵreference(4);
-    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_ariaControls", ctx_r0._ariaControls)("_ariaCurrentValue", ctx_r0._ariaCurrentValue)("_ariaDescription", ctx_r0._ariaDescription)("_ariaExpanded", ctx_r0._ariaExpanded)("_disabled", ctx_r0._disabled)("_download", ctx_r0._download)("_hideLabel", ctx_r0._hideLabel)("_href", ctx_r0._href)("_icons", ctx_r0._icons)("_label", ctx_r0._label)("_on", ctx_r0._on)("_role", ctx_r0._role)("_shortKey", ctx_r0._shortKey)("_target", ctx_r0._target)("_tooltipAlign", ctx_r0._tooltipAlign)("_variant", ctx_r0._variant);
+    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_ariaControls", ctx_r0._ariaControls)("_ariaCurrentValue", ctx_r0._ariaCurrentValue)("_ariaDescription", ctx_r0._ariaDescription)("_ariaExpanded", ctx_r0._ariaExpanded)("_disabled", ctx_r0._disabled)("_download", ctx_r0._download)("_hideLabel", ctx_r0._hideLabel)("_href", ctx_r0._href)("_icons", ctx_r0._icons)("_inline", ctx_r0._inline)("_label", ctx_r0._label)("_on", ctx_r0._on)("_role", ctx_r0._role)("_shortKey", ctx_r0._shortKey)("_target", ctx_r0._target)("_tooltipAlign", ctx_r0._tooltipAlign);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
 } }
@@ -1134,13 +1134,13 @@ function KolNav_ng_container_0_stencil_ng_proxy_1_Template(rf, ctx) { if (rf & 1
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     const ngContentOutlet_r2 = i0.ɵɵreference(4);
-    i0.ɵɵproperty("_collapsible", ctx_r0._collapsible)("_hasCompactButton", ctx_r0._hasCompactButton)("_hasIconsWhenExpanded", ctx_r0._hasIconsWhenExpanded)("_hideLabel", ctx_r0._hideLabel)("_label", ctx_r0._label)("_links", ctx_r0._links)("_orientation", ctx_r0._orientation);
+    i0.ɵɵproperty("_collapsible", ctx_r0._collapsible)("_hasCompactButton", ctx_r0._hasCompactButton)("_hasIconsWhenExpanded", ctx_r0._hasIconsWhenExpanded)("_hideLabel", ctx_r0._hideLabel)("_label", ctx_r0._label)("_links", ctx_r0._links);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
 } }
 function KolNav_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, KolNav_ng_container_0_stencil_ng_proxy_1_Template, 3, 8, "stencil-ng-proxy", 4);
+    i0.ɵɵtemplate(1, KolNav_ng_container_0_stencil_ng_proxy_1_Template, 3, 7, "stencil-ng-proxy", 4);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1242,13 +1242,13 @@ function KolPopoverButton_ng_container_0_stencil_ng_proxy_1_Template(rf, ctx) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     const ngContentOutlet_r2 = i0.ɵɵreference(4);
-    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_ariaControls", ctx_r0._ariaControls)("_ariaDescription", ctx_r0._ariaDescription)("_ariaSelected", ctx_r0._ariaSelected)("_customClass", ctx_r0._customClass)("_disabled", ctx_r0._disabled)("_hideLabel", ctx_r0._hideLabel)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_label", ctx_r0._label)("_name", ctx_r0._name)("_on", ctx_r0._on)("_popoverAlign", ctx_r0._popoverAlign)("_role", ctx_r0._role)("_shortKey", ctx_r0._shortKey)("_tabIndex", ctx_r0._tabIndex)("_tooltipAlign", ctx_r0._tooltipAlign)("_type", ctx_r0._type)("_value", ctx_r0._value)("_variant", ctx_r0._variant);
+    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_ariaControls", ctx_r0._ariaControls)("_ariaDescription", ctx_r0._ariaDescription)("_ariaSelected", ctx_r0._ariaSelected)("_customClass", ctx_r0._customClass)("_disabled", ctx_r0._disabled)("_hideLabel", ctx_r0._hideLabel)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_inline", ctx_r0._inline)("_label", ctx_r0._label)("_name", ctx_r0._name)("_on", ctx_r0._on)("_popoverAlign", ctx_r0._popoverAlign)("_role", ctx_r0._role)("_shortKey", ctx_r0._shortKey)("_tabIndex", ctx_r0._tabIndex)("_tooltipAlign", ctx_r0._tooltipAlign)("_type", ctx_r0._type)("_value", ctx_r0._value)("_variant", ctx_r0._variant);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
 } }
 function KolPopoverButton_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, KolPopoverButton_ng_container_0_stencil_ng_proxy_1_Template, 3, 21, "stencil-ng-proxy", 4);
+    i0.ɵɵtemplate(1, KolPopoverButton_ng_container_0_stencil_ng_proxy_1_Template, 3, 22, "stencil-ng-proxy", 4);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1278,13 +1278,13 @@ function KolPopoverButtonWc_ng_container_0_stencil_ng_proxy_1_Template(rf, ctx)
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     const ngContentOutlet_r2 = i0.ɵɵreference(4);
-    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_ariaControls", ctx_r0._ariaControls)("_ariaDescription", ctx_r0._ariaDescription)("_ariaSelected", ctx_r0._ariaSelected)("_customClass", ctx_r0._customClass)("_disabled", ctx_r0._disabled)("_hideLabel", ctx_r0._hideLabel)("_icons", ctx_r0._icons)("_label", ctx_r0._label)("_name", ctx_r0._name)("_on", ctx_r0._on)("_popoverAlign", ctx_r0._popoverAlign)("_role", ctx_r0._role)("_shortKey", ctx_r0._shortKey)("_tabIndex", ctx_r0._tabIndex)("_tooltipAlign", ctx_r0._tooltipAlign)("_type", ctx_r0._type)("_value", ctx_r0._value)("_variant", ctx_r0._variant);
+    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_ariaControls", ctx_r0._ariaControls)("_ariaDescription", ctx_r0._ariaDescription)("_ariaSelected", ctx_r0._ariaSelected)("_customClass", ctx_r0._customClass)("_disabled", ctx_r0._disabled)("_hideLabel", ctx_r0._hideLabel)("_icons", ctx_r0._icons)("_inline", ctx_r0._inline)("_label", ctx_r0._label)("_name", ctx_r0._name)("_on", ctx_r0._on)("_popoverAlign", ctx_r0._popoverAlign)("_role", ctx_r0._role)("_shortKey", ctx_r0._shortKey)("_tabIndex", ctx_r0._tabIndex)("_tooltipAlign", ctx_r0._tooltipAlign)("_type", ctx_r0._type)("_value", ctx_r0._value)("_variant", ctx_r0._variant);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
 } }
 function KolPopoverButtonWc_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, KolPopoverButtonWc_ng_container_0_stencil_ng_proxy_1_Template, 3, 20, "stencil-ng-proxy", 4);
+    i0.ɵɵtemplate(1, KolPopoverButtonWc_ng_container_0_stencil_ng_proxy_1_Template, 3, 21, "stencil-ng-proxy", 4);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1412,6 +1412,42 @@ function KolSelect_ng_template_1_Template(rf, ctx) { if (rf & 1) {
 function KolSelect_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
+function KolSelectWc_ng_container_0_stencil_ng_proxy_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function KolSelectWc_ng_container_0_stencil_ng_proxy_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "stencil-ng-proxy", 5, 2);
+    i0.ɵɵtemplate(2, KolSelectWc_ng_container_0_stencil_ng_proxy_1_ng_container_2_Template, 1, 0, "ng-container", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ngContentOutlet_r2 = i0.ɵɵreference(4);
+    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_disabled", ctx_r0._disabled)("_hideLabel", ctx_r0._hideLabel)("_hideMsg", ctx_r0._hideMsg)("_hint", ctx_r0._hint)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_label", ctx_r0._label)("_msg", ctx_r0._msg)("_multiple", ctx_r0._multiple)("_name", ctx_r0._name)("_on", ctx_r0._on)("_options", ctx_r0._options)("_required", ctx_r0._required)("_rows", ctx_r0._rows)("_shortKey", ctx_r0._shortKey)("_tabIndex", ctx_r0._tabIndex)("_tooltipAlign", ctx_r0._tooltipAlign)("_touched", ctx_r0._touched)("_value", ctx_r0._value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
+} }
+function KolSelectWc_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, KolSelectWc_ng_container_0_stencil_ng_proxy_1_Template, 3, 21, "stencil-ng-proxy", 4);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("replaceTag", ctx_r0.tagName);
+} }
+function KolSelectWc_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function KolSelectWc_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, KolSelectWc_ng_template_1_ng_container_0_Template, 1, 0, "ng-container", 6);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const ngContentOutlet_r2 = i0.ɵɵreference(4);
+    i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
+} }
+function KolSelectWc_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵprojection(0);
+} }
 function KolSingleSelect_ng_container_0_stencil_ng_proxy_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -1422,7 +1458,7 @@ function KolSingleSelect_ng_container_0_stencil_ng_proxy_1_Template(rf, ctx) { i
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     const ngContentOutlet_r2 = i0.ɵɵreference(4);
-    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_disabled", ctx_r0._disabled)("_hideClearButton", ctx_r0._hideClearButton)("_hideLabel", ctx_r0._hideLabel)("_hideMsg", ctx_r0._hideMsg)("_hint", ctx_r0._hint)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_label", ctx_r0._label)("_msg", ctx_r0._msg)("_name", ctx_r0._name)("_on", ctx_r0._on)("_options", ctx_r0._options)("_placeholder", ctx_r0._placeholder)("_required", ctx_r0._required)("_rows", ctx_r0._rows)("_shortKey", ctx_r0._shortKey)("_tooltipAlign", ctx_r0._tooltipAlign)("_touched", ctx_r0._touched)("_value", ctx_r0._value);
+    i0.ɵɵproperty("_accessKey", ctx_r0._accessKey)("_disabled", ctx_r0._disabled)("_hasClearButton", ctx_r0._hasClearButton)("_hideLabel", ctx_r0._hideLabel)("_hideMsg", ctx_r0._hideMsg)("_hint", ctx_r0._hint)("_icons", ctx_r0._icons)("_id", ctx_r0._id)("_label", ctx_r0._label)("_msg", ctx_r0._msg)("_name", ctx_r0._name)("_on", ctx_r0._on)("_options", ctx_r0._options)("_placeholder", ctx_r0._placeholder)("_required", ctx_r0._required)("_rows", ctx_r0._rows)("_shortKey", ctx_r0._shortKey)("_tooltipAlign", ctx_r0._tooltipAlign)("_touched", ctx_r0._touched)("_value", ctx_r0._value);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngTemplateOutlet", ngContentOutlet_r2);
 } }
@@ -2143,7 +2179,7 @@ let KolAvatar = class KolAvatar extends StencilProxyComponent {
         super();
         this.changeDetectorRef = changeDetectorRef;
         this.z = z;
-        this.availableInputProperties = ['_label', '_src'];
+        this.availableInputProperties = ['_color', '_label', '_src'];
         changeDetectorRef.detach();
         const originalTagName = 'kol-avatar';
         this.tagName = typeof tagNameTransformer === 'function' ? tagNameTransformer(originalTagName) : originalTagName;
@@ -2163,9 +2199,9 @@ KolAvatar.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolAvatar, select
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.replaceTagDirective = _t.first);
-    } }, inputs: { _label: "_label", _src: "_src" }, features: [i0.ɵɵProvidersFeature([
+    } }, inputs: { _color: "_color", _label: "_label", _src: "_src" }, features: [i0.ɵɵProvidersFeature([
             { provide: StencilProxyComponent, useExisting: forwardRef(() => KolAvatar) }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_label", "_src", 4, "replaceTag"], [3, "_label", "_src"], [4, "ngTemplateOutlet"]], template: function KolAvatar_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_color", "_label", "_src", 4, "replaceTag"], [3, "_color", "_label", "_src"], [4, "ngTemplateOutlet"]], template: function KolAvatar_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, KolAvatar_ng_container_0_Template, 2, 1, "ng-container", 3)(1, KolAvatar_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, KolAvatar_ng_template_3_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
@@ -2174,7 +2210,7 @@ KolAvatar.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolAvatar, select
     } }, encapsulation: 2, changeDetection: 0 });
 KolAvatar = __decorate([
     ProxyCmp({
-        inputs: ['_label', '_src']
+        inputs: ['_color', '_label', '_src']
     })
 ], KolAvatar);
 export { KolAvatar };
@@ -2186,7 +2222,7 @@ export { KolAvatar };
                 template: `
     <ng-container *ngIf="hasTagNameTransformer; else defaultCase">
       <stencil-ng-proxy
-        [_label]="_label" [_src]="_src"
+        [_color]="_color" [_label]="_label" [_src]="_src"
         *replaceTag="tagName"
         #replaceTagHost
       >
@@ -2202,7 +2238,7 @@ export { KolAvatar };
       <ng-content></ng-content>
     </ng-template>`,
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['_label', '_src'],
+                inputs: ['_color', '_label', '_src'],
                 providers: [
                     { provide: StencilProxyComponent, useExisting: forwardRef(() => KolAvatar) }
                 ],
@@ -2248,7 +2284,8 @@ KolBadge.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolBadge, selector
     } }, encapsulation: 2, changeDetection: 0 });
 KolBadge = __decorate([
     ProxyCmp({
-        inputs: ['_color', '_icons', '_label', '_smartButton']
+        inputs: ['_color', '_icons', '_label', '_smartButton'],
+        methods: ['kolFocus']
     })
 ], KolBadge);
 export { KolBadge };
@@ -2285,7 +2322,7 @@ export { KolBadge };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolBadge, { className: "KolBadge", filePath: "components.ts", lineNumber: 289 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolBadge, { className: "KolBadge", filePath: "components.ts", lineNumber: 291 }); })();
 let KolBreadcrumb = class KolBreadcrumb extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -2359,13 +2396,13 @@ export { KolBreadcrumb };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolBreadcrumb, { className: "KolBreadcrumb", filePath: "components.ts", lineNumber: 350 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolBreadcrumb, { className: "KolBreadcrumb", filePath: "components.ts", lineNumber: 352 }); })();
 let KolButton = class KolButton extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
         this.changeDetectorRef = changeDetectorRef;
         this.z = z;
-        this.availableInputProperties = ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value', '_variant'];
+        this.availableInputProperties = ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_inline', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value', '_variant'];
         changeDetectorRef.detach();
         const originalTagName = 'kol-button';
         this.tagName = typeof tagNameTransformer === 'function' ? tagNameTransformer(originalTagName) : originalTagName;
@@ -2385,9 +2422,9 @@ KolButton.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolButton, select
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.replaceTagDirective = _t.first);
-    } }, inputs: { _accessKey: "_accessKey", _ariaControls: "_ariaControls", _ariaDescription: "_ariaDescription", _ariaExpanded: "_ariaExpanded", _ariaSelected: "_ariaSelected", _customClass: "_customClass", _disabled: "_disabled", _hideLabel: "_hideLabel", _icons: "_icons", _id: "_id", _label: "_label", _name: "_name", _on: "_on", _role: "_role", _shortKey: "_shortKey", _tooltipAlign: "_tooltipAlign", _type: "_type", _value: "_value", _variant: "_variant" }, features: [i0.ɵɵProvidersFeature([
+    } }, inputs: { _accessKey: "_accessKey", _ariaControls: "_ariaControls", _ariaDescription: "_ariaDescription", _ariaExpanded: "_ariaExpanded", _ariaSelected: "_ariaSelected", _customClass: "_customClass", _disabled: "_disabled", _hideLabel: "_hideLabel", _icons: "_icons", _id: "_id", _inline: "_inline", _label: "_label", _name: "_name", _on: "_on", _role: "_role", _shortKey: "_shortKey", _tooltipAlign: "_tooltipAlign", _type: "_type", _value: "_value", _variant: "_variant" }, features: [i0.ɵɵProvidersFeature([
             { provide: StencilProxyComponent, useExisting: forwardRef(() => KolButton) }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaExpanded", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_id", "_label", "_name", "_on", "_role", "_shortKey", "_tooltipAlign", "_type", "_value", "_variant", 4, "replaceTag"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaExpanded", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_id", "_label", "_name", "_on", "_role", "_shortKey", "_tooltipAlign", "_type", "_value", "_variant"], [4, "ngTemplateOutlet"]], template: function KolButton_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaExpanded", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_id", "_inline", "_label", "_name", "_on", "_role", "_shortKey", "_tooltipAlign", "_type", "_value", "_variant", 4, "replaceTag"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaExpanded", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_id", "_inline", "_label", "_name", "_on", "_role", "_shortKey", "_tooltipAlign", "_type", "_value", "_variant"], [4, "ngTemplateOutlet"]], template: function KolButton_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, KolButton_ng_container_0_Template, 2, 1, "ng-container", 3)(1, KolButton_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, KolButton_ng_template_3_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
@@ -2396,7 +2433,7 @@ KolButton.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolButton, select
     } }, encapsulation: 2, changeDetection: 0 });
 KolButton = __decorate([
     ProxyCmp({
-        inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value', '_variant'],
+        inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_inline', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value', '_variant'],
         methods: ['getValue', 'kolFocus']
     })
 ], KolButton);
@@ -2409,7 +2446,7 @@ export { KolButton };
                 template: `
     <ng-container *ngIf="hasTagNameTransformer; else defaultCase">
       <stencil-ng-proxy
-        [_accessKey]="_accessKey" [_ariaControls]="_ariaControls" [_ariaDescription]="_ariaDescription" [_ariaExpanded]="_ariaExpanded" [_ariaSelected]="_ariaSelected" [_customClass]="_customClass" [_disabled]="_disabled" [_hideLabel]="_hideLabel" [_icons]="_icons" [_id]="_id" [_label]="_label" [_name]="_name" [_on]="_on" [_role]="_role" [_shortKey]="_shortKey" [_tooltipAlign]="_tooltipAlign" [_type]="_type" [_value]="_value" [_variant]="_variant"
+        [_accessKey]="_accessKey" [_ariaControls]="_ariaControls" [_ariaDescription]="_ariaDescription" [_ariaExpanded]="_ariaExpanded" [_ariaSelected]="_ariaSelected" [_customClass]="_customClass" [_disabled]="_disabled" [_hideLabel]="_hideLabel" [_icons]="_icons" [_id]="_id" [_inline]="_inline" [_label]="_label" [_name]="_name" [_on]="_on" [_role]="_role" [_shortKey]="_shortKey" [_tooltipAlign]="_tooltipAlign" [_type]="_type" [_value]="_value" [_variant]="_variant"
         *replaceTag="tagName"
         #replaceTagHost
       >
@@ -2425,7 +2462,7 @@ export { KolButton };
       <ng-content></ng-content>
     </ng-template>`,
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value', '_variant'],
+                inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_inline', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value', '_variant'],
                 providers: [
                     { provide: StencilProxyComponent, useExisting: forwardRef(() => KolButton) }
                 ],
@@ -2434,13 +2471,13 @@ export { KolButton };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolButton, { className: "KolButton", filePath: "components.ts", lineNumber: 410 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolButton, { className: "KolButton", filePath: "components.ts", lineNumber: 412 }); })();
 let KolButtonLink = class KolButtonLink extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
         this.changeDetectorRef = changeDetectorRef;
         this.z = z;
-        this.availableInputProperties = ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_disabled', '_hideLabel', '_icons', '_id', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value', '_variant'];
+        this.availableInputProperties = ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_disabled', '_hideLabel', '_icons', '_id', '_inline', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value'];
         changeDetectorRef.detach();
         const originalTagName = 'kol-button-link';
         this.tagName = typeof tagNameTransformer === 'function' ? tagNameTransformer(originalTagName) : originalTagName;
@@ -2460,9 +2497,9 @@ KolButtonLink.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolButtonLink
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.replaceTagDirective = _t.first);
-    } }, inputs: { _accessKey: "_accessKey", _ariaControls: "_ariaControls", _ariaDescription: "_ariaDescription", _ariaExpanded: "_ariaExpanded", _ariaSelected: "_ariaSelected", _disabled: "_disabled", _hideLabel: "_hideLabel", _icons: "_icons", _id: "_id", _label: "_label", _name: "_name", _on: "_on", _role: "_role", _shortKey: "_shortKey", _tooltipAlign: "_tooltipAlign", _type: "_type", _value: "_value", _variant: "_variant" }, features: [i0.ɵɵProvidersFeature([
+    } }, inputs: { _accessKey: "_accessKey", _ariaControls: "_ariaControls", _ariaDescription: "_ariaDescription", _ariaExpanded: "_ariaExpanded", _ariaSelected: "_ariaSelected", _disabled: "_disabled", _hideLabel: "_hideLabel", _icons: "_icons", _id: "_id", _inline: "_inline", _label: "_label", _name: "_name", _on: "_on", _role: "_role", _shortKey: "_shortKey", _tooltipAlign: "_tooltipAlign", _type: "_type", _value: "_value" }, features: [i0.ɵɵProvidersFeature([
             { provide: StencilProxyComponent, useExisting: forwardRef(() => KolButtonLink) }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaExpanded", "_ariaSelected", "_disabled", "_hideLabel", "_icons", "_id", "_label", "_name", "_on", "_role", "_shortKey", "_tooltipAlign", "_type", "_value", "_variant", 4, "replaceTag"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaExpanded", "_ariaSelected", "_disabled", "_hideLabel", "_icons", "_id", "_label", "_name", "_on", "_role", "_shortKey", "_tooltipAlign", "_type", "_value", "_variant"], [4, "ngTemplateOutlet"]], template: function KolButtonLink_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaExpanded", "_ariaSelected", "_disabled", "_hideLabel", "_icons", "_id", "_inline", "_label", "_name", "_on", "_role", "_shortKey", "_tooltipAlign", "_type", "_value", 4, "replaceTag"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaExpanded", "_ariaSelected", "_disabled", "_hideLabel", "_icons", "_id", "_inline", "_label", "_name", "_on", "_role", "_shortKey", "_tooltipAlign", "_type", "_value"], [4, "ngTemplateOutlet"]], template: function KolButtonLink_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, KolButtonLink_ng_container_0_Template, 2, 1, "ng-container", 3)(1, KolButtonLink_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, KolButtonLink_ng_template_3_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
@@ -2471,7 +2508,7 @@ KolButtonLink.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolButtonLink
     } }, encapsulation: 2, changeDetection: 0 });
 KolButtonLink = __decorate([
     ProxyCmp({
-        inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_disabled', '_hideLabel', '_icons', '_id', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value', '_variant'],
+        inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_disabled', '_hideLabel', '_icons', '_id', '_inline', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value'],
         methods: ['getValue', 'kolFocus']
     })
 ], KolButtonLink);
@@ -2484,7 +2521,7 @@ export { KolButtonLink };
                 template: `
     <ng-container *ngIf="hasTagNameTransformer; else defaultCase">
       <stencil-ng-proxy
-        [_accessKey]="_accessKey" [_ariaControls]="_ariaControls" [_ariaDescription]="_ariaDescription" [_ariaExpanded]="_ariaExpanded" [_ariaSelected]="_ariaSelected" [_disabled]="_disabled" [_hideLabel]="_hideLabel" [_icons]="_icons" [_id]="_id" [_label]="_label" [_name]="_name" [_on]="_on" [_role]="_role" [_shortKey]="_shortKey" [_tooltipAlign]="_tooltipAlign" [_type]="_type" [_value]="_value" [_variant]="_variant"
+        [_accessKey]="_accessKey" [_ariaControls]="_ariaControls" [_ariaDescription]="_ariaDescription" [_ariaExpanded]="_ariaExpanded" [_ariaSelected]="_ariaSelected" [_disabled]="_disabled" [_hideLabel]="_hideLabel" [_icons]="_icons" [_id]="_id" [_inline]="_inline" [_label]="_label" [_name]="_name" [_on]="_on" [_role]="_role" [_shortKey]="_shortKey" [_tooltipAlign]="_tooltipAlign" [_type]="_type" [_value]="_value"
         *replaceTag="tagName"
         #replaceTagHost
       >
@@ -2500,7 +2537,7 @@ export { KolButtonLink };
       <ng-content></ng-content>
     </ng-template>`,
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_disabled', '_hideLabel', '_icons', '_id', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value', '_variant'],
+                inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaExpanded', '_ariaSelected', '_disabled', '_hideLabel', '_icons', '_id', '_inline', '_label', '_name', '_on', '_role', '_shortKey', '_tooltipAlign', '_type', '_value'],
                 providers: [
                     { provide: StencilProxyComponent, useExisting: forwardRef(() => KolButtonLink) }
                 ],
@@ -2509,7 +2546,7 @@ export { KolButtonLink };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolButtonLink, { className: "KolButtonLink", filePath: "components.ts", lineNumber: 487 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolButtonLink, { className: "KolButtonLink", filePath: "components.ts", lineNumber: 490 }); })();
 let KolCard = class KolCard extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -2583,7 +2620,7 @@ export { KolCard };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolCard, { className: "KolCard", filePath: "components.ts", lineNumber: 562 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolCard, { className: "KolCard", filePath: "components.ts", lineNumber: 565 }); })();
 let KolCardWc = class KolCardWc extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -2657,13 +2694,13 @@ export { KolCardWc };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolCardWc, { className: "KolCardWc", filePath: "components.ts", lineNumber: 623 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolCardWc, { className: "KolCardWc", filePath: "components.ts", lineNumber: 626 }); })();
 let KolCombobox = class KolCombobox extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
         this.changeDetectorRef = changeDetectorRef;
         this.z = z;
-        this.availableInputProperties = ['_accessKey', '_disabled', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_placeholder', '_required', '_shortKey', '_suggestions', '_tooltipAlign', '_touched', '_value'];
+        this.availableInputProperties = ['_accessKey', '_disabled', '_hasClearButton', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_placeholder', '_required', '_shortKey', '_suggestions', '_tooltipAlign', '_touched', '_value'];
         changeDetectorRef.detach();
         const originalTagName = 'kol-combobox';
         this.tagName = typeof tagNameTransformer === 'function' ? tagNameTransformer(originalTagName) : originalTagName;
@@ -2683,9 +2720,9 @@ KolCombobox.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolCombobox, se
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.replaceTagDirective = _t.first);
-    } }, inputs: { _accessKey: "_accessKey", _disabled: "_disabled", _hideLabel: "_hideLabel", _hideMsg: "_hideMsg", _hint: "_hint", _icons: "_icons", _id: "_id", _label: "_label", _msg: "_msg", _name: "_name", _on: "_on", _placeholder: "_placeholder", _required: "_required", _shortKey: "_shortKey", _suggestions: "_suggestions", _tooltipAlign: "_tooltipAlign", _touched: "_touched", _value: "_value" }, features: [i0.ɵɵProvidersFeature([
+    } }, inputs: { _accessKey: "_accessKey", _disabled: "_disabled", _hasClearButton: "_hasClearButton", _hideLabel: "_hideLabel", _hideMsg: "_hideMsg", _hint: "_hint", _icons: "_icons", _id: "_id", _label: "_label", _msg: "_msg", _name: "_name", _on: "_on", _placeholder: "_placeholder", _required: "_required", _shortKey: "_shortKey", _suggestions: "_suggestions", _tooltipAlign: "_tooltipAlign", _touched: "_touched", _value: "_value" }, features: [i0.ɵɵProvidersFeature([
             { provide: StencilProxyComponent, useExisting: forwardRef(() => KolCombobox) }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_disabled", "_hideLabel", "_hideMsg", "_hint", "_icons", "_id", "_label", "_msg", "_name", "_on", "_placeholder", "_required", "_shortKey", "_suggestions", "_tooltipAlign", "_touched", "_value", 4, "replaceTag"], [3, "_accessKey", "_disabled", "_hideLabel", "_hideMsg", "_hint", "_icons", "_id", "_label", "_msg", "_name", "_on", "_placeholder", "_required", "_shortKey", "_suggestions", "_tooltipAlign", "_touched", "_value"], [4, "ngTemplateOutlet"]], template: function KolCombobox_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_disabled", "_hasClearButton", "_hideLabel", "_hideMsg", "_hint", "_icons", "_id", "_label", "_msg", "_name", "_on", "_placeholder", "_required", "_shortKey", "_suggestions", "_tooltipAlign", "_touched", "_value", 4, "replaceTag"], [3, "_accessKey", "_disabled", "_hasClearButton", "_hideLabel", "_hideMsg", "_hint", "_icons", "_id", "_label", "_msg", "_name", "_on", "_placeholder", "_required", "_shortKey", "_suggestions", "_tooltipAlign", "_touched", "_value"], [4, "ngTemplateOutlet"]], template: function KolCombobox_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, KolCombobox_ng_container_0_Template, 2, 1, "ng-container", 3)(1, KolCombobox_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, KolCombobox_ng_template_3_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
@@ -2694,7 +2731,7 @@ KolCombobox.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolCombobox, se
     } }, encapsulation: 2, changeDetection: 0 });
 KolCombobox = __decorate([
     ProxyCmp({
-        inputs: ['_accessKey', '_disabled', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_placeholder', '_required', '_shortKey', '_suggestions', '_tooltipAlign', '_touched', '_value'],
+        inputs: ['_accessKey', '_disabled', '_hasClearButton', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_placeholder', '_required', '_shortKey', '_suggestions', '_tooltipAlign', '_touched', '_value'],
         methods: ['getValue', 'kolFocus']
     })
 ], KolCombobox);
@@ -2707,7 +2744,7 @@ export { KolCombobox };
                 template: `
     <ng-container *ngIf="hasTagNameTransformer; else defaultCase">
       <stencil-ng-proxy
-        [_accessKey]="_accessKey" [_disabled]="_disabled" [_hideLabel]="_hideLabel" [_hideMsg]="_hideMsg" [_hint]="_hint" [_icons]="_icons" [_id]="_id" [_label]="_label" [_msg]="_msg" [_name]="_name" [_on]="_on" [_placeholder]="_placeholder" [_required]="_required" [_shortKey]="_shortKey" [_suggestions]="_suggestions" [_tooltipAlign]="_tooltipAlign" [_touched]="_touched" [_value]="_value"
+        [_accessKey]="_accessKey" [_disabled]="_disabled" [_hasClearButton]="_hasClearButton" [_hideLabel]="_hideLabel" [_hideMsg]="_hideMsg" [_hint]="_hint" [_icons]="_icons" [_id]="_id" [_label]="_label" [_msg]="_msg" [_name]="_name" [_on]="_on" [_placeholder]="_placeholder" [_required]="_required" [_shortKey]="_shortKey" [_suggestions]="_suggestions" [_tooltipAlign]="_tooltipAlign" [_touched]="_touched" [_value]="_value"
         *replaceTag="tagName"
         #replaceTagHost
       >
@@ -2723,7 +2760,7 @@ export { KolCombobox };
       <ng-content></ng-content>
     </ng-template>`,
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['_accessKey', '_disabled', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_placeholder', '_required', '_shortKey', '_suggestions', '_tooltipAlign', '_touched', '_value'],
+                inputs: ['_accessKey', '_disabled', '_hasClearButton', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_placeholder', '_required', '_shortKey', '_suggestions', '_tooltipAlign', '_touched', '_value'],
                 providers: [
                     { provide: StencilProxyComponent, useExisting: forwardRef(() => KolCombobox) }
                 ],
@@ -2732,7 +2769,7 @@ export { KolCombobox };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolCombobox, { className: "KolCombobox", filePath: "components.ts", lineNumber: 685 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolCombobox, { className: "KolCombobox", filePath: "components.ts", lineNumber: 688 }); })();
 let KolDetails = class KolDetails extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -2807,7 +2844,7 @@ export { KolDetails };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolDetails, { className: "KolDetails", filePath: "components.ts", lineNumber: 761 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolDetails, { className: "KolDetails", filePath: "components.ts", lineNumber: 765 }); })();
 let KolDrawer = class KolDrawer extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -2882,7 +2919,7 @@ export { KolDrawer };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolDrawer, { className: "KolDrawer", filePath: "components.ts", lineNumber: 824 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolDrawer, { className: "KolDrawer", filePath: "components.ts", lineNumber: 828 }); })();
 let KolForm = class KolForm extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -2957,7 +2994,7 @@ export { KolForm };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolForm, { className: "KolForm", filePath: "components.ts", lineNumber: 887 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolForm, { className: "KolForm", filePath: "components.ts", lineNumber: 891 }); })();
 let KolHeading = class KolHeading extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3031,7 +3068,7 @@ export { KolHeading };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolHeading, { className: "KolHeading", filePath: "components.ts", lineNumber: 947 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolHeading, { className: "KolHeading", filePath: "components.ts", lineNumber: 951 }); })();
 let KolIcon = class KolIcon extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3105,7 +3142,7 @@ export { KolIcon };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolIcon, { className: "KolIcon", filePath: "components.ts", lineNumber: 1007 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolIcon, { className: "KolIcon", filePath: "components.ts", lineNumber: 1011 }); })();
 let KolImage = class KolImage extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3179,7 +3216,7 @@ export { KolImage };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolImage, { className: "KolImage", filePath: "components.ts", lineNumber: 1066 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolImage, { className: "KolImage", filePath: "components.ts", lineNumber: 1070 }); })();
 let KolInputCheckbox = class KolInputCheckbox extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3254,7 +3291,7 @@ export { KolInputCheckbox };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputCheckbox, { className: "KolInputCheckbox", filePath: "components.ts", lineNumber: 1129 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputCheckbox, { className: "KolInputCheckbox", filePath: "components.ts", lineNumber: 1133 }); })();
 let KolInputColor = class KolInputColor extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3329,7 +3366,7 @@ export { KolInputColor };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputColor, { className: "KolInputColor", filePath: "components.ts", lineNumber: 1207 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputColor, { className: "KolInputColor", filePath: "components.ts", lineNumber: 1211 }); })();
 let KolInputDate = class KolInputDate extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3404,7 +3441,7 @@ export { KolInputDate };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputDate, { className: "KolInputDate", filePath: "components.ts", lineNumber: 1283 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputDate, { className: "KolInputDate", filePath: "components.ts", lineNumber: 1287 }); })();
 let KolInputEmail = class KolInputEmail extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3479,7 +3516,7 @@ export { KolInputEmail };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputEmail, { className: "KolInputEmail", filePath: "components.ts", lineNumber: 1365 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputEmail, { className: "KolInputEmail", filePath: "components.ts", lineNumber: 1369 }); })();
 let KolInputFile = class KolInputFile extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3554,7 +3591,7 @@ export { KolInputFile };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputFile, { className: "KolInputFile", filePath: "components.ts", lineNumber: 1449 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputFile, { className: "KolInputFile", filePath: "components.ts", lineNumber: 1453 }); })();
 let KolInputNumber = class KolInputNumber extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3629,7 +3666,7 @@ export { KolInputNumber };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputNumber, { className: "KolInputNumber", filePath: "components.ts", lineNumber: 1525 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputNumber, { className: "KolInputNumber", filePath: "components.ts", lineNumber: 1529 }); })();
 let KolInputPassword = class KolInputPassword extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3704,7 +3741,7 @@ export { KolInputPassword };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputPassword, { className: "KolInputPassword", filePath: "components.ts", lineNumber: 1607 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputPassword, { className: "KolInputPassword", filePath: "components.ts", lineNumber: 1611 }); })();
 let KolInputRadio = class KolInputRadio extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3779,7 +3816,7 @@ export { KolInputRadio };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputRadio, { className: "KolInputRadio", filePath: "components.ts", lineNumber: 1690 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputRadio, { className: "KolInputRadio", filePath: "components.ts", lineNumber: 1694 }); })();
 let KolInputRange = class KolInputRange extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3854,7 +3891,7 @@ export { KolInputRange };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputRange, { className: "KolInputRange", filePath: "components.ts", lineNumber: 1763 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputRange, { className: "KolInputRange", filePath: "components.ts", lineNumber: 1767 }); })();
 let KolInputText = class KolInputText extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -3892,7 +3929,7 @@ KolInputText.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolInputText,
 KolInputText = __decorate([
     ProxyCmp({
         inputs: ['_accessKey', '_autoComplete', '_disabled', '_hasCounter', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_maxLength', '_maxLengthBehavior', '_msg', '_name', '_on', '_pattern', '_placeholder', '_readOnly', '_required', '_shortKey', '_smartButton', '_spellCheck', '_suggestions', '_tooltipAlign', '_touched', '_type', '_value'],
-        methods: ['getValue', 'kolFocus']
+        methods: ['getValue', 'kolFocus', 'selectionStart', 'selectioconEnd', 'setSelectionRange', 'setSelectionStart', 'setRangeText']
     })
 ], KolInputText);
 export { KolInputText };
@@ -3929,7 +3966,7 @@ export { KolInputText };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputText, { className: "KolInputText", filePath: "components.ts", lineNumber: 1841 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolInputText, { className: "KolInputText", filePath: "components.ts", lineNumber: 1845 }); })();
 let KolKolibri = class KolKolibri extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -4003,13 +4040,13 @@ export { KolKolibri };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolKolibri, { className: "KolKolibri", filePath: "components.ts", lineNumber: 1925 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolKolibri, { className: "KolKolibri", filePath: "components.ts", lineNumber: 1929 }); })();
 let KolLink = class KolLink extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
         this.changeDetectorRef = changeDetectorRef;
         this.z = z;
-        this.availableInputProperties = ['_accessKey', '_ariaControls', '_ariaCurrentValue', '_ariaDescription', '_ariaExpanded', '_disabled', '_download', '_hideLabel', '_href', '_icons', '_label', '_on', '_role', '_shortKey', '_target', '_tooltipAlign', '_variant'];
+        this.availableInputProperties = ['_accessKey', '_ariaControls', '_ariaCurrentValue', '_ariaDescription', '_ariaExpanded', '_disabled', '_download', '_hideLabel', '_href', '_icons', '_inline', '_label', '_on', '_role', '_shortKey', '_target', '_tooltipAlign'];
         changeDetectorRef.detach();
         const originalTagName = 'kol-link';
         this.tagName = typeof tagNameTransformer === 'function' ? tagNameTransformer(originalTagName) : originalTagName;
@@ -4029,9 +4066,9 @@ KolLink.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolLink, selectors:
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.replaceTagDirective = _t.first);
-    } }, inputs: { _accessKey: "_accessKey", _ariaControls: "_ariaControls", _ariaCurrentValue: "_ariaCurrentValue", _ariaDescription: "_ariaDescription", _ariaExpanded: "_ariaExpanded", _disabled: "_disabled", _download: "_download", _hideLabel: "_hideLabel", _href: "_href", _icons: "_icons", _label: "_label", _on: "_on", _role: "_role", _shortKey: "_shortKey", _target: "_target", _tooltipAlign: "_tooltipAlign", _variant: "_variant" }, features: [i0.ɵɵProvidersFeature([
+    } }, inputs: { _accessKey: "_accessKey", _ariaControls: "_ariaControls", _ariaCurrentValue: "_ariaCurrentValue", _ariaDescription: "_ariaDescription", _ariaExpanded: "_ariaExpanded", _disabled: "_disabled", _download: "_download", _hideLabel: "_hideLabel", _href: "_href", _icons: "_icons", _inline: "_inline", _label: "_label", _on: "_on", _role: "_role", _shortKey: "_shortKey", _target: "_target", _tooltipAlign: "_tooltipAlign" }, features: [i0.ɵɵProvidersFeature([
             { provide: StencilProxyComponent, useExisting: forwardRef(() => KolLink) }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_ariaControls", "_ariaCurrentValue", "_ariaDescription", "_ariaExpanded", "_disabled", "_download", "_hideLabel", "_href", "_icons", "_label", "_on", "_role", "_shortKey", "_target", "_tooltipAlign", "_variant", 4, "replaceTag"], [3, "_accessKey", "_ariaControls", "_ariaCurrentValue", "_ariaDescription", "_ariaExpanded", "_disabled", "_download", "_hideLabel", "_href", "_icons", "_label", "_on", "_role", "_shortKey", "_target", "_tooltipAlign", "_variant"], [4, "ngTemplateOutlet"]], template: function KolLink_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_ariaControls", "_ariaCurrentValue", "_ariaDescription", "_ariaExpanded", "_disabled", "_download", "_hideLabel", "_href", "_icons", "_inline", "_label", "_on", "_role", "_shortKey", "_target", "_tooltipAlign", 4, "replaceTag"], [3, "_accessKey", "_ariaControls", "_ariaCurrentValue", "_ariaDescription", "_ariaExpanded", "_disabled", "_download", "_hideLabel", "_href", "_icons", "_inline", "_label", "_on", "_role", "_shortKey", "_target", "_tooltipAlign"], [4, "ngTemplateOutlet"]], template: function KolLink_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, KolLink_ng_container_0_Template, 2, 1, "ng-container", 3)(1, KolLink_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, KolLink_ng_template_3_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
@@ -4040,7 +4077,7 @@ KolLink.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolLink, selectors:
     } }, encapsulation: 2, changeDetection: 0 });
 KolLink = __decorate([
     ProxyCmp({
-        inputs: ['_accessKey', '_ariaControls', '_ariaCurrentValue', '_ariaDescription', '_ariaExpanded', '_disabled', '_download', '_hideLabel', '_href', '_icons', '_label', '_on', '_role', '_shortKey', '_target', '_tooltipAlign', '_variant'],
+        inputs: ['_accessKey', '_ariaControls', '_ariaCurrentValue', '_ariaDescription', '_ariaExpanded', '_disabled', '_download', '_hideLabel', '_href', '_icons', '_inline', '_label', '_on', '_role', '_shortKey', '_target', '_tooltipAlign'],
         methods: ['kolFocus']
     })
 ], KolLink);
@@ -4053,7 +4090,7 @@ export { KolLink };
                 template: `
     <ng-container *ngIf="hasTagNameTransformer; else defaultCase">
       <stencil-ng-proxy
-        [_accessKey]="_accessKey" [_ariaControls]="_ariaControls" [_ariaCurrentValue]="_ariaCurrentValue" [_ariaDescription]="_ariaDescription" [_ariaExpanded]="_ariaExpanded" [_disabled]="_disabled" [_download]="_download" [_hideLabel]="_hideLabel" [_href]="_href" [_icons]="_icons" [_label]="_label" [_on]="_on" [_role]="_role" [_shortKey]="_shortKey" [_target]="_target" [_tooltipAlign]="_tooltipAlign" [_variant]="_variant"
+        [_accessKey]="_accessKey" [_ariaControls]="_ariaControls" [_ariaCurrentValue]="_ariaCurrentValue" [_ariaDescription]="_ariaDescription" [_ariaExpanded]="_ariaExpanded" [_disabled]="_disabled" [_download]="_download" [_hideLabel]="_hideLabel" [_href]="_href" [_icons]="_icons" [_inline]="_inline" [_label]="_label" [_on]="_on" [_role]="_role" [_shortKey]="_shortKey" [_target]="_target" [_tooltipAlign]="_tooltipAlign"
         *replaceTag="tagName"
         #replaceTagHost
       >
@@ -4069,7 +4106,7 @@ export { KolLink };
       <ng-content></ng-content>
     </ng-template>`,
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['_accessKey', '_ariaControls', '_ariaCurrentValue', '_ariaDescription', '_ariaExpanded', '_disabled', '_download', '_hideLabel', '_href', '_icons', '_label', '_on', '_role', '_shortKey', '_target', '_tooltipAlign', '_variant'],
+                inputs: ['_accessKey', '_ariaControls', '_ariaCurrentValue', '_ariaDescription', '_ariaExpanded', '_disabled', '_download', '_hideLabel', '_href', '_icons', '_inline', '_label', '_on', '_role', '_shortKey', '_target', '_tooltipAlign'],
                 providers: [
                     { provide: StencilProxyComponent, useExisting: forwardRef(() => KolLink) }
                 ],
@@ -4078,7 +4115,7 @@ export { KolLink };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolLink, { className: "KolLink", filePath: "components.ts", lineNumber: 1985 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolLink, { className: "KolLink", filePath: "components.ts", lineNumber: 1989 }); })();
 let KolLinkButton = class KolLinkButton extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -4153,7 +4190,7 @@ export { KolLinkButton };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolLinkButton, { className: "KolLinkButton", filePath: "components.ts", lineNumber: 2060 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolLinkButton, { className: "KolLinkButton", filePath: "components.ts", lineNumber: 2064 }); })();
 let KolModal = class KolModal extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -4228,13 +4265,13 @@ export { KolModal };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolModal, { className: "KolModal", filePath: "components.ts", lineNumber: 2135 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolModal, { className: "KolModal", filePath: "components.ts", lineNumber: 2139 }); })();
 let KolNav = class KolNav extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
         this.changeDetectorRef = changeDetectorRef;
         this.z = z;
-        this.availableInputProperties = ['_collapsible', '_hasCompactButton', '_hasIconsWhenExpanded', '_hideLabel', '_label', '_links', '_orientation'];
+        this.availableInputProperties = ['_collapsible', '_hasCompactButton', '_hasIconsWhenExpanded', '_hideLabel', '_label', '_links'];
         changeDetectorRef.detach();
         const originalTagName = 'kol-nav';
         this.tagName = typeof tagNameTransformer === 'function' ? tagNameTransformer(originalTagName) : originalTagName;
@@ -4254,9 +4291,9 @@ KolNav.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolNav, selectors: [
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.replaceTagDirective = _t.first);
-    } }, inputs: { _collapsible: "_collapsible", _hasCompactButton: "_hasCompactButton", _hasIconsWhenExpanded: "_hasIconsWhenExpanded", _hideLabel: "_hideLabel", _label: "_label", _links: "_links", _orientation: "_orientation" }, features: [i0.ɵɵProvidersFeature([
+    } }, inputs: { _collapsible: "_collapsible", _hasCompactButton: "_hasCompactButton", _hasIconsWhenExpanded: "_hasIconsWhenExpanded", _hideLabel: "_hideLabel", _label: "_label", _links: "_links" }, features: [i0.ɵɵProvidersFeature([
             { provide: StencilProxyComponent, useExisting: forwardRef(() => KolNav) }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_collapsible", "_hasCompactButton", "_hasIconsWhenExpanded", "_hideLabel", "_label", "_links", "_orientation", 4, "replaceTag"], [3, "_collapsible", "_hasCompactButton", "_hasIconsWhenExpanded", "_hideLabel", "_label", "_links", "_orientation"], [4, "ngTemplateOutlet"]], template: function KolNav_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_collapsible", "_hasCompactButton", "_hasIconsWhenExpanded", "_hideLabel", "_label", "_links", 4, "replaceTag"], [3, "_collapsible", "_hasCompactButton", "_hasIconsWhenExpanded", "_hideLabel", "_label", "_links"], [4, "ngTemplateOutlet"]], template: function KolNav_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, KolNav_ng_container_0_Template, 2, 1, "ng-container", 3)(1, KolNav_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, KolNav_ng_template_3_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
@@ -4265,7 +4302,7 @@ KolNav.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolNav, selectors: [
     } }, encapsulation: 2, changeDetection: 0 });
 KolNav = __decorate([
     ProxyCmp({
-        inputs: ['_collapsible', '_hasCompactButton', '_hasIconsWhenExpanded', '_hideLabel', '_label', '_links', '_orientation']
+        inputs: ['_collapsible', '_hasCompactButton', '_hasIconsWhenExpanded', '_hideLabel', '_label', '_links']
     })
 ], KolNav);
 export { KolNav };
@@ -4277,7 +4314,7 @@ export { KolNav };
                 template: `
     <ng-container *ngIf="hasTagNameTransformer; else defaultCase">
       <stencil-ng-proxy
-        [_collapsible]="_collapsible" [_hasCompactButton]="_hasCompactButton" [_hasIconsWhenExpanded]="_hasIconsWhenExpanded" [_hideLabel]="_hideLabel" [_label]="_label" [_links]="_links" [_orientation]="_orientation"
+        [_collapsible]="_collapsible" [_hasCompactButton]="_hasCompactButton" [_hasIconsWhenExpanded]="_hasIconsWhenExpanded" [_hideLabel]="_hideLabel" [_label]="_label" [_links]="_links"
         *replaceTag="tagName"
         #replaceTagHost
       >
@@ -4293,7 +4330,7 @@ export { KolNav };
       <ng-content></ng-content>
     </ng-template>`,
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['_collapsible', '_hasCompactButton', '_hasIconsWhenExpanded', '_hideLabel', '_label', '_links', '_orientation'],
+                inputs: ['_collapsible', '_hasCompactButton', '_hasIconsWhenExpanded', '_hideLabel', '_label', '_links'],
                 providers: [
                     { provide: StencilProxyComponent, useExisting: forwardRef(() => KolNav) }
                 ],
@@ -4302,7 +4339,7 @@ export { KolNav };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolNav, { className: "KolNav", filePath: "components.ts", lineNumber: 2196 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolNav, { className: "KolNav", filePath: "components.ts", lineNumber: 2200 }); })();
 let KolPagination = class KolPagination extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -4376,7 +4413,7 @@ export { KolPagination };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolPagination, { className: "KolPagination", filePath: "components.ts", lineNumber: 2260 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolPagination, { className: "KolPagination", filePath: "components.ts", lineNumber: 2263 }); })();
 let KolPaginationWc = class KolPaginationWc extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -4450,13 +4487,13 @@ export { KolPaginationWc };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolPaginationWc, { className: "KolPaginationWc", filePath: "components.ts", lineNumber: 2328 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolPaginationWc, { className: "KolPaginationWc", filePath: "components.ts", lineNumber: 2331 }); })();
 let KolPopoverButton = class KolPopoverButton extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
         this.changeDetectorRef = changeDetectorRef;
         this.z = z;
-        this.availableInputProperties = ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'];
+        this.availableInputProperties = ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_inline', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'];
         changeDetectorRef.detach();
         const originalTagName = 'kol-popover-button';
         this.tagName = typeof tagNameTransformer === 'function' ? tagNameTransformer(originalTagName) : originalTagName;
@@ -4476,9 +4513,9 @@ KolPopoverButton.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolPopover
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.replaceTagDirective = _t.first);
-    } }, inputs: { _accessKey: "_accessKey", _ariaControls: "_ariaControls", _ariaDescription: "_ariaDescription", _ariaSelected: "_ariaSelected", _customClass: "_customClass", _disabled: "_disabled", _hideLabel: "_hideLabel", _icons: "_icons", _id: "_id", _label: "_label", _name: "_name", _on: "_on", _popoverAlign: "_popoverAlign", _role: "_role", _shortKey: "_shortKey", _tabIndex: "_tabIndex", _tooltipAlign: "_tooltipAlign", _type: "_type", _value: "_value", _variant: "_variant" }, features: [i0.ɵɵProvidersFeature([
+    } }, inputs: { _accessKey: "_accessKey", _ariaControls: "_ariaControls", _ariaDescription: "_ariaDescription", _ariaSelected: "_ariaSelected", _customClass: "_customClass", _disabled: "_disabled", _hideLabel: "_hideLabel", _icons: "_icons", _id: "_id", _inline: "_inline", _label: "_label", _name: "_name", _on: "_on", _popoverAlign: "_popoverAlign", _role: "_role", _shortKey: "_shortKey", _tabIndex: "_tabIndex", _tooltipAlign: "_tooltipAlign", _type: "_type", _value: "_value", _variant: "_variant" }, features: [i0.ɵɵProvidersFeature([
             { provide: StencilProxyComponent, useExisting: forwardRef(() => KolPopoverButton) }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_id", "_label", "_name", "_on", "_popoverAlign", "_role", "_shortKey", "_tabIndex", "_tooltipAlign", "_type", "_value", "_variant", 4, "replaceTag"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_id", "_label", "_name", "_on", "_popoverAlign", "_role", "_shortKey", "_tabIndex", "_tooltipAlign", "_type", "_value", "_variant"], [4, "ngTemplateOutlet"]], template: function KolPopoverButton_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_id", "_inline", "_label", "_name", "_on", "_popoverAlign", "_role", "_shortKey", "_tabIndex", "_tooltipAlign", "_type", "_value", "_variant", 4, "replaceTag"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_id", "_inline", "_label", "_name", "_on", "_popoverAlign", "_role", "_shortKey", "_tabIndex", "_tooltipAlign", "_type", "_value", "_variant"], [4, "ngTemplateOutlet"]], template: function KolPopoverButton_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, KolPopoverButton_ng_container_0_Template, 2, 1, "ng-container", 3)(1, KolPopoverButton_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, KolPopoverButton_ng_template_3_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
@@ -4487,8 +4524,8 @@ KolPopoverButton.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolPopover
     } }, encapsulation: 2, changeDetection: 0 });
 KolPopoverButton = __decorate([
     ProxyCmp({
-        inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'],
-        methods: ['hidePopover']
+        inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_inline', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'],
+        methods: ['hidePopover', 'showPopover', 'kolFocus']
     })
 ], KolPopoverButton);
 export { KolPopoverButton };
@@ -4500,7 +4537,7 @@ export { KolPopoverButton };
                 template: `
     <ng-container *ngIf="hasTagNameTransformer; else defaultCase">
       <stencil-ng-proxy
-        [_accessKey]="_accessKey" [_ariaControls]="_ariaControls" [_ariaDescription]="_ariaDescription" [_ariaSelected]="_ariaSelected" [_customClass]="_customClass" [_disabled]="_disabled" [_hideLabel]="_hideLabel" [_icons]="_icons" [_id]="_id" [_label]="_label" [_name]="_name" [_on]="_on" [_popoverAlign]="_popoverAlign" [_role]="_role" [_shortKey]="_shortKey" [_tabIndex]="_tabIndex" [_tooltipAlign]="_tooltipAlign" [_type]="_type" [_value]="_value" [_variant]="_variant"
+        [_accessKey]="_accessKey" [_ariaControls]="_ariaControls" [_ariaDescription]="_ariaDescription" [_ariaSelected]="_ariaSelected" [_customClass]="_customClass" [_disabled]="_disabled" [_hideLabel]="_hideLabel" [_icons]="_icons" [_id]="_id" [_inline]="_inline" [_label]="_label" [_name]="_name" [_on]="_on" [_popoverAlign]="_popoverAlign" [_role]="_role" [_shortKey]="_shortKey" [_tabIndex]="_tabIndex" [_tooltipAlign]="_tooltipAlign" [_type]="_type" [_value]="_value" [_variant]="_variant"
         *replaceTag="tagName"
         #replaceTagHost
       >
@@ -4516,7 +4553,7 @@ export { KolPopoverButton };
       <ng-content></ng-content>
     </ng-template>`,
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'],
+                inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_id', '_inline', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'],
                 providers: [
                     { provide: StencilProxyComponent, useExisting: forwardRef(() => KolPopoverButton) }
                 ],
@@ -4525,13 +4562,13 @@ export { KolPopoverButton };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolPopoverButton, { className: "KolPopoverButton", filePath: "components.ts", lineNumber: 2397 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolPopoverButton, { className: "KolPopoverButton", filePath: "components.ts", lineNumber: 2400 }); })();
 let KolPopoverButtonWc = class KolPopoverButtonWc extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
         this.changeDetectorRef = changeDetectorRef;
         this.z = z;
-        this.availableInputProperties = ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'];
+        this.availableInputProperties = ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_inline', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'];
         changeDetectorRef.detach();
         const originalTagName = 'kol-popover-button-wc';
         this.tagName = typeof tagNameTransformer === 'function' ? tagNameTransformer(originalTagName) : originalTagName;
@@ -4551,9 +4588,9 @@ KolPopoverButtonWc.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolPopov
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.replaceTagDirective = _t.first);
-    } }, inputs: { _accessKey: "_accessKey", _ariaControls: "_ariaControls", _ariaDescription: "_ariaDescription", _ariaSelected: "_ariaSelected", _customClass: "_customClass", _disabled: "_disabled", _hideLabel: "_hideLabel", _icons: "_icons", _label: "_label", _name: "_name", _on: "_on", _popoverAlign: "_popoverAlign", _role: "_role", _shortKey: "_shortKey", _tabIndex: "_tabIndex", _tooltipAlign: "_tooltipAlign", _type: "_type", _value: "_value", _variant: "_variant" }, features: [i0.ɵɵProvidersFeature([
+    } }, inputs: { _accessKey: "_accessKey", _ariaControls: "_ariaControls", _ariaDescription: "_ariaDescription", _ariaSelected: "_ariaSelected", _customClass: "_customClass", _disabled: "_disabled", _hideLabel: "_hideLabel", _icons: "_icons", _inline: "_inline", _label: "_label", _name: "_name", _on: "_on", _popoverAlign: "_popoverAlign", _role: "_role", _shortKey: "_shortKey", _tabIndex: "_tabIndex", _tooltipAlign: "_tooltipAlign", _type: "_type", _value: "_value", _variant: "_variant" }, features: [i0.ɵɵProvidersFeature([
             { provide: StencilProxyComponent, useExisting: forwardRef(() => KolPopoverButtonWc) }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_label", "_name", "_on", "_popoverAlign", "_role", "_shortKey", "_tabIndex", "_tooltipAlign", "_type", "_value", "_variant", 4, "replaceTag"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_label", "_name", "_on", "_popoverAlign", "_role", "_shortKey", "_tabIndex", "_tooltipAlign", "_type", "_value", "_variant"], [4, "ngTemplateOutlet"]], template: function KolPopoverButtonWc_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_inline", "_label", "_name", "_on", "_popoverAlign", "_role", "_shortKey", "_tabIndex", "_tooltipAlign", "_type", "_value", "_variant", 4, "replaceTag"], [3, "_accessKey", "_ariaControls", "_ariaDescription", "_ariaSelected", "_customClass", "_disabled", "_hideLabel", "_icons", "_inline", "_label", "_name", "_on", "_popoverAlign", "_role", "_shortKey", "_tabIndex", "_tooltipAlign", "_type", "_value", "_variant"], [4, "ngTemplateOutlet"]], template: function KolPopoverButtonWc_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, KolPopoverButtonWc_ng_container_0_Template, 2, 1, "ng-container", 3)(1, KolPopoverButtonWc_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, KolPopoverButtonWc_ng_template_3_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
@@ -4562,8 +4599,8 @@ KolPopoverButtonWc.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolPopov
     } }, encapsulation: 2, changeDetection: 0 });
 KolPopoverButtonWc = __decorate([
     ProxyCmp({
-        inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'],
-        methods: ['hidePopover']
+        inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_inline', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'],
+        methods: ['hidePopover', 'showPopover', 'kolFocus']
     })
 ], KolPopoverButtonWc);
 export { KolPopoverButtonWc };
@@ -4575,7 +4612,7 @@ export { KolPopoverButtonWc };
                 template: `
     <ng-container *ngIf="hasTagNameTransformer; else defaultCase">
       <stencil-ng-proxy
-        [_accessKey]="_accessKey" [_ariaControls]="_ariaControls" [_ariaDescription]="_ariaDescription" [_ariaSelected]="_ariaSelected" [_customClass]="_customClass" [_disabled]="_disabled" [_hideLabel]="_hideLabel" [_icons]="_icons" [_label]="_label" [_name]="_name" [_on]="_on" [_popoverAlign]="_popoverAlign" [_role]="_role" [_shortKey]="_shortKey" [_tabIndex]="_tabIndex" [_tooltipAlign]="_tooltipAlign" [_type]="_type" [_value]="_value" [_variant]="_variant"
+        [_accessKey]="_accessKey" [_ariaControls]="_ariaControls" [_ariaDescription]="_ariaDescription" [_ariaSelected]="_ariaSelected" [_customClass]="_customClass" [_disabled]="_disabled" [_hideLabel]="_hideLabel" [_icons]="_icons" [_inline]="_inline" [_label]="_label" [_name]="_name" [_on]="_on" [_popoverAlign]="_popoverAlign" [_role]="_role" [_shortKey]="_shortKey" [_tabIndex]="_tabIndex" [_tooltipAlign]="_tooltipAlign" [_type]="_type" [_value]="_value" [_variant]="_variant"
         *replaceTag="tagName"
         #replaceTagHost
       >
@@ -4591,7 +4628,7 @@ export { KolPopoverButtonWc };
       <ng-content></ng-content>
     </ng-template>`,
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'],
+                inputs: ['_accessKey', '_ariaControls', '_ariaDescription', '_ariaSelected', '_customClass', '_disabled', '_hideLabel', '_icons', '_inline', '_label', '_name', '_on', '_popoverAlign', '_role', '_shortKey', '_tabIndex', '_tooltipAlign', '_type', '_value', '_variant'],
                 providers: [
                     { provide: StencilProxyComponent, useExisting: forwardRef(() => KolPopoverButtonWc) }
                 ],
@@ -4600,7 +4637,7 @@ export { KolPopoverButtonWc };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolPopoverButtonWc, { className: "KolPopoverButtonWc", filePath: "components.ts", lineNumber: 2475 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolPopoverButtonWc, { className: "KolPopoverButtonWc", filePath: "components.ts", lineNumber: 2479 }); })();
 let KolProgress = class KolProgress extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -4674,7 +4711,7 @@ export { KolProgress };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolProgress, { className: "KolProgress", filePath: "components.ts", lineNumber: 2551 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolProgress, { className: "KolProgress", filePath: "components.ts", lineNumber: 2556 }); })();
 let KolQuote = class KolQuote extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -4748,7 +4785,7 @@ export { KolQuote };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolQuote, { className: "KolQuote", filePath: "components.ts", lineNumber: 2613 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolQuote, { className: "KolQuote", filePath: "components.ts", lineNumber: 2618 }); })();
 let KolSelect = class KolSelect extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -4823,13 +4860,88 @@ export { KolSelect };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSelect, { className: "KolSelect", filePath: "components.ts", lineNumber: 2675 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSelect, { className: "KolSelect", filePath: "components.ts", lineNumber: 2680 }); })();
+let KolSelectWc = class KolSelectWc extends StencilProxyComponent {
+    constructor(changeDetectorRef, r, z) {
+        super();
+        this.changeDetectorRef = changeDetectorRef;
+        this.z = z;
+        this.availableInputProperties = ['_accessKey', '_disabled', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_multiple', '_name', '_on', '_options', '_required', '_rows', '_shortKey', '_tabIndex', '_tooltipAlign', '_touched', '_value'];
+        changeDetectorRef.detach();
+        const originalTagName = 'kol-select-wc';
+        this.tagName = typeof tagNameTransformer === 'function' ? tagNameTransformer(originalTagName) : originalTagName;
+        this.hasTagNameTransformer = typeof tagNameTransformer === 'function';
+        this.el = r.nativeElement;
+    }
+    ngOnChanges() {
+        if (typeof this.replaceTagDirective === 'object' && this.replaceTagDirective !== null && typeof this.replaceTagDirective.handlePropertyChanges === 'function') {
+            this.replaceTagDirective.handlePropertyChanges();
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+};
+KolSelectWc.ɵfac = function KolSelectWc_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KolSelectWc)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
+KolSelectWc.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolSelectWc, selectors: [["kol-select-wc"]], viewQuery: function KolSelectWc_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(ReplaceTagDirective, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.replaceTagDirective = _t.first);
+    } }, inputs: { _accessKey: "_accessKey", _disabled: "_disabled", _hideLabel: "_hideLabel", _hideMsg: "_hideMsg", _hint: "_hint", _icons: "_icons", _id: "_id", _label: "_label", _msg: "_msg", _multiple: "_multiple", _name: "_name", _on: "_on", _options: "_options", _required: "_required", _rows: "_rows", _shortKey: "_shortKey", _tabIndex: "_tabIndex", _tooltipAlign: "_tooltipAlign", _touched: "_touched", _value: "_value" }, features: [i0.ɵɵProvidersFeature([
+            { provide: StencilProxyComponent, useExisting: forwardRef(() => KolSelectWc) }
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_disabled", "_hideLabel", "_hideMsg", "_hint", "_icons", "_id", "_label", "_msg", "_multiple", "_name", "_on", "_options", "_required", "_rows", "_shortKey", "_tabIndex", "_tooltipAlign", "_touched", "_value", 4, "replaceTag"], [3, "_accessKey", "_disabled", "_hideLabel", "_hideMsg", "_hint", "_icons", "_id", "_label", "_msg", "_multiple", "_name", "_on", "_options", "_required", "_rows", "_shortKey", "_tabIndex", "_tooltipAlign", "_touched", "_value"], [4, "ngTemplateOutlet"]], template: function KolSelectWc_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵprojectionDef();
+        i0.ɵɵtemplate(0, KolSelectWc_ng_container_0_Template, 2, 1, "ng-container", 3)(1, KolSelectWc_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, KolSelectWc_ng_template_3_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+    } if (rf & 2) {
+        const defaultCase_r3 = i0.ɵɵreference(2);
+        i0.ɵɵproperty("ngIf", ctx.hasTagNameTransformer)("ngIfElse", defaultCase_r3);
+    } }, encapsulation: 2, changeDetection: 0 });
+KolSelectWc = __decorate([
+    ProxyCmp({
+        inputs: ['_accessKey', '_disabled', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_multiple', '_name', '_on', '_options', '_required', '_rows', '_shortKey', '_tabIndex', '_tooltipAlign', '_touched', '_value'],
+        methods: ['getValue', 'kolFocus']
+    })
+], KolSelectWc);
+export { KolSelectWc };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KolSelectWc, [{
+        type: Component,
+        args: [{
+                selector: 'kol-select-wc',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <ng-container *ngIf="hasTagNameTransformer; else defaultCase">
+      <stencil-ng-proxy
+        [_accessKey]="_accessKey" [_disabled]="_disabled" [_hideLabel]="_hideLabel" [_hideMsg]="_hideMsg" [_hint]="_hint" [_icons]="_icons" [_id]="_id" [_label]="_label" [_msg]="_msg" [_multiple]="_multiple" [_name]="_name" [_on]="_on" [_options]="_options" [_required]="_required" [_rows]="_rows" [_shortKey]="_shortKey" [_tabIndex]="_tabIndex" [_tooltipAlign]="_tooltipAlign" [_touched]="_touched" [_value]="_value"
+        *replaceTag="tagName"
+        #replaceTagHost
+      >
+        <ng-container *ngTemplateOutlet="ngContentOutlet"></ng-container>
+      </stencil-ng-proxy>
+    </ng-container>
+
+    <ng-template #defaultCase>
+      <ng-container *ngTemplateOutlet="ngContentOutlet"></ng-container>
+    </ng-template>
+
+    <ng-template #ngContentOutlet>
+      <ng-content></ng-content>
+    </ng-template>`,
+                // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                inputs: ['_accessKey', '_disabled', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_multiple', '_name', '_on', '_options', '_required', '_rows', '_shortKey', '_tabIndex', '_tooltipAlign', '_touched', '_value'],
+                providers: [
+                    { provide: StencilProxyComponent, useExisting: forwardRef(() => KolSelectWc) }
+                ],
+            }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], { replaceTagDirective: [{
+            type: ViewChild,
+            args: [ReplaceTagDirective]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSelectWc, { className: "KolSelectWc", filePath: "components.ts", lineNumber: 2758 }); })();
 let KolSingleSelect = class KolSingleSelect extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
         this.changeDetectorRef = changeDetectorRef;
         this.z = z;
-        this.availableInputProperties = ['_accessKey', '_disabled', '_hideClearButton', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_options', '_placeholder', '_required', '_rows', '_shortKey', '_tooltipAlign', '_touched', '_value'];
+        this.availableInputProperties = ['_accessKey', '_disabled', '_hasClearButton', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_options', '_placeholder', '_required', '_rows', '_shortKey', '_tooltipAlign', '_touched', '_value'];
         changeDetectorRef.detach();
         const originalTagName = 'kol-single-select';
         this.tagName = typeof tagNameTransformer === 'function' ? tagNameTransformer(originalTagName) : originalTagName;
@@ -4849,9 +4961,9 @@ KolSingleSelect.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolSingleSe
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.replaceTagDirective = _t.first);
-    } }, inputs: { _accessKey: "_accessKey", _disabled: "_disabled", _hideClearButton: "_hideClearButton", _hideLabel: "_hideLabel", _hideMsg: "_hideMsg", _hint: "_hint", _icons: "_icons", _id: "_id", _label: "_label", _msg: "_msg", _name: "_name", _on: "_on", _options: "_options", _placeholder: "_placeholder", _required: "_required", _rows: "_rows", _shortKey: "_shortKey", _tooltipAlign: "_tooltipAlign", _touched: "_touched", _value: "_value" }, features: [i0.ɵɵProvidersFeature([
+    } }, inputs: { _accessKey: "_accessKey", _disabled: "_disabled", _hasClearButton: "_hasClearButton", _hideLabel: "_hideLabel", _hideMsg: "_hideMsg", _hint: "_hint", _icons: "_icons", _id: "_id", _label: "_label", _msg: "_msg", _name: "_name", _on: "_on", _options: "_options", _placeholder: "_placeholder", _required: "_required", _rows: "_rows", _shortKey: "_shortKey", _tooltipAlign: "_tooltipAlign", _touched: "_touched", _value: "_value" }, features: [i0.ɵɵProvidersFeature([
             { provide: StencilProxyComponent, useExisting: forwardRef(() => KolSingleSelect) }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_disabled", "_hideClearButton", "_hideLabel", "_hideMsg", "_hint", "_icons", "_id", "_label", "_msg", "_name", "_on", "_options", "_placeholder", "_required", "_rows", "_shortKey", "_tooltipAlign", "_touched", "_value", 4, "replaceTag"], [3, "_accessKey", "_disabled", "_hideClearButton", "_hideLabel", "_hideMsg", "_hint", "_icons", "_id", "_label", "_msg", "_name", "_on", "_options", "_placeholder", "_required", "_rows", "_shortKey", "_tooltipAlign", "_touched", "_value"], [4, "ngTemplateOutlet"]], template: function KolSingleSelect_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 5, vars: 2, consts: [["defaultCase", ""], ["ngContentOutlet", ""], ["replaceTagHost", ""], [4, "ngIf", "ngIfElse"], [3, "_accessKey", "_disabled", "_hasClearButton", "_hideLabel", "_hideMsg", "_hint", "_icons", "_id", "_label", "_msg", "_name", "_on", "_options", "_placeholder", "_required", "_rows", "_shortKey", "_tooltipAlign", "_touched", "_value", 4, "replaceTag"], [3, "_accessKey", "_disabled", "_hasClearButton", "_hideLabel", "_hideMsg", "_hint", "_icons", "_id", "_label", "_msg", "_name", "_on", "_options", "_placeholder", "_required", "_rows", "_shortKey", "_tooltipAlign", "_touched", "_value"], [4, "ngTemplateOutlet"]], template: function KolSingleSelect_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, KolSingleSelect_ng_container_0_Template, 2, 1, "ng-container", 3)(1, KolSingleSelect_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, KolSingleSelect_ng_template_3_Template, 1, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
@@ -4860,7 +4972,7 @@ KolSingleSelect.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolSingleSe
     } }, encapsulation: 2, changeDetection: 0 });
 KolSingleSelect = __decorate([
     ProxyCmp({
-        inputs: ['_accessKey', '_disabled', '_hideClearButton', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_options', '_placeholder', '_required', '_rows', '_shortKey', '_tooltipAlign', '_touched', '_value'],
+        inputs: ['_accessKey', '_disabled', '_hasClearButton', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_options', '_placeholder', '_required', '_rows', '_shortKey', '_tooltipAlign', '_touched', '_value'],
         methods: ['getValue', 'kolFocus']
     })
 ], KolSingleSelect);
@@ -4873,7 +4985,7 @@ export { KolSingleSelect };
                 template: `
     <ng-container *ngIf="hasTagNameTransformer; else defaultCase">
       <stencil-ng-proxy
-        [_accessKey]="_accessKey" [_disabled]="_disabled" [_hideClearButton]="_hideClearButton" [_hideLabel]="_hideLabel" [_hideMsg]="_hideMsg" [_hint]="_hint" [_icons]="_icons" [_id]="_id" [_label]="_label" [_msg]="_msg" [_name]="_name" [_on]="_on" [_options]="_options" [_placeholder]="_placeholder" [_required]="_required" [_rows]="_rows" [_shortKey]="_shortKey" [_tooltipAlign]="_tooltipAlign" [_touched]="_touched" [_value]="_value"
+        [_accessKey]="_accessKey" [_disabled]="_disabled" [_hasClearButton]="_hasClearButton" [_hideLabel]="_hideLabel" [_hideMsg]="_hideMsg" [_hint]="_hint" [_icons]="_icons" [_id]="_id" [_label]="_label" [_msg]="_msg" [_name]="_name" [_on]="_on" [_options]="_options" [_placeholder]="_placeholder" [_required]="_required" [_rows]="_rows" [_shortKey]="_shortKey" [_tooltipAlign]="_tooltipAlign" [_touched]="_touched" [_value]="_value"
         *replaceTag="tagName"
         #replaceTagHost
       >
@@ -4889,7 +5001,7 @@ export { KolSingleSelect };
       <ng-content></ng-content>
     </ng-template>`,
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['_accessKey', '_disabled', '_hideClearButton', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_options', '_placeholder', '_required', '_rows', '_shortKey', '_tooltipAlign', '_touched', '_value'],
+                inputs: ['_accessKey', '_disabled', '_hasClearButton', '_hideLabel', '_hideMsg', '_hint', '_icons', '_id', '_label', '_msg', '_name', '_on', '_options', '_placeholder', '_required', '_rows', '_shortKey', '_tooltipAlign', '_touched', '_value'],
                 providers: [
                     { provide: StencilProxyComponent, useExisting: forwardRef(() => KolSingleSelect) }
                 ],
@@ -4898,7 +5010,7 @@ export { KolSingleSelect };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSingleSelect, { className: "KolSingleSelect", filePath: "components.ts", lineNumber: 2753 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSingleSelect, { className: "KolSingleSelect", filePath: "components.ts", lineNumber: 2836 }); })();
 let KolSkipNav = class KolSkipNav extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -4935,7 +5047,8 @@ KolSkipNav.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KolSkipNav, sele
     } }, encapsulation: 2, changeDetection: 0 });
 KolSkipNav = __decorate([
     ProxyCmp({
-        inputs: ['_label', '_links']
+        inputs: ['_label', '_links'],
+        methods: ['kolFocus']
     })
 ], KolSkipNav);
 export { KolSkipNav };
@@ -4972,7 +5085,7 @@ export { KolSkipNav };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSkipNav, { className: "KolSkipNav", filePath: "components.ts", lineNumber: 2830 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSkipNav, { className: "KolSkipNav", filePath: "components.ts", lineNumber: 2914 }); })();
 let KolSpin = class KolSpin extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5046,7 +5159,7 @@ export { KolSpin };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSpin, { className: "KolSpin", filePath: "components.ts", lineNumber: 2889 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSpin, { className: "KolSpin", filePath: "components.ts", lineNumber: 2973 }); })();
 let KolSplitButton = class KolSplitButton extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5121,7 +5234,7 @@ export { KolSplitButton };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSplitButton, { className: "KolSplitButton", filePath: "components.ts", lineNumber: 2950 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolSplitButton, { className: "KolSplitButton", filePath: "components.ts", lineNumber: 3034 }); })();
 let KolTableStateful = class KolTableStateful extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5196,7 +5309,7 @@ export { KolTableStateful };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTableStateful, { className: "KolTableStateful", filePath: "components.ts", lineNumber: 3027 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTableStateful, { className: "KolTableStateful", filePath: "components.ts", lineNumber: 3111 }); })();
 let KolTableStateless = class KolTableStateless extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5270,7 +5383,7 @@ export { KolTableStateless };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTableStateless, { className: "KolTableStateless", filePath: "components.ts", lineNumber: 3096 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTableStateless, { className: "KolTableStateless", filePath: "components.ts", lineNumber: 3180 }); })();
 let KolTabs = class KolTabs extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5344,7 +5457,7 @@ export { KolTabs };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTabs, { className: "KolTabs", filePath: "components.ts", lineNumber: 3162 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTabs, { className: "KolTabs", filePath: "components.ts", lineNumber: 3246 }); })();
 let KolTextarea = class KolTextarea extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5419,7 +5532,7 @@ export { KolTextarea };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTextarea, { className: "KolTextarea", filePath: "components.ts", lineNumber: 3227 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTextarea, { className: "KolTextarea", filePath: "components.ts", lineNumber: 3311 }); })();
 let KolToastContainer = class KolToastContainer extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5493,7 +5606,7 @@ export { KolToastContainer };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolToastContainer, { className: "KolToastContainer", filePath: "components.ts", lineNumber: 3309 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolToastContainer, { className: "KolToastContainer", filePath: "components.ts", lineNumber: 3393 }); })();
 let KolToolbar = class KolToolbar extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5567,7 +5680,7 @@ export { KolToolbar };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolToolbar, { className: "KolToolbar", filePath: "components.ts", lineNumber: 3367 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolToolbar, { className: "KolToolbar", filePath: "components.ts", lineNumber: 3451 }); })();
 let KolTree = class KolTree extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5641,7 +5754,7 @@ export { KolTree };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTree, { className: "KolTree", filePath: "components.ts", lineNumber: 3427 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTree, { className: "KolTree", filePath: "components.ts", lineNumber: 3511 }); })();
 let KolTreeItem = class KolTreeItem extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5716,7 +5829,7 @@ export { KolTreeItem };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTreeItem, { className: "KolTreeItem", filePath: "components.ts", lineNumber: 3486 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTreeItem, { className: "KolTreeItem", filePath: "components.ts", lineNumber: 3570 }); })();
 let KolTreeItemWc = class KolTreeItemWc extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5791,7 +5904,7 @@ export { KolTreeItemWc };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTreeItemWc, { className: "KolTreeItemWc", filePath: "components.ts", lineNumber: 3548 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolTreeItemWc, { className: "KolTreeItemWc", filePath: "components.ts", lineNumber: 3632 }); })();
 let KolVersion = class KolVersion extends StencilProxyComponent {
     constructor(changeDetectorRef, r, z) {
         super();
@@ -5865,4 +5978,4 @@ export { KolVersion };
             type: ViewChild,
             args: [ReplaceTagDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolVersion, { className: "KolVersion", filePath: "components.ts", lineNumber: 3609 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KolVersion, { className: "KolVersion", filePath: "components.ts", lineNumber: 3693 }); })();