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..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
@@ -20,6 +20,10 @@ describe("calcite-block-section", () => {
         propertyName: "open",
         value: true,
       },
+      {
+        propertyName: "expanded",
+        value: true,
+      },
     ]);
   });
 
@@ -29,6 +33,10 @@ describe("calcite-block-section", () => {
         propertyName: "open",
         defaultValue: false,
       },
+      {
+        propertyName: "expanded",
+        defaultValue: false,
+      },
       {
         propertyName: "toggleDisplay",
         defaultValue: "button",
@@ -43,7 +51,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 +62,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 +75,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 +104,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 +113,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>`);
       });
     });
@@ -126,6 +134,24 @@ describe("calcite-block-section", () => {
     });
   });
 
+  // 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>`,
+    });
+    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({
@@ -153,17 +179,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 +207,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 +222,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 +250,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 +265,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..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;
 
@@ -46,8 +50,24 @@ 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) {
+    logger.deprecated("property", {
+      name: "open",
+      removalVersion: 4,
+      suggested: "expanded",
+    });
+    this.expanded = value;
+  }
 
   /**
    * Displays a status-related indicator icon.
@@ -99,7 +119,7 @@ export class BlockSection extends LitElement {
   }
 
   private toggleSection(): void {
-    this.open = !this.open;
+    this.expanded = !this.expanded;
     this.calciteBlockSectionToggle.emit();
   }
 
@@ -146,10 +166,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 +180,7 @@ export class BlockSection extends LitElement {
         >
           <div
             aria-controls={IDS.content}
-            ariaExpanded={open}
+            ariaExpanded={expanded}
             class={{
               [CSS.toggle]: true,
               [CSS.toggleSwitch]: true,
@@ -179,7 +199,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 +216,7 @@ export class BlockSection extends LitElement {
         >
           <button
             aria-controls={IDS.content}
-            ariaExpanded={open}
+            ariaExpanded={expanded}
             class={{
               [CSS.sectionHeader]: true,
               [CSS.toggle]: true,
@@ -210,7 +236,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 80b18ff5eee..f9b343dbd90 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,11 +262,29 @@ 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);
   });
 
+  // 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>`,
+    });
+    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();
@@ -333,7 +359,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 +425,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 +439,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 +453,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 +473,7 @@ describe("calcite-block", () => {
         html`<calcite-block
           heading="heading"
           description="description"
-          open
+          expanded
           collapsible
           icon-end="pen"
           icon-start="pen"
@@ -490,7 +516,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.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.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
index 572be6b3d7d..afaa848144c 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,13 +162,13 @@ 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>
       <div slot="message">Use layer effects sparingly</div>
@@ -177,7 +177,7 @@ export const loadingWithSlottedIcon_TestOnly = (): string => html`
 `;
 
 export const loadingWithNoStatusNorSlottedIcon_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-notice open>
       <div slot="message">Use layer effects sparingly</div>
     </calcite-notice>
@@ -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>
         <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>
@@ -210,7 +216,10 @@ export const longWrappingTextInBlockAndBlockSection_TestOnly = (): string => htm
       <calcite-notice open>
         <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,8 +271,8 @@ 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">
+  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 open>
         <div slot="message">Some more complex options.</div>
       </calcite-notice>
@@ -271,10 +280,10 @@ export const toggleDisplayWithLongText_TestOnly = (): string =>
   </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 fab4db72f72..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.
    *
@@ -141,9 +144,24 @@ 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) {
+    logger.deprecated("property", {
+      name: "open",
+      removalVersion: 4,
+      suggested: "expanded",
+    });
+    this.expanded = value;
+  }
   /**
    * Determines the type of positioning to use for the overlaid content.
    *
@@ -244,7 +262,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);
     }
 
@@ -281,7 +299,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;
   }
 
@@ -313,7 +331,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 +451,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
     const {
       collapsible,
       loading,
-      open,
+      expanded,
       label,
       heading,
       messages,
@@ -446,7 +464,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 +478,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
       </header>
     );
 
-    const collapseIcon = open ? ICONS.opened : ICONS.closed;
+    const collapseIcon = expanded ? ICONS.expanded : ICONS.collapsed;
 
     const headerNode = (
       <div class={CSS.headerContainer}>
@@ -483,7 +501,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 +547,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>
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"