@wix/editor-react-components 1.2331.0 → 1.2333.0

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

@@ -1,5 +1,5 @@
-import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, N as NativeStateType, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { D as DesignStates, f as DisplayNames, d as defaultValues, e as selectors } from "../chunks/constants32.js";
+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-JPMZBG44.js";
+import { D as DesignStates, f as DisplayNames, d as defaultValues, F as FunctionalStateKeys, s as selectors } from "../chunks/constants32.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
@@ -23,8 +23,8 @@ const manifest = {
     displayName: DisplayNames.root.elementDisplayName,
     archetype: Archetype.Dropdown,
     layout: {
-      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
-      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
       disableStretching: true,
       disablePositioning: false
     },
@@ -54,7 +54,262 @@ const manifest = {
         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 }
+      }
+    },
+    displayFilters: {
+      states: {
+        hide: [
+          FunctionalStateKeys.previewList,
+          FunctionalStateKeys.previewChips
+        ]
+      }
+    },
+    elements: {
+      label: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.label,
+          selector: getSelector(selectors.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
+            }
+          }
+        }
+      },
+      input: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.input,
+          selector: getSelector(selectors.input),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          // Same var names as the root's — element-scoped overrides.
+          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
+            }
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.input.hover.displayName,
+              className: DesignStates.input.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            focus: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.input.focus.displayName,
+              className: DesignStates.input.focus.className,
+              pseudoClass: NativeStateType.focus
+            }),
+            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
+            })
+          }
+        }
+      },
+      list: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.list,
+          selector: getSelector(selectors.list),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            background: {},
+            borderTop: {},
+            borderBottom: {},
+            borderInlineStart: {},
+            borderInlineEnd: {},
+            borderStartStartRadius: {},
+            borderStartEndRadius: {},
+            borderEndStartRadius: {},
+            borderEndEndRadius: {}
+          },
+          visibleState: {
+            stateKey: FunctionalStateKeys.previewList,
+            elementPath: ".root"
+          }
+        }
+      },
+      option: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.option,
+          selector: getSelector(selectors.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
+            }
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.option.hover.displayName,
+              className: DesignStates.option.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            selected: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.option.selected.displayName,
+              className: DesignStates.option.selected.className
+            })
+          },
+          visibleState: {
+            stateKey: FunctionalStateKeys.previewList,
+            elementPath: ".root"
+          }
+        }
+      },
+      chip: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.chip,
+          selector: getSelector(selectors.chip),
+          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
+            }
+          },
+          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
+            })
+          },
+          visibleState: {
+            stateKey: FunctionalStateKeys.previewChips,
+            elementPath: ".root"
+          }
+        }
+      }
     },
     data: {
       options: {
@@ -347,6 +602,10 @@ const manifest = {
         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,
@@ -366,15 +625,6 @@ const manifest = {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
         displayName: DisplayNames.root.cssCustomProperties.textColor
       },
-      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
-      },
       helperFont: {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
         displayName: DisplayNames.root.cssCustomProperties.helperFont,
@@ -383,14 +633,6 @@ const manifest = {
       helperColor: {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
         displayName: DisplayNames.root.cssCustomProperties.helperColor
-      },
-      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
       }
     }
   },

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

@@ -1,5 +1,5 @@
 import { I as INTERACTIONS, D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeStateType, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { D as DisplayNames, a as DesignStates, s as selectors } from "../chunks/constants3.js";
+import { D as DesignStates, a as DisplayNames, s as selectors } from "../chunks/constants3.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

package/dist/site/components/TimePicker/TimePicker.types.d.ts

@@ -27,11 +27,6 @@ export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & Sdk
     value: string;
     /** Optional text label rendered above the field. */
     label: string;
-    /**
-     * ISO `HH:MM` time that seeds the empty field (React Aria `placeholderValue`
-     * — e.g. which hour the segments start at).
-     */
-    placeholder: string;
     /** Site-facing helper text rendered under the field. */
     description?: string;
     /** Hint text revealed from an info icon next to the label. */

package/dist/site/components/TimePicker/component.js

@@ -140,11 +140,6 @@ function TimePicker(props) {
   const tooltip2 = readString(props.tooltip);
   const isDisabled = readBool(props.isDisabled, false);
   const isRequired = readBool(props.required, defaultValues.required);
-  const placeholderStr = readString(props.placeholder);
-  const placeholderValue = useMemo(
-    () => toTimeValue(placeholderStr) ?? void 0,
-    [placeholderStr]
-  );
   const { timeValue, handleChange, hasValue } = useTimePickerValue({
     value: props.value,
     onChange,
@@ -202,7 +197,6 @@ function TimePicker(props) {
               shouldForceLeadingZeros: shouldForceLeadingZeros || void 0,
               minValue,
               maxValue,
-              placeholderValue,
               isDisabled,
               isReadOnly: readOnly,
               isRequired,

package/dist/site/components/TimePicker/constants.d.ts

@@ -22,7 +22,6 @@ export declare const DisplayNames: {
             shouldForceLeadingZeros: string;
             tooltip: string;
             label: string;
-            placeholder: string;
             description: string;
             minTime: string;
             maxTime: string;
@@ -31,6 +30,11 @@ export declare const DisplayNames: {
             disabled: string;
             clearable: string;
         };
+        designStates: {
+            hover: string;
+            focus: string;
+            disabled: string;
+        };
         elements: {
             label: string;
             timeInput: string;
@@ -48,7 +52,6 @@ export declare const defaultValues: {
     readonly shouldForceLeadingZeros: false;
     readonly tooltip: "";
     readonly label: "";
-    readonly placeholder: "";
     readonly description: "";
     readonly required: false;
     readonly readOnly: false;
@@ -67,6 +70,22 @@ export declare const enum HourCycleValues {
     H12 = "12",
     H24 = "24"
 }
+export declare const DesignStates: {
+    timeInput: {
+        hover: {
+            displayName: string;
+            className: string;
+        };
+        focus: {
+            displayName: string;
+            className: string;
+        };
+        disabled: {
+            displayName: string;
+            className: string;
+        };
+    };
+};
 /** The value that represents "no time selected". */
 export declare const EMPTY_VALUE = "";
 export declare const TRANSLATIONS_NAMESPACE = "timePicker";

package/dist/site/components/TimePicker/css.css

@@ -9,13 +9,7 @@
   );
   --label-text-color: var(--wst-paragraph-2-color, #2b2b2b);
 
-  --field-background-color: var(--wst-primary-background-color, #ffffff);
   --borderColor: var(--wst-system-line-1-color, #dfe5eb);
-  --borderWidth: 1px;
-  --borderStartStartRadius: 6px;
-  --borderStartEndRadius: 6px;
-  --borderEndStartRadius: 6px;
-  --borderEndEndRadius: 6px;
 
   --label-spacing: 6px;
 
@@ -48,17 +42,23 @@
 .timePicker__j78My {
   display: flex;
   flex-direction: column;
+  row-gap: var(--label-spacing, 6px);
 }
 .labelRow__qoC8g {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 6px;
-  margin: 0 0 var(--label-spacing);
+  margin: 0;
+  min-width: 0;
 }
 .label__THO5j {
   margin: 0;
+  min-width: 0;
+  max-width: 100%;
   font: var(--labelFont);
   color: var(--label-text-color);
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 .tooltipButton__ISWIR {
   flex: none;
@@ -100,29 +100,34 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: 8px;
   width: 100%;
-  padding: 8px 12px;
+  column-gap: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-inline-start: 12px;
+  padding-inline-end: 12px;
   font: inherit;
   color: inherit;
-  background: var(--field-background-color);
-  border-style: solid;
-  border-width: var(--borderWidth);
-  border-color: var(--borderColor);
-  border-start-start-radius: var(--borderStartStartRadius);
-  border-start-end-radius: var(--borderStartEndRadius);
-  border-end-start-radius: var(--borderEndStartRadius);
-  border-end-end-radius: var(--borderEndEndRadius);
+  background: var(--wst-primary-background-color, #ffffff);
+  box-shadow: none;
+  border-top: 1px solid var(--borderColor);
+  border-bottom: 1px solid var(--borderColor);
+  border-inline-start: 1px solid var(--borderColor);
+  border-inline-end: 1px solid var(--borderColor);
+  border-start-start-radius: 6px;
+  border-start-end-radius: 6px;
+  border-end-start-radius: 6px;
+  border-end-end-radius: 6px;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
-.group__6HZy7:focus-within {
+.group__6HZy7:focus-within, .group__6HZy7.timePicker__group--focus {
   border-color: var(--accent-color);
   box-shadow: 0 0 0 1px var(--accent-color);
 }
-.group__6HZy7:hover:not(:focus-within) {
+.group__6HZy7:hover:not(:focus-within), .group__6HZy7.timePicker__group--hover {
   border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
 }
-.timePicker__j78My[data-disabled] {
+.group__6HZy7[data-disabled], .group__6HZy7.timePicker__group--disabled {
   opacity: 0.55;
   cursor: not-allowed;
 }
@@ -136,7 +141,6 @@
   white-space: nowrap;
 }
 .description__ePprf {
-  margin-top: 4px;
   font-size: 12px;
   opacity: 0.7;
 }
@@ -155,8 +159,8 @@
   color: color-mix(in srgb, currentColor 45%, transparent);
 }
 .segment__OtazP[data-focused] {
-  background: var(--accent-color);
-  color: var(--segment-focus-text-color);
+  background: var(--segment-focus-background-color, #116dff);
+  color: var(--segment-focus-text-color, #ffffff);
 }
 .clearButton__Bto7s {
   flex: none;

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

@@ -1,14 +1,22 @@
 import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { c as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants2.js";
-import { g as getSelector } from "../chunks/manifest.js";
+import { c as DisplayNames, d as defaultValues, e as DesignStates, s as selectors } from "../chunks/constants2.js";
+import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
+import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 const cssProperties = {
   font: {},
   color: {},
   textAlign: {}
 };
+const designState = (s) => withSpec({
+  spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+  displayName: s.displayName,
+  className: s.className
+});
 const cssCustomProperties = {
   "segment-focus-background-color": {
+    // Keep `color` (not `backgroundColor`): Dev Center enrichment rejects
+    // changing a released cssCustomProperty's type (this was published as color).
     cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
     displayName: DisplayNames.root.cssCustomProperties.segmentFocusBackgroundColor
   },
@@ -22,21 +30,22 @@ const cssCustomProperties = {
     defaultValue: "6px"
   }
 };
-const boxBorder = {
-  borderTop: {},
-  borderBottom: {},
-  borderInlineStart: {},
-  borderInlineEnd: {},
-  borderStartStartRadius: {},
-  borderStartEndRadius: {},
-  borderEndStartRadius: {},
-  borderEndEndRadius: {}
-};
-const boxPadding = {
-  paddingTop: {},
-  paddingBottom: {},
-  paddingInlineStart: {},
-  paddingInlineEnd: {}
+const fieldBorder = "1px solid var(--wst-system-line-1-color, #dfe5eb)";
+const timeInputCssProperties = {
+  background: { defaultValue: "var(--wst-primary-background-color, #ffffff)" },
+  boxShadow: { defaultValue: "none" },
+  borderTop: { defaultValue: fieldBorder },
+  borderBottom: { defaultValue: fieldBorder },
+  borderInlineStart: { defaultValue: fieldBorder },
+  borderInlineEnd: { defaultValue: fieldBorder },
+  borderStartStartRadius: { defaultValue: "6px" },
+  borderStartEndRadius: { defaultValue: "6px" },
+  borderEndStartRadius: { defaultValue: "6px" },
+  borderEndEndRadius: { defaultValue: "6px" },
+  paddingTop: { defaultValue: "8px" },
+  paddingBottom: { defaultValue: "8px" },
+  paddingInlineStart: { defaultValue: "12px" },
+  paddingInlineEnd: { defaultValue: "12px" }
 };
 const manifest = {
   id: "eb293641-a409-4f13-b122-57534b6abdab",
@@ -78,11 +87,11 @@ const manifest = {
           displayName: DisplayNames.root.elements.timeInput,
           selector: getSelector(selectors.group),
           behaviors: { selectable: false },
-          cssProperties: {
-            background: {},
-            columnGap: {},
-            ...boxBorder,
-            ...boxPadding
+          cssProperties: timeInputCssProperties,
+          states: {
+            hover: designState(DesignStates.timeInput.hover),
+            focus: designState(DesignStates.timeInput.focus),
+            disabled: designState(DesignStates.timeInput.disabled)
           }
         }
       }
@@ -149,10 +158,6 @@ const manifest = {
         displayName: DisplayNames.root.data.tooltip,
         defaultValue: defaultValues.tooltip
       },
-      placeholder: {
-        dataType: DATA.DATA_TYPE.localTime,
-        displayName: DisplayNames.root.data.placeholder
-      },
       description: {
         dataType: DATA.DATA_TYPE.text,
         displayName: DisplayNames.root.data.description,
@@ -217,7 +222,6 @@ const manifest = {
             "shouldForceLeadingZeros",
             "label",
             "tooltip",
-            "placeholder",
             "description",
             "minTime",
             "maxTime"

package/dist/site/components/chunks/constants2.js

@@ -22,7 +22,6 @@ const DisplayNames = {
       shouldForceLeadingZeros: "Always show leading zeros",
       tooltip: "Tooltip",
       label: "Label",
-      placeholder: "Placeholder time (HH:MM)",
       description: "Helper text",
       minTime: "Earliest time (HH:MM)",
       maxTime: "Latest time (HH:MM)",
@@ -31,6 +30,11 @@ const DisplayNames = {
       disabled: "Disabled",
       clearable: "Show clear button"
     },
+    designStates: {
+      hover: "Hover",
+      focus: "Focus",
+      disabled: "Disabled"
+    },
     elements: {
       label: "Label",
       timeInput: "Time input"
@@ -60,6 +64,22 @@ var HourCycleValues = /* @__PURE__ */ ((HourCycleValues2) => {
   HourCycleValues2["H24"] = "24";
   return HourCycleValues2;
 })(HourCycleValues || {});
+const DesignStates = {
+  timeInput: {
+    hover: {
+      displayName: DisplayNames.root.designStates.hover,
+      className: "timePicker__group--hover"
+    },
+    focus: {
+      displayName: DisplayNames.root.designStates.focus,
+      className: "timePicker__group--focus"
+    },
+    disabled: {
+      displayName: DisplayNames.root.designStates.disabled,
+      className: "timePicker__group--disabled"
+    }
+  }
+};
 const EMPTY_VALUE = "";
 const TRANSLATIONS_NAMESPACE = "timePicker";
 const TranslationKeys = {
@@ -91,5 +111,6 @@ export {
   TranslationKeys as b,
   DisplayNames as c,
   defaultValues as d,
+  DesignStates as e,
   selectors as s
 };

package/dist/site/components/chunks/constants3.js

@@ -67,7 +67,7 @@ const DisplayNames = {
   }
 };
 export {
-  DisplayNames as D,
-  DesignStates as a,
+  DesignStates as D,
+  DisplayNames as a,
   selectors as s
 };