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

package/dist/collection/components/action-group/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.81
+ * v1.0.0-beta.82
  */
 export const SLOTS = {
   menuActions: "menu-actions",

package/dist/collection/components/action-menu/action-menu.js

@@ -1,11 +1,11 @@
 /*!
  * 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
+ * v1.0.0-beta.82
  */
 import { Component, h, Element, Event, Listen, Prop, Watch, Method, State } from "@stencil/core";
 import { CSS, SLOTS, ICONS } from "./resources";
-import { focusElement, getSlotted } from "../../utils/dom";
+import { focusElement, getSlotted, toAriaBoolean } from "../../utils/dom";
 import { Fragment } from "@stencil/core/internal";
 import { getRoundRobinIndex } from "../../utils/array";
 import { guid } from "../../utils/guid";
@@ -65,7 +65,7 @@ export class ActionMenu {
       }
       menuButtonEl.active = open;
       menuButtonEl.setAttribute("aria-controls", menuId);
-      menuButtonEl.setAttribute("aria-expanded", open.toString());
+      menuButtonEl.setAttribute("aria-expanded", toAriaBoolean(open));
       menuButtonEl.setAttribute("aria-haspopup", "true");
       if (!menuButtonEl.id) {
         menuButtonEl.id = menuButtonId;
@@ -105,12 +105,19 @@ export class ActionMenu {
     this.menuButtonClick = () => {
       this.toggleOpen();
     };
+    this.updateTooltip = (event) => {
+      const tooltips = event.target
+        .assignedElements({
+        flatten: true
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+      this.tooltipEl = tooltips[0];
+      this.setTooltipReferenceElement();
+    };
     this.setTooltipReferenceElement = () => {
-      const { el, expanded, menuButtonEl } = this;
-      const slotted = getSlotted(el, SLOTS.tooltip);
-      const tooltip = (slotted === null || slotted === void 0 ? void 0 : slotted.tagName) === "SLOT" ? slotted.assignedElements()[0] : slotted;
-      if ((tooltip === null || tooltip === void 0 ? void 0 : tooltip.tagName) === "CALCITE-TOOLTIP") {
-        tooltip.referenceElement = !expanded ? menuButtonEl : null;
+      const { tooltipEl, expanded, menuButtonEl } = this;
+      if (tooltipEl) {
+        tooltipEl.referenceElement = !expanded ? menuButtonEl : null;
       }
     };
     this.updateAction = (action, index) => {
@@ -258,10 +265,10 @@ export class ActionMenu {
     focusElement(this.open ? this.menuEl : this.menuButtonEl);
   }
   renderMenuButton() {
-    const { el, label, scale } = this;
+    const { label, scale } = this;
     const menuButtonSlot = (h("slot", { name: SLOTS.trigger },
       h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label })));
-    return getSlotted(el, SLOTS.tooltip) ? (h("calcite-tooltip-manager", null, menuButtonSlot)) : (menuButtonSlot);
+    return menuButtonSlot;
   }
   renderMenuItems() {
     const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
@@ -275,12 +282,7 @@ export class ActionMenu {
     return (h(Fragment, null,
       this.renderMenuButton(),
       this.renderMenuItems(),
-      h("slot", { name: SLOTS.tooltip })));
-  }
-  getAssignedElements() {
-    return Array.from(this.el.querySelectorAll("slot"))
-      .map((slot) => slot.assignedElements({ flatten: true }))
-      .reduce((ar, val) => ar.concat(val), []);
+      h("slot", { name: SLOTS.tooltip, onSlotchange: this.updateTooltip })));
   }
   isValidKey(key, supportedKeys) {
     return !!supportedKeys.find((k) => k === key);

package/dist/collection/components/action-menu/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   menu: "menu",

package/dist/collection/components/action-pad/action-pad.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -48,6 +48,7 @@ export class ActionPad {
     };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
+      this.calciteActionPadToggle.emit();
     };
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
@@ -55,7 +56,6 @@ export class ActionPad {
   }
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
-    this.calciteActionPadToggle.emit();
   }
   // --------------------------------------------------------------------------
   //

package/dist/collection/components/action-pad/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom",

package/dist/collection/components/alert/alert.css

@@ -315,6 +315,7 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
   flex: 0 0 auto;
   cursor: pointer;
   align-self: stretch;
+  overflow: hidden;
   border-style: none;
   background-color: var(--calcite-ui-foreground-1);
   padding-top: 0px;
@@ -322,7 +323,6 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
   color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  overflow: hidden;
   border-end-end-radius: var(--calcite-border-radius);
 }
 .alert-close:hover, .alert-close:focus {
@@ -340,6 +340,7 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
   align-items: center;
   justify-content: space-around;
   align-self: stretch;
+  overflow: hidden;
   background-color: var(--calcite-ui-foreground-1);
   text-align: center;
   font-weight: var(--calcite-font-weight-medium);
@@ -349,7 +350,6 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  overflow: hidden;
   border-left: 0px solid transparent;
   border-right: 0px solid transparent;
   border-top-right-radius: 0;
@@ -429,14 +429,10 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
 @keyframes dismissProgress {
   0% {
     width: 0px;
-  }
-  0% {
     opacity: 0.75;
   }
   100% {
     width: 100%;
-  }
-  100% {
     opacity: 1;
   }
 }

package/dist/collection/components/alert/alert.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.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { getSlotted, setRequestedIcon } from "../../utils/dom";
+import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "./interfaces";
 /** Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
@@ -118,7 +118,7 @@ export class Alert {
     const { active, autoDismiss, label, placement, queued, requestedIcon } = this;
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
-    return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role },
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role },
       h("div", { class: {
           container: true,
           queued,

package/dist/collection/components/alert/interfaces.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.81
+ * v1.0.0-beta.82
  */
 export var StatusIcons;
 (function (StatusIcons) {

package/dist/collection/components/alert/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.81
+ * v1.0.0-beta.82
  */
 export const TEXT = {
   intlClose: "Close"

package/dist/collection/components/avatar/avatar.css

@@ -80,8 +80,8 @@
 
 :host {
   display: inline-block;
-  border-radius: 50%;
   overflow: hidden;
+  border-radius: 50%;
 }
 
 :host([scale=s]) {

package/dist/collection/components/avatar/avatar.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, h, Prop, State } from "@stencil/core";
 import { isValidHex } from "../color-picker/utils";

package/dist/collection/components/avatar/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.81
+ * v1.0.0-beta.82
  */
 import { hexToRGB } from "../color-picker/utils";
 /**

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

@@ -1,11 +1,11 @@
 /*!
  * 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
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getSlotted } from "../../utils/dom";
+import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -35,6 +35,14 @@ export class Block {
      * When true, displays a drag handle in the header.
      */
     this.dragHandle = false;
+    /**
+     * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+     */
+    this.intlCollapse = TEXT.collapse;
+    /**
+     * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+     */
+    this.intlExpand = TEXT.expand;
     /** string to override English loading text
      * @default "Loading"
      */
@@ -124,7 +132,7 @@ export class Block {
     const buttonId = `${guid}-button`;
     const headerNode = (h("div", { class: CSS.headerContainer },
       this.dragHandle ? h("calcite-handle", null) : null,
-      collapsible ? (h("button", { "aria-controls": regionId, "aria-expanded": collapsible ? open.toString() : null, "aria-label": toggleLabel, class: CSS.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel },
+      collapsible ? (h("button", { "aria-controls": regionId, "aria-expanded": collapsible ? toAriaBoolean(open) : null, "aria-label": toggleLabel, class: CSS.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel },
         headerContent,
         !hasControl && !hasMenuActions ? (h("calcite-icon", { "aria-hidden": "true", class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent),
       loading ? (h("calcite-loader", { inline: true, "is-active": true, label: intlLoading })) : hasControl ? (h("div", { class: CSS.controlContainer },
@@ -132,11 +140,11 @@ export class Block {
       hasMenuActions ? (h("calcite-action-menu", { label: this.intlOptions || TEXT.options },
         h("slot", { name: SLOTS.headerMenuActions }))) : null));
     return (h(Host, null,
-      h("article", { "aria-busy": loading.toString(), class: {
+      h("article", { "aria-busy": toAriaBoolean(loading), class: {
           [CSS.article]: true
         } },
         headerNode,
-        h("section", { "aria-expanded": this.open.toString(), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, this.renderScrim()))));
+        h("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, this.renderScrim()))));
   }
   static get is() { return "calcite-block"; }
   static get encapsulation() { return "shadow"; }
@@ -252,10 +260,11 @@ export class Block {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Tooltip used for the toggle when expanded."
+        "text": "Aria-label for collapsing the toggle and tooltip used for the toggle when expanded."
       },
       "attribute": "intl-collapse",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "TEXT.collapse"
     },
     "intlExpand": {
       "type": "string",
@@ -269,10 +278,11 @@ export class Block {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Tooltip used for the toggle when collapsed."
+        "text": "Aria-label for expanding the toggle and tooltip used for the toggle when collapsed."
       },
       "attribute": "intl-expand",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "TEXT.expand"
     },
     "intlLoading": {
       "type": "string",

package/dist/collection/components/block/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   article: "article",

package/dist/collection/components/block-section/block-section.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.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, Prop, h, Host } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
+import { getElementDir, toAriaBoolean } from "../../utils/dom";
 import { CSS, ICONS, TEXT } from "./resources";
 import { guid } from "../../utils/guid";
 /**
@@ -84,7 +84,7 @@ export class BlockSection {
       this.renderStatusIcon()));
     return (h(Host, null,
       headerNode,
-      h("section", { "aria-expanded": open.toString(), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId },
+      h("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId },
         h("slot", null))));
   }
   static get is() { return "calcite-block-section"; }

package/dist/collection/components/block-section/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.81
+ * v1.0.0-beta.82
  */
 export {};

package/dist/collection/components/block-section/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   content: "content",

package/dist/collection/components/button/button.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.81
+ * v1.0.0-beta.82
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";
@@ -10,6 +10,7 @@ import { closestElementCrossShadowBoundary } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
+import { submitForm, resetForm } from "../../utils/form";
 /** 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. */
@@ -52,16 +53,16 @@ export class Button {
     this.hasLoader = false;
     // act on a requested or nearby form based on type
     this.handleClick = () => {
-      const { formEl, type } = this;
+      const { type } = this;
       if (this.href) {
         return;
       }
       // this.type refers to type attribute, not child element type
       if (type === "submit") {
-        formEl === null || formEl === void 0 ? void 0 : formEl.requestSubmit();
+        submitForm(this);
       }
       else if (type === "reset") {
-        formEl === null || formEl === void 0 ? void 0 : formEl.reset();
+        resetForm(this);
       }
     };
   }

package/dist/collection/components/button/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.81
+ * v1.0.0-beta.82
  */
 export {};

package/dist/collection/components/button/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   buttonLoader: "calcite-button--loader",

package/dist/collection/components/card/card.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.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
-import { getSlotted } from "../../utils/dom";
+import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /** Cards do not include a grid or bounding container
@@ -81,7 +81,7 @@ export class Card {
     return (h("div", { class: "calcite-card-container" },
       this.loading ? (h("div", { class: "calcite-card-loader-container" },
         h("calcite-loader", { active: true, label: this.intlLoading }))) : null,
-      h("section", { "aria-busy": this.loading.toString(), class: { [CSS.container]: true } },
+      h("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } },
         this.selectable ? this.renderCheckbox() : null,
         this.renderThumbnail(),
         this.renderHeader(),

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

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

@@ -109,6 +109,7 @@
   pointer-events: none;
   box-sizing: border-box;
   display: block;
+  overflow: hidden;
   background-color: var(--calcite-ui-foreground-1);
   fill: currentColor;
   stroke: currentColor;
@@ -116,7 +117,6 @@
   transition-property: all;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
   width: var(--calcite-checkbox-size);
   height: var(--calcite-checkbox-size);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
@@ -139,6 +139,10 @@
   transition: var(--calcite-animation-timing);
 }
 
+.toggle:focus-visible {
+  outline: none;
+}
+
 :host([disabled]) {
   pointer-events: none;
   cursor: default;

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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -9,6 +9,7 @@ import { HiddenFormInputSlot } from "../../utils/form";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
+import { toAriaBoolean } from "../../utils/dom";
 export class Checkbox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -118,7 +119,7 @@ export class Checkbox {
   // --------------------------------------------------------------------------
   render() {
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler },
-      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 },
+      h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 },
         h("svg", { class: "check-svg", viewBox: "0 0 16 16" },
           h("path", { d: this.getPath() })),
         h("slot", null)),

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

@@ -84,7 +84,7 @@
   --calcite-chip-spacing-unit-l: 0.5rem;
   --calcite-chip-spacing-unit-s: 0.25rem;
 }
-:host([scale=s]) .chip-image-container {
+:host([scale=s]) .image-container {
   height: 1.25rem;
   width: 1.25rem;
 }
@@ -95,7 +95,7 @@
   --calcite-chip-spacing-unit-l: 0.75rem;
   --calcite-chip-spacing-unit-s: 6px;
 }
-:host([scale=m]) .chip-image-container {
+:host([scale=m]) .image-container {
   height: 1.5rem;
   width: 1.5rem;
   padding-inline-start: 0.25rem;
@@ -107,7 +107,7 @@
   --calcite-chip-spacing-unit-l: 1rem;
   --calcite-chip-spacing-unit-s: 0.5rem;
 }
-:host([scale=l]) .chip-image-container {
+:host([scale=l]) .image-container {
   height: 2rem;
   width: 2rem;
   padding-left: 0.25rem;
@@ -191,21 +191,21 @@
   background-color: var(--calcite-chip-transparent-press);
 }
 
-.chip-image-container {
+.image-container {
   display: inline-flex;
-  border-radius: 50%;
   overflow: hidden;
+  border-radius: 50%;
 }
 
 :host slot[name=image]::slotted(*) {
   display: flex;
   height: 100%;
   width: 100%;
-  border-radius: 50%;
   overflow: hidden;
+  border-radius: 50%;
 }
 
-.calcite-chip--icon {
+.chip-icon {
   position: relative;
   margin-top: 0px;
   margin-bottom: 0px;
@@ -250,41 +250,44 @@
   color: var(--calcite-ui-text-1);
 }
 :host([color=grey][appearance=solid]) button,
-:host([color=grey][appearance=solid]) calcite-icon {
+:host([color=grey][appearance=solid]) .close-icon {
   color: var(--calcite-ui-text-3);
 }
+:host([color=grey][appearance=solid]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
+}
 
 :host([color=blue][appearance=clear]) {
   border-color: var(--calcite-ui-info);
 }
-:host([color=blue][appearance=clear]) .calcite-chip--icon {
-  color: var(--calcite-ui-info);
+:host([color=blue][appearance=clear]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-info));
 }
 
 :host([color=red][appearance=clear]) {
   border-color: var(--calcite-ui-danger);
 }
-:host([color=red][appearance=clear]) .calcite-chip--icon {
-  color: var(--calcite-ui-danger);
+:host([color=red][appearance=clear]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-danger));
 }
 
 :host([color=yellow][appearance=clear]) {
   border-color: var(--calcite-ui-warning);
 }
-:host([color=yellow][appearance=clear]) .calcite-chip--icon {
-  color: var(--calcite-ui-warning);
+:host([color=yellow][appearance=clear]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-warning));
 }
 
 :host([color=green][appearance=clear]) {
   border-color: var(--calcite-ui-success);
 }
-:host([color=green][appearance=clear]) .calcite-chip--icon {
-  color: var(--calcite-ui-success);
+:host([color=green][appearance=clear]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-success));
 }
 
 :host([color=grey][appearance=clear]) {
   border-color: var(--calcite-ui-border-1);
 }
-:host([color=grey][appearance=clear]) .calcite-chip--icon {
-  color: var(--calcite-ui-text-3);
+:host([color=grey][appearance=clear]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
 }