@esri/calcite-components 1.0.0-beta.80 → 1.0.0-beta.83

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

@@ -1,10 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../tree/interfaces";
-import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from "../../utils/dom";
+import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted, toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -19,15 +20,21 @@ export class TreeItem {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Is the item currently selected */
+    /** Selected state of the item. */
     this.selected = false;
-    /** True if the item is in an expanded state */
+    /** Expanded state of the item. */
     this.expanded = false;
-    /** @internal Is the parent of this item expanded? */
+    /**
+     * @internal
+     */
     this.parentExpanded = false;
-    /** @internal What level of depth is this item at? */
+    /**
+     * @internal
+     */
     this.depth = -1;
-    /** @internal Does this tree item have a tree inside it? */
+    /**
+     * @internal
+     */
     this.hasChildren = null;
     this.iconClickHandler = (event) => {
       event.stopPropagation();
@@ -133,7 +140,7 @@ export class TreeItem {
         [CSS_UTILITY.rtl]: rtl
       }, icon: selectedIcon, scale: "s" })) : null;
     const hidden = !(this.parentExpanded || this.depth === 1);
-    return (h(Host, { "aria-expanded": this.hasChildren ? this.expanded.toString() : undefined, "aria-hidden": hidden.toString(), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" },
+    return (h(Host, { "aria-expanded": this.hasChildren ? toAriaBoolean(this.expanded) : undefined, "aria-hidden": toAriaBoolean(hidden), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" },
       h("div", { class: {
           [CSS.nodeContainer]: true,
           [CSS_UTILITY.rtl]: rtl
@@ -160,7 +167,7 @@ export class TreeItem {
       const target = link.target === "" ? "_self" : link.target;
       window.open(link.href, target);
     }
-    this.calciteTreeItemSelect.emit({
+    this.calciteInternalTreeItemSelect.emit({
       modifyCurrentSelection: this.selectionMode === TreeSelectionMode.Ancestors || this.isSelectionMultiLike,
       forceToggle: false
     });
@@ -169,7 +176,7 @@ export class TreeItem {
     let root;
     switch (e.key) {
       case " ":
-        this.calciteTreeItemSelect.emit({
+        this.calciteInternalTreeItemSelect.emit({
           modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: false
         });
@@ -183,7 +190,7 @@ export class TreeItem {
           this.selected = true;
         }
         else {
-          this.calciteTreeItemSelect.emit({
+          this.calciteInternalTreeItemSelect.emit({
             modifyCurrentSelection: this.isSelectionMultiLike,
             forceToggle: false
           });
@@ -228,7 +235,7 @@ export class TreeItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Is the item currently selected"
+        "text": "Selected state of the item."
       },
       "attribute": "selected",
       "reflect": true,
@@ -246,7 +253,7 @@ export class TreeItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "True if the item is in an expanded state"
+        "text": "Expanded state of the item."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -265,7 +272,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Is the parent of this item expanded?"
+            "text": undefined
           }],
         "text": ""
       },
@@ -286,7 +293,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "What level of depth is this item at?"
+            "text": undefined
           }],
         "text": ""
       },
@@ -307,7 +314,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Does this tree item have a tree inside it?"
+            "text": undefined
           }],
         "text": ""
       },
@@ -328,7 +335,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Draw lines (set on parent)"
+            "text": undefined
           }],
         "text": ""
       },
@@ -351,9 +358,9 @@ export class TreeItem {
             "text": undefined
           }, {
             "name": "deprecated",
-            "text": "set \"ancestors\" selection-mode on parent tree for checkboxes"
+            "text": "Use \"ancestors\" selection-mode on parent for checkbox input."
           }],
-        "text": "Display checkboxes (set on parent)"
+        "text": "Displays checkboxes (set on parent)."
       },
       "attribute": "input-enabled",
       "reflect": false
@@ -376,7 +383,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Scale of the parent tree, defaults to m"
+            "text": undefined
           }],
         "text": ""
       },
