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

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

@@ -1,50 +1,110 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Feb 2024 21:43:02 GMT
+ * Generated on Tue, 27 Feb 2024 18:03:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 26 Feb 2024 21:43:02 GMT
+ * Generated on Tue, 27 Feb 2024 18:03:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 26 Feb 2024 21:43:02 GMT
+ * Generated on Tue, 27 Feb 2024 18:03:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 26 Feb 2024 21:43:02 GMT
+ * Generated on Tue, 27 Feb 2024 18:03:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 26 Feb 2024 21:43:00 GMT
+ * Generated on Tue, 27 Feb 2024 18:03:40 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */
+:host([disabled]) {
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-opacity-disabled);
+}
+
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-card-background-color: Specifies the background color of the component.
+* @prop --calcite-card-border-color: Specifies the border color of the component.
+* @prop --calcite-card-shadow: Specifies the shadow of the component.
+* @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
+* @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
+* @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element.
+* @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.
+* @prop --calcite-card-selection-background-color-active: Specifies the background color of the component's selection element when active.
+* @prop --calcite-card-selection-background-color-selected: Specifies the icon color of the component's selection element when `selected`.
+* @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
+* @prop --calcite-card-selection-icon-color-hover: Specifies the icon color of the component's selection element when hovered.
+* @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`.
+*
+*/
 :host {
   display: block;
   max-inline-size: 100%;
+  --calcite-card-corner-radius: var(--calcite-corner-radius-sharp);
+  --calcite-card-background-color: var(--calcite-color-foreground-1);
+  --calcite-card-border-color: var(--calcite-color-border-3);
+  --calcite-card-shadow: var(--calcite-shadow-none);
+  --calcite-card-accent-color-selected: var(--calcite-color-brand);
+  --calcite-card-selection-background-color: transparent;
+  --calcite-card-selection-background-color-hover: var(--calcite-color-transparent-hover);
+  --calcite-card-selection-background-color-active: var(--calcite-color-transparent-press);
+  --calcite-card-selection-background-color-selected: transparent;
+  --calcite-card-selection-icon-color: var(--calcite-color-text-3);
+  --calcite-card-selection-icon-color-hover: var(--calcite-color-text-2);
+  --calcite-card-selection-icon-color-selected: var(--calcite-color-brand);
 }
-:host .calcite-card-container {
+
+.content-wrapper {
   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);
+  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(*) {
+  pointer-events: auto;
+}
+
+:host(:not([selectable])) .content-wrapper:not(.non-interactive) {
+  outline-color: transparent;
+}
+:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus {
+  outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));
+  outline-offset: calc(
+            2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-offset-invert-focus),
+                1
+              )
+            )
+          );
 }
 
 .container {
@@ -54,7 +114,7 @@
   flex-direction: column;
 }
 
-:host([loading]) .calcite-card-container *:not(calcite-loader):not(.calcite-card-loader-container) {
+:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container) {
   pointer-events: none;
   opacity: 0;
 }
@@ -66,15 +126,33 @@
   align-items: center;
 }
 
-.header,
+.header {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
 .footer {
+  margin-block-start: auto;
   display: flex;
-  padding-inline: 0.75rem;
-  padding-block: 0.75rem 0.25rem;
+  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 {
+.header-text-container {
+  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) {
+  padding-inline-end: 0.125rem;
 }
 
 .footer {
@@ -87,14 +165,21 @@
 }
 
 .card-content {
-  padding: 0.75rem;
+  block-size: auto;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
-  color: var(--calcite-color-text-3);
 }
 
-:host([selected]) .calcite-card-container {
-  border-color: var(--calcite-color-brand);
+.has-slotted-content {
+  padding: 0.75rem;
+}
+
+:host([selected]) .content-wrapper {
+  box-shadow: inset 0 -4px 0 0 var(--calcite-card-accent-color-selected);
+}
+
+:host([selectable]) .header {
+  padding-inline-end: var(--calcite-spacing-xxxl);
 }
 
 slot[name=title]::slotted(*),
@@ -106,14 +191,29 @@ slot[name=title]::slotted(*),
   color: var(--calcite-color-text-1);
 }
 
-:host([selectable]) .header {
-  padding-inline-end: 2rem;
-}
-
 slot[name=subtitle]::slotted(*),
 *::slotted([slot=subtitle]) {
   margin: 0px;
-  margin-block-start: 0.5rem;
+  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(*),
+*::slotted([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(*),
+*::slotted([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);
@@ -132,6 +232,7 @@ slot[name=footer-start]::slotted(*),
   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(*),
@@ -139,32 +240,78 @@ slot[name=footer-end]::slotted(*),
   align-self: center;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
+  color: var(--calcite-color-text-3);
 }
 
-.checkbox-wrapper {
+.checkbox-wrapper-deprecated {
+  pointer-events: auto;
   position: absolute;
-  margin: 0px;
-  padding: 0px;
-  inset-block-start: 0.5rem;
-  inset-inline-end: 0.5rem;
+  inset-block-start: var(--calcite-spacing-sm);
+  inset-inline-end: var(--calcite-spacing-sm);
+  margin: 0;
+  padding: 0;
+}
+
+.checkbox-wrapper {
+  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 {
+  background-color: var(--calcite-card-selection-background-color-hover);
+  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover);
+}
+.checkbox-wrapper:active {
+  background-color: var(--calcite-card-selection-background-color-active);
+}
+.checkbox-wrapper calcite-icon {
+  pointer-events: none;
+}
+
+:host([selected]) .checkbox-wrapper {
+  --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 {
+  background-color: var(--calcite-card-selection-background-color-hover);
+}
+:host([selected]) .checkbox-wrapper:active {
+  background-color: var(--calcite-card-selection-background-color-active);
+}
+
+:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {
+  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 {
+  background-color: var(--calcite-card-selection-background-color-active);
+  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected);
 }
 
 .thumbnail-wrapper {
   display: flex;
 }
 
-.calcite-card-container.inline {
+.content-wrapper.inline {
   flex-direction: row;
 }
-.calcite-card-container.inline > .container {
+.content-wrapper.inline > .container {
   inline-size: 60%;
 }
-.calcite-card-container.inline > .thumbnail-wrapper {
+.content-wrapper.inline > .thumbnail-wrapper {
   inline-size: 40%;
   align-items: flex-start;
 }
-.calcite-card-container.inline slot[name=thumbnail]::slotted(img),
-.calcite-card-container.inline img::slotted([slot=thumbnail]) {
+.content-wrapper.inline slot[name=thumbnail]::slotted(img),
+.content-wrapper.inline img::slotted([slot=thumbnail]) {
   inline-size: 100%;
 }
 
@@ -180,4 +327,14 @@ slot[name=footer-end]::slotted(*) {
 
 [hidden] {
   display: none;
+}
+
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
+.interaction-container {
+  display: contents;
 }

package/dist/collection/components/card/card.e2e.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
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, renders, slots, hidden, t9n } from "../../tests/commonTests";
@@ -22,64 +22,52 @@ describe("calcite-card", () => {
     describe("accessible", () => {
         accessible("calcite-card");
     });
-    describe("accessible when selectable", () => {
-        accessible(html `<calcite-card selectable>
+    describe("accessible when selectable (deprecated)", () => {
+        accessible(html `<calcite-card label="example-label" selectable>
         <img slot="thumbnail" src="${placeholder}" alt="Test image" />
       </calcite-card>`);
     });
     describe("slots", () => {
-        slots("calcite-card", SLOTS);
+        slots("calcite-card", SLOTS, true);
     });
     it("renders with default props if none are provided", async () => {
         const page = await newE2EPage();
         await page.setContent(`
-      <calcite-card>
+      <calcite-card label="example-label">
         <img slot="thumbnail" src="${placeholder}" alt="Test image" />
       </calcite-card>`);
         const element = await page.find("calcite-card");
         expect(element).not.toHaveAttribute("disabled");
         expect(element).not.toHaveAttribute("loading");
-        expect(element).not.toHaveAttribute("selectable");
         expect(element).not.toHaveAttribute("selected");
     });
     it("renders with requested props", async () => {
         const page = await newE2EPage();
         await page.setContent(`
-      <calcite-card loading selectable selected disabled>
+      <calcite-card label="example-label" loading selected disabled>
         <img slot="thumbnail" src="${placeholder}" alt="Test image" />
       </calcite-card>`);
         const element = await page.find("calcite-card");
         expect(element).toHaveAttribute("disabled");
         expect(element).toHaveAttribute("loading");
-        expect(element).toHaveAttribute("selectable");
         expect(element).toHaveAttribute("selected");
     });
     it("should have a thumbnail container", async () => {
         const page = await newE2EPage();
         await page.setContent(`
-      <calcite-card>
+      <calcite-card label="example-label">
         <img slot="thumbnail" src="${placeholder}" alt="Test image" />
       </calcite-card>
     `);
         const thumbContainer = await page.find(`calcite-card >>> .${CSS.thumbnailWrapper}`);
         expect(thumbContainer).not.toBeNull();
     });
