@esri/solutions-components 0.10.3 → 0.10.5

package/dist/cjs/calcite-card.cjs.entry.js

@@ -8,21 +8,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
-const dom = require('./dom-93443cc1.js');
-const locale = require('./locale-4d226d16.js');
-const t9n = require('./t9n-d102c87b.js');
-const loadable = require('./loadable-52223908.js');
-const interactive = require('./interactive-c120e7de.js');
-const key = require('./key-f95b815e.js');
-require('./guid-9a92730c.js');
-require('./resources-543ff11e.js');
-require('./observers-304eec4e.js');
-require('./browser-9f13ebb0.js');
+const dom = require('./dom-63b93b3b.js');
+const locale = require('./locale-428354f0.js');
+const t9n = require('./t9n-e5fb720b.js');
+const loadable = require('./loadable-ef8f0acf.js');
+const interactive = require('./interactive-272b8484.js');
+const key = require('./key-e4dd32ff.js');
+require('./guid-4bc1bc0f.js');
+require('./resources-8556a9ce.js');
+require('./observers-3440c668.js');
+require('./browser-02cbd1d9.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     container: "container",
@@ -212,10 +212,10 @@ const Card = class {
             : this.selectionMode !== "none"
                 ? "radio"
                 : undefined;
-        return (index.h(index.Host, { key: '4946d48f9a3a277437fd9b99346a3a3ef7f9dd9e' }, index.h(interactive.InteractiveContainer, { key: '3e6ca0e58bc05f655f2385e104bf34153e837a3b', disabled: this.disabled }, index.h("div", { key: '935420887e88fc36d7700fe9564f80d01b95fa6e', "aria-checked": this.selectionMode !== "none" ? dom.toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (index.h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, index.h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), index.h("section", { key: '42fc876326e43a398b7811d5c8a9d07b9e136d90', "aria-busy": dom.toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), index.h("div", { key: '39c6dd91b34734469bbb91d9fe0f700a6b439dd3', class: {
+        return (index.h(index.Host, { key: 'e33b76130cd91d3caa6662f1f58b79d238c708fb' }, index.h(interactive.InteractiveContainer, { key: '772da2a3a1274eb467d1febb915ffb97953beae7', disabled: this.disabled }, index.h("div", { key: 'b9fdbb51cfb07964479d0f723add39b8a2384f86', "aria-checked": this.selectionMode !== "none" ? dom.toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (index.h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, index.h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), index.h("section", { key: '51cfe132a589ec65b39544b4c1246545b0b864f2', "aria-busy": dom.toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), index.h("div", { key: 'c256998e330a949d47a12b23127c68cba081854e', class: {
                 [CSS.cardContent]: true,
                 [CSS.hasSlottedContent]: this.hasContent,
-            } }, index.h("slot", { key: '8ee81529539d734e381c5359c675bd7cad60a553', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
+            } }, index.h("slot", { key: '17fb9b0a9919f09a474d3c54818e770be9a85b77', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/calcite-carousel-item.cjs.entry.js

@@ -8,12 +8,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
-const guid = require('./guid-9a92730c.js');
+const guid = require('./guid-4bc1bc0f.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     container: "container",

package/dist/cjs/calcite-carousel.cjs.entry.js

@@ -8,22 +8,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
-const dom = require('./dom-93443cc1.js');
-const locale = require('./locale-4d226d16.js');
-const guid = require('./guid-9a92730c.js');
-const interactive = require('./interactive-c120e7de.js');
-const loadable = require('./loadable-52223908.js');
-const t9n = require('./t9n-d102c87b.js');
-const array = require('./array-755c4355.js');
-require('./resources-543ff11e.js');
-require('./key-f95b815e.js');
-require('./observers-304eec4e.js');
-require('./browser-9f13ebb0.js');
+const dom = require('./dom-63b93b3b.js');
+const locale = require('./locale-428354f0.js');
+const guid = require('./guid-4bc1bc0f.js');
+const interactive = require('./interactive-272b8484.js');
+const loadable = require('./loadable-ef8f0acf.js');
+const t9n = require('./t9n-e5fb720b.js');
+const array = require('./array-67eea0ed.js');
+require('./resources-8556a9ce.js');
+require('./key-e4dd32ff.js');
+require('./observers-3440c668.js');
+require('./browser-02cbd1d9.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const DURATION = 6000;
 const CSS = {
@@ -189,6 +189,7 @@ const Carousel = class {
             if (event.target !== this.container) {
                 return;
             }
+            const lastItem = this.items.length - 1;
             switch (event.key) {
                 case " ":
                 case "Enter":
@@ -207,13 +208,19 @@ const Carousel = class {
                     break;
                 case "Home":
                     event.preventDefault();
+                    if (this.selectedIndex === 0) {
+                        return;
+                    }
                     this.direction = "backward";
                     this.setSelectedItem(0, true);
                     break;
                 case "End":
                     event.preventDefault();
+                    if (this.selectedIndex === lastItem) {
+                        return;
+                    }
                     this.direction = "forward";
-                    this.setSelectedItem(this.items.length - 1, true);
+                    this.setSelectedItem(lastItem, true);
                     break;
             }
         };
@@ -435,17 +442,17 @@ const Carousel = class {
     }
     render() {
         const { direction } = this;
-        return (index.h(index.Host, { key: '7e95eee5f92be62d2817353deceb8ebceb330fb3' }, index.h(interactive.InteractiveContainer, { key: '01e449b425f695a3e1317190a7cb448ea4896e92', disabled: this.disabled }, index.h("div", { key: '1d59b22e5625facd195a57b8c9d8e64d855753a9', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
+        return (index.h(index.Host, { key: 'bff4155cb4358665eb6530b6637322598604d873' }, index.h(interactive.InteractiveContainer, { key: '7a388be689aca07856f350963c33bce1d4e5e278', disabled: this.disabled }, index.h("div", { key: 'c53c92b22ace937c0d2a6568ddd729ccb1b91108', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
                 [CSS.container]: true,
                 [CSS.containerOverlaid]: this.controlOverlay,
                 [CSS.containerEdged]: this.arrowType === "edge",
-            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, index.h("section", { key: '43ebcd93a10f25ca3a8c4cc9b2ff7f956293d35c', class: {
+            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, index.h("section", { key: 'cae379b167a37ef82417ab308c7d623300790122', class: {
                 [CSS.itemContainer]: true,
                 [CSS.itemContainerForward]: direction === "forward",
                 [CSS.itemContainerBackward]: direction === "backward",
             }, id: this.containerId,
             // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
-            ref: this.storeItemContainerRef }, index.h("slot", { key: '11c3d92e21496781f2bec4d5b45072c39cbc1280', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
+            ref: this.storeItemContainerRef }, index.h("slot", { key: 'bf14a67b46e8946e9cafc57a8d0625b65513f702', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/calcite-checkbox.cjs.entry.js

@@ -8,21 +8,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
-const dom = require('./dom-93443cc1.js');
-const form = require('./form-e3e6f1e0.js');
-const guid = require('./guid-9a92730c.js');
-const interactive = require('./interactive-c120e7de.js');
-const key = require('./key-f95b815e.js');
-const label = require('./label-c4d636db.js');
-const loadable = require('./loadable-52223908.js');
-const resources = require('./resources-543ff11e.js');
-require('./browser-9f13ebb0.js');
-require('./component-8ff3f229.js');
+const dom = require('./dom-63b93b3b.js');
+const form = require('./form-4c0bbbe5.js');
+const guid = require('./guid-4bc1bc0f.js');
+const interactive = require('./interactive-272b8484.js');
+const key = require('./key-e4dd32ff.js');
+const label = require('./label-afda7da7.js');
+const loadable = require('./loadable-ef8f0acf.js');
+const resources = require('./resources-8556a9ce.js');
+require('./browser-02cbd1d9.js');
+require('./component-9d0efa36.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     toggle: "toggle",

package/dist/cjs/calcite-chip-group.cjs.entry.js

@@ -8,12 +8,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
-const dom = require('./dom-93443cc1.js');
-const interactive = require('./interactive-c120e7de.js');
-const loadable = require('./loadable-52223908.js');
-require('./guid-9a92730c.js');
-require('./resources-543ff11e.js');
-require('./browser-9f13ebb0.js');
+const dom = require('./dom-63b93b3b.js');
+const interactive = require('./interactive-272b8484.js');
+const loadable = require('./loadable-ef8f0acf.js');
+require('./guid-4bc1bc0f.js');
+require('./resources-8556a9ce.js');
+require('./browser-02cbd1d9.js');
 
 const chipGroupCss = ":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{display:flex}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:0.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:0.25rem}:host([scale=l]) .container{gap:0.75rem}: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 CalciteChipGroupStyle0 = chipGroupCss;

package/dist/cjs/calcite-chip_2.cjs.entry.js

@@ -8,24 +8,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
-const dom = require('./dom-93443cc1.js');
-const loadable = require('./loadable-52223908.js');
-const t9n = require('./t9n-d102c87b.js');
-const interactive = require('./interactive-c120e7de.js');
-const locale = require('./locale-4d226d16.js');
-const key = require('./key-f95b815e.js');
-const component = require('./component-8ff3f229.js');
-const conditionalSlot = require('./conditionalSlot-764a9738.js');
-const guid = require('./guid-9a92730c.js');
-const utils = require('./utils-292c3e9a.js');
-require('./resources-543ff11e.js');
-require('./browser-9f13ebb0.js');
-require('./observers-304eec4e.js');
+const dom = require('./dom-63b93b3b.js');
+const loadable = require('./loadable-ef8f0acf.js');
+const t9n = require('./t9n-e5fb720b.js');
+const interactive = require('./interactive-272b8484.js');
+const locale = require('./locale-428354f0.js');
+const key = require('./key-e4dd32ff.js');
+const component = require('./component-9d0efa36.js');
+const browser = require('./browser-02cbd1d9.js');
+const conditionalSlot = require('./conditionalSlot-fe01e316.js');
+const guid = require('./guid-4bc1bc0f.js');
+const utils = require('./utils-3f254442.js');
+require('./resources-8556a9ce.js');
+require('./observers-3440c668.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS$1 = {
     title: "title",
@@ -37,23 +37,25 @@ const CSS$1 = {
     imageSlotted: "image--slotted",
     closable: "closable",
     multiple: "multiple",
+    single: "single",
     selectable: "selectable",
     selectIcon: "select-icon",
     selectIconActive: "select-icon--active",
     nonInteractive: "non-interactive",
     isCircle: "is-circle",
+    selected: "selected",
 };
-const SLOTS = {
+const SLOTS$1 = {
     image: "image",
 };
 const ICONS = {
     close: "x",
-    unchecked: "circle",
     checkedSingle: "circle-f",
-    checked: "check-circle-f",
+    uncheckedMultiple: "square",
+    checkedMultiple: "check-square-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-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 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}.container,.select-icon,.title{padding-inline-start:var(--calcite-internal-chip-padding-start);padding-inline-end:var(--calcite-internal-chip-padding-end)}.select-icon:not(.select-icon--active){padding-inline:0}: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,:host([scale=s]) .container.is-circle.image--slotted{block-size:1.5rem;inline-size:1.5rem;--calcite-internal-chip-padding-start:var(--calcite-spacing-px);--calcite-internal-chip-padding-end:var(--calcite-spacing-px)}:host([scale=s]) .multiple .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=s]) .multiple.image--slotted .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-sm)}:host([scale=s]) .multiple.image--slotted.text--slotted{--calcite-internal-chip-padding-start:var(--calcite-spacing-px);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=s]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=s]) .container.image--slotted{--calcite-internal-chip-padding-start:var(--calcite-spacing-px);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=s]) .container.image--slotted.closable{--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=s]) .container:not(.is-circle):not(.multiple):not(.image-slotted) .select-icon.select-icon--active{padding-inline-start:0;padding-inline-end:var(--calcite-spacing-xs)}:host([scale=s]) .container:not(.is-circle):not(.multiple).image--slotted .select-icon.select-icon--active{padding-inline-start:var(--calcite-spacing-base);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s][closable]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}: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;--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=m]) .container.is-circle,:host([scale=m]) .container.is-circle.image--slotted{block-size:2rem;inline-size:2rem;--calcite-internal-chip-padding-start:var(--calcite-spacing-px);--calcite-internal-chip-padding-end:var(--calcite-spacing-px)}:host([scale=m]) .multiple .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-base);--calcite-internal-chip-padding-end:var(--calcite-spacing-base)}:host([scale=m]) .multiple.image--slotted .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-sm)}:host([scale=m]) .multiple.image--slotted.text--slotted{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xs)}:host([scale=m]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xs)}:host([scale=m]) .container.image--slotted{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xs)}:host([scale=m]) .container.image--slotted.closable{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=m]) .container:not(.is-circle):not(.multiple):not(.image-slotted) .select-icon.select-icon--active{padding-inline-start:0;padding-inline-end:var(--calcite-spacing-px)}:host([scale=m]) .container:not(.is-circle):not(.multiple).image--slotted .select-icon.select-icon--active{padding-inline-start:0;padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m][closable]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}: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;--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=l]) .container.is-circle,:host([scale=l]) .container.is-circle.image--slotted{block-size:2.75rem;inline-size:2.75rem;--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=l]) .multiple .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}:host([scale=l]) .multiple.image--slotted .select-icon{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-md)}:host([scale=l]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-sm);--calcite-internal-chip-padding-end:var(--calcite-spacing-sm)}:host([scale=l]) .container.image--slotted{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-sm)}:host([scale=l]) .container.image--slotted.closable{--calcite-internal-chip-padding-start:var(--calcite-spacing-xs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xs)}:host([scale=l]) .container:not(.is-circle):not(.multiple):not(.image-slotted) .select-icon.select-icon--active{padding-inline-start:0;padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=l]) .container:not(.is-circle):not(.multiple).image--slotted .select-icon.select-icon--active{padding-inline-start:0;padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][closable]) .container{--calcite-internal-chip-padding-start:var(--calcite-spacing-sm);--calcite-internal-chip-padding-end:var(--calcite-spacing-xs)}: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.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.selectable.single.image--slotted{--calcite-internal-chip-padding-end:calc(0.125rem / 2)}:host([scale=s]) .container:not(.selected):not(.multiple).image--slotted{--calcite-internal-chip-padding-start:calc(0.125rem / 2)}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--calcite-internal-chip-padding-start:var(--calcite-chip-spacing-s-internal);--calcite-internal-chip-padding-end:var(--calcite-chip-spacing-s-internal)}.container:not(.text--slotted) .title{display:none}.container:not(.image--slotted) .image-container{display:none}.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);--calcite-internal-chip-padding-start:var(--calcite-spacing-xxs);--calcite-internal-chip-padding-end:var(--calcite-spacing-xxs)}.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}:host([selected]) .select-icon{opacity:1}.container:hover .select-icon--active{opacity:1}.multiple .select-icon{display:flex;align-items:center;justify-content:center}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 = class {
@@ -150,7 +152,7 @@ const Chip = class {
     }
     async componentWillLoad() {
         loadable.setUpLoadableComponent(this);
-        {
+        if (browser.isBrowser()) {
             await t9n.setUpMessages(this);
             this.updateHasText();
         }
@@ -219,16 +221,16 @@ const Chip = class {
     //
     //--------------------------------------------------------------------------
     renderChipImage() {
-        return (index.h("div", { class: CSS$1.imageContainer }, index.h("slot", { name: SLOTS.image, onSlotchange: this.handleSlotImageChange })));
+        return (index.h("div", { class: CSS$1.imageContainer }, index.h("slot", { name: SLOTS$1.image, onSlotchange: this.handleSlotImageChange })));
     }
     renderSelectionIcon() {
-        const icon = this.selectionMode === "multiple" && this.selected
-            ? ICONS.checked
-            : this.selectionMode === "multiple"
-                ? ICONS.unchecked
-                : this.selected
-                    ? ICONS.checkedSingle
-                    : undefined;
+        const icon = this.selectionMode === "multiple"
+            ? this.selected
+                ? ICONS.checkedMultiple
+                : ICONS.uncheckedMultiple
+            : this.selected
+                ? ICONS.checkedSingle
+                : undefined;
         return (index.h("div", { class: {
                 [CSS$1.selectIcon]: true,
                 [CSS$1.selectIconActive]: this.selectionMode === "multiple" || this.selected,
@@ -250,7 +252,7 @@ const Chip = class {
                 : this.interactive
                     ? "button"
                     : undefined;
-        return (index.h(index.Host, { key: 'cb78643416dd22830dfe6e7d6c42a4e07baf62fa' }, index.h(interactive.InteractiveContainer, { key: '7e96047819c7f823aaeabef5c74ca8ff1602c15b', disabled: disabled }, index.h("div", { key: '34e57dc8c3cfdf2f225d83d7cc9a7adfedd788ae', "aria-checked": this.selectionMode !== "none" && this.interactive
+        return (index.h(index.Host, { key: '6d76da5a2ae7a51ceffa4d1ca67d2f610b900a1c' }, index.h(interactive.InteractiveContainer, { key: 'fd0190d60cffb6d0f564a91f55b0e4f69663fb5b', disabled: disabled }, index.h("div", { key: '825b342318201ee13735f9b6e830f26b0fb4e137', "aria-checked": this.selectionMode !== "none" && this.interactive
                 ? dom.toAriaBoolean(this.selected)
                 : undefined, "aria-disabled": disableInteraction ? dom.toAriaBoolean(disabled) : undefined, "aria-label": this.label, class: {
                 [CSS$1.container]: true,
@@ -258,6 +260,8 @@ const Chip = class {
                 [CSS$1.imageSlotted]: this.hasImage,
                 [CSS$1.selectable]: this.selectionMode !== "none",
                 [CSS$1.multiple]: this.selectionMode === "multiple",
+                [CSS$1.single]: this.selectionMode === "single" || this.selectionMode === "single-persist",
+                [CSS$1.selected]: this.selected,
                 [CSS$1.closable]: this.closable,
                 [CSS$1.nonInteractive]: !this.interactive,
                 [CSS$1.isCircle]: !this.closable &&
@@ -265,7 +269,7 @@ const Chip = class {
                     (!this.icon || !this.hasImage) &&
                     (this.selectionMode === "none" ||
                         (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
-            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), index.h("span", { key: '0e748e3745a3338e2f317728894702b9fb0d370d', class: CSS$1.title }, index.h("slot", { key: 'd21ba7e9353d591b955517f1a254d22d3599e37b', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
+            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), index.h("span", { key: '0b3d668d66e359ecc3690ad87033e7e49a9250ef', class: CSS$1.title }, index.h("slot", { key: 'ff1af06039b94df6108f5e371e23ad9debfd388e', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -280,24 +284,31 @@ Chip.style = CalciteChipStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
-    icon: "icon",
-    iconActive: "icon--active",
-    iconIndent: "icon--indent",
+    active: "label--active",
+    centerContent: "center-content",
+    container: "container",
     custom: "icon--custom",
+    description: "description",
     dot: "icon--dot",
-    single: "label--single",
+    filterMatch: "filter-match",
+    icon: "icon",
+    iconActive: "icon--active",
     label: "label",
-    active: "label--active",
+    scale: (scale) => `scale--${scale}`,
     selected: "label--selected",
-    title: "title",
+    shortText: "short-text",
+    single: "label--single",
     textContainer: "text-container",
-    filterMatch: "filter-match",
+    title: "title",
+};
+const SLOTS = {
+    contentEnd: "content-end",
 };
 
-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}.filter-match{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-current)}";
+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;--calcite-internal-combobox-item-description-font-size:var(--calcite-font-size-xs)}.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.375rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem;--calcite-internal-combobox-item-description-font-size:var(--calcite-font-size-sm)}.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;--calcite-internal-combobox-item-description-font-size:var(--calcite-font-size)}.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;justify-content:space-around;gap:var(--calcite-combobox-item-spacing-unit-l);padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l);padding-inline-start:var(--calcite-combobox-item-indent-value)}:host([disabled]) .label{cursor:default}.label--selected{color:var(--calcite-color-text-1)}.label--selected .title{font-weight:var(--calcite-font-weight-medium)}.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)}.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--custom{margin-block-start:-1px;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}.filter-match{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-current)}.center-content{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.description{font-size:var(--calcite-internal-combobox-item-description-font-size)}:host([selected]) .description,:host(:hover) .description{color:var(--calcite-color-text-2)}.short-text{color:var(--calcite-color-text-3);white-space:nowrap}.title{color:var(--calcite-color-text-1)}.title,.description,.short-text{line-height:var(--calcite-font-line-height-relative-snug)}";
 const CalciteComboboxItemStyle0 = comboboxItemCss;
 
 const ComboboxItem = class {
@@ -307,19 +318,22 @@ const ComboboxItem = class {
         this.itemClickHandler = () => {
             this.toggleSelected();
         };
-        this.disabled = false;
-        this.selected = false;
         this.active = false;
         this.ancestors = undefined;
+        this.description = undefined;
+        this.disabled = false;
+        this.filterDisabled = undefined;
+        this.filterTextMatchPattern = undefined;
         this.guid = guid.guid();
         this.icon = undefined;
         this.iconFlipRtl = false;
+        this.metadata = undefined;
+        this.scale = "m";
+        this.selected = false;
+        this.selectionMode = "multiple";
+        this.shortHeading = undefined;
         this.textLabel = undefined;
-        this.filterTextMatchPattern = undefined;
         this.value = undefined;
-        this.filterDisabled = undefined;
-        this.selectionMode = "multiple";
-        this.scale = "m";
     }
     selectedWatchHandler() {
         this.calciteComboboxItemChange.emit();
@@ -362,18 +376,15 @@ const ComboboxItem = class {
         return this.icon ? (index.h("calcite-icon", { class: {
                 [CSS.custom]: !!this.icon,
                 [CSS.iconActive]: this.icon && this.selected,
-                [CSS.iconIndent]: true,
             }, flipRtl: this.iconFlipRtl, icon: this.icon || iconPath, key: "icon", scale: component.getIconScale(this.scale) })) : null;
     }
     renderSelectIndicator(showDot, iconPath) {
         return showDot ? (index.h("span", { class: {
                 [CSS.icon]: true,
                 [CSS.dot]: true,
-                [CSS.iconIndent]: true,
             } })) : (index.h("calcite-icon", { class: {
                 [CSS.icon]: true,
                 [CSS.iconActive]: this.selected,
-                [CSS.iconIndent]: true,
             }, flipRtl: this.iconFlipRtl, icon: iconPath, key: "indicator", scale: component.getIconScale(this.scale) }));
     }
     renderChildren() {
@@ -386,22 +397,26 @@ const ComboboxItem = class {
         const { disabled } = this;
         const isSingleSelect = utils.isSingleLike(this.selectionMode);
         const showDot = isSingleSelect && !disabled;
-        const defaultIcon = isSingleSelect ? "dot" : "check";
-        const iconPath = disabled ? "" : defaultIcon;
+        const defaultIcon = isSingleSelect ? undefined : "check";
+        const iconPath = disabled ? undefined : defaultIcon;
         const classes = {
             [CSS.label]: true,
             [CSS.selected]: this.selected,
             [CSS.active]: this.active,
             [CSS.single]: isSingleSelect,
         };
-        const depth = utils.getDepth(this.el);
-        return (index.h(index.Host, { key: '24539cb8c385eba17113acbc986c5313782abc6c', "aria-hidden": "true" }, index.h(interactive.InteractiveContainer, { key: '115e856cd8a456a8d70431f87f81cae4b5ed3197', disabled: disabled }, index.h("div", { key: 'c440f95366563eddee178c1d0e89bea535699dd4', class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, index.h("li", { key: '5cce5bf58b17ff1ab86d7eb009ff3084bbf487ba', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), index.h("span", { key: '6b0055d09916fe03b37d90e2d1ac5b59a47ad3bc', class: "title" }, this.renderTextContent())), this.renderChildren()))));
+        const depth = utils.getDepth(this.el) + 1;
+        return (index.h(index.Host, { key: '7d54536c9f70be5d8824bf53156879074c632d7d', "aria-hidden": "true" }, index.h(interactive.InteractiveContainer, { key: '67eeab82142a11bcd97bf9d21e768ac1309eb78c', disabled: disabled }, index.h("div", { key: 'c0cf97d6111ca6e09f26750060c669d091265b08', class: {
+                [CSS.container]: true,
+                [CSS.scale(this.scale)]: true,
+            }, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, index.h("li", { key: '36699561d3c82ff081e5f3b281e97711b2527596', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), index.h("div", { key: 'c07e0ddb3c248c610eedd80fee70dba0116c88cf', class: CSS.centerContent }, index.h("div", { key: '6a7050585ca580a5f0648753ddba28e3c71a8ea7', class: CSS.title }, this.renderTextContent(this.textLabel)), this.description ? (index.h("div", { class: CSS.description }, this.renderTextContent(this.description))) : null), this.shortHeading ? (index.h("div", { class: CSS.shortText }, this.renderTextContent(this.shortHeading))) : null, index.h("slot", { key: '73bb84b567866bd1c6a74ba84d1459d1a8c47add', name: SLOTS.contentEnd })), this.renderChildren()))));
     }
-    renderTextContent() {
-        if (!this.filterTextMatchPattern) {
-            return this.textLabel;
+    renderTextContent(text) {
+        const pattern = this.filterTextMatchPattern;
+        if (!pattern || !text) {
+            return text;
         }
-        const parts = this.textLabel.split(this.filterTextMatchPattern);
+        const parts = text.split(pattern);
         if (parts.length > 1) {
             // we only highlight the first match
             parts[1] = index.h("mark", { class: CSS.filterMatch }, parts[1]);

package/dist/cjs/calcite-color-picker-hex-input_2.cjs.entry.js

@@ -8,16 +8,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
-const utils = require('./utils-fc413133.js');
-const dom = require('./dom-93443cc1.js');
-const loadable = require('./loadable-52223908.js');
-require('./guid-9a92730c.js');
-require('./resources-543ff11e.js');
+const utils = require('./utils-42df996f.js');
+const dom = require('./dom-63b93b3b.js');
+const loadable = require('./loadable-ef8f0acf.js');
+require('./guid-4bc1bc0f.js');
+require('./resources-8556a9ce.js');
+require('./browser-02cbd1d9.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS$1 = {
     container: "container",
@@ -40,8 +41,10 @@ const ColorPickerHexInput = class {
             const { allowEmpty, internalColor } = this;
             const willClearValue = allowEmpty && !inputValue;
             const isLonghand = utils.isLonghandHex(hex);
-            // ensure modified pasted hex values are committed since we prevent default to remove the # char.
-            this.onHexInputChange();
+            if (utils.isShorthandHex(hex, this.alphaChannel)) {
+                // ensure modified pasted hex values are committed since we prevent default to remove the # char.
+                this.onHexInputChange();
+            }
             if (willClearValue || (utils.isValidHex(hex) && isLonghand)) {
                 return;
             }
@@ -65,6 +68,9 @@ const ColorPickerHexInput = class {
             node.value =
                 allowEmpty && !internalColor ? "" : this.formatOpacityForInternalInput(internalColor);
         };
+        this.onOpacityInputInput = () => {
+            this.onOpacityInputChange();
+        };
         this.onHexInputChange = () => {
             const nodeValue = this.hexInputNode.value;
             let value = nodeValue;
@@ -90,7 +96,12 @@ const ColorPickerHexInput = class {
             }
             this.internalSetValue(value, this.value);
         };
-        this.onHexInput = () => {
+        this.onInputFocus = (event) => {
+            event.type === "calciteInternalInputTextFocus"
+                ? this.hexInputNode.selectText()
+                : this.opacityInputNode.selectText();
+        };
+        this.onHexInputInput = () => {
             const hexInputValue = `#${this.hexInputNode.value}`;
             const oldValue = this.value;
             if (utils.isValidHex(hexInputValue, this.alphaChannel) &&
@@ -103,7 +114,7 @@ const ColorPickerHexInput = class {
             const { alphaChannel, hexInputNode, internalColor, value } = this;
             const { key } = event;
             const composedPath = event.composedPath();
-            if (key === "Tab" || key === "Enter") {
+            if ((key === "Tab" && utils.isShorthandHex(value, this.alphaChannel)) || key === "Enter") {
                 if (composedPath.includes(hexInputNode)) {
                     this.onHexInputChange();
                 }
@@ -197,7 +208,7 @@ const ColorPickerHexInput = class {
         const hexInputValue = this.formatHexForInternalInput(value);
         const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
         const inputScale = scale === "l" ? "m" : "s";
-        return (index.h("div", { key: '9939540e0bf570287d03276311c4d077e2ce1ae4', class: CSS$1.container }, index.h("calcite-input-text", { key: 'd2b6ab840fbd55bf16c6c5efe46d51e65b909cde', class: CSS$1.hexInput, label: messages?.hex || hexLabel, maxLength: 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInputTextInput: this.onHexInput, onCalciteInternalInputTextBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", ref: this.storeHexInputRef, scale: inputScale, value: hexInputValue }), alphaChannel ? (index.h("calcite-input-number", { class: CSS$1.opacityInput, key: "opacity-input", label: messages?.opacity, max: utils.OPACITY_LIMITS.max, maxLength: 3, min: utils.OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.onOpacityInputChange, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onKeyDown: this.onInputKeyDown, ref: this.storeOpacityInputRef, scale: inputScale, suffixText: "%", value: opacityInputValue })) : null));
+        return (index.h("div", { key: '7f3098ef31cae459bb4816fbea34cc74c174ec87', class: CSS$1.container }, index.h("calcite-input-text", { key: '66b3c778e3340ac4f9b91c4198b964c26c6a7347', class: CSS$1.hexInput, label: messages?.hex || hexLabel, maxLength: this.alphaChannel ? 8 : 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInputTextInput: this.onHexInputInput, onCalciteInternalInputTextBlur: this.onHexInputBlur, onCalciteInternalInputTextFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", ref: this.storeHexInputRef, scale: inputScale, value: hexInputValue }), alphaChannel ? (index.h("calcite-input-number", { class: CSS$1.opacityInput, key: "opacity-input", label: messages?.opacity, max: utils.OPACITY_LIMITS.max, maxLength: 3, min: utils.OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberInput: this.onOpacityInputInput, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onCalciteInternalInputNumberFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, ref: this.storeOpacityInputRef, scale: inputScale, suffixText: "%", value: opacityInputValue })) : null));
     }
     //--------------------------------------------------------------------------
     //
@@ -276,7 +287,7 @@ ColorPickerHexInput.style = CalciteColorPickerHexInputStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     swatch: "swatch",