@esri/calcite-components 1.0.0-beta.71 → 1.0.0-beta.75

package/dist/collection/components/calcite-chip/calcite-chip.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,7 +84,6 @@
   --calcite-chip-spacing-unit-l: 0.5rem;
   --calcite-chip-spacing-unit-s: 0.25rem;
 }
-
 :host([scale=s]) .chip-image-container {
   height: 1.25rem;
   width: 1.25rem;
@@ -102,11 +95,10 @@
   --calcite-chip-spacing-unit-l: 0.75rem;
   --calcite-chip-spacing-unit-s: 6px;
 }
-
 :host([scale=m]) .chip-image-container {
   height: 1.5rem;
   width: 1.5rem;
-  padding-left: 0.25rem;
+  padding-inline-start: 0.25rem;
 }
 
 :host([scale=l]) {
@@ -115,42 +107,30 @@
   --calcite-chip-spacing-unit-l: 1rem;
   --calcite-chip-spacing-unit-s: 0.5rem;
 }
-
 :host([scale=l]) .chip-image-container {
   height: 2rem;
   width: 2rem;
   padding-left: 0.25rem;
 }
 
-:host([scale=m]) .calcite--rtl .chip-image-container {
-  padding-left: 0;
-  padding-right: 0.25rem;
-}
-
-:host([scale=l]) .calcite--rtl .chip-image-container {
-  padding-left: 0;
-  padding-right: 0.25rem;
-}
-
 :host {
+  box-sizing: border-box;
   display: inline-flex;
+  cursor: default;
   align-items: center;
+  border-radius: 9999px;
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-1);
-  color: var(--calcite-ui-text-1);
   font-weight: var(--calcite-font-weight-medium);
-  cursor: default;
-  border-radius: 9999px;
-  box-sizing: border-box;
-  --calcite-chip-button-border-radius: 0 50px 50px 0;
+  color: var(--calcite-ui-text-1);
 }
 
 .container {
   display: inline-flex;
-  align-items: center;
   height: 100%;
   max-width: 100%;
+  align-items: center;
 }
 
 .title {
@@ -159,75 +139,61 @@
   white-space: nowrap;
 }
 
-.calcite--rtl {
-  text-align: right;
-  --calcite-chip-button-border-radius: 50px 0 0 50px;
-}
-
 :host span {
   padding: 0 var(--calcite-chip-spacing-unit-l);
 }
 
 :host([dismissible]) span {
-  padding: 0 var(--calcite-chip-spacing-unit-s) 0 var(--calcite-chip-spacing-unit-l);
-}
-
-:host([dismissible]) .calcite--rtl span {
-  padding: 0 var(--calcite-chip-spacing-unit-l) 0 var(--calcite-chip-spacing-unit-s);
+  padding-inline: var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s);
 }
 
 :host([icon]:not([dismissible])) span {
   padding: 0 var(--calcite-chip-spacing-unit-l);
 }
 
-:host([icon]:not([dismissible])) .calcite--rtl span {
-  padding: 0 var(--calcite-chip-spacing-unit-l);
-}
-
 :host button {
-  margin: 0;
-  background-color: transparent;
-  outline-offset: 0;
-  outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  margin: 0px;
   display: inline-flex;
-  min-height: 100%;
   max-height: 100%;
-  align-self: stretch;
+  min-height: 100%;
+  cursor: pointer;
   align-items: center;
+  align-self: stretch;
   border-style: none;
-  cursor: pointer;
+  background-color: transparent;
+  outline-offset: 0;
+  outline-color: transparent;
+  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  color: var(--calcite-ui-text-1);
   -webkit-appearance: none;
-  border-radius: var(--calcite-chip-button-border-radius);
+  border-start-start-radius: 0;
+  border-start-end-radius: 50px;
+  border-end-end-radius: 50px;
+  border-end-start-radius: 0;
   padding: 0 var(--calcite-chip-spacing-unit-s);
   color: inherit;
   --calcite-chip-transparent-hover: var(--calcite-button-transparent-hover);
   --calcite-chip-transparent-press: var(--calcite-button-transparent-press);
 }
