@esri/calcite-components 2.6.0-next.2 → 2.6.0-next.3

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.2
+ * v2.6.0-next.3
  */
 'use strict';
 
@@ -11247,7 +11247,7 @@ const SLOTS$x = {
     menuActions: "menu-actions",
     menuTooltip: "menu-tooltip",
 };
-const ICONS$k = {
+const ICONS$l = {
     menu: "ellipsis",
 };
 const CSS$1l = {
@@ -11262,7 +11262,7 @@ const SLOTS$w = {
     tooltip: "tooltip",
     trigger: "trigger",
 };
-const ICONS$j = {
+const ICONS$k = {
     menu: "ellipsis",
 };
 const activeAttr = "data-active";
@@ -11317,7 +11317,7 @@ const overflowActions = ({ actionGroups, expanded, overflowCount, }) => {
     });
 };
 
-const ICONS$i = {
+const ICONS$j = {
     chevronsLeft: "chevrons-left",
     chevronsRight: "chevrons-right",
 };
@@ -11342,7 +11342,7 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref, }) => {
 const ExpandToggle = ({ expanded, expandText, collapseText, toggle, el, position, tooltip, ref, scale, }) => {
     const rtl = getElementDir(el) === "rtl";
     const text = expanded ? collapseText : expandText;
-    const icons = [ICONS$i.chevronsLeft, ICONS$i.chevronsRight];
+    const icons = [ICONS$j.chevronsLeft, ICONS$j.chevronsRight];
     if (rtl) {
         icons.reverse();
     }
@@ -11688,7 +11688,7 @@ class ActionGroup {
     // --------------------------------------------------------------------------
     renderMenu() {
         const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } = this;
-        return (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$k.menu, scale: scale, slot: SLOTS$w.trigger, text: messages.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$x.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), hAsync("slot", { name: SLOTS$x.menuTooltip, slot: SLOTS$w.tooltip })));
+        return (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$l.menu, scale: scale, slot: SLOTS$w.trigger, text: messages.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$x.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), hAsync("slot", { name: SLOTS$x.menuTooltip, slot: SLOTS$w.tooltip })));
     }
     render() {
         return (hAsync("div", { "aria-label": this.label, class: CSS$1l.container, role: "group" }, hAsync("slot", null), this.renderMenu()));
@@ -11985,7 +11985,7 @@ class ActionMenu {
     }
     renderMenuButton() {
         const { appearance, label, scale, expanded } = this;
-        const menuButtonSlot = (hAsync("slot", { name: SLOTS$w.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { appearance: appearance, class: CSS$1k.defaultTrigger, icon: ICONS$j.menu, scale: scale, text: label, textEnabled: expanded,
+        const menuButtonSlot = (hAsync("slot", { name: SLOTS$w.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { appearance: appearance, class: CSS$1k.defaultTrigger, icon: ICONS$k.menu, scale: scale, text: label, textEnabled: expanded,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: this.setDefaultMenuButtonEl })));
         return menuButtonSlot;
@@ -12989,7 +12989,7 @@ const SLOTS$s = {
     control: "control",
     headerMenuActions: "header-menu-actions",
 };
-const ICONS$h = {
+const ICONS$i = {
     opened: "chevron-up",
     closed: "chevron-down",
     valid: "check-circle",
@@ -13121,7 +13121,7 @@ class Block {
                 [CSS$1g.statusIcon]: true,
                 [CSS$1g.valid]: status == "valid",
                 [CSS$1g.invalid]: status == "invalid",
-            }, icon: ICONS$h[status], scale: "s" }))) : hasSlottedIcon ? (hAsync("div", { class: CSS$1g.icon, key: "icon-slot" }, hAsync("slot", { key: "icon-slot", name: SLOTS$s.icon }))) : null;
+            }, icon: ICONS$i[status], scale: "s" }))) : hasSlottedIcon ? (hAsync("div", { class: CSS$1g.icon, key: "icon-slot" }, hAsync("slot", { key: "icon-slot", name: SLOTS$s.icon }))) : null;
     }
     renderTitle() {
         const { heading, headingLevel, description } = this;
@@ -13133,7 +13133,7 @@ class Block {
         const headerContent = (hAsync("header", { class: CSS$1g.header, id: IDS$1.header }, this.renderIcon(), this.renderTitle()));
         const hasControl = !!getSlotted(el, SLOTS$s.control);
         const hasMenuActions = !!getSlotted(el, SLOTS$s.headerMenuActions);
-        const collapseIcon = open ? ICONS$h.opened : ICONS$h.closed;
+        const collapseIcon = open ? ICONS$i.opened : ICONS$i.closed;
         const headerNode = (hAsync("div", { class: CSS$1g.headerContainer }, this.dragHandle ? hAsync("calcite-handle", { label: heading }) : null, collapsible ? (hAsync("button", { "aria-controls": IDS$1.content, "aria-describedby": IDS$1.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS$1g.toggle, id: IDS$1.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, hAsync("calcite-icon", { "aria-hidden": "true", class: CSS$1g.toggleIcon, icon: collapseIcon, scale: "s" }))) : (headerContent), hasControl ? (hAsync("div", { class: CSS$1g.controlContainer }, hAsync("slot", { name: SLOTS$s.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, hAsync("slot", { name: SLOTS$s.headerMenuActions }))) : null));
         return (hAsync(Host, null, hAsync(InteractiveContainer, { disabled: this.disabled }, hAsync("article", { "aria-busy": toAriaBoolean(loading), class: {
                 [CSS$1g.container]: true,
@@ -13193,7 +13193,7 @@ const CSS$1f = {
     toggleSwitchText: "toggle--switch__text",
     valid: "valid",
 };
-const ICONS$g = {
+const ICONS$h = {
     menuOpen: "chevron-down",
     menuClosedLeft: "chevron-left",
     menuClosedRight: "chevron-right",
@@ -13281,7 +13281,7 @@ class BlockSection {
     // --------------------------------------------------------------------------
     renderStatusIcon() {
         const { status } = this;
-        const statusIcon = ICONS$g[status] ?? false;
+        const statusIcon = ICONS$h[status] ?? false;
         const statusIconClasses = {
             [CSS$1f.statusIcon]: true,
             [CSS$1f.valid]: status == "valid",
@@ -13293,10 +13293,10 @@ class BlockSection {
         const { el, messages, open, text, toggleDisplay } = this;
         const dir = getElementDir(el);
         const arrowIcon = open
-            ? ICONS$g.menuOpen
+            ? ICONS$h.menuOpen
             : dir === "rtl"
-                ? ICONS$g.menuClosedLeft
-                : ICONS$g.menuClosedRight;
+                ? ICONS$h.menuClosedLeft
+                : ICONS$h.menuClosedRight;
         const toggleLabel = open ? messages.collapse : messages.expand;
         const headerNode = toggleDisplay === "switch" ? (hAsync("div", { class: {
                 [CSS$1f.toggleSwitchContainer]: true,
@@ -14536,7 +14536,7 @@ const SLOTS$r = {
     navSecondary: "navigation-secondary",
     navTertiary: "navigation-tertiary",
 };
-const ICONS$f = {
+const ICONS$g = {
     hamburger: "hamburger",
 };
 
@@ -14651,7 +14651,7 @@ class CalciteNavigation {
     //
     //--------------------------------------------------------------------------
     renderMenuAction() {
-        return (hAsync("slot", { name: SLOTS$r.navigationAction, onSlotchange: this.handleMenuActionSlotChange }, this.navigationAction && (hAsync("calcite-action", { icon: ICONS$f.hamburger, onClick: this.actionClickHandler, text: this.label,
+        return (hAsync("slot", { name: SLOTS$r.navigationAction, onSlotchange: this.handleMenuActionSlotChange }, this.navigationAction && (hAsync("calcite-action", { icon: ICONS$g.hamburger, onClick: this.actionClickHandler, text: this.label,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: (el) => (this.navigationActionEl = el) }))));
     }
@@ -14859,32 +14859,43 @@ class CalciteNavigationUser {
 
 const CSS$19 = {
     container: "container",
+    contentWrapper: "content-wrapper",
     header: "header",
     footer: "footer",
-    title: "title",
-    subtitle: "subtitle",
+    heading: "heading",
+    description: "description",
     checkboxWrapper: "checkbox-wrapper",
+    checkboxWrapperDeprecated: "checkbox-wrapper-deprecated",
     thumbnailWrapper: "thumbnail-wrapper",
+    headerTextContainer: "header-text-container",
+    cardContent: "card-content",
+    hasSlottedContent: "has-slotted-content",
 };
 const SLOTS$q = {
     thumbnail: "thumbnail",
-    title: "title",
-    subtitle: "subtitle",
+    heading: "heading",
+    description: "description",
     footerStart: "footer-start",
     footerEnd: "footer-end",
+    title: "title",
+    subtitle: "subtitle",
+};
+const ICONS$f = {
+    selected: "check-square-f",
+    unselected: "square",
+    selectedSingle: "circle-f",
+    unselectedSingle: "circle",
 };
 
-const cardCss = "/*!@:host*/.sc-calcite-card-h{display:block;max-inline-size:100%}/*!@:host .calcite-card-container*/.sc-calcite-card-h .calcite-card-container.sc-calcite-card{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);border-radius:var(--calcite-border-radius-base)}/*!@.container*/.container.sc-calcite-card{position:relative;display:flex;flex:1 1 auto;flex-direction:column}/*!@:host([loading]) .calcite-card-container *:not(calcite-loader):not(.calcite-card-loader-container)*/[loading].sc-calcite-card-h .calcite-card-container.sc-calcite-card *.sc-calcite-card:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}/*!@:host([loading]) .calcite-card-loader-container*/[loading].sc-calcite-card-h .calcite-card-loader-container.sc-calcite-card{position:absolute;inset:0px;display:flex;align-items:center}/*!@.header,\n.footer*/.header.sc-calcite-card,.footer.sc-calcite-card{display:flex;padding-inline:0.75rem;padding-block:0.75rem 0.25rem}/*!@.header*/.header.sc-calcite-card{flex-direction:column}/*!@.footer*/.footer.sc-calcite-card{margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:0.75rem;padding-block:0.25rem 0.75rem}/*!@.card-content*/.card-content.sc-calcite-card{padding:0.75rem;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3)}/*!@:host([selected]) .calcite-card-container*/[selected].sc-calcite-card-h .calcite-card-container.sc-calcite-card{border-color:var(--calcite-color-brand)}/*!@slot[name=title]::slotted(*),\n*::slotted([slot=title])*/slot[name=title].sc-calcite-card-s>*,*.sc-calcite-card-s>[slot=title]{margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}/*!@:host([selectable]) .header*/[selectable].sc-calcite-card-h .header.sc-calcite-card{padding-inline-end:2rem}/*!@slot[name=subtitle]::slotted(*),\n*::slotted([slot=subtitle])*/slot[name=subtitle].sc-calcite-card-s>*,*.sc-calcite-card-s>[slot=subtitle]{margin:0px;margin-block-start:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}/*!@slot[name=thumbnail]::slotted(img),\nimg::slotted([slot=thumbnail])*/slot[name=thumbnail].sc-calcite-card-s>img,img.sc-calcite-card-s>[slot=thumbnail]{min-inline-size:100%;max-inline-size:100%}/*!@slot[name=footer-start]::slotted(*),\n*::slotted([slot=footer-start])*/slot[name=footer-start].sc-calcite-card-s>*,*.sc-calcite-card-s>[slot=footer-start]{align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;margin-inline-end:auto}/*!@slot[name=footer-end]::slotted(*),\n*::slotted([slot=footer-end])*/slot[name=footer-end].sc-calcite-card-s>*,*.sc-calcite-card-s>[slot=footer-end]{align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375}/*!@.checkbox-wrapper*/.checkbox-wrapper.sc-calcite-card{position:absolute;margin:0px;padding:0px;inset-block-start:0.5rem;inset-inline-end:0.5rem}/*!@.thumbnail-wrapper*/.thumbnail-wrapper.sc-calcite-card{display:flex}/*!@.calcite-card-container.inline*/.calcite-card-container.inline.sc-calcite-card{flex-direction:row}/*!@.calcite-card-container.inline > .container*/.calcite-card-container.inline.sc-calcite-card>.container.sc-calcite-card{inline-size:60%}/*!@.calcite-card-container.inline > .thumbnail-wrapper*/.calcite-card-container.inline.sc-calcite-card>.thumbnail-wrapper.sc-calcite-card{inline-size:40%;align-items:flex-start}/*!@.calcite-card-container.inline slot[name=thumbnail]::slotted(img),\n.calcite-card-container.inline img::slotted([slot=thumbnail])*/.calcite-card-container.inline slot[name=thumbnail].sc-calcite-card-s>img,.calcite-card-container.inline img.sc-calcite-card-s>[slot=thumbnail]{inline-size:100%}/*!@slot[name=footer-start]::slotted(*),\nslot[name=footer-end]::slotted(*)*/slot[name=footer-start].sc-calcite-card-s>*,slot[name=footer-end].sc-calcite-card-s>*{display:flex;gap:0.25rem}/*!@:host([hidden])*/[hidden].sc-calcite-card-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-card{display:none}";
+const cardCss = "/*!@:host([disabled])*/[disabled].sc-calcite-card-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-card-h *.sc-calcite-card,.sc-calcite-card-h[disabled].sc-calcite-card-s>*,.sc-calcite-card-h[disabled] .sc-calcite-card-s>*{pointer-events:none}/*!@:host*/.sc-calcite-card-h{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*/.content-wrapper.sc-calcite-card{position:relative;display:flex;block-size:100%;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);pointer-events:none}/*!@::slotted(*)*/.sc-calcite-card-s>*{pointer-events:auto}/*!@:host(:not([selectable])) .content-wrapper:not(.non-interactive)*/.sc-calcite-card-h:not([selectable]) .content-wrapper.sc-calcite-card:not(.non-interactive){outline-color:transparent}/*!@:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus*/.sc-calcite-card-h:not([selectable]) .content-wrapper.sc-calcite-card:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@.container*/.container.sc-calcite-card{position:relative;display:flex;flex:1 1 auto;flex-direction:column}/*!@:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container)*/[loading].sc-calcite-card-h .content-wrapper.sc-calcite-card *.sc-calcite-card:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}/*!@:host([loading]) .calcite-card-loader-container*/[loading].sc-calcite-card-h .calcite-card-loader-container.sc-calcite-card{position:absolute;inset:0px;display:flex;align-items:center}/*!@.header*/.header.sc-calcite-card{display:flex;flex-direction:row;align-items:flex-start}/*!@.footer*/.footer.sc-calcite-card{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-spacing-md);padding-block-start:var(--calcite-spacing-xxs);padding-block-end:var(--calcite-spacing-md)}/*!@.header-text-container*/.header-text-container.sc-calcite-card{display:flex;inline-size:100%;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem}/*!@.header-text-container:not(:only-child)*/.header-text-container.sc-calcite-card:not(:only-child){padding-inline-end:0.125rem}/*!@.footer*/.footer.sc-calcite-card{margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:0.75rem;padding-block:0.25rem 0.75rem}/*!@.card-content*/.card-content.sc-calcite-card{block-size:auto;font-size:var(--calcite-font-size--2);line-height:1.375}/*!@.has-slotted-content*/.has-slotted-content.sc-calcite-card{padding:0.75rem}/*!@:host([selected]) .content-wrapper*/[selected].sc-calcite-card-h .content-wrapper.sc-calcite-card{box-shadow:inset 0 -4px 0 0 var(--calcite-card-accent-color-selected)}/*!@:host([selectable]) .header*/[selectable].sc-calcite-card-h .header.sc-calcite-card{padding-inline-end:var(--calcite-spacing-xxxl)}/*!@slot[name=title]::slotted(*),\n*::slotted([slot=title])*/slot[name=title].sc-calcite-card-s>*,*.sc-calcite-card-s>[slot=title]{margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}/*!@slot[name=subtitle]::slotted(*),\n*::slotted([slot=subtitle])*/slot[name=subtitle].sc-calcite-card-s>*,*.sc-calcite-card-s>[slot=subtitle]{margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}/*!@slot[name=heading]::slotted(*),\n*::slotted([slot=heading])*/slot[name=heading].sc-calcite-card-s>*,*.sc-calcite-card-s>[slot=heading]{margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}/*!@slot[name=description]::slotted(*),\n*::slotted([slot=description])*/slot[name=description].sc-calcite-card-s>*,*.sc-calcite-card-s>[slot=description]{margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}/*!@slot[name=thumbnail]::slotted(img),\nimg::slotted([slot=thumbnail])*/slot[name=thumbnail].sc-calcite-card-s>img,img.sc-calcite-card-s>[slot=thumbnail]{min-inline-size:100%;max-inline-size:100%}/*!@slot[name=footer-start]::slotted(*),\n*::slotted([slot=footer-start])*/slot[name=footer-start].sc-calcite-card-s>*,*.sc-calcite-card-s>[slot=footer-start]{align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;margin-inline-end:auto;color:var(--calcite-color-text-3)}/*!@slot[name=footer-end]::slotted(*),\n*::slotted([slot=footer-end])*/slot[name=footer-end].sc-calcite-card-s>*,*.sc-calcite-card-s>[slot=footer-end]{align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3)}/*!@.checkbox-wrapper-deprecated*/.checkbox-wrapper-deprecated.sc-calcite-card{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0}/*!@.checkbox-wrapper*/.checkbox-wrapper.sc-calcite-card{pointer-events:auto;margin:0.5rem;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-ui-icon-color:var(--calcite-card-selection-icon-color)}/*!@.checkbox-wrapper:hover*/.checkbox-wrapper.sc-calcite-card:hover{background-color:var(--calcite-card-selection-background-color-hover);--calcite-ui-icon-color:var(--calcite-card-selection-icon-color-hover)}/*!@.checkbox-wrapper:active*/.checkbox-wrapper.sc-calcite-card:active{background-color:var(--calcite-card-selection-background-color-active)}/*!@.checkbox-wrapper calcite-icon*/.checkbox-wrapper.sc-calcite-card calcite-icon.sc-calcite-card{pointer-events:none}/*!@:host([selected]) .checkbox-wrapper*/[selected].sc-calcite-card-h .checkbox-wrapper.sc-calcite-card{--calcite-ui-icon-color:var(--calcite-card-selection-icon-color-selected);background-color:var(--calcite-card-selection-background-color-selected)}/*!@:host([selected]) .checkbox-wrapper:hover*/[selected].sc-calcite-card-h .checkbox-wrapper.sc-calcite-card:hover{background-color:var(--calcite-card-selection-background-color-hover)}/*!@:host([selected]) .checkbox-wrapper:active*/[selected].sc-calcite-card-h .checkbox-wrapper.sc-calcite-card:active{background-color:var(--calcite-card-selection-background-color-active)}/*!@:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper*/.sc-calcite-card-h:not([selectable]) .content-wrapper.sc-calcite-card:not(.non-interactive):focus .checkbox-wrapper.sc-calcite-card{background-color:var(--calcite-card-selection-background-color-hover);--calcite-ui-icon-color:var(--calcite-card-selection-icon-color-hover)}/*!@:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper*/[selected].sc-calcite-card-h:not([selectable]) .content-wrapper.sc-calcite-card:not(.non-interactive):focus .checkbox-wrapper.sc-calcite-card{background-color:var(--calcite-card-selection-background-color-active);--calcite-ui-icon-color:var(--calcite-card-selection-icon-color-selected)}/*!@.thumbnail-wrapper*/.thumbnail-wrapper.sc-calcite-card{display:flex}/*!@.content-wrapper.inline*/.content-wrapper.inline.sc-calcite-card{flex-direction:row}/*!@.content-wrapper.inline > .container*/.content-wrapper.inline.sc-calcite-card>.container.sc-calcite-card{inline-size:60%}/*!@.content-wrapper.inline > .thumbnail-wrapper*/.content-wrapper.inline.sc-calcite-card>.thumbnail-wrapper.sc-calcite-card{inline-size:40%;align-items:flex-start}/*!@.content-wrapper.inline slot[name=thumbnail]::slotted(img),\n.content-wrapper.inline img::slotted([slot=thumbnail])*/.content-wrapper.inline slot[name=thumbnail].sc-calcite-card-s>img,.content-wrapper.inline img.sc-calcite-card-s>[slot=thumbnail]{inline-size:100%}/*!@slot[name=footer-start]::slotted(*),\nslot[name=footer-end]::slotted(*)*/slot[name=footer-start].sc-calcite-card-s>*,slot[name=footer-end].sc-calcite-card-s>*{display:flex;gap:0.25rem}/*!@:host([hidden])*/[hidden].sc-calcite-card-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-card{display:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-card-h[disabled] .sc-calcite-card-s>[calcite-hydrated][disabled],[disabled].sc-calcite-card-h [calcite-hydrated][disabled].sc-calcite-card{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-card{display:contents}";
 
 /**
- * Cards do not include a grid or bounding container
- * - cards will expand to fit the width of their container
- */
-/**
- * @slot - A slot for adding subheader/description content.
- * @slot thumbnail - A slot for adding a thumbnail to the component.
- * @slot title - A slot for adding a title.
- * @slot subtitle - A slot for adding a subtitle or short summary.
+ * @slot - A slot for adding content.
+ * @slot title - [Deprecated] use `heading` instead. A slot for adding a heading.
+ * @slot subtitle - [Deprecated] use `description` instead. A slot for adding a description.
+ * @slot thumbnail - A slot for adding a thumbnail.
+ * @slot heading - A slot for adding a heading.
+ * @slot description - A slot for adding a description.
  * @slot footer-start - A slot for adding a leading footer.
  * @slot footer-end - A slot for adding a trailing footer.
  */
@@ -14892,77 +14903,141 @@ class Card {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.calciteCardSelect = createEvent(this, "calciteCardSelect", 6);
+        this.calciteInternalCardKeyEvent = createEvent(this, "calciteInternalCardKeyEvent", 6);
         //--------------------------------------------------------------------------
         //
         //  Private Methods
         //
         //--------------------------------------------------------------------------
-        this.cardSelectClick = () => {
-            this.selectCard();
+        this.handleDefaultSlotChange = (event) => {
+            this.hasContent = slotChangeHasAssignedElement(event);
         };
-        this.cardSelectKeyDown = (event) => {
+        this.keyDownHandler = (event) => {
+            if (event.target === this.containerEl && !this.selectable && !this.disabled) {
+                if (isActivationKey(event.key) && this.selectionMode !== "none") {
+                    this.calciteCardSelect.emit();
+                    event.preventDefault();
+                }
+                else {
+                    switch (event.key) {
+                        case "ArrowRight":
+                        case "ArrowLeft":
+                        case "Home":
+                        case "End":
+                            this.calciteInternalCardKeyEvent.emit(event);
+                            event.preventDefault();
+                            break;
+                    }
+                }
+            }
+        };
+        this.cardBodyClickHandler = (event) => {
+            const isFromScreenReader = event.target === this.containerEl;
+            if (isFromScreenReader && !this.selectable && !this.disabled && this.selectionMode !== "none") {
+                this.calciteCardSelect.emit();
+            }
+        };
+        this.cardSelectKeyDownDeprecated = (event) => {
             switch (event.key) {
                 case " ":
                 case "Enter":
-                    this.selectCard();
+                    this.selectCardDeprecated();
                     event.preventDefault();
                     break;
             }
         };
+        this.selectCardDeprecated = () => {
+            this.selected = !this.selected;
+            this.calciteCardSelect.emit();
+        };
+        this.cardSelectClick = (event) => {
+            if (!this.disabled) {
+                event.preventDefault();
+                this.calciteCardSelect.emit();
+                this.setFocus();
+            }
+        };
         this.loading = false;
-        this.selected = false;
-        this.selectable = false;
         this.thumbnailPosition = "block-start";
+        this.disabled = false;
+        this.label = undefined;
+        this.selectable = false;
+        this.selected = false;
         this.messages = undefined;
+        this.selectionMode = "none";
         this.messageOverrides = undefined;
         this.effectiveLocale = undefined;
         this.defaultMessages = undefined;
+        this.hasContent = false;
     }
     onMessagesChange() {
         /* wired up by t9n util */
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        if (!this.disabled) {
+            this.containerEl?.focus();
+        }
+    }
     // --------------------------------------------------------------------------
     //
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectConditionalSlotComponent(this);
+        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
     disconnectedCallback() {
-        disconnectConditionalSlotComponent(this);
+        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
     async componentWillLoad() {
+        setUpLoadableComponent(this);
         await setUpMessages(this);
     }
-    render() {
-        const thumbnailInline = this.thumbnailPosition.startsWith("inline");
-        const thumbnailStart = this.thumbnailPosition.endsWith("start");
-        return (hAsync("div", { class: { "calcite-card-container": true, inline: thumbnailInline } }, this.loading ? (hAsync("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, hAsync("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), hAsync("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS$19.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderHeader(), hAsync("div", { class: "card-content" }, hAsync("slot", null)), this.renderFooter()), !thumbnailStart && this.renderThumbnail()));
-    }
     effectiveLocaleChange() {
         updateMessages(this);
     }
-    selectCard() {
-        this.selected = !this.selected;
-        this.calciteCardSelect.emit();
+    renderCheckboxDeprecated() {
+        return (hAsync("calcite-label", { class: CSS$19.checkboxWrapperDeprecated }, hAsync("calcite-checkbox", { checked: this.selected, label: this.messages.select, onClick: this.selectCardDeprecated, onKeyDown: this.cardSelectKeyDownDeprecated })));
     }
     renderThumbnail() {
         return getSlotted(this.el, SLOTS$q.thumbnail) ? (hAsync("section", { class: CSS$19.thumbnailWrapper }, hAsync("slot", { name: SLOTS$q.thumbnail }))) : null;
     }
-    renderCheckbox() {
-        return (hAsync("calcite-label", { class: CSS$19.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, hAsync("calcite-checkbox", { checked: this.selected, label: this.messages.select })));
+    renderSelectionIcon() {
+        const icon = this.selectionMode === "multiple" && this.selected
+            ? ICONS$f.selected
+            : this.selectionMode === "multiple"
+                ? ICONS$f.unselected
+                : this.selected
+                    ? ICONS$f.selectedSingle
+                    : ICONS$f.unselectedSingle;
+        return (hAsync("div", { class: CSS$19.checkboxWrapper, onPointerDown: this.cardSelectClick, tabIndex: -1 }, hAsync("calcite-icon", { icon: icon, scale: "s" })));
     }
     renderHeader() {
         const { el } = this;
-        const title = getSlotted(el, SLOTS$q.title);
+        const heading = getSlotted(el, SLOTS$q.heading);
+        const description = getSlotted(el, SLOTS$q.description);
+        const hasHeader = heading || description;
         const subtitle = getSlotted(el, SLOTS$q.subtitle);
-        const hasHeader = title || subtitle;
-        return hasHeader ? (hAsync("header", { class: CSS$19.header }, hAsync("slot", { name: SLOTS$q.title }), hAsync("slot", { name: SLOTS$q.subtitle }))) : null;
+        const title = getSlotted(el, SLOTS$q.title);
+        const hasDeprecatedHeader = subtitle || title;
+        return hasHeader || hasDeprecatedHeader ? (hAsync("header", { class: CSS$19.header }, this.selectable ? this.renderCheckboxDeprecated() : null, hAsync("div", { class: CSS$19.headerTextContainer }, hAsync("slot", { key: "heading-slot", name: SLOTS$q.heading }), hAsync("slot", { key: "description-slot", name: SLOTS$q.description }), hAsync("slot", { key: "deprecated-title-slot", name: SLOTS$q.title }), hAsync("slot", { key: "deprecated-subtitle-slot", name: SLOTS$q.subtitle })), this.selectionMode !== "none" && this.renderSelectionIcon())) : null;
     }
     renderFooter() {
         const { el } = this;
@@ -14971,6 +15046,21 @@ class Card {
         const hasFooter = startFooter || endFooter;
         return hasFooter ? (hAsync("footer", { class: CSS$19.footer }, hAsync("slot", { name: SLOTS$q.footerStart }), hAsync("slot", { name: SLOTS$q.footerEnd }))) : null;
     }
+    render() {
+        const thumbnailInline = this.thumbnailPosition.startsWith("inline");
+        const thumbnailStart = this.thumbnailPosition.endsWith("start");
+        const role = this.selectionMode === "multiple"
+            ? "checkbox"
+            : this.selectionMode !== "none"
+                ? "radio"
+                : undefined;
+        return (hAsync(Host, null, hAsync(InteractiveContainer, { disabled: this.disabled }, hAsync("div", { "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS$19.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1,
+            // eslint-disable-next-line react/jsx-sort-props
+            ref: (el) => (this.containerEl = el) }, this.loading ? (hAsync("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, hAsync("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), hAsync("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS$19.container]: true } }, this.renderHeader(), hAsync("div", { class: {
+                [CSS$19.cardContent]: true,
+                [CSS$19.hasSlottedContent]: this.hasContent,
+            } }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
+    }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14983,17 +15073,189 @@ class Card {
         "$tagName$": "calcite-card",
         "$members$": {
             "loading": [516],
-            "selected": [1540],
-            "selectable": [516],
             "thumbnailPosition": [513, "thumbnail-position"],
+            "disabled": [516],
+            "label": [1],
+            "selectable": [516],
+            "selected": [1540],
             "messages": [1040],
+            "selectionMode": [1, "selection-mode"],
             "messageOverrides": [1040],
             "effectiveLocale": [32],
-            "defaultMessages": [32]
+            "defaultMessages": [32],
+            "hasContent": [32],
+            "setFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["loading", "loading"], ["selected", "selected"], ["selectable", "selectable"], ["thumbnailPosition", "thumbnail-position"]]
+        "$attrsToReflect$": [["loading", "loading"], ["thumbnailPosition", "thumbnail-position"], ["disabled", "disabled"], ["selectable", "selectable"], ["selected", "selected"]]
+    }; }
+}
+
+const cardGroupCss = "/*!@:host([disabled])*/[disabled].sc-calcite-card-group-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-card-group-h *.sc-calcite-card-group,.sc-calcite-card-group-h[disabled].sc-calcite-card-group-s>*,.sc-calcite-card-group-h[disabled] .sc-calcite-card-group-s>*{pointer-events:none}/*!@:host*/.sc-calcite-card-group-h{--calcite-card-group-gap:var(--calcite-size-md);display:block}/*!@.container*/.container.sc-calcite-card-group{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-gap)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-card-group-h[disabled] .sc-calcite-card-group-s>[calcite-hydrated][disabled],[disabled].sc-calcite-card-group-h [calcite-hydrated][disabled].sc-calcite-card-group{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-card-group{display:contents}/*!@:host([hidden])*/[hidden].sc-calcite-card-group-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-card-group{display:none}";
+
+/**
+ * @slot - A slot for adding one or more `calcite-card`s.
+ */
+class CardGroup {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteCardGroupSelect = createEvent(this, "calciteCardGroupSelect", 6);
+        //--------------------------------------------------------------------------
+        //
+        //  Private Properties
+        //
+        //--------------------------------------------------------------------------
+        this.items = [];
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.udpateItemsOnSelectionModeChange = () => {
+            this.updateSlottedItems(this.slotRefEl);
+            this.updateSelectedItems();
+        };
+        this.updateItemsOnSlotChange = (event) => {
+            this.updateSlottedItems(event.target);
+            this.updateSelectedItems();
+        };
+        this.updateSlottedItems = (target) => {
+            this.items = target
+                .assignedElements({ flatten: true })
+                .filter((el) => el?.matches("calcite-card"));
+        };
+        this.updateSelectedItems = () => {
+            this.items.forEach((el) => {
+                el.selectionMode = this.selectionMode;
+            });
+            this.setSelectedItems(false);
+        };
+        this.setSelectedItems = (emit, elToMatch) => {
+            if (elToMatch) {
+                this.items.forEach((el) => {
+                    const matchingEl = elToMatch === el;
+                    switch (this.selectionMode) {
+                        case "multiple":
+                            if (matchingEl) {
+                                el.selected = !el.selected;
+                            }
+                            break;
+                        case "single":
+                            el.selected = matchingEl ? !el.selected : false;
+                            break;
+                        case "single-persist":
+                            el.selected = !!matchingEl;
+                            break;
+                    }
+                });
+            }
+            this.selectedItems = this.items.filter((el) => el.selected);
+            if (emit && this.selectionMode !== "none" && !this.disabled) {
+                this.calciteCardGroupSelect.emit();
+            }
+        };
+        this.disabled = false;
+        this.label = undefined;
+        this.scale = "m";
+        this.selectionMode = "none";
+        this.selectedItems = [];
+    }
+    onSelectionModeChange() {
+        this.udpateItemsOnSelectionModeChange();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        connectInteractive(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    disconnectedCallback() {
+        disconnectInteractive(this);
+    }
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    calciteInternalCardKeyEventListener(event) {
+        if (event.composedPath().includes(this.el)) {
+            const interactiveItems = this.items.filter((el) => !el.disabled);
+            switch (event.detail["key"]) {
+                case "ArrowRight":
+                    focusElementInGroup(interactiveItems, event.target, "next");
+                    break;
+                case "ArrowLeft":
+                    focusElementInGroup(interactiveItems, event.target, "previous");
+                    break;
+                case "Home":
+                    focusElementInGroup(interactiveItems, event.target, "first");
+                    break;
+                case "End":
+                    focusElementInGroup(interactiveItems, event.target, "last");
+                    break;
+            }
+        }
+    }
+    calciteCardSelectListener(event) {
+        if (event.composedPath().includes(this.el) &&
+            !event.target.selectable) {
+            this.setSelectedItems(true, event.target);
+        }
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Sets focus on the component's first focusable element.
+     */
+    async setFocus() {
+        await componentLoaded(this);
+        if (!this.disabled) {
+            focusElement(this.items[0]);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    //--------------------------------------------------------------------------
+    render() {
+        const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
+        return (hAsync(Host, null, hAsync(InteractiveContainer, { disabled: this.disabled }, hAsync("div", { "aria-disabled": toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, hAsync("slot", { onSlotchange: this.updateItemsOnSlotChange, ref: (el) => (this.slotRefEl = el) })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selectionMode": ["onSelectionModeChange"]
+    }; }
+    static get style() { return cardGroupCss; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "calcite-card-group",
+        "$members$": {
+            "disabled": [516],
+            "label": [1],
+            "scale": [513],
+            "selectionMode": [513, "selection-mode"],
+            "selectedItems": [1040],
+            "setFocus": [64]
+        },
+        "$listeners$": [[0, "calciteInternalCardKeyEvent", "calciteInternalCardKeyEventListener"], [0, "calciteCardSelect", "calciteCardSelectListener"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["disabled", "disabled"], ["scale", "scale"], ["selectionMode", "selection-mode"]]
     }; }
 }
 
@@ -20938,7 +21200,7 @@ function XButton({ disabled, key, label, onClick, ref, scale, }) {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Feb 2024 21:43:02 GMT
+ * Generated on Tue, 27 Feb 2024 18:03:42 GMT
  */
 const calciteSize48 = "48px";
 
@@ -36997,7 +37259,7 @@ const ICONS$6 = {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Feb 2024 21:43:03 GMT
+ * Generated on Tue, 27 Feb 2024 18:03:44 GMT
  */
 const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
 const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices
@@ -48298,6 +48560,7 @@ registerComponents([
   CalciteNavigationLogo,
   CalciteNavigationUser,
   Card,
+  CardGroup,
   Checkbox,
   Chip,
   ChipGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.6.0-next.2",
+  "version": "2.6.0-next.3",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
@@ -88,5 +88,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "4afde154d9a3d64c5bd31103f17db1e5e6120d8f"
+  "gitHead": "e84ed32db264132a0615e46b600d7208d69c6438"
 }