@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

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

@@ -1,51 +1,42 @@
 /* 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: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Base ":host" styles for the component */
   box-sizing: border-box;
@@ -87,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]) {
@@ -107,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;
 }
@@ -139,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;
 }
 
@@ -170,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])) {
@@ -197,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-internal-animation-timing-slow) 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,33 +28,46 @@ 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 defaultSlotNode = h("slot", { key: "default-slot" });
+    const centerRowSlotNode = h("slot", { key: "center-row-slot", name: SLOTS.centerRow });
+    const contentContainerKey = "content-container";
     const content = !!this.contentBehind
       ? [
         h("div", { class: {
             [CSS.content]: true,
-            [CSS.contentBehind]: !!this.contentBehind
-          } },
-          h("slot", null)),
-        h("slot", { name: SLOTS.centerRow })
+            [CSS.contentBehind]: true
+          }, key: contentContainerKey }, defaultSlotNode),
+        centerRowSlotNode
       ]
       : [
-        h("div", { class: CSS.content },
-          h("slot", null),
-          h("slot", { name: SLOTS.centerRow }))
+        h("div", { class: CSS.content, key: contentContainerKey },
+          defaultSlotNode,
+          centerRowSlotNode)
       ];
     return content;
   }
   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() {

package/dist/collection/components/calcite-shell-center-row/calcite-shell-center-row.css

@@ -1,51 +1,42 @@
 /* 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: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Base ":host" styles for the component */
   box-sizing: border-box;
@@ -87,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,16 +92,16 @@
 :host {
   display: flex;
   flex: 1 1 auto;
-  overflow: hidden;
   background-color: transparent;
+  overflow: hidden;
 }
 
 .content {
+  margin: 0px;
   display: flex;
   height: 100%;
-  margin: 0;
-  overflow: hidden;
   width: 100%;
+  overflow: hidden;
   flex: 1 0 0;
 }
 
@@ -121,14 +110,30 @@
 }
 
 :host([detached]) {
-  border-width: 0;
-  border-radius: 0.25rem;
-  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
-  margin-top: 0.5rem;
-  margin-bottom: 1.5rem;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+@keyframes in-up {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, 5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+
+:host([detached]) {
   animation: in-up var(--calcite-internal-animation-timing-slow) ease-in-out;
+  border-radius: 0.25rem;
+  border-width: 0px;
+  --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);
 }
 
 :host([position=end]) {
@@ -156,8 +161,8 @@
 }
 
 ::slotted(calcite-panel) {
-  width: 100%;
   height: 100%;
+  width: 100%;
 }
 
 ::slotted(calcite-action-bar),

package/dist/collection/components/calcite-shell-center-row/calcite-shell-center-row.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 panel.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
@@ -31,6 +32,17 @@ export class CalciteShellCenterRow {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -39,7 +51,7 @@ export class CalciteShellCenterRow {
     const contentNode = (h("div", { class: CSS.content },
       h("slot", null)));
     const actionBar = getSlotted(el, SLOTS.actionBar);
-    const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer },
+    const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer, key: "action-bar" },
       h("slot", { name: SLOTS.actionBar }))) : null;
     const children = [actionBarNode, contentNode];
     if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.css

