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

package/dist/collection/components/calcite-slider/calcite-slider.css

@@ -1,65 +1,55 @@
 @charset "UTF-8";
-
 /* 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 {
@@ -81,7 +71,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -95,9 +84,7 @@
   --calcite-slider-handle-extension-height: 6.5px;
   --calcite-slider-container-font-size: var(--calcite-font-size--3);
 }
-
-.scale--s .handle__label,
-.scale--s .tick__label {
+.scale--s .handle__label, .scale--s .tick__label{
   line-height: .75rem;
 }
 
@@ -106,9 +93,7 @@
   --calcite-slider-handle-extension-height: 8px;
   --calcite-slider-container-font-size: var(--calcite-font-size--2);
 }
-
-.scale--m .handle__label,
-.scale--m .tick__label {
+.scale--m .handle__label, .scale--m .tick__label{
   line-height: 1rem;
 }
 
@@ -117,26 +102,23 @@
   --calcite-slider-handle-extension-height: 10.5px;
   --calcite-slider-container-font-size: var(--calcite-font-size--1);
 }
-
-.scale--l .handle__label,
-.scale--l .tick__label {
+.scale--l .handle__label, .scale--l .tick__label{
   line-height: 1rem;
 }
 
-.handle__label,
-.tick__label {
+.handle__label, .tick__label{
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-2);
   font-size: var(--calcite-slider-container-font-size);
 }
 
-:host {
+:host{
   display: block;
 }
 
-.container {
-  display: block;
+.container{
   position: relative;
+  display: block;
   padding: calc(var(--calcite-slider-handle-size) * 0.5);
   margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
   --calcite-slider-full-handle-height: calc(
@@ -144,11 +126,10 @@
   );
 }
 
-:host([disabled]) {
-  opacity: var(--calcite-ui-opacity-disabled);
+:host([disabled]){
   pointer-events: none;
+  opacity: var(--calcite-ui-opacity-disabled);
 }
-
 :host([disabled]) .track__range,
 :host([disabled]) .tick--active {
   background-color: var(--calcite-ui-text-3);
@@ -170,81 +151,70 @@
   --calcite-slider-thumb-y-offset: calc(var(--calcite-slider-full-handle-height) * -1);
 }
 
-.thumb-container {
-  max-width: 100%;
+.thumb-container{
   position: relative;
+  max-width: 100%;
 }
 
 .thumb {
   --calcite-slider-thumb-x-offset: calc(var(--calcite-slider-handle-size) * 0.5);
   position: absolute;
-  border-style: none;
-  background-color: transparent;
-  cursor: pointer;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  padding: 0;
-  margin: 0;
+  margin: 0px;
   display: flex;
+  cursor: pointer;
   flex-direction: column;
   align-items: center;
+  border-style: none;
+  background-color: transparent;
+  padding: 0px;
   font-family: inherit;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   transform: translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));
 }
-
-.thumb .handle__label.static, .thumb .handle__label.transformed {
-  opacity: 0;
+.thumb .handle__label.static, .thumb .handle__label.transformed{
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0px;
+  bottom: 0px;
+  opacity: 0;
 }
-
 .thumb .handle__label.hyphen::after {
   content: "—";
   display: inline-block;
   width: 1em;
 }
-
-.thumb .handle {
-  outline-offset: 0;
-  outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+.thumb .handle{
   box-sizing: border-box;
   border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
+  outline-offset: 0;
+  outline-color: transparent;
   height: var(--calcite-slider-handle-size);
   width: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
-  transition: border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
+  transition: border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;
 }
-
-.thumb .handle-extension {
+.thumb .handle-extension{
   width: 0.125rem;
   height: var(--calcite-slider-handle-extension-height);
   background-color: var(--calcite-ui-text-3);
 }
-
 .thumb:hover .handle {
   box-shadow: 0 0 0 3px var(--calcite-ui-brand) inset;
 }
-
-.thumb:hover .handle-extension {
+.thumb:hover .handle-extension{
   background-color: var(--calcite-ui-brand);
 }
-
-.thumb:focus .handle {
+.thumb:focus .handle{
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }
-
-.thumb:focus .handle-extension {
+.thumb:focus .handle-extension{
   background-color: var(--calcite-ui-brand);
 }
-
 .thumb.thumb--minValue {
   transform: translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));
 }
-
 .thumb.thumb--precise {
   --calcite-slider-thumb-y-offset: -2px;
 }
@@ -252,15 +222,12 @@
 :host([label-handles]) .thumb {
   --calcite-slider-thumb-x-offset: 50%;
 }
-
 :host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise) {
   --calcite-slider-thumb-y-offset: -23px;
 }
-
 :host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise) {
   --calcite-slider-thumb-y-offset: -30px;
 }
-
 :host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise) {
   --calcite-slider-thumb-y-offset: -32px;
 }
@@ -278,38 +245,33 @@
 :host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value {
   --calcite-slider-thumb-y-offset: -33px;
 }
-
 :host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value {
   --calcite-slider-thumb-y-offset: -44px;
 }
-
 :host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value {
   --calcite-slider-thumb-y-offset: -49px;
 }
 
-.thumb:focus .handle,
-.thumb--active .handle {
+.thumb:focus .handle, .thumb--active .handle{
   background-color: var(--calcite-ui-brand);
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
 }
 
-.thumb:hover.thumb--precise:after,
-.thumb:focus.thumb--precise:after,
-.thumb--active.thumb--precise:after {
+.thumb:hover.thumb--precise:after, .thumb:focus.thumb--precise:after, .thumb--active.thumb--precise:after{
   background-color: var(--calcite-ui-brand);
 }
 
-.track {
-  height: 0.125rem;
-  border-radius: 0;
+.track{
   position: relative;
+  height: 0.125rem;
+  border-radius: 0px;
   background-color: var(--calcite-ui-border-2);
-  transition: all 250ms ease-in;
+  transition: all var(--calcite-internal-animation-timing-medium) ease-in;
 }
 
-.track__range {
+.track__range{
   position: absolute;
-  top: 0;
+  top: 0px;
   height: 0.125rem;
   background-color: var(--calcite-ui-brand);
 }
@@ -317,8 +279,7 @@
 .container--range .track__range:hover {
   cursor: ew-resize;
 }
-
-.container--range .track__range:after {
+.container--range .track__range:after{
   position: absolute;
   width: 100%;
   content: "";
@@ -326,10 +287,10 @@
   height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
-.tick {
+.tick{
   position: absolute;
-  width: 0.125rem;
   height: 0.25rem;
+  width: 0.125rem;
   border-width: 1px;
   border-style: solid;
   background-color: var(--calcite-ui-border-input);
@@ -339,29 +300,26 @@
   margin-inline-start: calc(-1 * 0.125rem);
 }
 
-.tick--active {
+.tick--active{
   background-color: var(--calcite-ui-brand);
 }
 
-.tick__label {
-  display: flex;
-  justify-content: center;
+.tick__label{
   pointer-events: none;
   margin-top: 0.875rem;
+  display: flex;
+  justify-content: center;
 }
 
 .tick__label--min {
-  transition: opacity 150ms;
+  transition: opacity var(--calcite-animation-timing);
 }
 
 .tick__label--max {
-  transition: opacity 50ms;
+  transition: opacity var(--calcite-internal-animation-timing-fast);
 }
 
-:host([has-histogram][label-handles]) .tick__label--min,
-:host([has-histogram][label-handles]) .tick__label--max,
-:host([has-histogram][precise]) .tick__label--min,
-:host([has-histogram][precise]) .tick__label--max {
+:host([has-histogram][label-handles]) .tick__label--min, :host([has-histogram][label-handles]) .tick__label--max, :host([has-histogram][precise]) .tick__label--min, :host([has-histogram][precise]) .tick__label--max{
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-3);
 }
@@ -377,11 +335,9 @@
 :host([has-histogram]):host([precise][label-handles]) .container {
   padding-bottom: calc(var(--calcite-slider-full-handle-height) + 1em);
 }
-
 :host([has-histogram]):host([label-handles]:not([precise])) .container {
   padding-bottom: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
 }
-
 :host([has-histogram]):host([precise]:not([label-handles])) .container {
   padding-bottom: var(--calcite-slider-full-handle-height);
 }
@@ -389,19 +345,15 @@
 :host(:not([has-histogram])):host([precise]:not([label-handles])) .container {
   padding-top: var(--calcite-slider-full-handle-height);
 }
-
 :host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range {
   padding-bottom: var(--calcite-slider-full-handle-height);
 }
-
 :host(:not([has-histogram])):host([label-handles]:not([precise])) .container {
   padding-top: calc(var(--calcite-slider-full-handle-height) + 4px);
 }
-
 :host(:not([has-histogram])):host([label-handles][precise]) .container {
   padding-top: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
-
 :host(:not([has-histogram])):host([label-handles][precise]) .container--range {
   padding-bottom: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }

package/dist/collection/components/calcite-sortable-list/calcite-sortable-list.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;
 }

package/dist/collection/components/calcite-split-button/calcite-split-button.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;
 }
@@ -92,7 +82,6 @@
   display: flex;
   align-items: stretch;
 }
-
 :host .split-button__container > calcite-dropdown > calcite-button {
   height: 100%;
   vertical-align: top;
@@ -102,17 +91,14 @@
   --calcite-split-button-background: var(--calcite-ui-brand);
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
 }
-
 :host([appearance=solid]):host([color=red]) {
   --calcite-split-button-background: var(--calcite-ui-danger);
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
 }
-
 :host([appearance=solid]):host([color=neutral]) {
   --calcite-split-button-background: var(--calcite-ui-foreground-3);
   --calcite-split-button-divider: var(--calcite-ui-text-1);
 }
-
 :host([appearance=solid]):host([color=inverse]) {
   --calcite-split-button-background: var(--calcite-ui-inverse);
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
@@ -121,15 +107,12 @@
 :host([appearance=transparent]):host([color=blue]) {
   --calcite-split-button-divider: var(--calcite-ui-brand);
 }
-
 :host([appearance=transparent]):host([color=red]) {
   --calcite-split-button-divider: var(--calcite-ui-danger);
 }
-
 :host([appearance=transparent]):host([color=neutral]) {
   --calcite-split-button-divider: var(--calcite-ui-text-1);
 }
-
 :host([appearance=transparent]):host([color=inverse]) {
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
 }
@@ -147,17 +130,14 @@
 :host([appearance=outline]):host([color=blue]) {
   --calcite-split-button-divider: var(--calcite-ui-brand);
 }
-
 :host([appearance=clear]):host([color=red]),
 :host([appearance=outline]):host([color=red]) {
   --calcite-split-button-divider: var(--calcite-ui-danger);
 }
-
 :host([appearance=clear]):host([color=neutral]),
 :host([appearance=outline]):host([color=neutral]) {
   --calcite-split-button-divider: var(--calcite-ui-foreground-3);
 }
-
 :host([appearance=clear]):host([color=inverse]),
 :host([appearance=outline]):host([color=inverse]) {
   --calcite-split-button-divider: var(--calcite-ui-inverse);
@@ -176,21 +156,21 @@
 }
 
 .split-button__divider-container {
-  width: 1px;
   display: flex;
+  width: 1px;
   align-items: stretch;
   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;
   background-color: var(--calcite-split-button-background);
 }
 
 .split-button__divider {
-  width: 1px;
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
   display: inline-block;
+  width: 1px;
   background-color: var(--calcite-split-button-divider);
 }
 
@@ -199,7 +179,6 @@
   border-top: 1px solid var(--calcite-split-button-divider);
   border-bottom: 1px solid var(--calcite-split-button-divider);
 }
-
 :host([appearance=outline]):hover .split-button__divider-container,
 :host([appearance=clear]):hover .split-button__divider-container {
   background-color: var(--calcite-split-button-divider);
@@ -214,12 +193,10 @@
 :host([appearance=clear]:focus-within):host([color=blue]) {
   --calcite-split-button-divider: var(--calcite-ui-brand-press);
 }
-
 :host([appearance=outline]:focus-within):host([color=red]),
 :host([appearance=clear]:focus-within):host([color=red]) {
   --calcite-split-button-divider: var(--calcite-ui-danger-press);
 }
-
 :host([appearance=outline]:focus-within) .split-button__divider-container,
 :host([appearance=clear]:focus-within) .split-button__divider-container {
   background-color: var(--calcite-split-button-divider);
@@ -228,7 +205,6 @@
 :host([disabled]) .split-button__divider-container {
   opacity: var(--calcite-ui-opacity-disabled);
 }
-
 :host([disabled]) calcite-dropdown > calcite-button {
   pointer-events: none;
 }