@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/collection/components/details/details.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,27 +26,25 @@
 [hidden] {
   display: none !important;
 }
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }/** Typography */
 :host {
   /**
-    * @prop --padding: Default to 1em;
-
-    * @prop --btn-padding: Defaults to var(--padding);
-    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);
-    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);
-    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #f9f9fb);
-
-    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);
-    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));
-    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));
-
-    * @prop --transition-duration: Time it takes to slide down and show content. Defaults to .2s;
-
-    * @prop --border-width: Defaults to none;
-    * @prop --border-color: Defaults to none;
-    * @prop --border-style: Defaults to none;
-    * @prop --border-radius: Defaults to none;
-    * @prop --box-shadow: Defaults to none;
-    * @prop --focus-style: Defaults to var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))
+  * @prop --padding - padding around trigger and content. Defaults to var(--nano-spacing-md)
+  * @prop --btn-padding - padding around trigger. Defaults to var(--padding)
+  * @prop --btn-bg-color - background color of trigger. Defaults to transparent
+  * @prop --btn-bg-color--hover - background color of trigger on hover. Defaults to var(--nano-color-primary-100)
+  * @prop --btn-bg-color--active - background color of trigger on active. Defaults to var(--nano-color-primary-300)
+  * @prop --content-padding - padding around the content. Defaults to var(--padding
   */
   font-family: inherit;
   font-size: inherit;
@@ -56,71 +58,47 @@
   text-align: inherit;
   white-space: inherit;
   color: inherit;
-  --padding: 1em;
+  --padding: var(--nano-spacing-md);
   --btn-padding: var(--padding);
+  --btn-bg-color: transparent;
+  --btn-bg-color--hover: var(--nano-color-primary-100);
+  --btn-bg-color--active: var(--nano-color-primary-300);
   --content-padding: var(--padding);
-  --btn-bg-color: var(--nano-color-contrast, #dad6d3);
-  --btn-bg-color--open: var(--nano-color-base, #dad6d3);
-  --btn-bg-color--hover: var(--nano-color-tint, #f9f9fb);
-  --btn-text-color: var(--nano-color-base, #455556);
-  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));
-  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));
-  --transition-duration: 0.2s;
-  --border-width: none;
-  --border-color: none;
-  --border-style: none;
-  --border-radius: none;
-  --box-shadow: none;
-  --focus-style: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
   display: block;
-  border-style: var(--border-style);
-  border-width: var(--border-width-dims);
-  border-color: var(--border-color);
-  border-radius: var(--border-radius-dims);
-  box-shadow: var(--box-shadow);
+  border: 1px solid var(--nano-color-neutral-300);
+  color: var(--nano-color-neutral-1400);
 }
 
