@esri/solutions-components 0.10.27 → 0.10.28

package/dist/components/calcite-text-area.js

@@ -11,7 +11,7 @@ import { c as connectLocalized, d as disconnectLocalized, n as numberStringForma
 import { c as createObserver } from './observers.js';
 import { b as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { g as guid } from './guid.js';
 import { V as Validation } from './Validation.js';
 import { s as syncHiddenFormInput } from './input2.js';
@@ -20,7 +20,7 @@ import { t as throttle } from './throttle.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 = {
     assistiveText: "assistive-text",
@@ -35,10 +35,10 @@ const CSS = {
     readOnly: "readonly",
     textAreaInvalid: "text-area--invalid",
     footerSlotted: "footer--slotted",
-    borderColor: "border--color",
     hide: "hide",
-    blockSizeFull: "block-size--full",
     footerEndSlotOnly: "footer--end-only",
+    textArea: "text-area",
+    textAreaOnly: "text-area--only",
 };
 const IDS = {
     validationMessage: "textAreaValidationMessage",
@@ -49,7 +49,7 @@ const SLOTS = {
 };
 const RESIZE_TIMEOUT = 100;
 
-const textAreaCss = ":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{position:relative;display:inline-block;block-size:100%;inline-size:100%}textarea{position:relative;margin:0px;box-sizing:border-box;display:block;inline-size:100%;border-width:1px;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);font-family:var(--calcite-font-family);color:var(--calcite-color-text-1);min-inline-size:12rem;border-block-end:1px solid var(--calcite-color-border-3)}@media screen and (max-width: 480px){textarea{resize:none}}textarea: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          )}textarea.text-area--invalid{border-width:1px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-status-danger)}textarea.text-area--invalid: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          )}textarea.footer--slotted{min-inline-size:18rem}.footer{box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1)}.character-limit{display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.character--over-limit{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-status-danger)}:host([resize=none]) textarea{resize:none}:host([resize=horizontal]) textarea{resize:horizontal}:host([resize=vertical]) textarea{resize:vertical}:host([scale=s]){font-size:var(--calcite-font-size--2)}:host([scale=s]) .footer{padding-block:0.25rem;padding-inline:0.5rem;min-block-size:1.75rem}:host([scale=s]) textarea{padding-block:0.25rem;padding-inline:0.5rem}:host([scale=s]) textarea,:host([scale=s]) .footer,:host([scale=s]) .character-limit{padding-inline-start:0.5rem;font-size:var(--calcite-font-size--2)}:host([scale=m]) textarea{padding-block:0.5rem;padding-inline:0.75rem}:host([scale=m]) .footer{padding-block:0.5rem;padding-inline:0.75rem;min-block-size:2.25rem}:host([scale=m]) textarea,:host([scale=m]) .footer,:host([scale=m]) .character-limit{padding-inline-start:0.75rem;font-size:var(--calcite-font-size--1)}:host([scale=l]){font-size:var(--calcite-font-size-0)}:host([scale=l]) textarea{padding-block:0.75rem;padding-inline:1rem}:host([scale=l]) .footer{padding-block:0.75rem;padding-inline:1rem;min-block-size:2.75rem}:host([scale=l]) textarea,:host([scale=l]) .footer,:host([scale=l]) .character-limit{padding-inline-start:1rem;font-size:var(--calcite-font-size-0)}:host([status=invalid]) textarea{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) textarea: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          )}.readonly{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}.border--color{border-block-end-width:1px;border-color:var(--calcite-color-border-input)}.border--color:focus{border-block-end-width:2px}textarea.block-size--full{block-size:100%}.content,.hide{display:none}.container{display:flex;inline-size:100%;justify-content:space-between}.footer--end-only{justify-content:flex-end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::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([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const textAreaCss = ":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{position:relative;display:inline-block;block-size:100%;inline-size:100%;--calcite-internal-text-area-border-color:var(--calcite-text-area-border-color, var(--calcite-color-border-input));--calcite-internal-text-area-footer-border-color:var(\n    --calcite-text-area-footer-border-color,\n    var(--calcite-internal-text-area-border-color)\n  )}.text-area,.footer{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--1));background-color:var(--calcite-text-area-background-color, var(--calcite-color-foreground-1));padding-block:var(--calcite-spacing-sm);padding-inline:var(--calcite-spacing-md)}.text-area{position:relative;margin:0px;box-sizing:border-box;display:block;inline-size:100%;font-family:var(--calcite-font-family);--calcite-internal-text-area-border-block-end-color:var(--calcite-internal-text-area-border-color);border:var(--calcite-border-width-sm) solid var(--calcite-internal-text-area-border-color);border-block-end-color:var(--calcite-internal-text-area-border-block-end-color);color:var(--calcite-text-area-text-color, var(--calcite-color-text-1));font-family:var(--calcite-sans-family);max-block-size:var(--calcite-text-area-max-height);min-block-size:var(--calcite-text-area-min-height);max-inline-size:var(--calcite-text-area-max-width);min-inline-size:var(--calcite-text-area-min-width, 12rem)}.text-area::-moz-placeholder{font-weight:var(--calcite-font-weight-normal)}.text-area::placeholder{font-weight:var(--calcite-font-weight-normal)}@media screen and (max-width: 480px){.text-area{resize:none}}.text-area: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          )}.text-area.text-area--invalid{--calcite-internal-text-area-border-color:var(--calcite-color-status-danger)}.text-area.text-area--invalid: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          )}.text-area.footer--slotted{min-inline-size:18rem}.text-area:not(.text-area--only,.text-area--invalid){--calcite-internal-text-area-border-block-end-color:var(\n    --calcite-text-area-divider-color,\n    var(--calcite-color-border-3)\n  )}.footer{box-sizing:border-box;display:flex;align-items:center;border:var(--calcite-border-width-sm) solid var(--calcite-internal-text-area-footer-border-color);border-block-start:var(--calcite-border-width-none);min-block-size:2.25rem}.character-limit{display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--1));font-weight:var(--calcite-font-weight-regular);color:var(--calcite-text-area-character-limit-text-color, var(--calcite-color-text-2));padding-inline-start:var(--calcite-spacing-md)}.character--over-limit{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-status-danger)}.readonly{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}.content,.hide{display:none}.container{display:flex;inline-size:100%;justify-content:space-between}.footer--end-only{justify-content:flex-end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.text-area.text-area--only{block-size:100%}:host([resize=none]) .text-area{resize:none}:host([resize=horizontal]) .text-area{resize:horizontal}:host([resize=vertical]) .text-area{resize:vertical}:host([scale=s]) .text-area,:host([scale=s]) .footer,:host([scale=s]) .character-limit{padding-inline-start:0.5rem;font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--2))}:host([scale=s]) .footer{min-block-size:1.75rem}:host([scale=s]) .text-area{padding-block:0.25rem;padding-inline:0.5rem}:host([scale=m]) .text-area{padding-block:0.5rem;padding-inline:0.75rem}:host([scale=m]) .footer{padding-block:0.5rem;padding-inline:0.75rem;min-block-size:2.25rem}:host([scale=l]) .text-area,:host([scale=l]) .footer{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size-0));padding-block:var(--calcite-spacing-md);padding-inline:var(--calcite-spacing-xl)}:host([scale=l]) .footer{min-block-size:2.75rem}:host([scale=l]) .text-area,:host([scale=l]) .footer,:host([scale=l]) .character-limit{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size-0));padding-inline-start:var(--calcite-spacing-xl)}:host([status=invalid]){--calcite-internal-text-area-border-color:var(--calcite-color-status-danger)}:host([status=invalid]) .text-area: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([disabled]) .text-area,:host([disabled]) .footer{opacity:var(--calcite-opacity-half)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::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([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteTextAreaStyle0 = textAreaCss;
 
 const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends HTMLElement {
@@ -165,7 +165,6 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends HTMLEle
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLabel(this);
         connectForm(this);
         connectLocalized(this);
@@ -183,7 +182,6 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends HTMLEle
         this.setTextAreaHeight();
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectLocalized(this);
@@ -192,20 +190,20 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends HTMLEle
     }
     render() {
         const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;
-        return (h(Host, { key: '4bcfac668585f0f53f839dd7040c10c86466f7ea' }, h(InteractiveContainer, { key: '2731deb4f42e1ef61d5d53fbbba5fd267ba6ecc0', disabled: this.disabled }, h("textarea", { key: '8746db6bd65da8641c449e1a3ab90371dd6a3aab', "aria-describedby": this.guid, "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid" || this.isCharacterLimitExceeded()), "aria-label": getLabelText(this), autofocus: this.el.autofocus, class: {
+        return (h(Host, { key: '87f925e13e3a1bef5b85af59a4e61433c3262929' }, h(InteractiveContainer, { key: '3431b47034859c62b0d0116b5ff47189cd46ea0b', disabled: this.disabled }, h("textarea", { key: '78e60318dc05f03f0ec0f0738384b33a7e4ed546', "aria-describedby": this.guid, "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid" || this.isCharacterLimitExceeded()), "aria-label": getLabelText(this), autofocus: this.el.autofocus, class: {
+                [CSS.textArea]: true,
                 [CSS.readOnly]: this.readOnly,
                 [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),
                 [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,
-                [CSS.blockSizeFull]: !hasFooter,
-                [CSS.borderColor]: !hasFooter,
-            }, cols: this.columns, disabled: this.disabled, name: this.name, onChange: this.handleChange, onInput: this.handleInput, placeholder: this.placeholder, readOnly: this.readOnly, ref: this.setTextAreaEl, required: this.required, rows: this.rows, value: this.value, wrap: this.wrap }), h("span", { key: '18f5b2cc042e0072bf14585f097c59e033e90565', class: { [CSS.content]: true } }, h("slot", { key: '5ad6ecb6e80821617067f206a2a96d1921ccd5f1', onSlotchange: this.contentSlotChangeHandler })), h("footer", { key: 'bf75a8624f1d73bebfaf5a4dc9d49c4ffb9bdca0', class: {
+                [CSS.textAreaOnly]: !hasFooter,
+            }, cols: this.columns, disabled: this.disabled, name: this.name, onChange: this.handleChange, onInput: this.handleInput, placeholder: this.placeholder, readOnly: this.readOnly, ref: this.setTextAreaEl, required: this.required, rows: this.rows, value: this.value, wrap: this.wrap }), h("span", { key: '54d603509f65611918b788280124499ecf2161cf', class: { [CSS.content]: true } }, h("slot", { key: 'e1ffe00ed1eeb26899f372ea9d011da20bcddfeb', onSlotchange: this.contentSlotChangeHandler })), h("footer", { key: 'bb52300f3ba3568e0e325c7e620cb6f5c53cba37', class: {
                 [CSS.footer]: true,
                 [CSS.readOnly]: this.readOnly,
                 [CSS.hide]: !hasFooter,
-            }, ref: (el) => (this.footerEl = el) }, h("div", { key: 'd16b1caa152ce0aeada636c9758b0424461c9123', class: {
+            }, ref: (el) => (this.footerEl = el) }, h("div", { key: 'a5c5c250493dab203789dd27ce187c817006c5be', class: {
                 [CSS.container]: true,
                 [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements,
-            } }, h("slot", { key: 'c488efe95fe4c0e7e83bb74644729f5ca864312b', name: SLOTS.footerStart, onSlotchange: (event) => (this.startSlotHasElements = slotChangeHasAssignedElement(event)) }), h("slot", { key: 'c0228767e3af06d68a9a887b9d26e08c95fa8d05', name: SLOTS.footerEnd, onSlotchange: (event) => (this.endSlotHasElements = slotChangeHasAssignedElement(event)) })), this.renderCharacterLimit()), h(HiddenFormInputSlot, { key: '4d1b9b4a7c7fb7f0ac12045d85798340a9e127ce', component: this }), this.isCharacterLimitExceeded() && (h("span", { key: 'a89f7f1c087d7c6f6ae4e3a4f33869d169323d1b', "aria-hidden": true, "aria-live": "polite", class: CSS.assistiveText, id: this.guid }, this.replacePlaceHoldersInMessages())), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            } }, h("slot", { key: 'a54c7b6ca529475fa59cf1849213cd0ec7bf8f9c', name: SLOTS.footerStart, onSlotchange: (event) => (this.startSlotHasElements = slotChangeHasAssignedElement(event)) }), h("slot", { key: 'e14af1362fd85e7461c42dd10dfd188d10f59ab0', name: SLOTS.footerEnd, onSlotchange: (event) => (this.endSlotHasElements = slotChangeHasAssignedElement(event)) })), this.renderCharacterLimit()), h(HiddenFormInputSlot, { key: 'b64b6dc288df7eadcf3eef9e17aa931732f4ad09', component: this }), this.isCharacterLimitExceeded() && (h("span", { key: 'fb2017a6f21f4590934d9a1118e5dc5ee29e1dd5', "aria-live": "polite", class: CSS.assistiveText, id: this.guid }, this.replacePlaceHoldersInMessages())), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/calcite-tile-group.js

@@ -4,14 +4,14 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { c as createObserver } from './observers.js';
 import { y as focusElementInGroup } from './dom.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 = {
     container: "container",
@@ -112,7 +112,6 @@ const TileGroup = /*@__PURE__*/ proxyCustomElement(class TileGroup extends HTMLE
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         this.mutationObserver?.observe(this.el, { childList: true });
         this.updateTiles();
     }
@@ -120,7 +119,6 @@ const TileGroup = /*@__PURE__*/ proxyCustomElement(class TileGroup extends HTMLE
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         this.mutationObserver?.disconnect();
     }
     //--------------------------------------------------------------------------
@@ -163,7 +161,7 @@ const TileGroup = /*@__PURE__*/ proxyCustomElement(class TileGroup extends HTMLE
     //--------------------------------------------------------------------------
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-        return (h(InteractiveContainer, { key: '85de45a7ce2b724d46e4e7a6456e94da0b34ddb9', disabled: this.disabled }, h("div", { key: '97b55eb827e1bd60b999eb42483119ff32a364a1', "aria-label": this.label, class: CSS.container, role: role }, h("slot", { key: 'ae45a8ec397c2a71c8e363eb4a37106b79807d6e', onSlotchange: this.updateTiles, ref: this.setSlotEl }))));
+        return (h(InteractiveContainer, { key: 'b6652c98d563b78b3eda1dfffb61efdbbfbbae58', disabled: this.disabled }, h("div", { key: 'e708dc17cf003fd7799f3f510f2dd76bb236a418', "aria-label": this.label, class: CSS.container, role: role }, h("slot", { key: 'e3fa46a38e975d2c45371fc9b5c1a89d271143e3', onSlotchange: this.updateTiles, ref: this.setSlotEl }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/calcite-tile-select-group.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { l as logger } from './logger.js';
 
 const tileSelectGroupCss = ":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;flex-wrap:wrap}:host ::slotted(calcite-tile-select){margin-block-end:1px;margin-inline-end:1px}:host([layout=vertical]){flex-direction:column}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
@@ -28,17 +28,11 @@ const TileSelectGroup = /*@__PURE__*/ proxyCustomElement(class TileSelectGroup e
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     render() {
-        return (h(InteractiveContainer, { key: '9813d93d9b1307cd39ca8e109ef99d876710b328', disabled: this.disabled }, h("slot", { key: '1eec8241863a160777fd47f923996ba940c6de83' })));
+        return (h(InteractiveContainer, { key: '7ecdf608b21ec8854addcb9138e2540af1fb90f5', disabled: this.disabled }, h("slot", { key: '67187ad6c8e5dd195cd2e905cfc78810b7566343' })));
     }
     get el() { return this; }
     static get style() { return CalciteTileSelectGroupStyle0; }

package/dist/components/calcite-tile-select.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { l as logger } from './logger.js';
 import { d as defineCustomElement$4 } from './checkbox.js';
@@ -15,7 +15,7 @@ import { d as defineCustomElement$2 } from './radio-button.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 = {
     checked: "checked",
@@ -162,7 +162,6 @@ const TileSelect = /*@__PURE__*/ proxyCustomElement(class TileSelect extends HTM
     //--------------------------------------------------------------------------
     connectedCallback() {
         this.renderInput();
-        connectInteractive(this);
     }
     componentWillLoad() {
         setUpLoadableComponent(this);
@@ -172,7 +171,6 @@ const TileSelect = /*@__PURE__*/ proxyCustomElement(class TileSelect extends HTM
     }
     disconnectedCallback() {
         this.input.parentNode.removeChild(this.input);
-        disconnectInteractive(this);
     }
     componentDidRender() {
         updateHostInteraction(this);
@@ -205,7 +203,7 @@ const TileSelect = /*@__PURE__*/ proxyCustomElement(class TileSelect extends HTM
         const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width, iconFlipRtl, } = this;
         const isLargeVisual = heading && icon && !description;
         const renderIcon = Boolean(icon);
-        return (h(InteractiveContainer, { key: 'fb4ce458ff761b577b3c588a7b2b17ab9db17927', disabled: disabled }, h("div", { key: '3963753f3f75f8e063287f65819dbcc558e49b03', class: {
+        return (h(InteractiveContainer, { key: 'b4fb6d82534b03b51abeb0837e82f0eebf03e882', disabled: disabled }, h("div", { key: 'b600dccfa114222d765c7937e0a01646c59ef5e9', class: {
                 checked,
                 container: true,
                 [CSS.description]: Boolean(description),
@@ -222,7 +220,7 @@ const TileSelect = /*@__PURE__*/ proxyCustomElement(class TileSelect extends HTM
                 [CSS.largeVisual]: isLargeVisual,
                 [CSS.widthAuto]: width === "auto",
                 [CSS.widthFull]: width === "full",
-            } }, h("div", { key: 'b4d6877710cb5da729a9e9f8e9ca0e1fbc6bbab0', class: { [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual } }, icon && (h("div", { key: 'b44c56e0db0efe86143620701bfeed24ded091f4', class: { [CSS.icon]: renderIcon } }, h("calcite-icon", { key: '756ffa642f294d7e0d7dbf947739d3d50f73480c', flipRtl: iconFlipRtl, icon: icon, scale: "l" }))), h("div", { key: '9ab6110c94d707582dd9b1e0a2bbf0b852f87b89', class: CSS.tileContentContainer }, h("div", { key: 'bf74512102c70a1716afc9ebc27ad7f3f5a18b3f', class: CSS.tileContent }, heading && h("div", { key: '1359f1524bfa52f3f4b0620680cf9c62bcdafe6e', class: CSS.tileHeading }, heading), description && h("div", { key: '01950e547acfe81b946fac0583df493a6f05ee8d', class: CSS.tileDescription }, description)))), h("slot", { key: 'd9bbd06c7808673fad6480de536a7b153574956b' }))));
+            } }, h("div", { key: '3beecb159a117c775e541fd658e7a3b8426c10c7', class: { [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual } }, icon && (h("div", { key: 'b1be68fded421b3196c0ab1af79f64df378a8def', class: { [CSS.icon]: renderIcon } }, h("calcite-icon", { key: '515fb12c5d3d436fcf41f0029a79f2a613d4c36d', flipRtl: iconFlipRtl, icon: icon, scale: "l" }))), h("div", { key: 'b1e4da0dcdf03bcd4690664e95bd83231af5d4a7', class: CSS.tileContentContainer }, h("div", { key: '439d258883fb6223b36fca919bdeb4eb5a586286', class: CSS.tileContent }, heading && h("div", { key: '84292dd16f68a95f562cfc0cfc8a8f33e922f5bd', class: CSS.tileHeading }, heading), description && h("div", { key: '7d6eb7bb116c6f98656348cca96efa1b446347ee', class: CSS.tileDescription }, description)))), h("slot", { key: '2fe8ada0d56e69984b02b47bb08e5b66d551ae47' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/calcite-tile.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { j as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
 import { c as componentFocusable, a as setComponentLoaded, s as setUpLoadableComponent } from './loadable.js';
 import { d as defineCustomElement$3 } from './icon.js';
@@ -13,7 +13,7 @@ import { d as defineCustomElement$2 } from './link.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 = {
     container: "container",
@@ -118,15 +118,9 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidLoad() {
         setComponentLoaded(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
@@ -204,7 +198,7 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
     }
     render() {
         const { disabled } = this;
-        return (h(InteractiveContainer, { key: 'f865a9a77fa149a492adf4ccb7d620928ad1991e', disabled: disabled }, this.href ? (h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
+        return (h(InteractiveContainer, { key: '1d62f354d4a18837e56dd446efc63dde66f977bf', disabled: disabled }, this.href ? (h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
     }
     get el() { return this; }
     static get style() { return CalciteTileStyle0; }

package/dist/components/calcite-tip-group.js

@@ -22,7 +22,7 @@ const TipGroup = /*@__PURE__*/ proxyCustomElement(class TipGroup extends HTMLEle
         this.groupTitle = undefined;
     }
     render() {
-        return h("slot", { key: '681e94955211786b05696219046985063b2c3824' });
+        return h("slot", { key: '40d9094358a1ef9165e9261d9ca351b2530a7584' });
     }
     static get style() { return CalciteTipGroupStyle0; }
 }, [1, "calcite-tip-group", {

package/dist/components/calcite-tip-manager.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     header: "header",

package/dist/components/calcite-tip.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -119,7 +119,7 @@ const Tip = /*@__PURE__*/ proxyCustomElement(class Tip extends HTMLElement {
         return (h("div", { class: CSS.content }, this.renderImageFrame(), this.renderInfoNode()));
     }
     render() {
-        return (h(Fragment, { key: 'c725e40201c42c904817edcf0f86dc05d09793b9' }, h("article", { key: '304a83ee3721636194696546bfd8af359beecbf6', class: CSS.container }, this.renderHeader(), this.renderContent()), this.renderDismissButton()));
+        return (h(Fragment, { key: '0ee5bf1ba2df1cccf7e6684bd0480344b074b16b' }, h("article", { key: '55effd0a9eaa055167507e216983713fc1767e13', class: CSS.container }, this.renderHeader(), this.renderContent()), this.renderDismissButton()));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/carousel-item.js

@@ -9,7 +9,7 @@ import { g as guid } from './guid.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 = {
     container: "container",
@@ -35,7 +35,7 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
     // --------------------------------------------------------------------------
     render() {
         const id = this.el.id || this.guid;
-        return (h(Host, { key: '6d4ac387ae1b4748050c82d8387edd30e6c0e662', id: id }, h("div", { key: 'c6a4c67d99dd6e34198b2d128efb518e757277ce', "aria-label": this.label, class: { [CSS.container]: true, [CSS.selected]: this.selected }, role: "tabpanel" }, h("slot", { key: '2ed94883d41dba5430a39933c6fe91bb25b12703' }))));
+        return (h(Host, { key: '5606df99edd6007701f391f095c88270eed4ccf1', id: id }, h("div", { key: '7147a10dbb3fa9292da09207709bfa5e7e857bf9', "aria-label": this.label, class: { [CSS.container]: true, [CSS.selected]: this.selected }, role: "tabpanel" }, h("slot", { key: '8b6876c8fc55afd1cac458b97063f66dff2cd9e2' }))));
     }
     get el() { return this; }
     static get style() { return CalciteCarouselItemStyle0; }

package/dist/components/carousel.js

@@ -7,9 +7,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { h as slotChangeGetAssignedElements, y as focusElementInGroup, t as toAriaBoolean, g as getElementDir, z as whenAnimationDone } from './dom.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { g as guid } from './guid.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable.js';
 import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n.js';
+import { c as createObserver } from './observers.js';
+import { b as breakpoints } from './responsive.js';
 import { g as getRoundRobinIndex } from './array.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './progress.js';
@@ -17,7 +19,7 @@ import { d as defineCustomElement$1 } from './progress.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const DURATION = 6000;
 const CSS = {
@@ -31,7 +33,10 @@ const CSS = {
     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",
@@ -45,8 +50,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 = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLElement {
@@ -62,6 +73,10 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         this.containerId = `calcite-carousel-container-${guid()}`;
         this.slideDurationInterval = null;
         this.slideInterval = null;
+        this.resizeObserver = 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);
@@ -95,9 +110,9 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         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;
                 }
@@ -195,10 +210,12 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
                     }
                     break;
                 case "ArrowRight":
+                    event.preventDefault();
                     this.direction = "forward";
                     this.nextItem(true);
                     break;
                 case "ArrowLeft":
+                    event.preventDefault();
                     this.direction = "backward";
                     this.previousItem();
                     break;
@@ -221,22 +238,22 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
             }
         };
         this.tabListKeyDownHandler = (event) => {
-            const interactiveItems = Array(...this.tabList.querySelectorAll("button"));
+            const visiblePaginationEls = Array(...this.tabList.querySelectorAll(`button:not(.${CSS.paginationItemOutOfRange})`));
             const currentEl = event.target;
             switch (event.key) {
                 case "ArrowRight":
-                    focusElementInGroup(interactiveItems, currentEl, "next");
+                    focusElementInGroup(visiblePaginationEls, currentEl, "next");
                     break;
                 case "ArrowLeft":
-                    focusElementInGroup(interactiveItems, currentEl, "previous");
+                    focusElementInGroup(visiblePaginationEls, currentEl, "previous");
                     break;
                 case "Home":
                     event.preventDefault();
-                    focusElementInGroup(interactiveItems, currentEl, "first");
+                    focusElementInGroup(visiblePaginationEls, currentEl, "first");
                     break;
                 case "End":
                     event.preventDefault();
-                    focusElementInGroup(interactiveItems, currentEl, "last");
+                    focusElementInGroup(visiblePaginationEls, currentEl, "last");
                     break;
             }
         };
@@ -266,14 +283,34 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
                 [CSS.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 = () => (h("div", { "aria-label": this.label, class: CSS.paginationItems, role: "tablist" }, this.items.map((item, index) => {
-            const isMatch = index === this.selectedIndex;
-            return (h("button", { "aria-controls": !isMatch ? item.id : undefined, "aria-selected": toAriaBoolean(isMatch), class: {
-                    [CSS.paginationItem]: true,
-                    [CSS.paginationItemIndividual]: true,
-                    [CSS.paginationItemSelected]: isMatch,
-                }, "data-index": index, key: item.id, onClick: this.handleItemSelection, role: "tab", title: item.label }, h("calcite-icon", { icon: isMatch ? ICONS.active : ICONS.inactive, scale: "l" })));
-        })));
+        this.renderPaginationItems = () => {
+            const { selectedIndex, maxItems, items, label, handleItemSelection } = this;
+            return (h("div", { "aria-label": label, class: CSS.paginationItems, role: "tablist" }, items.map((item, index) => {
+                const itemCount = items.length;
+                const match = index === selectedIndex;
+                const first = index === 0;
+                const last = index === 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 === low - 1 || index === high);
+                const visible = match || (index <= high && index >= low - 1);
+                const overflowActive = itemCount - 1 <= maxItems;
+                const icon = match ? ICONS.active : ICONS.inactive;
+                return (h("button", { "aria-controls": !match ? item.id : undefined, "aria-selected": toAriaBoolean(match), class: {
+                        [CSS.paginationItem]: true,
+                        [CSS.paginationItemIndividual]: true,
+                        [CSS.paginationItemSelected]: match,
+                        [CSS.paginationItemRangeEdge]: itemCount - 1 > maxItems && isEdge,
+                        [CSS.paginationItemOutOfRange]: !(overflowActive || visible),
+                        [CSS.paginationItemVisible]: overflowActive || visible,
+                    }, "data-index": index, key: item.id, onClick: handleItemSelection, role: "tab", title: item.label }, h("calcite-icon", { icon: icon, scale: "l" })));
+            })));
+        };
         this.renderArrow = (direction) => {
             const isPrev = direction === "previous";
             const dir = getElementDir(this.el);
@@ -304,6 +341,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         this.effectiveLocale = "";
         this.suspendedSlideDurationRemaining = 1;
         this.slideDurationRemaining = 1;
+        this.maxItems = centerItemsByBreakpoint.xxsmall;
     }
     autoplayWatcher(autoplay) {
         if (!autoplay) {
@@ -319,9 +357,9 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
+        this.resizeObserver?.observe(this.el);
     }
     componentDidLoad() {
         setComponentLoaded(this);
@@ -330,10 +368,10 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         this.clearIntervals();
+        this.resizeObserver?.disconnect();
     }
     async componentWillLoad() {
         /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is "". */
@@ -397,6 +435,24 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    setMaxItemsToBreakpoint(width) {
+        if (!width) {
+            return;
+        }
+        if (width >= breakpoints.width.small) {
+            this.maxItems = centerItemsByBreakpoint.medium;
+            return;
+        }
+        if (width >= breakpoints.width.xsmall) {
+            this.maxItems = centerItemsByBreakpoint.small;
+            return;
+        }
+        if (width >= breakpoints.width.xxsmall) {
+            this.maxItems = centerItemsByBreakpoint.xsmall;
+            return;
+        }
+        this.maxItems = centerItemsByBreakpoint.xxsmall;
+    }
     clearIntervals() {
         clearInterval(this.slideDurationInterval);
         clearInterval(this.slideInterval);
@@ -438,17 +494,17 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
     }
     render() {
         const { direction } = this;
-        return (h(Host, { key: 'bff4155cb4358665eb6530b6637322598604d873' }, h(InteractiveContainer, { key: '7a388be689aca07856f350963c33bce1d4e5e278', disabled: this.disabled }, h("div", { key: 'c53c92b22ace937c0d2a6568ddd729ccb1b91108', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
+        return (h(Host, { key: 'c41171a3b16c6aad1b37f4631a2d123acaca752d' }, h(InteractiveContainer, { key: '03c90c14f2b3f948c0e349bede237d29ed292c7f', disabled: this.disabled }, h("div", { key: 'df9af99e67d3b9c61dd6ccac74e82237e8eb17c4', "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 }, 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 }, h("section", { key: '7c274a35b9186ba9bb04fd8124be6893eee46e5f', 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 }, 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 }, 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 this; }
@@ -484,6 +540,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         "effectiveLocale": [32],
         "suspendedSlideDurationRemaining": [32],
         "slideDurationRemaining": [32],
+        "maxItems": [32],
         "setFocus": [64],
         "play": [64],
         "stop": [64]