@@ -1,51 +1,42 @@
 /* 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: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,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]) {
@@ -89,58 +79,54 @@
 }
 
 :host {
+  pointer-events: none;
   display: flex;
-  align-items: stretch;
   flex: 0 1 auto;
-  pointer-events: none;
+  align-items: stretch;
   --calcite-shell-panel-detached-max-height: unset;
 }
 
 .container {
+  pointer-events: none;
   box-sizing: border-box;
   display: flex;
+  flex: 1 1 auto;
   align-items: stretch;
   background-color: transparent;
-  flex: 1 1 auto;
-  pointer-events: none;
-  color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
+  color: var(--calcite-ui-text-2);
 }
-
 .container * {
   box-sizing: border-box;
 }
 
-:host(:hover) .separator:not(:hover):not(:focus),
-:host(:focus-within) .separator:not(:hover):not(:focus) {
+:host(:hover) .separator:not(:hover):not(:focus), :host(:focus-within) .separator:not(:hover):not(:focus) {
   opacity: 1;
   background-color: var(--calcite-ui-border-3);
 }
 
 .separator {
+  pointer-events: auto;
   position: absolute;
-  background-color: transparent;
-  bottom: 0;
+  bottom: 0px;
+  top: 0px;
+  z-index: 10;
   display: flex;
   height: 100%;
+  width: 0.125rem;
+  background-color: transparent;
   opacity: 0;
-  pointer-events: auto;
-  top: 0;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  width: 0.125rem;
-  z-index: 10;
   cursor: col-resize;
   outline: none;
 }
-
 .separator:hover {
   opacity: 1;
   background-color: var(--calcite-ui-border-2);
 }
-
 .separator:focus {
   background-color: var(--calcite-ui-brand);
   opacity: 1;
@@ -154,11 +140,10 @@
   inset-inline-start: -2px;
 }
 
-::slotted(calcite-panel),
-::slotted(calcite-flow) {
-  flex: 1 1 auto;
+::slotted(calcite-panel), ::slotted(calcite-flow) {
   height: 100%;
   width: 100%;
+  flex: 1 1 auto;
   max-height: unset;
   max-width: unset;
 }
@@ -170,24 +155,24 @@
 }
 
 .content {
-  align-items: stretch;
-  align-self: stretch;
-  background-color: var(--calcite-ui-background);
-  display: flex;
-  padding: 0;
   pointer-events: auto;
+  display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
+  align-items: stretch;
+  align-self: stretch;
+  background-color: var(--calcite-ui-background);
+  padding: 0px;
   width: var(--calcite-shell-panel-width);
   max-width: var(--calcite-shell-panel-max-width);
   min-width: var(--calcite-shell-panel-min-width);
-  transition: max-height 150ms ease-in-out, max-width 150ms ease-in-out;
+  transition: max-height var(--calcite-animation-timing), max-width var(--calcite-animation-timing);
 }
 
 .content__header {
   display: flex;
-  flex-direction: column;
   flex: 0 1 auto;
+  flex-direction: column;
   flex-wrap: nowrap;
   align-items: stretch;
 }
@@ -230,26 +215,24 @@
 }
 
 .content--detached {
-  border-radius: 0.25rem;
-  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
-  height: auto;
-  overflow: hidden;
-  margin-top: 0.5rem;
-  margin-bottom: auto;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
+  margin-top: 0.5rem;
+  margin-bottom: auto;
+  height: auto;
+  border-radius: 0.25rem;
+  --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);
+  overflow: hidden;
   max-height: var(--calcite-shell-panel-detached-max-height);
 }
-
 .content--detached ::slotted(calcite-panel),
 .content--detached ::slotted(calcite-flow) {
   max-height: unset;
 }
 
-:host([position=start]) .content--detached ::slotted(calcite-panel),
-:host([position=start]) .content--detached ::slotted(calcite-flow),
-:host([position=end]) .content--detached ::slotted(calcite-panel),
-:host([position=end]) .content--detached ::slotted(calcite-flow) {
+:host([position=start]) .content--detached ::slotted(calcite-panel), :host([position=start]) .content--detached ::slotted(calcite-flow), :host([position=end]) .content--detached ::slotted(calcite-panel), :host([position=end]) .content--detached ::slotted(calcite-flow) {
   border-style: none;
 }
 
@@ -257,12 +240,10 @@
   display: none;
 }
 
-slot[name=action-bar]::slotted(calcite-action-bar),
-.content ::slotted(calcite-flow),
-.content ::slotted(calcite-panel) {
+slot[name=action-bar]::slotted(calcite-action-bar), .content ::slotted(calcite-flow), .content ::slotted(calcite-panel) {
   border-width: 1px;
-  border-color: var(--calcite-ui-border-3);
   border-style: solid;
+  border-color: var(--calcite-ui-border-3);
 }
 
 :host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar),