vueless 0.0.627 → 0.0.629

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.627",
+  "version": "0.0.629",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -66,7 +66,7 @@
     "@vue/eslint-config-prettier": "^10.0.0",
     "@vue/eslint-config-typescript": "^14.1.1",
     "@vue/tsconfig": "^0.5.1",
-    "@vueless/storybook": "^0.0.52",
+    "@vueless/storybook": "^0.0.53",
     "@vueless/web-types": "^0.0.21",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",

package/ui.form-date-picker/UDatePicker.vue

@@ -300,33 +300,27 @@ watchEffect(() => {
       @keydown.esc="deactivate"
       @keydown="onTextInputKeyDown"
     >
-      <template #left>
-        <!-- @slot Use it add something before the date. -->
-        <slot name="left" />
-      </template>
-
-      <template #left-icon="{ iconName }">
+      <template #left="{ iconName }">
         <!--
-          @slot Use it add an icon before the date.
+          @slot Use it add something before the date.
           @binding {string} icon-name
         -->
         <slot name="left-icon" :icon-name="iconName" />
       </template>
 
       <template #right-icon="{ iconName }">
+        <slot name="left" :icon-name="iconName" />
+      </template>
+
+      <template #right="{ iconName }">
         <!--
-          @slot Use it add an icon after the date.
+          @slot Use it add something after the date.
           @binding {string} icon-name
         -->
-        <slot name="right-icon" :icon-name="iconName">
+        <slot name="right" :icon-name="iconName">
           <UIcon :name="iconName" color="gray" v-bind="rightIconAttrs" />
         </slot>
       </template>
-
-      <template #right>
-        <!-- @slot Use it add something after the date. -->
-        <slot name="right" />
-      </template>
     </UInput>
 
     <Transition v-bind="config.datepickerCalendarTransition">

package/ui.form-date-picker/storybook/stories.ts

@@ -178,27 +178,3 @@ export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = {
   rightIcon: "star",
 };
-
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -600,30 +600,23 @@ watchEffect(() => {
       @focus="activate"
       @keydown.esc="deactivate"
     >
-      <template #left>
-        <!-- @slot Use it to add something before the date. -->
-        <slot name="left" />
-      </template>
-
-      <template #left-icon>
-        <!-- @slot Use it to add icon before the date. -->
-        <slot name="left-icon" />
+      <template #left="{ iconName }">
+        <!--
+          @slot Use it to add something before the date.
+          @binding {string} icon-name
+        -->
+        <slot name="left" :icon-name="iconName" />
       </template>
 
-      <template #right-icon="{ iconName }">
+      <template #right="{ iconName }">
         <!--
-          @slot Use it add an icon after the date.
+          @slot Use it to add something after the date.
           @binding {string} icon-name
         -->
-        <slot name="right-icon" :icon-name="iconName">
+        <slot name="right" :icon-name="iconName">
           <UIcon :name="iconName" color="gray" v-bind="rightIconAttrs" />
         </slot>
       </template>
-
-      <template #right>
-        <!-- @slot Use it to add something after the date. -->
-        <slot name="right" />
-      </template>
     </UInput>
 
     <div v-if="isVariant.button" v-bind="buttonWrapperAttrs">

package/ui.form-date-picker-range/storybook/stories.ts

@@ -194,32 +194,6 @@ LeftIcon.args = { leftIcon: "star", variant: "input" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star", variant: "input" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  variant: "input",
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  variant: "input",
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
 export const LeftSlot = DefaultTemplate.bind({});
 LeftSlot.args = {
   variant: "input",

package/ui.form-input/UInput.vue

@@ -203,8 +203,7 @@ useMutationObserver(leftSlotWrapperRef, (mutations) => {
 });
 
 function setLabelPosition() {
-  const shouldAlignLabelOnTop =
-    !hasSlotContent(slots["left-icon"]) && !hasSlotContent(slots["left"]) && !props.leftIcon;
+  const shouldAlignLabelOnTop = !hasSlotContent(slots["left"]) && !props.leftIcon;
 
   if (props.labelAlign === "top" || shouldAlignLabelOnTop) {
     return;
@@ -245,10 +244,11 @@ const {
   wrapperAttrs,
   inputLabelAttrs,
   passwordIconAttrs,
-  leftIconWrapperAttrs,
   leftIconAttrs,
+  leftSlotAttrs,
   rightIconAttrs,
-  rightIconWrapperAttrs,
+  rightSlotAttrs,
+  passwordIconWrapperAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
@@ -267,22 +267,17 @@ const {
     v-bind="inputLabelAttrs"
   >
     <label :for="elementId" v-bind="wrapperAttrs">
-      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
-        <!-- @slot Use it to add something before the text. -->
-        <slot name="left" />
-      </span>
-
       <span
-        v-if="hasSlotContent($slots['left-icon']) || leftIcon"
+        v-if="hasSlotContent($slots['left']) || leftIcon"
+        v-bind="leftSlotAttrs"
         ref="leftSlotWrapperRef"
-        v-bind="leftIconWrapperAttrs"
       >
         <!--
-          @slot Use it to add icon before the text.
+          @slot Use it to add something before the text.
           @binding {string} icon-name
         -->
-        <slot name="left-icon" :icon-name="leftIcon">
-          <UIcon v-if="leftIcon" :name="leftIcon" internal v-bind="leftIconAttrs" />
+        <slot name="left" :icon-name="leftIcon">
+          <UIcon v-if="leftIcon" internal color="inherit" :name="leftIcon" v-bind="leftIconAttrs" />
         </slot>
       </span>
 
@@ -308,7 +303,7 @@ const {
         @copy="onCopy"
       />
 
-      <label v-if="isTypePassword" v-bind="rightIconWrapperAttrs" :for="elementId">
+      <label v-if="isTypePassword" v-bind="passwordIconWrapperAttrs" :for="elementId">
         <UIcon
           v-if="isTypePassword"
           :name="passwordIcon"
@@ -321,18 +316,21 @@ const {
         />
       </label>
 
-      <span v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconWrapperAttrs">
+      <div v-if="hasSlotContent($slots['right']) || rightIcon" v-bind="rightSlotAttrs">
         <!--
-          @slot Use it to add icon after the text.
+          @slot Use it to add something after the text.
           @binding {string} icon-name
         -->
-        <slot name="right-icon" :icon-name="rightIcon">
-          <UIcon v-if="rightIcon" :name="rightIcon" internal v-bind="rightIconAttrs" />
+        <slot name="right" :icon-name="rightIcon">
+          <UIcon
+            v-if="rightIcon"
+            internal
+            color="inherit"
+            :name="rightIcon"
+            v-bind="rightIconAttrs"
+          />
         </slot>
-      </span>
-
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
+      </div>
     </label>
   </ULabel>
 </template>

package/ui.form-input/config.ts

@@ -22,8 +22,6 @@ export default /*tw*/ {
       },
     },
   },
-  rightIconWrapper: "flex items-center justify-end whitespace-nowrap pr-2.5 gap-1 rounded-inherit rounded-l-none",
-  leftIconWrapper: "flex items-center justify-end whitespace-nowrap pl-2.5 gap-1 rounded-inherit rounded-r-none",
   inputIcon: {
     base: "{UIcon}",
     defaults: {
@@ -37,6 +35,9 @@ export default /*tw*/ {
   leftIcon: "{UIcon} {>inputIcon}",
   rightIcon: "{UIcon} {>inputIcon}",
   passwordIcon: "{UIcon} {>inputIcon}",
+  passwordIconWrapper: "flex items-center justify-end whitespace-nowrap pr-2.5 gap-1 rounded-inherit rounded-l-none",
+  leftSlot: "pl-3 flex items-center",
+  rightSlot: "pr-3 flex items-center",
   input: {
     base: `
       block w-full py-2 px-3 font-normal !leading-none text-gray-900 bg-transparent

package/ui.form-input/storybook/stories.ts

@@ -110,36 +110,11 @@ LeftIcon.args = { leftIcon: "star" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="star"
-        color="green"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        interactive
-        name="star"
-        color="green"
-      />
-    </template>
-  `,
-};
-
 export const LeftSlot = DefaultTemplate.bind({});
 LeftSlot.args = {
   slotTemplate: `
     <template #left>
-      <UButton variant="thirdary" filled square noRing label="Filter" class="rounded-r-none h-full" />
+      <UIcon name="star" />
     </template>
   `,
 };
@@ -148,7 +123,7 @@ export const RightSlot = DefaultTemplate.bind({});
 RightSlot.args = {
   slotTemplate: `
     <template #right>
-      <UButton variant="thirdary" filled square noRing label="Filter" class="rounded-l-none" />
+      <UIcon name="star" />
     </template>
   `,
 };

package/ui.form-input-money/UInputMoney.vue

@@ -130,23 +130,19 @@ const { moneyInputAttrs } = useUI<Config>(defaultConfig);
     @input="onInput"
   >
     <template #left>
-      <!-- @slot Use it to add something left. -->
-      <slot name="left" />
-    </template>
-
-    <template #left-icon>
-      <!-- @slot Use it to add icon before the text. -->
-      <slot name="left-icon" />
-    </template>
-
-    <template #right-icon>
-      <!-- @slot Use it to add icon after the text. -->
-      <slot name="right-icon" />
+      <!-- 
+        @slot Use it to add something left. 
+        @binding {string} icon-name
+      -->
+      <slot name="left" :icon-name="leftIcon" />
     </template>
 
     <template #right>
-      <!-- @slot Use it to add something right. -->
-      <slot name="right" />
+      <!-- 
+        @slot Use it to add something right. 
+        @binding {string} icon-name
+      -->
+      <slot name="right" :icon-name="leftIcon" />
     </template>
   </UInput>
 </template>

package/ui.form-input-money/storybook/stories.ts

@@ -125,30 +125,6 @@ LeftIcon.args = { leftIcon: "star" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
 export const LeftSlot = DefaultTemplate.bind({});
 LeftSlot.args = {
   slotTemplate: `

package/ui.form-input-search/UInputSearch.vue

@@ -104,9 +104,14 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-
-const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonAttrs } =
-  useUI<Config>(defaultConfig);
+const {
+  config,
+  searchInputAttrs,
+  searchInputWithButtonAttrs,
+  searchIconAttrs,
+  clearIconAttrs,
+  searchButtonAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -124,7 +129,7 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
     :placeholder="placeholder"
     inputmode="search"
     :left-icon="leftIcon"
-    v-bind="searchInputAttrs"
+    v-bind="searchButtonLabel ? searchInputWithButtonAttrs : searchInputAttrs"
     :data-test="dataTest"
     @update:model-value="onUpdateValue"
     @keyup.enter="onKeyupEnter"
@@ -134,12 +139,7 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
       <slot name="left" />
     </template>
 
-    <template #left-icon>
-      <!-- @slot Use it to add icon before the text. -->
-      <slot name="left-icon" />
-    </template>
-
-    <template #right-icon>
+    <template #right>
       <UIcon
         v-if="localValue"
         internal
@@ -151,10 +151,13 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
         @click="onClickClear"
       />
 
-      <!-- @slot Use it to add icon after the text. -->
+      <!-- 
+        @slot Use it to add something after the text. 
+        @binding {string} icon-name
+      -->
       <slot
-        name="right-icon"
-        :icon-name="config.defaults.searchIcon"
+        name="right"
+        :icon-name="rightIcon || config.defaults.searchIcon"
         :search-button-label="searchButtonLabel"
       >
         <UIcon
@@ -166,12 +169,7 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
           :data-test="`${dataTest}-search-icon`"
           @click="onClickSearch"
         />
-      </slot>
-    </template>
 
-    <template #right>
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right">
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"

package/ui.form-input-search/config.ts

@@ -1,5 +1,9 @@
 export default /*tw*/ {
   searchInput: "{UInput}",
+  searchInputWithButton: {
+    base: "{UInput} {>searchInput}",
+    rightSlot: "pr-0",
+  },
   clearIcon: {
     base: "{UIcon}",
     defaults: {

package/ui.form-input-search/storybook/stories.ts

@@ -86,35 +86,11 @@ LeftIcon.args = { leftIcon: "star" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
 export const LeftSlot = DefaultTemplate.bind({});
 LeftSlot.args = {
   slotTemplate: `
     <template #left>
-      <UButton variant="thirdary" filled square label="Filter" class="rounded-r-none h-full" />
+      <UIcon name="star" />
     </template>
   `,
 };
@@ -123,7 +99,7 @@ export const RightSlot = DefaultTemplate.bind({});
 RightSlot.args = {
   slotTemplate: `
     <template #right>
-      <UButton variant="thirdary" filled square label="Filter" class="rounded-l-none" />
+      <UIcon name="star" />
     </template>
   `,
 };

package/ui.form-select/USelect.vue

@@ -335,11 +335,7 @@ function onMouseDownClear() {
 }
 
 function setLabelPosition() {
-  if (
-    props.labelAlign === "top" ||
-    !hasSlotContent(slots["left"]) ||
-    (!hasSlotContent(slots["left-icon"]) && !props.leftIcon)
-  ) {
+  if (props.labelAlign === "top" || (!hasSlotContent(slots["left"]) && !props.leftIcon)) {
     return;
   }
 
@@ -423,8 +419,8 @@ const {
   selectLabelAttrs,
   wrapperAttrs,
   innerWrapperAttrs,
-  leftIconWrapperAttrs,
-  rightIconWrapperAttrs,
+  leftSlotAttrs,
+  rightSlotAttrs,
   leftIconAttrs,
   rightIconAttrs,
   beforeCaretAttrs,
@@ -473,15 +469,12 @@ const {
       @keydown.enter.tab.stop.self="dropdownListRef?.addPointerElement()"
       @keyup.esc="deactivate"
     >
-      <!-- @slot Use it to add something right. -->
-      <slot name="right" />
-
-      <div v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconWrapperAttrs">
+      <div v-if="hasSlotContent($slots['right']) || rightIcon" v-bind="rightSlotAttrs">
         <!--
-            @slot Use it to add icon right.
+            @slot Use it to add something to the right of input.
             @binding {string} icon-name
           -->
-        <slot name="right-icon" :icon-name="rightIcon">
+        <slot name="right" :icon-name="rightIcon">
           <UIcon v-if="rightIcon" :name="rightIcon" internal v-bind="rightIconAttrs" />
         </slot>
       </div>
@@ -554,24 +547,19 @@ const {
 
       <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">
         <span
-          v-if="hasSlotContent($slots['left-icon']) || leftIcon"
+          v-if="hasSlotContent($slots['left']) || leftIcon"
           ref="leftSlotWrapperRef"
-          v-bind="leftIconWrapperAttrs"
+          v-bind="leftSlotAttrs"
         >
           <!--
-            @slot Use it to add icon left.
+            @slot Use it to add something to the left of input.
             @binding {string} icon-name
           -->
-          <slot name="left-icon" :icon-name="leftIcon">
+          <slot name="left" :icon-name="leftIcon">
             <UIcon v-if="leftIcon" :name="leftIcon" internal v-bind="leftIconAttrs" />
           </slot>
         </span>
 
-        <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
-          <!-- @slot Use it to add something left. -->
-          <slot name="left" />
-        </span>
-
         <div v-if="multiple && localValue?.length" v-bind="selectedLabelsAttrs">
           <div
             v-for="item in localValue as Option[]"

package/ui.form-select/config.ts

@@ -75,10 +75,10 @@ export default /*tw*/ {
       },
     },
   },
-  leftIconWrapper: "pr-1.5",
-  rightIconWrapper: "{>caret} pr-3",
   leftIcon: "{UIcon} {>selectIcon}",
   rightIcon: "{UIcon} {>selectIcon}",
+  leftSlot: "pr-1.5",
+  rightSlot: "{>caret} pr-3",
   beforeCaret: "{>caret}",
   afterCaret: "{>caret} mr-3",
   caret: {

package/ui.form-select/storybook/stories.ts

@@ -290,24 +290,6 @@ LeftIcon.args = { leftIcon: "star" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon name="star" color="green" />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon name="star" color="green" />
-    </template>
-  `,
-};
-
 export const SlotLeft = DefaultTemplate.bind({});
 SlotLeft.args = {
   slotTemplate: `

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.627",
+  "version": "0.0.629",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3101,14 +3101,10 @@
             }
           ],
           "slots": [
-            {
-              "name": "left",
-              "description": "Use it add something before the date."
-            },
             {
               "name": "left-icon",
               "scoped": true,
-              "description": "Use it add an icon before the date.",
+              "description": "Use it add something before the date.",
               "bindings": [
                 {
                   "type": "string",
@@ -3117,19 +3113,24 @@
               ]
             },
             {
-              "name": "right-icon",
+              "name": "left",
               "scoped": true,
-              "description": "Use it add an icon after the date.",
               "bindings": [
                 {
-                  "type": "string",
                   "name": "icon-name"
                 }
               ]
             },
             {
               "name": "right",
-              "description": "Use it add something after the date."
+              "scoped": true,
+              "description": "Use it add something after the date.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                }
+              ]
             }
           ],
           "exposes": [
@@ -3425,16 +3426,8 @@
           "slots": [
             {
               "name": "left",
-              "description": "Use it to add something before the date."
-            },
-            {
-              "name": "left-icon",
-              "description": "Use it to add icon before the date."
-            },
-            {
-              "name": "right-icon",
               "scoped": true,
-              "description": "Use it add an icon after the date.",
+              "description": "Use it to add something before the date.",
               "bindings": [
                 {
                   "type": "string",
@@ -3444,7 +3437,14 @@
             },
             {
               "name": "right",
-              "description": "Use it to add something after the date."
+              "scoped": true,
+              "description": "Use it to add something after the date.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                }
+              ]
             }
           ],
           "source": {
@@ -5998,12 +5998,8 @@
           "slots": [
             {
               "name": "left",
-              "description": "Use it to add something before the text."
-            },
-            {
-              "name": "left-icon",
               "scoped": true,
-              "description": "Use it to add icon before the text.",
+              "description": "Use it to add something before the text.",
               "bindings": [
                 {
                   "type": "string",
@@ -6012,19 +6008,15 @@
               ]
             },
             {
-              "name": "right-icon",
+              "name": "right",
               "scoped": true,
-              "description": "Use it to add icon after the text.",
+              "description": "Use it to add something after the text.",
               "bindings": [
                 {
                   "type": "string",
                   "name": "icon-name"
                 }
               ]
-            },
-            {
-              "name": "right",
-              "description": "Use it to add something after the text."
             }
           ],
           "exposes": [
@@ -6490,19 +6482,25 @@
           "slots": [
             {
               "name": "left",
-              "description": "Use it to add something left."
-            },
-            {
-              "name": "left-icon",
-              "description": "Use it to add icon before the text."
-            },
-            {
-              "name": "right-icon",
-              "description": "Use it to add icon after the text."
+              "scoped": true,
+              "description": "Use it to add something left. ",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                }
+              ]
             },
             {
               "name": "right",
-              "description": "Use it to add something right."
+              "scoped": true,
+              "description": "Use it to add something right. ",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                }
+              ]
             }
           ],
           "exposes": [
@@ -7102,25 +7100,18 @@
               "description": "Use it to add something before the text."
             },
             {
-              "name": "left-icon",
-              "description": "Use it to add icon before the text."
-            },
-            {
-              "name": "right-icon",
+              "name": "right",
               "scoped": true,
-              "description": "Use it to add icon after the text.",
+              "description": "Use it to add something after the text. ",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {
                   "name": "search-button-label"
                 }
               ]
-            },
-            {
-              "name": "right",
-              "description": "Use it to add something after the text."
             }
           ],
           "exposes": [
@@ -10130,12 +10121,8 @@
           "slots": [
             {
               "name": "right",
-              "description": "Use it to add something right."
-            },
-            {
-              "name": "right-icon",
               "scoped": true,
-              "description": "Use it to add icon right.",
+              "description": "Use it to add something to the right of input.",
               "bindings": [
                 {
                   "type": "string",
@@ -10192,9 +10179,9 @@
               ]
             },
             {
-              "name": "left-icon",
+              "name": "left",
               "scoped": true,
-              "description": "Use it to add icon left.",
+              "description": "Use it to add something to the left of input.",
               "bindings": [
                 {
                   "type": "string",
@@ -10202,10 +10189,6 @@
                 }
               ]
             },
-            {
-              "name": "left",
-              "description": "Use it to add something left."
-            },
             {
               "name": "selected-label",
               "scoped": true,