@esri/solutions-components 0.6.1 → 0.6.2

package/dist/node_modules/@esri/calcite-components/dist/collection/components/tab-title/tab-title.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 {
   display: block;
   flex: 0 1 auto;
@@ -105,14 +137,46 @@
           margin-inline-end: 1.25rem;
 }
 
-:host([layout=center]) {
+:host([layout=center][scale=s]),
+:host([layout=center][scale=m]),
+:host([layout=center][scale=l]) {
   margin-block: 0px;
-  margin-inline: 1.25rem;
   text-align: center;
+  -webkit-margin-end: 0px;
+          margin-inline-end: 0px;
   flex-basis: 12rem;
+}
+:host([layout=center][scale=s]) .content,
+:host([layout=center][scale=m]) .content,
+:host([layout=center][scale=l]) .content {
   margin: auto;
 }
 
+:host([layout=center][closable]) .content {
+  -webkit-padding-start: 32px;
+          padding-inline-start: 32px;
+}
+
+:host([layout=center][bordered][closable][scale=s]) .content {
+  -webkit-padding-start: 36px;
+          padding-inline-start: 36px;
+}
+
+:host([layout=center][bordered][closable][scale=m]) .content {
+  -webkit-padding-start: 40px;
+          padding-inline-start: 40px;
+}
+
+:host([layout=center][closable][scale=l]) .content {
+  -webkit-padding-start: 40px;
+          padding-inline-start: 40px;
+}
+
+:host([layout=center][closable][bordered][scale=l]) .content {
+  -webkit-padding-start: 52px;
+          padding-inline-start: 52px;
+}
+
 :host([position=bottom]) .container {
   border-block-end-width: 0px;
   border-block-start-width: 2px;
@@ -120,13 +184,30 @@
   border-block-start-style: solid;
 }
 
-:host .container {
+:host([closed]) {
+  display: none;
+}
+
+.container {
   outline-color: transparent;
 }
 
 :host(:focus) .container {
-  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
+              )
+            )
+          );
+}
+:host(:focus) .container:focus-within {
+  outline-color: transparent;
 }
 
 :host(:active) a,
@@ -157,13 +238,13 @@
   -webkit-margin-end: 1rem;
           margin-inline-end: 1rem;
 }
