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

package/dist/collection/components/calcite-dropdown-item/calcite-dropdown-item.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,28 +79,28 @@
 }
 
 .container--s {
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
   padding-inline-end: 0.5rem;
   padding-inline-start: 1.5rem;
 }
 
 .container--m {
-  font-size: var(--calcite-font-size--1);
-  line-height: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
   padding-inline-end: 0.75rem;
   padding-inline-start: 2rem;
 }
 
 .container--l {
-  font-size: var(--calcite-font-size-0);
-  line-height: 1.25rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
+  font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
   padding-inline-end: 1rem;
   padding-inline-start: 2.5rem;
 }
@@ -118,34 +108,44 @@
 .container--s.container--none-selection {
   padding-inline-start: 0.25rem;
 }
+.container--s.container--none-selection .dropdown-link {
+  padding-inline-start: 0px;
+}
 
 .container--m.container--none-selection {
   padding-inline-start: 0.5rem;
 }
+.container--m.container--none-selection .dropdown-link {
+  padding-inline-start: 0px;
+}
 
 .container--l.container--none-selection {
   padding-inline-start: 0.75rem;
 }
+.container--l.container--none-selection .dropdown-link {
+  padding-inline-start: 0px;
+}
 
 :host {
+  position: relative;
   display: flex;
   flex-grow: 1;
   align-items: center;
-  position: relative;
 }
 
 .container {
+  position: relative;
   display: flex;
   flex-grow: 1;
+  cursor: pointer;
   align-items: center;
   color: var(--calcite-ui-text-3);
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  cursor: pointer;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   outline: 2px solid transparent;
   outline-offset: 2px;
-  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .dropdown-item-content {
@@ -154,8 +154,7 @@
   padding-inline-start: 0.25rem;
 }
 
-:host,
-.container--link a {
+:host, .container--link a {
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
@@ -167,96 +166,89 @@
 }
 
 .container--link {
-  padding: 0;
+  padding: 0px;
 }
-
 .container--link a {
+  position: relative;
   display: flex;
   flex-grow: 1;
+  cursor: pointer;
   align-items: center;
   color: var(--calcite-ui-text-3);
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  cursor: pointer;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   outline: 2px solid transparent;
   outline-offset: 2px;
-  position: relative;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .container--s .dropdown-link {
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
   padding-inline-end: 0.5rem;
   padding-inline-start: 1.5rem;
 }
 
 .container--m .dropdown-link {
-  font-size: var(--calcite-font-size--1);
-  line-height: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
   padding-inline-end: 0.75rem;
   padding-inline-start: 2rem;
 }
 
 .container--l .dropdown-link {
-  font-size: var(--calcite-font-size-0);
-  line-height: 1.25rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
+  font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
   padding-inline-end: 1rem;
   padding-inline-start: 2.5rem;
 }
 
-:host(:hover) .container,
-:host(:active) .container {
+:host(:hover) .container, :host(:active) .container {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 
-:host(:hover) .container--link .dropdown-link,
-:host(:active) .container--link .dropdown-link {
+:host(:hover) .container--link .dropdown-link, :host(:active) .container--link .dropdown-link {
   color: var(--calcite-ui-text-1);
 }
 
 :host(:focus) .container {
   color: var(--calcite-ui-text-1);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 
 :host(:active) .container {
   background-color: var(--calcite-ui-foreground-3);
 }
 
-:host(:hover) .container:before,
-:host(:active) .container:before,
-:host(:focus) .container:before {
+:host(:hover) .container:before, :host(:active) .container:before, :host(:focus) .container:before {
   opacity: 1;
 }
 
-:host([active]) .container:not(.container--none-selection),
-:host([active]) .container--link .dropdown-link {
-  color: var(--calcite-ui-text-1);
+:host([active]) .container:not(.container--none-selection), :host([active]) .container--link .dropdown-link {
   font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-1);
 }
-
-:host([active]) .container:not(.container--none-selection):before,
-:host([active]) .container--link .dropdown-link:before {
+:host([active]) .container:not(.container--none-selection):before, :host([active]) .container--link .dropdown-link:before {
   opacity: 1;
   color: var(--calcite-ui-brand);
 }
-
 :host([active]) .container:not(.container--none-selection) calcite-icon,
 :host([active]) .container--link .dropdown-link calcite-icon {
   color: var(--calcite-ui-brand);
 }
 
-.container--multi-selection:before,
-.container--none-selection:before {
+.container--multi-selection:before, .container--none-selection:before {
   display: none;
 }
 
@@ -306,7 +298,6 @@
   margin-inline-end: 0.5rem;
   margin-inline-start: 0.25rem;
 }
-
 .container--s .dropdown-item-icon-end {
   margin-inline-start: 0.5rem;
 }
@@ -315,7 +306,6 @@
   margin-inline-end: 0.75rem;
   margin-inline-start: 0.25rem;
 }
-
 .container--m .dropdown-item-icon-end {
   margin-inline-start: 0.75rem;
 }
@@ -324,7 +314,6 @@
   margin-inline-end: 1rem;
   margin-inline-start: 0.25rem;
 }
-
 .container--l .dropdown-item-icon-end {
   margin-inline-start: 1rem;
 }

package/dist/collection/components/calcite-fab/calcite-fab.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]) {
@@ -94,13 +84,17 @@
 }
 
 calcite-button {
-  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+  --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);
 }
-
 calcite-button:hover {
-  box-shadow: 0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08);
+  --tw-shadow: 0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08);
+  --tw-shadow-colored: 0 12px 32px -2px var(--tw-shadow-color), 0 4px 20px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-
 calcite-button:active {
-  box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
+  --tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
+  --tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -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);
 }

package/dist/collection/components/calcite-filter/calcite-filter.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]) {
@@ -112,33 +101,32 @@
 }
 
 label {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
   position: relative;
-  width: 100%;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  overflow: hidden;
 }
 
 input[type=text] {
-  background-color: transparent;
-  border-style: none;
-  font-family: inherit;
-  color: var(--calcite-ui-text-1);
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
   margin-bottom: 0.25rem;
   width: 100%;
+  border-style: none;
+  background-color: transparent;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   padding-right: 0.25rem;
   padding-left: 1.5rem;
-  transition: padding 150ms ease-in-out, box-shadow 150ms ease-in-out;
+  font-family: inherit;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
+  color: var(--calcite-ui-text-1);
+  transition: padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);
 }
