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

package/dist/collection/components/calcite-dropdown-item/calcite-dropdown-item.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,80 +79,82 @@
 }
 
 .container--s {
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
-  padding-right: 0.5rem;
-  padding-left: 1.5rem;
   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-right: 0.75rem;
-  padding-left: 2rem;
   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-right: 1rem;
-  padding-left: 2.5rem;
   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;
 }
 
-.container--s.calcite--rtl {
-  padding-right: 1.5rem;
-  padding-left: 0.5rem;
+.container--s.container--none-selection {
+  padding-inline-start: 0.25rem;
+}
+.container--s.container--none-selection .dropdown-link {
+  padding-inline-start: 0px;
 }
 
-.container--m.calcite--rtl {
-  padding-right: 2rem;
-  padding-left: 0.75rem;
+.container--m.container--none-selection {
+  padding-inline-start: 0.5rem;
+}
+.container--m.container--none-selection .dropdown-link {
+  padding-inline-start: 0px;
 }
 
-.container--l.calcite--rtl {
-  padding-right: 2.5rem;
-  padding-left: 1rem;
+.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 {
-  margin-right: auto;
-  margin-left: 0.25rem;
-}
-
-.calcite--rtl .dropdown-item-content {
-  margin-left: auto;
-  margin-right: 0;
+  flex: 1 1 auto;
+  padding-inline-end: auto;
+  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;
@@ -170,135 +166,102 @@
 }
 
 .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-right: 0.5rem;
-  padding-left: 1.5rem;
   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-right: 0.75rem;
-  padding-left: 2rem;
   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-right: 1rem;
-  padding-left: 2.5rem;
   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;
 }
 
-.calcite--rtl:before {
-  left: unset;
-  right: 1rem;
-}
-
-.calcite--rtl .dropdown-link {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-: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;
 }
 
 .container--s:before {
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
 }
 
 .container--m:before {
-  left: 0.75rem;
+  inset-inline-start: 0.75rem;
 }
 
 .container--l:before {
-  left: 1rem;
-}
-
-.calcite--rtl:before {
-  left: unset;
-}
-
-.container--s.calcite--rtl:before {
-  right: 0.5rem;
-}
-
-.container--m.calcite--rtl:before {
-  right: 0.75rem;
-}
-
-.container--l.calcite--rtl:before {
-  right: 1rem;
+  inset-inline-start: 1rem;
 }
 
 .dropdown-item-icon {
@@ -310,32 +273,15 @@
 }
 
 .container--s .dropdown-item-icon {
-  left: 0.25rem;
+  inset-inline-start: 0.25rem;
 }
 
 .container--m .dropdown-item-icon {
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
 }
 
 .container--l .dropdown-item-icon {
-  left: 0.75rem;
-}
-
-.calcite--rtl .dropdown-item-icon {
-  left: unset;
-  margin-left: 0;
-}
-
-.container--s.calcite--rtl .dropdown-item-icon {
-  right: 0.25rem;
-}
-
-.container--m.calcite--rtl .dropdown-item-icon {
-  right: 0.5rem;
-}
-
-.container--l.calcite--rtl .dropdown-item-icon {
-  right: 0.75rem;
+  inset-inline-start: 0.75rem;
 }
 
 :host(:hover) .dropdown-item-icon {
@@ -349,65 +295,25 @@
 }
 
 .container--s .dropdown-item-icon-start {
-  margin-right: 0.5rem;
-  margin-left: 0.25rem;
+  margin-inline-end: 0.5rem;
+  margin-inline-start: 0.25rem;
 }
-
 .container--s .dropdown-item-icon-end {
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 
 .container--m .dropdown-item-icon-start {
-  margin-right: 0.75rem;
-  margin-left: 0.25rem;
+  margin-inline-end: 0.75rem;
+  margin-inline-start: 0.25rem;
 }
-
 .container--m .dropdown-item-icon-end {
-  margin-left: 0.75rem;
+  margin-inline-start: 0.75rem;
 }
 
 .container--l .dropdown-item-icon-start {
-  margin-right: 1rem;
-  margin-left: 0.25rem;
+  margin-inline-end: 1rem;
+  margin-inline-start: 0.25rem;
 }
-
 .container--l .dropdown-item-icon-end {
-  margin-left: 1rem;
-}
-
-.calcite--rtl .dropdown-item-icon-start {
-  margin-right: 0;
-}
-
-.calcite--rtl .dropdown-item-icon-end {
-  margin-left: 0;
-}
-
-.container--s.calcite--rtl .dropdown-item-icon-start {
-  margin-left: 0.5rem;
-}
-
-.container--s.calcite--rtl .dropdown-item-icon-end {
-  margin-right: 0.5rem;
-}
-
-.container--m.calcite--rtl .dropdown-item-icon-start {
-  margin-left: 0.75rem;
-}
-
-.container--m.calcite--rtl .dropdown-item-icon-end {
-  margin-right: 0.75rem;
-}
-
-.container--l.calcite--rtl .dropdown-item-icon-start {
-  margin-left: 1rem;
-}
-
-.container--l.calcite--rtl .dropdown-item-icon-end {
-  margin-right: 1rem;
-}
-
-.calcite--rtl calcite-icon {
-  margin-right: 0;
-  margin-left: 0.75rem;
+  margin-inline-start: 1rem;
 }

package/dist/collection/components/calcite-dropdown-item/calcite-dropdown-item.js

@@ -3,9 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
-import { getElementDir, getElementProp } from "../../utils/dom";
-import { getKey } from "../../utils/key";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getElementProp } from "../../utils/dom";
 import { CSS } from "./resources";
 /**
  * @slot - A slot for adding text.
@@ -42,12 +40,11 @@ export class CalciteDropdownItem {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
     const scale = getElementProp(this.el, "scale", "m");
-    const iconStartEl = (h("calcite-icon", { class: "dropdown-item-icon-start", dir: dir, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+    const iconStartEl = (h("calcite-icon", { class: "dropdown-item-icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const contentNode = (h("span", { class: "dropdown-item-content" },
       h("slot", null)));
-    const iconEndEl = (h("calcite-icon", { class: "dropdown-item-icon-end", dir: dir, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+    const iconEndEl = (h("calcite-icon", { class: "dropdown-item-icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     const slottedContent = this.iconStart && this.iconEnd
       ? [iconStartEl, contentNode, iconEndEl]
       : this.iconStart
@@ -67,7 +64,6 @@ export class CalciteDropdownItem {
     return (h(Host, { "aria-checked": itemAria, role: itemRole, tabindex: "0" },
       h("div", { class: {
           container: true,
-          [CSS_UTILITY.rtl]: dir === "rtl",
           [CSS.containerLink]: !!this.href,
           [CSS.containerSmall]: scale === "s",
           [CSS.containerMedium]: scale === "m",
@@ -88,7 +84,7 @@ export class CalciteDropdownItem {
     this.emitRequestedItem();
   }
   keyDownHandler(e) {
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
         this.emitRequestedItem();
         if (this.href) {

package/dist/collection/components/calcite-fab/calcite-fab.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]) {
@@ -90,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-fab/calcite-fab.js

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Method, Prop, h } from "@stencil/core";
 import { CSS, ICONS } from "./resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 export class CalciteFab {
   constructor() {
     // --------------------------------------------------------------------------
@@ -57,10 +57,9 @@ export class CalciteFab {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { appearance, color, disabled, el, loading, scale, textEnabled, icon, label, text } = this;
+    const { appearance, color, disabled, loading, scale, textEnabled, icon, label, text } = this;
     const title = !textEnabled ? label || text || null : null;
-    const dir = getElementDir(el);
-    return (h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline", class: CSS.button, color: color, dir: dir, disabled: disabled, iconStart: icon, label: label, loading: loading, ref: (buttonEl) => {
+    return (h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline", class: CSS.button, color: color, disabled: disabled, iconStart: icon, label: label, loading: loading, ref: (buttonEl) => {
         this.buttonEl = buttonEl;
       }, round: true, scale: scale, title: title, width: "auto" }, this.textEnabled ? this.text : null));
   }