-:host([disabled]) {
-  opacity: 0.5;
+:host([size=small]) {
+  --padding: var(--nano-spacing-sm) 0.9375rem;
 }
 
-:host(:last-of-type) {
-  --border-width-dims: 0 var(--border-width) var(--border-width);
-  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);
+:host([size=large]) {
+  --padding: var(--nano-spacing-l);
 }
-:host(:last-of-type) .open .content {
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
+:host([size=large]) .header {
+  font-weight: var(--nano-font-weight-normal);
+  font-size: var(--nano-font-size-l);
+  line-height: var(--nano-line-height-dense);
 }
 
-:host(:first-of-type) {
-  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;
-  --border-width-dims: var(--border-width);
-}
-
-:host(:first-of-type:last-of-type) {
-  --border-radius-dims: var(--border-radius);
-  --border-width-dims: var(--border-width);
-}
-
-:host(:not(:last-of-type):not(:first-of-type)) {
-  --border-width-dims: 0 var(--border-width) var(--border-width);
+:host([disabled]) {
+  opacity: 0.5;
 }
 
 .header {
-  block-size: auto;
+  all: unset;
+  cursor: pointer;
   padding: var(--btn-padding);
-  text-align: inherit;
   position: relative;
-  font-size: 1em;
-  line-height: 1;
-  margin: 0;
-  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   background: var(--btn-bg-color);
-  color: var(--btn-text-color);
-  border-radius: var(--border-radius-dims);
-  cursor: pointer;
+  color: inherit;
+  font-weight: var(--nano-font-weight-normal);
+  font-size: var(--nano-font-size-medium);
+  line-height: var(--nano-line-height-dense);
 }
 .header::-webkit-details-marker {
   display: none;
@@ -128,21 +106,15 @@
 .header:focus {
   outline: none;
 }
-.header:focus-visible {
-  box-shadow: var(--focus-style);
-  outline: none;
-  position: relative;
-  z-index: 1;
+.header:not([aria-disabled=true]):focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
 }
-.header:hover {
+.header:not([aria-disabled=true]):hover {
   background: var(--btn-bg-color--hover);
-  color: var(--btn-text-color--hover);
 }
-.open .header {
-  background: var(--btn-bg-color--open);
-  color: var(--btn-text-color--open);
-  border-end-end-radius: 0;
-  border-end-start-radius: 0;
+.header:not([aria-disabled=true]):active {
+  background: var(--btn-bg-color--active);
 }
 .disabled .header {
   cursor: not-allowed;
@@ -159,9 +131,15 @@
   flex-direction: column;
   justify-content: center;
   display: inline-block;
-  color: currentcolor;
-  transition: 0.3s ease transform;
+  color: var(--nano-color-primary-1200);
+}
+.header .icon .default-icon {
+  rotate: 0deg;
   transform-origin: center;
+  transition: var(--nano-transition-x-fast) ease rotate;
+}
+:host([open]) .header .icon .default-icon {
+  rotate: 180deg;
 }
 .header .icon--start {
   margin-inline: 0 var(--btn-padding);
@@ -171,31 +149,27 @@
   margin-inline: var(--btn-padding) 0;
   margin-block: 0;
 }
-.header .icon ::slotted(.nano-icon) {
-  --color: currentcolor;
+.header .icon ::slotted(.nano-icon), .header .icon::slotted(.nano-icon) {
+  color: currentcolor;
+  transition: var(--nano-transition-x-fast) ease rotate;
+  transform-origin: center;
 }
 
 .body {
-  overflow: hidden;
-  transition: height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;
-  outline: none;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: all var(--nano-transition-fast) ease-out;
+  opacity: 0;
 }
-.is-hidden .body > * {
-  animation: fade 0.1s ease reverse;
+:host([open]) .body {
+  grid-template-rows: 1fr;
+  opacity: 1;
 }
-.open .body > * {
-  animation: fade var(--transition-duration, 0.3s) ease forwards;
+
+.content-wrapper {
+  overflow: hidden;
 }
 
 .content {
   padding: var(--content-padding);
-}
-
-@keyframes fade {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
 }

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

@@ -1,65 +1,73 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Build, Host, } from "@stencil/core";
-import { displayTransition } from "../../utils/transitions";
 import { h } from "../../utils/renderer";
+import { HasSlotController } from "../../utils/slot";
 /**
- * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.
- */
-/**
+ * Details show a brief summary and on interaction expand to show additional content.
+ *
+ * @version 1.0
+ * @status stable
+ *
  * @slot - content that will be hidden / revealed
- * @slot icon-start - used for icons at the start of the handle
+ * @slot icon-start - used for icons at the start of the handle. Rotates on open by default; use ::part selector to override.
  * @slot label - can be used when you wish to insert complex label markup
- * @slot icon-end - used for icons at the end of the handle
+ * @slot icon-end - used for icons at the end of the handle.
+ * Alternatively use `icon-expand` / `icon-collapse` slots. Rotates on open by default; use ::part selector to override.
+ * @slot icon-expand - used for icons at the end of the handle when closed. Rotates on open by default; use ::part selector to override.
+ * @slot icon-collapse - used for icons at the end of the handle when open. Rotates on open by default; use ::part selector to override.
  *
  * @part base - the root `details` element
  * @part header - the main `summary` ui control
  * @part label - the text wrapper of the ui control
+ * @part icon - the wrapper around both start and end icons
  * @part icon--start - the icon wrapper at the start of the ui control
  * @part icon--end - the icon wrapper at the end of the ui control
  * @part body - the wrapper around content
  * @part content - the main content wrapper
  */
-export class Details {
-    hasStartSlot;
-    hasEndSlot;
+export class NanoDetails {
     mo;
     stateChanging = false;
-    bodyEl;
+    slotCtrl = new HasSlotController(this, 'icon-start', 'icon-end');
     detailsEl;
     headerEl;
-    contentEl;
-    cacheHeight;
-    host;
+    _bodyEl;
+    get bodyEl() {
+        return this._bodyEl;
+    }
+    set bodyEl(el) {
+        if (this.bodyEl && this.bodyEl === this._bodyEl)
+            return;
+        if (this.bodyEl) {
+            this.bodyEl.removeEventListener('transitionend', this.handleTransitionEnd);
+        }
+        el.addEventListener('transitionend', this.handleTransitionEnd);
+        this._bodyEl = el;
+    }
     /** Summary / handle text. Use the `label` slot for HTML markup */
     label = '';
     /** Should item be open on load */
     open = false;
     /** Disables the details so it can't be toggled. */
     disabled = false;
-    /** Hide the handle. (You will need to control the hiding / showing of content with script) */
-    noHandle = false;
-    /** Icon slot rotation amount (degrees) on open */
-    iconRotation = 90;
-    /**
-     * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.
-     * Set `useCacheHeight` to `true` try to keep animations smooth. */
-    useCacheHeight = false;
+    /** The size of the details. Primarily controls the trigger element and overall padding. */
+    size = 'medium';
     /**
      * Emitted when the component opens.
-     * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
+     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
      */
-    nanoOpened;
+    nanoOpen;
     /**
      * Emitted when the component closes.
-     * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
+     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
      */
-    nanoClosed;
+    nanoClose;
     /** Emitted after the details opens and all transitions are complete. */
-    nanoAfterOpened;
+    nanoAfterOpen;
     /** Emitted after the details closes and all transitions are complete. */
-    nanoAfterClosed;
+    nanoAfterClose;
     toggleClick() {
         this.stateChanging = true;
         if (this.open)
@@ -77,10 +85,12 @@ export class Details {
                 this.open = !this.open;
                 break;
             case 'ArrowUp':
+            case 'ArrowLeft':
                 e.preventDefault();
                 this.open = false;
                 break;
             case 'ArrowDown':
+            case 'ArrowRight':
                 e.preventDefault();
                 this.open = true;
                 break;
@@ -93,51 +103,36 @@ export class Details {
             return;
         this.open = !this.open;
     };
+    handleTransitionEnd = (e) => {
+        if (e.propertyName !== 'opacity' ||
+            !e.composedPath().find((node) => node === this.bodyEl))
+            return;
+        if (this.open) {
+            this.nanoAfterOpen.emit();
+            requestAnimationFrame(() => (this.stateChanging = false));
+        }
+        else {
+            this.detailsEl.open = false;
+            this.nanoAfterClose.emit();
+            requestAnimationFrame(() => (this.stateChanging = false));
+        }
+    };
     hide() {
-        const nanoClose = this.nanoClosed.emit(this.open);
+        const nanoClose = this.nanoClose.emit(this.open);
         if (nanoClose.defaultPrevented) {
             this.open = true;
             this.detailsEl.open = true;
             return;
         }
-        this.cacheHeight = this.contentEl.scrollHeight;
-        this.bodyEl.style.height = this.cacheHeight + 'px';
-        displayTransition(this.bodyEl, {
-            className: 'is-shown',
-            show: false,
-            transitionProp: ['height'],
-        }).then(() => {
-            this.stateChanging = false;
-            this.detailsEl.open = false;
-            this.bodyEl.classList.add('is-hidden');
-            this.nanoAfterClosed.emit();
-        });
-        // requestAnimationFrame doesn't trigger transitionend event for firefox :/
-        setTimeout(() => {
-            this.bodyEl.style.height = '0px';
-        });
     }
     show() {
-        const nanoOpen = this.nanoOpened.emit();
+        const nanoOpen = this.nanoOpen.emit();
         this.detailsEl.open = true;
         if (nanoOpen.defaultPrevented) {
             this.open = false;
             this.detailsEl.open = false;
             return;
         }
-        displayTransition(this.bodyEl, {
-            className: 'is-shown',
-            show: true,
-            transitionProp: ['height'],
-        }).then(() => {
-            this.stateChanging = false;
-            this.bodyEl.style.height = 'auto';
-            this.nanoAfterOpened.emit();
-        });
-        this.bodyEl.style.height =
-            (this.useCacheHeight && this.cacheHeight
-                ? this.cacheHeight
-                : this.contentEl.scrollHeight) + 'px';
     }
     attachMo() {
         if (this.mo || !this.detailsEl || !Build.isBrowser)
@@ -153,12 +148,7 @@ export class Details {
         });
         this.mo.observe(this.detailsEl, { attributes: true });
     }
-    componentWillLoad() {
-        this.hasStartSlot = !!this.host.querySelector('[slot="icon-start"]');
-        this.hasEndSlot = !!this.host.querySelector('[slot="icon-end"]');
-    }
     componentDidLoad() {
-        this.bodyEl.style.height = this.open ? 'auto' : '0';
         if (this.open)
             this.detailsEl.setAttribute('open', 'true');
         this.attachMo();
@@ -171,17 +161,18 @@ export class Details {
             this.mo.disconnect();
             this.mo = undefined;
         }
+        if (this.bodyEl) {
+            this.bodyEl.removeEventListener('transitionend', this.handleTransitionEnd);
+        }
     }
     render() {
-        return (h(Host, { key: 'ee6fb3abfaf15e07a18d399514e8447d63512ce4', class: "nano-details" }, h("details", { key: '9478907ce6d6e8363c66df27e45e05a22705d38c', part: "base", ref: (d) => (this.detailsEl = d), class: {
+        return (h(Host, { key: 'dfe08b9736512e4f2e7e77b6e08f391e570f7d35', class: "nano-details" }, h("details", { key: 'aee47095a745ec92d97e3eb2a09f1765fbad251d', part: "base", ref: (d) => (this.detailsEl = d), class: {
                 details: true,
-                open: this.open,
                 disabled: this.disabled,
-            } }, h("summary", { key: '717ed7a624692dfce885436025e45cd011d9af5a', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', style: { display: this.noHandle ? 'none' : '' }, id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.hasStartSlot ? (h("span", { part: "icon--start", class: "icon icon--start", style: {
-                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-            } }, h("slot", { name: "icon-start" }))) : (''), h("div", { key: '9ec2fcc2cf8aa386603cf7de1c4f30318df1e4ad', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), this.hasEndSlot ? (h("span", { part: "icon--end", class: "icon icon--end", style: {
-                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-            } }, h("slot", { name: "icon-end" }))) : ('')), h("div", { key: '89311fc1194ca178843b5b751c48740b26689eaa', part: "body", class: "body", ref: (div) => (this.bodyEl = div), tabindex: "-1", role: "region", "aria-labelledby": "header" }, h("div", { key: 'b16633bd50819421d9bd6ab4b7e4cd4b2bdfcd61', part: "content", ref: (div) => (this.contentEl = div), class: "content", id: "content" }, h("slot", { key: '4735f3166e91d58152564a4f1b423e77900fd84f' }))))));
+            } }, h("summary", { key: 'b15a83c3386171f212a68cf456eb9ba6296917c2', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: 'c29db27dc0c74a8053c035421b0738eee1d72945', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: '99381aa8452aac30498cfb27148c9e507e07989e', name: "icon-start" }))), h("div", { key: '59068fae315b9cd0427987eb59e03f2cd219e45a', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '8eb4304e5c0da199ef6ad7a9730f92130072afd8', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: 'a8c2b9213b96787007a85faf64d42436729bc6e4', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
+            !this.slotCtrl.has('icon-end') &&
+            !this.slotCtrl.has('icon-expand') &&
+            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: 'bfb3677f307b23b4947c80d7173b63ce51b83c70', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'dad8f7fbf316facfc2a505edf0041fb259d78d5b', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: '988b4a6201029002ab76004375955eaa87542ed9', class: "content-wrapper" }, h("div", { key: '159483b132abfc6d7edf87771af0f3c2c0e077bd', part: "content", class: "content", id: "content" }, h("slot", { key: '8bb9bbca225bca84bc1efd2c617372f490985bc1' })))))));
     }
     static get is() { return "nano-details"; }
     static get encapsulation() { return "shadow"; }
@@ -199,6 +190,7 @@ export class Details {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -213,12 +205,12 @@ export class Details {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -233,12 +225,12 @@ export class Details {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -253,82 +245,41 @@ export class Details {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "noHandle": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Hide the handle. (You will need to control the hiding / showing of content with script)"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "no-handle",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "iconRotation": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Icon slot rotation amount (degrees) on open"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "icon-rotation",
-                "reflect": false,
-                "defaultValue": "90"
-            },
-            "useCacheHeight": {
-                "type": "boolean",
+            "size": {
+                "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\nSet `useCacheHeight` to `true` try to keep animations smooth."
+                    "text": "The size of the details. Primarily controls the trigger element and overall padding."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "use-cache-height",
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": true,
+                "defaultValue": "'medium'"
             }
         };
     }
     static get events() {
         return [{
-                "method": "nanoOpened",
-                "name": "nanoOpened",
+                "method": "nanoOpen",
+                "name": "nanoOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the component opens.\nNote: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead."
+                    "text": "Emitted when the component opens.\nNote: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead."
                 },
                 "complexType": {
                     "original": "any",
@@ -336,14 +287,14 @@ export class Details {
                     "references": {}
                 }
             }, {
-                "method": "nanoClosed",
-                "name": "nanoClosed",
+                "method": "nanoClose",
+                "name": "nanoClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the component closes.\nNote: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead."
+                    "text": "Emitted when the component closes.\nNote: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead."
                 },
                 "complexType": {
                     "original": "any",
@@ -351,8 +302,8 @@ export class Details {
                     "references": {}
                 }
             }, {
-                "method": "nanoAfterOpened",
-                "name": "nanoAfterOpened",
+                "method": "nanoAfterOpen",
+                "name": "nanoAfterOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -366,8 +317,8 @@ export class Details {
                     "references": {}
                 }
             }, {
-                "method": "nanoAfterClosed",
-                "name": "nanoAfterClosed",
+                "method": "nanoAfterClose",
+                "name": "nanoAfterClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -382,7 +333,6 @@ export class Details {
                 }
             }];
     }
-    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "open",
@@ -390,4 +340,3 @@ export class Details {
             }];
     }
 }
-//# sourceMappingURL=details.js.map