From 7f23ee7459f59f9e05a86fed7186911f32506087 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 18 Feb 2025 13:51:38 -0800
Subject: [PATCH 1/5] deprecated(block): deprecate open/close props in favor of
 expanded/collapsed

---
 .../src/components/block/block.e2e.ts         | 42 +++++++++++--------
 .../src/components/block/block.scss           |  4 +-
 .../src/components/block/block.tsx            | 37 ++++++++++++----
 3 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index 80b18ff5eee..bcffc325fc1 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -48,6 +48,10 @@ describe("calcite-block", () => {
         propertyName: "open",
         defaultValue: false,
       },
+      {
+        propertyName: "expanded",
+        defaultValue: false,
+      },
       {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
@@ -81,6 +85,10 @@ describe("calcite-block", () => {
         propertyName: "open",
         value: true,
       },
+      {
+        propertyName: "expanded",
+        value: true,
+      },
       {
         propertyName: "overlayPositioning",
         value: "fixed",
@@ -110,7 +118,7 @@ describe("calcite-block", () => {
 
   describe("accessible", () => {
     accessible(html`
-      <calcite-block heading="heading" description="description" open collapsible>
+      <calcite-block heading="heading" description="description" expanded collapsible>
         <div slot=${SLOTS.icon}>✅</div>
         <div>content</div>
         <label slot=${SLOTS.control}>test <input placeholder="control" /></label>
@@ -121,8 +129,8 @@ describe("calcite-block", () => {
   describe("setFocus", () => {
     describe("focuses block heading toggle", () => {
       focusable(
-        html`<calcite-block heading="Heading" description="summary" collapsible open>
-          <calcite-block-section text="input block-section" open>
+        html`<calcite-block heading="Heading" description="summary" collapsible expanded>
+          <calcite-block-section text="input block-section" expanded>
             <calcite-input
               icon="form-field"
               placeholder="This is an input field... enter something here"
@@ -138,8 +146,8 @@ describe("calcite-block", () => {
     const blockSectionClass = "my-block-section";
     describe("focuses block section", () => {
       focusable(
-        html`<calcite-block heading="Heading" description="summary" open>
-          <calcite-block-section class="${blockSectionClass}" text="input block-section" open>
+        html`<calcite-block heading="Heading" description="summary" expanded>
+          <calcite-block-section class="${blockSectionClass}" text="input block-section" expanded>
             <calcite-input
               icon="form-field"
               placeholder="This is an input field... enter something here"
@@ -178,7 +186,7 @@ describe("calcite-block", () => {
   it("has a loading state", async () => {
     const page = await newE2EPage({
       html: `
-        <calcite-block heading="heading" description="description" open collapsible>
+        <calcite-block heading="heading" description="description" expanded collapsible>
           <div class="content">content</div>
         </calcite-block>
     `,
@@ -212,14 +220,14 @@ describe("calcite-block", () => {
 
     const element = await page.find("calcite-block");
     const content = await page.find(`calcite-block >>> #${IDS.content}`);
-    expect(await element.getProperty("open")).toBe(false);
+    expect(await element.getProperty("expanded")).toBe(false);
     expect(await content.isVisible()).toBe(false);
 
-    element.setProperty("open", true);
+    element.setProperty("expanded", true);
     await page.waitForChanges();
     expect(await content.isVisible()).toBe(true);
 
-    element.setProperty("open", false);
+    element.setProperty("expanded", false);
     await page.waitForChanges();
 
     expect(await content.isVisible()).toBe(false);
@@ -246,7 +254,7 @@ describe("calcite-block", () => {
 
     expect(toggleSpy).toHaveReceivedEventTimes(1);
     expect(openSpy).toHaveReceivedEventTimes(1);
-    expect(await element.getProperty("open")).toBe(true);
+    expect(await element.getProperty("expanded")).toBe(true);
     expect(toggle.getAttribute("aria-expanded")).toBe("true");
     expect(toggle.getAttribute("title")).toBe(messages.collapse);
 
@@ -254,7 +262,7 @@ describe("calcite-block", () => {
 
     expect(toggleSpy).toHaveReceivedEventTimes(2);
     expect(closeSpy).toHaveReceivedEventTimes(1);
-    expect(await element.getProperty("open")).toBe(false);
+    expect(await element.getProperty("expanded")).toBe(false);
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
     expect(toggle.getAttribute("title")).toBe(messages.expand);
   });
@@ -333,7 +341,7 @@ describe("calcite-block", () => {
       expect(statusIcon).not.toBeNull();
     });
 
-    it("displays a loading icon  when `loading` is set to true and `open` is set to false", async () => {
+    it("displays a loading icon  when `loading` is set to true and `expanded` is set to false", async () => {
       const headerIcon = "header-icon";
       const page = await newE2EPage();
       await page.setContent(
@@ -399,7 +407,7 @@ describe("calcite-block", () => {
           --calcite-block-padding: ${overrideStyle}
         }
       </style>
-      <calcite-block heading="test-heading" collapsible style="--calcite-block-padding: ${overrideStyle}" open>
+      <calcite-block heading="test-heading" collapsible style="--calcite-block-padding: ${overrideStyle}" expanded>
         <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
        </calcite-block>`,
     );
@@ -413,7 +421,7 @@ describe("calcite-block", () => {
     const overrideStyle = "0px";
     const page = await newE2EPage();
     await page.setContent(
-      `<calcite-block heading="test-heading" collapsible style="--calcite-block-padding: ${overrideStyle}" open>
+      `<calcite-block heading="test-heading" collapsible style="--calcite-block-padding: ${overrideStyle}" expanded>
           <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
         </calcite-block>`,
     );
@@ -427,8 +435,8 @@ describe("calcite-block", () => {
     const label = "Spatial";
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-block label=${label} open>
-        <calcite-notice open>
+      html`<calcite-block label=${label} expanded>
+        <calcite-notice expanded>
           <div slot="message">Use layer effects sparingly, for emphasis</div>
         </calcite-notice>
       </calcite-block>`,
@@ -447,7 +455,7 @@ describe("calcite-block", () => {
         html`<calcite-block
           heading="heading"
           description="description"
-          open
+          expanded
           collapsible
           icon-end="pen"
           icon-start="pen"
diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss
index 027ea1de099..4d453fe9500 100644
--- a/packages/calcite-components/src/components/block/block.scss
+++ b/packages/calcite-components/src/components/block/block.scss
@@ -7,7 +7,7 @@
  * @prop --calcite-block-header-background-color: Specifies the component's `heading` background color.
  * @prop --calcite-block-header-background-color-hover: Specifies the component's `heading` background color when hovered.
  * @prop --calcite-block-heading-text-color: Specifies the component's `heading` text color.
- * @prop --calcite-block-heading-text-color-press: When the component is `open`, specifies the `heading` text color.
+ * @prop --calcite-block-heading-text-color-press: When the component is `expanded`, specifies the `heading` text color.
  * @prop --calcite-block-padding: [Deprecated] Specifies the padding of the component's `default` slot.
  * @prop --calcite-block-text-color: Specifies the component's text color.
  */
@@ -204,7 +204,7 @@ calcite-action-menu {
   @apply flex items-stretch;
 }
 
-:host([open]) {
+:host([expanded]) {
   @apply my-2;
 
   .header .title .heading {
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index fab4db72f72..123abf59b6b 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -141,8 +141,22 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
    */
   @property() moveToItems: MoveTo[] = [];
 
-  /** When `true`, expands the component and its contents. */
-  @property({ reflect: true }) open = false;
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @deprecated Use `expanded` prop instead.
+   */
+  @property({ reflect: true })
+  get open(): boolean {
+    return this.expanded;
+  }
+
+  set open(value: boolean) {
+    this.expanded = value;
+  }
+
+  /** When `true`, the component is expanded to show child components. */
+  @property({ reflect: true }) expanded = false;
 
   /**
    * Determines the type of positioning to use for the overlaid content.
@@ -244,7 +258,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
     Please refactor your code to reduce the need for this check.
     Docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-transition-from-stencil--docs#watching-for-property-changes */
-    if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
+    if (changes.has("expanded") && (this.hasUpdated || this.expanded !== false)) {
       onToggleOpenCloseComponent(this);
     }
 
@@ -313,7 +327,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
   }
 
   private onHeaderClick(): void {
-    this.open = !this.open;
+    this.expanded = !this.expanded;
     this.calciteBlockToggle.emit();
   }
 
@@ -433,7 +447,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
     const {
       collapsible,
       loading,
-      open,
+      expanded,
       label,
       heading,
       messages,
@@ -446,7 +460,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
       dragDisabled,
     } = this;
 
-    const toggleLabel = open ? messages.collapse : messages.expand;
+    const toggleLabel = expanded ? messages.collapse : messages.expand;
 
     const headerContent = (
       <header
@@ -460,7 +474,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
       </header>
     );
 
-    const collapseIcon = open ? ICONS.opened : ICONS.closed;
+    const collapseIcon = expanded ? ICONS.opened : ICONS.closed;
 
     const headerNode = (
       <div class={CSS.headerContainer}>
@@ -483,7 +497,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
           <button
             aria-controls={IDS.content}
             aria-describedby={IDS.header}
-            ariaExpanded={collapsible ? open : null}
+            ariaExpanded={collapsible ? expanded : null}
             class={CSS.toggle}
             id={IDS.toggle}
             onClick={this.onHeaderClick}
@@ -529,7 +543,12 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
           }}
         >
           {headerNode}
-          <section aria-labelledby={IDS.toggle} class={CSS.content} hidden={!open} id={IDS.content}>
+          <section
+            aria-labelledby={IDS.toggle}
+            class={CSS.content}
+            hidden={!expanded}
+            id={IDS.content}
+          >
             {this.renderScrim()}
           </section>
         </article>

From c991e7d5dc61ffe90a9885f2709e3262b4d2e6e4 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 18 Feb 2025 14:50:31 -0800
Subject: [PATCH 2/5] add expanded prop to block-section, add the prop to
 stories and html

---
 .../block-section/block-section.e2e.ts        | 42 +++++------
 .../block-section/block-section.scss          |  4 +-
 .../block-section/block-section.tsx           | 45 +++++++++---
 .../src/components/block-section/resources.ts |  4 +-
 .../src/components/block/block.e2e.ts         |  2 +-
 .../src/components/block/block.stories.ts     | 73 +++++++++++--------
 .../src/components/block/block.tsx            |  4 +-
 .../src/components/block/resources.ts         |  4 +-
 .../calcite-components/src/demos/block.html   | 12 +--
 9 files changed, 112 insertions(+), 78 deletions(-)

diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
index 8d4db9ee809..581ad414298 100644
--- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts
+++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -17,7 +17,7 @@ describe("calcite-block-section", () => {
   describe("reflects", () => {
     reflects("calcite-block-section", [
       {
-        propertyName: "open",
+        propertyName: "expanded",
         value: true,
       },
     ]);
@@ -26,7 +26,7 @@ describe("calcite-block-section", () => {
   describe("defaults", () => {
     defaults("calcite-block-section", [
       {
-        propertyName: "open",
+        propertyName: "expanded",
         defaultValue: false,
       },
       {
@@ -43,7 +43,7 @@ describe("calcite-block-section", () => {
   describe("setFocus", () => {
     describe("focuses toggle switch", () => {
       focusable(
-        html`<calcite-block-section text="text" toggle-display="switch" open>
+        html`<calcite-block-section text="text" toggle-display="switch" expanded>
           <div>some content</div>
         </calcite-block-section>`,
         {
@@ -54,7 +54,7 @@ describe("calcite-block-section", () => {
 
     describe("focuses toggle button", () => {
       focusable(
-        html`<calcite-block-section text="text" toggle-display="button" open>
+        html`<calcite-block-section text="text" toggle-display="button" expanded>
           <div>some content</div>
         </calcite-block-section>`,
         {
@@ -67,13 +67,13 @@ describe("calcite-block-section", () => {
   describe("toggle-display = 'switch'", () => {
     describe("accessible", () => {
       accessible(html`
-        <calcite-block-section text="text" toggle-display="switch" open>
+        <calcite-block-section text="text" toggle-display="switch" expanded>
           <div>some content</div>
         </calcite-block-section>
       `);
     });
 
-    describe("accessible: when closed", () => {
+    describe("accessible: when collapsed", () => {
       accessible(html`
         <calcite-block-section text="text" toggle-display="switch">
           <div>some content</div>
@@ -96,7 +96,7 @@ describe("calcite-block-section", () => {
 
     it("renders section text", async () => {
       const page = await newE2EPage({
-        html: `<calcite-block-section text="test text" open toggle-display="switch"></calcite-block-section>`,
+        html: `<calcite-block-section text="test text" expanded toggle-display="switch"></calcite-block-section>`,
       });
       const element = await page.find(`calcite-block-section >>> .${CSS.toggle}`);
       expect(element.textContent).toBe("test text");
@@ -105,11 +105,11 @@ describe("calcite-block-section", () => {
 
   describe("toggle-display = 'button' (default)", () => {
     describe("accessible", () => {
-      describe("accessible: when open", () => {
-        accessible(html`<calcite-block-section text="text" open><div>some content</div></calcite-block-section>`);
+      describe("accessible: when expanded", () => {
+        accessible(html`<calcite-block-section text="text" expanded><div>some content</div></calcite-block-section>`);
       });
 
-      describe("accessible: when closed", () => {
+      describe("accessible: when collapsed", () => {
         accessible(html`<calcite-block-section text="text"><div>some content</div></calcite-block-section>`);
       });
     });
@@ -153,17 +153,17 @@ describe("calcite-block-section", () => {
 
     expect(await content.isVisible()).toBe(false);
 
-    element.setProperty("open", true);
+    element.setProperty("expanded", true);
     await page.waitForChanges();
-    element = await page.find("calcite-block-section[open]");
+    element = await page.find("calcite-block-section[expanded]");
     content = await page.find(`calcite-block-section >>> .${CSS.content}`);
 
     expect(element).toBeTruthy();
     expect(await content.isVisible()).toBe(true);
 
-    element.setProperty("open", false);
+    element.setProperty("expanded", false);
     await page.waitForChanges();
-    element = await page.find("calcite-block-section[open]");
+    element = await page.find("calcite-block-section[expanded]");
     content = await page.find(`calcite-block-section >>> .${CSS.content}`);
 
     expect(element).toBeNull();
@@ -181,13 +181,13 @@ describe("calcite-block-section", () => {
     await toggle.click();
 
     expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
-    expect(await element.getProperty("open")).toBe(true);
+    expect(await element.getProperty("expanded")).toBe(true);
     expect(toggle.getAttribute("aria-expanded")).toBe("true");
 
     await toggle.click();
 
     expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
-    expect(await element.getProperty("open")).toBe(false);
+    expect(await element.getProperty("expanded")).toBe(false);
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
 
     if ((await element.getProperty("toggleDisplay")) === "switch") {
@@ -196,13 +196,13 @@ describe("calcite-block-section", () => {
       await switchToggle.click();
 
       expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
-      expect(await element.getProperty("open")).toBe(true);
+      expect(await element.getProperty("expanded")).toBe(true);
       expect(toggle.getAttribute("aria-expanded")).toBe("true");
 
       await switchToggle.click();
 
       expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
-      expect(await element.getProperty("open")).toBe(false);
+      expect(await element.getProperty("expanded")).toBe(false);
       expect(toggle.getAttribute("aria-expanded")).toBe("false");
     }
 
@@ -224,14 +224,14 @@ describe("calcite-block-section", () => {
     await page.waitForChanges();
 
     expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
-    expect(await element.getProperty("open")).toBe(true);
+    expect(await element.getProperty("expanded")).toBe(true);
     expect(toggle.getAttribute("aria-expanded")).toBe("true");
 
     await keyboardToggleEmitter.press("Enter");
     await page.waitForChanges();
 
     expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
-    expect(await element.getProperty("open")).toBe(false);
+    expect(await element.getProperty("expanded")).toBe(false);
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
   }
 
@@ -239,7 +239,7 @@ describe("calcite-block-section", () => {
     describe("default", () => {
       themed(
         html`
-          <calcite-block-section text="Planes" open icon-end="pen" icon-start="pen" text="a block-section">
+          <calcite-block-section text="Planes" expanded icon-end="pen" icon-start="pen" text="a block-section">
             <p>Block section content</p>
           </calcite-block-section>
         `,
diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss
index e4e5a088390..e1c46033e45 100644
--- a/packages/calcite-components/src/components/block-section/block-section.scss
+++ b/packages/calcite-components/src/components/block-section/block-section.scss
@@ -4,7 +4,7 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-block-section-background-color: Specifies the component's background color.
- * @prop --calcite-block-section-border-color: Specifies the component's border color. When `open`, applies to the component's bottom border.
+ * @prop --calcite-block-section-border-color: Specifies the component's border color. When `expanded`, applies to the component's bottom border.
  * @prop --calcite-block-section-header-text-color: Specifies the component's header text color.
  * @prop --calcite-block-section-text-color: Specifies the component's text color.
  * @prop --calcite-block-section-text-color-hover: Specifies the component's text color on hover.
@@ -26,7 +26,7 @@ calcite-switch {
   // --calcite-switch-handle-shadow: var(--calcite-block-section-switch-handle-shadow);
 }
 
-:host([open]) {
+:host([expanded]) {
   @apply border-0
     border-b
     border-solid;
diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx
index bbf0e737629..2abd3ff7682 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -46,8 +46,22 @@ export class BlockSection extends LitElement {
    */
   messages = useT9n<typeof T9nStrings>();
 
-  /** When `true`, expands the component and its contents. */
-  @property({ reflect: true }) open = false;
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @deprecated Use `expanded` prop instead.
+   */
+  @property({ reflect: true })
+  get open(): boolean {
+    return this.expanded;
+  }
+
+  set open(value: boolean) {
+    this.expanded = value;
+  }
+
+  /** When `true`, the component is expanded to show child components. */
+  @property({ reflect: true }) expanded = false;
 
   /**
    * Displays a status-related indicator icon.
@@ -99,7 +113,7 @@ export class BlockSection extends LitElement {
   }
 
   private toggleSection(): void {
-    this.open = !this.open;
+    this.expanded = !this.expanded;
     this.calciteBlockSectionToggle.emit();
   }
 
@@ -146,10 +160,10 @@ export class BlockSection extends LitElement {
   }
 
   override render(): JsxNode {
-    const { messages, open, text, toggleDisplay } = this;
-    const arrowIcon = open ? ICONS.menuOpen : ICONS.menuClosed;
+    const { messages, expanded, text, toggleDisplay } = this;
+    const arrowIcon = expanded ? ICONS.menuExpanded : ICONS.menuCollapsed;
 
-    const toggleLabel = open ? messages.collapse : messages.expand;
+    const toggleLabel = expanded ? messages.collapse : messages.expand;
 
     const headerNode =
       toggleDisplay === "switch" ? (
@@ -160,7 +174,7 @@ export class BlockSection extends LitElement {
         >
           <div
             aria-controls={IDS.content}
-            ariaExpanded={open}
+            ariaExpanded={expanded}
             class={{
               [CSS.toggle]: true,
               [CSS.toggleSwitch]: true,
@@ -179,7 +193,13 @@ export class BlockSection extends LitElement {
 
             {this.renderIcon(this.iconEnd)}
             {this.renderStatusIcon()}
-            <calcite-switch checked={open} class={CSS.switch} inert label={toggleLabel} scale="s" />
+            <calcite-switch
+              checked={expanded}
+              class={CSS.switch}
+              inert
+              label={toggleLabel}
+              scale="s"
+            />
           </div>
         </div>
       ) : (
@@ -190,7 +210,7 @@ export class BlockSection extends LitElement {
         >
           <button
             aria-controls={IDS.content}
-            ariaExpanded={open}
+            ariaExpanded={expanded}
             class={{
               [CSS.sectionHeader]: true,
               [CSS.toggle]: true,
@@ -210,7 +230,12 @@ export class BlockSection extends LitElement {
     return (
       <>
         {headerNode}
-        <section aria-labelledby={IDS.toggle} class={CSS.content} hidden={!open} id={IDS.content}>
+        <section
+          aria-labelledby={IDS.toggle}
+          class={CSS.content}
+          hidden={!expanded}
+          id={IDS.content}
+        >
           <slot />
         </section>
       </>
diff --git a/packages/calcite-components/src/components/block-section/resources.ts b/packages/calcite-components/src/components/block-section/resources.ts
index 08eee3e4a6c..c5adebccb6f 100644
--- a/packages/calcite-components/src/components/block-section/resources.ts
+++ b/packages/calcite-components/src/components/block-section/resources.ts
@@ -22,8 +22,8 @@ export const CSS = {
 };
 
 export const ICONS = {
-  menuOpen: "chevron-up",
-  menuClosed: "chevron-down",
+  menuExpanded: "chevron-up",
+  menuCollapsed: "chevron-down",
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
 } as const;
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index bcffc325fc1..a32a1603f4a 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -498,7 +498,7 @@ describe("calcite-block", () => {
         },
       );
     });
-    describe("closed", () => {
+    describe("collapsed", () => {
       themed(html`<calcite-block heading="heading"></calcite-block>`, {
         "--calcite-block-heading-text-color": { shadowSelector: `.${CSS.heading}`, targetProp: "color" },
       });
diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
index 572be6b3d7d..2baeb0af8a4 100644
--- a/packages/calcite-components/src/components/block/block.stories.ts
+++ b/packages/calcite-components/src/components/block/block.stories.ts
@@ -13,7 +13,7 @@ interface BlockStoryArgs
       Block,
       | "heading"
       | "description"
-      | "open"
+      | "expanded"
       | "collapsible"
       | "loading"
       | "disabled"
@@ -24,7 +24,7 @@ interface BlockStoryArgs
     >,
     Pick<BlockSection, "toggleDisplay"> {
   text: string;
-  sectionOpen: BlockSection["open"];
+  sectionExpanded: BlockSection["expanded"];
 }
 
 export default {
@@ -33,7 +33,7 @@ export default {
     menuPlacement: defaultEndMenuPlacement,
     heading: "Heading",
     description: "description",
-    open: true,
+    expanded: true,
     collapsible: true,
     loading: false,
     disabled: false,
@@ -41,7 +41,7 @@ export default {
     sortHandleOpen: false,
     headingLevel: 2,
     text: "Animals",
-    sectionOpen: true,
+    sectionExpanded: true,
     toggleDisplay: toggleDisplay.defaultValue,
   },
   argTypes: {
@@ -64,7 +64,7 @@ export const simple = (args: BlockStoryArgs): string => html`
     heading="${args.heading}"
     description="${args.description}"
     menu-placement="${args.menuPlacement}"
-    ${boolean("open", args.open)}
+    ${boolean("expanded", args.expanded)}
     ${boolean("collapsible", args.collapsible)}
     ${boolean("loading", args.loading)}
     ${boolean("disabled", args.disabled)}
@@ -74,12 +74,12 @@ export const simple = (args: BlockStoryArgs): string => html`
   >
     <calcite-block-section
       text="${args.text}"
-      ${boolean("open", args.sectionOpen)}
+      ${boolean("expanded", args.sectionExpanded)}
       toggle-display="${args.toggleDisplay}"
     >
       <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
     </calcite-block-section>
-    <calcite-block-section text="Nature" open>
+    <calcite-block-section text="Nature" expanded>
       <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
     </calcite-block-section>
   </calcite-block>
@@ -98,8 +98,8 @@ export const withIconAndHeader = (): string => html`
 `;
 
 export const disabled_TestOnly = (): string => html`
-  <calcite-block heading="heading" description="description" open collapsible disabled>
-    <calcite-block-section text="Nature" open>
+  <calcite-block heading="heading" description="description" expanded collapsible disabled>
+    <calcite-block-section text="Nature" expanded>
       <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
     </calcite-block-section>
   </calcite-block>
@@ -111,7 +111,7 @@ export const paddingDisabled_TestOnly = (): string =>
       heading="Example block heading"
       description="example summary heading"
       collapsible
-      open
+      expanded
       style="--calcite-block-padding: 0;"
     >
       <div>calcite components ninja</div>
@@ -122,23 +122,23 @@ export const darkModeRTL_TestOnly = (): string => html`
   <calcite-block
     heading="Heading"
     description="description"
-    open
+    expanded
     collapsible
     heading-level="2"
     class="calcite-mode-dark"
     dir="rtl"
   >
-    <calcite-block-section text="Animals" open toggle-display="button">
+    <calcite-block-section text="Animals" expanded toggle-display="button">
       <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
     </calcite-block-section>
-    <calcite-block-section text="Nature" open>
+    <calcite-block-section text="Nature" expanded>
       <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
     </calcite-block-section>
   </calcite-block>
 `;
 
 export const contentCanTakeFullHeight_TestOnly = (): string =>
-  html`<calcite-block open heading="Heading" description="description" style="height: 250px">
+  html`<calcite-block expanded heading="Heading" description="description" style="height: 250px">
     <div style="background: red; height: 100%;">should take full width of the content area</div>
   </calcite-block>`;
 
@@ -162,23 +162,23 @@ export const alignmentIconHeadingAndDescription_TestOnly = (): string =>
   /></calcite-block>`;
 
 export const contentSpacing_TestOnly = (): string => html`
-  <calcite-block heading="Block heading" open>
+  <calcite-block heading="Block heading" expanded>
     <div>Some text that has padding built in</div>
   </calcite-block>
 `;
 
 export const loadingWithSlottedIcon_TestOnly = (): string => html`
-  <calcite-block collapsible open loading heading="Layer effects" description="Adjust blur">
+  <calcite-block collapsible expanded loading heading="Layer effects" description="Adjust blur">
     <calcite-icon scale="s" slot="icon" icon="effects"></calcite-icon>
-    <calcite-notice open>
+    <calcite-notice expanded>
       <div slot="message">Use layer effects sparingly</div>
     </calcite-notice>
   </calcite-block>
 `;
 
 export const loadingWithNoStatusNorSlottedIcon_TestOnly = (): string => html`
-  <calcite-block collapsible open loading heading="Layer effects" description="Adjust blur">
-    <calcite-notice open>
+  <calcite-block collapsible expanded loading heading="Layer effects" description="Adjust blur">
+    <calcite-notice expanded>
       <div slot="message">Use layer effects sparingly</div>
     </calcite-notice>
   </calcite-block>
@@ -188,17 +188,23 @@ export const longWrappingTextInBlockAndBlockSection_TestOnly = (): string => htm
   <calcite-panel style="width:250px">
     <calcite-block
       collapsible
-      open
+      expanded
       heading="Planes, trains, and automobiles are some examples of modes of transportation"
       description="Planes, trains, and automobiles are some examples of modes of transportation"
     >
-      <calcite-notice open>
+      <calcite-notice expanded>
         <div slot="message">Some more complex options.</div>
       </calcite-notice>
-      <calcite-block-section open text="Planes, trains, and automobiles are some examples of modes of transportation">
+      <calcite-block-section
+        expanded
+        text="Planes, trains, and automobiles are some examples of modes of transportation"
+      >
         <p>Block section content</p>
       </calcite-block-section>
-      <calcite-block-section open text="Planes, trains, and automobiles are some examples of modes of transportation">
+      <calcite-block-section
+        expanded
+        text="Planes, trains, and automobiles are some examples of modes of transportation"
+      >
         <p>Block section content</p>
       </calcite-block-section>
     </calcite-block>
@@ -207,10 +213,13 @@ export const longWrappingTextInBlockAndBlockSection_TestOnly = (): string => htm
       heading="Planes, trains, and automobiles are some examples of modes of transportation"
       description="Planes, trains, and automobiles are some examples of modes of transportation"
     >
-      <calcite-notice open>
+      <calcite-notice expanded>
         <div slot="message">Some more complex options.</div>
       </calcite-notice>
-      <calcite-block-section open text="Planes, trains, and automobiles are some examples of modes of transportation">
+      <calcite-block-section
+        expanded
+        text="Planes, trains, and automobiles are some examples of modes of transportation"
+      >
         <p>Block section content</p>
       </calcite-block-section>
     </calcite-block>
@@ -243,7 +252,7 @@ export const scrollingContainerSetup_TestOnly = (): string =>
         margin: 0;
       }
     </style>
-    <calcite-block heading="Should scroll to the gradient at the bottom" open>
+    <calcite-block heading="Should scroll to the gradient at the bottom" expanded>
       <div class="scroll-container">
         <p></p>
       </div>
@@ -262,19 +271,19 @@ export const scrollingContainerSetup_TestOnly = (): string =>
 scrollingContainerSetup_TestOnly.parameters = { chromatic: { delay: 500 } };
 
 export const toggleDisplayWithLongText_TestOnly = (): string =>
-  html`<calcite-block open heading="Calcite block" style="width:150px">
-    <calcite-block-section id="block-section" open text="Calcite block's super long text" toggle-display="switch">
-      <calcite-notice open>
+  html`<calcite-block expanded heading="Calcite block" style="width:150px">
+    <calcite-block-section id="block-section" expanded text="Calcite block's super long text" toggle-display="switch">
+      <calcite-notice expanded>
         <div slot="message">Some more complex options.</div>
       </calcite-notice>
     </calcite-block-section>
   </calcite-block>`;
 
 export const icons_TestOnly = (): string => html`
-  <calcite-block heading="Heading" description="summary" collapsible open>
+  <calcite-block heading="Heading" description="summary" collapsible expanded>
     <calcite-block-section
       text="Planes, trains, and automobiles are some examples of modes of transportation"
-      open
+      expanded
       icon-end="pen"
       icon-start="pen"
       toggle-display="switch"
@@ -285,7 +294,7 @@ export const icons_TestOnly = (): string => html`
 
     <calcite-block-section
       text="Planes, trains, and automobiles are some examples of modes of transportation"
-      open
+      expanded
       icon-end="pen"
       icon-start="pen"
       toggle-display="button"
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index 123abf59b6b..edb23ac65ad 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -295,7 +295,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
       return;
     }
 
-    // we set the property instead of the attribute to ensure open/close events are emitted properly
+    // we set the property instead of the attribute to ensure expanded/collapsed events are emitted properly
     this.sortHandleEl.open = this.sortHandleOpen;
   }
 
@@ -474,7 +474,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
       </header>
     );
 
-    const collapseIcon = expanded ? ICONS.opened : ICONS.closed;
+    const collapseIcon = expanded ? ICONS.expanded : ICONS.collapsed;
 
     const headerNode = (
       <div class={CSS.headerContainer}>
diff --git a/packages/calcite-components/src/components/block/resources.ts b/packages/calcite-components/src/components/block/resources.ts
index 77610777c5b..333229b4a0d 100644
--- a/packages/calcite-components/src/components/block/resources.ts
+++ b/packages/calcite-components/src/components/block/resources.ts
@@ -38,8 +38,8 @@ export const SLOTS = {
 };
 
 export const ICONS = {
-  opened: "chevron-up",
-  closed: "chevron-down",
+  expanded: "chevron-up",
+  collapsed: "chevron-down",
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
 } as const;
diff --git a/packages/calcite-components/src/demos/block.html b/packages/calcite-components/src/demos/block.html
index a51f00f6c6f..06ebf21cd09 100644
--- a/packages/calcite-components/src/demos/block.html
+++ b/packages/calcite-components/src/demos/block.html
@@ -52,8 +52,8 @@
         <div class="child right-aligned-text">default collapsible + no controls</div>
 
         <div class="child">
-          <calcite-block heading="Heading" description="summary" collapsible open>
-            <calcite-block-section text="input block-section" open>
+          <calcite-block heading="Heading" description="summary" collapsible expanded>
+            <calcite-block-section text="input block-section" expanded>
               <calcite-input
                 icon="form-field"
                 placeholder="This is an input field... enter something here"
@@ -70,10 +70,10 @@
         <div class="child right-aligned-text">icon-start/end + switch + deprecated status (shown)</div>
 
         <div class="child">
-          <calcite-block heading="Heading" description="summary" collapsible open>
+          <calcite-block heading="Heading" description="summary" collapsible expanded>
             <calcite-block-section
               text="Planes, trains, and automobiles are some examples of modes of transportation"
-              open
+              expanded
               icon-end="pen"
               icon-start="pen"
               toggle-display="switch"
@@ -90,10 +90,10 @@
         <div class="child right-aligned-text">icon-start/end + button + deprecated status</div>
 
         <div class="child">
-          <calcite-block heading="Heading" description="summary" collapsible open>
+          <calcite-block heading="Heading" description="summary" collapsible expanded>
             <calcite-block-section
               text="Planes, trains, and automobiles are some examples of modes of transportation"
-              open
+              expanded
               icon-end="pen"
               icon-start="pen"
               toggle-display="button"

From 15a469dffbef80f497571709750998ac973b11b0 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 3 Mar 2025 14:04:55 -0800
Subject: [PATCH 3/5] undo changes to block e2e for describe blocks

---
 .../src/components/block-section/block-section.e2e.ts  |  8 ++++++++
 .../src/components/block/block.stories.ts              | 10 +++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
index 581ad414298..688737373cb 100644
--- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts
+++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -16,6 +16,10 @@ describe("calcite-block-section", () => {
 
   describe("reflects", () => {
     reflects("calcite-block-section", [
+      {
+        propertyName: "open",
+        value: true,
+      },
       {
         propertyName: "expanded",
         value: true,
@@ -25,6 +29,10 @@ describe("calcite-block-section", () => {
 
   describe("defaults", () => {
     defaults("calcite-block-section", [
+      {
+        propertyName: "open",
+        defaultValue: false,
+      },
       {
         propertyName: "expanded",
         defaultValue: false,
diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
index 2baeb0af8a4..afaa848144c 100644
--- a/packages/calcite-components/src/components/block/block.stories.ts
+++ b/packages/calcite-components/src/components/block/block.stories.ts
@@ -170,7 +170,7 @@ export const contentSpacing_TestOnly = (): string => html`
 export const loadingWithSlottedIcon_TestOnly = (): string => html`
   <calcite-block collapsible expanded loading heading="Layer effects" description="Adjust blur">
     <calcite-icon scale="s" slot="icon" icon="effects"></calcite-icon>
-    <calcite-notice expanded>
+    <calcite-notice open>
       <div slot="message">Use layer effects sparingly</div>
     </calcite-notice>
   </calcite-block>
@@ -178,7 +178,7 @@ export const loadingWithSlottedIcon_TestOnly = (): string => html`
 
 export const loadingWithNoStatusNorSlottedIcon_TestOnly = (): string => html`
   <calcite-block collapsible expanded loading heading="Layer effects" description="Adjust blur">
-    <calcite-notice expanded>
+    <calcite-notice open>
       <div slot="message">Use layer effects sparingly</div>
     </calcite-notice>
   </calcite-block>
@@ -192,7 +192,7 @@ export const longWrappingTextInBlockAndBlockSection_TestOnly = (): string => htm
       heading="Planes, trains, and automobiles are some examples of modes of transportation"
       description="Planes, trains, and automobiles are some examples of modes of transportation"
     >
-      <calcite-notice expanded>
+      <calcite-notice open>
         <div slot="message">Some more complex options.</div>
       </calcite-notice>
       <calcite-block-section
@@ -213,7 +213,7 @@ export const longWrappingTextInBlockAndBlockSection_TestOnly = (): string => htm
       heading="Planes, trains, and automobiles are some examples of modes of transportation"
       description="Planes, trains, and automobiles are some examples of modes of transportation"
     >
-      <calcite-notice expanded>
+      <calcite-notice open>
         <div slot="message">Some more complex options.</div>
       </calcite-notice>
       <calcite-block-section
@@ -273,7 +273,7 @@ scrollingContainerSetup_TestOnly.parameters = { chromatic: { delay: 500 } };
 export const toggleDisplayWithLongText_TestOnly = (): string =>
   html`<calcite-block expanded heading="Calcite block" style="width:150px">
     <calcite-block-section id="block-section" expanded text="Calcite block's super long text" toggle-display="switch">
-      <calcite-notice expanded>
+      <calcite-notice open>
         <div slot="message">Some more complex options.</div>
       </calcite-notice>
     </calcite-block-section>

From 465586d65949d4aa3ffaeb26d68939c18f8a65a1 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 3 Mar 2025 14:44:55 -0800
Subject: [PATCH 4/5] add should set expanded when open is set test, logger,
 props in alphabetical order

---
 .../block-section/block-section.e2e.ts          | 17 +++++++++++++++++
 .../components/block-section/block-section.tsx  | 12 +++++++++---
 .../src/components/block/block.e2e.ts           | 17 +++++++++++++++++
 .../src/components/block/block.tsx              | 12 ++++++++----
 4 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
index 688737373cb..9125a0b9205 100644
--- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts
+++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -134,6 +134,23 @@ describe("calcite-block-section", () => {
     });
   });
 
+  it("should set expanded when open is set", async () => {
+    const page = await newE2EPage({
+      html: html`<calcite-block-section></calcite-block-section>`,
+    });
+    const blockSection = await page.find("calcite-block-section");
+
+    expect(await blockSection.getProperty("expanded")).toBe(false);
+
+    blockSection.setProperty("open", true);
+    await page.waitForChanges();
+    expect(await blockSection.getProperty("expanded")).toBe(true);
+
+    blockSection.setProperty("open", false);
+    await page.waitForChanges();
+    expect(await blockSection.getProperty("expanded")).toBe(false);
+  });
+
   describe("status = 'invalid'", () => {
     it("displays a status indicator when `status` is an accepted value", async () => {
       const page = await newE2EPage({
diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx
index 2abd3ff7682..dcaf3da4156 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -6,6 +6,7 @@ import { FlipContext, Status } from "../interfaces";
 import { componentFocusable } from "../../utils/component";
 import { IconNameOrString } from "../icon/interfaces";
 import { useT9n } from "../../controllers/useT9n";
+import { logger } from "../../utils/logger";
 import T9nStrings from "./assets/t9n/messages.en.json";
 import { BlockSectionToggleDisplay } from "./interfaces";
 import { CSS, ICONS, IDS } from "./resources";
@@ -27,6 +28,9 @@ export class BlockSection extends LitElement {
 
   // #region Public Properties
 
+  /** When `true`, the component is expanded to show child components. */
+  @property({ reflect: true }) expanded = false;
+
   /** Specifies an icon to display at the end of the component. */
   @property({ reflect: true }) iconEnd: IconNameOrString;
 
@@ -57,12 +61,14 @@ export class BlockSection extends LitElement {
   }
 
   set open(value: boolean) {
+    logger.deprecated("property", {
+      name: "open",
+      removalVersion: 4,
+      suggested: "expanded",
+    });
     this.expanded = value;
   }
 
-  /** When `true`, the component is expanded to show child components. */
-  @property({ reflect: true }) expanded = false;
-
   /**
    * Displays a status-related indicator icon.
    *
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index a32a1603f4a..fea179384b3 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -267,6 +267,23 @@ describe("calcite-block", () => {
     expect(toggle.getAttribute("title")).toBe(messages.expand);
   });
 
+  it("should set expanded when open is set", async () => {
+    const page = await newE2EPage({
+      html: html`<calcite-block></calcite-block>`,
+    });
+    const block = await page.find("calcite-block");
+
+    expect(await block.getProperty("expanded")).toBe(false);
+
+    block.setProperty("open", true);
+    await page.waitForChanges();
+    expect(await block.getProperty("expanded")).toBe(true);
+
+    block.setProperty("open", false);
+    await page.waitForChanges();
+    expect(await block.getProperty("expanded")).toBe(false);
+  });
+
   describe("header", () => {
     it("renders a heading", async () => {
       const page = await newE2EPage();
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index edb23ac65ad..91f7b3a658f 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -92,6 +92,9 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
    */
   @property({ reflect: true }) dragHandle = false;
 
+  /** When `true`, the component is expanded to show child components. */
+  @property({ reflect: true }) expanded = false;
+
   /**
    * The component header text.
    *
@@ -152,12 +155,13 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
   }
 
   set open(value: boolean) {
+    logger.deprecated("property", {
+      name: "open",
+      removalVersion: 4,
+      suggested: "expanded",
+    });
     this.expanded = value;
   }
-
-  /** When `true`, the component is expanded to show child components. */
-  @property({ reflect: true }) expanded = false;
-
   /**
    * Determines the type of positioning to use for the overlaid content.
    *

From 637970dd828e8c6dc288e5a0dec1cb421e8591e0 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 5 Mar 2025 11:43:28 -0800
Subject: [PATCH 5/5] refine deprecated prop test name

---
 .../src/components/block-section/block-section.e2e.ts          | 3 ++-
 packages/calcite-components/src/components/block/block.e2e.ts  | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
index 9125a0b9205..ab229ab6f0a 100644
--- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts
+++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -134,7 +134,8 @@ describe("calcite-block-section", () => {
     });
   });
 
-  it("should set expanded when open is set", async () => {
+  // Broader functionality related to the 'expanded' prop is covered in the `expanded` tests.
+  it("should map deprecated 'open' prop to 'expanded' prop", async () => {
     const page = await newE2EPage({
       html: html`<calcite-block-section></calcite-block-section>`,
     });
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index fea179384b3..f9b343dbd90 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -267,7 +267,8 @@ describe("calcite-block", () => {
     expect(toggle.getAttribute("title")).toBe(messages.expand);
   });
 
-  it("should set expanded when open is set", async () => {
+  // Broader functionality related to the 'expanded' prop is covered in the `expanded` tests.
+  it("should map deprecated 'open' prop to 'expanded' prop", async () => {
     const page = await newE2EPage({
       html: html`<calcite-block></calcite-block>`,
     });