@webflow/designer-extension-typings 2.0.9 → 2.0.11

package/api.d.ts

@@ -205,14 +205,20 @@ interface WebflowApi {
 
   /**
    * Creates a new style with the provided name.
-   * @param name - The name for the new style.
+   * @param name - The name for the new style
+   * @param opts - Options for the new style. An object containing the following properties:
+   * - parent: A Style object representing the parent style block. Used for creating a combo class.
    * @returns a Promise that resolves to the Style object representing the newly created style.
    * @example
    * ```ts
    * const newStyle = await webflow.createStyle('myNewStyle');
+   * console.log('New style created:', newStyle.id);
+   *
+   * const comboClass = await webflow.createStyle('myNewStyle', {parent: newStyle});
+   * console.log('New combo class created: ', comboClass.id);
    * ```
    */
-  createStyle(name: string): Promise<Style>;
+  createStyle(name: string, options?: {parent?: Style}): Promise<Style>;
   /**
    * Fetch a style by its name.
    * @param name - The name of the style to retrieve.
@@ -342,7 +348,7 @@ interface WebflowApi {
    * const collections = await webflow.getAllVariableCollections();
    * ```
    */
-  getAllVariableCollections(): Promise<Array<VariableCollection> | null>;
+  getAllVariableCollections(): Promise<Array<VariableCollection>>;
 
   /**
    * Removes the variable collection.

package/elements-generated.d.ts

@@ -2663,6 +2663,8 @@ interface FormCheckboxInputElement
   readonly id: FullElementId;
   readonly type: 'FormCheckboxInput';
   readonly plugin: 'Form';
+  getRequired(): Promise<boolean>;
+  setRequired(value: boolean): Promise<null>;
 }
 
 interface FormCheckboxWrapperElement
@@ -2702,6 +2704,10 @@ interface FormFormElement
   readonly id: FullElementId;
   readonly type: 'FormForm';
   readonly plugin: 'Form';
+  getName(): Promise<string>;
+  setName(name: string): Promise<null>;
+  getSettings(): Promise<FormSettings>;
+  setSettings(settings: Partial<FormSettings>): Promise<null>;
 }
 
 interface FormInlineLabelElement
@@ -2728,6 +2734,8 @@ interface FormRadioInputElement
   readonly id: FullElementId;
   readonly type: 'FormRadioInput';
   readonly plugin: 'Form';
+  getRequired(): Promise<boolean>;
+  setRequired(value: boolean): Promise<null>;
 }
 
 interface FormRadioWrapperElement
@@ -2754,6 +2762,8 @@ interface FormSelectElement
   readonly id: FullElementId;
   readonly type: 'FormSelect';
   readonly plugin: 'Form';
+  getRequired(): Promise<boolean>;
+  setRequired(value: boolean): Promise<null>;
 }
 
 interface FormSuccessMessageElement
@@ -2780,6 +2790,8 @@ interface FormTextareaElement
   readonly id: FullElementId;
   readonly type: 'FormTextarea';
   readonly plugin: 'Form';
+  getRequired(): Promise<boolean>;
+  setRequired(value: boolean): Promise<null>;
 }
 
 interface FormTextInputElement
@@ -2793,6 +2805,8 @@ interface FormTextInputElement
   readonly id: FullElementId;
   readonly type: 'FormTextInput';
   readonly plugin: 'Form';
+  getRequired(): Promise<boolean>;
+  setRequired(value: boolean): Promise<null>;
 }
 
 interface FormWrapperElement
@@ -2806,6 +2820,10 @@ interface FormWrapperElement
   readonly id: FullElementId;
   readonly type: 'FormWrapper';
   readonly plugin: 'Form';
+  getName(): Promise<string>;
+  setName(name: string): Promise<null>;
+  getSettings(): Promise<FormSettings>;
+  setSettings(settings: Partial<FormSettings>): Promise<null>;
 }
 
 interface FormReCaptchaElement
@@ -2832,6 +2850,8 @@ interface FormFileUploadWrapperElement
   readonly id: FullElementId;
   readonly type: 'FormFileUploadWrapper';
   readonly plugin: 'Form';
+  getRequired(): Promise<boolean>;
+  setRequired(value: boolean): Promise<null>;
 }
 
 interface FormFileUploadDefaultElement

package/elements.d.ts

@@ -8,3 +8,15 @@ type NamedValue = {
   name: string;
   value: string;
 };
+
+type FormState = 'normal' | 'success' | 'error';
+
+type FormMethod = 'get' | 'post';
+
+type FormSettings = {
+  state: FormState;
+  name: string;
+  redirect: string;
+  action: string;
+  method: FormMethod;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webflow/designer-extension-typings",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Typings for the Webflow Designer Extension API",
   "main": "",

package/styles.d.ts

@@ -83,6 +83,15 @@ interface Style {
    * ```
    */
   removeAllProperties(): Promise<null>;
+  /**
+   * Returns true if the style is a combo class.
+   * @example
+   * ```ts
+   * const isComboClass = await myStyle.isComboClass();
+   * console.log("Is Combo Class:", isComboClass);
+   * ```
+   */
+  isComboClass(): boolean;
 }
 
 type StyleId = string;

