@esri/calcite-components 1.0.0-beta.70 → 1.0.0-beta.74

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-center-row/calcite-shell-center-row.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]) {
@@ -99,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;
 }
 
@@ -117,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;
-  animation: in-up var(--calcite-animation-timing) ease-in-out;
+  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]) {
@@ -152,33 +161,12 @@
 }
 
 ::slotted(calcite-panel) {
-  width: 100%;
   height: 100%;
+  width: 100%;
 }
 
-::slotted(calcite-action-bar) {
-  border-right-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-}
-
+::slotted(calcite-action-bar),
 ::slotted(calcite-action-bar[position=end]) {
-  border-left-width: 0;
-  border-right-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-}
-
-.calcite--rtl ::slotted(calcite-action-bar) {
-  border-right-width: 0;
-  border-left-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-}
-
-.calcite--rtl ::slotted(calcite-action-bar[position=end]) {
-  border-left-width: 0;
-  border-right-width: 1px;
-  border-style: solid;
+  border-inline-end: 1px solid;
   border-color: var(--calcite-ui-border-3);
 }

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

@@ -4,8 +4,7 @@
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getSlotted } from "../../utils/dom";
 /**
  * @slot - A slot for adding content to the shell panel.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
@@ -37,11 +36,10 @@ export class CalciteShellCenterRow {
   // --------------------------------------------------------------------------
   render() {
     const { el } = this;
-    const rtl = getElementDir(el) === "rtl";
-    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS_UTILITY.rtl]: rtl } },
+    const contentNode = (h("div", { class: CSS.content },
       h("slot", null)));
     const actionBar = getSlotted(el, SLOTS.actionBar);
-    const actionBarNode = actionBar ? (h("div", { class: { [CSS.actionBarContainer]: true, [CSS_UTILITY.rtl]: rtl } },
+    const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer },
       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,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,32 +79,71 @@
 }
 
 :host {
+  pointer-events: none;
   display: flex;
-  align-items: stretch;
   flex: 0 1 auto;
+  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;
 }
 
-::slotted(calcite-panel),
-::slotted(calcite-flow) {
-  flex: 1 1 auto;
+: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;
+  bottom: 0px;
+  top: 0px;
+  z-index: 10;
+  display: flex;
+  height: 100%;
+  width: 0.125rem;
+  background-color: transparent;
+  opacity: 0;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  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;
+}
+
+:host([position=start]) .separator {
+  inset-inline-end: -2px;
+}
+
+:host([position=end]) .separator {
+  inset-inline-start: -2px;
+}
+
+::slotted(calcite-panel), ::slotted(calcite-flow) {
   height: 100%;
   width: 100%;
+  flex: 1 1 auto;
   max-height: unset;
   max-width: unset;
 }
@@ -122,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;
 }
@@ -182,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;
 }
 
@@ -209,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),