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

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.13.0
+ * v2.14.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 Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:14 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/card-group/card-group.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.13.0
+ * v2.14.0-next.1
  */
 import { h, Host, } from "@stencil/core";
 import { focusElement, focusElementInGroup } from "../../utils/dom";
@@ -23,7 +23,7 @@ export class CardGroup {
         //  Private Methods
         //
         //--------------------------------------------------------------------------
-        this.udpateItemsOnSelectionModeChange = () => {
+        this.updateItemsOnSelectionModeChange = () => {
             this.updateSlottedItems(this.slotRefEl);
             this.updateSelectedItems();
         };
@@ -72,7 +72,7 @@ export class CardGroup {
         this.selectedItems = [];
     }
     onSelectionModeChange() {
-        this.udpateItemsOnSelectionModeChange();
+        this.updateItemsOnSelectionModeChange();
     }
     //--------------------------------------------------------------------------
     //
@@ -139,7 +139,7 @@ export class CardGroup {
     //--------------------------------------------------------------------------
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-        return (h(Host, { key: '2aa2152806418f305065d23ec9779668086f10c9' }, h(InteractiveContainer, { key: '64717db7b05788f5448b898ab9bfc2a553ed6ac9', disabled: this.disabled }, h("div", { key: 'f6725d6c8942a0c69aed287bee24d79fd42c7e89', "aria-label": this.label, class: "container", role: role }, h("slot", { key: 'a88d6f133fdceafba10ceb9517428b3c7ee8cffb', onSlotchange: this.updateItemsOnSlotChange, ref: (el) => (this.slotRefEl = el) })))));
+        return (h(Host, { key: '0588ddc88a97d4e5c44eb25148a60c3e520136d1' }, h(InteractiveContainer, { key: '32ddf39dea8c79de41465ad220162a7aa49864db', disabled: this.disabled }, h("div", { key: '82ed85a067a70dea1fde85ce831b982ff2b57335', "aria-label": this.label, class: "container", role: role }, h("slot", { key: '836c05caf93526149da89b3815e72a62d944f5d7', 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 } 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 is HTMLCalciteCardElement => el?.matches(\"calcite-card\"));\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 aria-label={this.label} class=\"container\" role={role}>\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":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EAED,IAAI,EACJ,OAAO,EACP,MAAM,EAEN,KAAK,EACL,MAAM,EACN,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAEL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,eAAe,EACf,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AAOH,MAAM,OAAO,SAAS;;QAuCpB,4EAA4E;QAC5E,EAAE;QACF,sBAAsB;QACtB,EAAE;QACF,4EAA4E;QAEpE,UAAK,GAA6B,EAAE,CAAC;QAoF7C,4EAA4E;QAC5E,EAAE;QACF,mBAAmB;QACnB,EAAE;QACF,4EAA4E;QAEpE,qCAAgC,GAAG,GAAS,EAAE;YACpD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACxC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC,CAAC;QAEM,4BAAuB,GAAG,CAAC,KAAY,EAAQ,EAAE;YACvD,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAyB,CAAC,CAAC;YACzD,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,MAAuB,EAAQ,EAAE;YAC7D,IAAI,CAAC,KAAK,GAAG,MAAM;iBAChB,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iBACnC,MAAM,CAAC,CAAC,EAAE,EAAgC,EAAE,CAAC,EAAE,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;QAC/E,CAAC,CAAC;QAEM,wBAAmB,GAAG,GAAS,EAAE;YACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;gBACxB,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;YACxC,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,IAAa,EAAE,SAAkC,EAAQ,EAAE;YACrF,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;oBACxB,MAAM,UAAU,GAAG,SAAS,KAAK,EAAE,CAAC;oBACpC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC;wBAC3B,KAAK,UAAU;4BACb,IAAI,UAAU,EAAE,CAAC;gCACf,EAAE,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC;4BAC7B,CAAC;4BACD,MAAM;wBAER,KAAK,QAAQ;4BACX,EAAE,CAAC,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;4BAChD,MAAM;wBAER,KAAK,gBAAgB;4BACnB,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,CAAC;4BAC3B,MAAM;oBACV,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;YAE5D,IAAI,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC5D,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;YACrC,CAAC;QACH,CAAC,CAAC;wBA1KkC,KAAK;;6BASrC,MAAM;6BAYyD,EAAE;;IATrE,qBAAqB;QACnB,IAAI,CAAC,gCAAgC,EAAE,CAAC;IAC1C,CAAC;IA4BD,4EAA4E;IAC5E,EAAE;IACF,aAAa;IACb,EAAE;IACF,4EAA4E;IAE5E,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IACD,4EAA4E;IAC5E,EAAE;IACF,mBAAmB;IACnB,EAAE;IACF,4EAA4E;IAG5E,mCAAmC,CAAC,KAAoB;QACtD,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAC3C,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;YACjE,QAAQ,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC5B,KAAK,YAAY;oBACf,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,MAAM,CAAC,CAAC;oBACtF,MAAM;gBACR,KAAK,WAAW;oBACd,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,UAAU,CAAC,CAAC;oBAC1F,MAAM;gBACR,KAAK,MAAM;oBACT,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,OAAO,CAAC,CAAC;oBACvF,MAAM;gBACR,KAAK,KAAK;oBACR,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,MAAM,CAAC,CAAC;oBACtF,MAAM;YACV,CAAC;QACH,CAAC;IACH,CAAC;IAGD,yBAAyB,CAAC,KAAkB;QAC1C,IACE,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACtC,CAAE,KAAK,CAAC,MAAiC,CAAC,UAAU,EACpD,CAAC;YACD,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,MAAgC,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAED,6EAA6E;IAC7E,EAAE;IACF,kBAAkB;IAClB,EAAE;IACF,6EAA6E;IAE7E;;OAEG;IAEH,KAAK,CAAC,QAAQ;QACZ,MAAM,eAAe,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IA6DD,4EAA4E;IAC5E,EAAE;IACF,kBAAkB;IAClB,EAAE;IACF,4EAA4E;IAE5E,MAAM;QACJ,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;QAE9F,OAAO,CACL,EAAC,IAAI;YACH,EAAC,oBAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAC3C,0EAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI;oBACvD,6DACE,YAAY,EAAE,IAAI,CAAC,uBAAuB,EAC1C,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAqB,CAAC,GACrD,CACE,CACe,CAClB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 } 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.updateItemsOnSelectionModeChange();\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 updateItemsOnSelectionModeChange = (): 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 is HTMLCalciteCardElement => el?.matches(\"calcite-card\"));\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 aria-label={this.label} class=\"container\" role={role}>\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 Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:14 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/carousel/carousel.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.13.0
+ * v2.14.0-next.1
  */
 import { h, Host, } from "@stencil/core";
 import { focusElementInGroup, getElementDir, slotChangeGetAssignedElements, toAriaBoolean, whenAnimationDone, } from "../../utils/dom";
@@ -443,17 +443,17 @@ export class Carousel {
     }
     render() {
         const { direction } = this;
-        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: {
+        return (h(Host, { key: 'c63aafb2f9441499aa1fd9cfe56e475963458bda' }, h(InteractiveContainer, { key: 'ea032cbff9c25640cd13a790155932f79cbf5f1c', disabled: this.disabled }, h("div", { key: 'c91f62a6103749c5b0c2de23c473ea56b9fcab0e', "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: '7c274a35b9186ba9bb04fd8124be6893eee46e5f', 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: '20ab72ef93a5cf2799ea393a42b75a188740e8ab', 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: '0f2497545f4cf4a311ab871bcaf5ff16fe677c77', 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: '2142f6432573e3b192ccbc9549e91b18a2ed704a', 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"; }

package/dist/collection/components/carousel/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.13.0
+ * v2.14.0-next.1
  */
 export const DURATION = 6000;
 export const CSS = {

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

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:14 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/carousel-item/carousel-item.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.13.0
+ * v2.14.0-next.1
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -22,7 +22,7 @@ export class CarouselItem {
     // --------------------------------------------------------------------------
     render() {
         const id = this.el.id || this.guid;
-        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' }))));
+        return (h(Host, { key: 'e8eb5f2d26a828d13ff1489ee0a697f5bd64ef01', id: id }, h("div", { key: 'bcb63cfba9e7cd113624562cafc5e1c2c16e130f', "aria-label": this.label, class: { [CSS.container]: true, [CSS.selected]: this.selected }, role: "tabpanel" }, h("slot", { key: 'db2cf2b191fa3893d7c95ff4f9e025244d198185' }))));
     }
     static get is() { return "calcite-carousel-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel-item/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.13.0
+ * v2.14.0-next.1
  */
 export const CSS = {
     container: "container",

package/dist/collection/components/checkbox/checkbox.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:14 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/checkbox/checkbox.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.13.0
+ * v2.14.0-next.1
  */
 import { h, Host, } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";
@@ -33,9 +33,6 @@ export class Checkbox {
             }
         };
         this.clickHandler = () => {
-            if (this.disabled) {
-                return;
-            }
             this.toggle();
         };
         //--------------------------------------------------------------------------
@@ -126,10 +123,10 @@ export class Checkbox {
     // --------------------------------------------------------------------------
     render() {
         const rtl = getElementDir(this.el) === "rtl";
-        return (h(Host, { key: '146f32544b1a2d6d3c0292462edb979699e4b75a', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'd5897a38a203d29967ec1f1e618a7b37d60d9b95', disabled: this.disabled }, h("div", { key: '17739f11d7e6368788941434ff8ef6f5d6291cd9', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: {
+        return (h(Host, { key: '8132e3ba7c26f38fa0a3e31a2ba275acd8d47813', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '151a86be798b986626d928fb0b9910b30dc80790', disabled: this.disabled }, h("div", { key: '90e18e1affa841724284c6e7a6ef423118eb1efc', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: {
                 [CSS.toggle]: true,
                 [CSS_UTILITY.rtl]: rtl,
-            }, onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, h("svg", { key: '99df5e78e296d086a6782983a929bd149c3c4e39', "aria-hidden": "true", class: CSS.check, viewBox: "0 0 16 16" }, h("path", { key: '57458a12cf5feeada4c57dfc51c5b62f1e73d49b', d: this.getPath() })), h("slot", { key: 'ad29699957eb1d3f041549d7057b4842d3396b3c' })), h(HiddenFormInputSlot, { key: '1b2a325739b08d7f21d4abee49fe27f632f78183', component: this }))));
+            }, onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, h("svg", { key: 'ea7ca8d86f0f4fe930c45f2bc114edd752c2ddf1', "aria-hidden": "true", class: CSS.check, viewBox: "0 0 16 16" }, h("path", { key: '4107ca07aed6fa10b79f5c01d109657aea98251b', d: this.getPath() })), h("slot", { key: 'fb09f570a74b4adfdd2cd0da84a366fffe89848a' })), h(HiddenFormInputSlot, { key: '97d395d0ac0d87f0027bddc2ce3da0a892c12f61', component: this }))));
     }
     static get is() { return "calcite-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n  MutableValidityState,\n} from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale, Status } from \"../interfaces\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-checkbox\",\n  styleUrl: \"checkbox.scss\",\n  shadow: true,\n})\nexport class Checkbox\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true }) form: string;\n\n  /**\n   * The `id` attribute of the component. When omitted, a globally unique identifier is used.\n   *\n   * @deprecated No longer necessary.\n   */\n  @Prop({ reflect: true, mutable: true }) guid: string;\n\n  /**\n   * The hovered state of the checkbox.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) hovered = false;\n\n  /**\n   * When `true`, the component is initially indeterminate, which is independent from its `checked` value.\n   *\n   * The state is visual only, and can look different across browsers.\n   *\n   * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /** When `true`, the component must have a value in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /**\n   * The current validation state of the component.\n   *\n   * @readonly\n   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated in form util when syncing hidden input\n  @Prop({ mutable: true }) validity: MutableValidityState = {\n    valid: false,\n    badInput: false,\n    customError: false,\n    patternMismatch: false,\n    rangeOverflow: false,\n    rangeUnderflow: false,\n    stepMismatch: false,\n    tooLong: false,\n    tooShort: false,\n    typeMismatch: false,\n    valueMissing: false,\n  };\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCheckboxElement;\n\n  readonly checkedPath = \"M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z\";\n\n  readonly indeterminatePath = \"M13 8v1H3V8z\";\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultChecked: boolean;\n\n  defaultValue: Checkbox[\"checked\"];\n\n  toggleEl: HTMLDivElement;\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\n    this.toggleEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  getPath = (): string =>\n    this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : \"\";\n\n  toggle = (): void => {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.setFocus();\n      this.indeterminate = false;\n      this.calciteCheckboxChange.emit();\n    }\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is blurred.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxBlur: EventEmitter<boolean>;\n\n  /** Fires when the component's `checked` status changes. */\n  @Event({ cancelable: false }) calciteCheckboxChange: EventEmitter<void>;\n\n  /**\n   * Fires when the component is focused.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxFocus: EventEmitter<boolean>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  onToggleBlur = (): void => {\n    this.calciteInternalCheckboxBlur.emit(false);\n  };\n\n  onToggleFocus = (): void => {\n    this.calciteInternalCheckboxFocus.emit(true);\n  };\n\n  onLabelClick = (): void => {\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.guid = this.el.id || `calcite-checkbox-${guid()}`;\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const rtl = getElementDir(this.el) === \"rtl\";\n\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class={{\n              [CSS.toggle]: true,\n              [CSS_UTILITY.rtl]: rtl,\n            }}\n            onBlur={this.onToggleBlur}\n            onFocus={this.onToggleFocus}\n            ref={(toggleEl) => (this.toggleEl = toggleEl)}\n            role=\"checkbox\"\n            tabIndex={this.disabled ? undefined : 0}\n          >\n            <svg aria-hidden=\"true\" class={CSS.check} viewBox=\"0 0 16 16\">\n              <path d={this.getPath()} />\n            </svg>\n            <slot />\n          </div>\n          <HiddenFormInputSlot component={this} />\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n  MutableValidityState,\n} from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale, Status } from \"../interfaces\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-checkbox\",\n  styleUrl: \"checkbox.scss\",\n  shadow: true,\n})\nexport class Checkbox\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true }) form: string;\n\n  /**\n   * The `id` attribute of the component. When omitted, a globally unique identifier is used.\n   *\n   * @deprecated No longer necessary.\n   */\n  @Prop({ reflect: true, mutable: true }) guid: string;\n\n  /**\n   * The hovered state of the checkbox.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) hovered = false;\n\n  /**\n   * When `true`, the component is initially indeterminate, which is independent from its `checked` value.\n   *\n   * The state is visual only, and can look different across browsers.\n   *\n   * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /** When `true`, the component must have a value in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /**\n   * The current validation state of the component.\n   *\n   * @readonly\n   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated in form util when syncing hidden input\n  @Prop({ mutable: true }) validity: MutableValidityState = {\n    valid: false,\n    badInput: false,\n    customError: false,\n    patternMismatch: false,\n    rangeOverflow: false,\n    rangeUnderflow: false,\n    stepMismatch: false,\n    tooLong: false,\n    tooShort: false,\n    typeMismatch: false,\n    valueMissing: false,\n  };\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCheckboxElement;\n\n  readonly checkedPath = \"M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z\";\n\n  readonly indeterminatePath = \"M13 8v1H3V8z\";\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultChecked: boolean;\n\n  defaultValue: Checkbox[\"checked\"];\n\n  toggleEl: HTMLDivElement;\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\n    this.toggleEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  getPath = (): string =>\n    this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : \"\";\n\n  toggle = (): void => {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.setFocus();\n      this.indeterminate = false;\n      this.calciteCheckboxChange.emit();\n    }\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  clickHandler = (): void => {\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is blurred.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxBlur: EventEmitter<boolean>;\n\n  /** Fires when the component's `checked` status changes. */\n  @Event({ cancelable: false }) calciteCheckboxChange: EventEmitter<void>;\n\n  /**\n   * Fires when the component is focused.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxFocus: EventEmitter<boolean>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  onToggleBlur = (): void => {\n    this.calciteInternalCheckboxBlur.emit(false);\n  };\n\n  onToggleFocus = (): void => {\n    this.calciteInternalCheckboxFocus.emit(true);\n  };\n\n  onLabelClick = (): void => {\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.guid = this.el.id || `calcite-checkbox-${guid()}`;\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const rtl = getElementDir(this.el) === \"rtl\";\n\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class={{\n              [CSS.toggle]: true,\n              [CSS_UTILITY.rtl]: rtl,\n            }}\n            onBlur={this.onToggleBlur}\n            onFocus={this.onToggleFocus}\n            ref={(toggleEl) => (this.toggleEl = toggleEl)}\n            role=\"checkbox\"\n            tabIndex={this.disabled ? undefined : 0}\n          >\n            <svg aria-hidden=\"true\" class={CSS.check} viewBox=\"0 0 16 16\">\n              <path d={this.getPath()} />\n            </svg>\n            <slot />\n          </div>\n          <HiddenFormInputSlot component={this} />\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/checkbox/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.13.0
+ * v2.14.0-next.1
  */
 export const CSS = {
     toggle: "toggle",

package/dist/collection/components/chip/chip.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:14 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/chip/chip.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.13.0
+ * v2.14.0-next.1
  */
 import { h, Host, } from "@stencil/core";
 import { toAriaBoolean, slotChangeHasAssignedElement } from "../../utils/dom";
@@ -203,7 +203,7 @@ export class Chip {
                 : this.interactive
                     ? "button"
                     : undefined;
-        return (h(Host, { key: '7feca8bad37627baabfc4abd25cf135e1e9f196b' }, h(InteractiveContainer, { key: 'af2360b4b768ae8c643d52f4bdb9f5d282504114', disabled: disabled }, h("div", { key: '8d905c4ab20d271a211282b95ebcb2d305d76cb7', "aria-checked": this.selectionMode !== "none" && this.interactive
+        return (h(Host, { key: '57dff539b14a488e6360c9ed400492cfafc64b34' }, h(InteractiveContainer, { key: '6f78566970ef9a504ac066f7a7c241d7f219c47d', disabled: disabled }, h("div", { key: '4ff8dfe906798fb500da3bd029e622e904dc38ce', "aria-checked": this.selectionMode !== "none" && this.interactive
                 ? toAriaBoolean(this.selected)
                 : undefined, "aria-label": this.label, class: {
                 [CSS.container]: true,
@@ -220,7 +220,7 @@ export class Chip {
                     (!this.icon || !this.hasImage) &&
                     (this.selectionMode === "none" ||
                         (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
-            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), h("span", { key: 'dab6eae3f8330b85ffac4c7fe1b2fcbb53327196', class: CSS.title }, h("slot", { key: '72ba5bd0c7a97c30f766da119f419261aab24acb', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
+            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), h("span", { key: 'dfe4a920a7995d18306d04450801347bc71d79ac', class: CSS.title }, h("slot", { key: 'cec18ec8e90df1405e58859ed24c2d0a4b4901f8', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
     }
     static get is() { return "calcite-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/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.13.0
+ * v2.14.0-next.1
  */
 export const CSS = {
     title: "title",

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

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:14 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/chip-group/chip-group.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.13.0
+ * v2.14.0-next.1
  */
 import { h, } from "@stencil/core";
 import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
@@ -170,7 +170,7 @@ export class ChipGroup {
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
         const { disabled } = this;
-        return (h(InteractiveContainer, { key: '0db5548f1c2854898191b4d6eb8140cae2faf3d8', disabled: disabled }, h("div", { key: '60fc92fea20478ee6fde23d807f17f7f472c1f5a', "aria-label": this.label, class: "container", role: role }, h("slot", { key: 'd43fcf04af0063cd4d00f46e6dd61347eafccb3b', onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
+        return (h(InteractiveContainer, { key: '0eff5094196c81d49299c8798bead2fa9ad58ae4', disabled: disabled }, h("div", { key: '99082a44e4321b23afd5ef0d05ffbda4ea81ff9b', "aria-label": this.label, class: "container", role: role }, h("slot", { key: 'f2735e6b7becd61933ce2b0ecbe2b1ace8a010b9', onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
     }
     static get is() { return "calcite-chip-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/color-picker/color-picker.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:17 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:05 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 00:09:14 GMT
+ * Generated on Tue, 01 Oct 2024 17:31:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/color-picker/color-picker.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.13.0
+ * v2.14.0-next.1
  */
 import { h, } from "@stencil/core";
 import Color from "color";
@@ -301,11 +301,17 @@ export class ColorPicker {
             this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(saturation).value(value), skipEqual);
         };
         this.initColorField = (canvas) => {
+            if (!canvas) {
+                return;
+            }
             this.colorFieldRenderingContext = canvas.getContext("2d");
             this.updateCanvasSize("color-field");
             this.drawColorControls();
         };
         this.initHueSlider = (canvas) => {
+            if (!canvas) {
+                return;
+            }
             this.hueSliderRenderingContext = canvas.getContext("2d");
             this.updateCanvasSize("hue-slider");
             this.drawHueSlider();
@@ -567,10 +573,10 @@ export class ColorPicker {
         const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
         const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
         const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
-        return (h(InteractiveContainer, { key: 'c4837ef7cbe25b5fc3f0c72fe82d0090c6e0cdb5', disabled: this.disabled }, h("div", { key: '28230570482ee9d33df9518e3cca534e3fac44ac', class: CSS.container }, h("div", { key: '83172bc55f13955f5b69b59300e68642d59999af', class: CSS.controlAndScope }, h("canvas", { key: 'c20db7054ab5ebdb1e13ba295ac463609c44de47', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), h("div", { key: '1e44beb121ed5a2247a6d69bf42c49a7f1ce5829', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
+        return (h(InteractiveContainer, { key: '039190b8a2433b3e7fb8b5fb8c9bb105a277b478', disabled: this.disabled }, h("div", { key: '13ec9c2fd827f7648e7f18de7ae919441de6a601', class: CSS.container }, h("div", { key: 'bc4296a7f69caf934b4707f02e12759daa54df97', class: CSS.controlAndScope }, h("canvas", { key: '51cb0220f6717555cf55462623c4606a907b9a48', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), h("div", { key: 'b0a1d1252915a853965f9d242a45787a23608bff', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
                 top: `${adjustedColorFieldScopeTop || 0}px`,
                 left: `${adjustedColorFieldScopeLeft || 0}px`,
-            }, tabindex: "0" })), h("div", { key: '5b873f4e7266cc654086f59c8483d3b4a65c8e8f', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: 'db7c903a933ed061cc2edcd766fde70a8b670f00', class: CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), h("div", { key: '33ea2354cbcfaa6677e82713bd8f02d1b83a9c26', class: CSS.sliders }, h("div", { key: '28493b4bd177b8c97583cabeb5716a7cb7202e76', class: CSS.controlAndScope }, h("canvas", { key: 'd0a9ce7fb098b7434cd62f68b6b6092efcef3dc4', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), h("div", { key: '2356120385aabf09384f0077dffb7881c55c5ea9', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
+            }, tabindex: "0" })), h("div", { key: '4c1d56f1c601a682ec685c2fd9fa5edbba322dd6', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: '8cad170b6e48435085af653988e09749f9e20904', class: CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), h("div", { key: '414f10608e656fda314e8a4a52ee187be77067fc', class: CSS.sliders }, h("div", { key: 'ca59d9529ac2b776d3a3f69812ace19b17399041', class: CSS.controlAndScope }, h("canvas", { key: 'd831eec97bc3f021f623c9896f135a33c144b97a', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), h("div", { key: '30d596cb2dd585de327bbdc82acc0af591822b3c', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
             }, tabindex: "0" })), alphaChannel ? (h("div", { class: CSS.controlAndScope }, h("canvas", { class: { [CSS.slider]: true, [CSS.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown, ref: this.initOpacitySlider }), h("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR).round().alpha(), class: { [CSS.scope]: true, [CSS.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, ref: this.storeOpacityScope, role: "slider", style: {
@@ -582,9 +588,7 @@ export class ColorPicker {
             } }, h("div", { class: CSS.hexAndChannelsGroup }, noHex ? null : (h("div", { class: CSS.hexOptions }, h("calcite-color-picker-hex-input", { allowEmpty: this.isClearable, alphaChannel: alphaChannel, class: CSS.control, messages: messages, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: scale, value: selectedColorInHex }))), noChannels ? null : (h("calcite-tabs", { class: {
                 [CSS.colorModeContainer]: true,
                 [CSS.splitSection]: true,
-            }, scale: scale === "l" ? "m" : "s" }, h("calcite-tab-nav", { slot: "title-group" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv")))))), noSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } }, h("div", { class: CSS.header }, h("label", null, messages.saved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, disabled: noColor, iconStart: "minus", kind: "neutral", label: messages.deleteColor, onClick: this.deleteColor, scale: scale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, disabled: noColor, iconStart: "plus", kind: "neutral", label: messages.saveColor, onClick: this.saveColor, scale: scale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
-            ...savedColors.map((color) => (h("calcite-color-picker-swatch", { class: CSS.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 }))),
-        ])) : null)))));
+            }, scale: scale === "l" ? "m" : "s" }, h("calcite-tab-nav", { slot: "title-group" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv")))))), noSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } }, h("div", { class: CSS.header }, h("label", null, messages.saved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, disabled: noColor, iconStart: "minus", kind: "neutral", label: messages.deleteColor, onClick: this.deleteColor, scale: scale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, disabled: noColor, iconStart: "plus", kind: "neutral", label: messages.saveColor, onClick: this.saveColor, scale: scale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, savedColors.map((color) => (h("calcite-color-picker-swatch", { class: CSS.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 }))))) : null)))));
     }
     // --------------------------------------------------------------------------
     //