@webflow/designer-extension-typings 2.0.13 → 2.0.19

package/api.d.ts

@@ -33,6 +33,8 @@ interface WebflowApi {
    * console.log('Site Name:', siteInfo.siteName);
    * console.log('Shortened Site Name:', siteInfo.shortName);
    * console.log('Domains:', siteInfo.domains);
+   * console.log('Workspace ID:', siteInfo.workspaceId);
+   * console.log('Workspace Slug:', siteInfo.workspaceSlug);
    * ```
    */
   getSiteInfo(): Promise<{
@@ -41,6 +43,8 @@ interface WebflowApi {
     shortName: string;
     isPasswordProtected: boolean;
     isPrivateStaging: boolean;
+    workspaceId: string;
+    workspaceSlug: string;
     domains: Array<{
       url: string;
       lastPublished: string | null;
@@ -386,8 +390,9 @@ interface WebflowApi {
    * Notifies the user with a message using a specific style. Error messages provide user's with the opportunity to
    * close the Designer Extension.
    * @param opts - An object containing the following notification options:
-   * - type: The type of notification to display. One of 'Error', 'Info', 'Success'.
+   * - type: The type of notification to display. One of 'Error', 'Info', 'Success', 'Warning'.
    * - message: The message to display in the notification.
+   * - dismissAfter: (optional) Number of milliseconds after which the notification will be auto-dismissed. If not provided, uses default 4000ms.
    * @returns A Promise that resolves when the notification is displayed to the user.
    * @example
    * ```ts
@@ -395,11 +400,13 @@ interface WebflowApi {
    * webflow.notify({ type: 'Error', message: 'Something went wrong, try again!' }); // Error notification
    * webflow.notify({ type: 'Success', message: 'Successfully did something!' }); // Success notification
    * webflow.notify({ type: 'Warning', message: 'Something is not right, please check again!' }); // Warning notification
+   * webflow.notify({ type: 'Error', message: 'Something went wrong!', dismissAfter: 5000 }); // Error notification with custom dismiss
    * ```
    */
   notify(opts: {
     type: 'Error' | 'Info' | 'Success' | 'Warning';
     message: string;
+    dismissAfter?: number;
   }): Promise<void>;
   /**
    * Allows you to register your custom functions (callbacks) to be executed when certain events happen. This event

package/elements-generated.d.ts

@@ -2817,6 +2817,12 @@ interface FormTextInputElement
   setName(name: string): Promise<null>;
   getRequired(): Promise<boolean>;
   setRequired(value: boolean): Promise<null>;
+  getInputType(): Promise<
+    'text' | 'email' | 'password' | 'tel' | 'number' | 'url' | null
+  >;
+  setInputType(
+    type: 'text' | 'email' | 'password' | 'tel' | 'number' | 'url'
+  ): Promise<null>;
 }
 
 interface FormWrapperElement

package/package.json

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

package/styles.d.ts

@@ -92,6 +92,103 @@ interface Style {
    * ```
    */
   isComboClass(): boolean;
+  /**
+   * Retrieve a variable mode from the style.
+   * @param collection - The collection from which to get the currently applied mode.
+   * @param options - Options to get variable mode based on breakpoints and pseudo classes / states.
+   * @example
+   * ```ts
+   * const collection = await webflow.getVariableCollectionById('collection-id');
+   * let variableMode = await myStyle.getVariableMode(collection);
+   * ```
+   */
+  getVariableMode(
+    collection: VariableCollection,
+    options?: BreakpointAndPseudo
+  ): Promise<null | VariableMode>;
+  /**
+   * Sets a variable mode for the style.
+   * @param collection - The collection that the mode being set belongs to.
+   * @param mode - The variable mode to set.
+   * @param options - Options to set variable mode based on breakpoints and pseudo classes / states.
+   * @example
+   * ```ts
+   * const collection = await webflow.getVariableCollectionById('collection-id');
+   * const mode = await collection.getVariableModeByName('Dark');
+   * await myStyle.setVariableMode(collection, mode);
+   * ```
+   */
+  setVariableMode(
+    collection: VariableCollection,
+    mode: VariableMode,
+    options?: BreakpointAndPseudo
+  ): Promise<null>;
+  /**
+   * Removes a variable mode from the style.
+   * @param collection - The collection that the mode being removed belongs to.
+   * @param options - Options to remove variable mode based on breakpoints and pseudo classes / states.
+   * @example
+   * ```ts
+   * const collection = await webflow.getVariableCollectionById('collection-id');
+   * await myStyle.removeVariableMode(collection)
+   * ```
+   */
+  removeVariableMode(
+    collection: VariableCollection,
+    options?: BreakpointAndPseudo
+  ): Promise<null>;
+  /**
+   * Retrieve all variable modes applied on the style.
+   * @param options - Options to get variable modes based on breakpoints and pseudo classes / states.
+   * @example
+   * ```ts
+   * const modes = await myStyle.getVariableModes();
+   * ```
+   */
+  getVariableModes(
+    options?: BreakpointAndPseudo
+  ): Promise<VariableModeStylePropertyMap>;
+  /**
+   * Sets variable modes for the style.
+   * @param props - The variable modes to set.
+   * @param options - Options to set variable modes based on breakpoints and pseudo classes / states.
+   * @example
+   * ```ts
+   * await myStyle.setVariableModes({
+   *   'collection-id-1': 'mode-id-1',
+   *   'collection-id-2': 'mode-id-2',
+   * });
+   * ```
+   */
+  setVariableModes(
+    props: VariableModeStylePropertyMap,
+    options?: BreakpointAndPseudo
+  ): Promise<null>;
+  /**
+   * Removes variable modes from the style.
+   * @param modes - The variable modes to remove from the style.
+   * @param options - Options to remove variable modes based on breakpoints and pseudo classes / states.
+   * @example
+   * ```ts
+   * await myStyle.removeVariableModes({
+   *   'collection-id-1': 'mode-id-1',
+   *   'collection-id-2': 'mode-id-2',
+   * });
+   * ```
+   */
+  removeVariableModes(
+    modes: Array<VariableMode>,
+    options?: BreakpointAndPseudo
+  ): Promise<null>;
+  /**
+   * Removes all variable modes from the style.
+   * @param options - Options to remove all variable modes based on breakpoints and pseudo classes / states.
+   * @example
+   * ```ts
+   * await myStyle.removeAllVariableModes();
+   * ```
+   */
+  removeAllVariableModes(options?: BreakpointAndPseudo): Promise<null>;
 }
 
 type StyleId = string;
@@ -109,3 +206,7 @@ type BreakpointId =
   | 'medium'
   | 'small'
   | 'tiny';
+
+type VariableModeStylePropertyMap = {
+  [collectionId: VariableCollectionId]: VariableModeId;
+};

package/variables.d.ts

@@ -38,7 +38,7 @@ interface ColorVariable {
    * ```
    */
   set(
-    value: ColorValue | ColorVariable,
+    value: ColorValue | ColorVariable | CustomValue,
     options?: VariableOptions
   ): Promise<null>;
   /**
@@ -52,7 +52,9 @@ interface ColorVariable {
    * console.log(await newVariable1.get());
    * ```
    */
-  get(options?: VariableOptions): Promise<ColorValue | ColorVariable>;
+  get(
+    options?: VariableOptions
+  ): Promise<ColorValue | ColorVariable | CustomValue>;
   /**
    * Removes a variable from the default collection.
    * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful or not.
@@ -64,6 +66,36 @@ interface ColorVariable {
    * ```
    */
   remove(): Promise<boolean>;
+  /**
+   * Gets a CSS string representing a binding to the variable.
+   *
+   * This string can be used in custom CSS values to ensure the binding will not break
+   * if the variable is renamed.
+   *
+   * @returns A Promise that resolves into a string representing the variable's name binding. (e.g. `var(--my-color-variable)`)
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableBinding = await variable.getBinding()
+   * ```
+   */
+  getBinding(): Promise<string>;
+  /**
+   * Gets a CSS string representing the variable's name.
+   *
+   * This string can be used in custom CSS with a variable (e.g. binding with a fallback value).
+   *
+   *
+   * @returns A Promise that resolves into a string representing the variable's name. (e.g. `--my-color-variable`)
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableCSSName = await variable.getCSSName()
+   * ```
+   */
+  getCSSName(): Promise<string>;
 }
 
 interface SizeVariable {
@@ -105,7 +137,7 @@ interface SizeVariable {
    * ```
    */
   set(
-    value: SizeValue | SizeVariable,
+    value: SizeValue | SizeVariable | CustomValue,
     options?: VariableOptions
   ): Promise<null>;
   /**
@@ -119,7 +151,9 @@ interface SizeVariable {
    * console.log(await newVariable1.get());
    * ```
    */
-  get(options?: VariableOptions): Promise<SizeValue | SizeVariable>;
+  get(
+    options?: VariableOptions
+  ): Promise<SizeValue | SizeVariable | CustomValue>;
   /**
    * Removes a variable from the default collection.
    * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful or not.
@@ -130,6 +164,35 @@ interface SizeVariable {
    * ```
    */
   remove(): Promise<boolean>;
+  /**
+   * Gets a CSS string representing a binding to the variable.
+   *
+   * This string can be used in custom CSS values to ensure the binding will not break
+   * if the variable is renamed.
+   *
+   * @returns A Promise that resolves into a string representing the variable's name binding. (e.g. `var(--my-size-variable)`)
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableBinding = await variable.getBinding()
+   * ```
+   */
+  getBinding(): Promise<string>;
+  /**
+   * Gets a CSS string representing the variable's name.
+   *
+   * This string can be used in custom CSS with a variable (e.g. binding with a fallback value).
+   *
+   * @returns A Promise that resolves into a string representing the variable's name. (e.g. `--my-size-variable`)
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableCSSName = await variable.getCSSName()
+   * ```
+   */
+  getCSSName(): Promise<string>;
 }
 
 interface NumberVariable {
@@ -174,7 +237,7 @@ interface NumberVariable {
    * ```
    */
   set(
-    value: NumberValue | NumberVariable,
+    value: NumberValue | NumberVariable | CustomValue,
     options?: VariableOptions
   ): Promise<null>;
 
@@ -189,7 +252,9 @@ interface NumberVariable {
    * console.log(await newVariable.get());
    * ```
    */
-  get(options?: VariableOptions): Promise<NumberValue | NumberVariable>;
+  get(
+    options?: VariableOptions
+  ): Promise<NumberValue | NumberVariable | CustomValue>;
 
   /**
    * Removes the variable from the default collection.
@@ -201,6 +266,35 @@ interface NumberVariable {
    * ```
    */
   remove(): Promise<boolean>;
+  /**
+   * Gets a CSS string representing a binding to the variable.
+   *
+   * This string can be used in custom CSS values to ensure the binding will not break
+   * if the variable is renamed.
+   *
+   * @returns A Promise that resolves into a string representing the variable's name binding. (e.g. `var(--my-number-variable)`)
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableBinding = await variable.getBinding()
+   * ```
+   */
+  getBinding(): Promise<string>;
+  /**
+   * Gets a CSS string representing the variable's name.
+   *
+   * This string can be used in custom CSS with a variable (e.g. binding with a fallback value).
+   *
+   * @returns A Promise that resolves into a string representing the variable's CSS name. (e.g. `--my-number-variable`)
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableCSSName = await variable.getCSSName()
+   * ```
+   */
+  getCSSName(): Promise<string>;
 }
 
 interface PercentageVariable {
@@ -244,7 +338,7 @@ interface PercentageVariable {
    * ```
    */
   set(
-    value: PercentageValue | PercentageVariable,
+    value: PercentageValue | PercentageVariable | CustomValue,
     options?: VariableOptions
   ): Promise<null>;
 
@@ -259,7 +353,9 @@ interface PercentageVariable {
    * console.log(await newVariable.get());
    * ```
    */
-  get(options?: VariableOptions): Promise<PercentageValue | PercentageVariable>;
+  get(
+    options?: VariableOptions
+  ): Promise<PercentageValue | PercentageVariable | CustomValue>;
 
   /**
    * Removes the variable from the default collection.
@@ -271,6 +367,35 @@ interface PercentageVariable {
    * ```
    */
   remove(): Promise<boolean>;
+  /**
+   * Gets a CSS string representing a binding to the variable.
+   *
+   * This string can be used in custom CSS values to ensure the binding will not break
+   * if the variable is renamed.
+   *
+   * @returns A Promise that resolves into a string representing the variable's name binding. (e.g. `var(--my-percentage-variable)`)
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableBinding = await variable.getBinding()
+   * ```
+   */
+  getBinding(): Promise<string>;
+  /**
+   * Gets a CSS string representing the variable's name.
+   *
+   * This string can be used in custom CSS with a variable (e.g. binding with a fallback value).
+   *
+   * @returns A Promise that resolves into a string representing the variable's name. (e.g. `--my-percentage-variable`)
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableCSSName = await variable.getCSSName()
+   * ```
+   */
+  getCSSName(): Promise<string>;
 }
 
 interface FontFamilyVariable {
@@ -312,7 +437,7 @@ interface FontFamilyVariable {
    * ```
    */
   set(
-    value: FontFamilyValue | FontFamilyVariable,
+    value: FontFamilyValue | FontFamilyVariable | CustomValue,
     options?: VariableOptions
   ): Promise<null>;
   /**
@@ -326,7 +451,9 @@ interface FontFamilyVariable {
    * console.log(await newVariable1.get());
    * ```
    */
-  get(options?: VariableOptions): Promise<FontFamilyValue | FontFamilyVariable>;
+  get(
+    options?: VariableOptions
+  ): Promise<FontFamilyValue | FontFamilyVariable | CustomValue>;
   /**
    * Removes a variable from the default collection.
    * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful or not.
@@ -337,6 +464,35 @@ interface FontFamilyVariable {
    * ```
    */
   remove(): Promise<boolean>;
+  /**
+   * Gets a CSS string representing a binding to the variable.
+   *
+   * This string can be used in custom CSS values to ensure the binding will not break
+   * if the variable is renamed.
+   *
+   * @returns A Promise that resolves into a string representing the variable's name binding. (e.g. `var(--my-font-family-variable)`)
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableBinding = await variable.getBinding()
+   * ```
+   */
+  getBinding(): Promise<string>;
+  /**
+   * Gets a CSS string representing the variable's name.
+   *
+   * This string can be used in custom CSS with a variable (e.g. binding with a fallback value).
+   *
+   * @returns A Promise that resolves into a string representing the variable's name. (e.g. `--my-font-family-variable`)
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableCSSName = await variable.getCSSName()
+   * ```
+   */
+  getCSSName(): Promise<string>;
 }
 
 type Variable =
@@ -354,23 +510,23 @@ interface VariableCollection {
   getAllVariables(): Promise<Array<Variable>>;
   createColorVariable(
     name: string,
-    value: string | ColorVariable
+    value: string | ColorVariable | CustomValue
   ): Promise<ColorVariable>;
   createSizeVariable(
     name: string,
-    value: SizeValue | SizeVariable
+    value: SizeValue | SizeVariable | CustomValue
   ): Promise<SizeVariable>;
   createNumberVariable(
     name: string,
-    value: number | NumberVariable
+    value: number | NumberVariable | CustomValue
   ): Promise<NumberVariable>;
   createPercentageVariable(
     name: string,
-    value: number | PercentageVariable
+    value: number | PercentageVariable | CustomValue
   ): Promise<PercentageVariable>;
   createFontFamilyVariable(
     name: string,
-    value: string | FontFamilyVariable
+    value: string | FontFamilyVariable | CustomValue
   ): Promise<FontFamilyVariable>;
   /**
    * Sets the name of the variable collection.
@@ -490,4 +646,10 @@ type SizeUnit =
 type VariableOptions = {
   /** The mode to get/set the variable value for. */
   mode?: VariableMode;
+  /** Whether to return custom values. */
+  customValues?: boolean;
+};
+type CustomValue = {
+  type: 'custom';
+  value: string;
 };