@esri/calcite-components 1.0.0-beta.83 → 1.0.0-beta.86

package/dist/collection/components/card/card.css

@@ -88,6 +88,7 @@
   height: 100%;
   flex-direction: column;
   justify-content: space-between;
+  overflow: hidden;
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-2);
@@ -136,7 +137,8 @@
   align-items: center;
 }
 
-.header, .footer {
+.header, 
+.footer {
   display: flex;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -176,7 +178,8 @@
   border-color: var(--calcite-ui-brand);
 }
 
-slot[name=title]::slotted(*), *::slotted([slot=title]) {
+slot[name=title]::slotted(*), 
+*::slotted([slot=title]) {
   margin: 0px;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
@@ -184,7 +187,8 @@ slot[name=title]::slotted(*), *::slotted([slot=title]) {
   color: var(--calcite-ui-text-1);
 }
 
-slot[name=subtitle]::slotted(*), *::slotted([slot=subtitle]) {
+slot[name=subtitle]::slotted(*), 
+*::slotted([slot=subtitle]) {
   margin: 0px;
   margin-top: 0.5rem;
   font-size: var(--calcite-font-size--2);
@@ -193,19 +197,22 @@ slot[name=subtitle]::slotted(*), *::slotted([slot=subtitle]) {
   color: var(--calcite-ui-text-2);
 }
 
-slot[name=thumbnail]::slotted(img), img::slotted([slot=thumbnail]) {
+slot[name=thumbnail]::slotted(img), 
+img::slotted([slot=thumbnail]) {
   min-width: 100%;
   max-width: 100%;
 }
 
-slot[name=footer-leading]::slotted(*), *::slotted([slot=footer-leading]) {
+slot[name=footer-leading]::slotted(*), 
+*::slotted([slot=footer-leading]) {
   align-self: center;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
   margin-inline-end: auto;
 }
 
-slot[name=footer-trailing]::slotted(*), *::slotted([slot=footer-trailing]) {
+slot[name=footer-trailing]::slotted(*), 
+*::slotted([slot=footer-trailing]) {
   align-self: center;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
@@ -233,6 +240,7 @@ slot[name=footer-trailing]::slotted(*), *::slotted([slot=footer-trailing]) {
   width: 40%;
   align-items: flex-start;
 }
-.calcite-card-container.inline slot[name=thumbnail]::slotted(img), .calcite-card-container.inline img::slotted([slot=thumbnail]) {
+.calcite-card-container.inline slot[name=thumbnail]::slotted(img), 
+.calcite-card-container.inline img::slotted([slot=thumbnail]) {
   width: 100%;
 }

package/dist/collection/components/card/card.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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/card/resources.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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   container: "container",

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

@@ -124,7 +124,8 @@
   color: var(--calcite-ui-background);
 }
 
-:host([checked]) .check-svg, :host([indeterminate]) .check-svg {
+:host([checked]) .check-svg, 
+:host([indeterminate]) .check-svg {
   background-color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
 }
@@ -137,7 +138,7 @@
 .toggle {
   outline-color: transparent;
 }
-.toggle:active, .toggle:focus, .toggle:focus-visible {
+.toggle:active,  .toggle:focus,  .toggle:focus-visible {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }

package/dist/collection/components/checkbox/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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";

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

@@ -143,11 +143,13 @@
   padding: 0 var(--calcite-chip-spacing-unit-l);
 }
 
-:host([dismissible]) span {
+:host([dismissible]) span,
+:host([closable]) span {
   padding-inline: var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s);
 }
 
-:host([icon]:not([dismissible])) span {
+:host([icon]:not([dismissible])) span,
+:host([icon]:not([closable])) span {
   padding: 0 var(--calcite-chip-spacing-unit-l);
 }
 
@@ -285,4 +287,8 @@
 }
 :host([color=grey][appearance=clear]) .chip-icon {
   color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
+}
+
+:host([closed]) {
+  display: none;
 }

package/dist/collection/components/chip/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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, h, Prop, Event, Element, Method } from "@stencil/core";
 import { getSlotted } from "../../utils/dom";
@@ -23,8 +23,14 @@ export class Chip {
     this.appearance = "solid";
     /** specify the color of the button, defaults to blue */
     this.color = "grey";
-    /** Optionally show a button the user can click to dismiss the chip */
+    /**
+     * Optionally show a button the user can click to dismiss the chip
+     *
+     * @deprecated use closable instead
+     */
     this.dismissible = false;
+    /** When true, show abutton user can click to dismiss the chip. */
+    this.closable = false;
     /**
      * Aria label for the "x" button
      *
@@ -35,6 +41,8 @@ export class Chip {
     this.iconFlipRtl = false;
     /** specify the scale of the chip, defaults to m */
     this.scale = "m";
+    /** When true, hides the chip  */
+    this.closed = false;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -43,6 +51,7 @@ export class Chip {
     this.closeClickHandler = (event) => {
       event.preventDefault();
       this.calciteChipDismiss.emit(this.el);
+      this.closed = true;
     };
     this.guid = guid();
   }
@@ -87,7 +96,7 @@ export class Chip {
       this.icon ? iconEl : null,
       h("span", { class: CSS.title, id: this.guid },
         h("slot", null)),
-      this.dismissible ? closeButton : null));
+      this.closable || this.dismissible ? closeButton : null));
   }
   static get is() { return "calcite-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -158,13 +167,34 @@ export class Chip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use closable instead"
+          }],
         "text": "Optionally show a button the user can click to dismiss the chip"
       },
       "attribute": "dismissible",
       "reflect": true,
       "defaultValue": "false"
     },
+    "closable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, show abutton user can click to dismiss the chip."
+      },
+      "attribute": "closable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "dismissLabel": {
       "type": "string",
       "mutable": false,
@@ -260,6 +290,24 @@ export class Chip {
       },
       "attribute": "value",
       "reflect": false
+    },
+    "closed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, hides the chip"
+      },
+      "attribute": "closed",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

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

