@esri/solutions-components 0.10.26 → 0.10.28

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

@@ -7,23 +7,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const dom = require('./dom-3d3a8f25.js');
-const locale = require('./locale-351282c5.js');
-const guid = require('./guid-42cda8c9.js');
-const interactive = require('./interactive-3b85d8df.js');
-const loadable = require('./loadable-0e357195.js');
-const t9n = require('./t9n-e41672d2.js');
-const array = require('./array-708fd433.js');
-require('./resources-f11e9bd6.js');
-require('./key-82084ef6.js');
-require('./observers-5f9f67ee.js');
-require('./browser-2893460e.js');
+const index = require('./index-4b68e4b4.js');
+const dom = require('./dom-795d4a33.js');
+const locale = require('./locale-da840314.js');
+const guid = require('./guid-e84a8375.js');
+const interactive = require('./interactive-a128ac30.js');
+const loadable = require('./loadable-1c888c87.js');
+const t9n = require('./t9n-ed5c03a7.js');
+const observers = require('./observers-18d87cb5.js');
+const responsive = require('./responsive-a61585b1.js');
+const array = require('./array-286e5a3b.js');
+require('./resources-18f799c7.js');
+require('./key-47c9469a.js');
+require('./browser-333a21c5.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.12.2
+ * v2.13.0
  */
 const DURATION = 6000;
 const CSS$1 = {
@@ -37,7 +38,10 @@ const CSS$1 = {
     paginationItems: "pagination-items",
     paginationItem: "pagination-item",
     paginationItemIndividual: "pagination-item--individual",
+    paginationItemVisible: "pagination-item--visible",
+    paginationItemOutOfRange: "pagination-item--out-of-range",
     paginationItemSelected: "pagination-item--selected",
+    paginationItemRangeEdge: "pagination-item--range-edge",
     pageNext: "page-next",
     pagePrevious: "page-previous",
     autoplayControl: "autoplay-control",
@@ -51,8 +55,14 @@ const ICONS = {
     pause: "pause-f",
     play: "play-f",
 };
+const centerItemsByBreakpoint = {
+    medium: 7,
+    small: 5,
+    xsmall: 3,
+    xxsmall: 1,
+};
 
-const carouselCss = ":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;inline-size:100%;--calcite-internal-internal-carousel-item-space:1.5rem;--calcite-internal-internal-carousel-item-space-wide:3.5rem;--calcite-internal-internal-carousel-item-background-color:var(\n    --calcite-internal-carousel-item-background-color,\n    var(--calcite-color-foreground-1)\n  );--calcite-internal-internal-carousel-item-background-color-hover:var(\n    --calcite-internal-carousel-item-background-color-hover,\n    var(--calcite-color-foreground-2)\n  );--calcite-internal-internal-carousel-item-background-color-active:var(\n    --calcite-internal-carousel-item-background-color-active,\n    var(--calcite-color-foreground-2)\n  );--calcite-internal-internal-carousel-item-background-color-selected:var(\n    --calcite-internal-carousel-item-background-color-selected,\n    var(--calcite-color-foreground-1)\n  );--calcite-internal-internal-carousel-item-icon-color-hover:var(\n    --calcite-internal-carousel-item-icon-color-hover,\n    var(--calcite-action-color-transparent-hover)\n  );--calcite-internal-internal-carousel-item-icon-color:var(\n    --calcite-internal-carousel-item-icon-color,\n    var(--calcite-color-border-3)\n  );--calcite-internal-internal-carousel-item-icon-color-selected:var(\n    --calcite-internal-carousel-item-icon-color-selected,\n    var(--calcite-color-brand)\n  );--calcite-internal-internal-carousel-control-color-hover:var(\n    --calcite-internal-carousel-control-color-hover,\n    var(--calcite-internal-carousel-item-icon-color-hover)\n  );--calcite-internal-internal-carousel-control-color:var(\n    --calcite-internal-carousel-item-icon-color,\n    var(--calcite-color-border-input)\n  );--calcite-internal-internal-carousel-autoplay-progress-background-color:var(\n    --calcite-internal-carousel-autoplay-progress-background-color,\n    var(--calcite-color-border-3)\n  );--calcite-internal-internal-carousel-autoplay-progress-fill-color:var(\n    --calcite-internal-carousel-autoplay-progress-fill-color,\n    var(--calcite-color-brand)\n  )}.container{position:relative;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2);outline-color:transparent}.container: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          )}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-internal-carousel-item-space-wide);inline-size:calc(100% - var(--calcite-internal-internal-carousel-item-space-wide) * 2)}.item-container{display:flex;flex:1 1 auto;align-items:flex-start;justify-content:center;overflow:auto;padding:0.25rem;animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0px}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.pagination{margin:0.75rem;display:flex;flex-direction:row;align-items:center;justify-content:center;inline-size:auto}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .pagination{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-internal-carousel-control-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-internal-carousel-control-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:3rem;inline-size:3rem;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .pagination{inset-block-start:unset;inset-block-end:0;inset-inline:0}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-internal-carousel-control-color);--calcite-color-brand:var(--calcite-internal-internal-carousel-autoplay-progress-fill-color);--calcite-color-border-3:var(--calcite-internal-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{margin:0px;block-size:2rem;inline-size:2rem;cursor:pointer;align-items:center;border-style:none;background-color:transparent;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;align-content:center;justify-content:center;--calcite-color-foreground-1:var(--calcite-internal-internal-carousel-item-background-color);color:var(--calcite-internal-internal-carousel-item-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-internal-carousel-item-background-color-hover);color:var(--calcite-internal-internal-carousel-item-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-internal-carousel-item-background-color-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          )}.pagination-item:active{background-color:var(--calcite-internal-internal-carousel-item-background-color-active);color:var(--calcite-internal-internal-carousel-item-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{--calcite-color-foreground-1:var(--calcite-internal-internal-carousel-item-background-color-selected);--calcite-color-foreground-3:var(--calcite-internal-internal-carousel-item-background-color-selected);color:var(--calcite-internal-internal-carousel-item-icon-color-selected)}.container--overlaid .pagination-item{background-color:var(--calcite-internal-internal-carousel-item-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-internal-carousel-item-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-internal-carousel-item-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-internal-carousel-item-background-color-active)}@keyframes item-forward{0%{transform:translate3d(100px, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes item-backward{0%{transform:translate3d(-100px, 0, 0)}100%{transform:translate3d(0, 0, 0)}}: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 carouselCss = ":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;inline-size:100%;--calcite-internal-internal-carousel-item-space:1.5rem;--calcite-internal-internal-carousel-item-space-wide:3.5rem;--calcite-internal-internal-carousel-item-background-color:var(\n    --calcite-internal-carousel-item-background-color,\n    var(--calcite-color-foreground-1)\n  );--calcite-internal-internal-carousel-item-background-color-hover:var(\n    --calcite-internal-carousel-item-background-color-hover,\n    var(--calcite-color-foreground-2)\n  );--calcite-internal-internal-carousel-item-background-color-active:var(\n    --calcite-internal-carousel-item-background-color-active,\n    var(--calcite-color-foreground-2)\n  );--calcite-internal-internal-carousel-item-background-color-selected:var(\n    --calcite-internal-carousel-item-background-color-selected,\n    var(--calcite-color-foreground-1)\n  );--calcite-internal-internal-carousel-item-icon-color-hover:var(\n    --calcite-internal-carousel-item-icon-color-hover,\n    var(--calcite-action-color-transparent-hover)\n  );--calcite-internal-internal-carousel-item-icon-color:var(\n    --calcite-internal-carousel-item-icon-color,\n    var(--calcite-color-border-3)\n  );--calcite-internal-internal-carousel-item-icon-color-selected:var(\n    --calcite-internal-carousel-item-icon-color-selected,\n    var(--calcite-color-brand)\n  );--calcite-internal-internal-carousel-control-color-hover:var(\n    --calcite-internal-carousel-control-color-hover,\n    var(--calcite-internal-carousel-item-icon-color-hover)\n  );--calcite-internal-internal-carousel-control-color:var(\n    --calcite-internal-carousel-item-icon-color,\n    var(--calcite-color-border-input)\n  );--calcite-internal-internal-carousel-autoplay-progress-background-color:var(\n    --calcite-internal-carousel-autoplay-progress-background-color,\n    var(--calcite-color-border-3)\n  );--calcite-internal-internal-carousel-autoplay-progress-fill-color:var(\n    --calcite-internal-carousel-autoplay-progress-fill-color,\n    var(--calcite-color-brand)\n  )}.container{position:relative;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2);outline-color:transparent}.container: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          )}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-internal-carousel-item-space-wide);inline-size:calc(100% - var(--calcite-internal-internal-carousel-item-space-wide) * 2)}.item-container{display:flex;flex:1 1 auto;align-items:flex-start;justify-content:center;overflow:auto;padding:0.25rem;animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0px}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.pagination{margin:0.75rem;display:flex;flex-direction:row;align-items:center;justify-content:center;inline-size:auto}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .pagination{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-internal-carousel-control-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-internal-carousel-control-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:3rem;inline-size:3rem;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .pagination{inset-block-start:unset;inset-block-end:0;inset-inline:0}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-internal-carousel-control-color);--calcite-color-brand:var(--calcite-internal-internal-carousel-autoplay-progress-fill-color);--calcite-color-border-3:var(--calcite-internal-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{margin:0px;block-size:2rem;inline-size:2rem;cursor:pointer;align-items:center;border-style:none;background-color:transparent;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;align-content:center;justify-content:center;--calcite-color-foreground-1:var(--calcite-internal-internal-carousel-item-background-color);color:var(--calcite-internal-internal-carousel-item-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-internal-carousel-item-background-color-hover);color:var(--calcite-internal-internal-carousel-item-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-internal-carousel-item-background-color-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          )}.pagination-item:active{background-color:var(--calcite-internal-internal-carousel-item-background-color-active);color:var(--calcite-internal-internal-carousel-item-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{--calcite-color-foreground-1:var(--calcite-internal-internal-carousel-item-background-color-selected);--calcite-color-foreground-3:var(--calcite-internal-internal-carousel-item-background-color-selected);color:var(--calcite-internal-internal-carousel-item-icon-color-selected)}.pagination-item--individual{pointer-events:none;inline-size:0px;padding:0px;opacity:0;visibility:hidden;transition:var(--calcite-animation-timing) ease-in-out inline-size, var(--calcite-animation-timing) ease-in-out padding, var(--calcite-animation-timing) ease-in-out opacity}.pagination-item--individual.pagination-item--visible{pointer-events:auto;inline-size:2rem;opacity:1;visibility:visible}.pagination-item--range-edge calcite-icon{scale:0.75;transition:var(--calcite-animation-timing) ease-in-out scale}.container--overlaid .pagination-item{background-color:var(--calcite-internal-internal-carousel-item-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-internal-carousel-item-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-internal-carousel-item-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-internal-carousel-item-background-color-active)}@keyframes item-forward{0%{transform:translate3d(100px, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes item-backward{0%{transform:translate3d(-100px, 0, 0)}100%{transform:translate3d(0, 0, 0)}}: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 CalciteCarouselStyle0 = carouselCss;
 
 const Carousel = class {
@@ -66,6 +76,10 @@ const Carousel = class {
         this.containerId = `calcite-carousel-container-${guid.guid()}`;
         this.slideDurationInterval = null;
         this.slideInterval = null;
+        this.resizeObserver = observers.createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
+        this.resizeHandler = ({ contentRect: { width } }) => {
+            this.setMaxItemsToBreakpoint(width);
+        };
         this.autoplayHandler = () => {
             this.clearIntervals();
             this.slideDurationInterval = setInterval(this.timer, this.autoplayDuration / 100);
@@ -99,9 +113,9 @@ const Carousel = class {
         this.setSelectedItem = (requestedIndex, emit) => {
             const previousSelected = this.selectedIndex;
             this.items.forEach((el, index) => {
-                const isMatch = requestedIndex === index;
-                el.selected = isMatch;
-                if (isMatch) {
+                const match = requestedIndex === index;
+                el.selected = match;
+                if (match) {
                     this.selectedItem = el;
                     this.selectedIndex = index;
                 }
@@ -199,10 +213,12 @@ const Carousel = class {
                     }
                     break;
                 case "ArrowRight":
+                    event.preventDefault();
                     this.direction = "forward";
                     this.nextItem(true);
                     break;
                 case "ArrowLeft":
+                    event.preventDefault();
                     this.direction = "backward";
                     this.previousItem();
                     break;
@@ -225,22 +241,22 @@ const Carousel = class {
             }
         };
         this.tabListKeyDownHandler = (event) => {
-            const interactiveItems = Array(...this.tabList.querySelectorAll("button"));
+            const visiblePaginationEls = Array(...this.tabList.querySelectorAll(`button:not(.${CSS$1.paginationItemOutOfRange})`));
             const currentEl = event.target;
             switch (event.key) {
                 case "ArrowRight":
-                    dom.focusElementInGroup(interactiveItems, currentEl, "next");
+                    dom.focusElementInGroup(visiblePaginationEls, currentEl, "next");
                     break;
                 case "ArrowLeft":
-                    dom.focusElementInGroup(interactiveItems, currentEl, "previous");
+                    dom.focusElementInGroup(visiblePaginationEls, currentEl, "previous");
                     break;
                 case "Home":
                     event.preventDefault();
-                    dom.focusElementInGroup(interactiveItems, currentEl, "first");
+                    dom.focusElementInGroup(visiblePaginationEls, currentEl, "first");
                     break;
                 case "End":
                     event.preventDefault();
-                    dom.focusElementInGroup(interactiveItems, currentEl, "last");
+                    dom.focusElementInGroup(visiblePaginationEls, currentEl, "last");
                     break;
             }
         };
@@ -270,14 +286,34 @@ const Carousel = class {
                 [CSS$1.containerOverlaid]: this.controlOverlay,
             }, onKeyDown: this.tabListKeyDownHandler, ref: this.storeTabListRef }, (this.playing || this.autoplay === "" || this.autoplay || this.autoplay === "paused") &&
             this.renderRotationControl(), this.arrowType === "inline" && this.renderArrow("previous"), this.renderPaginationItems(), this.arrowType === "inline" && this.renderArrow("next")));
-        this.renderPaginationItems = () => (index.h("div", { "aria-label": this.label, class: CSS$1.paginationItems, role: "tablist" }, this.items.map((item, index$1) => {
-            const isMatch = index$1 === this.selectedIndex;
-            return (index.h("button", { "aria-controls": !isMatch ? item.id : undefined, "aria-selected": dom.toAriaBoolean(isMatch), class: {
-                    [CSS$1.paginationItem]: true,
-                    [CSS$1.paginationItemIndividual]: true,
-                    [CSS$1.paginationItemSelected]: isMatch,
-                }, "data-index": index$1, key: item.id, onClick: this.handleItemSelection, role: "tab", title: item.label }, index.h("calcite-icon", { icon: isMatch ? ICONS.active : ICONS.inactive, scale: "l" })));
-        })));
+        this.renderPaginationItems = () => {
+            const { selectedIndex, maxItems, items, label, handleItemSelection } = this;
+            return (index.h("div", { "aria-label": label, class: CSS$1.paginationItems, role: "tablist" }, items.map((item, index$1) => {
+                const itemCount = items.length;
+                const match = index$1 === selectedIndex;
+                const first = index$1 === 0;
+                const last = index$1 === itemCount - 1;
+                const endRangeStart = itemCount - maxItems - 1;
+                const inStartRange = selectedIndex < maxItems;
+                const inEndRange = selectedIndex >= endRangeStart;
+                const rangeStart = inStartRange ? 0 : selectedIndex - Math.floor(maxItems / 2);
+                const rangeEnd = inEndRange ? itemCount : rangeStart + maxItems;
+                const low = inStartRange ? 0 : inEndRange ? endRangeStart : rangeStart;
+                const high = inStartRange ? maxItems + 1 : rangeEnd;
+                const isEdge = !first && !last && !match && (index$1 === low - 1 || index$1 === high);
+                const visible = match || (index$1 <= high && index$1 >= low - 1);
+                const overflowActive = itemCount - 1 <= maxItems;
+                const icon = match ? ICONS.active : ICONS.inactive;
+                return (index.h("button", { "aria-controls": !match ? item.id : undefined, "aria-selected": dom.toAriaBoolean(match), class: {
+                        [CSS$1.paginationItem]: true,
+                        [CSS$1.paginationItemIndividual]: true,
+                        [CSS$1.paginationItemSelected]: match,
+                        [CSS$1.paginationItemRangeEdge]: itemCount - 1 > maxItems && isEdge,
+                        [CSS$1.paginationItemOutOfRange]: !(overflowActive || visible),
+                        [CSS$1.paginationItemVisible]: overflowActive || visible,
+                    }, "data-index": index$1, key: item.id, onClick: handleItemSelection, role: "tab", title: item.label }, index.h("calcite-icon", { icon: icon, scale: "l" })));
+            })));
+        };
         this.renderArrow = (direction) => {
             const isPrev = direction === "previous";
             const dir = dom.getElementDir(this.el);
@@ -308,6 +344,7 @@ const Carousel = class {
         this.effectiveLocale = "";
         this.suspendedSlideDurationRemaining = 1;
         this.slideDurationRemaining = 1;
+        this.maxItems = centerItemsByBreakpoint.xxsmall;
     }
     autoplayWatcher(autoplay) {
         if (!autoplay) {
@@ -323,9 +360,9 @@ const Carousel = class {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
+        this.resizeObserver?.observe(this.el);
     }
     componentDidLoad() {
         loadable.setComponentLoaded(this);
@@ -334,10 +371,10 @@ const Carousel = class {
         interactive.updateHostInteraction(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
         this.clearIntervals();
+        this.resizeObserver?.disconnect();
     }
     async componentWillLoad() {
         /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is "". */
@@ -401,6 +438,24 @@ const Carousel = class {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    setMaxItemsToBreakpoint(width) {
+        if (!width) {
+            return;
+        }
+        if (width >= responsive.breakpoints.width.small) {
+            this.maxItems = centerItemsByBreakpoint.medium;
+            return;
+        }
+        if (width >= responsive.breakpoints.width.xsmall) {
+            this.maxItems = centerItemsByBreakpoint.small;
+            return;
+        }
+        if (width >= responsive.breakpoints.width.xxsmall) {
+            this.maxItems = centerItemsByBreakpoint.xsmall;
+            return;
+        }
+        this.maxItems = centerItemsByBreakpoint.xxsmall;
+    }
     clearIntervals() {
         clearInterval(this.slideDurationInterval);
         clearInterval(this.slideInterval);
@@ -442,17 +497,17 @@ const Carousel = class {
     }
     render() {
         const { direction } = this;
-        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: {
+        return (index.h(index.Host, { key: 'c41171a3b16c6aad1b37f4631a2d123acaca752d' }, index.h(interactive.InteractiveContainer, { key: '03c90c14f2b3f948c0e349bede237d29ed292c7f', disabled: this.disabled }, index.h("div", { key: 'df9af99e67d3b9c61dd6ccac74e82237e8eb17c4', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
                 [CSS$1.container]: true,
                 [CSS$1.containerOverlaid]: this.controlOverlay,
                 [CSS$1.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: 'cae379b167a37ef82417ab308c7d623300790122', 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: '7c274a35b9186ba9bb04fd8124be6893eee46e5f', class: {
                 [CSS$1.itemContainer]: true,
                 [CSS$1.itemContainerForward]: direction === "forward",
                 [CSS$1.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: 'bf14a67b46e8946e9cafc57a8d0625b65513f702', 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: '0f2497545f4cf4a311ab871bcaf5ff16fe677c77', 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); }
@@ -471,7 +526,7 @@ Carousel.style = CalciteCarouselStyle0;
 /*!
  * 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.12.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -495,7 +550,7 @@ const CarouselItem = class {
     // --------------------------------------------------------------------------
     render() {
         const id = this.el.id || this.guid;
-        return (index.h(index.Host, { key: '6d4ac387ae1b4748050c82d8387edd30e6c0e662', id: id }, index.h("div", { key: 'c6a4c67d99dd6e34198b2d128efb518e757277ce', "aria-label": this.label, class: { [CSS.container]: true, [CSS.selected]: this.selected }, role: "tabpanel" }, index.h("slot", { key: '2ed94883d41dba5430a39933c6fe91bb25b12703' }))));
+        return (index.h(index.Host, { key: '5606df99edd6007701f391f095c88270eed4ccf1', id: id }, index.h("div", { key: '7147a10dbb3fa9292da09207709bfa5e7e857bf9', "aria-label": this.label, class: { [CSS.container]: true, [CSS.selected]: this.selected }, role: "tabpanel" }, index.h("slot", { key: '8b6876c8fc55afd1cac458b97063f66dff2cd9e2' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -7,29 +7,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const dom = require('./dom-3d3a8f25.js');
-const form = require('./form-8132060d.js');
-const guid = require('./guid-42cda8c9.js');
-const interactive = require('./interactive-3b85d8df.js');
-const key = require('./key-82084ef6.js');
-const label = require('./label-e7d3c371.js');
-const loadable = require('./loadable-0e357195.js');
-const resources = require('./resources-f11e9bd6.js');
-require('./browser-2893460e.js');
-require('./component-7f2bd646.js');
+const index = require('./index-4b68e4b4.js');
+const dom = require('./dom-795d4a33.js');
+const form = require('./form-6dd8050a.js');
+const guid = require('./guid-e84a8375.js');
+const interactive = require('./interactive-a128ac30.js');
+const key = require('./key-47c9469a.js');
+const label = require('./label-726fc287.js');
+const loadable = require('./loadable-1c888c87.js');
+const resources = require('./resources-18f799c7.js');
+require('./component-5d190962.js');
+require('./browser-333a21c5.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.12.2
+ * v2.13.0
  */
 const CSS = {
     toggle: "toggle",
     check: "check-svg",
 };
 
-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,.toggle::before{inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute}.toggle:not(.calcite--rtl)::after{content:\"\";transform:translateX(-50%) translateY(-50%)}.toggle.calcite--rtl::before{content:\"\";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]) .check-svg,:host([scale=s]) .toggle{inline-size:var(--calcite-checkbox-size, 0.75rem);block-size:var(--calcite-checkbox-size, 0.75rem)}:host([scale=m]) .check-svg,:host([scale=m]) .toggle{inline-size:var(--calcite-checkbox-size, var(--calcite-font-size--1));block-size:var(--calcite-checkbox-size, var(--calcite-font-size--1))}:host([scale=l]) .check-svg,:host([scale=l]) .toggle{inline-size:var(--calcite-checkbox-size, 1rem);block-size:var(--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{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-checkbox-border-color, var(--calcite-color-border-input));color:var(--calcite-checkbox-icon-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-checkbox-border-color-hover, 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,.toggle::before{inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute}.toggle:not(.calcite--rtl)::after{content:\"\";transform:translateX(-50%) translateY(-50%)}.toggle.calcite--rtl::before{content:\"\";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 = class {
@@ -126,12 +126,10 @@ const Checkbox = class {
     //--------------------------------------------------------------------------
     connectedCallback() {
         this.guid = this.el.id || `calcite-checkbox-${guid.guid()}`;
-        interactive.connectInteractive(this);
         label.connectLabel(this);
         form.connectForm(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         label.disconnectLabel(this);
         form.disconnectForm(this);
     }
@@ -151,10 +149,10 @@ const Checkbox = class {
     // --------------------------------------------------------------------------
     render() {
         const rtl = dom.getElementDir(this.el) === "rtl";
-        return (index.h(index.Host, { key: '29feebf02ef9c71ea9e6dafe0f5ed11b0cb89848', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: 'e89b0df0f5638181e233bce9c454e48c6963de19', disabled: this.disabled }, index.h("div", { key: '25a91677124b2b77e6e30bf371afce3153c26761', "aria-checked": dom.toAriaBoolean(this.checked), "aria-label": label.getLabelText(this), class: {
+        return (index.h(index.Host, { key: '146f32544b1a2d6d3c0292462edb979699e4b75a', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: 'd5897a38a203d29967ec1f1e618a7b37d60d9b95', disabled: this.disabled }, index.h("div", { key: '17739f11d7e6368788941434ff8ef6f5d6291cd9', "aria-checked": dom.toAriaBoolean(this.checked), "aria-label": label.getLabelText(this), class: {
                 [CSS.toggle]: true,
                 [resources.CSS_UTILITY.rtl]: rtl,
-            }, onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, index.h("svg", { key: '1aae8a62a1f771e2d3e7fb731bae49e608f15617', "aria-hidden": "true", class: CSS.check, viewBox: "0 0 16 16" }, index.h("path", { key: '27ea5db7e99c8f82f5e7773b684f64e9d9a8101a', d: this.getPath() })), index.h("slot", { key: 'c6ea3d961bc6b3b7018378b8044691b88d65f2d3' })), index.h(form.HiddenFormInputSlot, { key: 'bf3c47ad291541078a94dd46205e912622e85411', component: this }))));
+            }, onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, index.h("svg", { key: '99df5e78e296d086a6782983a929bd149c3c4e39', "aria-hidden": "true", class: CSS.check, viewBox: "0 0 16 16" }, index.h("path", { key: '57458a12cf5feeada4c57dfc51c5b62f1e73d49b', d: this.getPath() })), index.h("slot", { key: 'ad29699957eb1d3f041549d7057b4842d3396b3c' })), index.h(form.HiddenFormInputSlot, { key: '1b2a325739b08d7f21d4abee49fe27f632f78183', component: this }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -7,13 +7,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const dom = require('./dom-3d3a8f25.js');
-const interactive = require('./interactive-3b85d8df.js');
-const loadable = require('./loadable-0e357195.js');
-require('./guid-42cda8c9.js');
-require('./resources-f11e9bd6.js');
-require('./browser-2893460e.js');
+const index = require('./index-4b68e4b4.js');
+const dom = require('./dom-795d4a33.js');
+const interactive = require('./interactive-a128ac30.js');
+const loadable = require('./loadable-1c888c87.js');
+require('./guid-e84a8375.js');
+require('./resources-18f799c7.js');
+require('./browser-333a21c5.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;
@@ -87,11 +87,7 @@ const ChipGroup = class {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        interactive.connectInteractive(this);
-    }
     componentDidRender() {
-        interactive.disconnectInteractive(this);
         interactive.updateHostInteraction(this);
     }
     componentDidLoad() {
@@ -184,7 +180,7 @@ const ChipGroup = class {
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
         const { disabled } = this;
-        return (index.h(interactive.InteractiveContainer, { key: '341dd9e8f25d4d358ea6e33740d8b851a5fa0e9d', disabled: disabled }, index.h("div", { key: '66c9eaa00b7ca0c602f94a017f5b6ef6afc3bd93', "aria-disabled": dom.toAriaBoolean(disabled), "aria-label": this.label, class: "container", role: role }, index.h("slot", { key: 'd62c336c6cdca0bbd5c6673975ae4a25bc8ef9df', onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
+        return (index.h(interactive.InteractiveContainer, { key: '0db5548f1c2854898191b4d6eb8140cae2faf3d8', disabled: disabled }, index.h("div", { key: '60fc92fea20478ee6fde23d807f17f7f472c1f5a', "aria-label": this.label, class: "container", role: role }, index.h("slot", { key: 'd43fcf04af0063cd4d00f46e6dd61347eafccb3b', onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -7,25 +7,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const dom = require('./dom-3d3a8f25.js');
-const loadable = require('./loadable-0e357195.js');
-const t9n = require('./t9n-e41672d2.js');
-const interactive = require('./interactive-3b85d8df.js');
-const locale = require('./locale-351282c5.js');
-const key = require('./key-82084ef6.js');
-const component = require('./component-7f2bd646.js');
-const browser = require('./browser-2893460e.js');
-const conditionalSlot = require('./conditionalSlot-2d2541f4.js');
-const guid = require('./guid-42cda8c9.js');
-const utils = require('./utils-edb4e372.js');
-require('./resources-f11e9bd6.js');
-require('./observers-5f9f67ee.js');
+const index = require('./index-4b68e4b4.js');
+const dom = require('./dom-795d4a33.js');
+const loadable = require('./loadable-1c888c87.js');
+const t9n = require('./t9n-ed5c03a7.js');
+const interactive = require('./interactive-a128ac30.js');
+const locale = require('./locale-da840314.js');
+const key = require('./key-47c9469a.js');
+const component = require('./component-5d190962.js');
+const browser = require('./browser-333a21c5.js');
+const conditionalSlot = require('./conditionalSlot-37ff4832.js');
+const guid = require('./guid-e84a8375.js');
+const utils = require('./utils-7e5609ab.js');
+require('./resources-18f799c7.js');
+require('./observers-18d87cb5.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.12.2
+ * v2.13.0
  */
 const CSS$1 = {
     title: "title",
@@ -55,7 +55,7 @@ const ICONS = {
     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}.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=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=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([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]){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{display:inline-flex;cursor:default;border-radius:var(--calcite-chip-corner-radius, 9999px)}:host([closed]){display:none}:host([appearance=outline]) .container,:host([appearance=outline-fill]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([appearance=outline]):host([kind=brand]) .container,:host([appearance=outline-fill]):host([kind=brand]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-brand))}:host([appearance=outline]):host([kind=inverse]) .container,:host([appearance=outline-fill]):host([kind=inverse]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-border-inverse))}:host([appearance=outline]):host([kind=neutral]) .container,:host([appearance=outline-fill]):host([kind=neutral]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-border-1))}:host([appearance=outline]) .close,:host([appearance=outline-fill]) .close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)))}:host([appearance=outline]) .container{background-color:transparent}:host([appearance=outline-fill]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-foreground-1))}:host([appearance=solid]) .container{border-color:transparent}:host([appearance=solid]):host([kind=brand]) .container,:host([appearance=solid]):host([kind=inverse]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-inverse))}:host([appearance=solid]):host([kind=brand]) .close,:host([appearance=solid]):host([kind=inverse]) .close{outline-color:var(--calcite-color-text-inverse)}:host([appearance=solid]):host([kind=brand]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-brand))}:host([appearance=solid]):host([kind=inverse]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-inverse))}:host([appearance=solid]):host([kind=neutral]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-foreground-2))}:host([kind=neutral]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([kind=neutral]) .container .close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)))}:host([selected]) .select-icon{opacity:1}:host([scale=s]) .container{--calcite-internal-chip-block-size:1.5rem ;--calcite-internal-chip-container-space-x-end:0.25rem ;--calcite-internal-chip-container-space-x-start:0.25rem ;--calcite-internal-chip-font-size:var(--calcite-font-size--2);--calcite-internal-chip-icon-size:1rem ;--calcite-internal-chip-icon-space:0.25rem ;--calcite-internal-chip-image-size:1.25rem ;--calcite-internal-chip-title-space:0.25rem ;--calcite-internal-close-size:1rem }:host([scale=s]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-start:var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-end:var(--calcite-spacing-px)}:host([scale=s]) .container.image--slotted:has(.chip-icon),:host([scale=s]) .container.image--slotted.text--slotted,:host([scale=s]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end:0.25rem }:host([scale=s]) .container.image--slotted:not(.text--slotted,:has(.chip-icon)),:host([scale=s]) .container.image--slotted:not(.selectable){--calcite-internal-chip-container-space-x-start:var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start:var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end:0.375rem ;--calcite-internal-chip-select-space-x-start:0}:host([scale=s]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end:0.5rem ;--calcite-internal-chip-select-space-x-start:0.125rem }:host([scale=s]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start:0.25rem ;--calcite-internal-chip-select-space-x-end:0.25rem ;--calcite-internal-chip-select-space-x-start:0.25rem }:host([scale=s]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end:0.5rem ;--calcite-internal-chip-select-space-x-start:0.375rem ;--calcite-internal-chip-container-space-x-start:var(--calcite-spacing-px)}:host([scale=s]) .container.multiple:not(.is-circle).image--slotted:not(.text--slotted){--calcite-internal-chip-select-space-x-start:0.375rem }:host([scale=m]) .container{--calcite-internal-chip-block-size:2rem ;--calcite-internal-chip-container-space-x-end:0.375rem ;--calcite-internal-chip-container-space-x-start:0.375rem ;--calcite-internal-chip-font-size:var(--calcite-font-size--1);--calcite-internal-chip-icon-size:1.5rem ;--calcite-internal-chip-icon-space:0.375rem ;--calcite-internal-chip-image-size:1.5rem ;--calcite-internal-chip-title-space:0.375rem ;--calcite-internal-close-size:1.5rem }:host([scale=m]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end:var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-start:var(--calcite-spacing-px)}:host([scale=m]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start:0.25rem }:host([scale=m]) .container.image--slotted:has(.chip-icon),:host([scale=m]) .container.image--slotted.text--slotted,:host([scale=m]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end:0.375rem }:host([scale=m]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start:0.25rem }:host([scale=m]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end:var(--calcite-spacing-px);--calcite-internal-chip-select-space-x-start:0}:host([scale=m]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end:0.25rem ;--calcite-internal-chip-select-space-x-start:0.375rem }:host([scale=m]) .container.multiple:not(.is-circle){--calcite-internal-chip-select-space-x-end:0.125rem ;--calcite-internal-chip-select-space-x-start:0.125rem }:host([scale=m]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end:0.5rem ;--calcite-internal-chip-select-space-x-start:0.25rem }:host([scale=m]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end:0.25rem }:host([scale=l]) .container{--calcite-internal-chip-block-size:2.75rem ;--calcite-internal-chip-container-space-x-end:0.5rem ;--calcite-internal-chip-container-space-x-start:0.5rem ;--calcite-internal-chip-font-size:var(--calcite-font-size-0);--calcite-internal-chip-icon-size:2rem ;--calcite-internal-chip-icon-space:0.5rem ;--calcite-internal-chip-image-size:2rem ;--calcite-internal-chip-title-space:0.5rem ;--calcite-internal-close-size:2rem }:host([scale=l]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end:0.25rem ;--calcite-internal-chip-container-space-x-start:0.25rem }:host([scale=l]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start:0.375rem }:host([scale=l]) .container.image--slotted:has(.chip-icon),:host([scale=l]) .container.image--slotted.text--slotted,:host([scale=l]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end:0.5rem }:host([scale=l]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start:0.375rem }:host([scale=l]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end:0.25rem ;--calcite-internal-chip-select-space-x-start:0}:host([scale=l]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end:0.375rem ;--calcite-internal-chip-select-space-x-start:0.5rem }:host([scale=l]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start:0.5rem ;--calcite-internal-chip-select-space-x-end:0.25rem ;--calcite-internal-chip-select-space-x-start:0.25rem }:host([scale=l]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end:0.75rem }:host([scale=l]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end:0.375rem }.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;border-radius:var(--calcite-chip-corner-radius, 9999px);border-width:var(--calcite-border-width-sm);border-style:solid;font-size:var(--calcite-internal-chip-font-size, var(--calcite-font-size));padding-inline-start:var(--calcite-internal-chip-container-space-x-start);padding-inline-end:var(--calcite-internal-chip-container-space-x-end);block-size:var(--calcite-internal-chip-block-size, auto);inline-size:var(--calcite-internal-chip-inline-size, auto);min-inline-size:var(--calcite-internal-chip-block-size, auto)}.container:hover .select-icon--active{opacity:1}.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          )}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container:not(.text--slotted) .title,.container:not(.image--slotted) .image-container{display:none}.container.is-circle .chip-icon,.container.is-circle .image-container{padding:0}.title{padding-inline:var(--calcite-internal-chip-title-space)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none;block-size:var(--calcite-internal-chip-image-size, 1.5rem);inline-size:var(--calcite-internal-chip-image-size, 1.5rem);padding-inline-start:0;padding-inline-end:var(--calcite-internal-chip-image-space-x-end, 0)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, currentColor)));padding-inline:var(--calcite-internal-chip-icon-space, 0.375rem)}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:absolute;visibility:hidden;inline-size:auto;opacity:0;transition:opacity 0.15s ease-in-out, inline-size 0.15s ease-in-out;color:var(--calcite-chip-select-icon-color, currentColor)}.select-icon.select-icon--active{position:relative;visibility:visible;opacity:0.5;color:var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor))}.multiple .select-icon{display:flex;align-items:center;justify-content:center}.multiple .select-icon,.single .select-icon--active{padding-inline-start:var(--calcite-internal-chip-select-space-x-start);padding-inline-end:var(--calcite-internal-chip-select-space-x-end);block-size:var(--calcite-internal-chip-icon-size, 1.5rem);inline-size:var(--calcite-internal-chip-icon-size, 1.5rem)}.close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor))}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}.close{margin:0px;cursor:pointer;align-items:center;border-radius:50%;border-style:none;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;background-color:var(--calcite-close-background-color, var(--calcite-color-transparent));-webkit-appearance:none;display:flex;align-content:center;justify-content:center;color:var(--calcite-close-icon-color, var(--calcite-color-text-1));block-size:var(--calcite-internal-close-size, 1.5rem );inline-size:var(--calcite-internal-close-size, 1.5rem );padding:0}.close:hover,.close:focus{background-color:var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover))}.close: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          )}.close:active{background-color:var(--calcite-close-background-color-press, var(--calcite-color-transparent-press))}.close calcite-icon{color:inherit}: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 {
@@ -132,7 +132,6 @@ const Chip = class {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
     }
@@ -146,7 +145,6 @@ const Chip = class {
         interactive.updateHostInteraction(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
@@ -252,9 +250,9 @@ const Chip = class {
                 : this.interactive
                     ? "button"
                     : undefined;
-        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
+        return (index.h(index.Host, { key: '7feca8bad37627baabfc4abd25cf135e1e9f196b' }, index.h(interactive.InteractiveContainer, { key: 'af2360b4b768ae8c643d52f4bdb9f5d282504114', disabled: disabled }, index.h("div", { key: '8d905c4ab20d271a211282b95ebcb2d305d76cb7', "aria-checked": this.selectionMode !== "none" && this.interactive
                 ? dom.toAriaBoolean(this.selected)
-                : undefined, "aria-disabled": disableInteraction ? dom.toAriaBoolean(disabled) : undefined, "aria-label": this.label, class: {
+                : undefined, "aria-label": this.label, class: {
                 [CSS$1.container]: true,
                 [CSS$1.textSlotted]: this.hasText,
                 [CSS$1.imageSlotted]: this.hasImage,
@@ -269,7 +267,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: '0b3d668d66e359ecc3690ad87033e7e49a9250ef', class: CSS$1.title }, index.h("slot", { key: 'ff1af06039b94df6108f5e371e23ad9debfd388e', 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: 'dab6eae3f8330b85ffac4c7fe1b2fcbb53327196', class: CSS$1.title }, index.h("slot", { key: '72ba5bd0c7a97c30f766da119f419261aab24acb', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -284,7 +282,7 @@ 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.12.2
+ * v2.13.0
  */
 const CSS = {
     active: "label--active",
@@ -352,11 +350,9 @@ const ComboboxItem = class {
     connectedCallback() {
         this.ancestors = utils.getAncestors(this.el);
         conditionalSlot.connectConditionalSlotComponent(this);
-        interactive.connectInteractive(this);
     }
     disconnectedCallback() {
         conditionalSlot.disconnectConditionalSlotComponent(this);
-        interactive.disconnectInteractive(this);
     }
     componentDidRender() {
         interactive.updateHostInteraction(this);
@@ -414,10 +410,10 @@ const ComboboxItem = class {
             [CSS.single]: isSingleSelect,
         };
         const depth = utils.getDepth(this.el) + 1;
-        return (index.h(index.Host, { key: '893a354b69619332b4f45458224aa8b41f90111e', "aria-hidden": "true", "aria-label": itemLabel }, index.h(interactive.InteractiveContainer, { key: 'd476f526f4d55a6b7b2cf498f97eb2a8db67222b', disabled: disabled }, index.h("div", { key: '327153394df9ebd4e6cd5dbd409d7fdd473beb3e', class: {
+        return (index.h(index.Host, { key: '484c17421421afe7739dc37cc3edb46c2fd0e083', "aria-hidden": "true", "aria-label": itemLabel }, index.h(interactive.InteractiveContainer, { key: '71135810fa4af5e17b668d13af219c7575085a9e', disabled: disabled }, index.h("div", { key: '2db3e68f23449032b1ac5957a9376a68815e03c5', class: {
                 [CSS.container]: true,
                 [CSS.scale(this.scale)]: true,
-            }, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, index.h("li", { key: 'f9a623aafce0135cb4e7e9e30579f98e18bf38e6', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), index.h("div", { key: '8d90ab670e01f935a4217e24e175cc9e6cebfecf', class: CSS.centerContent }, index.h("div", { key: '176cc0659c8778c2f77be2f3912963b121e99ee7', class: CSS.title }, this.renderTextContent(headingText)), 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: '8646cb9cde757ea2e34ec0c3f8cdc6ac806e1142', name: SLOTS.contentEnd })), this.renderChildren()))));
+            }, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, index.h("li", { key: '153f7e8af6cb925630fb08fc5cfcf4a8df48ad2a', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), index.h("div", { key: '4d9bbd0bc113dc2196e3141a84f6137e7d48b95e', class: CSS.centerContent }, index.h("div", { key: 'd531d42c8af37b9fbdbda7457e88f4688427911b', class: CSS.title }, this.renderTextContent(headingText)), 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: 'f4c71258fff023a30662c7105e1a7492edafa14a', name: SLOTS.contentEnd })), this.renderChildren()))));
     }
     renderTextContent(text) {
         const pattern = this.filterTextMatchPattern;