@webflow/designer-extension-typings 2.0.8 → 2.0.10

package/api.d.ts

@@ -19,15 +19,35 @@ interface WebflowApi {
    * - siteId: the unique ID of the current Webflow site.
    * - siteName: the name of the current Webflow site.
    * - shortName: a shortened reference to the name of the current Webflow site.
+   * - isPasswordProtected: whether the site is password protected.
+   * - isPrivateStaging: whether the site has private staging turned on or not.
+   * - domains: an array of objects representing the domains associated with the site, each containing the following properties:
+   *   - url: the URL of the domain.
+   *   - lastPublished: the timestamp of the last time the domain was published.
+   *   - default: a boolean indicating whether the domain is the default domain for the site.
+   *   - stage: the target of the publish
    * @example
    * ```ts
    * const siteInfo = await webflow.getSiteInfo();
    * console.log('Site ID:', siteInfo.siteId);
    * console.log('Site Name:', siteInfo.siteName);
    * console.log('Shortened Site Name:', siteInfo.shortName);
-   * ```
-   */
-  getSiteInfo(): Promise<{siteId: string; siteName: string; shortName: string}>;
+   * console.log('Domains:', siteInfo.domains);
+   * ```
+   */
+  getSiteInfo(): Promise<{
+    siteId: string;
+    siteName: string;
+    shortName: string;
+    isPasswordProtected: boolean;
+    isPrivateStaging: boolean;
+    domains: Array<{
+      url: string;
+      lastPublished: string | null;
+      default: boolean;
+      stage: 'staging' | 'production';
+    }>;
+  }>;
   /**
    * Get the currently selected element in the Webflow Designer.
    * @returns A promise that resolves to one of the following:
@@ -185,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.
@@ -322,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

@@ -2702,6 +2702,8 @@ interface FormFormElement
   readonly id: FullElementId;
   readonly type: 'FormForm';
   readonly plugin: 'Form';
+  getName(): Promise<null | string>;
+  setName(name: string): Promise<null>;
 }
 
 interface FormInlineLabelElement
@@ -2806,6 +2808,8 @@ interface FormWrapperElement
   readonly id: FullElementId;
   readonly type: 'FormWrapper';
   readonly plugin: 'Form';
+  getName(): Promise<null | string>;
+  setName(name: string): Promise<null>;
 }
 
 interface FormReCaptchaElement

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webflow/designer-extension-typings",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "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;
+};