@esri/solutions-components 0.6.1 → 0.6.2

package/dist/node_modules/@esri/calcite-components/dist/collection/components/option/option.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/node_modules/@esri/calcite-components/dist/collection/components/option-group/option-group.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/node_modules/@esri/calcite-components/dist/collection/components/pagination/pagination.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {
@@ -133,8 +161,18 @@
   outline-color: transparent;
 }
 :host button:focus {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: -2px;
+  outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 
 .previous,

package/dist/node_modules/@esri/calcite-components/dist/collection/components/panel/panel.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -89,7 +117,7 @@
 
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {
@@ -97,7 +125,6 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           -moz-user-select: none;
@@ -105,6 +132,18 @@
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
+*/
 :host {
   position: relative;
   display: flex;
@@ -113,6 +152,7 @@
   flex: 1 1 auto;
   overflow: hidden;
   --calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
+  --calcite-panel-footer-padding: 0.5rem;
 }
 
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
@@ -161,9 +201,7 @@
 .header {
   -webkit-border-after: 1px solid;
           border-block-end: 1px solid;
-  position: sticky;
-  inset-block-start: 0px;
-  z-index: 400;
+  z-index: var(--calcite-app-z-index-header);
   inline-size: 100%;
   align-items: stretch;
   justify-content: flex-start;
@@ -172,6 +210,18 @@
   flex: 0 0 auto;
 }
 
+.action-bar-container {
+  -webkit-border-after: 1px solid;
+          border-block-end: 1px solid;
+  z-index: var(--calcite-app-z-index-header);
+  inline-size: 100%;
+  border-block-end-color: var(--calcite-ui-border-3);
+}
+
+.action-bar-container ::slotted(calcite-action-bar) {
+  inline-size: 100%;
+}
+
 .header-content {
   display: flex;
   flex-direction: column;
@@ -243,22 +293,19 @@
 .footer {
   -webkit-border-before: 1px solid;
           border-block-start: 1px solid;
-  position: sticky;
-  inset-block-end: 0px;
   display: flex;
   inline-size: 100%;
   justify-content: space-evenly;
   background-color: var(--calcite-ui-foreground-1);
   border-block-start-color: var(--calcite-ui-border-3);
   flex: 0 0 auto;
-  min-block-size: 3rem;
-  padding: 0.5rem;
+  padding: var(--calcite-panel-footer-padding);
 }
 
 .fab-container {
   position: sticky;
   inset-block-end: 0px;
-  z-index: 300;
+  z-index: var(--calcite-app-z-index-sticky);
   margin-block: 0px;
   margin-inline: auto;
   display: block;

package/dist/node_modules/@esri/calcite-components/dist/collection/components/pick-list/pick-list.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {
@@ -86,7 +114,6 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           -moz-user-select: none;
@@ -94,6 +121,11 @@
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   position: relative;
   box-sizing: border-box;
@@ -131,7 +163,7 @@
 :host([filter-enabled]) header.sticky-pos {
   position: sticky;
   inset-block-start: 0px;
-  z-index: 1;
+  z-index: var(--calcite-app-z-index);
 }
 
 calcite-filter {

package/dist/node_modules/@esri/calcite-components/dist/collection/components/pick-list-group/pick-list-group.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/node_modules/@esri/calcite-components/dist/collection/components/pick-list-item/pick-list-item.css

@@ -28,6 +28,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -64,6 +84,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -79,7 +107,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {
@@ -87,7 +115,6 @@
 }
 
 :host([disabled]){
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           -moz-user-select: none;
@@ -95,6 +122,11 @@
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*){
+  pointer-events: none;
+}
+
 :host{
   margin: 0px;
   -webkit-margin-after: 1px;
@@ -125,8 +157,18 @@
   outline-color: transparent;
 }
 .label:focus{
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: -2px;
+  outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 .label:hover{
   background-color: var(--calcite-ui-foreground-2);

package/dist/node_modules/@esri/calcite-components/dist/collection/components/popover/popover.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {
@@ -93,7 +121,7 @@
 * @prop --calcite-popover-z-index: Sets the z-index value for the component.
 */
 :host {
-  --calcite-floating-ui-z-index: var(--calcite-popover-z-index, 900);
+  --calcite-floating-ui-z-index: var(--calcite-popover-z-index, var(--calcite-app-z-index-popup));
   display: block;
   position: absolute;
   z-index: var(--calcite-floating-ui-z-index);
@@ -105,7 +133,7 @@
   transition-property: transform, visibility, opacity;
   opacity: 0;
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
-  z-index: 1;
+  z-index: var(--calcite-app-z-index);
   border-radius: 0.25rem;
 }
 
@@ -135,43 +163,15 @@
   pointer-events: none;
 }
 
-.arrow,
-.arrow::before {
+.calcite-floating-ui-arrow {
+  pointer-events: none;
   position: absolute;
-  inline-size: 8px;
-  block-size: 8px;
-  z-index: -1;
-}
-
-.arrow::before {
-  content: "";
-  --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);
-  transform: rotate(45deg);
-  background: var(--calcite-ui-foreground-1);
-}
-
-:host([data-placement^=top]) .arrow {
-  inset-block-end: -4px;
+  z-index: calc(var(--calcite-app-z-index) * -1);
+  fill: var(--calcite-ui-foreground-1);
 }
 
-:host([data-placement^=bottom]) .arrow {
-  inset-block-start: -4px;
-}
-
-:host([data-placement^=right]) .arrow,
-:host([data-placement^=left]) .arrow {
-  direction: ltr;
-  text-align: start;
-}
-
-:host([data-placement^=left]) .arrow {
-  inset-inline-end: -4px;
-}
-
-:host([data-placement^=right]) .arrow {
-  inset-inline-start: -4px;
+.calcite-floating-ui-arrow__stroke {
+  stroke: var(--calcite-ui-border-3);
 }
 
 :host([scale=s]) .heading {
@@ -223,7 +223,6 @@
   border-width: 0px;
   border-block-end-width: 1px;
   border-style: solid;
-  background-color: var(--calcite-ui-foreground-1);
   border-block-end-color: var(--calcite-ui-border-3);
 }
 
@@ -246,7 +245,6 @@
   flex-direction: row;
   flex-wrap: nowrap;
   border-radius: 0.25rem;
-  background-color: var(--calcite-ui-foreground-1);
   color: var(--calcite-ui-text-1);
 }
 .container.has-header {