@webflow/designer-extension-typings 2.0.5 → 2.0.7

package/element-presets-generated.d.ts

@@ -3,6 +3,7 @@
 type ElementPresets = {
   Animation: ElementPreset<AnyElement>;
   Spline: ElementPreset<AnyElement>;
+  Rive: ElementPreset<AnyElement>;
   SearchForm: ElementPreset<AnyElement>;
   DOM: ElementPreset<DOMElement>;
   DivBlock: ElementPreset<BlockElement>;

package/package.json

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

package/pages.d.ts

@@ -130,13 +130,13 @@ interface Page {
   getTitle(): Promise<string>;
   /**
    * Sets the title of the page to the provided value.
-   * @param title - The new title to set for the page.
+   * @param title - The new title to set for the page. Passing null will unset the current value.
    * @example
    * ```ts
    * await myPage.setTitle("New Page Title");
    * ```
    */
-  setTitle(title: string): Promise<null>;
+  setTitle(title: string | null): Promise<null>;
   /**
    * Retrieves the description of the page.
    * @example
@@ -148,13 +148,13 @@ interface Page {
   getDescription(): Promise<string>;
   /**
    * Sets the description of the page to the provided value.
-   * @param description - The new description to set for the page.
+   * @param description - The new description to set for the page. Passing null will unset the current value.
    * @example
    * ```ts
    * await myPage.setDescription("New Page Description");
    * ```
    */
-  setDescription(description: string): Promise<null>;
+  setDescription(description: string | null): Promise<null>;
   /**
    * Checks if the page is in draft mode or not.
    * @example
@@ -203,13 +203,13 @@ interface Page {
   getOpenGraphTitle(): Promise<string>;
   /**
    * Sets the Open Graph (OG) title of the page to the provided value.
-   * @param title - The new OG title to set for the page.
+   * @param title - The new OG title to set for the page. Passing null will unset the current value.
    * @example
    * ```ts
    * await myPage.setOpenGraphTitle("New OG Title");
    * ```
    */
-  setOpenGraphTitle(title: string): Promise<null>;
+  setOpenGraphTitle(title: string | null): Promise<null>;
   /**
    * Checks if the page uses its description as the Open Graph description.
    * @example
@@ -239,13 +239,13 @@ interface Page {
   getOpenGraphDescription(): Promise<string>;
   /**
    * Sets the Open Graph (OG) description of the page to the provided value.
-   * @param description - The new OG description to set for the page.
+   * @param description - The new OG description to set for the page. Passing null will unset the current value.
    * @example
    * ```ts
    * myPage.setOpenGraphDescription("New OG Description");
    * ```
    */
-  setOpenGraphDescription(description: string): Promise<null>;
+  setOpenGraphDescription(description: string | null): Promise<null>;
   /**
    * Retrieves the URL of the Open Graph (OG) image associated with the page.
    * @example
@@ -257,13 +257,13 @@ interface Page {
   getOpenGraphImage(): Promise<null | string>;
   /**
    * Sets the URL of the Open Graph (OG) image associated with the page.
-   * @param url - The new URL of the OG image to set for the page.
+   * @param url - The new URL of the OG image to set for the page. Passing null will unset the current value.
    * @example
    * ```ts
    * myPage.setOpenGraphImage("https://example.com/image.jpg");
    * ```
    */
-  setOpenGraphImage(url: string): Promise<null>;
+  setOpenGraphImage(url: string | null): Promise<null>;
   /**
    * Checks if the page is excluded from search engine indexing.
    * @example
@@ -311,13 +311,13 @@ interface Page {
   getSearchTitle(): Promise<string>;
   /**
    * Sets the search engine title of the page to the provided value.
-   * @param title - The new search engine title to set for the page.
+   * @param title - The new search engine title to set for the page. Passing null will unset the current value.
    * @example
    * ```ts
    * myPage.setSearchTitle("New Search Engine Title");
    * ```
    */
-  setSearchTitle(title: string): Promise<null>;
+  setSearchTitle(title: string | null): Promise<null>;
   /**
    * Checks if the page uses its description as the search engine description.
    * @example
@@ -347,13 +347,13 @@ interface Page {
   getSearchDescription(): Promise<string>;
   /**
    * Sets the search engine description of the page to the provided value.
-   * @param description - The new search engine description to set for the page.
+   * @param description - The new search engine description to set for the page. Passing null will unset the current value.
    * @example
    * ```ts
    * myPage.setSearchDescription("New Search Engine Description");
    * ```
    */
-  setSearchDescription(description: string): Promise<null>;
+  setSearchDescription(description: string | null): Promise<null>;
   /**
    * Checks if the page uses its Open Graph (OG) image as the search engine image.
    * @example
@@ -382,13 +382,13 @@ interface Page {
   getSearchImage(): Promise<string>;
   /**
    * Sets the search engine image URL of the page.
-   * @param url - The new search engine image URL to set for the page.
+   * @param url - The new search engine image URL to set for the page. Passing null will unset the current value.
    * @example
    * ```ts
    * myPage.setSearchImage("https://example.com/image.jpg");
    * ```
    */
-  setSearchImage(url: string): Promise<null>;
+  setSearchImage(url: string | null): Promise<null>;
   /**
    * Checks if the page is password-protected.
    * @example

package/styles-generated.d.ts

@@ -14,13 +14,13 @@ type PropertyMap = {
   'animation-play-state'?: string;
   'animation-timing-function'?: string;
   appearance?: string;
-  'backdrop-filter'?: string;
+  'backdrop-filter'?: string | SizeVariable;
   'backface-visibility'?: string;
   'background-attachment'?: string;
   'background-blend-mode'?: string;
   'background-clip'?: string;
   'background-color'?: string | ColorVariable;
-  'background-image'?: string;
+  'background-image'?: string | ColorVariable;
   'background-origin'?: string;
   'background-position'?: string;
   'background-position-x'?: string | SizeVariable;
@@ -35,11 +35,12 @@ type PropertyMap = {
   'border-block-start-style'?: string;
   'border-block-start-width'?: string | SizeVariable;
   'border-bottom-color'?: string | ColorVariable;
-  'border-bottom-left-radius'?: string | SizeVariable;
-  'border-bottom-right-radius'?: string | SizeVariable;
+  'border-bottom-left-radius'?: string | SizeVariable | PercentageVariable;
+  'border-bottom-right-radius'?: string | SizeVariable | PercentageVariable;
   'border-bottom-style'?: string;
   'border-bottom-width'?: string | SizeVariable;
   'border-collapse'?: string;
+  'border-color'?: string | ColorVariable;
   'border-end-end-radius'?: string | SizeVariable;
   'border-end-start-radius'?: string | SizeVariable;
   'border-image-outset'?: string | SizeVariable;
@@ -56,18 +57,20 @@ type PropertyMap = {
   'border-left-color'?: string | ColorVariable;
   'border-left-style'?: string;
   'border-left-width'?: string | SizeVariable;
+  'border-radius'?: string | SizeVariable | PercentageVariable;
   'border-right-color'?: string | ColorVariable;
   'border-right-style'?: string;
   'border-right-width'?: string | SizeVariable;
   'border-start-end-radius'?: string | SizeVariable;
   'border-start-start-radius'?: string | SizeVariable;
   'border-top-color'?: string | ColorVariable;
-  'border-top-left-radius'?: string | SizeVariable;
-  'border-top-right-radius'?: string | SizeVariable;
+  'border-top-left-radius'?: string | SizeVariable | PercentageVariable;
+  'border-top-right-radius'?: string | SizeVariable | PercentageVariable;
   'border-top-style'?: string;
   'border-top-width'?: string | SizeVariable;
-  bottom?: string | SizeVariable;
-  'box-shadow'?: string;
+  'border-width'?: string | SizeVariable;
+  bottom?: string | SizeVariable | PercentageVariable;
+  'box-shadow'?: string | SizeVariable;
   'box-sizing'?: string;
   'break-after'?: string;
   'break-before'?: string;
@@ -99,11 +102,11 @@ type PropertyMap = {
   fill?: string;
   'fill-opacity'?: string;
   'fill-rule'?: string;
-  filter?: string;
-  'flex-basis'?: string | SizeVariable;
+  filter?: string | SizeVariable;
+  'flex-basis'?: string | SizeVariable | PercentageVariable;
   'flex-direction'?: string;
-  'flex-grow'?: string;
-  'flex-shrink'?: string;
+  'flex-grow'?: string | NumberVariable;
+  'flex-shrink'?: string | NumberVariable;
   'flex-wrap'?: string;
   float?: string;
   'flood-color'?: string | ColorVariable;
@@ -111,7 +114,7 @@ type PropertyMap = {
   'font-family'?: string | FontFamilyVariable;
   'font-kerning'?: string;
   'font-optical-sizing'?: string;
-  'font-size'?: string | SizeVariable;
+  'font-size'?: string | SizeVariable | PercentageVariable;
   'font-stretch'?: string;
   'font-style'?: string;
   'font-variant-alternates'?: string;
@@ -119,20 +122,20 @@ type PropertyMap = {
   'font-variant-east-asian'?: string;
   'font-variant-ligatures'?: string;
   'font-variant-numeric'?: string;
-  'font-weight'?: string;
+  'font-weight'?: string | NumberVariable;
   'grid-auto-columns'?: string;
   'grid-auto-flow'?: string;
   'grid-auto-rows'?: string;
   'grid-column-end'?: string;
-  'grid-column-gap'?: string;
+  'grid-column-gap'?: string | SizeVariable | PercentageVariable;
   'grid-column-start'?: string;
   'grid-row-end'?: string;
-  'grid-row-gap'?: string | SizeVariable;
+  'grid-row-gap'?: string | SizeVariable | PercentageVariable;
   'grid-row-start'?: string;
   'grid-template-areas'?: string;
   'grid-template-columns'?: string;
   'grid-template-rows'?: string;
-  height?: string | SizeVariable;
+  height?: string | SizeVariable | PercentageVariable;
   'image-orientation'?: string;
   'image-rendering'?: string;
   'inline-size'?: string | SizeVariable;
@@ -144,34 +147,34 @@ type PropertyMap = {
   'justify-content'?: string;
   'justify-items'?: string;
   'justify-self'?: string;
-  left?: string | SizeVariable;
+  left?: string | SizeVariable | PercentageVariable;
   'letter-spacing'?: string | SizeVariable;
   'lighting-color'?: string | ColorVariable;
   'line-break'?: string;
-  'line-height'?: string | SizeVariable;
+  'line-height'?: string | SizeVariable | NumberVariable | PercentageVariable;
   'list-style-image'?: string;
   'list-style-position'?: string;
   'list-style-type'?: string;
   'margin-block-end'?: string | SizeVariable;
   'margin-block-start'?: string | SizeVariable;
-  'margin-bottom'?: string | SizeVariable;
+  'margin-bottom'?: string | SizeVariable | PercentageVariable;
   'margin-inline-end'?: string | SizeVariable;
   'margin-inline-start'?: string | SizeVariable;
-  'margin-left'?: string | SizeVariable;
-  'margin-right'?: string | SizeVariable;
-  'margin-top'?: string | SizeVariable;
+  'margin-left'?: string | SizeVariable | PercentageVariable;
+  'margin-right'?: string | SizeVariable | PercentageVariable;
+  'margin-top'?: string | SizeVariable | PercentageVariable;
   'marker-end'?: string;
   'marker-mid'?: string;
   'marker-start'?: string;
   'mask-type'?: string;
   'max-block-size'?: string | SizeVariable;
-  'max-height'?: string | SizeVariable;
+  'max-height'?: string | SizeVariable | PercentageVariable;
   'max-inline-size'?: string | SizeVariable;
-  'max-width'?: string | SizeVariable;
+  'max-width'?: string | SizeVariable | PercentageVariable;
   'min-block-size'?: string | SizeVariable;
-  'min-height'?: string | SizeVariable;
+  'min-height'?: string | SizeVariable | PercentageVariable;
   'min-inline-size'?: string | SizeVariable;
-  'min-width'?: string | SizeVariable;
+  'min-width'?: string | SizeVariable | PercentageVariable;
   'mix-blend-mode'?: string;
   'object-fit'?: string;
   'object-position'?: string;
@@ -179,7 +182,7 @@ type PropertyMap = {
   'offset-distance'?: string | SizeVariable;
   'offset-path'?: string;
   'offset-rotate'?: string;
-  opacity?: string;
+  opacity?: string | NumberVariable | PercentageVariable;
   order?: string;
   'outline-color'?: string | ColorVariable;
   'outline-offset'?: string | SizeVariable;
@@ -192,12 +195,12 @@ type PropertyMap = {
   'overscroll-behavior-inline'?: string;
   'padding-block-end'?: string | SizeVariable;
   'padding-block-start'?: string | SizeVariable;
-  'padding-bottom'?: string | SizeVariable;
+  'padding-bottom'?: string | SizeVariable | PercentageVariable;
   'padding-inline-end'?: string | SizeVariable;
   'padding-inline-start'?: string | SizeVariable;
-  'padding-left'?: string | SizeVariable;
-  'padding-right'?: string | SizeVariable;
-  'padding-top'?: string | SizeVariable;
+  'padding-left'?: string | SizeVariable | PercentageVariable;
+  'padding-right'?: string | SizeVariable | PercentageVariable;
+  'padding-top'?: string | SizeVariable | PercentageVariable;
   'paint-order'?: string;
   perspective?: string | SizeVariable;
   'perspective-origin'?: string;
@@ -205,7 +208,7 @@ type PropertyMap = {
   position?: string;
   r?: string | SizeVariable;
   resize?: string;
-  right?: string | SizeVariable;
+  right?: string | SizeVariable | PercentageVariable;
   rotate?: string;
   'row-gap'?: string | SizeVariable;
   rx?: string | SizeVariable;
@@ -247,13 +250,13 @@ type PropertyMap = {
   'text-emphasis-color'?: string | ColorVariable;
   'text-emphasis-position'?: string;
   'text-emphasis-style'?: string;
-  'text-indent'?: string | SizeVariable;
+  'text-indent'?: string | SizeVariable | PercentageVariable;
   'text-overflow'?: string;
   'text-rendering'?: string;
-  'text-shadow'?: string;
+  'text-shadow'?: string | SizeVariable;
   'text-transform'?: string;
   'text-underline-position'?: string;
-  top?: string | SizeVariable;
+  top?: string | SizeVariable | PercentageVariable;
   'touch-action'?: string;
   transform?: string;
   'transform-origin'?: string;
@@ -268,14 +271,14 @@ type PropertyMap = {
   'vertical-align'?: string;
   visibility?: string;
   'white-space'?: string;
-  width?: string | SizeVariable;
+  width?: string | SizeVariable | PercentageVariable;
   'will-change'?: string;
   'word-break'?: string;
   'word-spacing'?: string | SizeVariable;
   'writing-mode'?: string;
   x?: string | SizeVariable;
   y?: string | SizeVariable;
-  'z-index'?: string;
+  'z-index'?: string | NumberVariable;
   '-webkit-line-clamp'?: string;
   '-webkit-text-fill-color'?: string | ColorVariable;
   '-webkit-text-stroke-color'?: string | ColorVariable;
@@ -322,6 +325,7 @@ type StyleProperty =
   | 'border-bottom-style'
   | 'border-bottom-width'
   | 'border-collapse'
+  | 'border-color'
   | 'border-end-end-radius'
   | 'border-end-start-radius'
   | 'border-image-outset'
@@ -338,6 +342,7 @@ type StyleProperty =
   | 'border-left-color'
   | 'border-left-style'
   | 'border-left-width'
+  | 'border-radius'
   | 'border-right-color'
   | 'border-right-style'
   | 'border-right-width'
@@ -348,6 +353,7 @@ type StyleProperty =
   | 'border-top-right-radius'
   | 'border-top-style'
   | 'border-top-width'
+  | 'border-width'
   | 'bottom'
   | 'box-shadow'
   | 'box-sizing'

package/variables.d.ts

@@ -2,13 +2,13 @@ interface ColorVariable {
   readonly id: VariableId;
   readonly type: 'Color';
   /**
-   * Get a list of all variables associated with a collection.
+   * Get the variable's name.
    * @returns A Promise that resolves into a the Variable Name.
    * @example
    * ```ts
    * const collection = await webflow.getDefaultVariableCollection();
-   * const variable = collection.getVariable('id-123')
-   * const variableName = variable.getName()
+   * const variable = await collection.getVariable('id-123')
+   * const variableName = await variable.getName()
    * ```
    */
   getName(): Promise<string>;
@@ -51,7 +51,7 @@ interface ColorVariable {
    * @example
    * ```ts
    * const newVariable1 = await collection.createColorVariable('myvar4', 'red')
-   * newVariable1.remove()
+   * await newVariable1.remove()
    * ```
    */
   remove(): Promise<boolean>;
@@ -61,13 +61,13 @@ interface SizeVariable {
   readonly id: VariableId;
   readonly type: 'Size';
   /**
-   * Get a list of all variables associated with a collection.
+   * Get the variable's name.
    * @returns A Promise that resolves into a the Variable Name.
    * @example
    * ```ts
    * const collection = await webflow.getDefaultVariableCollection();
-   * const variable = collection.getVariable('id-123')
-   * const variableName = variable.getName()
+   * const variable = await collection.getVariable('id-123')
+   * const variableName = await variable.getName()
    * ```
    */
   getName(): Promise<string>;
@@ -110,7 +110,134 @@ interface SizeVariable {
    * @example
    * ```ts
    * const newVariable1 = await collection.createColorVariable('myvar4', 'red')
-   * newVariable1.remove()
+   * await newVariable1.remove()
+   * ```
+   */
+  remove(): Promise<boolean>;
+}
+
+interface NumberVariable {
+  readonly id: VariableId;
+  readonly type: 'Number';
+
+  /**
+   * Get the variable's name.
+   * @returns A Promise that resolves into the Variable Name.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableName = await variable.getName()
+   * ```
+   */
+  getName(): Promise<string>;
+
+  /**
+   * Set the variable's name.
+   * @param newName - The desired name of the variable.
+   * @returns A Promise that resolves once the name is successfully set.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const numberVariable = await collection.getVariableByName("number");
+   * await numberVariable.setName("My Number Variable");
+   * ```
+   */
+  setName(newName: string): Promise<null>;
+
+  /**
+   * 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.
+   * @returns A Promise that resolves once the value is successfully set.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createNumberVariable('myvar1', 100});
+   * await newVariable.set(200);
+   * ```
+   */
+  set(value: NumberValue | NumberVariable): Promise<null>;
+
+  /**
+   * Get the variable’s value.
+   * @returns A Promise that resolves into the variable's number value, or if the variable is an alias - the original Variable.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createNumberVariable('myvar1', 100);
+   * console.log(await newVariable.get());
+   * ```
+   */
+  get(): Promise<NumberValue | NumberVariable>;
+
+  /**
+   * Removes the variable from the default collection.
+   * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createNumberVariable('myvar1', 100);
+   * await newVariable.remove();
+   * ```
+   */
+  remove(): Promise<boolean>;
+}
+
+interface PercentageVariable {
+  readonly id: VariableId;
+  readonly type: 'Percentage';
+  /**
+   * Get the variable's name.
+   * @returns A Promise that resolves into the Variable Name.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableName = await variable.getName()
+   * ```
+   */
+  getName(): Promise<string>;
+
+  /**
+   * Set the variable's name.
+   * @param newName - The desired name of the variable.
+   * @returns A Promise that resolves once the name is successfully set.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const percentageVariable = await collection.getVariableByName("percentage");
+   * await percentageVariable.setName("My Percentage Variable");
+   * ```
+   */
+  setName(newName: string): Promise<null>;
+
+  /**
+   * 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.
+   * @returns A Promise that resolves once the value is successfully set.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createPercentageVariable('myvar1', 100);
+   * await newVariable.set(50);
+   * ```
+   */
+  set(value: PercentageValue | PercentageVariable): Promise<null>;
+
+  /**
+   * Get the variable’s value.
+   * @returns A Promise that resolves into the variable's value, or if the variable is an alias - the original Variable.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createPercentageVariable('myvar1', 100);
+   * console.log(await newVariable.get());
+   * ```
+   */
+  get(): Promise<PercentageValue | PercentageVariable>;
+
+  /**
+   * Removes the variable from the default collection.
+   * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createPercentageVariable('myvar1', 100);
+   * await newVariable.remove();
    * ```
    */
   remove(): Promise<boolean>;
@@ -120,13 +247,13 @@ interface FontFamilyVariable {
   readonly id: VariableId;
   readonly type: 'FontFamily';
   /**
-   * Get a list of all variables associated with a collection.
+   * Get the variable's name.
    * @returns A Promise that resolves into a the Variable Name.
    * @example
    * ```ts
    * const collection = await webflow.getDefaultVariableCollection();
-   * const variable = collection.getVariable('id-123')
-   * const variableName = variable.getName()
+   * const variable = await collection.getVariable('id-123')
+   * const variableName = await variable.getName()
    * ```
    */
   getName(): Promise<string>;
@@ -169,13 +296,18 @@ interface FontFamilyVariable {
    * @example
    * ```ts
    * const newVariable1 = await collection.createColorVariable('myvar4', 'red')
-   * newVariable1.remove()
+   * await newVariable1.remove()
    * ```
    */
   remove(): Promise<boolean>;
 }
 
-type Variable = ColorVariable | SizeVariable | FontFamilyVariable;
+type Variable =
+  | ColorVariable
+  | SizeVariable
+  | FontFamilyVariable
+  | NumberVariable
+  | PercentageVariable;
 
 interface VariableCollection {
   readonly id: VariableCollectionId;
@@ -191,6 +323,14 @@ interface VariableCollection {
     name: string,
     value: SizeValue | SizeVariable
   ): Promise<SizeVariable>;
+  createNumberVariable(
+    name: string,
+    value: number | NumberVariable
+  ): Promise<NumberVariable>;
+  createPercentageVariable(
+    name: string,
+    value: number | PercentageVariable
+  ): Promise<PercentageVariable>;
   createFontFamilyVariable(
     name: string,
     value: string | FontFamilyVariable
@@ -202,6 +342,8 @@ type VariableId = string;
 type ColorValue = string;
 type SizeValue = {value: number; unit: SizeUnit};
 type FontFamilyValue = string;
+type NumberValue = number;
+type PercentageValue = number;
 
 type SizeUnit =
   | 'px'