@duetds/components 8.0.6 → 8.1.1

package/lib/collection/components/duet-collapsible/duet-collapsible.js

@@ -6,7 +6,7 @@ import * as tokens from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { hasSlot, inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { isKeyboardClick } from "../../utils/keyboard-utils";
+import { isKeyboardClick, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { sanitizeString } from "../../utils/string-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
@@ -15,373 +15,380 @@ import { sanitizeString } from "../../utils/string-utils";
  * @slot after-heading - Content after the heading can be for example badges.
  */
 export class DuetCollapsible {
-  constructor() {
-    this.id = createID("DuetCollapsible");
-    this.handleKeyDown = (e) => {
-      if (isKeyboardClick(e)) {
-        this.handleClick(e);
-      }
-    };
-    this.getFontSizeFromTokens = (fontSize = this.headingSize) => {
-      if (!fontSize) {
-        return tokens["font_size_medium"];
-      }
-      else {
-        const searchRegExp = /-/g;
-        const fontSizeReplaced = fontSize.replace(searchRegExp, "_");
-        return tokens[`font_size_${fontSizeReplaced}`];
-      }
-    };
-    this.getEquivalentIconSize = (fontSize = this.headingSize) => {
-      switch (fontSize) {
-        case "x-small":
-          return "xx-small";
-        case "small":
-          return "xx-small";
-        case "medium":
-          return "xx-small";
-        case "large":
-          return "x-small";
-        case "x-large":
-          return "small";
-        case "xx-large":
-          return "medium";
-        case "xxx-large":
-          return "x-large";
-        case "xxxx-large":
-          return "xxx-large";
-        default:
-          // default size
-          return "xx-small";
-      }
-    };
-    this.handleClick = (e) => {
-      e.preventDefault();
-      this.open = !this.open;
-      this.duetToggle.emit({
-        component: "duet-collapsible",
-        originalEvent: e,
-      });
-    };
-    this.theme = "";
-    this.accessibleLabel = undefined;
-    this.heading = "";
-    this.headingFullWidth = false;
-    this.centerHeading = false;
-    this.headingWeight = "semibold";
-    this.headingSize = undefined;
-    this.headingLevel = undefined;
-    this.margin = "auto";
-    this.open = false;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.hasAfterHeading = hasSlot(this.element, "after-heading");
-  }
-  /**
-   * Sets focus on the specified `duet-collapsible`. Use this method instead of the global
-   * `collapsible.focus()`.
-   */
-  async setFocus(options) {
-    if (this.nativeButton) {
-      this.element.classList.add("user-is-tabbing");
-      this.nativeButton.focus(options);
-    }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(HeadingTagName, null, h("button", { class: {
-        "duet-collapsible-heading": true,
-        "duet-collapsible-heading-centered": this.centerHeading,
-        "duet-theme-turva": this.theme === "turva",
-        "duet-collapsible-normal-weight": this.headingWeight === "normal",
-        "has-after-heading": this.hasAfterHeading,
-        "full-width": this.headingFullWidth,
-      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { part: "duet-collapsible-after-heading" }, h("slot", { name: "after-heading" }))))), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", null))));
-  }
-  static get is() { return "duet-collapsible"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-collapsible.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-collapsible.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the collapsible."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "accessibleLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds accessible label for the collapsible that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
-        },
-        "attribute": "accessible-label",
-        "reflect": false
-      },
-      "heading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The content for the collapsible heading."
-        },
-        "attribute": "heading",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "headingFullWidth": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes collapsible heading full width"
-        },
-        "attribute": "heading-full-width",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "centerHeading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Centers heading inside its container"
-        },
-        "attribute": "center-heading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "headingWeight": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetCollapsibleWeight",
-          "resolved": "\"normal\" | \"semibold\"",
-          "references": {
-            "DuetCollapsibleWeight": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
-              "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleWeight"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The font weight of the heading"
-        },
-        "attribute": "heading-weight",
-        "reflect": false,
-        "defaultValue": "\"semibold\""
-      },
-      "headingSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetCollapsibleHeadingFontSize",
-          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xxx-large\" | \"xxxx-large\"",
-          "references": {
-            "DuetCollapsibleHeadingFontSize": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
-              "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleHeadingFontSize"
+    constructor() {
+        this.id = createID("DuetCollapsible");
+        this.handleKeyDown = (e) => {
+            if (isKeyboardClick(e)) {
+                this.handleClick(e);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Custom headingSize to be used for font size of heading, as a design token entered\nin kebab-case x-small -> font-size-x-small.\nExample:\n# 12px (0.75rem)  ------  +2px   (x-small)\n# 14px (0.875rem) ------  +2px   (small)\n# 16px (1rem)     ------  +2px   (medium)\n# 20px (1.25rem)  ------  +4px   (large)\n# 24px (1.5rem)   ------  +4px   (x-large)\n# 36px (2.25rem)  ------  +12px  (xx-large)\n# 48px (3rem)     ------  +12px  (xxx-large)\n# 72px (4.5rem)   ------  +24px  (xxxx-large)"
-        },
-        "attribute": "heading-size",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "headingLevel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetHeadingLevel | undefined",
-          "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
-          "references": {
-            "DuetHeadingLevel": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetHeadingLevel"
+        };
+        this.getFontSizeFromTokens = (fontSize = this.headingSize) => {
+            if (!fontSize) {
+                return tokens["font_size_medium"];
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The actual heading level used for the heading in html markup. This setting\nexists for accessibility reasons. It doesn\u2019t change the style visually.\nonly variations of h1-h6 area accepted"
-        },
-        "attribute": "heading-level",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "margin": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetMargin",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetMargin": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetMargin"
+            else {
+                const searchRegExp = /-/g;
+                const fontSizeReplaced = fontSize.replace(searchRegExp, "_");
+                return tokens[`font_size_${fontSizeReplaced}`];
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the margin of the component."
-        },
-        "attribute": "margin",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Is the component expanded or collapsed."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetToggle",
-        "name": "duetToggle",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when opened/closed"
-        },
-        "complexType": {
-          "original": "DuetCollapsibleToggleEvent",
-          "resolved": "{ component: \"duet-collapsible\"; originalEvent: KeyboardEvent | MouseEvent; }",
-          "references": {
-            "DuetCollapsibleToggleEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
-              "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleToggleEvent"
+        };
+        this.getEquivalentIconSize = (fontSize = this.headingSize) => {
+            switch (fontSize) {
+                case "x-small":
+                    return "xx-small";
+                case "small":
+                    return "xx-small";
+                case "medium":
+                    return "xx-small";
+                case "large":
+                    return "x-small";
+                case "x-large":
+                    return "small";
+                case "xx-large":
+                    return "medium";
+                case "xxx-large":
+                    return "x-large";
+                case "xxxx-large":
+                    return "xxx-large";
+                default:
+                    // default size
+                    return "xx-small";
             }
-          }
+        };
+        this.handleClick = (e) => {
+            e.preventDefault();
+            this.open = !this.open;
+            this.duetToggle.emit({
+                component: "duet-collapsible",
+                originalEvent: e,
+            });
+        };
+        this.theme = "";
+        this.accessibleLabel = undefined;
+        this.heading = "";
+        this.headingFullWidth = false;
+        this.centerHeading = false;
+        this.headingWeight = "semibold";
+        this.headingSize = undefined;
+        this.headingLevel = undefined;
+        this.margin = "auto";
+        this.open = false;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.hasAfterHeading = hasSlot(this.element, "after-heading");
+    }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
+    /**
+     * Sets focus on the specified `duet-collapsible`. Use this method instead of the global
+     * `collapsible.focus()`.
+     */
+    async setFocus(options) {
+        if (this.nativeButton) {
+            this.element.classList.add("user-is-tabbing");
+            this.nativeButton.focus(options);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
+        return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(HeadingTagName, null, h("button", { class: {
+                "duet-collapsible-heading": true,
+                "duet-collapsible-heading-centered": this.centerHeading,
+                "duet-theme-turva": this.theme === "turva",
+                "duet-collapsible-normal-weight": this.headingWeight === "normal",
+                "has-after-heading": this.hasAfterHeading,
+                "full-width": this.headingFullWidth,
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { part: "duet-collapsible-after-heading" }, h("slot", { name: "after-heading" }))))), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", null))));
+    }
+    static get is() { return "duet-collapsible"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-collapsible.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-collapsible.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the collapsible."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the collapsible that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
+                },
+                "attribute": "accessible-label",
+                "reflect": false
             },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The content for the collapsible heading."
+                },
+                "attribute": "heading",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "headingFullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes collapsible heading full width"
+                },
+                "attribute": "heading-full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "centerHeading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Centers heading inside its container"
+                },
+                "attribute": "center-heading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "headingWeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetCollapsibleWeight",
+                    "resolved": "\"normal\" | \"semibold\"",
+                    "references": {
+                        "DuetCollapsibleWeight": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+                            "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The font weight of the heading"
+                },
+                "attribute": "heading-weight",
+                "reflect": false,
+                "defaultValue": "\"semibold\""
+            },
+            "headingSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetCollapsibleHeadingFontSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xxx-large\" | \"xxxx-large\"",
+                    "references": {
+                        "DuetCollapsibleHeadingFontSize": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+                            "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleHeadingFontSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom headingSize to be used for font size of heading, as a design token entered\nin kebab-case x-small -> font-size-x-small.\nExample:\n# 12px (0.75rem)  ------  +2px   (x-small)\n# 14px (0.875rem) ------  +2px   (small)\n# 16px (1rem)     ------  +2px   (medium)\n# 20px (1.25rem)  ------  +4px   (large)\n# 24px (1.5rem)   ------  +4px   (x-large)\n# 36px (2.25rem)  ------  +12px  (xx-large)\n# 48px (3rem)     ------  +12px  (xxx-large)\n# 72px (4.5rem)   ------  +24px  (xxxx-large)"
+                },
+                "attribute": "heading-size",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetHeadingLevel | undefined",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "DuetHeadingLevel": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The actual heading level used for the heading in html markup. This setting\nexists for accessibility reasons. It doesn\u2019t change the style visually.\nonly variations of h1-h6 area accepted"
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is the component expanded or collapsed."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the specified `duet-collapsible`. Use this method instead of the global\n`collapsible.focus()`.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetToggle",
+                "name": "duetToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when opened/closed"
+                },
+                "complexType": {
+                    "original": "DuetCollapsibleToggleEvent",
+                    "resolved": "{ component: \"duet-collapsible\"; originalEvent: KeyboardEvent | MouseEvent; }",
+                    "references": {
+                        "DuetCollapsibleToggleEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+                            "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleToggleEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the specified `duet-collapsible`. Use this method instead of the global\n`collapsible.focus()`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
 }