@wix/editor-react-components 1.2765.0 → 1.2767.0

package/dist/site/components/Dropdown/manifest.js

@@ -1,14 +1,17 @@
-import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, N as NativeStateType, E as ELEMENTS, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DesignStates, f as DisplayNames, d as defaultValues, F as FunctionalStateKeys, s as selectors } from "../chunks/constants36.js";
-import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
+import { b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
+import { D as DesignStates, a as DisplayNames, b as TEXT_PROP_STATIC_VALUE_MAX_LENGTH, F as FunctionalStateKeys, e as editorElementClassNames } from "../chunks/constants36.js";
+import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
-import { m as manifestFocusable, e as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
-import { m as manifestValidation } from "../chunks/manifest2.js";
+const basePresetName = "baseDropdown";
 const manifest = {
-  id: "f49b3649-fff3-42b4-8e18-a3cd2b23c2ec",
-  type: "wixEditorElements.Dropdown__DEV__v4",
-  description: "A single-select dropdown input. Visitors pick a value from a list of options (and can clear it when enabled). Options can be set statically or fed dynamically by a connected data source. Turn on search to filter a long list.",
+  id: "d46302be-0629-45c8-bdf3-cdb14c6457c8",
+  type: "wixEditorElements.Dropdown__DEV__v5",
+  description: "A single-select dropdown input. Visitors pick a value from a list of options. Options can be set statically or fed dynamically by a connected data source.",
   installation: {
+    presets: {
+      small: basePresetName,
+      large: basePresetName
+    },
     initialSize: {
       width: {
         sizingType: LAYOUT.SIZING_TYPE.pixels,
@@ -20,12 +23,124 @@ const manifest = {
     }
   },
   editorElement: {
-    selector: getSelector(selectors.root),
+    selector: `.${editorElementClassNames.root}`,
     displayName: DisplayNames.root.elementDisplayName,
     archetype: Archetype.Dropdown,
+    // Bare component (no baked-in visual look) — per
+    // https://wix.slack.com/archives/C088A26Q8TC/p1791288610605529. The
+    // preset CSS file is what actually renders; `presetDefaults` only
+    // pre-fills the panel (see AGENTS.md).
+    presets: {
+      [basePresetName]: {
+        presetCssUrl: `./site/components/Dropdown/presets/${basePresetName}.css`,
+        displayName: DisplayNames.root.presets.baseDropdown,
+        presetDefaults: {
+          elements: {
+            label: {
+              cssProperties: {
+                marginBottom: { defaultValue: "0px" },
+                textAlign: { defaultValue: "start" },
+                font: {
+                  defaultValue: "normal normal 400 16px/1.3em 'Wix Madefor Text', sans-serif"
+                },
+                color: { defaultValue: "rgba(0, 0, 0, 1)" }
+              }
+            },
+            input: {
+              cssProperties: {
+                textAlign: { defaultValue: "start" },
+                font: {
+                  defaultValue: "normal normal 400 16px/1.3em 'Wix Madefor Text', sans-serif"
+                },
+                color: { defaultValue: "rgba(0, 0, 0, 1)" },
+                borderStartStartRadius: { defaultValue: "0px" },
+                borderStartEndRadius: { defaultValue: "0px" },
+                borderEndStartRadius: { defaultValue: "0px" },
+                borderEndEndRadius: { defaultValue: "0px" },
+                paddingTop: { defaultValue: "0px" },
+                paddingBottom: { defaultValue: "0px" },
+                paddingInlineStart: { defaultValue: "0px" },
+                paddingInlineEnd: { defaultValue: "0px" },
+                // Kept (not a "look" default), like List's: a non-transparent
+                // backdrop so the Input stays legible over whatever sits
+                // behind it on the page.
+                background: { defaultValue: "#ffffff" },
+                boxShadow: { defaultValue: "none" },
+                // The one kept visual default: a solid 1px black border, so
+                // the Input's clickable area stays visible/usable before any
+                // template is applied.
+                border: { defaultValue: "1px solid rgba(0, 0, 0, 1)" }
+              },
+              cssCustomProperties: {
+                placeholderColor: { defaultValue: "rgba(0, 0, 0, 1)" }
+              }
+            },
+            list: {
+              cssProperties: {
+                // Kept (not a "look" default): a floating popup needs a
+                // non-transparent backdrop to stay legible at all.
+                background: { defaultValue: "#ffffff" },
+                // The other half of the kept 1px black border.
+                border: { defaultValue: "1px solid rgba(0, 0, 0, 1)" },
+                borderStartStartRadius: { defaultValue: "0px" },
+                borderStartEndRadius: { defaultValue: "0px" },
+                borderEndStartRadius: { defaultValue: "0px" },
+                borderEndEndRadius: { defaultValue: "0px" },
+                paddingTop: { defaultValue: "0px" },
+                paddingBottom: { defaultValue: "0px" },
+                paddingInlineStart: { defaultValue: "0px" },
+                paddingInlineEnd: { defaultValue: "0px" }
+              },
+              cssCustomProperties: {
+                optionsGap: { defaultValue: "0px" }
+              }
+            },
+            option: {
+              cssProperties: {
+                textAlign: { defaultValue: "start" },
+                font: {
+                  defaultValue: "normal normal 400 16px/1.3em 'Wix Madefor Text', sans-serif"
+                },
+                color: { defaultValue: "rgba(0, 0, 0, 1)" },
+                paddingTop: { defaultValue: "0px" },
+                paddingBottom: { defaultValue: "0px" },
+                paddingInlineStart: { defaultValue: "0px" },
+                paddingInlineEnd: { defaultValue: "0px" },
+                background: { defaultValue: "transparent" },
+                border: { defaultValue: "0px solid transparent" },
+                borderStartStartRadius: { defaultValue: "0px" },
+                borderStartEndRadius: { defaultValue: "0px" },
+                borderEndStartRadius: { defaultValue: "0px" },
+                borderEndEndRadius: { defaultValue: "0px" }
+              }
+            },
+            helperText: {
+              cssProperties: {
+                marginTop: { defaultValue: "0px" },
+                textAlign: { defaultValue: "start" },
+                font: {
+                  defaultValue: "normal normal 400 14px/1.3em 'Wix Madefor Text', sans-serif"
+                },
+                color: { defaultValue: "rgba(0, 0, 0, 1)" }
+              }
+            },
+            errorMessage: {
+              cssProperties: {
+                marginTop: { defaultValue: "0px" },
+                textAlign: { defaultValue: "start" },
+                font: {
+                  defaultValue: "normal normal 400 14px/1.3em 'Wix Madefor Text', sans-serif"
+                },
+                color: { defaultValue: "rgba(0, 0, 0, 1)" }
+              }
+            }
+          }
+        }
+      }
+    },
     layout: {
-      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
-      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
       disableStretching: true,
       disablePositioning: false
     },
@@ -40,36 +155,21 @@ const manifest = {
         }
       }
     },
-    // Design states (gated behind the design-states spec so they stay inert in
-    // prod until the experiment is declared). BEM classNames: `<block>--<state>`.
+    // Display-less functional states: force parts visible while they're being
+    // designed (referenced by the list/option/errorMessage elements' visibleState).
     states: {
-      hover: withSpec({
-        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-        displayName: DesignStates.root.hover.displayName,
-        className: DesignStates.root.hover.className,
-        pseudoClass: NativeStateType.hover
-      }),
-      disabled: withSpec({
-        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-        displayName: DesignStates.root.disabled.displayName,
-        className: DesignStates.root.disabled.className,
-        pseudoClass: NativeStateType.disabled,
-        props: { isDisabled: true }
-      }),
-      // Display-less functional states: force hidden parts visible while their
-      // element is designed (referenced by the elements' visibleState).
       [FunctionalStateKeys.previewList]: {
         props: { previewList: true }
       },
-      [FunctionalStateKeys.previewChips]: {
-        props: { previewChips: true }
+      [FunctionalStateKeys.previewError]: {
+        props: { previewError: true }
       }
     },
     displayFilters: {
       states: {
         hide: [
           FunctionalStateKeys.previewList,
-          FunctionalStateKeys.previewChips
+          FunctionalStateKeys.previewError
         ]
       }
     },
@@ -78,21 +178,21 @@ const manifest = {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
           displayName: DisplayNames.root.elements.label,
-          selector: getSelector(selectors.label),
+          selector: `.${editorElementClassNames.label}`,
           behaviors: {
             selectable: false,
             removable: false
           },
-          cssCustomProperties: {
-            labelFont: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
-              displayName: DisplayNames.root.cssCustomProperties.labelFont,
-              defaultValue: "normal normal normal 14px/1.4em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif"
-            },
-            labelColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-              displayName: DisplayNames.root.cssCustomProperties.labelColor
-            }
+          // `font`/`color`/`textDecorationLine`/`textTransform` are bare so
+          // the panel renders one merged "Typography" control — richer than
+          // cssCustomProperties or a `text` displayGroup.
+          cssProperties: {
+            marginBottom: {},
+            textAlign: {},
+            font: {},
+            color: {},
+            textDecorationLine: {},
+            textTransform: {}
           }
         }
       },
@@ -100,25 +200,58 @@ const manifest = {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
           displayName: DisplayNames.root.elements.input,
-          selector: getSelector(selectors.input),
+          selector: `.${editorElementClassNames.input}`,
           behaviors: {
             selectable: false,
             removable: false
           },
-          // Same var names as the root's — element-scoped overrides.
+          // `font`/`color`/`textDecorationLine`/`textTransform` are bare so
+          // the panel renders one merged "Typography" control (see Label's
+          // comment). background/boxShadow/border are bare too — per-state
+          // customization works the same as with cssCustomProperties.
+          // `border` is a shorthand (the panel still exposes color/width/
+          // style individually); no `borderGroup`/`backgroundGroup`, since
+          // those display groups only validate against cssCustomProperties,
+          // not bare properties (confirmed via a real enrichment SPI
+          // rejection, error 15113). Corners/padding stay 4 separate logical
+          // properties each (not a `borderRadius`/`padding` shorthand): those
+          // shorthands are physical-only, so an asymmetric value would land
+          // on the wrong corner/side under RTL.
+          cssProperties: {
+            textAlign: {},
+            font: {},
+            color: {},
+            textDecorationLine: {},
+            textTransform: {},
+            borderStartStartRadius: {},
+            borderStartEndRadius: {},
+            borderEndStartRadius: {},
+            borderEndEndRadius: {},
+            paddingTop: {},
+            paddingBottom: {},
+            paddingInlineStart: {},
+            paddingInlineEnd: {},
+            background: {},
+            boxShadow: {},
+            border: {}
+          },
+          displayGroups: {
+            // placeholderColor renders through the same Typography-style
+            // control as Input's own text, instead of a standalone swatch
+            // (matches Tabs' menu-item text pattern).
+            placeholderGroup: {
+              displayName: "Placeholder",
+              groupType: DISPLAY_GROUPS.GROUP_TYPE.text,
+              [DISPLAY_GROUPS.GROUP_TYPE.text]: {
+                color: "placeholderColor"
+              }
+            }
+          },
+          // No defaultValue here — every default lives in the preset above.
+          // `placeholderColor` has no literal CSS property of its own (it
+          // targets the placeholder span, not Input's own text color), so
+          // it stays a cssCustomProperty.
           cssCustomProperties: {
-            backgroundColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
-              displayName: DisplayNames.root.cssCustomProperties.backgroundColor
-            },
-            borderColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
-              displayName: DisplayNames.root.cssCustomProperties.borderColor
-            },
-            textColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-              displayName: DisplayNames.root.cssCustomProperties.textColor
-            },
             placeholderColor: {
               cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
               displayName: DisplayNames.root.cssCustomProperties.placeholderColor
@@ -137,74 +270,22 @@ const manifest = {
               className: DesignStates.input.focus.className,
               pseudoClass: NativeStateType.focus
             }),
+            // No native pseudo-class exists for "invalid" (Base UI's
+            // Combobox.Trigger doesn't render as a real `<input>`) — this
+            // state's export is scoped to this `className` instead, so
+            // Dropdown.tsx applies it for real whenever `inErrorState` is true
+            // (not just during design preview), same as Option's `selected`.
+            error: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.input.error.displayName,
+              className: DesignStates.input.error.className
+            }),
             disabled: withSpec({
               spec: IS_SUPPORT_DESIGN_STATE_SPEC,
               displayName: DesignStates.input.disabled.displayName,
               className: DesignStates.input.disabled.className,
               pseudoClass: NativeStateType.disabled,
-              props: { isDisabled: true }
-            })
-          }
-        }
-      },
-      trigger: {
-        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
-        inlineElement: {
-          displayName: DisplayNames.root.elements.trigger,
-          selector: getSelector(selectors.trigger),
-          behaviors: {
-            selectable: false,
-            removable: false
-          },
-          cssCustomProperties: {
-            backgroundColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
-              displayName: DisplayNames.root.cssCustomProperties.backgroundColor
-            },
-            borderColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
-              displayName: DisplayNames.root.cssCustomProperties.borderColor
-            },
-            textColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-              displayName: DisplayNames.root.cssCustomProperties.textColor
-            }
-          },
-          states: {
-            hover: withSpec({
-              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-              displayName: DesignStates.trigger.hover.displayName,
-              className: DesignStates.trigger.hover.className,
-              pseudoClass: NativeStateType.hover
-            }),
-            selected: withSpec({
-              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-              displayName: DesignStates.trigger.selected.displayName,
-              className: DesignStates.trigger.selected.className
-            })
-          }
-        }
-      },
-      clearButton: {
-        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
-        inlineElement: {
-          displayName: DisplayNames.root.elements.clearButton,
-          selector: getSelector(selectors.clear),
-          behaviors: {
-            selectable: false,
-            removable: false
-          },
-          states: {
-            hover: withSpec({
-              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-              displayName: DesignStates.clearButton.hover.displayName,
-              className: DesignStates.clearButton.hover.className,
-              pseudoClass: NativeStateType.hover
-            }),
-            selected: withSpec({
-              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-              displayName: DesignStates.clearButton.selected.displayName,
-              className: DesignStates.clearButton.selected.className
+              props: { disabled: true }
             })
           }
         }
@@ -213,21 +294,34 @@ const manifest = {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
           displayName: DisplayNames.root.elements.list,
-          selector: getSelector(selectors.list),
+          selector: `.${editorElementClassNames.list}`,
           behaviors: {
             selectable: false,
             removable: false
           },
+          // No defaultValue here — every default lives in the preset above.
+          // See Input's `cssProperties` comment for why these are bare, why
+          // `border` is a shorthand, and why corners/padding aren't.
           cssProperties: {
             background: {},
-            borderTop: {},
-            borderBottom: {},
-            borderInlineStart: {},
-            borderInlineEnd: {},
+            border: {},
             borderStartStartRadius: {},
             borderStartEndRadius: {},
             borderEndStartRadius: {},
-            borderEndEndRadius: {}
+            borderEndEndRadius: {},
+            paddingTop: {},
+            paddingBottom: {},
+            paddingInlineStart: {},
+            paddingInlineEnd: {}
+          },
+          // This selector targets the outer popup frame (border/background
+          // owner), not the scrollable column the options sit in — a custom
+          // property still reaches it, since it inherits down.
+          cssCustomProperties: {
+            optionsGap: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+              displayName: DisplayNames.root.cssCustomProperties.optionsGap
+            }
           },
           visibleState: {
             stateKey: FunctionalStateKeys.previewList,
@@ -239,20 +333,33 @@ const manifest = {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
           displayName: DisplayNames.root.elements.option,
-          selector: getSelector(selectors.option),
+          selector: `.${editorElementClassNames.option}`,
           behaviors: {
             selectable: false,
             removable: false
           },
-          cssCustomProperties: {
-            optionTextColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-              displayName: DisplayNames.root.cssCustomProperties.optionTextColor
-            },
-            optionHoverBackgroundColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-              displayName: DisplayNames.root.cssCustomProperties.optionHoverBackgroundColor
-            }
+          // `font`/`color`/`textDecorationLine`/`textTransform` are bare so
+          // the panel renders one merged "Typography" control (see Label's
+          // comment). No defaultValue here — every default lives in the
+          // preset above.
+          cssProperties: {
+            textAlign: {},
+            font: {},
+            color: {},
+            textDecorationLine: {},
+            textTransform: {},
+            // Bare, matching Input/List (including Hover/Selected states
+            // below) — see Input's `cssProperties` comment for why.
+            background: {},
+            border: {},
+            borderStartStartRadius: {},
+            borderStartEndRadius: {},
+            borderEndStartRadius: {},
+            borderEndEndRadius: {},
+            paddingTop: {},
+            paddingBottom: {},
+            paddingInlineStart: {},
+            paddingInlineEnd: {}
           },
           states: {
             hover: withSpec({
@@ -261,6 +368,10 @@ const manifest = {
               className: DesignStates.option.hover.className,
               pseudoClass: NativeStateType.hover
             }),
+            // No native pseudo-class exists for "selected list item" — the
+            // panel's export for this state is scoped to this `className`
+            // instead, so Dropdown.tsx applies it for real whenever an
+            // option is actually selected (not just during design preview).
             selected: withSpec({
               spec: IS_SUPPORT_DESIGN_STATE_SPEC,
               displayName: DesignStates.option.selected.displayName,
@@ -273,40 +384,46 @@ const manifest = {
           }
         }
       },
-      chip: {
+      helperText: {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
-          displayName: DisplayNames.root.elements.chip,
-          selector: getSelector(selectors.chip),
+          displayName: DisplayNames.root.elements.helperText,
+          selector: `.${editorElementClassNames.helperText}`,
           behaviors: {
             selectable: false,
             removable: false
           },
-          cssCustomProperties: {
-            chipBackgroundColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-              displayName: DisplayNames.root.cssCustomProperties.chipBackgroundColor
-            },
-            chipTextColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-              displayName: DisplayNames.root.cssCustomProperties.chipTextColor
-            }
+          // No defaultValue here — every default lives in the preset above.
+          cssProperties: {
+            marginTop: {},
+            textAlign: {},
+            font: {},
+            color: {},
+            textDecorationLine: {},
+            textTransform: {}
+          }
+        }
+      },
+      errorMessage: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.errorMessage,
+          selector: `.${editorElementClassNames.errorMessage}`,
+          behaviors: {
+            selectable: false,
+            removable: false
           },
-          states: {
-            hover: withSpec({
-              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-              displayName: DesignStates.chip.hover.displayName,
-              className: DesignStates.chip.hover.className,
-              pseudoClass: NativeStateType.hover
-            }),
-            selected: withSpec({
-              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-              displayName: DesignStates.chip.selected.displayName,
-              className: DesignStates.chip.selected.className
-            })
+          // No defaultValue here — every default lives in the preset above.
+          cssProperties: {
+            marginTop: {},
+            textAlign: {},
+            font: {},
+            color: {},
+            textDecorationLine: {},
+            textTransform: {}
           },
           visibleState: {
-            stateKey: FunctionalStateKeys.previewChips,
+            stateKey: FunctionalStateKeys.previewError,
             elementPath: ".root"
           }
         }
@@ -321,159 +438,67 @@ const manifest = {
             items: {
               label: {
                 dataType: DATA.DATA_TYPE.text,
-                displayName: DisplayNames.root.data.optionLabel
+                displayName: DisplayNames.root.data.optionLabel,
+                [DATA.DATA_TYPE.text]: {
+                  maxLength: TEXT_PROP_STATIC_VALUE_MAX_LENGTH
+                }
               },
               value: {
                 dataType: DATA.DATA_TYPE.text,
-                displayName: DisplayNames.root.data.optionValue
+                displayName: DisplayNames.root.data.optionValue,
+                [DATA.DATA_TYPE.text]: {
+                  maxLength: TEXT_PROP_STATIC_VALUE_MAX_LENGTH
+                }
               }
             }
           }
         }
       },
-      // Single-select selection (shown when `multiple` is off — see preview).
       value: {
         dataType: DATA.DATA_TYPE.text,
-        displayName: DisplayNames.root.data.value
-      },
-      // Multi-select selection (shown when `multiple` is on). A separate field
-      // because a data field's schema is fixed — it can't switch text↔arrayItems.
-      values: {
-        dataType: DATA.DATA_TYPE.arrayItems,
-        displayName: DisplayNames.root.data.values,
-        [DATA.DATA_TYPE.arrayItems]: {
-          dataItem: {
-            dataType: DATA.DATA_TYPE.text,
-            displayName: DisplayNames.root.data.optionValue
-          }
+        displayName: DisplayNames.root.data.value,
+        description: DisplayNames.root.descriptions.value,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: TEXT_PROP_STATIC_VALUE_MAX_LENGTH
         }
       },
-      // Uncontrolled counterparts of value/values, used only when the
-      // controlled field isn't bound.
-      defaultValue: {
-        dataType: DATA.DATA_TYPE.text,
-        displayName: DisplayNames.root.data.defaultValue
-      },
-      defaultValues: {
-        dataType: DATA.DATA_TYPE.arrayItems,
-        displayName: DisplayNames.root.data.defaultValues,
-        [DATA.DATA_TYPE.arrayItems]: {
-          dataItem: {
-            dataType: DATA.DATA_TYPE.text,
-            displayName: DisplayNames.root.data.optionValue
-          }
-        }
-      },
-      inputValue: {
-        dataType: DATA.DATA_TYPE.text,
-        displayName: DisplayNames.root.data.inputValue,
-        defaultValue: defaultValues.inputValue
-      },
-      open: {
+      disabled: {
         dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.open,
-        defaultValue: defaultValues.open
-      },
-      isDisabled: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.isDisabled,
-        defaultValue: defaultValues.isDisabled
-      },
-      filter: {
-        dataType: DATA.DATA_TYPE.function,
-        [DATA.DATA_TYPE.function]: {}
+        displayName: DisplayNames.root.data.disabled
       },
       label: {
         dataType: DATA.DATA_TYPE.text,
         displayName: DisplayNames.root.data.label,
-        defaultValue: defaultValues.label
+        [DATA.DATA_TYPE.text]: {
+          maxLength: TEXT_PROP_STATIC_VALUE_MAX_LENGTH
+        }
       },
       placeholder: {
         dataType: DATA.DATA_TYPE.text,
         displayName: DisplayNames.root.data.placeholder,
-        defaultValue: defaultValues.placeholder
-      },
-      searchable: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.searchable,
-        defaultValue: defaultValues.searchable
-      },
-      multiple: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.multiple,
-        defaultValue: defaultValues.multiple
-      },
-      clearable: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.clearable,
-        defaultValue: defaultValues.clearable
-      },
-      autoHighlight: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.autoHighlight,
-        defaultValue: defaultValues.autoHighlight
-      },
-      openOnInputClick: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.openOnInputClick,
-        defaultValue: defaultValues.openOnInputClick
-      },
-      inline: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.inline,
-        defaultValue: defaultValues.inline
-      },
-      grid: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.grid,
-        defaultValue: defaultValues.grid
-      },
-      columns: {
-        dataType: DATA.DATA_TYPE.number,
-        displayName: DisplayNames.root.data.columns,
-        defaultValue: defaultValues.columns
-      },
-      limit: {
-        dataType: DATA.DATA_TYPE.number,
-        displayName: DisplayNames.root.data.limit,
-        defaultValue: defaultValues.limit
-      },
-      required: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.required,
-        defaultValue: defaultValues.required
+        [DATA.DATA_TYPE.text]: {
+          maxLength: TEXT_PROP_STATIC_VALUE_MAX_LENGTH
+        }
       },
       readOnly: {
         dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.readOnly,
-        defaultValue: defaultValues.readOnly
+        displayName: DisplayNames.root.data.readOnly
       },
