@esri/calcite-components 1.0.0-beta.78 → 1.0.0-beta.81

package/dist/collection/components/block-section/block-section.js

@@ -1,6 +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.0.0-beta.81
  */
 import { Component, Element, Event, Prop, h, Host } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";

package/dist/collection/components/block-section/interfaces.js

@@ -1,5 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 export {};

package/dist/collection/components/block-section/resources.js

@@ -1,6 +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.0.0-beta.81
  */
 export const CSS = {
   content: "content",

package/dist/collection/components/button/button.css

@@ -215,10 +215,23 @@
   line-height: inherit;
 }
 
-:host([loading]), :host([disabled]) {
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
+:host([loading]) {
   pointer-events: none;
 }
-:host([loading]) button, :host([loading]) a, :host([disabled]) button, :host([disabled]) a {
+:host([loading]) button, :host([loading]) a {
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }

package/dist/collection/components/button/button.js

@@ -1,6 +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.0.0-beta.81
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";
@@ -8,6 +9,7 @@ import { CSS, TEXT } from "./resources";
 import { closestElementCrossShadowBoundary } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
+import { updateHostInteraction } from "../../utils/interactive";
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
 /** @slot - A slot for adding text. */
@@ -38,6 +40,8 @@ export class Button {
     this.scale = "m";
     /** is the button a child of a calcite-split-button */
     this.splitChild = false;
+    /** The type attribute to apply to the button */
+    this.type = "button";
     /** specify the width of the button, defaults to auto */
     this.width = "auto";
     /** watches for changing text content **/
@@ -49,14 +53,15 @@ export class Button {
     // act on a requested or nearby form based on type
     this.handleClick = () => {
       const { formEl, type } = this;
+      if (this.href) {
+        return;
+      }
       // this.type refers to type attribute, not child element type
-      if (!this.href && type !== "button") {
-        if (type === "submit") {
-          formEl === null || formEl === void 0 ? void 0 : formEl.requestSubmit();
-        }
-        else if (type === "reset") {
-          formEl === null || formEl === void 0 ? void 0 : formEl.reset();
-        }
+      if (type === "submit") {
+        formEl === null || formEl === void 0 ? void 0 : formEl.requestSubmit();
+      }
+      else if (type === "reset") {
+        formEl === null || formEl === void 0 ? void 0 : formEl.reset();
       }
     };
   }
@@ -90,11 +95,11 @@ export class Button {
   componentWillLoad() {
     if (Build.isBrowser) {
       this.updateHasContent();
-      if (!this.href && !this.type) {
-        this.type = "submit";
-      }
     }
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   render() {
     const childElType = this.href ? "a" : "button";
     const Tag = childElType;
@@ -508,13 +513,14 @@ export class Button {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The type attribute to apply to the button"
       },
       "attribute": "type",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"button\""
     },
     "width": {
       "type": "string",

package/dist/collection/components/button/interfaces.js

@@ -1,5 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 export {};

package/dist/collection/components/button/resources.js

@@ -1,6 +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.0.0-beta.81
  */
 export const CSS = {
   buttonLoader: "calcite-button--loader",

package/dist/collection/components/card/card.js

@@ -1,6 +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.0.0-beta.81
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { getSlotted } from "../../utils/dom";

package/dist/collection/components/card/resources.js

@@ -1,6 +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.0.0-beta.81
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/checkbox/checkbox.css

@@ -142,8 +142,15 @@
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
 
 ::slotted(input[slot=hidden-form-input]) {
   bottom: 0 !important;

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

@@ -1,12 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { HiddenFormInputSlot } from "../../utils/form";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm } from "../../utils/form";
+import { updateHostInteraction } from "../../utils/interactive";
 export class Checkbox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -106,6 +108,9 @@ export class Checkbox {
     disconnectLabel(this);
     disconnectForm(this);
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods

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

@@ -1,6 +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.0.0-beta.81
  */
 import { Component, h, Prop, Event, Element, Method } from "@stencil/core";
 import { getSlotted } from "../../utils/dom";

package/dist/collection/components/chip/interfaces.js

@@ -1,5 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 export {};

package/dist/collection/components/chip/resources.js

@@ -1,6 +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.0.0-beta.81
  */
 export const CSS = {
   title: "title",

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

@@ -85,6 +85,19 @@
   font-weight: var(--calcite-font-weight-normal);
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
 :host([scale=s]) .container {
   width: 160px;
 }

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

@@ -1,14 +1,16 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 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 } from "../../utils/dom";
+import { focusElement, getElementDir } from "../../utils/dom";
 import { colorEqual, CSSColorMode, normalizeHex, parseMode } from "./utils";
 import { throttle } from "lodash-es";
 import { clamp } from "../../utils/math";
+import { updateHostInteraction } from "../../utils/interactive";
 const throttleFor60FpsInMs = 16;
 const defaultValue = normalizeHex(DEFAULT_COLOR.hex());
 const defaultFormat = "auto";
@@ -33,6 +35,10 @@ export class ColorPicker {
      * @internal
      */
     this.color = DEFAULT_COLOR;
+    /**
+     * When true, disabled prevents user interaction.
+     */
+    this.disabled = false;
     /**
      * The format of the value property.
      *
@@ -256,10 +262,12 @@ export class ColorPicker {
       if (region === "color-field") {
         this.hueThumbState = "drag";
         this.captureColorFieldColor(offsetX, offsetY);
+        this.colorFieldScopeNode.focus();
       }
       else if (region === "slider") {
         this.sliderThumbState = "drag";
         this.captureHueSliderColor(offsetX);
+        this.hueScopeNode.focus();
       }
       // prevent text selection outside of color field & slider area
       event.preventDefault();
@@ -378,6 +386,9 @@ export class ColorPicker {
     this.storeColorFieldScope = (node) => {
       this.colorFieldScopeNode = node;
     };
+    this.storeHueScope = (node) => {
+      this.hueScopeNode = node;
+    };
     this.renderChannelsTabTitle = (channelMode) => {
       const { channelMode: activeChannelMode, intlRgb, intlHsv } = this;
       const active = channelMode === activeChannelMode;
@@ -392,10 +403,13 @@ export class ColorPicker {
       const channelAriaLabels = isRgb
         ? [intlRed, intlGreen, intlBlue]
         : [intlHue, intlSaturation, intlValue];
+      const direction = getElementDir(this.el);
       return (h("calcite-tab", { active: active, class: CSS.control, key: channelMode },
-        h("div", { class: CSS.channels }, channels.map((channel, index) => this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index])))));
+        h("div", { class: CSS.channels, dir: "ltr" }, channels.map((channel, index) => 
+        /* the channel container is ltr, so we apply the host's direction */
+        this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index], direction)))));
     };
-    this.renderChannel = (value, index, label, ariaLabel) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, label: ariaLabel, numberButtonType: "none", onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
+    this.renderChannel = (value, index, label, ariaLabel, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
     this.deleteColor = () => {
       const colorToDelete = this.color.hex();
       const inStorage = this.savedColors.indexOf(colorToDelete) > -1;
@@ -450,14 +464,10 @@ export class ColorPicker {
     this.drawColorFieldAndSlider();
     this.updateChannelsFromColor(color);
     this.previousColor = oldColor;
-    if (this.internalColorUpdateContext) {
-      return;
-    }
-    this.value = this.toValue(color);
   }
   handleFormatChange(format) {
     this.setMode(format);
-    this.value = this.toValue(this.color);
+    this.internalColorSet(this.color, false, "internal");
   }
   handleScaleChange(scale = "m") {
     this.updateDimensions(scale);
@@ -477,10 +487,10 @@ export class ColorPicker {
       this.setMode(nextMode);
     }
     const dragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
-    if (this.internalColorUpdateContext) {
-      if (this.internalColorUpdateContext === "initial") {
-        return;
-      }
+    if (this.internalColorUpdateContext === "initial") {
+      return;
+    }
+    if (this.internalColorUpdateContext === "user-interaction") {
       this.calciteColorPickerInput.emit();
       if (!dragging) {
         this.calciteColorPickerChange.emit();
@@ -490,11 +500,7 @@ export class ColorPicker {
     const color = allowEmpty && !value ? null : Color(value);
     const colorChanged = !colorEqual(color, this.color);
     if (modeChanged || colorChanged) {
-      this.color = color;
-      this.calciteColorPickerInput.emit();
-      if (!dragging) {
-        this.calciteColorPickerChange.emit();
-      }
+      this.internalColorSet(color, true, "internal");
     }
   }
   //--------------------------------------------------------------------------
@@ -564,6 +570,9 @@ export class ColorPicker {
     document.removeEventListener("mousemove", this.globalMouseMoveHandler);
     document.removeEventListener("mouseup", this.globalMouseUpHandler);
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   //--------------------------------------------------------------------------
   //
   //  Render Methods
@@ -585,7 +594,7 @@ export class ColorPicker {
             [CSS.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
           }, onMouseDown: this.handleColorFieldAndSliderMouseDown, onMouseEnter: this.handleColorFieldAndSliderMouseEnterOrMove, onMouseLeave: this.handleColorFieldAndSliderMouseLeave, onMouseMove: this.handleColorFieldAndSliderMouseEnterOrMove, ref: this.initColorFieldAndSlider }),
         h("div", { "aria-label": vertical ? this.intlValue : this.intlSaturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0" }),
-        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" })),
+        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, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })),
       hideHex && hideChannels ? null : (h("div", { class: {
           [CSS.controlSection]: true,
           [CSS.section]: true
@@ -641,7 +650,7 @@ export class ColorPicker {
     }
     return "none";
   }
-  internalColorSet(color, skipEqual = true, context = "internal") {
+  internalColorSet(color, skipEqual = true, context = "user-interaction") {
     if (skipEqual && colorEqual(color, this.color)) {
       return;
     }
@@ -854,6 +863,24 @@ export class ColorPicker {
       },
       "defaultValue": "DEFAULT_COLOR"
     },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disabled prevents user interaction."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "format": {
       "type": "string",
       "mutable": false,

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

@@ -1,5 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 export {};

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

@@ -1,6 +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.0.0-beta.81
  */
 import Color from "color";
 export const CSS = {

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

@@ -1,6 +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.0.0-beta.81
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

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

@@ -1,9 +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.0.0-beta.81
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { hexChar, hexToRGB, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
+import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
 import Color from "color";
 import { CSS } from "./resources";
 import { focusElement } from "../../utils/dom";
@@ -55,32 +56,13 @@ export class ColorPickerHexInput {
           : this.formatForInternalInput(rgbToHex(this.internalColor.object()));
     };
     this.onInputChange = () => {
-      const inputValue = this.inputNode.value;
-      let value;
-      if (inputValue) {
-        const hex = inputValue;
-        const color = hexToRGB(`#${hex}`);
-        if (!color) {
-          return;
-        }
-        value = normalizeHex(hex);
-      }
-      else if (this.allowEmpty) {
-        value = null;
-      }
-      this.value = value;
-      this.calciteColorPickerHexInputChange.emit();
+      this.internalSetValue(this.inputNode.value, this.value);
     };
     /**
      * The last valid/selected color. Used as a fallback if an invalid hex code is entered.
      */
     this.internalColor = DEFAULT_COLOR;
     this.previousNonNullValue = this.value;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     this.storeInputRef = (node) => {
       this.inputNode = node;
     };
@@ -95,38 +77,16 @@ export class ColorPickerHexInput {
     if (value) {
       const normalized = normalizeHex(value);
       if (isValidHex(normalized)) {
-        this.internalColor = Color(normalized);
-        this.value = normalized;
+        this.internalSetValue(normalized, normalized, false);
       }
       return;
     }
     if (allowEmpty) {
-      this.internalColor = null;
-      this.value = null;
+      this.internalSetValue(null, null, false);
     }
   }
   handleValueChange(value, oldValue) {
-    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;
-        if (changed) {
-          this.calciteColorPickerHexInputChange.emit();
-        }
-        return;
-      }
-    }
-    else if (this.allowEmpty) {
-      this.internalColor = null;
-      this.value = null;
-      this.calciteColorPickerHexInputChange.emit();
-      return;
-    }
-    this.value = oldValue;
+    this.internalSetValue(value, oldValue, false);
   }
   // using @Listen as a workaround for VDOM listener not firing
   onInputKeyDown(event) {
@@ -138,15 +98,16 @@ export class ColorPickerHexInput {
       return;
     }
     const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
+    const oldValue = this.value;
     if (isNudgeKey) {
       if (!value) {
-        this.value = this.previousNonNullValue;
+        this.internalSetValue(this.previousNonNullValue, oldValue);
         event.preventDefault();
         return;
       }
       const direction = key === "ArrowUp" ? 1 : -1;
       const bump = shiftKey ? 10 : 1;
-      this.value = normalizeHex(this.nudgeRGBChannels(internalColor, bump * direction).hex());
+      this.internalSetValue(normalizeHex(this.nudgeRGBChannels(internalColor, bump * direction).hex()), oldValue);
       event.preventDefault();
       return;
     }
@@ -178,6 +139,36 @@ export class ColorPickerHexInput {
   async setFocus() {
     focusElement(this.inputNode);
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  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;
+        if (changed && emit) {
+          this.calciteColorPickerHexInputChange.emit();
+        }
+        return;
+      }
+    }
+    else if (this.allowEmpty) {
+      this.internalColor = null;
+      this.value = null;
+      if (emit) {
+        this.calciteColorPickerHexInputChange.emit();
+      }
+      return;
+    }
+    this.value = oldValue;
+  }
   formatForInternalInput(hex) {
     return hex ? hex.replace("#", "") : "";
   }

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

@@ -1,6 +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.0.0-beta.81
  */
 export const CSS = {
   container: "container",

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

@@ -1,6 +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.0.0-beta.81
  */
 import { Component, Element, h, Prop, Watch } from "@stencil/core";
 import Color from "color";

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

@@ -1,6 +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.0.0-beta.81
  */
 export const CSS = {
   swatch: "swatch",

package/dist/collection/components/combobox/combobox.css

@@ -92,9 +92,15 @@
 
 :host([disabled]) {
   pointer-events: none;
+  cursor: default;
   -webkit-user-select: none;
           user-select: none;
-  opacity: 0.5;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
 }
 
 :host([scale=s]) {