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

package/dist/collection/components/calcite-avatar/calcite-avatar.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]) {
@@ -85,28 +79,26 @@
 }
 
 :host {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
+  display: inline-block;
   border-radius: 50%;
   overflow: hidden;
 }
 
 :host([scale=s]) {
-  width: 1.5rem;
   height: 1.5rem;
+  width: 1.5rem;
   font-size: var(--calcite-font-size--3);
 }
 
 :host([scale=m]) {
-  width: 2rem;
   height: 2rem;
+  width: 2rem;
   font-size: var(--calcite-font-size--2);
 }
 
 :host([scale=l]) {
-  width: 2.75rem;
   height: 2.75rem;
+  width: 2.75rem;
   font-size: var(--calcite-font-size-0);
 }
 
@@ -115,9 +107,9 @@
 }
 
 .background {
-  width: 100%;
-  height: 100%;
   display: flex;
+  height: 100%;
+  width: 100%;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
@@ -130,7 +122,7 @@
 }
 
 .thumbnail {
-  width: 100%;
   height: 100%;
+  width: 100%;
   border-radius: 50%;
 }

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

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, h, Prop, State } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { isValidHex } from "../calcite-color-picker/utils";
 import { hexToHue, stringToHex } from "./utils";
 import { getThemeName } from "../../utils/dom";