package/variables.d.ts

@@ -27,6 +27,8 @@ interface ColorVariable {
   /**
    * Set value of variable. The value must be of the same type as the value of the instantiated variable.
    * @param value - The desired value of the variable.
+   * @param options - The configuration options for the variable.
+   * @param options.mode - The optional mode object to set the value for.
    * @returns A Promise that resolves into a value, or if the variable is an alias - the original Variable.
    * @example
    * ```ts
@@ -35,9 +37,14 @@ interface ColorVariable {
    * await newVariable1.set('yellow');
    * ```
    */
-  set(value: ColorValue | ColorVariable): Promise<null>;
+  set(
+    value: ColorValue | ColorVariable,
+    options?: VariableOptions
+  ): Promise<null>;
   /**
    * Get the variable’s value.
+   * @param options - The configuration options for the variable.
+   * @param options.mode - The optional mode object to get the value for.
    * @returns A Promise that resolves into a value, or if the variable is an alias - the original Variable.
    * @example
    * ```ts
@@ -45,12 +52,13 @@ interface ColorVariable {
    * console.log(await newVariable1.get());
    * ```
    */
-  get(): Promise<ColorValue | ColorVariable>;
+  get(options?: VariableOptions): Promise<ColorValue | ColorVariable>;
   /**
    * Removes a variable from the default collection.
    * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful or not.
    * @example
    * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
    * const newVariable1 = await collection.createColorVariable('myvar4', 'red')
    * await newVariable1.remove()
    * ```
@@ -87,16 +95,23 @@ interface SizeVariable {
   /**
    * Set value of variable. The value must be of the same type as the value of the instantiated variable.
    * @param value - The desired value of the variable.
+   * @param options - The configuration options for the variable.
+   * @param options.mode - The optional mode object to set the value for.
    * @returns A Promise that resolves into a value, or if the variable is an alias - the original Variable.
    * @example
    * ```ts
-   * const newVariable1 = await collection.createColorVariable('myvar4', 'red');
-   * await newVariable1.set('yellow');
+   * const newVariable1 = await collection.createSizeVariable('myvar1', { unit: 'px', value: 50 });
+   * await newVariable1.set({ unit: 'px', value: 80 });
    * ```
    */
-  set(value: SizeValue | SizeVariable): Promise<null>;
+  set(
+    value: SizeValue | SizeVariable,
+    options?: VariableOptions
+  ): Promise<null>;
   /**
    * Get the variable’s value.
+   * @param options - The configuration options for the variable.
+   * @param options.mode - The optional mode object to get the value for.
    * @returns A Promise that resolves into a value, or if the variable is an alias - the original Variable.
    * @example
    * ```ts
@@ -104,7 +119,7 @@ interface SizeVariable {
    * console.log(await newVariable1.get());
    * ```
    */
-  get(): Promise<SizeValue | SizeVariable>;
+  get(options?: VariableOptions): Promise<SizeValue | SizeVariable>;
   /**
    * Removes a variable from the default collection.
    * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful or not.
@@ -149,6 +164,8 @@ interface NumberVariable {
   /**
    * Set the value of the variable. The value must be of the same type as the value of the instantiated variable.
    * @param value - The desired value of the variable.
+   * @param options - The configuration options for the variable.
+   * @param options.mode - The optional mode object to set the value for.
    * @returns A Promise that resolves once the value is successfully set.
    * @example
    * ```ts
@@ -156,10 +173,15 @@ interface NumberVariable {
    * await newVariable.set(200);
    * ```
    */
-  set(value: NumberValue | NumberVariable): Promise<null>;
+  set(
+    value: NumberValue | NumberVariable,
+    options?: VariableOptions
+  ): Promise<null>;
 
   /**
    * Get the variable’s value.
+   * @param options - The configuration options for the variable.
+   * @param options.mode - The optional mode object to get the value for.
    * @returns A Promise that resolves into the variable's number value, or if the variable is an alias - the original Variable.
    * @example
    * ```ts
@@ -167,7 +189,7 @@ interface NumberVariable {
    * console.log(await newVariable.get());
    * ```
    */
-  get(): Promise<NumberValue | NumberVariable>;
+  get(options?: VariableOptions): Promise<NumberValue | NumberVariable>;
 
   /**
    * Removes the variable from the default collection.
@@ -212,6 +234,8 @@ interface PercentageVariable {
   /**
    * Set the value of the variable. The value must be of the same type as the value of the instantiated variable.
    * @param value - The desired value of the variable.
+   * @param options - The configuration options for the variable.
+   * @param options.mode - The optional mode object to set the value for.
    * @returns A Promise that resolves once the value is successfully set.
    * @example
    * ```ts
@@ -219,10 +243,15 @@ interface PercentageVariable {
    * await newVariable.set(50);
    * ```
    */
-  set(value: PercentageValue | PercentageVariable): Promise<null>;
+  set(
+    value: PercentageValue | PercentageVariable,
+    options?: VariableOptions
+  ): Promise<null>;
 
   /**
    * Get the variable’s value.
+   * @param options - The configuration options for the variable.
+   * @param options.mode - The optional mode object to get the value for.
    * @returns A Promise that resolves into the variable's value, or if the variable is an alias - the original Variable.
    * @example
    * ```ts
@@ -230,7 +259,7 @@ interface PercentageVariable {
    * console.log(await newVariable.get());
    * ```
    */
-  get(): Promise<PercentageValue | PercentageVariable>;
+  get(options?: VariableOptions): Promise<PercentageValue | PercentageVariable>;
 
   /**
    * Removes the variable from the default collection.
@@ -273,6 +302,8 @@ interface FontFamilyVariable {
   /**
    * Set value of variable. The value must be of the same type as the value of the instantiated variable.
    * @param value - The desired value of the variable.
+   * @param options - The configuration options for the variable.
+   * @param options.mode - The optional mode object to set the value for.
    * @returns A Promise that resolves into a value, or if the variable is an alias - the original Variable.
    * @example
    * ```ts
@@ -280,9 +311,14 @@ interface FontFamilyVariable {
    * await newVariable1.set('yellow');
    * ```
    */
-  set(value: FontFamilyValue | FontFamilyVariable): Promise<null>;
+  set(
+    value: FontFamilyValue | FontFamilyVariable,
+    options?: VariableOptions
+  ): Promise<null>;
   /**
    * Get the variable’s value.
+   * @param options - The configuration options for the variable.
+   * @param options.mode - The optional mode object to get the value for.
    * @returns A Promise that resolves into a value, or if the variable is an alias - the original Variable.
    * @example
    * ```ts
@@ -290,7 +326,7 @@ interface FontFamilyVariable {
    * console.log(await newVariable1.get());
    * ```
    */
-  get(): Promise<FontFamilyValue | FontFamilyVariable>;
+  get(options?: VariableOptions): Promise<FontFamilyValue | FontFamilyVariable>;
   /**
    * Removes a variable from the default collection.
    * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful or not.
@@ -347,8 +383,88 @@ interface VariableCollection {
    * ```
    */
   setName(newName: string): Promise<null>;
+  /**
+   * Creates a new variable mode.
+   * @param name - The desired name of the variable mode.
+   * @returns A Promise that resolves into the new variable mode.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const mode = await collection.createVariableMode('My Mode');
+   * ```
+   */
+  createVariableMode(name: string): Promise<VariableMode>;
+  /**
+   * Gets a variable mode by id.
+   * @param id - The id of the variable mode.
+   * @returns A Promise that resolves into the variable mode.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const mode = await collection.getVariableModeById('modeId');
+   * ```
+   */
+  getVariableModeById(id: VariableModeId): Promise<null | VariableMode>;
+  /**
+   * Gets a variable mode by name.
+   * @param name - The name of the variable mode.
+   * @returns A Promise that resolves into the variable mode.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const mode = await collection.getVariableModeByName('modeName');
+   * ```
+   */
+  getVariableModeByName(name: string): Promise<null | VariableMode>;
+  /**
+   * Gets all variable modes.
+   * @returns A Promise that resolves into an array of variable modes.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const modes = await collection.getAllVariableModes();
+   * ```
+   */
+  getAllVariableModes(): Promise<Array<VariableMode>>;
 }
 
