@esri/calcite-components 2.12.0 → 2.13.0-next.1

package/dist/collection/components/button/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.0
+ * v2.13.0-next.1
  */
 export const CSS = {
     buttonLoader: "calcite-button--loader",

package/dist/collection/components/card/card.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:54 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:46 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */
@@ -40,35 +40,26 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
+* @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
 * @prop --calcite-card-background-color: Specifies the background color of the component.
 * @prop --calcite-card-border-color: Specifies the border color of the component.
-* @prop --calcite-card-shadow: Specifies the shadow of the component.
 * @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
-* @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
-* @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element.
+* @prop --calcite-card-selection-background-color-active: [Deprecated] Use --calcite-card-selection-background-color-press. Specifies the background color of the component's selection element when active.
 * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.
-* @prop --calcite-card-selection-background-color-active: Specifies the background color of the component's selection element when active.
-* @prop --calcite-card-selection-background-color-selected: Specifies the icon color of the component's selection element when `selected`.
-* @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
-* @prop --calcite-card-selection-icon-color-hover: Specifies the icon color of the component's selection element when hovered.
-* @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`.
+* @prop --calcite-card-selection-background-color-press: Specifies the background color of the component's selection element when active.
+* @prop --calcite-card-selection-background-color-selected: [Deprecated] Use --calcite-card-background-color. Specifies the icon color of the component's selection element when `selected`.
+* @prop --calcite-card-selection-background-color: [Deprecated] Use --calcite-card-background-color. Specifies the background color of the component's selection element.
+* @prop --calcite-card-selection-color-hover: Specifies the color of the component's selection element when hovered or focused.
+* @prop --calcite-card-selection-color: Specifies the color of the component's selection element.
+* @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use --calcite-card-selection-color-hover. Specifies the icon color of the component's selection element when hovered.
+* @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use --calcite-card-accent-color-selected. Specifies the icon color of the component's selection element when `selected`.
+* @prop --calcite-card-selection-icon-color: [Deprecated] Use --calcite-card-selection-color. Specifies the icon color of the component's selection element.
+* @prop --calcite-card-shadow: Specifies the shadow of the component.
 *
 */
 :host {
   display: block;
   max-inline-size: 100%;
-  --calcite-card-corner-radius: var(--calcite-corner-radius-sharp);
-  --calcite-card-background-color: var(--calcite-color-foreground-1);
-  --calcite-card-border-color: var(--calcite-color-border-3);
-  --calcite-card-shadow: var(--calcite-shadow-none);
-  --calcite-card-accent-color-selected: var(--calcite-color-brand);
-  --calcite-card-selection-background-color: transparent;
-  --calcite-card-selection-background-color-hover: var(--calcite-color-transparent-hover);
-  --calcite-card-selection-background-color-active: var(--calcite-color-transparent-press);
-  --calcite-card-selection-background-color-selected: transparent;
-  --calcite-card-selection-icon-color: var(--calcite-color-text-3);
-  --calcite-card-selection-icon-color-hover: var(--calcite-color-text-2);
-  --calcite-card-selection-icon-color-selected: var(--calcite-color-brand);
 }
 
 .content-wrapper {
@@ -78,10 +69,10 @@
   flex-direction: column;
   justify-content: space-between;
   overflow: hidden;
-  border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color);
-  border-radius: var(--calcite-card-corner-radius);
-  background-color: var(--calcite-card-background-color);
-  box-shadow: var(--calcite-card-shadow);
+  border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));
+  border-radius: var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));
+  background-color: var(--calcite-card-background-color, var(--calcite-color-foreground-1));
+  box-shadow: var(--calcite-card-shadow, var(--calcite-shadow-none));
   pointer-events: none;
 }
 
@@ -175,7 +166,7 @@
 }
 
 :host([selected]) .content-wrapper {
-  box-shadow: inset 0 -4px 0 0 var(--calcite-card-accent-color-selected);
+  box-shadow: inset 0 -4px 0 0 var(--calcite-card-accent-color-selected, var(--calcite-color-brand));
 }
 
 :host([selectable]) .header {
@@ -248,6 +239,14 @@ slot[name=footer-end]::slotted(*),
   inset-inline-end: var(--calcite-spacing-sm);
   margin: 0;
   padding: 0;
+  color: var(--calcite-card-selection-color, var(--calcite-color-text-3));
+}
+.checkbox-wrapper-deprecated:hover {
+  background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));
+  color: var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)));
+}
+.checkbox-wrapper-deprecated:active {
+  background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));
 }
 
 .checkbox-wrapper {
@@ -256,44 +255,40 @@ slot[name=footer-end]::slotted(*),
   cursor: pointer;
   padding: 0.5rem;
   outline-color: transparent;
-  background-color: var(--calcite-card-selection-background-color);
   display: flex;
   align-items: center;
   justify-items: center;
-  --calcite-icon-color: var(--calcite-card-selection-icon-color);
+  color: var(--calcite-card-selection-color, var(--calcite-color-text-3));
 }
 .checkbox-wrapper:hover {
-  background-color: var(--calcite-card-selection-background-color-hover);
-  --calcite-icon-color: var(--calcite-card-selection-icon-color-hover);
+  background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));
+  color: var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)));
 }
 .checkbox-wrapper:active {
-  background-color: var(--calcite-card-selection-background-color-active);
+  background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));
 }
 .checkbox-wrapper calcite-icon {
   pointer-events: none;
 }
 
+:host([selected]) .checkbox-wrapper-deprecated,
 :host([selected]) .checkbox-wrapper {
-  --calcite-icon-color: var(--calcite-card-selection-icon-color-selected);
-  background-color: var(--calcite-card-selection-background-color-selected);
-}
-:host([selected]) .checkbox-wrapper:hover {
-  background-color: var(--calcite-card-selection-background-color-hover);
-}
-:host([selected]) .checkbox-wrapper:active {
-  background-color: var(--calcite-card-selection-background-color-active);
+  color: var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)));
 }
 
+:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,
 :host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {
-  background-color: var(--calcite-card-selection-background-color-hover);
-  --calcite-icon-color: var(--calcite-card-selection-icon-color-hover);
+  background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));
+  color: var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)));
 }
 
+:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,
 :host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {
-  background-color: var(--calcite-card-selection-background-color-active);
-  --calcite-icon-color: var(--calcite-card-selection-icon-color-selected);
+  background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));
+  color: var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)));
 }
 
+/* end deprecated */
 .thumbnail-wrapper {
   display: flex;
 }

package/dist/collection/components/card/card.js

@@ -1,14 +1,14 @@
 /*!
  * 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.0
+ * v2.13.0-next.1
  */
 import { h, Host, } from "@stencil/core";
 import { getSlotted, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
 import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
-import { connectInteractive, disconnectInteractive, InteractiveContainer, updateHostInteraction, } from "../../utils/interactive";
+import { InteractiveContainer, updateHostInteraction, } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
 import { CSS, ICONS, SLOTS } from "./resources";
 /**
@@ -110,7 +110,6 @@ export class Card {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -121,7 +120,6 @@ export class Card {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -173,10 +171,10 @@ export class Card {
             : this.selectionMode !== "none"
                 ? "radio"
                 : undefined;
-        return (h(Host, { key: 'e33b76130cd91d3caa6662f1f58b79d238c708fb' }, h(InteractiveContainer, { key: '772da2a3a1274eb467d1febb915ffb97953beae7', disabled: this.disabled }, h("div", { key: 'b9fdbb51cfb07964479d0f723add39b8a2384f86', "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), h("section", { key: '51cfe132a589ec65b39544b4c1246545b0b864f2', "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), h("div", { key: 'c256998e330a949d47a12b23127c68cba081854e', class: {
+        return (h(Host, { key: 'cc6fb557df0c34c078ff67adb1ae92be52e71293' }, h(InteractiveContainer, { key: '270320cb6e070661fea9bc509ba2c2a2a4f9ab72', disabled: this.disabled }, h("div", { key: 'd16bffb557e6aa57a957dc76e95e64575ea69db1', "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), h("section", { key: 'd9c348b0564a7233f07d6f6f149a5d697c0e5d49', "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), h("div", { key: '8b263696e0fd40609fe7dd66b557afaa66ee25ee', class: {
                 [CSS.cardContent]: true,
                 [CSS.hasSlottedContent]: this.hasContent,
-            } }, h("slot", { key: '17fb9b0a9919f09a474d3c54818e770be9a85b77', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
+            } }, h("slot", { key: '49314c12404a66c681b93a8f3e7c56669b995498', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
     }
     static get is() { return "calcite-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,4BAA4B,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAsB,MAAM,oBAAoB,CAAC;AAC/F,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,aAAa,EAEb,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,kBAAkB,EAElB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EAErB,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;GASG;AAQH,MAAM,OAAO,IAAI;;QA4If,4EAA4E;QAC5E,EAAE;QACF,mBAAmB;QACnB,EAAE;QACF,4EAA4E;QAEpE,4BAAuB,GAAG,CAAC,KAAY,EAAQ,EAAE;YACvD,IAAI,CAAC,UAAU,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;QACxD,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACtD,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC5E,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE,CAAC;oBAChE,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;oBAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACzB,CAAC;qBAAM,CAAC;oBACN,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;wBAClB,KAAK,YAAY,CAAC;wBAClB,KAAK,WAAW,CAAC;wBACjB,KAAK,MAAM,CAAC;wBACZ,KAAK,KAAK;4BACR,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;4BAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;4BACvB,MAAM;oBACV,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACzD,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC;YAC7D,IAAI,kBAAkB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE,CAAC;gBAC9F,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;QAeM,gCAA2B,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACnE,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO;oBACV,IAAI,CAAC,oBAAoB,EAAE,CAAC;oBAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;YACV,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,GAAS,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAK,EAAQ,EAAE;YACxC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;gBAC9B,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC;uBAxMiC,KAAK;iCAG0B,aAAa;wBAG3C,KAAK;;0BAUH,KAAK;wBAGQ,KAAK;;6BAiBtD,MAAM;;;;0BA0FsB,KAAK;;IAjFnC,gBAAgB;QACd,0BAA0B;IAC5B,CAAC;IAgBD,4EAA4E;IAC5E,EAAE;IACF,kBAAkB;IAClB,EAAE;IACF,4EAA4E;IAE5E,mCAAmC;IAEnC,KAAK,CAAC,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,6EAA6E;IAC7E,EAAE;IACF,aAAa;IACb,EAAE;IACF,6EAA6E;IAE7E,iBAAiB;QACf,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,oBAAoB;QAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC5B,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAaD,qBAAqB;QACnB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC7C,CAAC;IA4CO,wBAAwB;QAC9B,OAAO,CACL,qBAAe,KAAK,EAAE,GAAG,CAAC,yBAAyB;YACjD,wBACE,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAC3B,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,2BAA2B,GAC3C,CACY,CACjB,CAAC;IACJ,CAAC;IAyBO,eAAe;QACrB,OAAO,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAC5C,eAAS,KAAK,EAAE,GAAG,CAAC,gBAAgB;YAClC,YAAM,IAAI,EAAE,KAAK,CAAC,SAAS,GAAI,CACvB,CACX,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAEO,mBAAmB;QACzB,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ;YAChD,CAAC,CAAC,KAAK,CAAC,QAAQ;YAChB,CAAC,CAAC,IAAI,CAAC,aAAa,KAAK,UAAU;gBACjC,CAAC,CAAC,KAAK,CAAC,UAAU;gBAClB,CAAC,CAAC,IAAI,CAAC,QAAQ;oBACb,CAAC,CAAC,KAAK,CAAC,cAAc;oBACtB,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC;QAEjC,OAAO,CACL,WAAK,KAAK,EAAE,GAAG,CAAC,eAAe,EAAE,aAAa,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;YAChF,oBAAc,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,GAAG,CAClC,CACP,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QACpB,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;QAC9C,MAAM,WAAW,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW,CAAC;QACzC,MAAM,QAAQ,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,KAAK,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1C,MAAM,mBAAmB,GAAG,QAAQ,IAAI,KAAK,CAAC;QAC9C,OAAO,SAAS,IAAI,mBAAmB,CAAC,CAAC,CAAC,CACxC,cAAQ,KAAK,EAAE,GAAG,CAAC,MAAM;YACtB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,IAAI;YACzD,WAAK,KAAK,EAAE,GAAG,CAAC,mBAAmB;gBACjC,YAAM,GAAG,EAAC,cAAc,EAAC,IAAI,EAAE,KAAK,CAAC,OAAO,GAAI;gBAChD,YAAM,GAAG,EAAC,kBAAkB,EAAC,IAAI,EAAE,KAAK,CAAC,WAAW,GAAI;gBACxD,YAAM,GAAG,EAAC,uBAAuB,EAAC,IAAI,EAAE,KAAK,CAAC,KAAK,GAAI;gBACvD,YAAM,GAAG,EAAC,0BAA0B,EAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,GAAI,CACzD;YACL,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,mBAAmB,EAAE,CACrD,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAEO,YAAY;QAClB,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QACpB,MAAM,WAAW,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QAElD,MAAM,SAAS,GAAG,WAAW,IAAI,SAAS,CAAC;QAC3C,OAAO,SAAS,CAAC,CAAC,CAAC,CACjB,cAAQ,KAAK,EAAE,GAAG,CAAC,MAAM;YACvB,YAAM,IAAI,EAAE,KAAK,CAAC,WAAW,GAAI;YACjC,YAAM,IAAI,EAAE,KAAK,CAAC,SAAS,GAAI,CACxB,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACpE,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAChE,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,UAAU;YAC/B,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,IAAI,CAAC,aAAa,KAAK,MAAM;gBAC7B,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,SAAS,CAAC;QAClB,OAAO,CACL,EAAC,IAAI;YACH,EAAC,oBAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAC3C,4EACgB,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,mBACvE,IAAI,CAAC,QAAQ,gBAChB,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,EAC9D,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAEnD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,wBAAe,QAAQ,EAAC,KAAK,EAAC,+BAA+B;wBAC3D,sBAAgB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAI,CAC5C,CACP,CAAC,CAAC,CAAC,IAAI;oBACP,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;oBACzC,6EAAoB,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE;wBAC9E,IAAI,CAAC,YAAY,EAAE;wBACpB,4DACE,KAAK,EAAE;gCACL,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,IAAI;gCACvB,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,UAAU;6BACzC;4BAED,6DAAM,YAAY,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAChD;wBACL,IAAI,CAAC,YAAY,EAAE,CACZ;oBACT,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE,CACtC,CACe,CAClB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getSlotted, slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { LogicalFlowPosition, SelectionMode } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\nimport { CardMessages } from \"./assets/card/t9n\";\n\n/**\n * @slot - A slot for adding content.\n * @slot title - [Deprecated] use `heading` instead. A slot for adding a heading.\n * @slot subtitle - [Deprecated] use `description` instead. A slot for adding a description.\n * @slot thumbnail - A slot for adding a thumbnail.\n * @slot heading - A slot for adding a heading.\n * @slot description - A slot for adding a description.\n * @slot footer-start - A slot for adding a leading footer.\n * @slot footer-end - A slot for adding a trailing footer.\n */\n\n@Component({\n  tag: \"calcite-card\",\n  styleUrl: \"card.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Card\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**  When `true`, a busy indicator is displayed. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Sets the placement of the thumbnail defined in the `thumbnail` slot. */\n  @Prop({ reflect: true }) thumbnailPosition: LogicalFlowPosition = \"block-start\";\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * When `true`, the component is selectable.\n   *\n   * @deprecated use `selectionMode` property on a parent `calcite-card-group` instead.\n   */\n  @Prop({ reflect: true }) selectable = false;\n\n  /** When `true`, the component is selected.  */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: CardMessages;\n\n  /**\n   * This internal property, managed by a containing `calcite-card-group`, is\n   * conditionally set based on the `selectionMode` of the parent\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode> =\n    \"none\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<CardMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */\n  @Event({ cancelable: false }) calciteCardSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCardKeyEvent: EventEmitter<KeyboardEvent>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (!this.disabled) {\n      this.containerEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: CardMessages;\n\n  @State() private hasContent = false;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private handleDefaultSlotChange = (event: Event): void => {\n    this.hasContent = slotChangeHasAssignedElement(event);\n  };\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target === this.containerEl && !this.selectable && !this.disabled) {\n      if (isActivationKey(event.key) && this.selectionMode !== \"none\") {\n        this.calciteCardSelect.emit();\n        event.preventDefault();\n      } else {\n        switch (event.key) {\n          case \"ArrowRight\":\n          case \"ArrowLeft\":\n          case \"Home\":\n          case \"End\":\n            this.calciteInternalCardKeyEvent.emit(event);\n            event.preventDefault();\n            break;\n        }\n      }\n    }\n  };\n\n  private cardBodyClickHandler = (event: MouseEvent): void => {\n    const isFromScreenReader = event.target === this.containerEl;\n    if (isFromScreenReader && !this.selectable && !this.disabled && this.selectionMode !== \"none\") {\n      this.calciteCardSelect.emit();\n    }\n  };\n\n  private renderCheckboxDeprecated(): VNode {\n    return (\n      <calcite-label class={CSS.checkboxWrapperDeprecated}>\n        <calcite-checkbox\n          checked={this.selected}\n          label={this.messages.select}\n          onClick={this.selectCardDeprecated}\n          onKeyDown={this.cardSelectKeyDownDeprecated}\n        />\n      </calcite-label>\n    );\n  }\n\n  private cardSelectKeyDownDeprecated = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        this.selectCardDeprecated();\n        event.preventDefault();\n        break;\n    }\n  };\n\n  private selectCardDeprecated = (): void => {\n    this.selected = !this.selected;\n    this.calciteCardSelect.emit();\n  };\n\n  private cardSelectClick = (event): void => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.calciteCardSelect.emit();\n      this.setFocus();\n    }\n  };\n\n  private renderThumbnail(): VNode {\n    return getSlotted(this.el, SLOTS.thumbnail) ? (\n      <section class={CSS.thumbnailWrapper}>\n        <slot name={SLOTS.thumbnail} />\n      </section>\n    ) : null;\n  }\n\n  private renderSelectionIcon(): VNode {\n    const icon: IconNameOrString =\n      this.selectionMode === \"multiple\" && this.selected\n        ? ICONS.selected\n        : this.selectionMode === \"multiple\"\n          ? ICONS.unselected\n          : this.selected\n            ? ICONS.selectedSingle\n            : ICONS.unselectedSingle;\n\n    return (\n      <div class={CSS.checkboxWrapper} onPointerDown={this.cardSelectClick} tabIndex={-1}>\n        <calcite-icon icon={icon} scale=\"s\" />\n      </div>\n    );\n  }\n\n  private renderHeader(): VNode {\n    const { el } = this;\n    const heading = getSlotted(el, SLOTS.heading);\n    const description = getSlotted(el, SLOTS.description);\n    const hasHeader = heading || description;\n    const subtitle = getSlotted(el, SLOTS.subtitle);\n    const title = getSlotted(el, SLOTS.title);\n    const hasDeprecatedHeader = subtitle || title;\n    return hasHeader || hasDeprecatedHeader ? (\n      <header class={CSS.header}>\n        {this.selectable ? this.renderCheckboxDeprecated() : null}\n        <div class={CSS.headerTextContainer}>\n          <slot key=\"heading-slot\" name={SLOTS.heading} />\n          <slot key=\"description-slot\" name={SLOTS.description} />\n          <slot key=\"deprecated-title-slot\" name={SLOTS.title} />\n          <slot key=\"deprecated-subtitle-slot\" name={SLOTS.subtitle} />\n        </div>\n        {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n      </header>\n    ) : null;\n  }\n\n  private renderFooter(): VNode {\n    const { el } = this;\n    const startFooter = getSlotted(el, SLOTS.footerStart);\n    const endFooter = getSlotted(el, SLOTS.footerEnd);\n\n    const hasFooter = startFooter || endFooter;\n    return hasFooter ? (\n      <footer class={CSS.footer}>\n        <slot name={SLOTS.footerStart} />\n        <slot name={SLOTS.footerEnd} />\n      </footer>\n    ) : null;\n  }\n\n  render(): VNode {\n    const thumbnailInline = this.thumbnailPosition.startsWith(\"inline\");\n    const thumbnailStart = this.thumbnailPosition.endsWith(\"start\");\n    const role =\n      this.selectionMode === \"multiple\"\n        ? \"checkbox\"\n        : this.selectionMode !== \"none\"\n          ? \"radio\"\n          : undefined;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={this.selectionMode !== \"none\" ? toAriaBoolean(this.selected) : undefined}\n            aria-disabled={this.disabled}\n            aria-label={this.label}\n            class={{ [CSS.contentWrapper]: true, inline: thumbnailInline }}\n            onClick={this.cardBodyClickHandler}\n            onKeyDown={this.keyDownHandler}\n            ref={(el) => (this.containerEl = el)}\n            role={role}\n            tabIndex={!this.selectable || this.disabled ? 0 : -1}\n          >\n            {this.loading ? (\n              <div aria-live=\"polite\" class=\"calcite-card-loader-container\">\n                <calcite-loader label={this.messages.loading} />\n              </div>\n            ) : null}\n            {thumbnailStart && this.renderThumbnail()}\n            <section aria-busy={toAriaBoolean(this.loading)} class={{ [CSS.container]: true }}>\n              {this.renderHeader()}\n              <div\n                class={{\n                  [CSS.cardContent]: true,\n                  [CSS.hasSlottedContent]: this.hasContent,\n                }}\n              >\n                <slot onSlotchange={this.handleDefaultSlotChange} />\n              </div>\n              {this.renderFooter()}\n            </section>\n            {!thumbnailStart && this.renderThumbnail()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,4BAA4B,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAsB,MAAM,oBAAoB,CAAC;AAC/F,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,aAAa,EAEb,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,kBAAkB,EAElB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAEL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;GASG;AAQH,MAAM,OAAO,IAAI;;QA0If,4EAA4E;QAC5E,EAAE;QACF,mBAAmB;QACnB,EAAE;QACF,4EAA4E;QAEpE,4BAAuB,GAAG,CAAC,KAAY,EAAQ,EAAE;YACvD,IAAI,CAAC,UAAU,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;QACxD,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACtD,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC5E,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE,CAAC;oBAChE,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;oBAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACzB,CAAC;qBAAM,CAAC;oBACN,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;wBAClB,KAAK,YAAY,CAAC;wBAClB,KAAK,WAAW,CAAC;wBACjB,KAAK,MAAM,CAAC;wBACZ,KAAK,KAAK;4BACR,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;4BAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;4BACvB,MAAM;oBACV,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACzD,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC;YAC7D,IAAI,kBAAkB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE,CAAC;gBAC9F,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;QAeM,gCAA2B,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACnE,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO;oBACV,IAAI,CAAC,oBAAoB,EAAE,CAAC;oBAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;YACV,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,GAAS,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAK,EAAQ,EAAE;YACxC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;gBAC9B,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC;uBAtMiC,KAAK;iCAG0B,aAAa;wBAG3C,KAAK;;0BAUH,KAAK;wBAGQ,KAAK;;6BAiBtD,MAAM;;;;0BAwFsB,KAAK;;IA/EnC,gBAAgB;QACd,0BAA0B;IAC5B,CAAC;IAgBD,4EAA4E;IAC5E,EAAE;IACF,kBAAkB;IAClB,EAAE;IACF,4EAA4E;IAE5E,mCAAmC;IAEnC,KAAK,CAAC,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,6EAA6E;IAC7E,EAAE;IACF,aAAa;IACb,EAAE;IACF,6EAA6E;IAE7E,iBAAiB;QACf,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAaD,qBAAqB;QACnB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC7C,CAAC;IA4CO,wBAAwB;QAC9B,OAAO,CACL,qBAAe,KAAK,EAAE,GAAG,CAAC,yBAAyB;YACjD,wBACE,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAC3B,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,2BAA2B,GAC3C,CACY,CACjB,CAAC;IACJ,CAAC;IAyBO,eAAe;QACrB,OAAO,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAC5C,eAAS,KAAK,EAAE,GAAG,CAAC,gBAAgB;YAClC,YAAM,IAAI,EAAE,KAAK,CAAC,SAAS,GAAI,CACvB,CACX,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAEO,mBAAmB;QACzB,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ;YAChD,CAAC,CAAC,KAAK,CAAC,QAAQ;YAChB,CAAC,CAAC,IAAI,CAAC,aAAa,KAAK,UAAU;gBACjC,CAAC,CAAC,KAAK,CAAC,UAAU;gBAClB,CAAC,CAAC,IAAI,CAAC,QAAQ;oBACb,CAAC,CAAC,KAAK,CAAC,cAAc;oBACtB,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC;QAEjC,OAAO,CACL,WAAK,KAAK,EAAE,GAAG,CAAC,eAAe,EAAE,aAAa,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;YAChF,oBAAc,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,GAAG,CAClC,CACP,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QACpB,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;QAC9C,MAAM,WAAW,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW,CAAC;QACzC,MAAM,QAAQ,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,KAAK,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1C,MAAM,mBAAmB,GAAG,QAAQ,IAAI,KAAK,CAAC;QAC9C,OAAO,SAAS,IAAI,mBAAmB,CAAC,CAAC,CAAC,CACxC,cAAQ,KAAK,EAAE,GAAG,CAAC,MAAM;YACtB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,IAAI;YACzD,WAAK,KAAK,EAAE,GAAG,CAAC,mBAAmB;gBACjC,YAAM,GAAG,EAAC,cAAc,EAAC,IAAI,EAAE,KAAK,CAAC,OAAO,GAAI;gBAChD,YAAM,GAAG,EAAC,kBAAkB,EAAC,IAAI,EAAE,KAAK,CAAC,WAAW,GAAI;gBACxD,YAAM,GAAG,EAAC,uBAAuB,EAAC,IAAI,EAAE,KAAK,CAAC,KAAK,GAAI;gBACvD,YAAM,GAAG,EAAC,0BAA0B,EAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,GAAI,CACzD;YACL,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,mBAAmB,EAAE,CACrD,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAEO,YAAY;QAClB,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QACpB,MAAM,WAAW,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QAElD,MAAM,SAAS,GAAG,WAAW,IAAI,SAAS,CAAC;QAC3C,OAAO,SAAS,CAAC,CAAC,CAAC,CACjB,cAAQ,KAAK,EAAE,GAAG,CAAC,MAAM;YACvB,YAAM,IAAI,EAAE,KAAK,CAAC,WAAW,GAAI;YACjC,YAAM,IAAI,EAAE,KAAK,CAAC,SAAS,GAAI,CACxB,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACpE,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAChE,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,UAAU;YAC/B,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,IAAI,CAAC,aAAa,KAAK,MAAM;gBAC7B,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,SAAS,CAAC;QAClB,OAAO,CACL,EAAC,IAAI;YACH,EAAC,oBAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAC3C,4EACgB,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,mBACvE,IAAI,CAAC,QAAQ,gBAChB,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,EAC9D,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAEnD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,wBAAe,QAAQ,EAAC,KAAK,EAAC,+BAA+B;wBAC3D,sBAAgB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAI,CAC5C,CACP,CAAC,CAAC,CAAC,IAAI;oBACP,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;oBACzC,6EAAoB,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE;wBAC9E,IAAI,CAAC,YAAY,EAAE;wBACpB,4DACE,KAAK,EAAE;gCACL,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,IAAI;gCACvB,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,UAAU;6BACzC;4BAED,6DAAM,YAAY,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAChD;wBACL,IAAI,CAAC,YAAY,EAAE,CACZ;oBACT,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE,CACtC,CACe,CAClB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getSlotted, slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { LogicalFlowPosition, SelectionMode } from \"../interfaces\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\nimport { CardMessages } from \"./assets/card/t9n\";\n\n/**\n * @slot - A slot for adding content.\n * @slot title - [Deprecated] use `heading` instead. A slot for adding a heading.\n * @slot subtitle - [Deprecated] use `description` instead. A slot for adding a description.\n * @slot thumbnail - A slot for adding a thumbnail.\n * @slot heading - A slot for adding a heading.\n * @slot description - A slot for adding a description.\n * @slot footer-start - A slot for adding a leading footer.\n * @slot footer-end - A slot for adding a trailing footer.\n */\n\n@Component({\n  tag: \"calcite-card\",\n  styleUrl: \"card.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Card\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**  When `true`, a busy indicator is displayed. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Sets the placement of the thumbnail defined in the `thumbnail` slot. */\n  @Prop({ reflect: true }) thumbnailPosition: LogicalFlowPosition = \"block-start\";\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * When `true`, the component is selectable.\n   *\n   * @deprecated use `selectionMode` property on a parent `calcite-card-group` instead.\n   */\n  @Prop({ reflect: true }) selectable = false;\n\n  /** When `true`, the component is selected.  */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: CardMessages;\n\n  /**\n   * This internal property, managed by a containing `calcite-card-group`, is\n   * conditionally set based on the `selectionMode` of the parent\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode> =\n    \"none\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<CardMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */\n  @Event({ cancelable: false }) calciteCardSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCardKeyEvent: EventEmitter<KeyboardEvent>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (!this.disabled) {\n      this.containerEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: CardMessages;\n\n  @State() private hasContent = false;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private handleDefaultSlotChange = (event: Event): void => {\n    this.hasContent = slotChangeHasAssignedElement(event);\n  };\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target === this.containerEl && !this.selectable && !this.disabled) {\n      if (isActivationKey(event.key) && this.selectionMode !== \"none\") {\n        this.calciteCardSelect.emit();\n        event.preventDefault();\n      } else {\n        switch (event.key) {\n          case \"ArrowRight\":\n          case \"ArrowLeft\":\n          case \"Home\":\n          case \"End\":\n            this.calciteInternalCardKeyEvent.emit(event);\n            event.preventDefault();\n            break;\n        }\n      }\n    }\n  };\n\n  private cardBodyClickHandler = (event: MouseEvent): void => {\n    const isFromScreenReader = event.target === this.containerEl;\n    if (isFromScreenReader && !this.selectable && !this.disabled && this.selectionMode !== \"none\") {\n      this.calciteCardSelect.emit();\n    }\n  };\n\n  private renderCheckboxDeprecated(): VNode {\n    return (\n      <calcite-label class={CSS.checkboxWrapperDeprecated}>\n        <calcite-checkbox\n          checked={this.selected}\n          label={this.messages.select}\n          onClick={this.selectCardDeprecated}\n          onKeyDown={this.cardSelectKeyDownDeprecated}\n        />\n      </calcite-label>\n    );\n  }\n\n  private cardSelectKeyDownDeprecated = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        this.selectCardDeprecated();\n        event.preventDefault();\n        break;\n    }\n  };\n\n  private selectCardDeprecated = (): void => {\n    this.selected = !this.selected;\n    this.calciteCardSelect.emit();\n  };\n\n  private cardSelectClick = (event): void => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.calciteCardSelect.emit();\n      this.setFocus();\n    }\n  };\n\n  private renderThumbnail(): VNode {\n    return getSlotted(this.el, SLOTS.thumbnail) ? (\n      <section class={CSS.thumbnailWrapper}>\n        <slot name={SLOTS.thumbnail} />\n      </section>\n    ) : null;\n  }\n\n  private renderSelectionIcon(): VNode {\n    const icon: IconNameOrString =\n      this.selectionMode === \"multiple\" && this.selected\n        ? ICONS.selected\n        : this.selectionMode === \"multiple\"\n          ? ICONS.unselected\n          : this.selected\n            ? ICONS.selectedSingle\n            : ICONS.unselectedSingle;\n\n    return (\n      <div class={CSS.checkboxWrapper} onPointerDown={this.cardSelectClick} tabIndex={-1}>\n        <calcite-icon icon={icon} scale=\"s\" />\n      </div>\n    );\n  }\n\n  private renderHeader(): VNode {\n    const { el } = this;\n    const heading = getSlotted(el, SLOTS.heading);\n    const description = getSlotted(el, SLOTS.description);\n    const hasHeader = heading || description;\n    const subtitle = getSlotted(el, SLOTS.subtitle);\n    const title = getSlotted(el, SLOTS.title);\n    const hasDeprecatedHeader = subtitle || title;\n    return hasHeader || hasDeprecatedHeader ? (\n      <header class={CSS.header}>\n        {this.selectable ? this.renderCheckboxDeprecated() : null}\n        <div class={CSS.headerTextContainer}>\n          <slot key=\"heading-slot\" name={SLOTS.heading} />\n          <slot key=\"description-slot\" name={SLOTS.description} />\n          <slot key=\"deprecated-title-slot\" name={SLOTS.title} />\n          <slot key=\"deprecated-subtitle-slot\" name={SLOTS.subtitle} />\n        </div>\n        {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n      </header>\n    ) : null;\n  }\n\n  private renderFooter(): VNode {\n    const { el } = this;\n    const startFooter = getSlotted(el, SLOTS.footerStart);\n    const endFooter = getSlotted(el, SLOTS.footerEnd);\n\n    const hasFooter = startFooter || endFooter;\n    return hasFooter ? (\n      <footer class={CSS.footer}>\n        <slot name={SLOTS.footerStart} />\n        <slot name={SLOTS.footerEnd} />\n      </footer>\n    ) : null;\n  }\n\n  render(): VNode {\n    const thumbnailInline = this.thumbnailPosition.startsWith(\"inline\");\n    const thumbnailStart = this.thumbnailPosition.endsWith(\"start\");\n    const role =\n      this.selectionMode === \"multiple\"\n        ? \"checkbox\"\n        : this.selectionMode !== \"none\"\n          ? \"radio\"\n          : undefined;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={this.selectionMode !== \"none\" ? toAriaBoolean(this.selected) : undefined}\n            aria-disabled={this.disabled}\n            aria-label={this.label}\n            class={{ [CSS.contentWrapper]: true, inline: thumbnailInline }}\n            onClick={this.cardBodyClickHandler}\n            onKeyDown={this.keyDownHandler}\n            ref={(el) => (this.containerEl = el)}\n            role={role}\n            tabIndex={!this.selectable || this.disabled ? 0 : -1}\n          >\n            {this.loading ? (\n              <div aria-live=\"polite\" class=\"calcite-card-loader-container\">\n                <calcite-loader label={this.messages.loading} />\n              </div>\n            ) : null}\n            {thumbnailStart && this.renderThumbnail()}\n            <section aria-busy={toAriaBoolean(this.loading)} class={{ [CSS.container]: true }}>\n              {this.renderHeader()}\n              <div\n                class={{\n                  [CSS.cardContent]: true,\n                  [CSS.hasSlottedContent]: this.hasContent,\n                }}\n              >\n                <slot onSlotchange={this.handleDefaultSlotChange} />\n              </div>\n              {this.renderFooter()}\n            </section>\n            {!thumbnailStart && this.renderThumbnail()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/card/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.0
+ * v2.13.0-next.1
  */
 export const CSS = {
     container: "container",

package/dist/collection/components/card-group/card-group.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:54 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:46 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */
@@ -40,17 +40,25 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-card-group-gap: Specifies the gap between slotted components.
+* @prop --calcite-card-group-gap: [Deprecated] Use --calcite-card-group-space. Specifies the gap between slotted components.
+* @prop --calcite-card-group-space: Specifies the space between slotted components.
 */
 :host {
-  --calcite-card-group-gap: var(--calcite-size-md);
   display: block;
 }
 
 .container {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--calcite-card-group-gap);
+  gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-size-md)));
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+[hidden] {
+  display: none;
 }
 
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
@@ -61,12 +69,4 @@
 
 .interaction-container {
   display: contents;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-[hidden] {
-  display: none;
 }

package/dist/collection/components/card-group/card-group.js

@@ -1,11 +1,11 @@
 /*!
  * 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.0
+ * v2.13.0-next.1
  */
 import { h, Host, } from "@stencil/core";
 import { focusElement, focusElementInGroup, toAriaBoolean } from "../../utils/dom";
-import { connectInteractive, disconnectInteractive, InteractiveContainer, updateHostInteraction, } from "../../utils/interactive";
+import { InteractiveContainer, updateHostInteraction, } from "../../utils/interactive";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
 /**
  * @slot - A slot for adding one or more `calcite-card`s.
@@ -79,18 +79,12 @@ export class CardGroup {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
     componentDidLoad() {
         setComponentLoaded(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     async componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -145,7 +139,7 @@ export class CardGroup {
     //--------------------------------------------------------------------------
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-        return (h(Host, { key: 'f7d72ac0d0c8b0cec9b1c5c048ed2a8ee304d9e2' }, h(InteractiveContainer, { key: 'b477bbced684168f1e68c1fe0d8511a689653995', disabled: this.disabled }, h("div", { key: 'ce0aa841b96ad23886e109203a14ac2b0e54b948', "aria-disabled": toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, h("slot", { key: '338c12be0a5a675daf911aad6049aff6319d3064', onSlotchange: this.updateItemsOnSlotChange, ref: (el) => (this.slotRefEl = el) })))));
+        return (h(Host, { key: 'ba4ffbc827d09b09c6c042519a5f86ce3728d0fe' }, h(InteractiveContainer, { key: '59e07314b287f3703340b99b3ff877a058a59583', disabled: this.disabled }, h("div", { key: 'c203fa3c783553a2c8d32e0f8be607b7421674d9', "aria-disabled": toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, h("slot", { key: 'd58a98005e7d4a45f4b657d260f6af0087cefbde', onSlotchange: this.updateItemsOnSlotChange, ref: (el) => (this.slotRefEl = el) })))));
     }
     static get is() { return "calcite-card-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-group/card-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-group.js","sourceRoot":"","sources":["../../../../src/components/card-group/card-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  VNode,\n  Prop,\n  Element,\n  Listen,\n  EventEmitter,\n  Event,\n  Method,\n  Watch,\n  Host,\n} from \"@stencil/core\";\nimport { focusElement, focusElementInGroup, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { SelectionMode } from \"../interfaces\";\nimport {\n  LoadableComponent,\n  componentLoaded,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n/**\n * @slot - A slot for adding one or more `calcite-card`s.\n */\n\n@Component({\n  tag: \"calcite-card-group\",\n  styleUrl: \"card-group.scss\",\n  shadow: true,\n})\nexport class CardGroup implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Element\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the selection mode of the component. */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"multiple\" | \"single\" | \"single-persist\" | \"none\",\n    SelectionMode\n  > = \"none\";\n\n  @Watch(\"selectionMode\")\n  onSelectionModeChange(): void {\n    this.udpateItemsOnSelectionModeChange();\n  }\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteCardElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  private items: HTMLCalciteCardElement[] = [];\n\n  private slotRefEl: HTMLSlotElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Emits when the component's selection changes and the `selectionMode` is not `none`. */\n  @Event({ cancelable: false }) calciteCardGroupSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalCardKeyEvent\")\n  calciteInternalCardKeyEventListener(event: KeyboardEvent): void {\n    if (event.composedPath().includes(this.el)) {\n      const interactiveItems = this.items.filter((el) => !el.disabled);\n      switch (event.detail[\"key\"]) {\n        case \"ArrowRight\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"next\");\n          break;\n        case \"ArrowLeft\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"previous\");\n          break;\n        case \"Home\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"first\");\n          break;\n        case \"End\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"last\");\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteCardSelect\")\n  calciteCardSelectListener(event: CustomEvent): void {\n    if (\n      event.composedPath().includes(this.el) &&\n      !(event.target as HTMLCalciteCardElement).selectable\n    ) {\n      this.setSelectedItems(true, event.target as HTMLCalciteCardElement);\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentLoaded(this);\n    if (!this.disabled) {\n      focusElement(this.items[0]);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private udpateItemsOnSelectionModeChange = (): void => {\n    this.updateSlottedItems(this.slotRefEl);\n    this.updateSelectedItems();\n  };\n\n  private updateItemsOnSlotChange = (event: Event): void => {\n    this.updateSlottedItems(event.target as HTMLSlotElement);\n    this.updateSelectedItems();\n  };\n\n  private updateSlottedItems = (target: HTMLSlotElement): void => {\n    this.items = target\n      .assignedElements({ flatten: true })\n      .filter((el) => el?.matches(\"calcite-card\")) as HTMLCalciteCardElement[];\n  };\n\n  private updateSelectedItems = (): void => {\n    this.items.forEach((el) => {\n      el.selectionMode = this.selectionMode;\n    });\n\n    this.setSelectedItems(false);\n  };\n\n  private setSelectedItems = (emit: boolean, elToMatch?: HTMLCalciteCardElement): void => {\n    if (elToMatch) {\n      this.items.forEach((el) => {\n        const matchingEl = elToMatch === el;\n        switch (this.selectionMode) {\n          case \"multiple\":\n            if (matchingEl) {\n              el.selected = !el.selected;\n            }\n            break;\n\n          case \"single\":\n            el.selected = matchingEl ? !el.selected : false;\n            break;\n\n          case \"single-persist\":\n            el.selected = !!matchingEl;\n            break;\n        }\n      });\n    }\n\n    this.selectedItems = this.items.filter((el) => el.selected);\n\n    if (emit && this.selectionMode !== \"none\" && !this.disabled) {\n      this.calciteCardGroupSelect.emit();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const role =\n      this.selectionMode === \"none\" || this.selectionMode === \"multiple\" ? \"group\" : \"radiogroup\";\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-disabled={toAriaBoolean(this.disabled)}\n            aria-label={this.label}\n            class=\"container\"\n            role={role}\n          >\n            <slot\n              onSlotchange={this.updateItemsOnSlotChange}\n              ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}\n            />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"card-group.js","sourceRoot":"","sources":["../../../../src/components/card-group/card-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  VNode,\n  Prop,\n  Element,\n  Listen,\n  EventEmitter,\n  Event,\n  Method,\n  Watch,\n  Host,\n} from \"@stencil/core\";\nimport { focusElement, focusElementInGroup, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { SelectionMode } from \"../interfaces\";\nimport {\n  LoadableComponent,\n  componentLoaded,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n/**\n * @slot - A slot for adding one or more `calcite-card`s.\n */\n\n@Component({\n  tag: \"calcite-card-group\",\n  styleUrl: \"card-group.scss\",\n  shadow: true,\n})\nexport class CardGroup implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Element\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the selection mode of the component. */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"multiple\" | \"single\" | \"single-persist\" | \"none\",\n    SelectionMode\n  > = \"none\";\n\n  @Watch(\"selectionMode\")\n  onSelectionModeChange(): void {\n    this.udpateItemsOnSelectionModeChange();\n  }\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteCardElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  private items: HTMLCalciteCardElement[] = [];\n\n  private slotRefEl: HTMLSlotElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Emits when the component's selection changes and the `selectionMode` is not `none`. */\n  @Event({ cancelable: false }) calciteCardGroupSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalCardKeyEvent\")\n  calciteInternalCardKeyEventListener(event: KeyboardEvent): void {\n    if (event.composedPath().includes(this.el)) {\n      const interactiveItems = this.items.filter((el) => !el.disabled);\n      switch (event.detail[\"key\"]) {\n        case \"ArrowRight\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"next\");\n          break;\n        case \"ArrowLeft\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"previous\");\n          break;\n        case \"Home\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"first\");\n          break;\n        case \"End\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"last\");\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteCardSelect\")\n  calciteCardSelectListener(event: CustomEvent): void {\n    if (\n      event.composedPath().includes(this.el) &&\n      !(event.target as HTMLCalciteCardElement).selectable\n    ) {\n      this.setSelectedItems(true, event.target as HTMLCalciteCardElement);\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentLoaded(this);\n    if (!this.disabled) {\n      focusElement(this.items[0]);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private udpateItemsOnSelectionModeChange = (): void => {\n    this.updateSlottedItems(this.slotRefEl);\n    this.updateSelectedItems();\n  };\n\n  private updateItemsOnSlotChange = (event: Event): void => {\n    this.updateSlottedItems(event.target as HTMLSlotElement);\n    this.updateSelectedItems();\n  };\n\n  private updateSlottedItems = (target: HTMLSlotElement): void => {\n    this.items = target\n      .assignedElements({ flatten: true })\n      .filter((el) => el?.matches(\"calcite-card\")) as HTMLCalciteCardElement[];\n  };\n\n  private updateSelectedItems = (): void => {\n    this.items.forEach((el) => {\n      el.selectionMode = this.selectionMode;\n    });\n\n    this.setSelectedItems(false);\n  };\n\n  private setSelectedItems = (emit: boolean, elToMatch?: HTMLCalciteCardElement): void => {\n    if (elToMatch) {\n      this.items.forEach((el) => {\n        const matchingEl = elToMatch === el;\n        switch (this.selectionMode) {\n          case \"multiple\":\n            if (matchingEl) {\n              el.selected = !el.selected;\n            }\n            break;\n\n          case \"single\":\n            el.selected = matchingEl ? !el.selected : false;\n            break;\n\n          case \"single-persist\":\n            el.selected = !!matchingEl;\n            break;\n        }\n      });\n    }\n\n    this.selectedItems = this.items.filter((el) => el.selected);\n\n    if (emit && this.selectionMode !== \"none\" && !this.disabled) {\n      this.calciteCardGroupSelect.emit();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const role =\n      this.selectionMode === \"none\" || this.selectionMode === \"multiple\" ? \"group\" : \"radiogroup\";\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-disabled={toAriaBoolean(this.disabled)}\n            aria-label={this.label}\n            class=\"container\"\n            role={role}\n          >\n            <slot\n              onSlotchange={this.updateItemsOnSlotChange}\n              ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}\n            />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/carousel/carousel.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:56 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 28 Aug 2024 03:13:54 GMT
+ * Generated on Fri, 30 Aug 2024 16:45:46 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/carousel/carousel.js

@@ -1,13 +1,13 @@
 /*!
  * 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.0
+ * v2.13.0-next.1
  */
 import { h, Host, } from "@stencil/core";
 import { focusElementInGroup, getElementDir, slotChangeGetAssignedElements, toAriaBoolean, whenAnimationDone, } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { guid } from "../../utils/guid";
-import { connectInteractive, updateHostInteraction, disconnectInteractive, InteractiveContainer, } from "../../utils/interactive";
+import { updateHostInteraction, InteractiveContainer, } from "../../utils/interactive";
 import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
 import { getRoundRobinIndex } from "../../utils/array";
@@ -277,7 +277,6 @@ export class Carousel {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -288,7 +287,6 @@ export class Carousel {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         this.clearIntervals();
@@ -396,17 +394,17 @@ export class Carousel {
     }
     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: '369aa68cabe196db3bb4d323f01b2759d1592b13' }, h(InteractiveContainer, { key: '6bf6f16c7521c0948ba9fa44a85926dec345916e', disabled: this.disabled }, h("div", { key: 'b1ae8c83f472642889d24a61a2c7f0bf3855f814', "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: '8d897cf89cd2d40df5f305b03c380f07570cb5c3', 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: '8f3b0ac2cbef1e4fae7c93836cca24d790439e02', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
     }
     static get is() { return "calcite-carousel"; }
     static get encapsulation() { return "shadow"; }