-
 :host button:hover {
   background-color: var(--calcite-chip-transparent-hover);
 }
-
 :host button:focus {
   background-color: var(--calcite-chip-transparent-hover);
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
 :host button:active {
   background-color: var(--calcite-chip-transparent-press);
 }
 
 .chip-image-container {
+  display: inline-flex;
   border-radius: 50%;
   overflow: hidden;
-  display: inline-flex;
 }
 
 :host slot[name=image]::slotted(*) {
@@ -239,22 +205,18 @@
 }
 
 .calcite-chip--icon {
-  display: inline-flex;
   position: relative;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-right: 0;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  display: inline-flex;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  margin-left: var(--calcite-chip-spacing-unit-l);
-  border-radius: var(--calcite-chip-button-border-radius);
-}
-
-.calcite--rtl .calcite-chip--icon {
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-  margin-right: var(--calcite-chip-spacing-unit-l);
+  margin-inline-end: 0;
+  margin-inline-start: var(--calcite-chip-spacing-unit-l);
+  border-start-start-radius: 0;
+  border-start-end-radius: 50px;
+  border-end-end-radius: 50px;
+  border-end-start-radius: 0;
 }
 
 :host([color=blue][appearance=solid]) {
@@ -286,7 +248,6 @@
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
-
 :host([color=grey][appearance=solid]) button,
 :host([color=grey][appearance=solid]) calcite-icon {
   color: var(--calcite-ui-text-3);
@@ -295,7 +256,6 @@
 :host([color=blue][appearance=clear]) {
   border-color: var(--calcite-ui-info);
 }
-
 :host([color=blue][appearance=clear]) .calcite-chip--icon {
   color: var(--calcite-ui-info);
 }
@@ -303,7 +263,6 @@
 :host([color=red][appearance=clear]) {
   border-color: var(--calcite-ui-danger);
 }
-
 :host([color=red][appearance=clear]) .calcite-chip--icon {
   color: var(--calcite-ui-danger);
 }
@@ -311,7 +270,6 @@
 :host([color=yellow][appearance=clear]) {
   border-color: var(--calcite-ui-warning);
 }
-
 :host([color=yellow][appearance=clear]) .calcite-chip--icon {
   color: var(--calcite-ui-warning);
 }
@@ -319,7 +277,6 @@
 :host([color=green][appearance=clear]) {
   border-color: var(--calcite-ui-success);
 }
-
 :host([color=green][appearance=clear]) .calcite-chip--icon {
   color: var(--calcite-ui-success);
 }
@@ -327,7 +284,6 @@
 :host([color=grey][appearance=clear]) {
   border-color: var(--calcite-ui-border-1);
 }
-
 :host([color=grey][appearance=clear]) .calcite-chip--icon {
   color: var(--calcite-ui-text-3);
 }

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

@@ -3,10 +3,10 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, h, Prop, Event, Element, Method } from "@stencil/core";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { CSS, TEXT, SLOTS, ICONS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding text.
  * @slot image - A slot for adding an image.
@@ -43,6 +43,17 @@ export class CalciteChip {
     };
     this.guid = guid();
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -61,15 +72,14 @@ export class CalciteChip {
   renderChipImage() {
     const { el } = this;
     const hasChipImage = getSlotted(el, SLOTS.image);
-    return hasChipImage ? (h("div", { class: CSS.chipImageContainer },
+    return hasChipImage ? (h("div", { class: CSS.chipImageContainer, key: "image" },
       h("slot", { name: SLOTS.image }))) : null;
   }
   render() {
-    const dir = getElementDir(this.el);
-    const iconEl = (h("calcite-icon", { class: CSS.calciteChipIcon, dir: dir, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
+    const iconEl = (h("calcite-icon", { class: CSS.calciteChipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
     const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.dismissLabel, class: CSS.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) },
       h("calcite-icon", { icon: ICONS.close, scale: "s" })));
-    return (h("div", { class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h("div", { class: "container" },
       this.renderChipImage(),
       this.icon ? iconEl : null,
       h("span", { class: CSS.title, id: this.guid },

package/dist/collection/components/calcite-color-picker/calcite-color-picker.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]) {
@@ -94,20 +88,16 @@
 :host([scale=s]) .container {
   width: 160px;
 }
-
 :host([scale=s]) .saved-colors {
   grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
 }
-
 :host([scale=s]) .channels {
   flex-direction: column;
 }
-
 :host([scale=s]) .channel {
   width: 100%;
   margin-bottom: 4px;
 }
-
 :host([scale=s]) .channel:last-child {
   margin-bottom: 0;
 }
@@ -116,60 +106,46 @@
   width: 272px;
 }
 
-:host([scale=l]) .control-section.section.calcite--rtl > :nth-child(2) {
-  margin-left: 0;
-  margin-right: 12px;
-}
-
 :host([scale=l]) .header {
-  padding-bottom: 0;
+  padding-bottom: 0px;
 }
 
 :host([scale=l]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
-
 :host([scale=l]) .container {
   width: 464px;
 }
-
 :host([scale=l]) .color-field-and-slider {
   margin-bottom: -20px;
 }
-
 :host([scale=l]) .section {
   padding: 0 16px 16px;
 }
-
 :host([scale=l]) .section:first-of-type {
   padding-top: 16px;
 }
-
 :host([scale=l]) .saved-colors {
   grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
   grid-gap: 12px;
   padding-top: 16px;
 }
-
 :host([scale=l]) .control-section {
   flex-wrap: nowrap;
   align-items: baseline;
 }
-
 :host([scale=l]) .control-section > :nth-child(2) {
-  margin-left: 12px;
+  margin-inline-start: 12px;
 }
-
 :host([scale=l]) .color-hex-options {
-  flex-shrink: 1;
   display: flex;
+  flex-shrink: 1;
   flex-direction: column;
   justify-content: space-around;
   min-height: 98px;
   width: 160px;
 }
-
 :host([scale=l]) .color-mode-container {
   flex-shrink: 3;
 }
@@ -189,32 +165,28 @@
 }
 
 .scope {
+  pointer-events: none;
+  position: absolute;
+  margin-bottom: 0px;
+  margin-right: 0px;
+  height: 0.5rem;
+  width: 0.5rem;
+  padding: 0px;
   font-size: var(--calcite-font-size--1);
-  padding: 0;
-  margin-bottom: 0;
-  margin-right: 0;
-  outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  width: 0.5rem;
-  height: 0.5rem;
-  position: absolute;
-  pointer-events: none;
   margin-top: -0.25rem;
   margin-left: -0.25rem;
   outline-offset: 10px;
 }
-
 .scope:focus {
   outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: 2px;
   outline-offset: 12px;
 }
 
 .color-field-and-slider {
   margin-bottom: -16px;
 }
-
 .color-field-and-slider--interactive {
   cursor: pointer;
 }
@@ -228,7 +200,6 @@
 .section {
   padding: 0 12px 12px;
 }
-
 .section:first-of-type {
   padding-top: 12px;
 }
@@ -242,8 +213,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: var(--calcite-ui-text-1);
   padding-bottom: 0.25rem;
+  color: var(--calcite-ui-text-1);
 }
 
 .header--hex,
@@ -278,14 +249,12 @@
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   cursor: pointer;
 }
-
 .saved-color:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }
-
 .saved-color:hover {
-  transition: outline-color 100ms ease-in-out;
+  transition: outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
   outline: 2px solid var(--calcite-ui-border-2);
   outline-offset: 2px;
 }

package/dist/collection/components/calcite-color-picker/calcite-color-picker.js

@@ -5,12 +5,10 @@
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";
 import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, HSV_LIMITS, RGB_LIMITS, TEXT } from "./resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { colorEqual, CSSColorMode, normalizeHex, parseMode } from "./utils";
 import { throttle } from "lodash-es";
-import { getKey } from "../../utils/key";
 import { clamp } from "../../utils/math";
-import { CSS_UTILITY } from "../../utils/resources";
 const throttleFor60FpsInMs = 16;
 const defaultValue = normalizeHex(DEFAULT_COLOR.hex());
 const defaultFormat = "auto";
@@ -156,7 +154,7 @@ export class CalciteColorPicker {
       this.updateChannelsFromColor(this.color);
     };
     this.handleColorFieldScopeKeyDown = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       const arrowKeyToXYOffset = {
         ArrowUp: { x: 0, y: -10 },
         ArrowRight: { x: 10, y: 0 },
@@ -171,7 +169,7 @@ export class CalciteColorPicker {
     };
     this.handleHueScopeKeyDown = (event) => {
       const modifier = event.shiftKey ? 10 : 1;
-      const key = getKey(event.key);
+      const key = event.key;
       const arrowKeyToXOffset = {
         ArrowUp: 1,
         ArrowRight: 1,
@@ -510,7 +508,7 @@ export class CalciteColorPicker {
   // using @Listen as a workaround for VDOM listener not firing
   handleChannelKeyUpOrDown(event) {
     this.shiftKeyChannelAdjustment = 0;
-    const key = getKey(event.key);
+    const key = event.key;
     if ((key !== "ArrowUp" && key !== "ArrowDown") ||
       !event.composedPath().some((node) => { var _a; return (_a = node.classList) === null || _a === void 0 ? void 0 : _a.contains(CSS.channel); })) {
       return;
@@ -572,13 +570,12 @@ export class CalciteColorPicker {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { allowEmpty, color, intlDeleteColor, el, hideHex, hideChannels, hideSaved, intlHex, intlSaved, intlSaveColor, savedColors, scale } = this;
+    const { allowEmpty, color, intlDeleteColor, hideHex, hideChannels, hideSaved, intlHex, intlSaved, intlSaveColor, savedColors, scale } = this;
     const selectedColorInHex = color ? color.hex() : null;
     const hexInputScale = scale === "l" ? "m" : "s";
     const { colorFieldAndSliderInteractive, colorFieldScopeTop, colorFieldScopeLeft, hueScopeLeft, hueScopeTop, scopeOrientation, dimensions: { colorField: { height: colorFieldHeight, width: colorFieldWidth }, slider: { height: sliderHeight } } } = this;
     const hueTop = hueScopeTop !== null && hueScopeTop !== void 0 ? hueScopeTop : sliderHeight / 2 + colorFieldHeight;
     const hueLeft = hueScopeLeft !== null && hueScopeLeft !== void 0 ? hueScopeLeft : (colorFieldWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
-    const elementDir = getElementDir(el);
     const noColor = color === null;
     const vertical = scopeOrientation === "vertical";
     return (h("div", { class: CSS.container },
@@ -591,19 +588,18 @@ export class CalciteColorPicker {
         h("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })),
       hideHex && hideChannels ? null : (h("div", { class: {
           [CSS.controlSection]: true,
-          [CSS.section]: true,
-          [CSS_UTILITY.rtl]: elementDir === "rtl"
+          [CSS.section]: true
         } },
         hideHex ? null : (h("div", { class: CSS.hexOptions },
           h("span", { class: {
               [CSS.header]: true,
               [CSS.headerHex]: true
             } }, intlHex),
-          h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, dir: elementDir, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))),
+          h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))),
         hideChannels ? null : (h("calcite-tabs", { class: {
             [CSS.colorModeContainer]: true,
             [CSS.splitSection]: true
-          }, dir: elementDir, scale: hexInputScale },
+          }, scale: hexInputScale },
           h("calcite-tab-nav", { slot: "tab-nav" },
             this.renderChannelsTabTitle("rgb"),
             this.renderChannelsTabTitle("hsv")),