+interface VariableMode {
+  readonly id: VariableModeId;
+  /**
+   * Gets the name of the variable mode.
+   * @returns A Promise that resolves into the variable mode's name.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const mode = await collection.createVariableMode('My Mode')
+   * const modeName = await mode.getName();
+   * ```
+   */
+  getName(): Promise<string>;
+  /**
+   * Removes the variable mode from the collection.
+   * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful.
+   * @example
+   * ```ts
+   * const mode = await collection.createVariableMode('My Mode')
+   * await mode.remove();
+   * ```
+   */
+  remove(): Promise<boolean>;
+  /**
+   * Sets the name of the variable mode.
+   * @param name - The desired name of the variable mode.
+   * @returns A Promise that resolves once the name is successfully set.
+   * @example
+   * ```ts
+   * const mode = await collection.createVariableMode('My Mode')
+   * await mode.setName('My New Mode');
+   * ```
+   */
+  setName(name: string): Promise<null>;
+}
+
+type VariableModeId = string;
 type VariableCollectionId = string;
 type VariableId = string;
 type ColorValue = string;
@@ -356,7 +472,6 @@ type SizeValue = {value: number; unit: SizeUnit};
 type FontFamilyValue = string;
 type NumberValue = number;
 type PercentageValue = number;
-
 type SizeUnit =
   | 'px'
   | 'em'
@@ -372,3 +487,7 @@ type SizeUnit =
   | 'vmax'
   | 'vmin'
   | 'ch';
+type VariableOptions = {
+  /** The mode to get/set the variable value for. */
+  mode?: VariableMode;
+};