@@ -38,13 +37,12 @@ export class CalciteAvatar {
   //
   //--------------------------------------------------------------------------
   determineContent() {
-    const dir = getElementDir(this.el);
     if (this.thumbnail && !this.error) {
-      return (h("img", { alt: "", class: "thumbnail", dir: dir, onError: () => (this.error = true), src: this.thumbnail }));
+      return (h("img", { alt: "", class: "thumbnail", onError: () => (this.error = true), src: this.thumbnail }));
     }
     const initials = this.generateInitials();
     const backgroundColor = this.generateFillColor();
-    return (h("span", { class: "background", dir: dir, style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
+    return (h("span", { class: "background", style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
   }
   /**
    * Generate a valid background color that is consistent and unique to this user

package/dist/collection/components/calcite-block/calcite-block.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,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Base ":host" styles for the component */
   box-sizing: border-box;
@@ -83,7 +77,6 @@
   color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
 }
-
 :host * {
   box-sizing: border-box;
 }
@@ -105,7 +98,7 @@
 }
 
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -114,35 +107,34 @@
 
 :host {
   display: flex;
-  flex-grow: 0;
   flex-shrink: 0;
+  flex-grow: 0;
   flex-direction: column;
-  padding: 0;
+  border-width: 0px;
+  border-bottom-width: 1px;
+  border-style: solid;
+  border-color: var(--calcite-ui-border-3);
+  padding: 0px;
   transition-property: margin;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.215, 0.440, 0.420, 0.880);
-  border-width: 0;
-  border-bottom-width: 1px;
-  border-color: var(--calcite-ui-border-3);
-  border-style: solid;
   flex-basis: auto;
 }
 
 /* Shared styles for header elements */
-
 .header {
-  margin: 0;
+  margin: 0px;
   display: flex;
-  align-items: center;
   align-content: space-between;
+  align-items: center;
+  fill: var(--calcite-ui-text-2);
   color: var(--calcite-ui-text-2);
-  fill: ;
 }
 
 .heading {
+  margin: 0px;
+  padding: 0px;
   font-weight: var(--calcite-font-weight-medium);
-  margin: 0;
-  padding: 0;
 }
 
 .header .heading {
@@ -165,15 +157,14 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading,
-h5.heading {
+h4.heading, h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 
 .header {
   justify-content: flex-start;
-  padding: 0;
+  padding: 0px;
 }
 
 .header,
@@ -190,37 +181,25 @@ h5.heading {
   grid-row: 1/2;
 }
 
-.header-container > .header {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 0;
-  padding-right: 0;
-}
-
 .toggle {
+  margin: 0px;
   display: flex;
+  cursor: pointer;
   flex-wrap: nowrap;
-  justify-content: space-between;
-  font-family: inherit;
   align-items: center;
-  margin: 0;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 0;
-  padding-right: 0;
+  justify-content: space-between;
   border-style: none;
-  cursor: pointer;
+  padding: 0px;
+  font-family: inherit;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   text-align: initial;
   background-color: transparent;
 }
-
 .toggle:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
-
 .toggle:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
@@ -236,29 +215,28 @@ calcite-handle {
 }
 
 .title {
-  margin: 0;
-  padding-inline: 0.75rem;
-  padding-block: 0px;
+  margin: 0px;
+  padding: 0.75rem;
 }
 
 .header .title .heading {
-  padding: 0;
+  padding: 0px;
   font-size: var(--calcite-font-size--1);
-  color: var(--calcite-ui-text-2);
   font-weight: var(--calcite-font-weight-medium);
-  word-wrap: break-word;
-  word-break: break-word;
   line-height: 1.25;
+  color: var(--calcite-ui-text-2);
   transition-property: color;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  word-wrap: break-word;
+  word-break: break-word;
 }
 
 .summary {
-  padding: 0;
+  margin-top: 0.125rem;
+  padding: 0px;
   font-size: var(--calcite-font-size--2);
   color: var(--calcite-ui-text-3);
-  margin-top: 0.125rem;
   word-wrap: break-word;
   word-break: break-word;
 }
@@ -266,6 +244,7 @@ calcite-handle {
 .icon {
   margin-inline-start: 0.75rem;
   margin-inline-end: 0px;
+  margin-block: 0.75rem;
 }
 
 .status-icon.valid {
@@ -284,24 +263,24 @@ calcite-handle {
   0% {
     transform: rotate(0deg);
   }
-
   50% {
     transform: rotate(180deg);
   }
-
   100% {
     transform: rotate(360deg);
   }
 }
-
 .toggle-icon {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
   align-self: center;
+  justify-self: end;
   color: var(--calcite-ui-text-3);
   transition-property: color;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   margin-inline-end: 1rem;
-  margin-inline-start: 0px;
+  margin-inline-start: auto;
 }
 
 .toggle:hover .toggle-icon {
@@ -309,17 +288,29 @@ calcite-handle {
 }
 
 .content {
+  position: relative;
+}
+
+@keyframes in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.content {
+  animation: in var(--calcite-internal-animation-timing-slow) ease-in-out;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  position: relative;
-  animation: in var(--calcite-animation-timing) ease-in-out;
 }
 
 .control-container {
+  margin: 0px;
   display: flex;
-  margin: 0;
   grid-area: control;
 }
 
@@ -331,7 +322,6 @@ calcite-action-menu {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
 :host([open]) .header .title .heading {
   color: var(--calcite-ui-text-1);
 }
@@ -340,10 +330,7 @@ calcite-action-menu {
   pointer-events: none;
   -webkit-user-select: none;
           user-select: none;
-  pointer-events: none;
-  user-select: none;
 }
-
 :host([disabled]) .header-container {
   opacity: 0.5;
 }

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

@@ -6,6 +6,7 @@ import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the block.
  * @slot icon - A slot for adding a leading header icon.
@@ -59,6 +60,17 @@ export class CalciteBlock {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -72,7 +84,7 @@ export class CalciteBlock {
     const showingLoadingStatus = this.loading && !this.open;
     const statusIcon = showingLoadingStatus ? ICONS.refresh : ICONS[status];
     const hasIcon = getSlotted(el, SLOTS.icon) || statusIcon;
-    const iconEl = !statusIcon ? (h("slot", { name: SLOTS.icon })) : (h("calcite-icon", { class: {
+    const iconEl = !statusIcon ? (h("slot", { key: "icon-slot", name: SLOTS.icon })) : (h("calcite-icon", { class: {
         [CSS.statusIcon]: true,
         [CSS.valid]: status == "valid",
         [CSS.invalid]: status == "invalid",
@@ -80,14 +92,18 @@ export class CalciteBlock {
       }, icon: statusIcon, scale: "m" }));
     return hasIcon ? h("div", { class: CSS.icon }, iconEl) : null;
   }
+  renderTitle() {
+    const { heading, headingLevel, summary } = this;
+    return heading || summary ? (h("div", { class: CSS.title },
+      h(CalciteHeading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading),
+      summary ? h("div", { class: CSS.summary }, summary) : null)) : null;
+  }
   render() {
-    const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary, intlLoading, headingLevel } = this;
+    const { collapsible, disabled, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
     const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
     const headerContent = (h("header", { class: CSS.header },
       this.renderIcon(),
-      h("div", { class: CSS.title },
-        h(CalciteHeading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading),
-        summary ? h("div", { class: CSS.summary }, summary) : null)));
+      this.renderTitle()));
     const hasControl = !!getSlotted(el, SLOTS.control);
     const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);
     const collapseIcon = open ? ICONS.opened : ICONS.closed;

package/dist/collection/components/calcite-block-section/calcite-block-section.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,61 +80,56 @@
 
 :host {
   box-sizing: border-box;
+  display: block;
   background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
-  display: block;
+  color: var(--calcite-ui-text-2);
 }
 
 :host([open]) {
+  border-width: 0px;
+  border-bottom-width: 1px;
   border-style: solid;
-  border-width: 0;
   border-bottom-color: var(--calcite-ui-border-3);
-  border-bottom-width: 1px;
 }
 
 :host(:last-child) {
-  border-bottom-width: 0;
+  border-bottom-width: 0px;
 }
 
 .toggle {
+  width: 100%;
+  border-width: 0px;
   background-color: transparent;
-  border-width: 0;
-  color: var(--calcite-ui-text-2);
   font-family: var(--calcite-sans-family);
   font-weight: var(--calcite-font-weight-medium);
-  width: 100%;
+  color: var(--calcite-ui-text-2);
 }
 
-.toggle--switch,
-.section-header {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  margin-left: 0;
-  margin-right: 0;
+.toggle--switch, .section-header {
+  margin-left: 0px;
+  margin-right: 0px;
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  display: flex;
+  cursor: pointer;
   -webkit-user-select: none;
           user-select: none;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   font-size: var(--calcite-font-size--1);
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-
-.toggle--switch:focus,
-.section-header:focus {
+.toggle--switch:focus, .section-header:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }
-
-.toggle--switch:hover,
-.section-header:hover {
+.toggle--switch:hover, .section-header:hover {
   color: var(--calcite-ui-text-1);
 }
 
@@ -149,28 +138,27 @@
 }
 
 .section-header__text {
-  flex: 1 1 auto;
   margin-left: 0.75rem;
   margin-right: 0.75rem;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  flex: 1 1 auto;
   text-align: initial;
   word-wrap: anywhere;
 }
 
 .toggle--switch calcite-switch {
   pointer-events: none;
-  margin-left: 0.25rem;
+  margin-inline-start: 0.25rem;
 }
-
 .toggle--switch .status-icon {
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 
 .toggle--switch__content {
   display: flex;
-  align-items: center;
   flex: 1 1 auto;
+  align-items: center;
 }
 
 .status-icon.valid {
@@ -179,14 +167,4 @@
 
 .status-icon.invalid {
   color: var(--calcite-ui-danger);
-}
-
-.calcite--rtl .toggle--switch calcite-switch {
-  margin-left: 0;
-  margin-right: 0.25rem;
-}
-
-.calcite--rtl .toggle--switch .status-icon {
-  margin-left: 0;
-  margin-right: 0.5rem;
 }