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

package/dist/collection/components/calcite-scrim/calcite-scrim.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,42 +79,40 @@
 }
 
 :host {
-  display: flex;
   position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   z-index: 50;
+  display: flex;
+  height: 100%;
+  width: 100%;
   flex-direction: column;
   align-items: stretch;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }
 
 @keyframes calcite-scrim-fade-in {
   0% {
-    --bg-opacity: 0;
+    --tw-bg-opacity: 0;
   }
-
   100% {
-    --text-opacity: 1;
+    --tw-text-opacity: 1;
   }
 }
-
 .scrim {
-  display: flex;
   position: absolute;
-  overflow: hidden;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  display: flex;
+  flex-direction: column;
   align-content: center;
   align-items: center;
-  flex-direction: column;
   justify-content: center;
-  animation: calcite-scrim-fade-in 250ms ease-in-out;
+  overflow: hidden;
+  animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
   background-color: var(--calcite-scrim-background);
 }
 

package/dist/collection/components/calcite-select/calcite-select.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 {
   /* Component spacing variables */
   --calcite-icon-size: 1rem;
@@ -93,7 +87,7 @@
 }
 
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -108,21 +102,18 @@
 * @prop --calcite-select-font-size: the font-size of items in the select
 * @prop --calcite-select-spacing: the padding around the selected option text
 */
-
 :host {
+  position: relative;
   display: flex;
   align-items: stretch;
-  position: relative;
   width: var(--select-width);
 }
 
 :host([scale=s]) {
   height: 1.5rem;
   --calcite-select-font-size: var(--calcite-font-size--2);
-  --calcite-select-spacing: 0 2rem 0 0.5rem;
-  --calcite-select-spacing-rtl: 0 0.5rem 0 2rem;
+  --calcite-select-spacing-inline: 0.5rem 2rem;
 }