@@ -1,6 +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.83
+ * v1.0.0-beta.86
  */
 export {};

package/dist/collection/components/chip/resources.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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   title: "title",

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

@@ -191,6 +191,7 @@
 
 .color-field-and-slider {
   margin-bottom: -16px;
+  touch-action: none;
 }
 .color-field-and-slider--interactive {
   cursor: pointer;

package/dist/collection/components/color-picker/color-picker.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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";
@@ -286,7 +286,7 @@ export class ColorPicker {
         this.handleSavedColorSelect(event);
       }
     };
-    this.handleColorFieldAndSliderMouseLeave = () => {
+    this.handleColorFieldAndSliderPointerLeave = () => {
       this.colorFieldAndSliderInteractive = false;
       this.colorFieldAndSliderHovered = false;
       if (this.sliderThumbState !== "drag" && this.hueThumbState !== "drag") {
@@ -295,27 +295,28 @@ export class ColorPicker {
         this.drawColorFieldAndSlider();
       }
     };
-    this.handleColorFieldAndSliderMouseDown = (event) => {
+    this.handleColorFieldAndSliderPointerDown = (event) => {
+      var _a, _b;
       const { offsetX, offsetY } = event;
       const region = this.getCanvasRegion(offsetY);
       if (region === "color-field") {
         this.hueThumbState = "drag";
         this.captureColorFieldColor(offsetX, offsetY);
-        this.colorFieldScopeNode.focus();
+        (_a = this.colorFieldScopeNode) === null || _a === void 0 ? void 0 : _a.focus();
       }
       else if (region === "slider") {
         this.sliderThumbState = "drag";
         this.captureHueSliderColor(offsetX);
-        this.hueScopeNode.focus();
+        (_b = this.hueScopeNode) === null || _b === void 0 ? void 0 : _b.focus();
       }
       // prevent text selection outside of color field & slider area
       event.preventDefault();
-      document.addEventListener("mousemove", this.globalMouseMoveHandler);
-      document.addEventListener("mouseup", this.globalMouseUpHandler, { once: true });
+      document.addEventListener("pointermove", this.globalPointerMoveHandler);
+      document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
       this.activeColorFieldAndSliderRect =
         this.fieldAndSliderRenderingContext.canvas.getBoundingClientRect();
     };
-    this.globalMouseUpHandler = () => {
+    this.globalPointerUpHandler = () => {
       const previouslyDragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
       this.hueThumbState = "idle";
       this.sliderThumbState = "idle";
@@ -325,7 +326,7 @@ export class ColorPicker {
         this.calciteColorPickerChange.emit();
       }
     };
-    this.globalMouseMoveHandler = (event) => {
+    this.globalPointerMoveHandler = (event) => {
       const { el, dimensions } = this;
       const sliderThumbDragging = this.sliderThumbState === "drag";
       const hueThumbDragging = this.hueThumbState === "drag";
@@ -352,7 +353,7 @@ export class ColorPicker {
           samplingX = 0;
         }
         else {
-          samplingX = colorFieldWidth;
+          samplingX = colorFieldWidth - 1;
         }
         if (clientY < colorFieldAndSliderRect.y + colorFieldHeight + hueSliderHeight &&
           clientY > colorFieldAndSliderRect.y) {
@@ -372,7 +373,7 @@ export class ColorPicker {
         this.captureHueSliderColor(samplingX);
       }
     };
-    this.handleColorFieldAndSliderMouseEnterOrMove = ({ offsetX, offsetY }) => {
+    this.handleColorFieldAndSliderPointerEnterOrMove = ({ offsetX, offsetY }) => {
       const { dimensions: { colorField, slider, thumb } } = this;
       this.colorFieldAndSliderInteractive = offsetY <= colorField.height + slider.height;
       this.colorFieldAndSliderHovered = true;
@@ -448,7 +449,7 @@ export class ColorPicker {
         /* 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, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, 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", numberingSystem: this.numberingSystem, onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, 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;
@@ -490,13 +491,7 @@ export class ColorPicker {
     };
     this.initColorFieldAndSlider = (canvas) => {
       this.fieldAndSliderRenderingContext = canvas.getContext("2d");
-      this.setCanvasContextSize(canvas, {
-        width: this.dimensions.colorField.width,
-        height: this.dimensions.colorField.height +
-          this.dimensions.slider.height +
-          this.getSliderCapSpacing() * 2
-      });
-      this.drawColorFieldAndSlider();
+      this.updateCanvasSize(canvas);
     };
   }
   handleColorChange(color, oldColor) {
@@ -509,7 +504,9 @@ export class ColorPicker {
     this.internalColorSet(this.color, false, "internal");
   }
   handleScaleChange(scale = "m") {
+    var _a;
     this.updateDimensions(scale);
+    this.updateCanvasSize((_a = this.fieldAndSliderRenderingContext) === null || _a === void 0 ? void 0 : _a.canvas);
   }
   handleValueChange(value, oldValue) {
     const { allowEmpty, format } = this;
@@ -606,8 +603,8 @@ export class ColorPicker {
     }
   }
   disconnectedCallback() {
-    document.removeEventListener("mousemove", this.globalMouseMoveHandler);
-    document.removeEventListener("mouseup", this.globalMouseUpHandler);
+    document.removeEventListener("pointermove", this.globalPointerMoveHandler);
+    document.removeEventListener("pointerup", this.globalPointerUpHandler);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -631,7 +628,7 @@ export class ColorPicker {
         h("canvas", { class: {
             [CSS.colorFieldAndSlider]: true,
             [CSS.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
-          }, onMouseDown: this.handleColorFieldAndSliderMouseDown, onMouseEnter: this.handleColorFieldAndSliderMouseEnterOrMove, onMouseLeave: this.handleColorFieldAndSliderMouseLeave, onMouseMove: this.handleColorFieldAndSliderMouseEnterOrMove, ref: this.initColorFieldAndSlider }),
+          }, onPointerDown: this.handleColorFieldAndSliderPointerDown, onPointerEnter: this.handleColorFieldAndSliderPointerEnterOrMove, onPointerLeave: this.handleColorFieldAndSliderPointerLeave, onPointerMove: this.handleColorFieldAndSliderPointerEnterOrMove, 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, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })),
       hideHex && hideChannels ? null : (h("div", { class: {
@@ -643,7 +640,7 @@ export class ColorPicker {
               [CSS.header]: true,
               [CSS.headerHex]: true
             } }, intlHex),
-          h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))),
+          h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))),
         hideChannels ? null : (h("calcite-tabs", { class: {
             [CSS.colorModeContainer]: true,
             [CSS.splitSection]: true
@@ -755,6 +752,18 @@ export class ColorPicker {
     const context = canvas.getContext("2d");
     context.scale(devicePixelRatio, devicePixelRatio);
   }
+  updateCanvasSize(canvas) {
+    if (!canvas) {
+      return;
+    }
+    this.setCanvasContextSize(canvas, {
+      width: this.dimensions.colorField.width,
+      height: this.dimensions.colorField.height +
+        this.dimensions.slider.height +
+        this.getSliderCapSpacing() * 2
+    });
+    this.drawColorFieldAndSlider();
+  }
   containsPoint(testPointX, testPointY, boundsX, boundsY, boundsRadius) {
     return (Math.pow(testPointX - boundsX, 2) + Math.pow(testPointY - boundsY, 2) <=
       Math.pow(boundsRadius, 2));
@@ -1444,6 +1453,23 @@ export class ColorPicker {
       "attribute": "storage-id",
       "reflect": false
     },
+    "numberingSystem": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "standard UniCode numeral system tag for localization"
+      },
+      "attribute": "numbering-system",
+      "reflect": false
+    },
     "value": {
       "type": "string",
       "mutable": true,

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

@@ -1,6 +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.83
+ * v1.0.0-beta.86
  */
 export {};

package/dist/collection/components/color-picker/resources.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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import Color from "color";
 export const CSS = {

package/dist/collection/components/color-picker/utils.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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
@@ -129,7 +129,7 @@ export class ColorPickerHexInput {
     const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
     return (h("div", { class: CSS.container },
-      h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
+      h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, numberingSystem: this.numberingSystem, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, 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));
   }
   //--------------------------------------------------------------------------
@@ -291,6 +291,23 @@ export class ColorPickerHexInput {
       "attribute": "value",
       "reflect": true,
       "defaultValue": "normalizeHex(DEFAULT_COLOR.hex())"
+    },
+    "numberingSystem": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "standard UniCode numeral system tag for localization"
+      },
+      "attribute": "numbering-system",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/color-picker-hex-input/resources.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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/color-picker-swatch/color-picker-swatch.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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, h, Prop, Watch } from "@stencil/core";
 import Color from "color";

package/dist/collection/components/color-picker-swatch/resources.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.0.0-beta.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   swatch: "swatch",

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

@@ -133,7 +133,8 @@
   padding: calc(var(--calcite-combobox-item-spacing-unit-s) / 4) var(--calcite-combobox-item-spacing-unit-l);
 }
 
-:host(:focus-within) .wrapper, .wrapper--active {
+:host(:focus-within) .wrapper, 
+.wrapper--active {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -231,7 +232,8 @@
   padding-right: var(--calcite-combobox-item-spacing-unit-l);
 }
 
-.icon-end, .icon-start {
+.icon-end, 
+.icon-start {
   display: flex;
   width: 1rem;
   cursor: pointer;
@@ -285,6 +287,12 @@
   visibility: visible;
 }
 
+@media (forced-colors: active) {
+  .wrapper,
+.popper-container--active {
+    border: 1px solid canvasText;
+  }
+}
 .screen-readers-only {
   position: absolute;
   width: 1px;