@esri/calcite-components 1.0.0-next.293 → 1.0.0-next.294

package/dist/collection/components/calcite-tab-nav/calcite-tab-nav.js

@@ -235,8 +235,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component scale value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component scale value"
           }],
         "text": ""
       },
@@ -261,8 +261,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component layout value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component layout value"
           }],
         "text": ""
       },
@@ -287,8 +287,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component position value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component position value"
           }],
         "text": ""
       },
@@ -308,8 +308,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component bordered value when layout is \"inline\"",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component bordered value when layout is \"inline\""
           }],
         "text": ""
       },
@@ -329,8 +329,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -349,8 +349,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -370,8 +370,8 @@ export class CalciteTabNav {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tab/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tab/interfaces.ts#L1)"
           }],
         "text": "Emitted when the active tab changes"
       },

package/dist/collection/components/calcite-tab-title/calcite-tab-title.js

@@ -302,8 +302,8 @@ export class CalciteTabTitle {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component layout value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component layout value"
           }],
         "text": ""
       },
@@ -327,8 +327,8 @@ export class CalciteTabTitle {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component or parent tab-nav component's position",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component or parent tab-nav component's position"
           }],
         "text": ""
       },
@@ -352,8 +352,8 @@ export class CalciteTabTitle {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component or parent tab-nav component's scale",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component or parent tab-nav component's scale"
           }],
         "text": ""
       },
@@ -372,8 +372,8 @@ export class CalciteTabTitle {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component bordered value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component bordered value"
           }],
         "text": ""
       },
@@ -411,8 +411,8 @@ export class CalciteTabTitle {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tab/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tab/interfaces.ts#L1)"
           }],
         "text": "Fires when a specific tab is activated (`event.details`)"
       },
@@ -434,8 +434,8 @@ export class CalciteTabTitle {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -452,8 +452,8 @@ export class CalciteTabTitle {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -470,8 +470,8 @@ export class CalciteTabTitle {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-tile/calcite-tile.css

@@ -142,6 +142,7 @@
   flex-direction: column;
   grid-gap: 0.5rem;
   gap: 0.5rem;
+  width: 10%;
 }
 
 .content-container {
@@ -153,6 +154,7 @@
   align-items: stretch;
   padding: 0;
   color: var(--calcite-ui-text-2);
+  width: 100%;
 }
 
 .content-slot-container {
@@ -177,6 +179,8 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   font-weight: var(--calcite-font-weight-medium);
   pointer-events: none;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .large-visual {

package/dist/collection/components/calcite-tile/calcite-tile.js

@@ -153,8 +153,8 @@ export class CalciteTile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the tile."
       },

package/dist/collection/components/calcite-time-picker/calcite-time-picker.js

@@ -645,8 +645,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hour\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hour\""
           }],
         "text": "aria-label for the hour input"
       },
@@ -666,8 +666,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Decrease hour\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Decrease hour\""
           }],
         "text": "aria-label for the hour down button"
       },
@@ -687,8 +687,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Increase hour\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Increase hour\""
           }],
         "text": "aria-label for the hour up button"
       },
@@ -708,8 +708,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"AM/PM\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"AM/PM\""
           }],
         "text": "aria-label for the meridiem (am/pm) input"
       },
@@ -729,8 +729,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Decrease AM/PM\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Decrease AM/PM\""
           }],
         "text": "aria-label for the meridiem (am/pm) down button"
       },
@@ -750,8 +750,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Increase AM/PM\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Increase AM/PM\""
           }],
         "text": "aria-label for the meridiem (am/pm) up button"
       },
@@ -771,8 +771,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Minute\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Minute\""
           }],
         "text": "aria-label for the minute input"
       },
@@ -792,8 +792,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Decrease minute\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Decrease minute\""
           }],
         "text": "aria-label for the minute down button"
       },
@@ -813,8 +813,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Increase minute\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Increase minute\""
           }],
         "text": "aria-label for the minute up button"
       },
@@ -834,8 +834,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Second\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Second\""
           }],
         "text": "aria-label for the second input"
       },
@@ -855,8 +855,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Decrease second\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Decrease second\""
           }],
         "text": "aria-label for the second down button"
       },
@@ -876,8 +876,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Increase second\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Increase second\""
           }],
         "text": "aria-label for the second up button"
       },
@@ -975,8 +975,8 @@ export class CalciteTimePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -998,8 +998,8 @@ export class CalciteTimePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -1021,8 +1021,8 @@ export class CalciteTimePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-tooltip/calcite-tooltip.js

@@ -117,7 +117,7 @@ export class CalciteTooltip {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el,
         modifiers,
         placement,
@@ -224,8 +224,8 @@ export class CalciteTooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "6",
-            "name": "default"
+            "name": "default",
+            "text": "6"
           }],
         "text": "Offset the position of the popover away from the reference element."
       },
@@ -309,8 +309,8 @@ export class CalciteTooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)",
-            "name": "see"
+            "name": "see",
+            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
         "text": "Determines where the component will be positioned relative to the referenceElement."
       },

package/dist/collection/components/calcite-tooltip-manager/calcite-tooltip-manager.js

