@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

package/dist/collection/components/six-details/six-details.js

@@ -1,432 +1,432 @@
-import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';
-import { focusVisible } from '../../utils/focus-visible';
-let id = 0;
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - The details' content.
- * @slot summary - The details' summary. Alternatively, you can use the summary prop.
- *
- * @part base - The component's base wrapper.
- * @part header - The summary header.
- * @part summary - The details summary.
- * @part summary-icon - The expand/collapse summary icon.
- * @part content - The details content.
- */
-export class SixDetails {
-  constructor() {
-    this.animateSummaryIcon = true;
-    this.componentId = `details-${++id}`;
-    this.isVisible = false;
-    /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
-    this.open = false;
-    /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
-    this.summary = '';
-    /** The icon's size. */
-    this.summaryIconSize = 'inherit';
-    /** Set to true to prevent the user from toggling the details. */
-    this.disabled = false;
-    /** Set to true when you want to use six-details inline e.g. in a sidebar */
-    this.inline = false;
-    /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */
-    this.selectableEmpty = false;
-    this.hasContent = true;
-  }
-  handleOpenChange() {
-    if (this.body) {
-      this.open ? this.show() : this.hide();
-    }
-  }
-  connectedCallback() {
-    this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);
-    this.handleSummaryClick = this.handleSummaryClick.bind(this);
-    this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);
-  }
-  componentDidLoad() {
-    focusVisible.observe(this.details);
-    this.body.hidden = !this.open;
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
-  }
-  disconnectedCallback() {
-    focusVisible.unobserve(this.details);
-  }
-  /** Shows the detail body */
-  async show() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
-      return;
-    }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
-    }
-    this.body.hidden = false;
-    if (this.body.scrollHeight === 0) {
-      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
-      // intiially, but not immediately visible (i.e. in a tab panel).
-      this.body.style.height = 'auto';
-      this.body.style.overflow = 'visible';
-    }
-    else {
-      this.body.style.height = `${this.body.scrollHeight}px`;
-      this.body.style.overflow = 'hidden';
-    }
-    this.isVisible = true;
-    this.open = true;
-  }
-  /** Hides the detail body */
-  async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
-      return;
-    }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
-    }
-    // We can't transition out of `height: auto`, so let's set it to the current height first
-    this.body.style.height = `${this.body.scrollHeight}px`;
-    this.body.style.overflow = 'hidden';
-    requestAnimationFrame(() => {
-      // tslint:disable-next-line: no-unused-expression
-      this.body.clientWidth; // force a reflow
-      this.body.style.height = '0';
-    });
-    this.isVisible = false;
-    this.open = false;
-  }
-  handleBodyTransitionEnd(event) {
-    const target = event.target;
-    // Ensure we only emit one event when the target element is no longer visible
-    if (event.propertyName === 'height' && target.classList.contains('details__body')) {
-      this.body.style.overflow = this.open ? 'visible' : 'hidden';
-      this.body.style.height = this.open ? 'auto' : '0';
-      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-      this.body.hidden = !this.open;
-    }
-  }
-  handleSummaryClick() {
-    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
-      this.open ? this.hide() : this.show();
-      this.header.focus();
-    }
-  }
-  handleSummaryKeyDown(event) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      this.open ? this.hide() : this.show();
-    }
-    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.hide();
-    }
-    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.show();
-    }
-  }
-  render() {
-    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
-    return (h("div", { ref: (el) => (this.details = el), part: "base", class: {
-        details: true,
-        'details--open': this.open,
-        'details--disabled': this.disabled,
-        inline: this.inline,
-      } },
-      h("header", { ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown },
-        h("div", { part: "summary", class: "details__summary" },
-          h("slot", { name: "summary" }, this.summary)),
-        h("span", { part: "summary-icon", class: {
-            'details__summary-icon': true,
-            'details__summary-icon--animate': this.animateSummaryIcon,
-          } },
-          h("slot", { name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { size: this.summaryIconSize }, summaryIcon)))),
-      h("div", { ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd },
-        h("div", { part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` },
-          h("slot", null)))));
-  }
-  static get is() { return "six-details"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-details.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-details.css"]
-  }; }
-  static get properties() { return {
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates whether or not the details is open. You can use this in lieu of the show/hide methods."
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "summary": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The summary to show in the details header. If you need to display HTML, use the `summary` slot instead."
-      },
-      "attribute": "summary",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "summaryIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead."
-      },
-      "attribute": "summary-icon",
-      "reflect": false
-    },
-    "summaryIconSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
-        "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The icon's size."
-      },
-      "attribute": "summary-icon-size",
-      "reflect": true,
-      "defaultValue": "'inherit'"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to prevent the user from toggling the details."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "inline": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true when you want to use six-details inline e.g. in a sidebar"
-      },
-      "attribute": "inline",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "selectableEmpty": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children"
-      },
-      "attribute": "selectable-empty",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hasContent": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "has-content",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get states() { return {
-    "animateSummaryIcon": {}
-  }; }
-  static get events() { return [{
-      "method": "sixShow",
-      "name": "six-details-show",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixAfterShow",
-      "name": "six-details-after-show",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted after the details opens and all transitions are complete."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixHide",
-      "name": "six-details-hide",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixAfterHide",
-      "name": "six-details-after-hide",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted after the details closes and all transitions are complete."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Shows the detail body",
-        "tags": []
-      }
-    },
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Hides the detail body",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "handleOpenChange"
-    }]; }
-}
+import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';
+import { focusVisible } from '../../utils/focus-visible';
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The details' content.
+ * @slot summary - The details' summary. Alternatively, you can use the summary prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part header - The summary header.
+ * @part summary - The details summary.
+ * @part summary-icon - The expand/collapse summary icon.
+ * @part content - The details content.
+ */
+export class SixDetails {
+  constructor() {
+    this.animateSummaryIcon = true;
+    this.componentId = `details-${++id}`;
+    this.isVisible = false;
+    /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
+    this.summary = '';
+    /** The icon's size. */
+    this.summaryIconSize = 'inherit';
+    /** Set to true to prevent the user from toggling the details. */
+    this.disabled = false;
+    /** Set to true when you want to use six-details inline e.g. in a sidebar */
+    this.inline = false;
+    /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */
+    this.selectableEmpty = false;
+    this.hasContent = true;
+  }
+  handleOpenChange() {
+    if (this.body) {
+      this.open ? this.show() : this.hide();
+    }
+  }
+  connectedCallback() {
+    this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);
+    this.handleSummaryClick = this.handleSummaryClick.bind(this);
+    this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);
+  }
+  componentDidLoad() {
+    focusVisible.observe(this.details);
+    this.body.hidden = !this.open;
+    // Show on init if open
+    if (this.open) {
+      this.show();
+    }
+  }
+  disconnectedCallback() {
+    focusVisible.unobserve(this.details);
+  }
+  /** Shows the detail body */
+  async show() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (this.isVisible) {
+      return;
+    }
+    const sixShow = this.sixShow.emit();
+    if (sixShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.body.hidden = false;
+    if (this.body.scrollHeight === 0) {
+      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
+      // intiially, but not immediately visible (i.e. in a tab panel).
+      this.body.style.height = 'auto';
+      this.body.style.overflow = 'visible';
+    }
+    else {
+      this.body.style.height = `${this.body.scrollHeight}px`;
+      this.body.style.overflow = 'hidden';
+    }
+    this.isVisible = true;
+    this.open = true;
+  }
+  /** Hides the detail body */
+  async hide() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (!this.isVisible) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    // We can't transition out of `height: auto`, so let's set it to the current height first
+    this.body.style.height = `${this.body.scrollHeight}px`;
+    this.body.style.overflow = 'hidden';
+    requestAnimationFrame(() => {
+      // tslint:disable-next-line: no-unused-expression
+      this.body.clientWidth; // force a reflow
+      this.body.style.height = '0';
+    });
+    this.isVisible = false;
+    this.open = false;
+  }
+  handleBodyTransitionEnd(event) {
+    const target = event.target;
+    // Ensure we only emit one event when the target element is no longer visible
+    if (event.propertyName === 'height' && target.classList.contains('details__body')) {
+      this.body.style.overflow = this.open ? 'visible' : 'hidden';
+      this.body.style.height = this.open ? 'auto' : '0';
+      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+      this.body.hidden = !this.open;
+    }
+  }
+  handleSummaryClick() {
+    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
+      this.open ? this.hide() : this.show();
+      this.header.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.open ? this.hide() : this.show();
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  render() {
+    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
+    return (h("div", { ref: (el) => (this.details = el), part: "base", class: {
+        details: true,
+        'details--open': this.open,
+        'details--disabled': this.disabled,
+        inline: this.inline,
+      } },
+      h("header", { ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown },
+        h("div", { part: "summary", class: "details__summary" },
+          h("slot", { name: "summary" }, this.summary)),
+        h("span", { part: "summary-icon", class: {
+            'details__summary-icon': true,
+            'details__summary-icon--animate': this.animateSummaryIcon,
+          } },
+          h("slot", { name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { size: this.summaryIconSize }, summaryIcon)))),
+      h("div", { ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd },
+        h("div", { part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` },
+          h("slot", null)))));
+  }
+  static get is() { return "six-details"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-details.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-details.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether or not the details is open. You can use this in lieu of the show/hide methods."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "summary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The summary to show in the details header. If you need to display HTML, use the `summary` slot instead."
+      },
+      "attribute": "summary",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "summaryIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead."
+      },
+      "attribute": "summary-icon",
+      "reflect": false
+    },
+    "summaryIconSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
+        "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The icon's size."
+      },
+      "attribute": "summary-icon-size",
+      "reflect": true,
+      "defaultValue": "'inherit'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to prevent the user from toggling the details."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "inline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true when you want to use six-details inline e.g. in a sidebar"
+      },
+      "attribute": "inline",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "selectableEmpty": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children"
+      },
+      "attribute": "selectable-empty",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hasContent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "has-content",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "animateSummaryIcon": {}
+  }; }
+  static get events() { return [{
+      "method": "sixShow",
+      "name": "six-details-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixAfterShow",
+      "name": "six-details-after-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the details opens and all transitions are complete."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixHide",
+      "name": "six-details-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixAfterHide",
+      "name": "six-details-after-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the details closes and all transitions are complete."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Shows the detail body",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hides the detail body",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "handleOpenChange"
+    }]; }
+}