@webflow/designer-extension-typings 2.0.15 → 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.15",
+  "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;
+};