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

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

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -134,7 +128,9 @@
 
 .arrow::before {
   content: "";
-  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transform: rotate(45deg);
   background: var(--calcite-ui-foreground-1);
 }
@@ -157,30 +153,30 @@
 
 .container {
   position: relative;
-  background-color: var(--calcite-ui-foreground-1);
   display: flex;
-  justify-content: flex-start;
   flex-direction: column;
-  font-weight: var(--calcite-font-weight-medium);
-  color: var(--calcite-ui-text-1);
+  justify-content: flex-start;
+  border-radius: 0.25rem;
+  background-color: var(--calcite-ui-foreground-1);
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  overflow: hidden;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
-  border-radius: 0.25rem;
+  font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-1);
+  overflow: hidden;
   max-width: 20rem;
   max-height: 20rem;
 }
 
 .calcite-popper-anim {
-  background-color: var(--calcite-ui-foreground-1);
+  border-radius: 0.25rem;
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  border-radius: 0.25rem;
+  background-color: var(--calcite-ui-foreground-1);
 }
 
 .arrow::before {

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

@@ -128,7 +128,7 @@ export class CalciteTooltip {
   getReferenceElement() {
     const { referenceElement, el } = this;
     return ((typeof referenceElement === "string"
-      ? queryElementRoots(el, `#${referenceElement}`)
+      ? queryElementRoots(el, { id: referenceElement })
       : referenceElement) || null);
   }
   getModifiers() {

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

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {

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

@@ -5,7 +5,6 @@
 import { Component, h, Listen, Prop, Element } from "@stencil/core";
 import { TOOLTIP_REFERENCE, TOOLTIP_DELAY_MS } from "../calcite-tooltip/resources";
 import { queryElementRoots } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 /**
  * @slot - A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.
  */
@@ -31,7 +30,7 @@ export class CalciteTooltipManager {
       var _a;
       const { selector, el } = this;
       const id = (_a = element.closest(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(TOOLTIP_REFERENCE);
-      return queryElementRoots(el, `#${id}`);
+      return queryElementRoots(el, { id });
     };
     this.clearHoverTimeout = (tooltip) => {
       const { hoverTimeouts } = this;
@@ -117,7 +116,7 @@ export class CalciteTooltipManager {
   //
   //--------------------------------------------------------------------------
   keyUpHandler(event) {
-    if (getKey(event.key) === "Escape") {
+    if (event.key === "Escape") {
       const { tooltipEl } = this;
       if (tooltipEl) {
         this.clearHoverTimeout(tooltipEl);

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

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {

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

@@ -61,7 +61,8 @@ export class CalciteTree {
   onFocusIn(event) {
     const focusedFromRootOrOutsideTree = event.relatedTarget === this.el || !this.el.contains(event.relatedTarget);
     if (focusedFromRootOrOutsideTree) {
-      this.el.tabIndex = -1;
+      // gives user the ability to tab into external elements (modifying tabindex property will not work in firefox)
+      this.el.removeAttribute("tabindex");
     }
   }
   onFocusOut(event) {

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

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -86,22 +80,20 @@
 
 :host {
   display: block;
+  max-width: 100%;
   cursor: pointer;
+  color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  max-width: 100%;
-  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,
 :host([scale=s]) .node-container .chevron,
 :host([scale=s]) .node-container .checkmark,
@@ -113,11 +105,9 @@
   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,
 :host([scale=m]) .node-container .chevron,
 :host([scale=m]) .node-container .checkmark,
@@ -129,11 +119,9 @@
   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,
 :host([scale=l]) .node-container .chevron,
 :host([scale=l]) .node-container .checkmark,
@@ -142,14 +130,13 @@
 }
 
 :host([lines]) .children-container:after {
+  position: absolute;
+  top: 0px;
+  width: 1px;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   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);
@@ -161,21 +148,20 @@
 }
 
 ::slotted(*) {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  min-width: 0;
+  min-width: 0px;
   max-width: 100%;
+  overflow-wrap: break-word;
   color: inherit;
   text-decoration: none !important;
 }
-
 ::slotted(*):hover {
   text-decoration: none !important;
 }
 
 ::slotted(a) {
   width: 100%;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 
 :host {
@@ -196,22 +182,21 @@
 }
 
 .checkbox-label {
+  pointer-events: none;
   display: flex;
   align-items: center;
-  pointer-events: none;
 }
 
 .children-container {
   position: relative;
+  height: 0px;
   overflow: hidden;
-  height: 0;
   margin-inline-start: 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;
+  transition: var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;
   transform-origin: top;
 }
-
 :host([expanded]) > .children-container {
   transform: scaleY(1);
   opacity: 1;
@@ -219,41 +204,29 @@
 }
 
 .node-container {
+  position: relative;
   display: flex;
   align-items: center;
-  position: relative;
   padding: var(--calcite-tree-padding-y) 0;
 }
-
-.node-container .checkmark,
-.node-container .bullet-point {
+.node-container .checkmark, .node-container .bullet-point {
+  opacity: 0;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  opacity: 0;
   color: var(--calcite-ui-border-1);
 }
 
-.node-container:hover .checkmark,
-.node-container:hover .bullet-point,
-:host([selected]) .node-container:hover .checkmark,
-:host([selected]) .node-container:hover .bullet-point,
-:host(:focus) .node-container .checkmark,
-:host(:focus) .node-container .bullet-point {
+.node-container:hover .checkmark, .node-container:hover .bullet-point, :host([selected]) .node-container:hover .checkmark, :host([selected]) .node-container:hover .bullet-point, :host(:focus) .node-container .checkmark, :host(:focus) .node-container .bullet-point {
   opacity: 1;
 }
 
-:host([selected]) > .node-container,
-:host([selected]) > .node-container:hover {
+:host([selected]) > .node-container, :host([selected]) > .node-container:hover {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
-
-:host([selected]) > .node-container .bullet-point,
-:host([selected]) > .node-container .checkmark,
-:host([selected]) > .node-container:hover .bullet-point,
-:host([selected]) > .node-container:hover .checkmark {
+:host([selected]) > .node-container .bullet-point, :host([selected]) > .node-container .checkmark, :host([selected]) > .node-container:hover .bullet-point, :host([selected]) > .node-container:hover .checkmark {
   opacity: 1;
   color: var(--calcite-ui-brand);
 }
@@ -261,11 +234,9 @@
 :host(:not([has-children])):host([scale=s]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.25rem;
 }
-
 :host(:not([has-children])):host([scale=m]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.5rem;
 }
-
 :host(:not([has-children])):host([scale=l]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.75rem;
 }
@@ -274,8 +245,7 @@
   margin-inline-start: 0;
 }
 
-:host([has-children]) > .node-container .bullet-point,
-:host([has-children]) > .node-container .checkmark {
+:host([has-children]) > .node-container .bullet-point, :host([has-children]) > .node-container .checkmark {
   display: none;
 }
 
@@ -289,21 +259,19 @@
 }
 
 .chevron {
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
   position: relative;
   align-self: center;
   color: var(--calcite-ui-text-3);
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   flex: 0 0 auto;
   transform: rotate(0deg);
 }
-
 .calcite--rtl .chevron {
   transform: rotate(180deg);
 }
-
 :host([expanded]) > .node-container > .chevron {
   transform: rotate(90deg);
 }

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

@@ -5,9 +5,9 @@
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../calcite-tree/interfaces";
 import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the item.
  * @slot children - A slot for adding nested `calcite-tree` elements.
@@ -79,6 +79,10 @@ export class CalciteTreeItem {
       const { expanded } = this.parentTreeItem;
       this.updateParentIsExpanded(this.parentTreeItem, expanded);
     }
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
   }
   componentWillRender() {
     this.hasChildren = !!this.el.querySelector("calcite-tree");
@@ -156,7 +160,6 @@ export class CalciteTreeItem {
       const target = link.target === "" ? "_self" : link.target;
       window.open(link.href, target);
     }
-    this.expanded = !this.expanded;
     this.calciteTreeItemSelect.emit({
       modifyCurrentSelection: e.shiftKey || this.selectionMode === TreeSelectionMode.Ancestors,
       forceToggle: false
@@ -164,7 +167,7 @@ export class CalciteTreeItem {
   }
   keyDownHandler(e) {
     let root;
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
         this.calciteTreeItemSelect.emit({
           modifyCurrentSelection: e.shiftKey,