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

package/dist/components/calcite-tree-item.js

@@ -1,7 +1,7 @@
 /*!
  * 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.10
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted, e as slotChangeHasAssignedElement, c as getElementDir, C as CSS_UTILITY, t as toAriaBoolean, q as filterDirectChildren, o as nodeListToArray } from './dom.js';
@@ -50,11 +50,6 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.expanded = !this.expanded;
     };
     this.childrenClickHandler = (event) => event.stopPropagation();
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     this.updateParentIsExpanded = (el, expanded) => {
       const items = getSlotted(el, SLOTS.children, {
         all: true,
@@ -195,7 +190,7 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         [CSS_UTILITY.rtl]: rtl
       }, "data-selection-mode": this.selectionMode,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), h("div", { class: CSS.actionsEnd, hidden: !hasEndActions }, slotNode)), h("div", { class: {
+      ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), h("div", { class: CSS.actionsEnd, hidden: !hasEndActions, ref: (el) => (this.actionSlotWrapper = el) }, slotNode)), h("div", { class: {
         [CSS.childrenContainer]: true,
         [CSS_UTILITY.rtl]: rtl
       }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, role: this.hasChildren ? "group" : undefined,
@@ -211,7 +206,7 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   onClick(event) {
-    if (this.disabled) {
+    if (this.disabled || this.isActionEndEvent(event)) {
       return;
     }
     // Solve for if the item is clicked somewhere outside the slotted anchor.
@@ -228,6 +223,9 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   keyDownHandler(event) {
     let root;
+    if (this.isActionEndEvent(event)) {
+      return;
+    }
     switch (event.key) {
       case " ":
         if (this.selectionMode === "none") {
@@ -274,6 +272,15 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         break;
     }
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  isActionEndEvent(event) {
+    const composedPath = event.composedPath();
+    return composedPath.includes(this.actionSlotWrapper);
+  }
   /**
    * This is meant to be called in `componentDidLoad` in order to take advantage of the hierarchical component lifecycle
    * and help check for item selection as items are initialized

package/dist/components/calcite-tree.js

@@ -1,7 +1,7 @@
 /*!
  * 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.10
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { k as focusElement, o as nodeListToArray, p as getRootNode } from './dom.js';
@@ -97,26 +97,24 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       (!target.hasChildren ||
         (target.hasChildren &&
           (this.selectionMode === "children" || this.selectionMode === "multichildren")));
+    const shouldDeselectAllChildren = this.selectionMode === "multichildren" && target.hasChildren;
     const shouldModifyToCurrentSelection = !isNoneSelectionMode &&
       event.detail.modifyCurrentSelection &&
       (this.selectionMode === "multiple" || this.selectionMode === "multichildren");
-    const shouldSelectChildren = this.selectionMode === "multichildren" || this.selectionMode === "children";
     const shouldClearCurrentSelection = !shouldModifyToCurrentSelection &&
       (((this.selectionMode === "single" || this.selectionMode === "multiple") &&
         childItems.length <= 0) ||
         this.selectionMode === "children" ||
         this.selectionMode === "multichildren");
-    const shouldExpandTarget = this.selectionMode === "children" || this.selectionMode === "multichildren";
+    const shouldUpdateExpand = ["children", "multichildren"].includes(this.selectionMode) ||
+      (["single", "multiple"].includes(this.selectionMode) &&
+        target.hasChildren &&
+        !event.detail.forceToggle);
     if (!this.child) {
       const targetItems = [];
       if (shouldSelect) {
         targetItems.push(target);
       }
-      if (shouldSelectChildren) {
-        childItems.forEach((treeItem) => {
-          targetItems.push(treeItem);
-        });
-      }
       if (shouldClearCurrentSelection) {
         const selectedItems = nodeListToArray(this.el.querySelectorAll("calcite-tree-item[selected]"));
         selectedItems.forEach((treeItem) => {
@@ -125,14 +123,29 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           }
         });
       }
-      if (shouldExpandTarget && !event.detail.forceToggle) {
-        target.expanded = true;
+      if (shouldUpdateExpand) {
+        if (["single", "multiple"].includes(this.selectionMode)) {
+          target.expanded = !target.expanded;
+        }
+        else if (this.selectionMode === "multichildren") {
+          target.expanded = !target.selected;
+        }
+        else if (this.selectionMode === "children") {
+          target.expanded = target.selected ? !target.expanded : true;
+        }
+      }
+      if (shouldDeselectAllChildren) {
+        childItems.forEach((item) => {
+          item.selected = false;
+          if (item.hasChildren) {
+            item.expanded = false;
+          }
+        });
       }
       if (shouldModifyToCurrentSelection) {
         window.getSelection().removeAllRanges();
       }
-      if ((shouldModifyToCurrentSelection && target.selected) ||
-        (shouldSelectChildren && event.detail.forceToggle)) {
+      if ((shouldModifyToCurrentSelection && target.selected) || event.detail.forceToggle) {
         targetItems.forEach((treeItem) => {
           if (!treeItem.disabled) {
             treeItem.selected = false;

package/dist/components/calcite-value-list-item.js

@@ -1,7 +1,7 @@
 /*!
  * 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.10
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-value-list.js

@@ -1,7 +1,7 @@
 /*!
  * 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.10
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { S as Sortable } from './sortable.esm.js';

package/dist/components/checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * 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.10
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';

package/dist/components/chip.js

@@ -1,7 +1,7 @@
 /*!
  * 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.10
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';

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

@@ -1,24 +1,115 @@
 /*!
  * 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.10
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
-import { c as color, d as defineCustomElement$4 } from './color-picker-swatch.js';
+import { j as isLonghandHex, i as isValidHex, r as rgbToHex, n as normalizeHex, o as opacityToAlpha, a as hexify, k as hexChar, c as alphaToOpacity } from './utils.js';
+import { c as color } from './index2.js';
 import { k as focusElement } from './dom.js';
 import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentLoaded } from './loadable.js';
-import { i as isValidHex, a as isLonghandHex, r as rgbToHex, n as normalizeHex, b as hexChar } from './utils.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './input.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './input.js';
+import { d as defineCustomElement$2 } from './input-number.js';
 import { d as defineCustomElement$1 } from './progress.js';
 
-const CSS = {
+const CSS$1 = {
+  channel: "channel",
+  channels: "channels",
+  colorField: "color-field",
+  colorFieldScope: "scope--color-field",
+  colorMode: "color-mode",
+  colorModeContainer: "color-mode-container",
   container: "container",
+  control: "control",
+  controlAndScope: "control-and-scope",
+  controlSection: "control-section",
+  deleteColor: "delete-color",
+  header: "header",
+  hexAndChannelsGroup: "hex-and-channels-group",
+  hexOptions: "color-hex-options",
+  hueScope: "scope--hue",
+  hueSlider: "hue-slider",
+  opacityScope: "scope--opacity",
+  opacitySlider: "opacity-slider",
   preview: "preview",
-  input: "input"
+  previewAndSliders: "preview-and-sliders",
+  saveColor: "save-color",
+  savedColor: "saved-color",
+  savedColors: "saved-colors",
+  savedColorsButtons: "saved-colors-buttons",
+  savedColorsSection: "saved-colors-section",
+  scope: "scope",
+  section: "section",
+  slider: "slider",
+  sliders: "sliders",
+  splitSection: "section--split"
+};
+const DEFAULT_COLOR$1 = color("#007AC2");
+const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-";
+const RGB_LIMITS = {
+  r: 255,
+  g: 255,
+  b: 255
+};
+const HSV_LIMITS = {
+  h: 360,
+  s: 100,
+  v: 100
+};
+const OPACITY_LIMITS = {
+  min: 0,
+  max: 100
+};
+const DIMENSIONS = {
+  s: {
+    slider: {
+      height: 12,
+      width: 104
+    },
+    colorField: {
+      height: 80,
+      width: 160
+    },
+    thumb: {
+      radius: 10
+    }
+  },
+  m: {
+    slider: {
+      height: 12,
+      width: 204
+    },
+    colorField: {
+      height: 150,
+      width: 272
+    },
+    thumb: {
+      radius: 10
+    }
+  },
+  l: {
+    slider: {
+      height: 12,
+      width: 384
+    },
+    colorField: {
+      height: 200,
+      width: 464
+    },
+    thumb: {
+      radius: 10
+    }
+  }
 };
 
-const colorPickerHexInputCss = "@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: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{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host{display:block}.container{display:inline-grid;inline-size:100%;align-items:center;grid-template-columns:1fr auto}.preview{grid-column:2/3;pointer-events:none;margin-block:0px;margin-inline:0.25rem;display:flex;align-items:center}.preview,.input{grid-row:1}.input{grid-column:1/3;inline-size:100%;text-transform:uppercase}";
+const CSS = {
+  container: "container",
+  hexInput: "hex-input",
+  opacityInput: "opacity-input"
+};
+
+const colorPickerHexInputCss = "@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: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{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host{display:block}.container{display:flex;inline-size:100%;flex-wrap:nowrap;align-items:center}.hex-input{flex-grow:1;text-transform:uppercase}.opacity-input{inline-size:68px;margin-inline-start:-1px}:host([scale=s]) .container{flex-wrap:wrap;row-gap:0.125rem}:host([scale=s]) .opacity-input{inline-size:unset;margin-inline-start:unset}:host([scale=l]) .opacity-input{inline-size:88px}";
 
 const DEFAULT_COLOR = color();
 const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -27,32 +118,120 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.__registerHost();
     this.__attachShadow();
     this.calciteColorPickerHexInputChange = createEvent(this, "calciteColorPickerHexInputChange", 6);
-    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.onInputChange = () => {
-      this.internalSetValue(this.inputNode.value, this.value);
+    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.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;
   }
   //--------------------------------------------------------------------------
@@ -61,10 +240,10 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   //
   //--------------------------------------------------------------------------
   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;
@@ -82,54 +261,21 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   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));
   }
   //--------------------------------------------------------------------------
   //
@@ -139,7 +285,7 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   /** Sets focus on the component. */
   async setFocus() {
     await componentLoaded(this);
-    focusElement(this.inputNode);
+    focusElement(this.hexInputNode);
   }
   //--------------------------------------------------------------------------
   //
