@esri/calcite-components 1.0.0-beta.77 → 1.0.0-beta.80

package/dist/collection/components/accordion-item/accordion-item.js

@@ -5,6 +5,7 @@
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
+import { guid } from "../../utils/guid";
 /**
  * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.
  */
@@ -17,6 +18,12 @@ export class AccordionItem {
     //--------------------------------------------------------------------------
     /** Indicates whether the item is active. */
     this.active = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.guid = guid();
     /** what icon position does the parent accordion specify */
     this.iconPosition = "end";
     /** handle clicks on item header */
@@ -43,12 +50,15 @@ export class AccordionItem {
   render() {
     const dir = getElementDir(this.el);
     const iconEl = h("calcite-icon", { class: "accordion-item-icon", icon: this.icon, scale: "s" });
-    return (h(Host, { "aria-expanded": this.active.toString(), tabindex: "0" },
+    const { guid } = this;
+    const regionId = `${guid}-region`;
+    const buttonId = `${guid}-button`;
+    return (h(Host, { tabindex: "0" },
       h("div", { class: {
           [`icon-position--${this.iconPosition}`]: true,
           [`icon-type--${this.iconType}`]: true
         } },
-        h("div", { class: { "accordion-item-header": true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.itemHeaderClickHandler },
+        h("div", { "aria-controls": regionId, class: { "accordion-item-header": true, [CSS_UTILITY.rtl]: dir === "rtl" }, id: buttonId, onClick: this.itemHeaderClickHandler, role: "button" },
           this.icon ? iconEl : null,
           h("div", { class: "accordion-item-header-text" },
             h("span", { class: "accordion-item-title" }, this.itemTitle),
@@ -60,7 +70,7 @@ export class AccordionItem {
                 : this.active
                   ? "minus"
                   : "plus", scale: "s" })),
-        h("div", { class: "accordion-item-content" },
+        h("div", { "aria-expanded": this.active.toString(), "aria-labelledby": buttonId, class: "accordion-item-content", id: regionId, role: "region" },
           h("slot", null)))));
   }
   //--------------------------------------------------------------------------

package/dist/collection/components/action/action.css

@@ -96,6 +96,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;
 }
 
 .button {

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

@@ -5,6 +5,7 @@
 import { Component, Element, Event, Host, Method, Prop, h, forceUpdate } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
 import { createObserver } from "../../utils/observers";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding a `calcite-icon`.
  */
@@ -74,6 +75,9 @@ export class Action {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -100,7 +104,8 @@ export class Action {
     var _a;
     const { loading, icon, scale, el, intlLoading } = this;
     const iconScale = scale === "l" ? "m" : "s";
-    const calciteLoaderNode = loading ? (h("calcite-loader", { active: true, inline: true, label: intlLoading, scale: iconScale })) : null;
+    const loaderScale = scale === "l" ? "l" : "m";
+    const calciteLoaderNode = loading ? (h("calcite-loader", { active: true, inline: true, label: intlLoading, scale: loaderScale })) : null;
     const calciteIconNode = icon ? h("calcite-icon", { icon: icon, scale: iconScale }) : null;
     const iconNode = calciteLoaderNode || calciteIconNode;
     const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);

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

@@ -98,16 +98,11 @@ export class ActionBar {
       this.expandToggleEl = el;
     };
   }
-  expandHandler(expandDisabled) {
-    if (!expandDisabled) {
-      toggleChildActionText({ parent: this.el, expanded: this.expanded });
-    }
+  expandHandler() {
     this.conditionallyOverflowActions();
   }
   expandedHandler(expanded) {
-    if (!this.expandDisabled) {
-      toggleChildActionText({ parent: this.el, expanded });
-    }
+    toggleChildActionText({ parent: this.el, expanded });
     this.calciteActionBarToggle.emit();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
@@ -125,10 +120,8 @@ export class ActionBar {
   }
   connectedCallback() {
     var _a, _b;
-    const { el, expandDisabled, expanded } = this;
-    if (!expandDisabled) {
-      toggleChildActionText({ parent: el, expanded });
-    }
+    const { el, expanded } = this;
+    toggleChildActionText({ parent: el, expanded });
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
     if (!this.overflowActionsDisabled) {
       (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);

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

@@ -263,10 +263,10 @@ export class ActionMenu {
     return getSlotted(el, SLOTS.tooltip) ? (h("calcite-tooltip-manager", null, menuButtonSlot)) : (menuButtonSlot);
   }
   renderMenuItems() {
-    const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning } = this;
+    const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
     const activeAction = actionElements[activeMenuItemIndex];
     const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
-    return (h("calcite-popover", { disablePointer: true, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl },
+    return (h("calcite-popover", { disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl },
       h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, onKeyDown: this.menuActionsContainerKeyDown, onKeyUp: this.menuActionsContainerKeyUp, ref: (el) => (this.menuEl = el), role: "menu", tabIndex: -1 },
         h("slot", null))));
   }
@@ -315,12 +315,12 @@ export class ActionMenu {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Placement[]",
-        "resolved": "Placement[]",
+        "original": "ComputedPlacement[]",
+        "resolved": "ComputedPlacement[]",
         "references": {
-          "Placement": {
+          "ComputedPlacement": {
             "location": "import",
-            "path": "@popperjs/core"
+            "path": "../../utils/popper"
           }
         }
       },
@@ -407,7 +407,7 @@ export class ActionMenu {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
+            "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
         "text": "Determines where the component will be positioned relative to the referenceElement."
       },

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

@@ -52,15 +52,8 @@ export class ActionPad {
       this.expandToggleEl = el;
     };
   }
-  expandHandler(expandDisabled) {
-    if (!expandDisabled) {
-      toggleChildActionText({ parent: this.el, expanded: this.expanded });
-    }
-  }
   expandedHandler(expanded) {
-    if (!this.expandDisabled) {
-      toggleChildActionText({ parent: this.el, expanded });
-    }
+    toggleChildActionText({ parent: this.el, expanded });
     this.calciteActionPadToggle.emit();
   }
   // --------------------------------------------------------------------------
@@ -75,10 +68,8 @@ export class ActionPad {
     disconnectConditionalSlotComponent(this);
   }
   componentWillLoad() {
-    const { el, expandDisabled, expanded } = this;
-    if (!expandDisabled) {
-      toggleChildActionText({ parent: el, expanded });
-    }
+    const { el, expanded } = this;
+    toggleChildActionText({ parent: el, expanded });
   }
   // --------------------------------------------------------------------------
   //
@@ -300,9 +291,6 @@ export class ActionPad {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "expandDisabled",
-      "methodName": "expandHandler"
-    }, {
       "propName": "expanded",
       "methodName": "expandedHandler"
     }]; }

package/dist/collection/components/block/block.css

@@ -122,6 +122,19 @@
   flex-basis: auto;
 }
 
+: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;
+}
+
 /* Shared styles for header elements */
 .header {
   margin: 0px;
@@ -325,13 +338,4 @@ calcite-action-menu {
 }
 :host([open]) .header .title .heading {
   color: var(--calcite-ui-text-1);
-}
-
-:host([disabled]) {
-  pointer-events: none;
-  -webkit-user-select: none;
-          user-select: none;
-}
-:host([disabled]) .header-container {
-  opacity: 0.5;
 }

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

@@ -7,6 +7,8 @@ import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { updateHostInteraction } from "../../utils/interactive";
+import { guid } from "../../utils/guid";
 /**
  * @slot - A slot for adding content to the block.
  * @slot icon - A slot for adding a leading header icon.
@@ -48,6 +50,7 @@ export class Block {
      * When true, the block's content will be displayed.
      */
     this.open = false;
+    this.guid = guid();
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -58,6 +61,14 @@ export class Block {
       this.calciteBlockToggle.emit();
     };
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -75,9 +86,9 @@ export class Block {
   //
   // --------------------------------------------------------------------------
   renderScrim() {
-    const { disabled, loading } = this;
+    const { loading } = this;
     const defaultSlot = h("slot", null);
-    return [loading || disabled ? h("calcite-scrim", { loading: loading }) : null, defaultSlot];
+    return [loading ? h("calcite-scrim", { loading: loading }) : null, defaultSlot];
   }
   renderIcon() {
     const { el, status } = this;
@@ -99,7 +110,7 @@ export class Block {
       summary ? h("div", { class: CSS.summary }, summary) : null)) : null;
   }
   render() {
-    const { collapsible, disabled, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
+    const { collapsible, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
     const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
     const headerContent = (h("header", { class: CSS.header },
       this.renderIcon(),
@@ -107,21 +118,24 @@ export class Block {
     const hasControl = !!getSlotted(el, SLOTS.control);
     const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);
     const collapseIcon = open ? ICONS.opened : ICONS.closed;
+    const { guid } = this;
+    const regionId = `${guid}-region`;
+    const buttonId = `${guid}-button`;
     const headerNode = (h("div", { class: CSS.headerContainer },
       this.dragHandle ? h("calcite-handle", null) : null,
-      collapsible ? (h("button", { "aria-expanded": collapsible ? open.toString() : null, "aria-label": toggleLabel, class: CSS.toggle, onClick: this.onHeaderClick, title: toggleLabel },
+      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 },
         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 },
         h("slot", { name: SLOTS.control }))) : null,
       hasMenuActions ? (h("calcite-action-menu", { label: this.intlOptions || TEXT.options },
         h("slot", { name: SLOTS.headerMenuActions }))) : null));
-    return (h(Host, { tabIndex: disabled ? -1 : null },
+    return (h(Host, null,
       h("article", { "aria-busy": loading.toString(), class: {
           [CSS.article]: true
         } },
         headerNode,
-        h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
+        h("section", { "aria-expanded": this.open.toString(), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, this.renderScrim()))));
   }
   static get is() { return "calcite-block"; }
   static get encapsulation() { return "shadow"; }

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

@@ -2,9 +2,10 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Event, Prop, h } from "@stencil/core";
+import { Component, Element, Event, Prop, h, Host } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { CSS, ICONS, TEXT } from "./resources";
+import { guid } from "../../utils/guid";
 /**
  * @slot - A slot for adding content to the block section.
  */
@@ -20,6 +21,7 @@ export class BlockSection {
      * If the value is "button", a clickable header is displayed.
      */
     this.toggleDisplay = "button";
+    this.guid = guid();
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -62,23 +64,26 @@ export class BlockSection {
         ? ICONS.menuClosedLeft
         : ICONS.menuClosedRight;
     const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-    const headerNode = toggleDisplay === "switch" ? (h("div", { "aria-label": toggleLabel, class: {
+    const { guid } = this;
+    const regionId = `${guid}-region`;
+    const buttonId = `${guid}-button`;
+    const headerNode = toggleDisplay === "switch" ? (h("div", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
         [CSS.toggle]: true,
         [CSS.toggleSwitch]: true
-      }, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel },
+      }, id: buttonId, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel },
       h("div", { class: CSS.toggleSwitchContent },
         h("span", { class: CSS.toggleSwitchText }, text)),
       h("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }),
-      this.renderStatusIcon())) : (h("button", { "aria-label": toggleLabel, class: {
+      this.renderStatusIcon())) : (h("button", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
         [CSS.sectionHeader]: true,
         [CSS.toggle]: true
-      }, name: toggleLabel, onClick: this.toggleSection },
+      }, id: buttonId, name: toggleLabel, onClick: this.toggleSection },
       h("calcite-icon", { icon: arrowIcon, scale: "s" }),
       h("span", { class: CSS.sectionHeaderText }, text),
       this.renderStatusIcon()));
-    return (h("section", { "aria-expanded": open.toString() },
+    return (h(Host, null,
       headerNode,
-      h("div", { class: CSS.content, hidden: !open },
+      h("section", { "aria-expanded": open.toString(), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId },
         h("slot", null))));
   }
   static get is() { return "calcite-block-section"; }

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

@@ -8,6 +8,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. */
@@ -42,17 +43,15 @@ export class Button {
     this.width = "auto";
     /** watches for changing text content **/
     this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
-    /** the node type of the rendered child element */
-    this.childElType = "button";
     /** determine if there is slotted content for styling purposes */
     this.hasContent = false;
     /** determine if loader present for styling purposes */
     this.hasLoader = false;
     // act on a requested or nearby form based on type
     this.handleClick = () => {
-      const { childElType, formEl, type } = this;
+      const { formEl, type } = this;
       // this.type refers to type attribute, not child element type
-      if (childElType === "button" && type !== "button") {
+      if (!this.href && type !== "button") {
         if (type === "submit") {
           formEl === null || formEl === void 0 ? void 0 : formEl.requestSubmit();
         }
@@ -62,9 +61,6 @@ export class Button {
       }
     };
   }
-  hrefHandler(href) {
-    this.childElType = href ? "a" : "button";
-  }
   loadingChanged(newValue, oldValue) {
     if (!!newValue && !oldValue) {
       this.hasLoader = true;
@@ -81,7 +77,6 @@ export class Button {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.childElType = this.href ? "a" : "button";
     this.hasLoader = this.loading;
     this.setupTextContentObserver();
     connectLabel(this);
@@ -96,13 +91,17 @@ export class Button {
   componentWillLoad() {
     if (Build.isBrowser) {
       this.updateHasContent();
-      if (this.childElType === "button" && !this.type) {
+      if (!this.href && !this.type) {
         this.type = "submit";
       }
     }
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   render() {
-    const Tag = this.childElType;
+    const childElType = this.href ? "a" : "button";
+    const Tag = childElType;
     const loaderNode = this.hasLoader ? (h("div", { class: CSS.buttonLoader },
       h("calcite-loader", { active: true, class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.intlLoading, scale: "m" }))) : null;
     const iconStartEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
@@ -113,7 +112,7 @@ export class Button {
         [CSS.contentSlotted]: this.hasContent,
         [CSS.iconStartEmpty]: !this.iconStart,
         [CSS.iconEndEmpty]: !this.iconEnd
-      }, disabled: this.disabled || this.loading, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: this.childElType === "a" && this.target, type: this.childElType === "button" && this.type },
+      }, disabled: this.disabled || this.loading, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: childElType === "a" && this.target, type: childElType === "button" && this.type },
       loaderNode,
       this.iconStart ? iconStartEl : null,
       this.hasContent ? contentEl : null,
@@ -546,7 +545,6 @@ export class Button {
     }
   }; }
   static get states() { return {
-    "childElType": {},
     "hasContent": {},
     "hasLoader": {}
   }; }
@@ -570,9 +568,6 @@ export class Button {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "href",
-      "methodName": "hrefHandler"
-    }, {
       "propName": "loading",
       "methodName": "loadingChanged"
     }]; }

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

@@ -7,6 +7,7 @@ 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 +107,9 @@ export class Checkbox {
     disconnectLabel(this);
     disconnectForm(this);
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods

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

@@ -9,6 +9,7 @@ import { focusElement } 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 +34,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 +261,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 +385,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;
@@ -564,6 +574,9 @@ export class ColorPicker {
     document.removeEventListener("mousemove", this.globalMouseMoveHandler);
     document.removeEventListener("mouseup", this.globalMouseUpHandler);
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   //--------------------------------------------------------------------------
   //
   //  Render Methods
@@ -585,7 +598,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
@@ -854,6 +867,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,
@@ -1394,9 +1425,9 @@ export class ColorPicker {
             "text": "\"#007ac2\""
           }, {
             "name": "see",
-            "text": " [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)"
+            "text": "[ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)"
           }],
-        "text": "The color value.\n\nThis value can be either a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string}\na RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated."
+        "text": "The color value.\n\nThis value can be either a {@link https ://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string}\na RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated."
       },
       "attribute": "value",
       "reflect": false,