-:host([scale=s]) .container {
+:host([scale=s]) .content {
   padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
-:host([scale=m]) .container {
+:host([scale=m]) .content {
   padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
@@ -173,7 +254,7 @@
   -webkit-margin-end: 1.5rem;
           margin-inline-end: 1.5rem;
 }
-:host([scale=l]) .container {
+:host([scale=l]) .content {
   padding-block: 0.625rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -185,13 +266,8 @@
   block-size: 100%;
   inline-size: 100%;
   cursor: pointer;
-  -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
-  justify-content: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  align-content: center;
+  justify-content: space-between;
   border-block-end-width: 2px;
   padding-inline: 0px;
   font-size: var(--calcite-font-size--1);
@@ -202,6 +278,12 @@
   border-block-end-style: solid;
 }
 
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .calcite-tab-title--icon {
   position: relative;
   margin: 0px;
@@ -212,20 +294,67 @@
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
-.container--has-text {
+.content--has-text {
   padding: 0.25rem;
 }
 
-.container--has-text .calcite-tab-title--icon.icon-start {
+.content--has-text .calcite-tab-title--icon.icon-start {
   -webkit-margin-end: 0.5rem;
           margin-inline-end: 0.5rem;
 }
 
-.container--has-text .calcite-tab-title--icon.icon-end {
+.content--has-text .calcite-tab-title--icon.icon-end {
   -webkit-margin-start: 0.5rem;
           margin-inline-start: 0.5rem;
 }
 
+.close-button {
+  display: flex;
+  cursor: pointer;
+  -webkit-appearance: none;
+          -moz-appearance: none;
+       appearance: none;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  border-style: none;
+  background-color: var(--calcite-ui-foreground-1);
+  color: var(--calcite-ui-text-3);
+  outline-color: transparent;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
+  block-size: calc(100% - 2px);
+  background-color: var(--calcite-button-transparent-1);
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+}
+.close-button:focus {
+  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
+              )
+            )
+          );
+  outline-offset: -1px;
+}
+.close-button:focus, .close-button:hover {
+  color: var(--calcite-ui-text-1);
+  background-color: var(--calcite-ui-foreground-2);
+}
+.close-button:active {
+  color: var(--calcite-ui-text-1);
+  background-color: var(--calcite-ui-foreground-3);
+}
+.close-button calcite-icon {
+  color: inherit;
+}
+
 :host([icon-start][icon-end]) .calcite-tab-title--icon:first-child {
   -webkit-margin-end: 0.5rem;
           margin-inline-end: 0.5rem;
@@ -254,14 +383,25 @@
   background-color: var(--calcite-button-transparent-hover);
 }
 
+:host([closable]) .container,
 :host([bordered]) .container {
-  border-block-end-style: unset;
   -webkit-border-start: 1px solid transparent;
           border-inline-start: 1px solid transparent;
   -webkit-border-end: 1px solid transparent;
           border-inline-end: 1px solid transparent;
 }
+:host([closable]) .container .close-button,
+:host([bordered]) .container .close-button {
+  margin-inline: 0;
+}
 
+:host([closable]) .content {
+  box-sizing: border-box;
+  block-size: 100%;
+  border-block-end-color: transparent;
+}
+
+:host([closable][position=bottom]) .container,
 :host([bordered][position=bottom]) .container {
   border-block-start-style: unset;
 }
@@ -271,43 +411,35 @@
   border-inline-end-color: var(--calcite-ui-border-1);
 }
 
-:host([bordered]) .container {
+:host([bordered]) .content {
   padding-inline: 0.75rem;
 }
 
-:host([bordered][scale=s]) .container {
+:host([bordered][scale=s]) .content {
   padding-inline: 0.5rem;
 }
 
-:host([bordered][scale=l]) .container {
+:host([bordered][scale=l]) .content {
   padding-inline: 1rem;
 }
-:host([bordered][scale=l]) .icon-present {
-  padding-block: 11px;
-}
 
 @media (forced-colors: active) {
   :host {
     outline-width: 0;
     outline-offset: 0;
   }
-
   :host(:focus) .container {
     outline-color: highlight;
   }
-
   :host([bordered]) .container {
     border-block-end-style: solid;
   }
-
   :host([bordered][position=bottom]) .container {
     border-block-start-style: solid;
   }
-
   :host([bordered][selected]) .container {
     border-block-end-style: none;
   }
-
   :host([bordered][position=bottom][selected]) .container {
     border-block-start-style: none;
   }

package/dist/node_modules/@esri/calcite-components/dist/collection/components/tabs/tabs.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]) {
@@ -151,7 +179,6 @@ section {
     border-block-start-width: 0px;
     border-block-end-width: 1px;
   }
-
   :host([position=bottom][bordered]) section {
     border-block-start-width: 1px;
     border-block-end-width: 0px;

package/dist/node_modules/@esri/calcite-components/dist/collection/components/text-area/text-area.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;
   display: inline-block;
@@ -122,8 +154,18 @@ textarea {
   }
 }
 textarea: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
+              )
+            )
+          );
 }
 textarea.text-area--invalid {
   border-width: 1px;
@@ -133,7 +175,17 @@ textarea.text-area--invalid {
 }
 textarea.text-area--invalid:focus {
   outline: 2px solid var(--calcite-ui-danger);
-  outline-offset: -2px;
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 textarea.footer--slotted {
   min-inline-size: 18rem;

package/dist/node_modules/@esri/calcite-components/dist/collection/components/tile/tile.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 {
   box-sizing: border-box;
   display: inline-block;

package/dist/node_modules/@esri/calcite-components/dist/collection/components/tile-select/tile-select.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 {
   display: block;
 }
@@ -111,7 +143,7 @@
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 :host .container.checked {
-  z-index: 1;
+  z-index: var(--calcite-app-z-index);
   box-shadow: 0 0 0 1px var(--calcite-ui-brand);
 }
 :host .container.heading-only {
@@ -133,7 +165,18 @@
   outline-color: transparent;
 }
 :host .container.focused:not(.disabled):not(.input-enabled) {
-  outline: 2px solid var(--calcite-ui-brand);
+  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
+              )
+            )
+          );
   outline-offset: -4px;
   box-shadow: 0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1);
 }