@@ -148,13 +294,17 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   //--------------------------------------------------------------------------
   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();
         }
@@ -171,16 +321,28 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     }
     this.value = oldValue;
   }
-  formatForInternalInput(hex) {
-    return hex ? hex.replace("#", "") : "";
+  formatHexForInternalInput(hex) {
+    return hex ? hex.replace("#", "").slice(0, 6) : "";
   }
-  nudgeRGBChannels(color$1, amount) {
-    return color.rgb(color$1.array().map((channel) => channel + amount));
+  formatOpacityForInternalInput(color) {
+    return color ? `${alphaToOpacity(color.alpha())}` : "";
   }
-  handleKeyDown(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
+  nudgeRGBChannels(color$1, amount, context) {
+    let nudgedChannels;
+    const channels = color$1.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$1.alpha()) + amount);
+      nudgedChannels = [...rgbChannels, nudgedAlpha];
     }
+    return color(nudgedChannels);
   }
   get el() { return this; }
   static get watchers() { return {
@@ -188,36 +350,38 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   }; }
   static get style() { return colorPickerHexInputCss; }
 }, [1, "calcite-color-picker-hex-input", {
-    "hexLabel": [1, "hex-label"],
     "allowEmpty": [4, "allow-empty"],
+    "alphaChannel": [4, "alpha-channel"],
+    "hexLabel": [1, "hex-label"],
+    "messages": [16],
+    "numberingSystem": [1, "numbering-system"],
     "scale": [513],
     "value": [1537],
-    "numberingSystem": [1, "numbering-system"],
     "internalColor": [32],
     "setFocus": [64]
-  }, [[2, "keydown", "onInputKeyDown"]]]);
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["calcite-color-picker-hex-input", "calcite-color-picker-swatch", "calcite-icon", "calcite-input", "calcite-progress"];
+  const components = ["calcite-color-picker-hex-input", "calcite-icon", "calcite-input", "calcite-input-number", "calcite-progress"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-color-picker-hex-input":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, ColorPickerHexInput);
       }
       break;
-    case "calcite-color-picker-swatch":
+    case "calcite-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "calcite-icon":
+    case "calcite-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "calcite-input":
+    case "calcite-input-number":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
@@ -231,4 +395,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { ColorPickerHexInput as C, defineCustomElement as d };
+export { CSS$1 as C, DEFAULT_COLOR$1 as D, HSV_LIMITS as H, OPACITY_LIMITS as O, RGB_LIMITS as R, DIMENSIONS as a, DEFAULT_STORAGE_KEY_PREFIX as b, ColorPickerHexInput as c, defineCustomElement as d };