-    it("should render a checkbox if selectable", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <calcite-card selectable>
-      <img slot="thumbnail" src="${placeholder}" alt="Test image" />
-      </calcite-card>
-    `);
-        const thumbContainer = await page.find(`calcite-card >>> .${CSS.checkboxWrapper}`);
-        expect(thumbContainer).not.toBeNull();
-    });
-    describe("when a card is selectable", () => {
+    describe("when a card is selectable (deprecated)", () => {
         it("should update the card's selected state when its checkbox is clicked", async () => {
             const page = await newE2EPage();
             await page.setContent(`
       <div style="width:260px">
-        <calcite-card selectable>
+        <calcite-card label="example-label" selectable>
           <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
           <span slot="subtitle">
             A great example of a study description that might wrap to a line or two, but isn't overly verbose.
@@ -88,7 +76,7 @@ describe("calcite-card", () => {
       </div>
       `);
             const card = await page.find("calcite-card");
-            const checkbox = await page.find(`calcite-card >>> .${CSS.checkboxWrapper} calcite-checkbox`);
+            const checkbox = await page.find(`calcite-card >>> .${CSS.checkboxWrapperDeprecated} calcite-checkbox`);
             const cardSelectSpy = await card.spyOnEvent("calciteCardSelect");
             const clickSpy = await card.spyOnEvent("calciteCardSelect");
             await checkbox.click();
@@ -105,7 +93,7 @@ describe("calcite-card", () => {
     it("should have aria-live attribute set to polite on loader container when loading", async () => {
         const page = await newE2EPage();
         await page.setContent(`
-      <calcite-card selectable loading>
+      <calcite-card label="example-label" selectable loading>
       <img slot="thumbnail" src="${placeholder}" alt="Test image" />
       </calcite-card>
     `);

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

@@ -1 +1 @@
-{"version":3,"file":"card.e2e.js","sourceRoot":"","sources":["../../../../src/components/card/card.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\nimport { accessible, renders, slots, hidden, t9n } from \"../../tests/commonTests\";\nimport { placeholderImage } from \"../../../.storybook/placeholderImage\";\nimport { CSS, SLOTS } from \"./resources\";\nimport { html } from \"../../../support/formatting\";\n\nconst placeholder = placeholderImage({\n  width: 350,\n  height: 150,\n});\n\ndescribe(\"calcite-card\", () => {\n  describe(\"renders\", () => {\n    renders(\"calcite-card\", { display: \"block\" });\n  });\n\n  describe(\"honors hidden attribute\", () => {\n    hidden(\"calcite-card\");\n  });\n\n  describe(\"accessible\", () => {\n    accessible(\"calcite-card\");\n  });\n\n  describe(\"accessible when selectable\", () => {\n    accessible(\n      html`<calcite-card selectable>\n        <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>`,\n    );\n  });\n\n  describe(\"slots\", () => {\n    slots(\"calcite-card\", SLOTS);\n  });\n\n  it(\"renders with default props if none are provided\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n      <calcite-card>\n        <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>`);\n\n    const element = await page.find(\"calcite-card\");\n    expect(element).not.toHaveAttribute(\"disabled\");\n    expect(element).not.toHaveAttribute(\"loading\");\n    expect(element).not.toHaveAttribute(\"selectable\");\n    expect(element).not.toHaveAttribute(\"selected\");\n  });\n\n  it(\"renders with requested props\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n      <calcite-card loading selectable selected disabled>\n        <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>`);\n\n    const element = await page.find(\"calcite-card\");\n    expect(element).toHaveAttribute(\"disabled\");\n    expect(element).toHaveAttribute(\"loading\");\n    expect(element).toHaveAttribute(\"selectable\");\n    expect(element).toHaveAttribute(\"selected\");\n  });\n\n  it(\"should have a thumbnail container\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n      <calcite-card>\n        <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>\n    `);\n\n    const thumbContainer = await page.find(`calcite-card >>> .${CSS.thumbnailWrapper}`);\n\n    expect(thumbContainer).not.toBeNull();\n  });\n\n  it(\"should render a checkbox if selectable\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n      <calcite-card selectable>\n      <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>\n    `);\n\n    const thumbContainer = await page.find(`calcite-card >>> .${CSS.checkboxWrapper}`);\n\n    expect(thumbContainer).not.toBeNull();\n  });\n\n  describe(\"when a card is selectable\", () => {\n    it(\"should update the card's selected state when its checkbox is clicked\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(`\n      <div style=\"width:260px\">\n        <calcite-card selectable>\n          <h3 slot=\"title\">ArcGIS Online: Gallery and Organization pages</h3>\n          <span slot=\"subtitle\">\n            A great example of a study description that might wrap to a line or two, but isn't overly verbose.\n          </span>\n        </calcite-card>\n      </div>\n      `);\n      const card = await page.find(\"calcite-card\");\n      const checkbox = await page.find(`calcite-card >>> .${CSS.checkboxWrapper} calcite-checkbox`);\n      const cardSelectSpy = await card.spyOnEvent(\"calciteCardSelect\");\n      const clickSpy = await card.spyOnEvent(\"calciteCardSelect\");\n      await checkbox.click();\n      await page.waitForChanges();\n\n      expect(cardSelectSpy).toHaveReceivedEventTimes(1);\n      expect(clickSpy).toHaveReceivedEventTimes(1);\n      expect(await checkbox.getProperty(\"checked\")).toBe(true);\n      expect(await card.getProperty(\"selected\")).toBe(true);\n    });\n  });\n\n  describe(\"translation support\", () => {\n    t9n(\"calcite-card\");\n  });\n\n  it(\"should have aria-live attribute set to polite on loader container when loading\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n      <calcite-card selectable loading>\n      <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>\n    `);\n\n    const loaderContainer = await page.find(\"calcite-card >>> .calcite-card-loader-container\");\n    expect(loaderContainer.getAttribute(\"aria-live\")).toBe(\"polite\");\n  });\n});\n"]}
+{"version":3,"file":"card.e2e.js","sourceRoot":"","sources":["../../../../src/components/card/card.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\nimport { accessible, renders, slots, hidden, t9n } from \"../../tests/commonTests\";\nimport { placeholderImage } from \"../../../.storybook/placeholderImage\";\nimport { CSS, SLOTS } from \"./resources\";\nimport { html } from \"../../../support/formatting\";\n\nconst placeholder = placeholderImage({\n  width: 350,\n  height: 150,\n});\n\ndescribe(\"calcite-card\", () => {\n  describe(\"renders\", () => {\n    renders(\"calcite-card\", { display: \"block\" });\n  });\n\n  describe(\"honors hidden attribute\", () => {\n    hidden(\"calcite-card\");\n  });\n\n  describe(\"accessible\", () => {\n    accessible(\"calcite-card\");\n  });\n\n  describe(\"accessible when selectable (deprecated)\", () => {\n    accessible(\n      html`<calcite-card label=\"example-label\" selectable>\n        <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>`,\n    );\n  });\n\n  describe(\"slots\", () => {\n    slots(\"calcite-card\", SLOTS, true);\n  });\n\n  it(\"renders with default props if none are provided\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n      <calcite-card label=\"example-label\">\n        <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>`);\n\n    const element = await page.find(\"calcite-card\");\n    expect(element).not.toHaveAttribute(\"disabled\");\n    expect(element).not.toHaveAttribute(\"loading\");\n    expect(element).not.toHaveAttribute(\"selected\");\n  });\n\n  it(\"renders with requested props\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n      <calcite-card label=\"example-label\" loading selected disabled>\n        <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>`);\n\n    const element = await page.find(\"calcite-card\");\n    expect(element).toHaveAttribute(\"disabled\");\n    expect(element).toHaveAttribute(\"loading\");\n    expect(element).toHaveAttribute(\"selected\");\n  });\n\n  it(\"should have a thumbnail container\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n      <calcite-card label=\"example-label\">\n        <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>\n    `);\n\n    const thumbContainer = await page.find(`calcite-card >>> .${CSS.thumbnailWrapper}`);\n\n    expect(thumbContainer).not.toBeNull();\n  });\n\n  describe(\"when a card is selectable (deprecated)\", () => {\n    it(\"should update the card's selected state when its checkbox is clicked\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(`\n      <div style=\"width:260px\">\n        <calcite-card label=\"example-label\" selectable>\n          <h3 slot=\"title\">ArcGIS Online: Gallery and Organization pages</h3>\n          <span slot=\"subtitle\">\n            A great example of a study description that might wrap to a line or two, but isn't overly verbose.\n          </span>\n        </calcite-card>\n      </div>\n      `);\n      const card = await page.find(\"calcite-card\");\n      const checkbox = await page.find(`calcite-card >>> .${CSS.checkboxWrapperDeprecated} calcite-checkbox`);\n      const cardSelectSpy = await card.spyOnEvent(\"calciteCardSelect\");\n      const clickSpy = await card.spyOnEvent(\"calciteCardSelect\");\n\n      await checkbox.click();\n      await page.waitForChanges();\n\n      expect(cardSelectSpy).toHaveReceivedEventTimes(1);\n      expect(clickSpy).toHaveReceivedEventTimes(1);\n      expect(await checkbox.getProperty(\"checked\")).toBe(true);\n      expect(await card.getProperty(\"selected\")).toBe(true);\n    });\n  });\n\n  describe(\"translation support\", () => {\n    t9n(\"calcite-card\");\n  });\n\n  it(\"should have aria-live attribute set to polite on loader container when loading\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n      <calcite-card label=\"example-label\" selectable loading>\n      <img slot=\"thumbnail\" src=\"${placeholder}\" alt=\"Test image\" />\n      </calcite-card>\n    `);\n\n    const loaderContainer = await page.find(\"calcite-card >>> .calcite-card-loader-container\");\n    expect(loaderContainer.getAttribute(\"aria-live\")).toBe(\"polite\");\n  });\n});\n"]}