@esri/calcite-components 1.0.0-beta.69 → 1.0.0-beta.72

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

@@ -2,11 +2,11 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { focusElement, closestElementCrossShadowBoundary } from "../../utils/dom";
-import { hiddenInputStyle } from "../../utils/form";
+import { HiddenFormInputSlot } from "../../utils/form";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { connectForm, disconnectForm } from "../../utils/form";
 export class CalciteCheckbox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -29,8 +29,12 @@ export class CalciteCheckbox {
      * https://css-tricks.com/indeterminate-checkboxes/
      * */
     this.indeterminate = false;
-    /** The name of the checkbox input */
-    this.name = "";
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** specify the scale of the checkbox, defaults to m */
     this.scale = "m";
     //--------------------------------------------------------------------------
@@ -42,13 +46,6 @@ export class CalciteCheckbox {
     this.indeterminatePath = "M13 8v1H3V8z";
     //--------------------------------------------------------------------------
     //
-    //  State
-    //
-    //--------------------------------------------------------------------------
-    /** The focused state of the checkbox. */
-    this.focused = false;
-    //--------------------------------------------------------------------------
-    //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
@@ -56,26 +53,34 @@ export class CalciteCheckbox {
     this.toggle = () => {
       if (!this.disabled) {
         this.checked = !this.checked;
-        focusElement(this.input);
+        this.setFocus();
         this.indeterminate = false;
         this.calciteCheckboxChange.emit();
       }
     };
+    this.keyDownHandler = (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        this.toggle();
+        event.preventDefault();
+      }
+    };
     this.clickHandler = () => {
       this.toggle();
     };
-    this.formResetHandler = () => {
-      this.checked = this.initialChecked;
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    this.onToggleBlur = () => {
+      this.calciteInternalCheckboxBlur.emit(false);
+    };
+    this.onToggleFocus = () => {
+      this.calciteInternalCheckboxFocus.emit(true);
+    };
+    this.onLabelClick = () => {
+      this.toggle();
     };
-  }
-  checkedWatcher(newChecked) {
-    this.input.checked = newChecked;
-  }
-  disabledChanged(disabled) {
-    this.input.disabled = disabled;
-  }
-  nameChanged(newName) {
-    this.input.name = newName;
   }
   //--------------------------------------------------------------------------
   //
@@ -84,29 +89,8 @@ export class CalciteCheckbox {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.input);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  mouseenter() {
-    this.hovered = true;
-  }
-  mouseleave() {
-    this.hovered = false;
-  }
-  onInputBlur() {
-    this.focused = false;
-    this.calciteInternalCheckboxBlur.emit(false);
-  }
-  onInputFocus() {
-    this.focused = true;
-    this.calciteInternalCheckboxFocus.emit(true);
-  }
-  onLabelClick() {
-    this.toggle();
+    var _a;
+    (_a = this.toggleEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -115,52 +99,25 @@ export class CalciteCheckbox {
   //--------------------------------------------------------------------------
   connectedCallback() {
     this.guid = this.el.id || `calcite-checkbox-${guid()}`;
-    this.initialChecked = this.checked;
-    this.renderHiddenCheckboxInput();
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.addEventListener("reset", this.formResetHandler);
-    }
     connectLabel(this);
-  }
-  componentDidLoad() {
-    this.input.setAttribute("aria-label", getLabelText(this));
+    connectForm(this);
   }
   disconnectedCallback() {
-    this.input.parentNode.removeChild(this.input);
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.removeEventListener("reset", this.formResetHandler);
-    }
     disconnectLabel(this);
+    disconnectForm(this);
   }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
-  renderHiddenCheckboxInput() {
-    this.input = document.createElement("input");
-    this.checked && this.input.setAttribute("checked", "");
-    this.input.disabled = this.disabled;
-    this.input.id = `${this.guid}-input`;
-    this.input.name = this.name;
-    this.input.onblur = this.onInputBlur.bind(this);
-    this.input.onfocus = this.onInputFocus.bind(this);
-    this.input.style.cssText = hiddenInputStyle;
-    this.input.type = "checkbox";
-    this.input.setAttribute("aria-label", getLabelText(this));
-    if (this.value) {
-      this.input.value = this.value != null ? this.value.toString() : "";
-    }
-    this.el.appendChild(this.input);
-  }
   render() {
-    return (h(Host, { onClick: this.clickHandler },
-      h("div", { class: { focused: this.focused } },
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler },
+      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: 0 },
         h("svg", { class: "check-svg", viewBox: "0 0 16 16" },
           h("path", { d: this.getPath() })),
-        h("slot", null))));
+        h("slot", null)),
+      h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -284,22 +241,42 @@ export class CalciteCheckbox {
       "reflect": false
     },
     "name": {
-      "type": "string",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "any",
+        "resolved": "any",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The name of the checkbox input"
       },
       "attribute": "name",
+      "reflect": true
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
       "reflect": true,
-      "defaultValue": "\"\""
+      "defaultValue": "false"
     },
     "scale": {
       "type": "string",
@@ -333,7 +310,7 @@ export class CalciteCheckbox {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The value of the checkbox input"
@@ -342,9 +319,6 @@ export class CalciteCheckbox {
       "reflect": false
     }
   }; }