@@ -396,9 +403,9 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected"
+            "text": undefined
           }],
-        "text": ""
+        "text": "In ancestor selection mode, show as indeterminate when only some children are selected."
       },
       "attribute": "indeterminate",
       "reflect": true
@@ -421,7 +428,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Tree selection-mode (set on parent)"
+            "text": undefined
           }],
         "text": ""
       },
@@ -430,8 +437,8 @@ export class TreeItem {
     }
   }; }
   static get events() { return [{
-      "method": "calciteTreeItemSelect",
-      "name": "calciteTreeItemSelect",
+      "method": "calciteInternalTreeItemSelect",
+      "name": "calciteInternalTreeItemSelect",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/value-list/resources.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 export const CSS = {
   container: "container",

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

@@ -1,17 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
 import { CSS, ICON_TYPES } from "./resources";
-import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems, moveItemIndex } from "../pick-list/shared-list-logic";
+import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteInternalListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems, moveItemIndex } from "../pick-list/shared-list-logic";
 import List from "../pick-list/shared-list-render";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
- * @slot - A slot for adding `calcite-value-list-item` elements. Items are displayed as a vertical list.
- * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
+ * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.
+ * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.
  */
 export class ValueList {
   constructor() {
@@ -21,15 +22,15 @@ export class ValueList {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     * When true, prevents user interaction. This state shows list items grayed out and with lower opacity.
      */
     this.disabled = false;
     /**
-     * When true, the items will be sortable via drag and drop.
+     * When true, list items are sortable via a draggable button.
      */
     this.dragEnabled = false;
     /**
-     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     * When true, an input appears at the top of the list that can be used by end users to filter list items.
      */
     this.filterEnabled = false;
     /**
@@ -37,14 +38,14 @@ export class ValueList {
      */
     this.loading = false;
     /**
-     * Multiple Works similar to standard radio buttons and checkboxes.
-     * When true, a user can select multiple items at a time.
-     * When false, only a single item can be selected at a time
-     * and selecting a new item will deselect any other selected items.
+     * Similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple list items at a time.
+     * When false, only a single list item can be selected at a time,
+     * and selecting a new list item will deselect any other selected list items.
      */
     this.multiple = false;
     /**
-     * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+     * When true and single-selection is enabled, the selection changes when navigating list items via the keyboard.
      */
     this.selectionFollowsFocus = false;
     // --------------------------------------------------------------------------
@@ -127,12 +128,13 @@ export class ValueList {
   calciteListItemChangeHandler(event) {
     calciteListItemChangeHandler.call(this, event);
   }
-  calciteListItemPropsChangeHandler(event) {
+  calciteInternalListItemPropsChangeHandler(event) {
     event.stopPropagation();
     this.setUpFilter();
   }
-  calciteListItemValueChangeHandler(event) {
-    calciteListItemValueChangeHandler.call(this, event);
+  calciteInternalListItemValueChangeHandler(event) {
+    calciteInternalListItemValueChangeHandler.call(this, event);
+    event.stopPropagation();
   }
   // --------------------------------------------------------------------------
   //
@@ -181,7 +183,11 @@ export class ValueList {
   async getSelectedItems() {
     return this.selectedValues;
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     return setFocus.call(this, focusId);
   }
@@ -221,7 +227,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+        "text": "When true, prevents user interaction. This state shows list items grayed out and with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -239,7 +245,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the items will be sortable via drag and drop."
+        "text": "When true, list items are sortable via a draggable button."
       },
       "attribute": "drag-enabled",
       "reflect": true,
@@ -257,7 +263,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, an input appears at the top of the list that can be used by end users to filter items in the list."
+        "text": "When true, an input appears at the top of the list that can be used by end users to filter list items."
       },
       "attribute": "filter-enabled",
       "reflect": true,
@@ -275,7 +281,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Placeholder text for the filter input field."
+        "text": "Placeholder text for the filter's input field."
       },
       "attribute": "filter-placeholder",
       "reflect": true
@@ -327,7 +333,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Multiple Works similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple items at a time.\nWhen false, only a single item can be selected at a time\nand selecting a new item will deselect any other selected items."
+        "text": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple list items at a time.\nWhen false, only a single list item can be selected at a time,\nand selecting a new list item will deselect any other selected list items."
       },
       "attribute": "multiple",
       "reflect": true,
@@ -345,7 +351,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true and single-selection is enabled, the selection will change when navigating items via the keyboard."
+        "text": "When true and single-selection is enabled, the selection changes when navigating list items via the keyboard."
       },
       "attribute": "selection-follows-focus",
       "reflect": false,
@@ -364,7 +370,7 @@ export class ValueList {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when any of the item selections have changed."
+        "text": "Emits when any of the list item selections have changed."
       },
       "complexType": {
         "original": "Map<string, HTMLCalciteValueListItemElement>",
@@ -386,7 +392,7 @@ export class ValueList {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the order of the list has changed."
+        "text": "Emits when the order of the list has changed."
       },
       "complexType": {
         "original": "any[]",
@@ -421,7 +427,10 @@ export class ValueList {
       "complexType": {
         "signature": "(focusId?: ListFocusId) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -437,7 +446,10 @@ export class ValueList {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     }
   }; }
@@ -461,14 +473,14 @@ export class ValueList {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteListItemPropsChange",
-      "method": "calciteListItemPropsChangeHandler",
+      "name": "calciteInternalListItemPropsChange",
+      "method": "calciteInternalListItemPropsChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteListItemValueChange",
-      "method": "calciteListItemValueChangeHandler",
+      "name": "calciteInternalListItemValueChange",
+      "method": "calciteInternalListItemValueChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false

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

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 export const ICONS = {
   drag: "drag"

package/dist/collection/components/value-list-item/value-list-item.css

@@ -122,9 +122,7 @@ calcite-pick-list-item {
   padding-right: 0.25rem;
   color: var(--calcite-ui-text-1);
   color: var(--calcite-ui-border-1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 .handle:hover {
   background-color: var(--calcite-ui-foreground-2);

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

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";
@@ -8,7 +9,7 @@ import { guid } from "../../utils/guid";
 import { CSS } from "../pick-list-item/resources";
 import { ICONS, SLOTS } from "./resources";
 import { SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
-import { getSlotted } from "../../utils/dom";
+import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
@@ -18,11 +19,11 @@ import { updateHostInteraction } from "../../utils/interactive";
 export class ValueListItem {
   constructor() {
     /**
-     * When true, the item cannot be clicked and is visually muted
+     * When true, the list item cannot be clicked and is visually muted.
      */
     this.disabled = false;
     /**
-     * @internal When false, the item cannot be deselected by user interaction.
+     * @internal
      */
     this.disableDeselect = false;
     /**
@@ -30,20 +31,21 @@ export class ValueListItem {
      */
     this.nonInteractive = false;
     /**
-     * @internal - stores the activated state of the drag handle.
+     * @internal
      */
     this.handleActivated = false;
     /**
      * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+     *
      * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
      */
     this.icon = null;
     /**
-     * Set this to true to display a remove action that removes the item from the list.
+     * When true, adds an action to remove the list item.
      */
     this.removable = false;
     /**
-     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     * When true, preselects the list item. Toggles when an item is checked/unchecked.
      */
     this.selected = false;
     this.pickListItem = null;
@@ -86,13 +88,15 @@ export class ValueListItem {
   //
   // --------------------------------------------------------------------------
   /**
-   * Used to toggle the selection state. By default this won't trigger an event.
+   * Toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
    */
   async toggleSelected(coerce) {
     this.pickListItem.toggleSelected(coerce);
   }
-  /** Sets focus on the component. */
+  /** Set focus on the component. */
   async setFocus() {
     var _a;
     (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
@@ -119,7 +123,7 @@ export class ValueListItem {
   renderHandle() {
     const { icon } = this;
     if (icon === ICON_TYPES.grip) {
-      return (h("span", { "aria-pressed": this.handleActivated.toString(), class: {
+      return (h("span", { "aria-pressed": toAriaBoolean(this.handleActivated), class: {
           [CSS.handle]: true,
           [CSS.handleActivated]: this.handleActivated
         }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" },
@@ -154,7 +158,7 @@ export class ValueListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "An optional description for this item. Will appear below the label text."
+        "text": "An optional description for the list item that displays below the label text."
       },
       "attribute": "description",
       "reflect": true
@@ -171,7 +175,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the item cannot be clicked and is visually muted"
+        "text": "When true, the list item cannot be clicked and is visually muted."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -190,7 +194,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "When false, the item cannot be deselected by user interaction."
+            "text": undefined
           }],
         "text": ""
       },
@@ -229,7 +233,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "- stores the activated state of the drag handle."
+            "text": undefined
           }],
         "text": ""
       },
@@ -275,7 +279,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The main label for this item. Appears next to the icon."
+        "text": "The main label for the list item. Appears next to the icon."
       },
       "attribute": "label",
       "reflect": true
@@ -296,7 +300,7 @@ export class ValueListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Used to provide additional metadata to an item, primarily used when the parent list has a filter."
+        "text": "Provides additional metadata to a list item. Primary use is for a filter on the parent list."
       }
     },
     "removable": {
@@ -311,7 +315,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set this to true to display a remove action that removes the item from the list."
+        "text": "When true, adds an action to remove the list item."
       },
       "attribute": "removable",
       "reflect": true,
@@ -329,7 +333,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set this to true to pre-select an item. Toggles when an item is checked/unchecked."
+        "text": "When true, preselects the list item. Toggles when an item is checked/unchecked."
       },
       "attribute": "selected",
       "reflect": true,
@@ -347,7 +351,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The item's associated value."
+        "text": "The list item's associated value."
       },
       "attribute": "value",
       "reflect": false
@@ -361,7 +365,7 @@ export class ValueListItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted whenever the remove button is pressed."
+        "text": "Emits when the remove button is pressed."
       },
       "complexType": {
         "original": "void",
@@ -374,7 +378,10 @@ export class ValueListItem {
       "complexType": {
         "signature": "(coerce?: boolean) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "coerce"
+              }],
             "text": ""
           }],
         "references": {
@@ -385,8 +392,11 @@ export class ValueListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Used to toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
-        "tags": []
+        "text": "Toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
+        "tags": [{
+            "name": "param",
+            "text": "coerce"
+          }]
       }
     },
     "setFocus": {
@@ -401,7 +411,7 @@ export class ValueListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Sets focus on the component.",
+        "text": "Set focus on the component.",
         "tags": []
       }
     }

package/dist/collection/demos/_assets/demo-spacer.js

@@ -0,0 +1,17 @@
+class DemoSpacer extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `
+          <style>
+            :host {
+              display: grid;
+              grid-template-columns: 1fr;
+              grid-gap: ${this.getAttribute("gap") || "12px"};
+            }
+          </style>
+          <slot></slot>
+        `;
+    }
+}
+customElements.define("demo-spacer", DemoSpacer);

package/dist/collection/demos/_assets/demo-template.js

@@ -0,0 +1,13 @@
+const toggleDir = () => {
+    document.dir = document.dir === "rtl" ? "ltr" : "rtl";
+};
+const toggleTheme = () => {
+    document.body.classList.toggle("calcite-theme-dark");
+};
+const loadDemoToggles = () => {
+    document.querySelectorAll("h1:not(#demo-heading)").forEach((h1) => h1.remove());
+    document.getElementById("demo-heading").textContent = document.title;
+    document.getElementById("toggle-dir").addEventListener("calciteSwitchChange", toggleDir);
+    document.getElementById("toggle-theme").addEventListener("calciteSwitchChange", toggleTheme);
+};
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadDemoToggles) : loadDemoToggles();