@esri/calcite-components 1.0.0-next.337 → 1.0.0-next.340

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

@@ -1,63 +1,54 @@
 /* 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-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
-  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
+  --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 {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-internal-animation-timing);
+  animation-duration: var(--calcite-animation-timing);
 }
 
 .calcite-animate__in {
@@ -79,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Base ":host" styles for the component */
   box-sizing: border-box;
@@ -87,7 +77,6 @@
   color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
 }
-
 :host * {
   box-sizing: border-box;
 }
@@ -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,18 +161,12 @@
 }
 
 ::slotted(calcite-panel) {
-  width: 100%;
   height: 100%;
+  width: 100%;
 }
 
-::slotted(calcite-action-bar) {
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-  border-inline-end-width: 1px;
-}
-
+::slotted(calcite-action-bar),
 ::slotted(calcite-action-bar[position=end]) {
-  border-style: solid;
+  border-inline-end: 1px solid;
   border-color: var(--calcite-ui-border-3);
-  border-inline-width: 0 1px;
 }

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

@@ -1,63 +1,54 @@
 /* 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-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
-  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
+  --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 {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-internal-animation-timing);
+  animation-duration: var(--calcite-animation-timing);
 }
 
 .calcite-animate__in {
@@ -79,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -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-internal-animation-timing);
+  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,14 +155,14 @@
 }
 
 .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);
@@ -186,8 +171,8 @@
 
 .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),