@@ -165,8 +165,8 @@ export class CalciteTooltipManager {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "`[data-calcite-tooltip-reference]`",
-            "name": "default"
+            "name": "default",
+            "text": "`[data-calcite-tooltip-reference]`"
           }],
         "text": "CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip."
       },

package/dist/collection/components/calcite-tree/calcite-tree.js

@@ -224,8 +224,8 @@ export class CalciteTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "use \"ancestors\" selection-mode for checkbox input",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use \"ancestors\" selection-mode for checkbox input"
           }],
         "text": "Display input"
       },
@@ -245,8 +245,8 @@ export class CalciteTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "If this tree is nested within another tree, set to false",
-            "name": "internal"
+            "name": "internal",
+            "text": "If this tree is nested within another tree, set to false"
           }],
         "text": ""
       },
@@ -293,11 +293,11 @@ export class CalciteTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"single\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"single\""
           }, {
-            "text": " [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L5)",
-            "name": "see"
+            "name": "see",
+            "text": " [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L5)"
           }],
         "text": "Customize how tree selection works (single, multi, children, multi-children, ancestors)"
       },
@@ -314,8 +314,8 @@ export class CalciteTree {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L1)"
           }],
         "text": "Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property."
       },

package/dist/collection/components/calcite-tree-item/calcite-tree-item.js

@@ -301,8 +301,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Is the parent of this item expanded?",
-            "name": "internal"
+            "name": "internal",
+            "text": "Is the parent of this item expanded?"
           }],
         "text": ""
       },
@@ -322,8 +322,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "What level of depth is this item at?",
-            "name": "internal"
+            "name": "internal",
+            "text": "What level of depth is this item at?"
           }],
         "text": ""
       },
@@ -343,8 +343,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Does this tree item have a tree inside it?",
-            "name": "internal"
+            "name": "internal",
+            "text": "Does this tree item have a tree inside it?"
           }],
         "text": ""
       },
@@ -364,8 +364,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Draw lines (set on parent)",
-            "name": "internal"
+            "name": "internal",
+            "text": "Draw lines (set on parent)"
           }],
         "text": ""
       },
@@ -384,11 +384,11 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }, {
-            "text": "set \"ancestors\" selection-mode on parent tree for checkboxes",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "set \"ancestors\" selection-mode on parent tree for checkboxes"
           }],
         "text": "Display checkboxes (set on parent)"
       },
@@ -412,8 +412,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Scale of the parent tree, defaults to m",
-            "name": "internal"
+            "name": "internal",
+            "text": "Scale of the parent tree, defaults to m"
           }],
         "text": ""
       },
@@ -432,8 +432,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected",
-            "name": "internal"
+            "name": "internal",
+            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected"
           }],
         "text": ""
       },
@@ -457,8 +457,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tree selection-mode (set on parent)",
-            "name": "internal"
+            "name": "internal",
+            "text": "Tree selection-mode (set on parent)"
           }],
         "text": ""
       },
@@ -474,8 +474,8 @@ export class CalciteTreeItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-value-list-item/calcite-value-list-item.js

@@ -173,8 +173,8 @@ export class CalciteValueListItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "When false, the item cannot be deselected by user interaction.",
-            "name": "internal"
+            "name": "internal",
+            "text": "When false, the item cannot be deselected by user interaction."
           }],
         "text": ""
       },
@@ -212,8 +212,8 @@ export class CalciteValueListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "- stores the activated state of the drag handle.",
-            "name": "internal"
+            "name": "internal",
+            "text": "- stores the activated state of the drag handle."
           }],
         "text": ""
       },
@@ -238,8 +238,8 @@ export class CalciteValueListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)",
-            "name": "see"
+            "name": "see",
+            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)"
           }],
         "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null."
       },

package/dist/collection/utils/popper.js

@@ -31,9 +31,9 @@ export function createPopper({ referenceEl, el, placement, overlayPositioning =
     modifiers
   });
 }
-export function updatePopper({ el, modifiers, placement: PopperPlacement, popper }) {
+export async function updatePopper({ el, modifiers, placement: PopperPlacement, popper }) {
   const placement = getPlacement(el, PopperPlacement);
-  popper.setOptions({
+  await popper.setOptions({
     modifiers,
     placement
   });

package/dist/components/calcite-accordion-item.js

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { g as getKey } from './key.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
@@ -13,7 +13,7 @@ let CalciteAccordionItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteAccordionItemKeyEvent = createEvent(this, "calciteAccordionItemKeyEvent", 7);
     this.calciteAccordionItemSelect = createEvent(this, "calciteAccordionItemSelect", 7);
     this.calciteAccordionItemClose = createEvent(this, "calciteAccordionItemClose", 7);

package/dist/components/calcite-accordion.js

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { attachShadow, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { g as getKey } from './key.js';
 
 const calciteAccordionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{display:block;position:relative;max-width:100%;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);border-bottom-width:0;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}:host([appearance=minimal]){--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0;border-color:transparent}:host([appearance=transparent]){border-color:transparent;--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}";
@@ -11,7 +11,7 @@ let CalciteAccordion$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteAccordionChange = createEvent(this, "calciteAccordionChange", 7);
     //--------------------------------------------------------------------------
     //