-  static get states() { return {
-    "focused": {}
-  }; }
   static get events() { return [{
       "method": "calciteInternalCheckboxBlur",
       "name": "calciteInternalCheckboxBlur",
@@ -416,27 +390,4 @@ export class CalciteCheckbox {
     }
   }; }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "checked",
-      "methodName": "checkedWatcher"
-    }, {
-      "propName": "disabled",
-      "methodName": "disabledChanged"
-    }, {
-      "propName": "name",
-      "methodName": "nameChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "mouseenter",
-      "method": "mouseenter",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseleave",
-      "method": "mouseleave",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }]; }
 }

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

@@ -47,7 +47,11 @@
 }
 
 :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 {
@@ -106,7 +110,7 @@
 :host([scale=m]) .chip-image-container {
   height: 1.5rem;
   width: 1.5rem;
-  padding-left: 0.25rem;
+  padding-inline-start: 0.25rem;
 }
 
 :host([scale=l]) {
@@ -122,16 +126,6 @@
   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 {
   display: inline-flex;
   align-items: center;
@@ -143,7 +137,6 @@
   cursor: default;
   border-radius: 9999px;
   box-sizing: border-box;
-  --calcite-chip-button-border-radius: 0 50px 50px 0;
 }
 
 .container {
@@ -159,31 +152,18 @@
   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;
@@ -198,12 +178,15 @@
   border-style: none;
   cursor: pointer;
   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);
@@ -243,18 +226,14 @@
   position: relative;
   margin-top: 0;
   margin-bottom: 0;
-  margin-right: 0;
   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]) {

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

@@ -3,10 +3,9 @@
  * 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";
 /**
  * @slot - A slot for adding text.
  * @slot image - A slot for adding an image.
@@ -65,11 +64,10 @@ export class CalciteChip {
       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

@@ -47,7 +47,11 @@
 }
 
 :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 {
@@ -116,11 +120,6 @@
   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;
 }
@@ -158,7 +157,7 @@
 }
 
 :host([scale=l]) .control-section > :nth-child(2) {
-  margin-left: 12px;
+  margin-inline-start: 12px;
 }
 
 :host([scale=l]) .color-hex-options {
@@ -285,7 +284,7 @@
 }
 
 .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;
@@ -546,12 +544,6 @@ export class CalciteColorPicker {
   //
   //--------------------------------------------------------------------------
   componentWillLoad() {
-    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
-    if (this.storageId && localStorage.getItem(storageKey)) {
-      this.savedColors = JSON.parse(localStorage.getItem(storageKey));
-    }
-  }
-  connectedCallback() {
     const { allowEmpty, color, format, value } = this;
     const willSetNoColor = allowEmpty && !value;
     const parsedMode = parseMode(value);
@@ -563,6 +555,10 @@ export class CalciteColorPicker {
     this.setMode(format);
     this.internalColorSet(initialColor, false, "initial");
     this.updateDimensions(this.scale);
+    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
+    if (this.storageId && localStorage.getItem(storageKey)) {
+      this.savedColors = JSON.parse(localStorage.getItem(storageKey));
+    }
   }
   disconnectedCallback() {
     document.removeEventListener("mousemove", this.globalMouseMoveHandler);
@@ -574,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 },
@@ -593,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")),

package/dist/collection/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.css

@@ -47,7 +47,11 @@
 }
 
 :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 {

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

@@ -6,9 +6,8 @@ import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from
 import { hexChar, hexToRGB, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../calcite-color-picker/utils";
 import Color from "color";
 import { CSS } from "./resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { TEXT } from "../calcite-color-picker/resources";
-import { getKey } from "../../utils/key";
 const DEFAULT_COLOR = Color();
 export class CalciteColorPickerHexInput {
   constructor() {
@@ -41,8 +40,8 @@ export class CalciteColorPickerHexInput {
      * The hex value.
      */
     this.value = normalizeHex(DEFAULT_COLOR.hex());
-    this.onCalciteInputBlur = (event) => {
-      const node = event.currentTarget;
+    this.onCalciteInputBlur = () => {
+      const node = this.inputNode;
       const inputValue = node.value;
       const hex = `#${inputValue}`;
       const willClearValue = this.allowEmpty && !inputValue;
@@ -55,9 +54,8 @@ export class CalciteColorPickerHexInput {
           ? ""
           : this.formatForInternalInput(rgbToHex(this.internalColor.object()));
     };
-    this.onInputChange = (event) => {
-      const node = event.currentTarget;
-      const inputValue = node.value;
+    this.onInputChange = () => {
+      const inputValue = this.inputNode.value;
       let value;
       if (inputValue) {
         const hex = inputValue;
@@ -133,8 +131,12 @@ export class CalciteColorPickerHexInput {
   // using @Listen as a workaround for VDOM listener not firing
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
-    const { el, inputNode, internalColor, value } = this;
-    const key = getKey(event.key);
+    const { internalColor, value } = this;
+    const key = event.key;
+    if (key === "Tab" || key === "Enter") {
+      this.onInputChange();
+      return;
+    }
     const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
     if (isNudgeKey) {
       if (!value) {
@@ -149,16 +151,9 @@ export class CalciteColorPickerHexInput {
       return;
     }
     const withModifiers = altKey || ctrlKey || metaKey;
-    const exceededHexLength = inputNode.value.length >= 6;
-    const focusedElement = el.shadowRoot.activeElement;
-    const hasTextSelection = 
-    // can't use window.getSelection() because of FF bug: https://bugzilla.mozilla.org/show_bug.cgi?id=85686
-    focusedElement.selectionStart != focusedElement.selectionEnd;
     const singleChar = key.length === 1;
     const validHexChar = hexChar.test(key);
-    if (singleChar &&
-      !withModifiers &&
-      (!validHexChar || (!hasTextSelection && exceededHexLength))) {
+    if (singleChar && !withModifiers && !validHexChar) {
       event.preventDefault();
     }
   }
@@ -168,11 +163,10 @@ export class CalciteColorPickerHexInput {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { el, intlHex, value } = this;
+    const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
-    const elementDir = getElementDir(el);
     return (h("div", { class: CSS.container },
-      h("calcite-input", { class: CSS.input, dir: elementDir, label: intlHex, onCalciteInputBlur: this.onCalciteInputBlur, onChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
+      h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
       hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------

package/dist/collection/components/calcite-color-picker-swatch/calcite-color-picker-swatch.css

@@ -47,7 +47,11 @@
 }
 
 :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 {