From 9b71096453cb2554fc20e684936f14dd4d052d1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 8 Nov 2024 10:35:33 +0100
Subject: [PATCH 1/2] block area component

---
 .../block-grid-area.element.ts                | 39 +++++++++++++++++++
 .../components/block-grid-area/index.ts       |  1 +
 2 files changed, 40 insertions(+)
 create mode 100644 src/packages/block/block-grid/components/block-grid-area/block-grid-area.element.ts
 create mode 100644 src/packages/block/block-grid/components/block-grid-area/index.ts

diff --git a/src/packages/block/block-grid/components/block-grid-area/block-grid-area.element.ts b/src/packages/block/block-grid/components/block-grid-area/block-grid-area.element.ts
new file mode 100644
index 0000000000..a12676647e
--- /dev/null
+++ b/src/packages/block/block-grid/components/block-grid-area/block-grid-area.element.ts
@@ -0,0 +1,39 @@
+import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from '../../context/block-grid-entries.context-token.js';
+import { UmbBlockGridEntriesElement } from '../block-grid-entries/index.js';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+
+/**
+ * @description
+ * This element is used to render a single block grid area.
+ */
+@customElement('umb-block-grid-area')
+export class UmbBlockGridAreasContainerElement extends UmbBlockGridEntriesElement {
+	//
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_BLOCK_GRID_ENTRIES_CONTEXT, (context) => {
+			this.observe(
+				context.layoutColumns,
+				(layoutColumns) => {
+					this.layoutColumns = layoutColumns;
+				},
+				'observeParentEntriesLayoutColumns',
+			);
+		}).skipHost();
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		// eslint-disable-next-line wc/no-self-class
+		this.classList.add('umb-block-grid__area');
+	}
+}
+
+export default UmbBlockGridAreasContainerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-block-grid-area': UmbBlockGridAreasContainerElement;
+	}
+}
diff --git a/src/packages/block/block-grid/components/block-grid-area/index.ts b/src/packages/block/block-grid/components/block-grid-area/index.ts
new file mode 100644
index 0000000000..c81f975a43
--- /dev/null
+++ b/src/packages/block/block-grid/components/block-grid-area/index.ts
@@ -0,0 +1 @@
+export * from './block-grid-area.element.js';

From c0f2f8a6983046f081cc25426d9b21fbc2b7d636 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 8 Nov 2024 10:36:51 +0100
Subject: [PATCH 2/2] clean jsdocs

---
 .../block-grid-areas-container.element.ts                      | 1 -
 .../block-grid-block-inline/block-grid-block-inline.element.ts | 3 ---
 .../components/block-grid-block/block-grid-block.element.ts    | 3 ---
 3 files changed, 7 deletions(-)

diff --git a/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts b/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts
index adb7ceea0d..c5e9c6c3b9 100644
--- a/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts
+++ b/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts
@@ -6,7 +6,6 @@ import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice
 
 import '../block-grid-entries/index.js';
 /**
- * @element umb-block-grid-areas-container
  * @description
  * This element is used to render the block grid areas.
  */
diff --git a/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts b/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
index 06156a1b8f..f57aa3857f 100644
--- a/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
+++ b/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
@@ -25,9 +25,6 @@ const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest:
 	return [{ manifest }];
 };
 
-/**
- * @element umb-block-grid-block-inline
- */
 @customElement('umb-block-grid-block-inline')
 export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	//
diff --git a/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts b/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
index 3cf7b091f9..94364384e3 100644
--- a/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
+++ b/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
@@ -7,9 +7,6 @@ import '@umbraco-cms/backoffice/ufm';
 import '../block-grid-areas-container/index.js';
 import '../ref-grid-block/index.js';
 
-/**
- * @element umb-block-grid-block
- */
 @customElement('umb-block-grid-block')
 export class UmbBlockGridBlockElement extends UmbLitElement {
 	//