-
 input[type=text]::-ms-clear {
   display: none;
 }
@@ -148,11 +136,11 @@ calcite-input {
 }
 
 .search-icon {
-  display: flex;
   position: absolute;
+  display: flex;
   color: var(--calcite-ui-text-2);
   inset-inline-start: 0;
-  transition: left 150ms ease-in-out, right 150ms ease-in-out, opacity 150ms ease-in-out;
+  transition: left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing);
 }
 
 input[type=text]:focus {
@@ -161,21 +149,19 @@ input[type=text]:focus {
   outline-offset: 2px;
   padding-inline: 0.25rem;
 }
-
 input[type=text]:focus ~ .search-icon {
   inset-inline-start: calc(1rem * -1);
   opacity: 0;
 }
 
 .clear-button {
-  color: var(--calcite-ui-text-2);
-  background-color: transparent;
-  border-width: 0;
-  cursor: pointer;
   display: flex;
+  cursor: pointer;
   align-items: center;
+  border-width: 0px;
+  background-color: transparent;
+  color: var(--calcite-ui-text-2);
 }
-
 .clear-button:hover, .clear-button:focus {
   color: var(--calcite-ui-text-1);
 }

package/dist/collection/components/calcite-flow/calcite-flow.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]) {
@@ -101,64 +90,63 @@
 }
 
 :host {
+  position: relative;
   display: flex;
+  width: 100%;
   flex: 1 1 auto;
   align-items: stretch;
   background-color: transparent;
-  width: 100%;
   overflow: hidden;
-  position: relative;
 }
-
 :host .frame {
+  position: relative;
+  margin: 0px;
   display: flex;
-  flex: 1 1 auto;
-  align-items: stretch;
   width: 100%;
-  padding: 0;
-  margin: 0;
+  flex: 1 1 auto;
   flex-direction: column;
-  position: relative;
+  align-items: stretch;
+  padding: 0px;
 }
-
 :host ::slotted(calcite-panel) {
   height: 100%;
 }
-
 :host ::slotted(.calcite-match-height:last-child) {
   display: flex;
   flex: 1 1 auto;
   overflow: hidden;
 }
-
 :host .frame--advancing {
-  animation: calcite-frame-advance 150ms ease-in-out;
+  animation: calcite-frame-advance var(--calcite-animation-timing);
 }
-
 :host .frame--retreating {
-  animation: calcite-frame-retreat 150ms ease-in-out;
+  animation: calcite-frame-retreat var(--calcite-animation-timing);
 }
-
 @keyframes calcite-frame-advance {
   0% {
-    --bg-opacity: 0.5;
+    --tw-bg-opacity: 0.5;
+  }
+  0% {
     transform: translate3d(50px, 0, 0);
   }
-
   100% {
-    --bg-opacity: 1;
+    --tw-bg-opacity: 1;
+  }
+  100% {
     transform: translate3d(0, 0, 0);
   }
 }
-
 @keyframes calcite-frame-retreat {
   0% {
-    --bg-opacity: 0.5;
+    --tw-bg-opacity: 0.5;
+  }
+  0% {
     transform: translate3d(-50px, 0, 0);
   }
-
   100% {
-    --bg-opacity: 1;
+    --tw-bg-opacity: 1;
+  }
+  100% {
     transform: translate3d(0, 0, 0);
   }
 }

package/dist/collection/components/calcite-flow/calcite-flow.js

@@ -130,7 +130,7 @@ export class CalciteFlow {
             "location": "global"
           }
         },
-        "return": "Promise<any>"
+        "return": "Promise<HTMLCalcitePanelElement>"
       },
       "docs": {
         "text": "Removes the currently active `calcite-panel`.",