diff --git a/src/components/combo-box/combo-box.tsx b/src/components/combo-box/combo-box.tsx
index fa49b5f49..963e2dd9c 100644
--- a/src/components/combo-box/combo-box.tsx
+++ b/src/components/combo-box/combo-box.tsx
@@ -972,7 +972,7 @@ export class ChComboBoxRender
                   blockAlign="outside-end"
                   inlineAlign={this.popoverInlineAlign}
                   closeOnClickOutside
-                  hidden={false}
+                  show
                   popover="manual"
                   resizable={this.resizable}
                   inlineSizeMatch="action-element-as-minimum"
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 819abaa43..0e932f39d 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -150,6 +150,10 @@ $ch-dialog-y--same-layer: calc(
   display: contents;
 }
 
+:host(.ch-dialog--hidden) {
+  display: none;
+}
+
 // - - - - - - - - - - - - - - - -
 //             Header
 // - - - - - - - - - - - - - - - -
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index eb61e7d4c..38cf836ad 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -268,21 +268,20 @@ export class ChDialog {
   @Prop() readonly closeButtonAccessibleName?: string;
 
   /**
-   * Specifies whether the dialog is hidden or visible.
+   * Specifies whether the dialog is shown or not.
    */
-  // eslint-disable-next-line @stencil-community/ban-default-true
-  @Prop({ mutable: true, reflect: true }) hidden = true;
-  @Watch("hidden")
-  handleHiddenChange(hidden: boolean) {
+  @Prop({ mutable: true }) show: boolean = false;
+  @Watch("show")
+  showChanged(show: boolean) {
     // Schedule update for watchers
     this.#checkBorderSizeWatcher = true;
     this.#checkPositionWatcher = true;
 
     // Update the dialog visualization
-    if (hidden) {
-      this.#dialogRef.close();
-    } else {
+    if (show) {
       this.#showModal();
+    } else {
+      this.#dialogRef.close();
     }
   }
 
@@ -291,7 +290,7 @@ export class ChDialog {
    * interrupt interaction with the rest of the page being inert, while
    * non-modal dialog boxes allow interaction with the rest of the page.
    *
-   * Note: If `hidden !== false`, this property does not reflect changes on
+   * Note: If `show !== true`, this property does not reflect changes on
    * runtime, since at the time of writing browsers do not support switching
    * from modal to not-modal, (or vice-versa).
    */
@@ -351,14 +350,12 @@ export class ChDialog {
       this.#checkBorderSizeWatcher = false;
 
       // Wait until the resize edges have been rendered
-      requestAnimationFrame(() => {
-        this.#setBorderSizeWatcher();
-      });
+      requestAnimationFrame(() => setTimeout(this.#setBorderSizeWatcher));
     }
   }
 
   componentDidLoad() {
-    if (!this.hidden) {
+    if (this.show) {
       // Schedule update for watchers
       this.#checkBorderSizeWatcher = true;
       this.#checkPositionWatcher = true;
@@ -398,7 +395,7 @@ export class ChDialog {
   };
 
   #handleDialogClose = () => {
-    this.hidden = true;
+    this.show = false;
     // Emit events only when the action is committed by the user
     this.dialogClosed.emit();
     document.removeEventListener("click", this.#evaluateClickOnDocument, {
@@ -505,7 +502,7 @@ export class ChDialog {
   };
 
   #closeHandler = () => {
-    this.hidden = true;
+    this.show = false;
   };
 
   #evaluateClickOnDocument = (e: MouseEvent) => {
@@ -653,7 +650,7 @@ export class ChDialog {
    */
   // eslint-disable-next-line @stencil-community/own-props-must-be-private
   #setBorderSizeWatcher = () => {
-    if (!this.resizable || this.hidden) {
+    if (!this.resizable || !this.show) {
       this.#removeBorderSizeWatcher();
       return;
     }
@@ -734,9 +731,10 @@ export class ChDialog {
     return (
       <Host
         class={{
-          "gx-dialog-header-drag": !this.hidden && this.allowDrag === "header",
+          "gx-dialog-header-drag": this.show && this.allowDrag === "header",
           "ch-dialog--modal": this.modal,
           "ch-dialog--non-modal": !this.modal,
+          "ch-dialog--hidden": !this.show,
           [RESIZING_CLASS]: this.resizing
         }}
       >
@@ -783,7 +781,7 @@ export class ChDialog {
           )}
 
           {this.resizable &&
-            !this.hidden && [
+            this.show && [
               <div
                 key="edge-block-start"
                 class="edge__block-start"
diff --git a/src/components/dialog/readme.md b/src/components/dialog/readme.md
index 0123f8b44..7db40ef55 100644
--- a/src/components/dialog/readme.md
+++ b/src/components/dialog/readme.md
@@ -12,17 +12,17 @@ interactive component.
 
 ## Properties
 
-| Property                    | Attribute                      | Description                                                                                                                                                                                                                                                                                                                                                                                         | Type                        | Default     |
-| --------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ----------- |
-| `adjustPositionAfterResize` | `adjust-position-after-resize` | `true` if the dialog should be repositioned after resize.                                                                                                                                                                                                                                                                                                                                           | `boolean`                   | `false`     |
-| `allowDrag`                 | `allow-drag`                   | "box" will allow the dialog to be draggable from both the header and the content. "header" will allow the dialog to be draggable only from the header. "no" disables dragging completely.                                                                                                                                                                                                           | `"box" \| "header" \| "no"` | `"no"`      |
-| `caption`                   | `caption`                      | Refers to the dialog title. I will ve visible if 'showHeader´is true.                                                                                                                                                                                                                                                                                                                               | `string`                    | `undefined` |
-| `closeButtonAccessibleName` | `close-button-accessible-name` | Specifies a short string, typically 1 to 3 words, that authors associate with an element to provide users of assistive technologies with a label for the element. This label is used for the close button of the header.                                                                                                                                                                            | `string`                    | `undefined` |
-| `hidden`                    | `hidden`                       | Specifies whether the dialog is hidden or visible.                                                                                                                                                                                                                                                                                                                                                  | `boolean`                   | `true`      |
-| `modal`                     | `modal`                        | Specifies whether the dialog is a modal or not. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.  Note: If `hidden !== false`, this property does not reflect changes on runtime, since at the time of writing browsers do not support switching from modal to not-modal, (or vice-versa). | `boolean`                   | `true`      |
-| `resizable`                 | `resizable`                    | Specifies whether the control can be resized. If `true` the control can be resized at runtime by dragging the edges or corners.                                                                                                                                                                                                                                                                     | `boolean`                   | `false`     |
-| `showFooter`                | `show-footer`                  | Specifies whether the dialog footer is hidden or visible.                                                                                                                                                                                                                                                                                                                                           | `boolean`                   | `false`     |
-| `showHeader`                | `show-header`                  | Specifies whether the dialog header is hidden or visible.                                                                                                                                                                                                                                                                                                                                           | `boolean`                   | `false`     |
+| Property                    | Attribute                      | Description                                                                                                                                                                                                                                                                                                                                                                                      | Type                        | Default     |
+| --------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------- | ----------- |
+| `adjustPositionAfterResize` | `adjust-position-after-resize` | `true` if the dialog should be repositioned after resize.                                                                                                                                                                                                                                                                                                                                        | `boolean`                   | `false`     |
+| `allowDrag`                 | `allow-drag`                   | "box" will allow the dialog to be draggable from both the header and the content. "header" will allow the dialog to be draggable only from the header. "no" disables dragging completely.                                                                                                                                                                                                        | `"box" \| "header" \| "no"` | `"no"`      |
+| `caption`                   | `caption`                      | Refers to the dialog title. I will ve visible if 'showHeader´is true.                                                                                                                                                                                                                                                                                                                            | `string`                    | `undefined` |
+| `closeButtonAccessibleName` | `close-button-accessible-name` | Specifies a short string, typically 1 to 3 words, that authors associate with an element to provide users of assistive technologies with a label for the element. This label is used for the close button of the header.                                                                                                                                                                         | `string`                    | `undefined` |
+| `modal`                     | `modal`                        | Specifies whether the dialog is a modal or not. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.  Note: If `show !== true`, this property does not reflect changes on runtime, since at the time of writing browsers do not support switching from modal to not-modal, (or vice-versa). | `boolean`                   | `true`      |
+| `resizable`                 | `resizable`                    | Specifies whether the control can be resized. If `true` the control can be resized at runtime by dragging the edges or corners.                                                                                                                                                                                                                                                                  | `boolean`                   | `false`     |
+| `show`                      | `show`                         | Specifies whether the dialog is shown or not.                                                                                                                                                                                                                                                                                                                                                    | `boolean`                   | `false`     |
+| `showFooter`                | `show-footer`                  | Specifies whether the dialog footer is hidden or visible.                                                                                                                                                                                                                                                                                                                                        | `boolean`                   | `false`     |
+| `showHeader`                | `show-header`                  | Specifies whether the dialog header is hidden or visible.                                                                                                                                                                                                                                                                                                                                        | `boolean`                   | `false`     |
 
 
 ## Events
diff --git a/src/components/dialog/tests/accessibility.e2e.ts b/src/components/dialog/tests/accessibility.e2e.ts
new file mode 100644
index 000000000..338d73e57
--- /dev/null
+++ b/src/components/dialog/tests/accessibility.e2e.ts
@@ -0,0 +1,41 @@
+import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
+
+describe("[ch-dialog][accessibility]", () => {
+  let page: E2EPage;
+  let dialogRef: E2EElement;
+
+  beforeEach(async () => {
+    page = await newE2EPage({
+      html: `<ch-dialog></ch-dialog>`,
+      failOnConsoleError: true
+    });
+
+    dialogRef = await page.find("ch-dialog");
+
+    // Set Properties
+    dialogRef.setProperty("showHeader", true);
+    dialogRef.setProperty("showFooter", true);
+    dialogRef.setProperty("show", true);
+    await page.waitForChanges();
+  });
+
+  it("should not render a header element", async () => {
+    const headerEl = await page.find("ch-dialog >>> header");
+    expect(headerEl).toBeFalsy();
+  });
+
+  it("should not render a footer element", async () => {
+    const footerEl = await page.find("ch-dialog >>> footer");
+    expect(footerEl).toBeFalsy();
+  });
+
+  it("should not include a role attribute on the part='header' element", async () => {
+    const headerPartRef = await page.find("ch-dialog >>> [part='header']");
+    expect(headerPartRef).not.toHaveAttribute("role");
+  });
+
+  it("should not include a role attribute on the part='footer' element", async () => {
+    const footerPartRef = await page.find("ch-dialog >>> [part='footer']");
+    expect(footerPartRef).not.toHaveAttribute("role");
+  });
+});
diff --git a/src/components/dialog/tests/basic.e2e.ts b/src/components/dialog/tests/basic.e2e.ts
new file mode 100644
index 000000000..2d981048e
--- /dev/null
+++ b/src/components/dialog/tests/basic.e2e.ts
@@ -0,0 +1,99 @@
+import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
+
+describe("[ch-dialog][basic]", () => {
+  let page: E2EPage;
+  let dialogRef: E2EElement;
+
+  const testDefaultProperty = async (
+    propertyName: string,
+    expectedValue: any
+  ) => {
+    it(`the "${propertyName}" property should be ${
+      expectedValue === undefined ? "undefined" : `"${expectedValue}"`
+    }`, async () => {
+      const propertyValue = await dialogRef.getProperty(propertyName);
+      if (expectedValue === undefined) {
+        expect(propertyValue).toBeUndefined();
+      } else {
+        expect(propertyValue).toBe(expectedValue);
+      }
+    });
+  };
+
+  beforeEach(async () => {
+    page = await newE2EPage({
+      html: `<ch-dialog></ch-dialog>`,
+      failOnConsoleError: true
+    });
+
+    dialogRef = await page.find("ch-dialog");
+  });
+
+  // Validate shadowRoot
+
+  it("should have a shadowRoot", async () => {
+    expect(dialogRef.shadowRoot).toBeTruthy();
+  });
+
+  // Validate properties default values
+
+  testDefaultProperty("adjustPositionAfterResize", false);
+
+  testDefaultProperty("allowDrag", "no");
+
+  testDefaultProperty("caption", undefined);
+
+  testDefaultProperty("closeButtonAccessibleName", undefined);
+
+  testDefaultProperty("show", false);
+
+  testDefaultProperty("modal", true);
+
+  testDefaultProperty("resizable", false);
+
+  testDefaultProperty("showFooter", false);
+
+  testDefaultProperty("showHeader", false);
+
+  // Validate id's
+
+  it("should not include an id on any of the resize-bar elements", async () => {
+    dialogRef.setProperty("resizable", true);
+    dialogRef.setProperty("show", true);
+    await page.waitForChanges();
+
+    const partsNames = [
+      "edge edge-block-start",
+      "edge edge-inline-end",
+      "edge edge-block-end",
+      "edge edge-inline-start",
+      "corner corner-block-start-inline-start",
+      "corner corner-block-start-inline-end",
+      "corner corner-block-end-inline-start",
+      "corner corner-block-end-inline-end"
+    ];
+
+    for (const part of partsNames) {
+      const resizePartRef = await page.find(`ch-dialog >>> [part="${part}"]`);
+      expect(resizePartRef).not.toHaveAttribute("id");
+    }
+  });
+
+  it("should not include an id on the part='content' element", async () => {
+    dialogRef.setProperty("show", true);
+    await page.waitForChanges();
+    const contentPartRef = await page.find("ch-dialog >>> [part='content']");
+    expect(contentPartRef).not.toHaveAttribute("id");
+  });
+
+  it("should not include an id on the part='close-button' element", async () => {
+    dialogRef.setProperty("showHeader", true);
+    dialogRef.setProperty("show", true);
+    await page.waitForChanges();
+
+    const closeButtonPartRef = await page.find(
+      "ch-dialog >>> [part='close-button']"
+    );
+    expect(closeButtonPartRef).not.toHaveAttribute("id");
+  });
+});
diff --git a/src/components/dropdown/internal/dropdown/dropdown.tsx b/src/components/dropdown/internal/dropdown/dropdown.tsx
index 24b7462ee..acca9d5ae 100644
--- a/src/components/dropdown/internal/dropdown/dropdown.tsx
+++ b/src/components/dropdown/internal/dropdown/dropdown.tsx
@@ -473,7 +473,7 @@ export class ChDropDown implements ChComponent {
         actionElement={this.#mainAction as HTMLButtonElement}
         firstLayer={this.level === -1 || this.actionGroupParent}
         popover="manual"
-        hidden={!this.expanded}
+        show={this.expanded}
         inlineAlign={xAlignMapping}
         blockAlign={yAlignMapping}
       >
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
index 39ff8aad7..72b24b314 100644
--- a/src/components/popover/popover.scss
+++ b/src/components/popover/popover.scss
@@ -126,7 +126,7 @@ $ch-popover-y--same-layer: calc(
   --ch-popover-dragged-y: 0px;
   --ch-popover-rtl: 1;
 
-  display: grid; // Necessary to support gap property
+  display: none;
 
   // Necessary when the popover is not placed in a new top layer. For example,
   // when nesting dropdowns
@@ -167,12 +167,13 @@ $ch-popover-y--same-layer: calc(
   translate: max(0px, var(--ch-popover-x)) max(0px, var(--ch-popover-y));
 }
 
+:host([show]) {
+  display: grid; // Necessary to support gap property
+}
+
 // - - - - - - - - - - - - - - - -
 //             Hidden
 // - - - - - - - - - - - - - - - -
-:host([hidden]) {
-  display: none;
-}
 
 // // content-visibility: hidden is faster for rendering the content back, as
 // // it preserves the rendering state of the content (display: none does not)
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index fe8c9b5bd..c397eedfb 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -370,23 +370,23 @@ export class ChPopover {
   /**
    * Specifies whether the popover is hidden or visible.
    */
-  // eslint-disable-next-line @stencil-community/ban-default-true
-  @Prop({ mutable: true, reflect: true }) hidden = true;
-  @Watch("hidden")
-  handleHiddenChange(newHiddenValue: boolean) {
+  // TODO: Remove reflect in a future PR (also add a unit test to verify that the
+  // property is not reflected and be careful with the selector `:host([show]) {...}` ).
+  @Prop({ mutable: true, reflect: true }) show: boolean = false;
+  @Watch("show")
+  showChanged(newShowValue: boolean) {
     // Schedule update for watchers
     this.#checkBorderSizeWatcher = true;
     this.#checkPositionWatcher = true;
 
     // Update the popover visualization
-    if (newHiddenValue) {
+    if (newShowValue) {
+      this.#showPopover();
+    } else {
       if (this.firstLayer) {
         this.#avoidFlickeringInTheNextRender(true);
       }
-
       this.el.hidePopover();
-    } else {
-      this.#showPopover();
     }
   }
 
@@ -494,7 +494,7 @@ export class ChPopover {
     ) {
       this.#removeClickOutsideWatcher();
 
-      this.hidden = true;
+      this.show = false;
       this.popoverClosed.emit();
     }
   };
@@ -503,7 +503,7 @@ export class ChPopover {
     if (event.code === KEY_CODES.ESCAPE) {
       this.#removeClickOutsideWatcher();
 
-      this.hidden = true;
+      this.show = false;
       this.popoverClosed.emit();
     }
   };
@@ -563,7 +563,7 @@ export class ChPopover {
   };
 
   #setPositionWatcher = () => {
-    if (!this.actionElement || this.hidden) {
+    if (!this.actionElement || !this.show) {
       this.#removePositionWatcher();
       return;
     }
@@ -801,14 +801,14 @@ export class ChPopover {
   };
 
   #handlePopoverToggle = (event: ToggleEvent) => {
-    const willBeHidden = !(event.newState === "open");
-    this.hidden = willBeHidden;
+    const willBeOpen = event.newState === "open";
+    this.show = willBeOpen;
 
     // Emit events only when the action is committed by the user
-    if (willBeHidden) {
-      this.popoverClosed.emit();
-    } else {
+    if (willBeOpen) {
       this.popoverOpened.emit();
+    } else {
+      this.popoverClosed.emit();
     }
   };
 
@@ -1017,7 +1017,7 @@ export class ChPopover {
    */
   // eslint-disable-next-line @stencil-community/own-props-must-be-private
   #setBorderSizeWatcher = () => {
-    if (!this.resizable || this.hidden) {
+    if (!this.resizable || !this.show) {
       this.#removeBorderSizeWatcher();
       return;
     }
@@ -1144,7 +1144,7 @@ export class ChPopover {
     this.#setPositionWatcher();
     this.#setBorderSizeWatcher();
 
-    if (!this.hidden) {
+    if (this.show) {
       this.#showPopover();
     }
   }
@@ -1170,7 +1170,7 @@ export class ChPopover {
   }
 
   render() {
-    const canAddListeners = !this.hidden;
+    const canAddListeners = this.show;
 
     return (
       <Host
@@ -1201,7 +1201,7 @@ export class ChPopover {
         <slot />
 
         {this.resizable &&
-          !this.hidden && [
+          this.show && [
             <div
               class="edge__block-start"
               onMouseDown={this.#handleEdgeResize("block-start")}
diff --git a/src/components/popover/readme.md b/src/components/popover/readme.md
index 3245e69fa..f8537fda3 100644
--- a/src/components/popover/readme.md
+++ b/src/components/popover/readme.md
@@ -19,13 +19,13 @@ relative to an element, but placed on the top layer using `position: fixed`.
 | `blockSizeMatch`      | `block-size-match`       | Specifies how the popover adapts its block size.  - "content": The block size of the control will be determined by its    content block size.  - "action-element": The block size of the control will match the block    size of the `actionElement`.  - "action-element-as-minimum": The minimum block size of the control    will match the block size of the `actionElement`.  If the control is resized at runtime, only the "action-element-as-minimum" value will still work.        | `"action-element" \| "action-element-as-minimum" \| "content"`                   | `"content"`  |
 | `closeOnClickOutside` | `close-on-click-outside` | This property only applies for `"manual"` mode. In native popovers, when using `"manual"` mode the popover doesn't close when clicking outside the control. This property allows to close the popover when clicking outside in `"manual"` mode. With this, the popover will close if the click is triggered on any other element than the popover and the `actionElement`. It will also close if the "Escape" key is pressed.                                                              | `boolean`                                                                        | `false`      |
 | `firstLayer`          | `first-layer`            | `true` if the control is not stacked with another top layer.                                                                                                                                                                                                                                                                                                                                                                                                                               | `boolean`                                                                        | `true`       |
-| `hidden`              | `hidden`                 | Specifies whether the popover is hidden or visible.                                                                                                                                                                                                                                                                                                                                                                                                                                        | `boolean`                                                                        | `true`       |
 | `inlineAlign`         | `inline-align`           | Specifies the inline alignment of the window.                                                                                                                                                                                                                                                                                                                                                                                                                                              | `"center" \| "inside-end" \| "inside-start" \| "outside-end" \| "outside-start"` | `"center"`   |
 | `inlineSizeMatch`     | `inline-size-match`      | Specifies how the popover adapts its inline size.  - "content": The inline size of the control will be determined by its    content inline size.  - "action-element": The inline size of the control will match the inline    size of the `actionElement`.  - "action-element-as-minimum": The minimum inline size of the control    will match the inline size of the `actionElement`.  If the control is resized at runtime, only the "action-element-as-minimum" value will still work. | `"action-element" \| "action-element-as-minimum" \| "content"`                   | `"content"`  |
 | `mode`                | `popover`                | Popovers that have the `"auto"` state can be "light dismissed" by selecting outside the popover area, and generally only allow one popover to be displayed on-screen at a time. By contrast, `"manual"` popovers must always be explicitly hidden, but allow for use cases such as nested popovers in menus.                                                                                                                                                                               | `"auto" \| "manual"`                                                             | `"auto"`     |
 | `overflowBehavior`    | `overflow-behavior`      | Specifies how the popover behaves when the content overflows the window size.   - "overflow": The control won't implement any behavior if the content overflows.   - "add-scroll": The control will place a scroll if the content overflows.                                                                                                                                                                                                                                               | `"add-scroll" \| "overflow"`                                                     | `"overflow"` |
 | `positionTry`         | `position-try`           | Specifies an alternate position to try when the control overflows the window.                                                                                                                                                                                                                                                                                                                                                                                                              | `"flip-block" \| "flip-inline" \| "none"`                                        | `"none"`     |
 | `resizable`           | `resizable`              | Specifies whether the control can be resized. If `true` the control can be resized at runtime by dragging the edges or corners.                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                        | `false`      |
+| `show`                | `show`                   | Specifies whether the popover is hidden or visible.                                                                                                                                                                                                                                                                                                                                                                                                                                        | `boolean`                                                                        | `false`      |
 
 
 ## Events
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index 58c60c499..efc37f42d 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -200,7 +200,7 @@ export class ChTooltip implements ComponentInterface {
             actionElement={this.#getActionElement()}
             blockAlign={this.blockAlign}
             closeOnClickOutside
-            hidden={false}
+            show
             inlineAlign={this.inlineAlign}
             mode="manual"
             // We need to sync the visible state when the popover is closed by an
diff --git a/src/showcase/assets/components/dialog/dialog.showcase.tsx b/src/showcase/assets/components/dialog/dialog.showcase.tsx
index ce36fdc07..6187863f2 100644
--- a/src/showcase/assets/components/dialog/dialog.showcase.tsx
+++ b/src/showcase/assets/components/dialog/dialog.showcase.tsx
@@ -15,7 +15,7 @@ import {
 const state: Partial<HTMLChDialogElement> = {};
 
 const handleClose = () => {
-  state.hidden = true;
+  state.show = false;
 
   // TODO: Until we support external slots in the ch-flexible-layout-render,
   // this is a hack to update the render of the widget and thus re-render the
@@ -24,7 +24,7 @@ const handleClose = () => {
 };
 
 const handleDialogOpen = () => {
-  state.hidden = false;
+  state.show = true;
 
   // TODO: Until we support external slots in the ch-flexible-layout-render,
   // this is a hack to update the render of the widget and thus re-render the
@@ -43,7 +43,7 @@ const render = () => [
     caption={state.caption}
     class="dialog dialog-primary"
     closeButtonAccessibleName={state.closeButtonAccessibleName}
-    hidden={state.hidden}
+    show={state.show}
     modal={state.modal}
     resizable={state.resizable}
     showFooter={state.showFooter}
@@ -84,9 +84,9 @@ const showcaseRenderProperties: ShowcaseRenderProperties<HTMLChDialogElement> =
       columns: 2,
       properties: [
         {
-          id: "hidden",
-          caption: "Hidden",
-          value: true,
+          id: "show",
+          caption: "Show",
+          value: false,
           type: "boolean"
         },
         {
@@ -177,7 +177,7 @@ const showcasePropertiesInfo: ShowcaseTemplatePropertyInfo<HTMLChCheckboxElement
       defaultValue: undefined,
       type: "string"
     },
-    { name: "hidden", defaultValue: false, type: "boolean" },
+    { name: "show", defaultValue: false, type: "boolean" },
     { name: "modal", defaultValue: true, type: "boolean" },
     { name: "resizable", defaultValue: false, type: "boolean" },
     { name: "showFooter", defaultValue: false, type: "boolean" },
diff --git a/src/showcase/assets/components/popover/popover.showcase.tsx b/src/showcase/assets/components/popover/popover.showcase.tsx
index 5d135da92..c931ebbbb 100644
--- a/src/showcase/assets/components/popover/popover.showcase.tsx
+++ b/src/showcase/assets/components/popover/popover.showcase.tsx
@@ -14,7 +14,7 @@ const state: Partial<HTMLChPopoverElement> = {};
 let buttonRef: HTMLButtonElement;
 
 const handlePopoverOpened = () => {
-  state.hidden = false;
+  state.show = true;
 
   // TODO: Until we support external slots in the ch-flexible-layout-render,
   // this is a hack to update the render of the widget and thus re-render the
@@ -23,7 +23,7 @@ const handlePopoverOpened = () => {
 };
 
 const handlePopoverClosed = () => {
-  state.hidden = true;
+  state.show = false;
 
   // TODO: Until we support external slots in the ch-flexible-layout-render,
   // this is a hack to update the render of the widget and thus re-render the
@@ -45,7 +45,7 @@ const render = () => (
         blockSizeMatch={state.blockSizeMatch}
         class="popover-secondary"
         closeOnClickOutside={state.closeOnClickOutside}
-        hidden={state.hidden}
+        show={state.show}
         inlineAlign={state.inlineAlign}
         inlineSizeMatch={state.inlineSizeMatch}
         mode={state.mode}
@@ -97,9 +97,9 @@ const showcaseRenderProperties: ShowcaseRenderProperties<HTMLChPopoverElement> =
       columns: 2,
       properties: [
         {
-          id: "hidden",
-          caption: "Hidden",
-          value: true,
+          id: "show",
+          caption: "Show",
+          value: false,
           type: "boolean"
         },
         {
@@ -314,7 +314,7 @@ const showcasePropertiesInfo: ShowcaseTemplatePropertyInfo<HTMLChPopoverElement>
       type: "string"
     },
     { name: "closeOnClickOutside", defaultValue: false, type: "boolean" },
-    { name: "hidden", defaultValue: true, type: "boolean" },
+    { name: "show", defaultValue: false, type: "boolean" },
     { name: "inlineAlign", defaultValue: "center", type: "string" },
     { name: "inlineSizeMatch", defaultValue: "content", type: "string" },
     { name: "mode", defaultValue: "auto", type: "string" },