-
 :host([scale=s]) .icon-container {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -131,10 +122,8 @@
 :host([scale=m]) {
   height: 2rem;
   --calcite-select-font-size: var(--calcite-font-size--1);
-  --calcite-select-spacing: 0 2.5rem 0 0.75rem;
-  --calcite-select-spacing-rtl: 0 0.75rem 0 2.5rem;
+  --calcite-select-spacing-inline: 0.75rem 2.5rem;
 }
-
 :host([scale=m]) .icon-container {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -143,10 +132,8 @@
 :host([scale=l]) {
   height: 44px;
   --calcite-select-font-size: var(--calcite-font-size-0);
-  --calcite-select-spacing: 0 3rem 0 1rem;
-  --calcite-select-spacing-rtl: 0 1rem 0 3rem;
+  --calcite-select-spacing-inline: 1rem 3rem;
 }
-
 :host([scale=l]) .icon-container {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -165,48 +152,40 @@
 }
 
 .select {
+  margin: 0px;
+  box-sizing: border-box;
+  width: 100%;
+  cursor: pointer;
   -webkit-appearance: none;
           appearance: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 0px;
   border-width: 1px;
   border-style: solid;
-  border-right-width: 0;
-  background-color: var(--calcite-ui-foreground-1);
   border-color: var(--calcite-ui-border-input);
-  border-radius: 0;
-  color: var(--calcite-ui-text-2);
-  cursor: pointer;
+  background-color: var(--calcite-ui-foreground-1);
   font-family: inherit;
-  margin: 0;
-  width: 100%;
+  color: var(--calcite-ui-text-2);
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  box-sizing: border-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   font-size: var(--calcite-select-font-size);
-  padding: var(--calcite-select-spacing);
+  padding-inline: var(--calcite-select-spacing-inline);
+  border-inline-end-width: 0px;
 }
-
 .select:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
 .select:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
 
-.select.calcite--rtl {
-  border-width: 1px;
-  border-color: var(--calcite-ui-border-input);
-  padding: var(--calcite-select-spacing-rtl);
-}
-
 select:disabled {
   border-color: var(--calcite-ui-border-input);
-  --bg-opacity: 1;
+  --tw-bg-opacity: 1;
 }
 
 :host([disabled]) {
@@ -217,27 +196,19 @@ select:disabled {
 }
 
 .icon-container {
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  display: flex;
   align-items: center;
-  background-color: transparent;
-  border-width: 0;
-  border-right-width: 1px;
+  border-width: 0px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
-  border-left-width: 0;
+  background-color: transparent;
   color: var(--calcite-ui-text-2);
-  display: flex;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-
-.icon-container.calcite--rtl {
-  border-left-width: 1px;
-  border-right-width: 0;
-  left: 0;
-  right: unset;
+  inset-inline-end: 0px;
+  border-inline-width: 0px 1px;
 }
 
 .select:focus ~ .icon-container {

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

@@ -3,11 +3,10 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, Watch } from "@stencil/core";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { CSS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 import { createObserver } from "../../utils/observers";
 function isOption(optionOrGroup) {
   return optionOrGroup.tagName === "CALCITE-OPTION";
@@ -194,16 +193,15 @@ export class CalciteSelect {
   //  Render Methods
   //
   //--------------------------------------------------------------------------
-  renderChevron(dir) {
-    return (h("div", { class: { [CSS.iconContainer]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+  renderChevron() {
+    return (h("div", { class: CSS.iconContainer },
       h("calcite-icon", { class: CSS.icon, icon: "chevron-down", scale: "s" })));
   }
   render() {
-    const dir = getElementDir(this.el);
     return (h(Fragment, null,
-      h("select", { "aria-label": this.label, class: { [CSS.select]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef },
+      h("select", { "aria-label": this.label, class: CSS.select, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef },
         h("slot", null)),
-      this.renderChevron(dir),
+      this.renderChevron(),
       h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-select"; }

package/dist/collection/components/calcite-shell/calcite-shell.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,13 +77,12 @@
   color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -103,28 +96,27 @@
 *
 * @prop --calcite-shell-tip-spacing: the left/right positioning of the tip-manager when slotted within a shell
 */
-
 :host {
-  width: 100%;
-  height: 100%;
   position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   display: flex;
+  height: 100%;
+  width: 100%;
   flex-direction: column;
   overflow: hidden;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   --calcite-shell-tip-spacing: 26vw;
 }
 
 .main {
+  position: relative;
+  display: flex;
   height: 100%;
   width: 100%;
   flex: 1 1 auto;
-  display: flex;
   flex-direction: row;
-  position: relative;
   justify-content: space-between;
   overflow: hidden;
 }
@@ -135,29 +127,27 @@
 
 .content {
   display: flex;
+  height: 100%;
+  width: 100%;
   flex-direction: column;
   flex-wrap: nowrap;
-  height: 100%;
   overflow: auto;
-  width: 100%;
 }
 
-.content ::slotted(calcite-shell-center-row),
-.content ::slotted(calcite-panel),
-.content ::slotted(calcite-flow) {
-  align-self: stretch;
+.content ::slotted(calcite-shell-center-row), .content ::slotted(calcite-panel), .content ::slotted(calcite-flow) {
   flex: 1 1 auto;
+  align-self: stretch;
   max-height: unset;
 }
 
 .content--behind {
-  border-width: 0;
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   z-index: 0;
+  border-width: 0px;
   display: initial;
 }
 
@@ -166,24 +156,22 @@
 }
 
 ::slotted(.header .heading) {
-  font-weight: var(--calcite-font-weight-normal);
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
+  font-weight: var(--calcite-font-weight-normal);
 }
 
-::slotted(calcite-shell-panel),
-::slotted(calcite-shell-center-row) {
+::slotted(calcite-shell-panel), ::slotted(calcite-shell-center-row) {
   position: relative;
   z-index: 1;
 }
 
-::slotted(calcite-panel),
-::slotted(calcite-flow) {
+::slotted(calcite-panel), ::slotted(calcite-flow) {
   border-width: 1px;
-  border-color: var(--calcite-ui-border-3);
+  border-left-width: 0px;
+  border-right-width: 0px;
   border-style: solid;
-  border-left-width: 0;
-  border-right-width: 0;
+  border-color: var(--calcite-ui-border-3);
 }
 
 slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])) {
@@ -193,11 +181,27 @@ slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])) {
 }
 
 ::slotted(calcite-tip-manager) {
-  border-radius: 0.25rem;
-  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
   position: absolute;
-  animation: in-up var(--calcite-animation-timing) ease-in-out;
   box-sizing: border-box;
+}
+
+@keyframes in-up {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, 5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+
+::slotted(calcite-tip-manager) {
+  animation: in-up var(--calcite-internal-animation-timing-slow) ease-in-out;
+  border-radius: 0.25rem;
+  --tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+  --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   bottom: 0.5rem;
   left: var(--calcite-shell-tip-spacing);
   right: var(--calcite-shell-tip-spacing);

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

@@ -5,6 +5,7 @@
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)
  * @slot header - A slot for adding header content. This content will be positioned at the top of the shell.
@@ -27,12 +28,23 @@ export class CalciteShell {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
   renderHeader() {
     const hasHeader = !!getSlotted(this.el, SLOTS.header);
-    return hasHeader ? h("slot", { name: SLOTS.header }) : null;
+    return hasHeader ? h("slot", { key: "header", name: SLOTS.header }) : null;
   }
   renderContent() {
     const content = !!this.contentBehind
@@ -53,7 +65,7 @@ export class CalciteShell {
   }
   renderFooter() {
     const hasFooter = !!getSlotted(this.el, SLOTS.footer);
-    return hasFooter ? (h("div", { class: CSS.footer },
+    return hasFooter ? (h("div", { class: CSS.footer, key: "footer" },
       h("slot", { name: SLOTS.footer }))) : null;
   }
   renderMain() {