@esri/calcite-components 1.4.0-next.1 → 1.4.0-next.11

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

@@ -1,43 +1,132 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.1
+ * v1.4.0-next.11
  */
 import { h } from "@stencil/core";
+import { alphaToOpacity, hexChar, hexify, isLonghandHex, isValidHex, normalizeHex, opacityToAlpha, rgbToHex } from "../color-picker/utils";
+import { CSS } from "./resources";
 import Color from "color";
 import { focusElement } from "../../utils/dom";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
-import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
-import { CSS } from "./resources";
+import { OPACITY_LIMITS } from "../color-picker/resources";
 const DEFAULT_COLOR = Color();
 export class ColorPickerHexInput {
   constructor() {
-    this.onCalciteInternalInputBlur = () => {
-      const node = this.inputNode;
+    this.onHexInputBlur = () => {
+      const node = this.hexInputNode;
       const inputValue = node.value;
       const hex = `#${inputValue}`;
-      const willClearValue = this.allowEmpty && !inputValue;
-      if (willClearValue || (isValidHex(hex) && isLonghandHex(hex))) {
+      const { allowEmpty, internalColor } = this;
+      const willClearValue = allowEmpty && !inputValue;
+      const isLonghand = isLonghandHex(hex);
+      if (willClearValue || (isValidHex(hex) && isLonghand)) {
         return;
       }
       // manipulating DOM directly since rerender doesn't update input value
       node.value =
-        this.allowEmpty && !this.internalColor
+        allowEmpty && !internalColor
           ? ""
-          : this.formatForInternalInput(rgbToHex(this.internalColor.object()));
+          : this.formatHexForInternalInput(rgbToHex(
+          // always display hex input in RRGGBB format
+          internalColor.object()));
+    };
+    this.onOpacityInputBlur = () => {
+      const node = this.opacityInputNode;
+      const inputValue = node.value;
+      const { allowEmpty, internalColor } = this;
+      const willClearValue = allowEmpty && !inputValue;
+      if (willClearValue) {
+        return;
+      }
+      // manipulating DOM directly since rerender doesn't update input value
+      node.value =
+        allowEmpty && !internalColor ? "" : this.formatOpacityForInternalInput(internalColor);
+    };
+    this.onHexInputChange = () => {
+      const nodeValue = this.hexInputNode.value;
+      let value = nodeValue;
+      if (value) {
+        const normalized = normalizeHex(value, false);
+        const preserveExistingAlpha = isValidHex(normalized) && this.alphaChannel;
+        if (preserveExistingAlpha && this.internalColor) {
+          const alphaHex = normalizeHex(this.internalColor.hexa(), true).slice(-2);
+          value = `${normalized + alphaHex}`;
+        }
+      }
+      this.internalSetValue(value, this.value);
     };
-    this.onInputChange = () => {
-      this.internalSetValue(this.inputNode.value, this.value);
+    this.onOpacityInputChange = () => {
+      const node = this.opacityInputNode;
+      let value;
+      if (!node.value) {
+        value = node.value;
+      }
+      else {
+        const alpha = opacityToAlpha(Number(node.value));
+        value = this.internalColor?.alpha(alpha).hexa();
+      }
+      this.internalSetValue(value, this.value);
+    };
+    this.onInputKeyDown = (event) => {
+      const { altKey, ctrlKey, metaKey, shiftKey } = event;
+      const { alphaChannel, hexInputNode, internalColor, value } = this;
+      const { key } = event;
+      const composedPath = event.composedPath();
+      if (key === "Tab" || key === "Enter") {
+        if (composedPath.includes(hexInputNode)) {
+          this.onHexInputChange();
+        }
+        else {
+          this.onOpacityInputChange();
+        }
+        if (key === "Enter") {
+          event.preventDefault();
+        }
+        return;
+      }
+      const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
+      const oldValue = this.value;
+      if (isNudgeKey) {
+        if (!value) {
+          this.internalSetValue(this.previousNonNullValue, oldValue);
+          event.preventDefault();
+          return;
+        }
+        const direction = key === "ArrowUp" ? 1 : -1;
+        const bump = shiftKey ? 10 : 1;
+        this.internalSetValue(hexify(this.nudgeRGBChannels(internalColor, bump * direction, composedPath.includes(hexInputNode) ? "rgb" : "a"), alphaChannel), oldValue);
+        event.preventDefault();
+        return;
+      }
+      const withModifiers = altKey || ctrlKey || metaKey;
+      const singleChar = key.length === 1;
+      const validHexChar = hexChar.test(key);
+      if (singleChar && !withModifiers && !validHexChar) {
+        event.preventDefault();
+      }
+    };
+    this.onHexInputPaste = (event) => {
+      const hex = event.clipboardData.getData("text");
+      if (isValidHex(hex)) {
+        event.preventDefault();
+        this.hexInputNode.value = hex.slice(1);
+      }
     };
     this.previousNonNullValue = this.value;
-    this.storeInputRef = (node) => {
-      this.inputNode = node;
+    this.storeHexInputRef = (node) => {
+      this.hexInputNode = node;
+    };
+    this.storeOpacityInputRef = (node) => {
+      this.opacityInputNode = node;
     };
-    this.hexLabel = "Hex";
     this.allowEmpty = false;
-    this.scale = "m";
-    this.value = normalizeHex(DEFAULT_COLOR.hex());
+    this.alphaChannel = false;
+    this.hexLabel = "Hex";
+    this.messages = undefined;
     this.numberingSystem = undefined;
+    this.scale = "m";
+    this.value = normalizeHex(hexify(DEFAULT_COLOR, this.alphaChannel), this.alphaChannel, true);
     this.internalColor = DEFAULT_COLOR;
   }
   //--------------------------------------------------------------------------
@@ -46,10 +135,10 @@ export class ColorPickerHexInput {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    const { allowEmpty, value } = this;
+    const { allowEmpty, alphaChannel, value } = this;
     if (value) {
-      const normalized = normalizeHex(value);
-      if (isValidHex(normalized)) {
+      const normalized = normalizeHex(value, alphaChannel);
+      if (isValidHex(normalized, alphaChannel)) {
         this.internalSetValue(normalized, normalized, false);
       }
       return;
@@ -67,54 +156,21 @@ export class ColorPickerHexInput {
   handleValueChange(value, oldValue) {
     this.internalSetValue(value, oldValue, false);
   }
-  // using @Listen as a workaround for VDOM listener not firing
-  onInputKeyDown(event) {
-    const { altKey, ctrlKey, metaKey, shiftKey } = event;
-    const { internalColor, value } = this;
-    const { key } = event;
-    if (key === "Tab" || key === "Enter") {
-      this.onInputChange();
-      return;
-    }
-    const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
-    const oldValue = this.value;
-    if (isNudgeKey) {
-      if (!value) {
-        this.internalSetValue(this.previousNonNullValue, oldValue);
-        event.preventDefault();
-        return;
-      }
-      const direction = key === "ArrowUp" ? 1 : -1;
-      const bump = shiftKey ? 10 : 1;
-      this.internalSetValue(normalizeHex(this.nudgeRGBChannels(internalColor, bump * direction).hex()), oldValue);
-      event.preventDefault();
-      return;
-    }
-    const withModifiers = altKey || ctrlKey || metaKey;
-    const singleChar = key.length === 1;
-    const validHexChar = hexChar.test(key);
-    if (singleChar && !withModifiers && !validHexChar) {
-      event.preventDefault();
-    }
-  }
-  onPaste(event) {
-    const hex = event.clipboardData.getData("text");
-    if (isValidHex(hex)) {
-      event.preventDefault();
-      this.inputNode.value = hex.slice(1);
-    }
-  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   render() {
-    const { value } = this;
-    const hexInputValue = this.formatForInternalInput(value);
-    return (h("div", { class: CSS.container }, h("calcite-input", { class: CSS.input, label: this.hexLabel, maxLength: 6, numberingSystem: this.numberingSystem, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, onPaste: this.onPaste, prefixText: "#", scale: this.scale, value: hexInputValue,
+    const { alphaChannel, hexLabel, internalColor, messages, scale, value } = this;
+    const hexInputValue = this.formatHexForInternalInput(value);
+    const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
+    const inputScale = scale === "l" ? "m" : "s";
+    return (h("div", { class: CSS.container }, h("calcite-input", { class: CSS.hexInput, label: messages?.hex || hexLabel, maxLength: 6, numberingSystem: this.numberingSystem, onCalciteInputChange: this.onHexInputChange, onCalciteInternalInputBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", scale: inputScale, value: hexInputValue,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.storeInputRef }), hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
+      ref: this.storeHexInputRef }), alphaChannel ? (h("calcite-input-number", { class: CSS.opacityInput, key: "opacity-input", label: messages?.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.onOpacityInputChange, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onKeyDown: this.onInputKeyDown, scale: inputScale, suffixText: "%", value: opacityInputValue,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.storeOpacityInputRef })) : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -124,7 +180,7 @@ export class ColorPickerHexInput {
   /** Sets focus on the component. */
   async setFocus() {
     await componentLoaded(this);
-    focusElement(this.inputNode);
+    focusElement(this.hexInputNode);
   }
   //--------------------------------------------------------------------------
   //
@@ -133,13 +189,17 @@ export class ColorPickerHexInput {
   //--------------------------------------------------------------------------
   internalSetValue(value, oldValue, emit = true) {
     if (value) {
-      const normalized = normalizeHex(value);
-      if (isValidHex(normalized)) {
-        const { internalColor } = this;
-        const changed = !internalColor || normalized !== normalizeHex(internalColor.hex());
-        this.internalColor = Color(normalized);
-        this.previousNonNullValue = normalized;
-        this.value = normalized;
+      const { alphaChannel } = this;
+      const normalized = normalizeHex(value, alphaChannel, alphaChannel);
+      if (isValidHex(normalized, alphaChannel)) {
+        const { internalColor: currentColor } = this;
+        const nextColor = Color(normalized);
+        const normalizedLonghand = normalizeHex(hexify(nextColor, alphaChannel), alphaChannel);
+        const changed = !currentColor ||
+          normalizedLonghand !== normalizeHex(hexify(currentColor, alphaChannel), alphaChannel);
+        this.internalColor = nextColor;
+        this.previousNonNullValue = normalizedLonghand;
+        this.value = normalizedLonghand;
         if (changed && emit) {
           this.calciteColorPickerHexInputChange.emit();
         }
@@ -156,16 +216,28 @@ export class ColorPickerHexInput {
     }
     this.value = oldValue;
   }
-  formatForInternalInput(hex) {
-    return hex ? hex.replace("#", "") : "";
+  formatHexForInternalInput(hex) {
+    return hex ? hex.replace("#", "").slice(0, 6) : "";
   }
-  nudgeRGBChannels(color, amount) {
-    return Color.rgb(color.array().map((channel) => channel + amount));
+  formatOpacityForInternalInput(color) {
+    return color ? `${alphaToOpacity(color.alpha())}` : "";
   }
-  handleKeyDown(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
+  nudgeRGBChannels(color, amount, context) {
+    let nudgedChannels;
+    const channels = color.array();
+    const rgbChannels = channels.slice(0, 3);
+    if (context === "rgb") {
+      const nudgedRGBChannels = rgbChannels.map((channel) => channel + amount);
+      nudgedChannels = [
+        ...nudgedRGBChannels,
+        this.alphaChannel ? channels[3] : undefined
+      ];
+    }
+    else {
+      const nudgedAlpha = opacityToAlpha(alphaToOpacity(color.alpha()) + amount);
+      nudgedChannels = [...rgbChannels, nudgedAlpha];
     }
+    return Color(nudgedChannels);
   }
   static get is() { return "calcite-color-picker-hex-input"; }
   static get encapsulation() { return "shadow"; }
@@ -181,25 +253,25 @@ export class ColorPickerHexInput {
   }
   static get properties() {
     return {
-      "hexLabel": {
-        "type": "string",
+      "allowEmpty": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies accessible label for the input field."
+          "text": "When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n\nWhen `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`."
         },
-        "attribute": "hex-label",
+        "attribute": "allow-empty",
         "reflect": false,
-        "defaultValue": "\"Hex\""
+        "defaultValue": "false"
       },
-      "allowEmpty": {
+      "alphaChannel": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -211,12 +283,78 @@ export class ColorPickerHexInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n\nWhen `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`."
+          "text": "When true, the component will allow updates to the color's alpha value."
         },
-        "attribute": "allow-empty",
+        "attribute": "alpha-channel",
         "reflect": false,
         "defaultValue": "false"
       },
+      "hexLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `messages` instead"
+            }],
+          "text": "Specifies accessible label for the input field."
+        },
+        "attribute": "hex-label",
+        "reflect": false,
+        "defaultValue": "\"Hex\""
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorPickerMessages",
+          "resolved": "{ b: string; blue: string; deleteColor: string; g: string; green: string; h: string; hsv: string; hex: string; hue: string; noColor: string; opacity: string; r: string; red: string; rgb: string; s: string; saturation: string; saveColor: string; saved: string; v: string; value: string; }",
+          "references": {
+            "ColorPickerMessages": {
+              "location": "import",
+              "path": "../color-picker/assets/color-picker/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Messages are passed by parent component for accessible labels."
+        }
+      },
+      "numberingSystem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the Unicode numeral system used by the component for localization."
+        },
+        "attribute": "numbering-system",
+        "reflect": false
+      },
       "scale": {
         "type": "string",
         "mutable": false,
@@ -252,33 +390,11 @@ export class ColorPickerHexInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The Hex value."
+          "text": "The hex value."
         },
         "attribute": "value",
         "reflect": true,
-        "defaultValue": "normalizeHex(DEFAULT_COLOR.hex())"
-      },
-      "numberingSystem": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "NumberingSystem",
-          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
-          "references": {
-            "NumberingSystem": {
-              "location": "import",
-              "path": "../../utils/locale"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Specifies the Unicode numeral system used by the component for localization."
-        },
-        "attribute": "numbering-system",
-        "reflect": false
+        "defaultValue": "normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel),\n    this.alphaChannel,\n    true\n  )"
       }
     };
   }
@@ -332,13 +448,4 @@ export class ColorPickerHexInput {
         "methodName": "handleValueChange"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "onInputKeyDown",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }];
-  }
 }

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

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.1
+ * v1.4.0-next.11
  */
 export const CSS = {
   container: "container",
-  preview: "preview",
-  input: "input"
+  hexInput: "hex-input",
+  opacityInput: "opacity-input"
 };

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

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -106,7 +134,7 @@
 }
 
 .swatch {
-  overflow: visible;
+  overflow: hidden;
   block-size: inherit;
   inline-size: inherit;
 }
@@ -116,9 +144,13 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.no-color-icon {
-  position: absolute;
-  inset: 0px;
-  block-size: 100%;
-  inline-size: 100%;
+.swatch--no-color rect {
+  fill: var(--calcite-ui-foreground-1);
+}
+.swatch--no-color line {
+  stroke: var(--calcite-ui-danger);
+}
+
+.checker {
+  fill: #cacaca;
 }

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

@@ -1,12 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.1
+ * v1.4.0-next.11
  */
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import Color from "color";
 import { getModeName } from "../../utils/dom";
-import { COLORS, CSS } from "./resources";
+import { hexify } from "../color-picker/utils";
+import { CHECKER_DIMENSIONS, COLORS, CSS } from "./resources";
 export class ColorPickerSwatch {
   constructor() {
     this.active = false;
@@ -14,7 +15,7 @@ export class ColorPickerSwatch {
     this.scale = "m";
   }
   handleColorChange(color) {
-    this.internalColor = Color(color);
+    this.internalColor = color ? Color(color) : null;
   }
   //--------------------------------------------------------------------------
   //
@@ -25,12 +26,38 @@ export class ColorPickerSwatch {
     this.handleColorChange(this.color);
   }
   render() {
+    const isEmpty = !this.internalColor;
+    const classes = {
+      [CSS.swatch]: true,
+      [CSS.noColorSwatch]: isEmpty
+    };
+    return (h("svg", { class: classes, xmlns: "http://www.w3.org/2000/svg" }, this.renderSwatch()));
+  }
+  renderSwatch() {
     const { active, el, internalColor } = this;
     const borderRadius = active ? "100%" : "0";
-    const hex = internalColor.hex();
     const theme = getModeName(el);
     const borderColor = theme === "light" ? COLORS.borderLight : COLORS.borderDark;
-    return (h("svg", { class: CSS.swatch, xmlns: "http://www.w3.org/2000/svg" }, h("title", null, hex), h("rect", { fill: hex, height: "100%", id: "swatch", rx: borderRadius, stroke: borderColor, "stroke-width": "2", style: { "clip-path": `inset(0 round ${borderRadius})` }, width: "100%" })));
+    const commonSwatchProps = {
+      height: "100%",
+      rx: borderRadius,
+      stroke: borderColor,
+      // stroke-width and clip-path are needed to hide overflowing portion of stroke
+      // see https://stackoverflow.com/a/7273346/194216
+      // using attribute to work around Stencil using the prop name vs the attribute when rendering
+      ["stroke-width"]: "2",
+      width: "100%"
+    };
+    const isEmpty = !internalColor;
+    if (isEmpty) {
+      return (h(Fragment, null, h("clipPath", { id: "shape" }, h("rect", { height: "100%", rx: borderRadius, width: "100%" })), h("rect", { "clip-path": `inset(0 round ${borderRadius})`, rx: borderRadius, ...commonSwatchProps }), h("line", { "clip-path": "url(#shape)", "stroke-width": "3", x1: "100%", x2: "0", y1: "0", y2: "100%" })));
+    }
+    const alpha = internalColor.alpha();
+    const hex = hexify(internalColor);
+    const hexa = hexify(internalColor, alpha < 1);
+    return (h(Fragment, null, h("title", null, hexa), h("defs", null, h("pattern", { height: CHECKER_DIMENSIONS.size, id: "checker", patternUnits: "userSpaceOnUse", width: CHECKER_DIMENSIONS.size, x: "0", y: "0" }, h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: "0", y: "0" }), h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: CHECKER_DIMENSIONS.squareSize, y: CHECKER_DIMENSIONS.squareSize }))), h("rect", { fill: "url(#checker)", height: "100%", rx: borderRadius, width: "100%" }), h("rect", { fill: hex, style: {
+        "clip-path": alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`
+      }, ...commonSwatchProps }), alpha < 1 ? (h("rect", { fill: hexa, key: "opacity-fill", style: { "clip-path": "polygon(100% 0, 100% 100%, 0 100%)" }, ...commonSwatchProps })) : null));
   }
   static get is() { return "calcite-color-picker-swatch"; }
   static get encapsulation() { return "shadow"; }
@@ -68,7 +95,7 @@ export class ColorPickerSwatch {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
+          "original": "string | null",
           "resolved": "string",
           "references": {}
         },

package/dist/collection/components/color-picker-swatch/resources.js

@@ -1,13 +1,19 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.1
+ * v1.4.0-next.11
  */
 export const CSS = {
   swatch: "swatch",
-  noColorIcon: "no-color-icon"
+  noColorSwatch: "swatch--no-color",
+  checker: "checker"
 };
 export const COLORS = {
   borderLight: "rgba(0, 0, 0, 0.3)",
   borderDark: "rgba(255, 255, 255, 0.15)"
 };
+const checkerSquareSize = 4;
+export const CHECKER_DIMENSIONS = {
+  squareSize: checkerSquareSize,
+  size: checkerSquareSize * 2
+};