@webflow/designer-extension-typings 2.0.34 → 2.1.0

package/api.d.ts

@@ -21,6 +21,19 @@ interface AppModeChangeEvent {
   appModes: {[key in AppMode]: boolean};
 }
 
+type AppearanceSettings =
+  | 'darkDefault'
+  | 'darkDarker'
+  | 'darkBrighter'
+  | 'light';
+
+type ThemeStyles = {
+  colors: Record<string, string>;
+  boxShadows: Record<string, string>;
+  controls: Record<string, string>;
+  opacities: Record<string, string>;
+};
+
 interface SharedApi {
   /**
    * Get metadata about the current Site.
@@ -169,6 +182,20 @@ interface SharedApi {
     options: ComponentOptions,
     source: Component
   ): Promise<Component>;
+  /**
+   * Duplicate an existing component by ID.
+   * @param options - Options for the new component, including a required name.
+   * @param source - The ID of the existing Component to duplicate.
+   * @returns A Promise resolving to the newly created Component.
+   * @example
+   * ```ts
+   * const copy = await webflow.registerComponent({name: 'Hero Copy'}, '204d04de-bf48-5b5b-0ca8-6ec4c5364fd2')
+   * ```
+   */
+  registerComponent(
+    options: ComponentOptions,
+    source: string
+  ): Promise<Component>;
   /**
    * Convert an element or element preset into a component. Equivalent to the
    * "Convert selection" action in the Designer's "New component" menu.
@@ -660,6 +687,19 @@ interface DesignerOnlyApi {
    * ```
    */
   getMediaQuery(): Promise<BreakpointId>;
+  /**
+   * Get the currently active designer theme.
+   * @returns The active theme name.
+   */
+  getTheme(): Promise<AppearanceSettings>;
+
+  /**
+   * Get the structured style tokens for a given theme. Returns color, box-shadow,
+   * control, and opacity token values as flat key-value records.
+   * @param themeName - The theme to get tokens for.
+   * @returns The ThemeStyles object for the requested theme.
+   */
+  getThemeStyles(themeName: AppearanceSettings): Promise<ThemeStyles>;
   /**
    * Get the current pseudo mode.
    * @returns A Promise that resolves to a PseudoStateKey which is a string representing the current pseudo mode.
@@ -860,6 +900,14 @@ interface DesignerOnlyApi {
     event: 'selectedvariant',
     callback: (variant: Variant) => void
   ): Unsubscribe;
+  /**
+   * Subscribe to designer theme changes. The callback fires whenever the user
+   * switches themes in the Webflow designer appearance settings.
+   */
+  subscribe(
+    event: 'currenttheme',
+    callback: (theme: AppearanceSettings) => void
+  ): Unsubscribe;
   /**
    * Checks if the user has the ability to perform the given App Mode
    * @param appModes

package/components.d.ts

@@ -69,6 +69,20 @@ interface Component {
    */
   getVariants(): Promise<Variant[]>;
 
+  /**
+   * Create a new variant for this component.
+   * @param name - The name for the new variant
+   * @returns A promise that resolves to the newly created Variant.
+   * @example
+   * ```ts
+   * const quickVariant = await heroComponent.createVariant("Dark Mode");
+   * const variant = await heroComponent.createVariant({ name: "Dark Mode" });
+   * console.log(quickVariant.name); // "Dark Mode"
+   * console.log(variant.name); // "Dark Mode"
+   * ```
+   */
+  createVariant(name: string): Promise<Variant>;
+
   /**
    * Create a new variant for this component.
    * @param options - The name for the new variant and optional selection behavior
@@ -304,6 +318,44 @@ interface Component {
    */
   createProps(options: CreatePropOptions[]): Promise<Prop[]>;
 
+  /**
+   * Update an existing prop's settings.
+   *
+   * Accepts a partial update object — only the fields being changed need to be
+   * provided. Cannot change a prop's `type` (immutable after creation).
+   * Name conflicts within the target group are auto-incremented. Setting a field
+   * to `null` clears it where applicable.
+   *
+   * @param propId - The ID of the prop to update.
+   * @param updates - A partial object with the fields to change.
+   * @returns A Promise resolving to the full updated prop.
+   *
+   * @example
+   * ```ts
+   * const updated = await component.setProp(prop.id, {
+   *   name: 'Hero Heading',
+   *   tooltip: 'The main headline for the hero section',
+   * });
+   * ```
+   */
+  setProp(propId: string, updates: SetPropOptions): Promise<Prop>;
+
+  /**
+   * Update an existing prop's settings.
+   *
+   * @param updates - A partial object with `id` and the fields to change.
+   * @returns A Promise resolving to the full updated prop.
+   *
+   * @example
+   * ```ts
+   * const updated = await component.setProp({
+   *   id: prop.id,
+   *   name: 'Hero Heading',
+   * });
+   * ```
+   */
+  setProp(updates: SetPropOptionsWithId): Promise<Prop>;
+
   /**
    * Remove a prop from this component.
    * @param propId - The ID of the prop to remove.
@@ -423,12 +475,12 @@ interface Prop {
   readonly defaultValue: ResolvedValue | null;
   /** Whether the text input allows multiple lines. Present on string and textContent props. */
   multiline?: boolean;
-  /** The minimum allowed value. Present on number props. */
-  min?: number;
-  /** The maximum allowed value. Present on number props. */
-  max?: number;
-  /** The number of decimal places (precision) allowed. Present on number props. */
-  decimals?: number;
+  /** The minimum allowed value. Present on number props, otherwise null when unset. */
+  min?: number | null;
+  /** The maximum allowed value. Present on number props, otherwise null when unset. */
+  max?: number | null;
+  /** The number of decimal places (precision) allowed. Present on number props, otherwise null when unset. */
+  decimals?: number | null;
   /** The label shown when the boolean is true. Present on boolean props. */
   trueLabel?: string;
   /** The label shown when the boolean is false. Present on boolean props. */
@@ -439,16 +491,29 @@ interface Prop {
 // createProp input types (discriminated union on `type`)
 // ---------------------------------------------------------------------------
 
-/** Common fields shared by all prop types. */
-interface CreatePropCommon {
+/**
+ * Fields shared between creating and updating props.
+ * Used as the base interface for both {@link CreatePropCommon} and {@link SetPropOptions}.
+ */
+interface PropSettingsCommon {
+  /** Display name for the prop. */
+  name?: string;
+  /** Group/folder name. Props with the same group appear together. `null` to ungroup. */
+  group?: string | null;
+  /** Tooltip text shown on hover. `null` to remove. */
+  tooltip?: string | null;
+  /** The default value for this prop (shape depends on type). `null` to clear. */
+  defaultValue?: ResolvedValue | null;
+}
+
+/** Common fields shared by all prop types when creating. */
+interface CreatePropCommon extends PropSettingsCommon {
   /** Display name for the prop. Auto-incremented on conflicts within the same group. */
   name: string;
   /** Group/folder name. Props with the same group appear together in the props panel. */
   group?: string;
   /** Tooltip text shown on hover in the props panel. */
   tooltip?: string;
-  /** The default value for this prop, or null if not set or not applicable. */
-  defaultValue?: ResolvedValue | null;
 }
 
 interface TextContentPropInput extends CreatePropCommon {
@@ -534,6 +599,37 @@ type CreatePropOptions =
   | IdPropInput
   | AltTextPropInput;
 
+// ---------------------------------------------------------------------------
+// setProp input types
+// ---------------------------------------------------------------------------
+
+/**
+ * Options for updating an existing prop on a component.
+ * All fields are optional — only the fields being changed need to be provided.
+ * Cannot change a prop's `type` (immutable after creation).
+ * Setting a field to `null` clears it where applicable.
+ */
+interface SetPropOptions extends PropSettingsCommon {
+  /** Whether the text input supports multiple lines. textContent only. */
+  multiline?: boolean;
+  /** Minimum allowed value. number only. `null` clears the constraint. */
+  min?: number | null;
+  /** Maximum allowed value. number only. `null` clears the constraint. */
+  max?: number | null;
+  /** Number of decimal places allowed. number only. `null` clears the constraint. */
+  decimals?: number | null;
+  /** Label shown when the value is true (e.g., "Visible"). boolean only. `null` clears. */
+  trueLabel?: string | null;
+  /** Label shown when the value is false (e.g., "Hidden"). boolean only. `null` clears. */
+  falseLabel?: string | null;
+}
+
+/** {@link SetPropOptions} with an inline `id` for the single-argument overload. */
+interface SetPropOptionsWithId extends SetPropOptions {
+  /** The ID of the prop to update. */
+  id: string;
+}
+
 /**
  * Settings for a component, including name, group, and description.
  */

package/elements-generated.d.ts

@@ -107,6 +107,38 @@ interface Attributes {
   getResolvedAttributes(this: {
     id: FullElementId;
   }): Promise<Array<ResolvedElementAttribute>>;
+  getAttributeValue(
+    this: {id: FullElementId},
+    name: string
+  ): Promise<string | BindingValue | null>;
+  getAttributeValue(
+    this: {id: FullElementId},
+    index: number
+  ): Promise<string | BindingValue | null>;
+  getResolvedAttributeValue(
+    this: {id: FullElementId},
+    name: string
+  ): Promise<string | null>;
+  getResolvedAttributeValue(
+    this: {id: FullElementId},
+    index: number
+  ): Promise<string | null>;
+  setAttribute(
+    this: {id: FullElementId},
+    name: string,
+    value: string | BindingInput
+  ): Promise<null>;
+  setAttribute(
+    this: {id: FullElementId},
+    index: number,
+    attribute: SetElementAttribute
+  ): Promise<null>;
+  setAttributes(
+    this: {id: FullElementId},
+    attributes: Array<SetElementAttribute>
+  ): Promise<null>;
+  removeAttribute(this: {id: FullElementId}, name: string): Promise<null>;
+  removeAttribute(this: {id: FullElementId}, index: number): Promise<null>;
 }
 
 interface NoAttributes {
@@ -241,8 +273,10 @@ interface ComponentElement
   readonly id: FullElementId;
   readonly type: 'ComponentInstance';
   readonly plugin: '';
+  readonly selectedSlotId?: string | null;
   getComponent(): Promise<Component>;
   getSlots(): Promise<Array<SlotInstanceElement>>;
+  getSelectedSlot(): Promise<SlotInstanceElement | null>;
   getProps(): Promise<Array<InstancePropSummary>>;
   getResolvedProps(): Promise<Array<ResolvedInstanceProp>>;
   searchProps(
@@ -294,9 +328,7 @@ interface DOMElement
   setTag(tag: string): Promise<null>;
   setTag(binding: BindingInput): Promise<null>;
   getAttribute(name: string): Promise<null | string>;
-  setAttribute(name: string, value: string): Promise<null>;
   getAllAttributes(): Promise<Array<NamedValue> | null>;
-  removeAttribute(name: string): Promise<null>;
 }
 
 interface SearchFormElement

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webflow/designer-extension-typings",
-  "version": "2.0.34",
+  "version": "2.1.0",
   "license": "MIT",
   "description": "Typings for the Webflow Designer Extension API",
   "main": "",

package/styles-generated.d.ts

@@ -1015,7 +1015,6 @@ type PseudoStateKey =
   | 'last-child'
   | 'hover'
   | 'active'
-  | 'pressed'
   | 'visited'
   | 'focus'
   | 'focus-visible'

package/styles.d.ts

@@ -12,6 +12,16 @@ interface Style {
    * ```
    */
   getName(): Promise<string>;
+  /**
+   * Rename the Style.
+   * @param name - The new name for the Style.
+   * @returns A Promise that resolves to null when the rename is complete.
+   * @example
+   * ```ts
+   * await myStyle.setName('NewStyleName');
+   * ```
+   */
+  setName(name: string): Promise<null>;
   /**
    * Retrieve the properties of the style.
    * @param options - Options to filter properties based on breakpoints, pseudo states, and component variants.