@esri/solutions-components 0.8.5 → 0.8.6-6.2

package/dist/components/calcite-tip.js

@@ -16,7 +16,7 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     container: "container",
@@ -34,7 +34,8 @@ const SLOTS = {
     thumbnail: "thumbnail",
 };
 
-const tipCss = ":host{position:relative;margin:1rem;box-sizing:border-box;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}.container{inline-size:100%;padding:1rem}:host([closed]),:host([closed]) .container{display:none}:host([selected]) .container{margin:0px;border-style:none;padding:0px}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{margin-block-end:0.5rem}.header .heading{padding:0px;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-color-text-1)}.container[hidden]{display:none}.content{display:flex}.info{padding-block:0px;padding-inline:1rem;inline-size:70%}.info:only-child{inline-size:100%;padding-inline:0px}::slotted(p){margin-block-start:0px}::slotted(a){outline-color:transparent;color:var(--calcite-color-brand)}::slotted(a:focus){outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.image-frame{inline-size:25%}.image-frame img{max-inline-size:100%}::slotted(img){max-inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
+const tipCss = ":host{position:relative;margin:1rem;box-sizing:border-box;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}.container{inline-size:100%;padding:1rem}:host([closed]),:host([closed]) .container{display:none}:host([selected]) .container{margin:0px;border-style:none;padding:0px}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{margin-block-end:0.5rem}.header .heading{padding:0px;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-color-text-1)}.container[hidden]{display:none}.content{display:flex}.info{padding-block:0px;padding-inline:1rem;inline-size:70%}.info:only-child{inline-size:100%;padding-inline:0px}::slotted(p){margin-block-start:0px}::slotted(a){outline-color:transparent;color:var(--calcite-color-brand)}::slotted(a:focus){outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.image-frame{inline-size:25%}.image-frame img{max-inline-size:100%}::slotted(img){max-inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteTipStyle0 = tipCss;
 
 const Tip = /*@__PURE__*/ proxyCustomElement(class Tip extends HTMLElement {
     constructor() {
@@ -113,7 +114,7 @@ const Tip = /*@__PURE__*/ proxyCustomElement(class Tip extends HTMLElement {
         return (h("div", { class: CSS.content }, this.renderImageFrame(), this.renderInfoNode()));
     }
     render() {
-        return (h(Fragment, null, h("article", { class: CSS.container }, this.renderHeader(), this.renderContent()), this.renderDismissButton()));
+        return (h(Fragment, { key: '0c1a204f565a12f4e359f1c6c050258bf70c2b18' }, h("article", { key: '1e2ea801101e4280b0b073e780ef1db6f064856b', class: CSS.container }, this.renderHeader(), this.renderContent()), this.renderDismissButton()));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
@@ -121,7 +122,7 @@ const Tip = /*@__PURE__*/ proxyCustomElement(class Tip extends HTMLElement {
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return tipCss; }
+    static get style() { return CalciteTipStyle0; }
 }, [1, "calcite-tip", {
         "closed": [1540],
         "closeDisabled": [516, "close-disabled"],

package/dist/components/card-manager2.js

@@ -26,6 +26,7 @@ import { d as defineCustomElement$2 } from './edit-card2.js';
 import { d as defineCustomElement$1 } from './info-card2.js';
 
 const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}card-manager{display:block}";
+const CardManagerStyle0 = cardManagerCss;
 
 const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends HTMLElement {
     constructor() {
@@ -93,7 +94,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         var _a, _b;
         const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
         const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-        return (h(Host, null, h("div", { class: "overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { class: "position-relative " + messageClass }, h("div", { class: "padding-1" }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart)))))));
+        return (h(Host, { key: '343554e5408de156f1973f6d1e3daa8f1ba90675' }, h("div", { key: '1852562a795002314236052351cab7c29d36854e', class: "overflow-auto height-full" }, h("calcite-shell", { key: '684f013e4397bc50743526357384f782a88a5cd3', class: "position-relative " + featuresClass }, h("div", { key: 'db6d9f4be5448b5596b22f2a4f49c6baefa88466' }, h("info-card", { key: 'be5cec81cae7ca00a5b57c8d9590541f78b67fbd', graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: 'df34e0ae6978298130970c60d21203f52fa32e4b', class: "position-relative " + messageClass }, h("div", { key: '9525a95dd21745e211ebf888da44eca6a6c17721', class: "padding-1" }, h("calcite-notice", { key: 'ade0e0a2f09bbe7b7bda6fdb2ce65ba81121e633', icon: "table", open: true }, h("div", { key: 'd6fce2d657e23738720e004177c510c3273017f4', slot: "message" }, this._translations.selectFeaturesToStart)))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -111,7 +112,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         this._translations = messages[0];
     }
     get el() { return this; }
-    static get style() { return cardManagerCss; }
+    static get style() { return CardManagerStyle0; }
 }, [0, "card-manager", {
         "isMobile": [4, "is-mobile"],
         "layer": [16],

package/dist/components/checkbox.js

@@ -12,7 +12,8 @@ import { i as isActivationKey } from './key.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 
-const checkboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-color-border-input);color:var(--calcite-color-background)}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.toggle::after{content:\"\";inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute;transform:translateX(-50%) translateY(-50%)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const checkboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-color-border-input);color:var(--calcite-color-background)}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.toggle::after{content:\"\";inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute;transform:translateX(-50%) translateY(-50%)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteCheckboxStyle0 = checkboxCss;
 
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {
     constructor() {
@@ -70,6 +71,19 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         this.required = false;
         this.scale = "m";
         this.status = "idle";
+        this.validity = {
+            valid: false,
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing: false,
+        };
         this.value = undefined;
     }
     //--------------------------------------------------------------------------
@@ -122,12 +136,12 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
     //
     // --------------------------------------------------------------------------
     render() {
-        return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, role: "checkbox", tabIndex: this.disabled ? undefined : 0,
+        return (h(Host, { key: '6ef0c5b4fe62f003d9fe1ea6979cb5aeb564dac7', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '72f94ddb0795e2e0d10aac69af05c1ce7d6e5ead', disabled: this.disabled }, h("div", { key: '1cfc46f5a7180d6cd52962a26488c66eec14d852', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, role: "checkbox", tabIndex: this.disabled ? undefined : 0,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (toggleEl) => (this.toggleEl = toggleEl) }, h("svg", { "aria-hidden": "true", class: "check-svg", viewBox: "0 0 16 16" }, h("path", { d: this.getPath() })), h("slot", null)), h(HiddenFormInputSlot, { component: this }))));
+            ref: (toggleEl) => (this.toggleEl = toggleEl) }, h("svg", { key: '4956ac9d598af8267781610220896e07aad56c65', "aria-hidden": "true", class: "check-svg", viewBox: "0 0 16 16" }, h("path", { key: 'bd650b149977569e00a99be2fbc8a836cbfd4cfe', d: this.getPath() })), h("slot", { key: '604e420b7fe7014a202991d0e5c992e57d540d16' })), h(HiddenFormInputSlot, { key: '9ec0eab7c20a9dffed6a1a9b517ece8b8ed1cb26', component: this }))));
     }
     get el() { return this; }
-    static get style() { return checkboxCss; }
+    static get style() { return CalciteCheckboxStyle0; }
 }, [1, "calcite-checkbox", {
         "checked": [1540],
         "disabled": [516],
@@ -140,6 +154,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         "required": [516],
         "scale": [513],
         "status": [513],
+        "validity": [1040],
         "value": [8],
         "setFocus": [64]
     }]);

package/dist/components/chip.js

@@ -5,12 +5,10 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { j as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable.js';
 import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
-import { c as createObserver } from './observers.js';
 import { i as isActivationKey } from './key.js';
 import { g as getIconScale } from './component.js';
 import { d as defineCustomElement$1 } from './icon.js';
@@ -18,7 +16,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     title: "title",
@@ -46,7 +44,8 @@ const ICONS = {
     checked: "check-circle-f",
 };
 
-const chipCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){block-size:1.5rem;font-size:var(--calcite-font-size--2);--calcite-chip-spacing-s-internal:0.25rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=s]) .close,:host([scale=s]) .select-icon--active{block-size:1rem;inline-size:1rem}:host([scale=s]) .image-container{block-size:1.25rem;inline-size:1.25rem}:host([scale=s]) .container.is-circle{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]){block-size:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-s-internal:0.375rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=m]) .close,:host([scale=m]) .image-container,:host([scale=m]) .select-icon--active{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]) .container.is-circle{block-size:2rem;inline-size:2rem}:host([scale=l]){block-size:2.75rem;font-size:var(--calcite-font-size-0);--calcite-chip-spacing-s-internal:0.5rem;--calcite-chip-spacing-l-internal:0.75rem}:host([scale=l]) .image-container,:host([scale=l]) .close,:host([scale=l]) .select-icon--active{block-size:2rem;inline-size:2rem}:host([scale=l]) .container.is-circle{block-size:2.75rem;inline-size:2.75rem}:host{display:inline-flex;cursor:default;border-radius:9999px}.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1);font-weight:var(--calcite-font-weight-medium);outline-color:transparent}.container:not(.is-circle){padding-inline:var(--calcite-chip-spacing-s-internal)}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .container.image--slotted{padding-inline-start:calc(0.125rem / 2)}:host([scale=s]) .container.is-circle{padding-inline:0}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:var(--calcite-chip-spacing-s-internal)}.container:not(.text--slotted) .title{display:none}.container:not(.image--slotted) .image-container{display:none}.container.closable{padding-inline-end:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted{padding-inline-start:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).image--slotted .image-container~.chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).selectable:not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.selectable):not(.text--slotted) .chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text-slotted).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container{margin-inline-end:0}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container~.chip-icon{margin-inline-start:calc(var(--calcite-chip-spacing-s-internal) * 2)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline:var(--calcite-chip-spacing-s-internal)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none}.close{margin:0px;cursor:pointer;align-items:center;border-style:none;background-color:transparent;color:var(--calcite-color-text-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;display:flex;border-radius:50%;align-content:center;justify-content:center;--calcite-chip-transparent-hover:var(--calcite-color-transparent-hover);--calcite-chip-transparent-press:var(--calcite-color-transparent-press)}.close:hover{background-color:var(--calcite-chip-transparent-hover)}.close:focus{background-color:var(--calcite-chip-transparent-hover);outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:active{background-color:var(--calcite-chip-transparent-press)}.close calcite-icon{color:inherit}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:relative;visibility:hidden;inline-size:0;opacity:0;transition:opacity 0.15s ease-in-out, inline-size 0.15s ease-in-out}.select-icon.select-icon--active{visibility:visible;opacity:0.5}.container:not(.is-circle).image--slotted .select-icon.select-icon--active{margin-inline-end:var(--calcite-chip-spacing-s-internal)}:host([selected]) .select-icon{opacity:1}.container:hover .select-icon--active{opacity:1}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}:host([kind=neutral]){background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host([kind=neutral]) .container{border-color:transparent}:host([kind=neutral]) .close{color:var(--calcite-color-text-3)}:host([kind=neutral]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([kind=inverse]){background-color:var(--calcite-color-inverse);color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .container{border-color:transparent}:host([kind=inverse]) .close{color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([kind=brand]){background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([kind=brand]) .container{border-color:transparent}:host([kind=brand]) .close{color:var(--calcite-color-text-inverse)}:host([kind=brand]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([appearance=outline-fill]),:host([appearance=outline]){background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1)}:host([appearance=outline-fill]) .close,:host([appearance=outline]) .close{color:var(--calcite-color-text-3)}:host([appearance=outline-fill]) .chip-icon,:host([appearance=outline]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([appearance=outline-fill]){background-color:var(--calcite-color-foreground-1)}:host([appearance=outline]){background-color:transparent}:host([kind=neutral][appearance=outline-fill]) .container,:host([kind=neutral][appearance=outline]) .container{border-color:var(--calcite-color-border-1)}:host([kind=inverse][appearance=outline-fill]) .container,:host([kind=inverse][appearance=outline]) .container{border-color:var(--calcite-color-border-inverse)}:host([kind=brand][appearance=outline-fill]) .container,:host([kind=brand][appearance=outline]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand][appearance=solid]) button,:host([kind=inverse][appearance=solid]) button{outline-color:var(--calcite-color-text-inverse)}:host([closed]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const chipCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){block-size:1.5rem;font-size:var(--calcite-font-size--2);--calcite-chip-spacing-s-internal:0.25rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=s]) .close,:host([scale=s]) .select-icon--active{block-size:1rem;inline-size:1rem}:host([scale=s]) .image-container{block-size:1.25rem;inline-size:1.25rem}:host([scale=s]) .container.is-circle{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]){block-size:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-s-internal:0.375rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=m]) .close,:host([scale=m]) .image-container,:host([scale=m]) .select-icon--active{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]) .container.is-circle{block-size:2rem;inline-size:2rem}:host([scale=l]){block-size:2.75rem;font-size:var(--calcite-font-size-0);--calcite-chip-spacing-s-internal:0.5rem;--calcite-chip-spacing-l-internal:0.75rem}:host([scale=l]) .image-container,:host([scale=l]) .close,:host([scale=l]) .select-icon--active{block-size:2rem;inline-size:2rem}:host([scale=l]) .container.is-circle{block-size:2.75rem;inline-size:2.75rem}:host{display:inline-flex;cursor:default;border-radius:9999px}.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1);font-weight:var(--calcite-font-weight-medium);outline-color:transparent}.container:not(.is-circle){padding-inline:var(--calcite-chip-spacing-s-internal)}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .container.image--slotted{padding-inline-start:calc(0.125rem / 2)}:host([scale=s]) .container.is-circle{padding-inline:0}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:var(--calcite-chip-spacing-s-internal)}.container:not(.text--slotted) .title{display:none}.container:not(.image--slotted) .image-container{display:none}.container.closable{padding-inline-end:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted{padding-inline-start:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).image--slotted .image-container~.chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).selectable:not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.selectable):not(.text--slotted) .chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text-slotted).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container{margin-inline-end:0}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container~.chip-icon{margin-inline-start:calc(var(--calcite-chip-spacing-s-internal) * 2)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline:var(--calcite-chip-spacing-s-internal)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none}.close{margin:0px;cursor:pointer;align-items:center;border-style:none;background-color:transparent;color:var(--calcite-color-text-1);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;display:flex;border-radius:50%;align-content:center;justify-content:center;--calcite-chip-transparent-hover:var(--calcite-color-transparent-hover);--calcite-chip-transparent-press:var(--calcite-color-transparent-press)}.close:hover{background-color:var(--calcite-chip-transparent-hover)}.close:focus{background-color:var(--calcite-chip-transparent-hover);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:active{background-color:var(--calcite-chip-transparent-press)}.close calcite-icon{color:inherit}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:relative;visibility:hidden;inline-size:0;opacity:0;transition:opacity 0.15s ease-in-out, inline-size 0.15s ease-in-out}.select-icon.select-icon--active{visibility:visible;opacity:0.5}.container:not(.is-circle).image--slotted .select-icon.select-icon--active{margin-inline-end:var(--calcite-chip-spacing-s-internal)}:host([selected]) .select-icon{opacity:1}.container:hover .select-icon--active{opacity:1}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}:host([kind=neutral]){background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host([kind=neutral]) .container{border-color:transparent}:host([kind=neutral]) .close{color:var(--calcite-color-text-3)}:host([kind=neutral]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([kind=inverse]){background-color:var(--calcite-color-inverse);color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .container{border-color:transparent}:host([kind=inverse]) .close{color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([kind=brand]){background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([kind=brand]) .container{border-color:transparent}:host([kind=brand]) .close{color:var(--calcite-color-text-inverse)}:host([kind=brand]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([appearance=outline-fill]),:host([appearance=outline]){background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1)}:host([appearance=outline-fill]) .close,:host([appearance=outline]) .close{color:var(--calcite-color-text-3)}:host([appearance=outline-fill]) .chip-icon,:host([appearance=outline]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([appearance=outline-fill]){background-color:var(--calcite-color-foreground-1)}:host([appearance=outline]){background-color:transparent}:host([kind=neutral][appearance=outline-fill]) .container,:host([kind=neutral][appearance=outline]) .container{border-color:var(--calcite-color-border-1)}:host([kind=inverse][appearance=outline-fill]) .container,:host([kind=inverse][appearance=outline]) .container{border-color:var(--calcite-color-border-inverse)}:host([kind=brand][appearance=outline-fill]) .container,:host([kind=brand][appearance=outline]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand][appearance=solid]) button,:host([kind=inverse][appearance=solid]) button{outline-color:var(--calcite-color-text-inverse)}:host([closed]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteChipStyle0 = chipCss;
 
 const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
     constructor() {
@@ -56,12 +55,16 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
         this.calciteChipClose = createEvent(this, "calciteChipClose", 6);
         this.calciteChipSelect = createEvent(this, "calciteChipSelect", 6);
         this.calciteInternalChipKeyEvent = createEvent(this, "calciteInternalChipKeyEvent", 6);
-        this.mutationObserver = createObserver("mutation", () => this.updateHasText());
+        this.calciteInternalChipSelect = createEvent(this, "calciteInternalChipSelect", 6);
+        this.calciteInternalSyncSelectedChips = createEvent(this, "calciteInternalSyncSelectedChips", 6);
         // --------------------------------------------------------------------------
         //
         //  Private Methods
         //
         // --------------------------------------------------------------------------
+        this.handleDefaultSlotChange = () => {
+            this.updateHasText();
+        };
         this.close = () => {
             this.calciteChipClose.emit();
             this.selected = false;
@@ -96,11 +99,18 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
         this.messageOverrides = undefined;
         this.messages = undefined;
         this.interactive = false;
+        this.parentChipGroup = undefined;
         this.defaultMessages = undefined;
         this.effectiveLocale = undefined;
         this.hasText = false;
         this.hasImage = false;
     }
+    watchSelected(selected) {
+        if (this.selectionMode === "none") {
+            return;
+        }
+        this.handleSelectionPropertyChange(selected);
+    }
     onMessagesChange() {
         /* wired up by t9n util */
     }
@@ -113,26 +123,23 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        var _a;
-        connectConditionalSlotComponent(this);
         connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     }
     componentDidLoad() {
         setComponentLoaded(this);
+        if (this.selectionMode !== "none" && this.interactive && this.selected) {
+            this.handleSelectionPropertyChange(this.selected);
+        }
     }
     componentDidRender() {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        var _a;
-        disconnectConditionalSlotComponent(this);
         disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
@@ -188,6 +195,18 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
     updateHasText() {
         this.hasText = this.el.textContent.trim().length > 0;
     }
+    handleSelectionPropertyChange(selected) {
+        if (this.selectionMode === "single") {
+            this.calciteInternalSyncSelectedChips.emit();
+        }
+        const selectedInParent = this.parentChipGroup.selectedItems.includes(this.el);
+        if (!selectedInParent && selected && this.selectionMode !== "multiple") {
+            this.calciteInternalChipSelect.emit();
+        }
+        if (this.selectionMode !== "single") {
+            this.calciteInternalSyncSelectedChips.emit();
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Render Methods
@@ -227,7 +246,7 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
                 : this.interactive
                     ? "button"
                     : undefined;
-        return (h(Host, null, h(InteractiveContainer, { disabled: disabled }, h("div", { "aria-checked": this.selectionMode !== "none" && this.interactive
+        return (h(Host, { key: '6fde6f4666ca0c145936bcd6e8b1e27d2b7a45d8' }, h(InteractiveContainer, { key: '2cc3a9f9d8cc06757168f7ea1ecd5816f22d54a9', disabled: disabled }, h("div", { key: '30f6dd924ac68cfa614073dea661c214366987f7', "aria-checked": this.selectionMode !== "none" && this.interactive
                 ? toAriaBoolean(this.selected)
                 : undefined, "aria-disabled": disableInteraction ? toAriaBoolean(disabled) : undefined, "aria-label": this.label, class: {
                 [CSS.container]: true,
@@ -244,15 +263,16 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
                         (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
             }, onClick: this.handleEmittingEvent, role: role, tabIndex: disableInteraction ? -1 : 0,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.containerEl = el) }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), h("span", { class: CSS.title }, h("slot", null)), this.closable && this.renderCloseButton()))));
+            ref: (el) => (this.containerEl = el) }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), h("span", { key: 'e467f570503aea94f5ef464bd9ab7fd4d2c5fd9a', class: CSS.title }, h("slot", { key: 'f228540507f608f36288769a378a4bb73a7afeaf', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
+        "selected": ["watchSelected"],
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return chipCss; }
+    static get style() { return CalciteChipStyle0; }
 }, [1, "calcite-chip", {
         "disabled": [516],
         "appearance": [513],
@@ -269,12 +289,14 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
         "messageOverrides": [1040],
         "messages": [1040],
         "interactive": [4],
+        "parentChipGroup": [16],
         "defaultMessages": [32],
         "effectiveLocale": [32],
         "hasText": [32],
         "hasImage": [32],
         "setFocus": [64]
     }, [[0, "keydown", "keyDownHandler"], [0, "click", "clickHandler"]], {
+        "selected": ["watchSelected"],
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }]);

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

@@ -4,8 +4,8 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { C as Color } from './index2.js';
 import { j as isLonghandHex, i as isValidHex, r as rgbToHex, n as normalizeHex, o as opacityToAlpha, a as hexify, k as hexChar, c as alphaToOpacity } from './utils.js';
-import { c as color } from './index2.js';
 import { f as focusElement } from './dom.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { d as defineCustomElement$4 } from './icon.js';
@@ -16,7 +16,7 @@ import { d as defineCustomElement$1 } from './progress.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS$1 = {
     channel: "channel",
@@ -50,7 +50,7 @@ const CSS$1 = {
     sliders: "sliders",
     splitSection: "section--split",
 };
-const DEFAULT_COLOR$1 = color("#007AC2");
+const DEFAULT_COLOR$1 = Color("#007AC2");
 const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-";
 const RGB_LIMITS = {
     r: 255,
@@ -114,7 +114,7 @@ const SCOPE_SIZE = 1;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     container: "container",
@@ -123,8 +123,9 @@ const CSS = {
 };
 
 const colorPickerHexInputCss = ":host{display:block}.container{display:flex;inline-size:100%;flex-wrap:nowrap;align-items:center}.hex-input{flex-grow:1;text-transform:uppercase}.opacity-input{inline-size:68px;margin-inline-start:-1px}:host([scale=s]) .container{flex-wrap:wrap;row-gap:0.125rem}:host([scale=s]) .opacity-input{inline-size:unset;margin-inline-start:unset}:host([scale=l]) .opacity-input{inline-size:88px}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteColorPickerHexInputStyle0 = colorPickerHexInputCss;
 
-const DEFAULT_COLOR = color();
+const DEFAULT_COLOR = Color();
 const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class ColorPickerHexInput extends HTMLElement {
     constructor() {
         super();
@@ -287,7 +288,7 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class ColorPickerHe
         const hexInputValue = this.formatHexForInternalInput(value);
         const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
         const inputScale = scale === "l" ? "m" : "s";
-        return (h("div", { class: CSS.container }, h("calcite-input-text", { class: CSS.hexInput, label: (messages === null || messages === void 0 ? void 0 : messages.hex) || hexLabel, maxLength: 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInternalInputTextBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", scale: inputScale, value: hexInputValue,
+        return (h("div", { key: 'ce81e626a720cd37d45facd4ca1f9dd748df094c', class: CSS.container }, h("calcite-input-text", { key: 'a26b153eb8f2e9943106c515de68a5adeec24e2b', class: CSS.hexInput, label: (messages === null || messages === void 0 ? void 0 : messages.hex) || hexLabel, maxLength: 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInternalInputTextBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", scale: inputScale, value: hexInputValue,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: this.storeHexInputRef }), alphaChannel ? (h("calcite-input-number", { class: CSS.opacityInput, key: "opacity-input", label: messages === null || messages === void 0 ? void 0 : messages.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.onOpacityInputChange, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onKeyDown: this.onInputKeyDown, scale: inputScale, suffixText: "%", value: opacityInputValue,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
@@ -314,7 +315,7 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class ColorPickerHe
             const normalized = normalizeHex(value, alphaChannel, alphaChannel);
             if (isValidHex(normalized, alphaChannel)) {
                 const { internalColor: currentColor } = this;
-                const nextColor = color(normalized);
+                const nextColor = Color(normalized);
                 const normalizedLonghand = normalizeHex(hexify(nextColor, alphaChannel), alphaChannel);
                 const changed = !currentColor ||
                     normalizedLonghand !== normalizeHex(hexify(currentColor, alphaChannel), alphaChannel);
@@ -343,9 +344,9 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class ColorPickerHe
     formatOpacityForInternalInput(color) {
         return color ? `${alphaToOpacity(color.alpha())}` : "";
     }
-    nudgeRGBChannels(color$1, amount, context) {
+    nudgeRGBChannels(color, amount, context) {
         let nudgedChannels;
-        const channels = color$1.array();
+        const channels = color.array();
         const rgbChannels = channels.slice(0, 3);
         if (context === "rgb") {
             const nudgedRGBChannels = rgbChannels.map((channel) => channel + amount);
@@ -355,16 +356,16 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class ColorPickerHe
             ];
         }
         else {
-            const nudgedAlpha = opacityToAlpha(alphaToOpacity(color$1.alpha()) + amount);
+            const nudgedAlpha = opacityToAlpha(alphaToOpacity(color.alpha()) + amount);
             nudgedChannels = [...rgbChannels, nudgedAlpha];
         }
-        return color(nudgedChannels);
+        return Color(nudgedChannels);
     }
     get el() { return this; }
     static get watchers() { return {
         "value": ["handleValueChange"]
     }; }
-    static get style() { return colorPickerHexInputCss; }
+    static get style() { return CalciteColorPickerHexInputStyle0; }
 }, [1, "calcite-color-picker-hex-input", {
         "allowEmpty": [4, "allow-empty"],
         "alphaChannel": [4, "alpha-channel"],

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

@@ -4,14 +4,14 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { c as color } from './index2.js';
-import { u as getModeName } from './dom.js';
+import { C as Color } from './index2.js';
+import { v as getModeName } from './dom.js';
 import { a as hexify } from './utils.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     swatch: "swatch",
@@ -29,6 +29,7 @@ const CHECKER_DIMENSIONS = {
 };
 
 const colorPickerSwatchCss = ":host{position:relative;display:inline-flex}:host([scale=s]){block-size:1.25rem;inline-size:1.25rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem}.swatch{overflow:hidden;block-size:inherit;inline-size:inherit}.swatch rect{transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.swatch--no-color rect{fill:var(--calcite-color-foreground-1)}.swatch--no-color line{stroke:var(--calcite-color-status-danger)}.checker{fill:#cacaca}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteColorPickerSwatchStyle0 = colorPickerSwatchCss;
 
 const ColorPickerSwatch = /*@__PURE__*/ proxyCustomElement(class ColorPickerSwatch extends HTMLElement {
     constructor() {
@@ -39,8 +40,8 @@ const ColorPickerSwatch = /*@__PURE__*/ proxyCustomElement(class ColorPickerSwat
         this.color = undefined;
         this.scale = "m";
     }
-    handleColorChange(color$1) {
-        this.internalColor = color$1 ? color(color$1) : null;
+    handleColorChange(color) {
+        this.internalColor = color ? Color(color) : null;
     }
     //--------------------------------------------------------------------------
     //
@@ -56,7 +57,7 @@ const ColorPickerSwatch = /*@__PURE__*/ proxyCustomElement(class ColorPickerSwat
             [CSS.swatch]: true,
             [CSS.noColorSwatch]: isEmpty,
         };
-        return (h("svg", { class: classes, xmlns: "http://www.w3.org/2000/svg" }, this.renderSwatch()));
+        return (h("svg", { key: 'b29377be8ce0518f7b0f3691dcb1dda08890dd94', class: classes, xmlns: "http://www.w3.org/2000/svg" }, this.renderSwatch()));
     }
     renderSwatch() {
         const { active, el, internalColor } = this;
@@ -88,7 +89,7 @@ const ColorPickerSwatch = /*@__PURE__*/ proxyCustomElement(class ColorPickerSwat
     static get watchers() { return {
         "color": ["handleColorChange"]
     }; }
-    static get style() { return colorPickerSwatchCss; }
+    static get style() { return CalciteColorPickerSwatchStyle0; }
 }, [1, "calcite-color-picker-swatch", {
         "active": [516],
         "color": [1],

package/dist/components/combobox-item.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     icon: "icon",
@@ -31,7 +31,8 @@ const CSS = {
     textContainer: "text-container",
 };
 
-const comboboxItemCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.625rem;--calcite-combobox-item-spacing-indent:1rem;--calcite-combobox-item-selector-icon-size:1.5rem}.container{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  )}:host(:focus){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);outline-color:transparent;word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host([disabled]) .label{cursor:default}.label--selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.label--active{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.label:hover,.label:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);-webkit-text-decoration-line:none;text-decoration-line:none;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.title{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon{display:inline-flex;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-color-border-1)}.icon--indent{padding-inline-start:var(--calcite-combobox-item-indent-value)}.icon--custom{margin-block-start:-1px;padding-inline-start:var(--calcite-combobox-item-spacing-unit-l);color:var(--calcite-color-text-3)}.icon--active{color:var(--calcite-color-text-1)}.icon--dot{display:flex;justify-content:center;min-inline-size:var(--calcite-combobox-item-selector-icon-size)}.icon--dot:before{text-align:start;content:\"•\"}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-color-brand)}:host(:hover[disabled]) .icon{opacity:1}";
+const comboboxItemCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.625rem;--calcite-combobox-item-spacing-indent:1rem;--calcite-combobox-item-selector-icon-size:1.5rem}.container{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  )}:host(:focus){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);outline-color:transparent;word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host([disabled]) .label{cursor:default}.label--selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.label--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.label:hover,.label:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);text-decoration-line:none;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.title{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon{display:inline-flex;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-color-border-1)}.icon--indent{padding-inline-start:var(--calcite-combobox-item-indent-value)}.icon--custom{margin-block-start:-1px;padding-inline-start:var(--calcite-combobox-item-spacing-unit-l);color:var(--calcite-color-text-3)}.icon--active{color:var(--calcite-color-text-1)}.icon--dot{display:flex;justify-content:center;min-inline-size:var(--calcite-combobox-item-selector-icon-size)}.icon--dot:before{text-align:start;content:\"•\"}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-color-brand)}:host(:hover[disabled]) .icon{opacity:1}";
+const CalciteComboboxItemStyle0 = comboboxItemCss;
 
 const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class ComboboxItem extends HTMLElement {
     constructor() {
@@ -129,13 +130,13 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class ComboboxItem extends
             [CSS.single]: isSingleSelect,
         };
         const depth = getDepth(this.el);
-        return (h(Host, { "aria-hidden": "true" }, h(InteractiveContainer, { disabled: disabled }, h("div", { class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("li", { class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), h("span", { class: "title" }, this.textLabel)), this.renderChildren()))));
+        return (h(Host, { key: 'a10ab7e95408a8cffef4f42d3b87ae98450489b9', "aria-hidden": "true" }, h(InteractiveContainer, { key: '091b8f1a3f713899a3f14c1c39a6fdb70abab7a2', disabled: disabled }, h("div", { key: '43d200730971b71b3030437885e6ab99c55b2ce6', class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("li", { key: '8de885b34e9bc6b53a30396d54cbcec488790dd7', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), h("span", { key: 'daba9ce50923261dce8896a74d8204b1e922a638', class: "title" }, this.textLabel)), this.renderChildren()))));
     }
     get el() { return this; }
     static get watchers() { return {
         "selected": ["selectedWatchHandler"]
     }; }
-    static get style() { return comboboxItemCss; }
+    static get style() { return CalciteComboboxItemStyle0; }
 }, [1, "calcite-combobox-item", {
         "disabled": [516],
         "selected": [1540],