-      description: {
+      helperText: {
         dataType: DATA.DATA_TYPE.text,
-        displayName: DisplayNames.root.data.description,
-        defaultValue: defaultValues.description
-      },
-      triggerMode: {
-        dataType: DATA.DATA_TYPE.textEnum,
-        displayName: DisplayNames.root.data.triggerMode.displayName,
-        [DATA.DATA_TYPE.textEnum]: {
-          options: [
-            {
-              value: "onSelection",
-              displayName: DisplayNames.root.data.triggerMode.options.onSelection
-            },
-            {
-              value: "onApply",
-              displayName: DisplayNames.root.data.triggerMode.options.onApply
-            }
-          ]
-        },
-        defaultValue: defaultValues.triggerMode
+        displayName: DisplayNames.root.data.helperText,
+        description: DisplayNames.root.descriptions.helperText,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: TEXT_PROP_STATIC_VALUE_MAX_LENGTH
+        }
       },
-      applyButtonLabel: {
+      errorMessage: {
         dataType: DATA.DATA_TYPE.text,
-        displayName: DisplayNames.root.data.applyButtonLabel,
-        defaultValue: defaultValues.applyButtonLabel
+        displayName: DisplayNames.root.data.errorMessage,
+        description: DisplayNames.root.descriptions.errorMessage,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: TEXT_PROP_STATIC_VALUE_MAX_LENGTH
+        }
       },
       a11y: {
         dataType: DATA.DATA_TYPE.a11y,
@@ -484,12 +509,30 @@ const manifest = {
       direction: {
         dataType: DATA.DATA_TYPE.direction
       },
-      ...manifestChangeable(),
-      ...manifestInputable(),
-      ...manifestFocusable(),
-      ...manifestValidation({ valueDataType: DATA.DATA_TYPE.text })
+      onValueChange: {
+        dataType: DATA.DATA_TYPE.function,
+        displayName: "On Value Change",
+        [DATA.DATA_TYPE.function]: {
+          parameters: [{ dataType: DATA.DATA_TYPE.text, displayName: "Value" }]
+        }
+      }
     },
     displayGroups: {
+      // Order of the parts in the design panel — the `elements` map's own
+      // key order isn't what the panel uses for this.
+      partsOrder: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.elements,
+        elements: {
+          items: [
+            "label",
+            "input",
+            "list",
+            "option",
+            "helperText",
+            "errorMessage"
+          ]
+        }
+      },
       optionsGroup: {
         displayName: DisplayNames.root.displayGroups.optionsGroup,
         groupType: DISPLAY_GROUPS.GROUP_TYPE.listItem,
@@ -502,152 +545,15 @@ const manifest = {
         groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
         data: {
           items: [
-            "required",
+            "label",
+            "placeholder",
+            "value",
+            "helperText",
+            "errorMessage",
             "readOnly",
-            "isDisabled",
-            "searchable",
-            "multiple",
-            "clearable",
-            "grid",
-            "columns",
-            "triggerMode",
-            "applyButtonLabel",
-            "description"
+            "disabled"
           ]
         }
-      },
-      sizeGroup: {
-        displayName: DisplayNames.root.displayGroups.sizeGroup,
-        groupType: DISPLAY_GROUPS.GROUP_TYPE.cssDataType,
-        cssDataType: {
-          items: ["width", "maxWidth"]
-        }
-      },
-      backgroundGroup: {
-        displayName: DisplayNames.root.displayGroups.backgroundGroup,
-        groupType: DISPLAY_GROUPS.GROUP_TYPE.background,
-        [DISPLAY_GROUPS.GROUP_TYPE.background]: {
-          backgroundColor: "backgroundColor"
-        }
-      },
-      borderGroup: {
-        groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
-        border: {
-          color: "borderColor",
-          width: "borderWidth"
-        }
-      },
-      cornersGroup: {
-        displayName: DisplayNames.root.displayGroups.cornersGroup,
-        groupType: DISPLAY_GROUPS.GROUP_TYPE.borderRadius,
-        [DISPLAY_GROUPS.GROUP_TYPE.borderRadius]: {
-          topLeft: "borderStartStartRadius",
-          topRight: "borderStartEndRadius",
-          bottomLeft: "borderEndStartRadius",
-          bottomRight: "borderEndEndRadius"
-        }
-      },
-      paddingGroup: {
-        displayName: DisplayNames.root.displayGroups.paddingGroup,
-        groupType: DISPLAY_GROUPS.GROUP_TYPE.padding,
-        padding: {
-          top: "paddingTop",
-          bottom: "paddingBottom",
-          left: "paddingInlineStart",
-          right: "paddingInlineEnd"
-        }
-      }
-    },
-    cssCustomProperties: {
-      width: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.lengthPercentage,
-        displayName: DisplayNames.root.cssCustomProperties.width
-      },
-      maxWidth: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.lengthPercentage,
-        displayName: DisplayNames.root.cssCustomProperties.maxWidth,
-        defaultValue: "480px"
-      },
-      backgroundColor: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
-        displayName: DisplayNames.root.cssCustomProperties.backgroundColor
-      },
-      borderColor: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
-        displayName: DisplayNames.root.cssCustomProperties.borderColor
-      },
-      borderWidth: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
-        displayName: DisplayNames.root.cssCustomProperties.borderWidth,
-        defaultValue: "1px"
-      },
-      borderStartStartRadius: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartStartRadius,
-        defaultValue: "4px"
-      },
-      borderStartEndRadius: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartEndRadius,
-        defaultValue: "4px"
-      },
-      borderEndStartRadius: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndStartRadius,
-        defaultValue: "4px"
-      },
-      borderEndEndRadius: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndEndRadius,
-        defaultValue: "4px"
-      },
-      paddingTop: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop,
-        displayName: DisplayNames.root.cssCustomProperties.paddingTop,
-        defaultValue: "8px"
-      },
-      paddingBottom: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingBottom,
-        displayName: DisplayNames.root.cssCustomProperties.paddingBottom,
-        defaultValue: "8px"
-      },
-      paddingInlineStart: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineStart,
-        displayName: DisplayNames.root.cssCustomProperties.paddingInlineStart,
-        defaultValue: "12px"
-      },
-      paddingInlineEnd: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineEnd,
-        displayName: DisplayNames.root.cssCustomProperties.paddingInlineEnd,
-        defaultValue: "12px"
-      },
-      boxShadow: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow,
-        displayName: DisplayNames.root.cssCustomProperties.boxShadow
-      },
-      gap: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.gap,
-        displayName: DisplayNames.root.cssCustomProperties.gap,
-        defaultValue: "8px"
-      },
-      textAlign: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.textAlign,
-        displayName: DisplayNames.root.cssCustomProperties.textAlign,
-        defaultValue: "start"
-      },
-      font: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
-        displayName: DisplayNames.root.cssCustomProperties.font,
-        defaultValue: "normal normal normal 16px/1.5em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif"
-      },
-      textColor: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-        displayName: DisplayNames.root.cssCustomProperties.textColor
-      },
-      helperFont: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
-        displayName: DisplayNames.root.cssCustomProperties.helperFont,
-        defaultValue: "normal normal normal 14px/1.4em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif"
-      },
-      helperColor: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-        displayName: DisplayNames.root.cssCustomProperties.helperColor
       }
     }
   },
@@ -660,15 +566,6 @@ const manifest = {
           "@wix/viewer-service-translations"
         ]
       }
-    },
-    editor: {
-      componentUrl: "./site/components/Dropdown/component.preview.tsx",
-      dependencies: {
-        serviceDependencies: [
-          "@wix/viewer-service-environment",
-          "@wix/viewer-service-translations"
-        ]
-      }
     }
   },
   moduleConfiguration: {