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

package/dist/collection/components/calcite-tab/calcite-tab.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;
 }
@@ -94,40 +84,40 @@
 
 :host {
   display: none;
-  width: 100%;
   height: 100%;
+  width: 100%;
 }
 
 :host([active]) {
   display: block;
-  width: 100%;
   height: 100%;
+  width: 100%;
   overflow: auto;
 }
 
 section {
+  display: none;
   height: 100%;
   width: 100%;
-  display: none;
 }
 
 :host([scale=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;
 }
 
 :host([scale=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;
 }
 
 :host([scale=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;
 }

package/dist/collection/components/calcite-tab-nav/calcite-tab-nav.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;
 }
@@ -108,9 +98,8 @@
 .tab-nav {
   display: flex;
   width: 100%;
-  overflow: auto;
   justify-content: flex-start;
-  -webkit-overflow-scrolling: touch;
+  overflow: auto;
 }
 
 :host([layout=center]) .tab-nav {
@@ -118,33 +107,34 @@
 }
 
 .tab-nav-active-indicator-container {
-  width: 100%;
-  right: 0;
-  left: 0;
-  bottom: 0;
   position: absolute;
-  overflow: hidden;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
   height: 0.125rem;
+  width: 100%;
+  overflow: hidden;
 }
 
 .tab-nav-active-indicator {
   position: absolute;
-  bottom: 0;
+  bottom: 0px;
   display: block;
+  height: 0.125rem;
+  background-color: var(--calcite-ui-brand);
   transition-property: all;
+  transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  background-color: var(--calcite-ui-brand);
-  height: 0.125rem;
 }
 
 :host([position=below]) .tab-nav-active-indicator {
   bottom: unset;
-  top: 0;
+  top: 0px;
 }
 
 :host([position=below]) .tab-nav-active-indicator-container {
   bottom: unset;
-  top: 0;
+  top: 0px;
 }
 
 :host([bordered]) .tab-nav-active-indicator-container {

package/dist/collection/components/calcite-tab-title/calcite-tab-title.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,26 +79,26 @@
 }
 
 :host {
+  margin-right: 1.25rem;
   display: block;
   flex: 0 1 auto;
   outline: 2px solid transparent;
   outline-offset: 2px;
-  margin-right: 1.25rem;
-  margin-inline-start: 0;
+  margin-inline-start: 0px;
   margin-inline-end: 1.25rem;
 }
 
 :host([layout=center]) {
-  text-align: center;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 0px;
+  margin-bottom: 0px;
   margin-left: 1.25rem;
   margin-right: 1.25rem;
+  text-align: center;
   flex-basis: 12rem;
 }
 
 :host([position=below]) a {
-  border-bottom-width: 0;
+  border-bottom-width: 0px;
   border-top-width: 2px;
   border-top-color: transparent;
   border-top-style: solid;
@@ -125,25 +115,22 @@
   outline-offset: -2px;
 }
 
-:host(:active) a,
-:host(:focus) a,
-:host(:hover) a {
-  text-decoration: none;
-  color: var(--calcite-ui-text-1);
+:host(:active) a, :host(:focus) a, :host(:hover) a {
   border-color: var(--calcite-ui-border-2);
+  color: var(--calcite-ui-text-1);
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 
 :host([active]) a {
-  color: var(--calcite-ui-text-1);
   border-color: transparent;
+  color: var(--calcite-ui-text-1);
 }
 
 :host([disabled]) {
   pointer-events: none;
 }
-
-:host([disabled]) span,
-:host([disabled]) a {
+:host([disabled]) span, :host([disabled]) a {
   pointer-events: none;
   opacity: 0.5;
 }
@@ -151,61 +138,55 @@
 :host([scale=s]) {
   margin-inline-end: 1rem;
 }
-
-:host([scale=s]) a,
-:host([scale=s]) span {
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
+:host([scale=s]) a, :host([scale=s]) span {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
 }
 
-:host([scale=m]) a,
-:host([scale=m]) span {
-  font-size: var(--calcite-font-size--1);
-  line-height: 1rem;
+:host([scale=m]) a, :host([scale=m]) span {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 :host([scale=l]) {
   margin-inline-end: 1.5rem;
 }
-
-:host([scale=l]) a,
-:host([scale=l]) span {
-  font-size: var(--calcite-font-size-0);
-  line-height: 1.25rem;
+:host([scale=l]) a, :host([scale=l]) span {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
+  font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
-a,
-span {
+a, span {
   box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
   -webkit-appearance: none;
           appearance: none;
-  cursor: pointer;
+  justify-content: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   border-bottom-width: 2px;
-  border-bottom-color: transparent;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  color: var(--calcite-ui-text-3);
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
+  color: var(--calcite-ui-text-3);
   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;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  border-bottom-color: transparent;
   border-bottom-style: solid;
 }
 
@@ -214,15 +195,14 @@ span {
 }
 
 .calcite-tab-title--icon {
-  display: inline-flex;
   position: relative;
-  margin: 0;
+  margin: 0px;
+  display: inline-flex;
   align-self: center;
 }
-
 .calcite-tab-title--icon svg {
   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;
 }
@@ -255,16 +235,14 @@ span {
   box-shadow: inset 0 2px 0 var(--calcite-ui-foreground-1);
 }
 
-:host([bordered]:hover) a,
-:host([bordered]:focus) a,
-:host([bordered]:active) a {
+:host([bordered]:hover) a, :host([bordered]:focus) a, :host([bordered]:active) a {
   position: relative;
 }
 
 :host([bordered]:hover) a {
   background-color: var(--calcite-button-transparent-hover);
   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;
 }
@@ -282,20 +260,17 @@ span {
   border-right: 1px solid var(--calcite-ui-border-1);
 }
 
-:host([bordered]) a,
-:host([bordered]) span {
+:host([bordered]) a, :host([bordered]) span {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
 
-:host([bordered][scale=s]) a,
-:host([bordered][scale=s]) span {
+:host([bordered][scale=s]) a, :host([bordered][scale=s]) span {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
-:host([bordered][scale=l]) a,
-:host([bordered][scale=l]) span {
+:host([bordered][scale=l]) a, :host([bordered][scale=l]) span {
   padding-left: 1rem;
   padding-right: 1rem;
 }

package/dist/collection/components/calcite-tabs/calcite-tabs.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;
 }
@@ -135,15 +125,15 @@
 section {
   display: flex;
   flex-grow: 1;
-  overflow: hidden;
   border-top-width: 1px;
   border-top-color: var(--calcite-ui-border-1);
+  overflow: hidden;
   border-top-style: solid;
 }
 
 :host([position=below]) section {
   flex-direction: column-reverse;
-  border-top-width: 0;
+  border-top-width: 0px;
   border-bottom-width: 1px;
   border-bottom-color: var(--calcite-ui-border-1);
 }