@esri/calcite-components 1.0.0-beta.68 → 1.0.0-beta.71

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-tip-manager/calcite-tip-manager.js

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
-import { getElementDir } from "../../utils/dom";
+import { getElementStyleDir } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 import { createObserver } from "../../utils/observers";
 /**
@@ -136,7 +136,7 @@ export class CalciteTipManager {
   //
   // --------------------------------------------------------------------------
   renderPagination() {
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
     const nextLabel = intlNext || TEXT.next;
     const previousLabel = intlPrevious || TEXT.previous;

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.css

@@ -85,51 +85,75 @@
 }
 
 :host {
-  --calcite-tree-indicator: var(--calcite-ui-border-1);
-  --calcite-tree-indicator-active: var(--calcite-ui-brand);
-  --calcite-tree-text: var(--calcite-ui-text-3);
-  --calcite-tree-text-active: var(--calcite-ui-text-1);
   display: block;
   cursor: pointer;
   outline: 2px solid transparent;
   outline-offset: 2px;
   max-width: 100%;
-  color: var(--calcite-tree-text);
+  color: var(--calcite-ui-text-3);
 }
 
 :host([scale=s]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
+}
+
+:host([scale=s]) .node-container {
   --calcite-tree-padding-y: 0.25rem;
 }
 
-:host([scale=s]) .node-container .checkbox {
-  margin-inline-start: 1.5rem;
+:host([scale=s]) .node-container .checkbox,
+:host([scale=s]) .node-container .chevron,
+:host([scale=s]) .node-container .checkmark,
+:host([scale=s]) .node-container .bullet-point {
+  margin-inline: 0.25rem;
 }
 
 :host([scale=m]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
+}
+
+:host([scale=m]) .node-container {
   --calcite-tree-padding-y: 0.5rem;
 }
 
-:host([scale=m]) .node-container .checkbox {
-  margin-inline-start: 2rem;
+:host([scale=m]) .node-container .checkbox,
+:host([scale=m]) .node-container .chevron,
+:host([scale=m]) .node-container .checkmark,
+:host([scale=m]) .node-container .bullet-point {
+  margin-inline: 0.5rem;
 }
 
 :host([scale=l]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
+}
+
+:host([scale=l]) .node-container {
   --calcite-tree-padding-y: 0.75rem;
 }
 
-:host([scale=l]) .node-container .checkbox {
-  margin-inline-start: 2.5rem;
+:host([scale=l]) .node-container .checkbox,
+:host([scale=l]) .node-container .chevron,
+:host([scale=l]) .node-container .checkmark,
+:host([scale=l]) .node-container .bullet-point {
+  margin-inline: 0.75rem;
 }
 
-:host([lines]) {
-  --calcite-tree-line: var(--calcite-ui-border-2);
-  --calcite-tree-line-hover: var(--calcite-ui-border-1);
+:host([lines]) .children-container:after {
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  transition-property: background-color, border-color, color, fill, stroke;
+  top: 0;
+  position: absolute;
+  width: 1px;
+  height: 96%;
+  content: "";
+  background-color: var(--calcite-ui-border-2);
+  z-index: -1;
 }
 
 :host(:not([lines])) .node-container:after {
@@ -182,28 +206,12 @@
   overflow: hidden;
   height: 0;
   margin-inline-start: 1.25rem;
-  margin-inline-end: 1.25rem;
   transform: scaleY(0);
   opacity: 0;
   transition: 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;
   transform-origin: top;
 }
 
-.children-container:after {
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
-  transition-property: background-color, border-color, color, fill, stroke;
-  top: 0;
-  position: absolute;
-  width: 1px;
-  height: 96%;
-  content: "";
-  background-color: var(--calcite-tree-line);
-  z-index: -1;
-}
-
 :host([expanded]) > .children-container {
   transform: scaleY(1);
   opacity: 1;
@@ -217,16 +225,6 @@
   padding: var(--calcite-tree-padding-y) 0;
 }
 
-.node-container .checkmark,
-.node-container .bullet-point {
-  margin-inline-start: var(--calcite-tree-padding-y);
-  margin-inline-end: var(--calcite-tree-padding-y);
-}
-
-.node-container .checkbox {
-  margin-inline-end: var(--calcite-tree-padding-y);
-}
-
 .node-container .checkmark,
 .node-container .bullet-point {
   transition-property: all;
@@ -234,13 +232,7 @@
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   opacity: 0;
-  color: var(--calcite-tree-indicator);
-}
-
-.node-container:hover ::slotted(*),
-:host([selected]) .node-container:hover ::slotted(*),
-:host(:focus) .node-container ::slotted(*) {
-  color: var(--calcite-tree-text-hover);
+  color: var(--calcite-ui-border-1);
 }
 
 .node-container:hover .checkmark,
@@ -254,8 +246,8 @@
 
 :host([selected]) > .node-container,
 :host([selected]) > .node-container:hover {
-  color: var(--calcite-tree-text-active);
   font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-1);
 }
 
 :host([selected]) > .node-container .bullet-point,
@@ -266,15 +258,15 @@
   color: var(--calcite-ui-brand);
 }
 
-:host(:not([has-children]))[scale=s] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=s]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.25rem;
 }
 
-:host(:not([has-children]))[scale=m] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=m]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.5rem;
 }
 
-:host(:not([has-children]))[scale=l] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=l]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.75rem;
 }
 
@@ -289,11 +281,11 @@
 
 :host([has-children][expanded]:not([selected])) > .node-container ::slotted(*) {
   font-weight: var(--calcite-font-weight-medium);
-  color: var(--calcite-tree-text-active);
+  color: var(--calcite-ui-text-1);
 }
 
 :host([has-children][selected]) > .node-container[data-selection-mode=children], :host([has-children][selected]) > .node-container[data-selection-mode=multi-children] {
-  color: var(--calcite-tree-indicator-active);
+  color: var(--calcite-ui-brand);
 }
 
 .chevron {
@@ -303,11 +295,9 @@
   transition-delay: 0s;
   position: relative;
   align-self: center;
+  color: var(--calcite-ui-text-3);
   flex: 0 0 auto;
-  margin-inline-start: var(--calcite-tree-padding-y);
-  margin-inline-end: var(--calcite-tree-padding-y);
   transform: rotate(0deg);
-  color: var(--calcite-tree-text);
 }
 
 .calcite--rtl .chevron {
@@ -318,19 +308,7 @@
   transform: rotate(90deg);
 }
 
-:host([scale=s]) > .node-container .checkbox {
-  margin-inline-end: 0.5rem;
-}
-
-:host([scale=m]) > .node-container .checkbox {
-  margin-inline-end: 0.75rem;
-}
-
-:host([scale=l]) > .node-container .checkbox {
-  margin-inline-end: 1rem;
-}
-
 :host([selected]) .checkmark,
 :host([selected]) .bullet-point {
-  color: var(--calcite-tree-indicator-active);
+  color: var(--calcite-ui-brand);
 }

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

@@ -45,10 +45,17 @@ export class CalciteTreeItem {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.updateParentIsExpanded = (el, expanded) => {
+      const items = getSlotted(el, SLOTS.children, {
+        all: true,
+        selector: "calcite-tree-item"
+      });
+      items.forEach((item) => (item.parentExpanded = expanded));
+    };
     this.updateAncestorTree = () => {
       if (this.selected && this.selectionMode === TreeSelectionMode.Ancestors) {
         const ancestors = [];
-        let parent = this.el.parentElement.closest("calcite-tree-item");
+        let parent = this.parentTreeItem;
         while (parent) {
           ancestors.push(parent);
           parent = parent.parentElement.closest("calcite-tree-item");
@@ -59,11 +66,7 @@ export class CalciteTreeItem {
     };
   }
   expandedHandler(newValue) {
-    const items = getSlotted(this.el, "children", {
-      all: true,
-      selector: "calcite-tree-item"
-    });
-    items.forEach((item) => (item.parentExpanded = newValue));
+    this.updateParentIsExpanded(this.el, newValue);
   }
   //--------------------------------------------------------------------------
   //
@@ -71,7 +74,11 @@ export class CalciteTreeItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.expandedHandler(this.expanded);
+    this.parentTreeItem = this.el.parentElement.closest("calcite-tree-item");
+    if (this.parentTreeItem) {
+      const { expanded } = this.parentTreeItem;
+      this.updateParentIsExpanded(this.parentTreeItem, expanded);
+    }
   }
   componentWillRender() {
     this.hasChildren = !!this.el.querySelector("calcite-tree");
@@ -191,7 +198,7 @@ export class CalciteTreeItem {
           break;
         }
         // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
-        const parentItem = this.el.parentElement.closest("calcite-tree-item");
+        const parentItem = this.parentTreeItem;
         if (parentItem && (!this.hasChildren || this.expanded === false)) {
           parentItem.focus();
           e.preventDefault();
@@ -301,8 +308,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 +329,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 +350,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 +371,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 +391,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 +419,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 +439,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 +464,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 +481,8 @@ export class CalciteTreeItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },