@esri/calcite-components 1.0.0-beta.70 → 1.0.0-beta.74

package/dist/collection/components/calcite-time-picker/resources.js

@@ -3,26 +3,32 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 export const CSS = {
+  button: "button",
   buttonBottomLeft: "button--bottom-left",
   buttonBottomRight: "button--bottom-right",
-  button: "button",
-  delimiter: "delimiter",
-  hour: "hour",
   buttonHourDown: "button--hour-down",
   buttonHourUp: "button--hour-up",
-  input: "input",
-  meridiem: "meridiem",
   buttonMeridiemDown: "button--meridiem-down",
   buttonMeridiemUp: "button--meridiem-up",
-  minute: "minute",
   buttonMinuteDown: "button--minute-down",
   buttonMinuteUp: "button--minute-up",
-  second: "second",
   buttonSecondDown: "button--second-down",
   buttonSecondUp: "button--second-up",
-  timePicker: "time-picker",
   buttonTopLeft: "button--top-left",
-  buttonTopRight: "button--top-right"
+  buttonTopRight: "button--top-right",
+  column: "column",
+  delimiter: "delimiter",
+  hour: "hour",
+  input: "input",
+  meridiem: "meridiem",
+  minute: "minute",
+  second: "second",
+  showMeridiem: "show-meridiem",
+  showSecond: "show-second",
+  "scale-s": "scale-s",
+  "scale-m": "scale-m",
+  "scale-l": "scale-l",
+  timePicker: "time-picker"
 };
 export const TEXT = {
   hour: "Hour",

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

@@ -1,53 +1,48 @@
 /* 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: 300ms;
+  --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 {
@@ -75,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]) {
@@ -86,54 +80,51 @@
 
 :host {
   position: relative;
+  margin: 1rem;
+  box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  margin: 1rem;
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-2);
-  box-sizing: border-box;
   background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
+  color: var(--calcite-ui-text-2);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 .container {
-  padding: 1rem;
   width: 100%;
+  padding: 1rem;
 }
 
-:host([dismissed]),
-:host([dismissed]) .container {
+:host([dismissed]), :host([dismissed]) .container {
   display: none;
 }
 
 :host([selected]) .container {
+  margin: 0px;
   border-style: none;
-  margin: 0;
-  padding: 0;
+  padding: 0px;
 }
 
 /* Shared styles for header elements */
-
 .header {
-  margin: 0;
+  margin: 0px;
   display: flex;
-  align-items: center;
   align-content: space-between;
+  align-items: center;
+  fill: var(--calcite-ui-text-2);
   color: var(--calcite-ui-text-2);
-  fill: ;
 }
 
 .heading {
+  margin: 0px;
+  padding: 0px;
   font-weight: var(--calcite-font-weight-medium);
-  margin: 0;
-  padding: 0;
 }
 
 .header .heading {
@@ -156,8 +147,7 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading,
-h5.heading {
+h4.heading, h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -167,8 +157,8 @@ h5.heading {
 }
 
 .header .heading {
+  padding: 0px;
   color: var(--calcite-ui-text-1);
-  padding: 0;
 }
 
 .container[hidden] {
@@ -180,21 +170,20 @@ h5.heading {
 }
 
 .info {
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
   padding-left: 1rem;
   padding-right: 1rem;
   width: 70%;
 }
-
 .info:only-child {
   width: 100%;
-  padding-left: 0;
-  padding-right: 0;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 
 ::slotted(p) {
-  margin-top: 0;
+  margin-top: 0px;
 }
 
 ::slotted(a) {
@@ -212,7 +201,6 @@ h5.heading {
 .image-frame {
   width: 25%;
 }
-
 .image-frame img {
   max-width: 100%;
 }

package/dist/collection/components/calcite-tip-group/calcite-tip-group.css

@@ -1,53 +1,48 @@
 /* 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: 300ms;
+  --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 {
@@ -75,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]) {
@@ -85,17 +79,17 @@
 }
 
 :host {
-  display: block;
   box-sizing: border-box;
+  display: block;
   background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
+  color: var(--calcite-ui-text-2);
 }
 
 ::slotted(calcite-tip) {
+  margin: 0px;
   border-style: none;
-  margin: 0;
 }
 
 :host-context(calcite-tip-manager) {

package/dist/collection/components/calcite-tip-manager/calcite-tip-manager.css

@@ -1,53 +1,48 @@
 /* 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: 300ms;
+  --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 {
@@ -75,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]) {
@@ -92,17 +86,15 @@
 * @prop --calcite-tip-manager-height: the maximum height of the tip-manager
 * @prop --calcite-tip-max-width: the maximum width of a slotted tip within tip-manager
 */
-
 :host {
-  display: block;
   box-sizing: border-box;
+  display: block;
   background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
+  color: var(--calcite-ui-text-2);
   --calcite-tip-manager-height: 19vh;
 }
-
 :host * {
   box-sizing: border-box;
 }
@@ -112,20 +104,19 @@
 }
 
 /* Shared styles for header elements */
-
 .header {
-  margin: 0;
+  margin: 0px;
   display: flex;
-  align-items: center;
   align-content: space-between;
+  align-items: center;
+  fill: var(--calcite-ui-text-2);
   color: var(--calcite-ui-text-2);
-  fill: ;
 }
 
 .heading {
+  margin: 0px;
+  padding: 0px;
   font-weight: var(--calcite-font-weight-medium);
-  margin: 0;
-  padding: 0;
 }
 
 .header .heading {
@@ -148,60 +139,55 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading,
-h5.heading {
+h4.heading, h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 
 .header {
-  border-width: 0;
+  border-width: 0px;
   border-bottom-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-left: 1rem;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-inline-end: 0px;
+  padding-inline-start: 1rem;
 }
-
 .header h2.heading {
-  font-weight: var(--calcite-font-weight-bold);
-  color: var(--calcite-ui-text-1);
+  padding: 0px;
   font-size: var(--calcite-font-size-1);
   line-height: 1.5rem;
-  padding: 0;
+  font-weight: var(--calcite-font-weight-bold);
+  color: var(--calcite-ui-text-1);
 }
 
 .container {
-  overflow: hidden;
   position: relative;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  overflow: hidden;
   min-height: 150px;
 }
-
 .container:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }
 
 .tip-container {
-  margin-top: 0;
-  overflow: auto;
+  margin-top: 1px;
   display: flex;
-  justify-content: center;
   align-items: flex-start;
+  justify-content: center;
+  overflow: auto;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  margin-top: 1px;
   animation-name: none;
-  animation-duration: 150ms;
+  animation-duration: var(--calcite-animation-timing);
   height: var(--calcite-tip-manager-height);
 }
-
 .tip-container:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
@@ -222,57 +208,51 @@ h5.heading {
 }
 
 /* Pagination Styles*/
-
 .pagination {
   display: flex;
   align-items: center;
   justify-content: center;
+  padding-left: 0px;
+  padding-right: 0px;
   padding-top: 0.75rem;
   padding-bottom: 0.5rem;
-  padding-left: 0;
-  padding-right: 0;
 }
 
 .page-position {
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 0px;
+  margin-bottom: 0px;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
-}
-
-/* RTL */
-
-:host-context([dir=rtl]) .header.header {
-  padding-right: 1rem;
-  padding-left: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
 }
 
 /* @keyframes*/
-
 @keyframes tip-advance {
   0% {
     opacity: 0;
+  }
+  0% {
     transform: translate3d(50px, 0, 0) scale(0.99);
   }
-
   100% {
     opacity: 1;
+  }
+  100% {
     transform: translate3d(0, 0, 0) scale(1);
   }
 }
-
 @keyframes tip-retreat {
   0% {
     opacity: 0;
+  }
+  0% {
     transform: translate3d(-50px, 0, 0) scale(0.99);
   }
-
   100% {
     opacity: 1;
+  }
+  100% {
     transform: translate3d(0, 0, 0) scale(1);
   }
 }

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

@@ -1,53 +1,48 @@
 /* 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: 300ms;
+  --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 {
@@ -75,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]) {
@@ -134,7 +128,9 @@
 
 .arrow::before {
   content: "";
-  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --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);
 }
@@ -157,30 +153,30 @@
 
 .container {
   position: relative;
-  background-color: var(--calcite-ui-foreground-1);
   display: flex;
-  justify-content: flex-start;
   flex-direction: column;
-  font-weight: var(--calcite-font-weight-medium);
-  color: var(--calcite-ui-text-1);
+  justify-content: flex-start;
+  border-radius: 0.25rem;
+  background-color: var(--calcite-ui-foreground-1);
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  overflow: hidden;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
-  border-radius: 0.25rem;
+  font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-1);
+  overflow: hidden;
   max-width: 20rem;
   max-height: 20rem;
 }
 
 .calcite-popper-anim {
-  background-color: var(--calcite-ui-foreground-1);
+  border-radius: 0.25rem;
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  border-radius: 0.25rem;
+  background-color: var(--calcite-ui-foreground-1);
 }
 
 .arrow::before {

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

@@ -128,7 +128,7 @@ export class CalciteTooltip {
   getReferenceElement() {
     const { referenceElement, el } = this;
     return ((typeof referenceElement === "string"
-      ? queryElementRoots(el, `#${referenceElement}`)
+      ? queryElementRoots(el, { id: referenceElement })
       : referenceElement) || null);
   }
   getModifiers() {