From 6ec34356b154b4baee9689f67229f3798c0dbb2d Mon Sep 17 00:00:00 2001
From: Jakob Vogelsang <jakob.vogelsang@omicronenergy.com>
Date: Thu, 4 Nov 2021 17:49:30 +0100
Subject: [PATCH 1/4] fix(editor-container): prevent margin collapse

---
 src/editor-container.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/editor-container.ts b/src/editor-container.ts
index fa65d5d9a8..de900c2e6c 100644
--- a/src/editor-container.ts
+++ b/src/editor-container.ts
@@ -195,7 +195,7 @@ export class EditorContainer extends LitElement {
       transition: all 200ms linear;
       outline-style: solid;
       margin: 8px 12px 16px;
-      padding: 0.02px; /*Dirty hack to force outline around content with margin*/
+      overflow: hidden;
       outline-width: 0px;
       outline-color: var(--mdc-theme-primary);
       opacity: 1;
@@ -215,6 +215,7 @@ export class EditorContainer extends LitElement {
 
     .nomargin {
       margin: 0px;
+      overflow: visible;
     }
 
     .container:focus {

From a92f950f7dc5fe623add6224216344710b0ad9a3 Mon Sep 17 00:00:00 2001
From: Jakob Vogelsang <jakob.vogelsang@omicronenergy.com>
Date: Thu, 4 Nov 2021 18:01:14 +0100
Subject: [PATCH 2/4] refactor(editor-container): remove child slot name

---
 __snapshots__/bay-editor.md           | 10 ++--------
 __snapshots__/substation-editor.md    | 14 ++++----------
 __snapshots__/voltage-level-editor.md | 10 ++--------
 src/editor-container.ts               |  2 +-
 src/zeroline/bay-editor.ts            |  4 ++--
 src/zeroline/substation-editor.ts     |  3 +--
 src/zeroline/voltage-level-editor.ts  |  4 ++--
 test/unit/editor-container.test.ts    |  6 +++---
 8 files changed, 17 insertions(+), 36 deletions(-)

diff --git a/__snapshots__/bay-editor.md b/__snapshots__/bay-editor.md
index bfe07396d4..f6e5987036 100644
--- a/__snapshots__/bay-editor.md
+++ b/__snapshots__/bay-editor.md
@@ -39,10 +39,7 @@
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
-  <div
-    id="ceContainer"
-    slot="container"
-  >
+  <div id="ceContainer">
     <conducting-equipment-editor>
     </conducting-equipment-editor>
     <conducting-equipment-editor>
@@ -99,10 +96,7 @@
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
-  <div
-    id="ceContainer"
-    slot="container"
-  >
+  <div id="ceContainer">
     <conducting-equipment-editor readonly="">
     </conducting-equipment-editor>
     <conducting-equipment-editor readonly="">
diff --git a/__snapshots__/substation-editor.md b/__snapshots__/substation-editor.md
index 0c837f5a64..1aa898d987 100644
--- a/__snapshots__/substation-editor.md
+++ b/__snapshots__/substation-editor.md
@@ -39,9 +39,9 @@
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
-  <voltage-level-editor slot="container">
+  <voltage-level-editor>
   </voltage-level-editor>
-  <voltage-level-editor slot="container">
+  <voltage-level-editor>
   </voltage-level-editor>
 </editor-container>
 
@@ -88,15 +88,9 @@
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
-  <voltage-level-editor
-    readonly=""
-    slot="container"
-  >
+  <voltage-level-editor readonly="">
   </voltage-level-editor>
-  <voltage-level-editor
-    readonly=""
-    slot="container"
-  >
+  <voltage-level-editor readonly="">
   </voltage-level-editor>
 </editor-container>
 
diff --git a/__snapshots__/voltage-level-editor.md b/__snapshots__/voltage-level-editor.md
index 4060db6e6f..8c252926b4 100644
--- a/__snapshots__/voltage-level-editor.md
+++ b/__snapshots__/voltage-level-editor.md
@@ -40,10 +40,7 @@
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
-  <div
-    id="bayContainer"
-    slot="container"
-  >
+  <div id="bayContainer">
     <bay-editor>
     </bay-editor>
     <bay-editor>
@@ -95,10 +92,7 @@
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
-  <div
-    id="bayContainer"
-    slot="container"
-  >
+  <div id="bayContainer">
     <bay-editor readonly="">
     </bay-editor>
     <bay-editor readonly="">
diff --git a/src/editor-container.ts b/src/editor-container.ts
index de900c2e6c..24697f472e 100644
--- a/src/editor-container.ts
+++ b/src/editor-container.ts
@@ -181,7 +181,7 @@ export class EditorContainer extends LitElement {
       tabindex="0"
     >
       ${this.renderHeader()}
-      <slot name="container"></slot>
+      <slot></slot>
     </section>`;
   }
 
diff --git a/src/zeroline/bay-editor.ts b/src/zeroline/bay-editor.ts
index 5eb0cb8bb3..62b1153837 100644
--- a/src/zeroline/bay-editor.ts
+++ b/src/zeroline/bay-editor.ts
@@ -60,7 +60,7 @@ export class BayEditor extends LitElement {
   renderIedContainer(): TemplateResult {
     const ieds = this.getAttachedIeds?.(this.element) ?? [];
     return ieds?.length
-      ? html`<div slot="container" id="iedcontainer">
+      ? html`<div id="iedcontainer">
           ${ieds.map(ied => html`<ied-editor .element=${ied}></ied-editor>`)}
         </div>`
       : html``;
@@ -99,7 +99,7 @@ export class BayEditor extends LitElement {
         ></mwc-icon-button>
       </abbr>
       ${this.renderIedContainer()}
-      <div slot="container" id="ceContainer">
+      <div id="ceContainer">
         ${Array.from(
           getChildElementsByTagName(this.element, 'ConductingEquipment')
         ).map(
diff --git a/src/zeroline/substation-editor.ts b/src/zeroline/substation-editor.ts
index 0bed9b13ef..3a970313b7 100644
--- a/src/zeroline/substation-editor.ts
+++ b/src/zeroline/substation-editor.ts
@@ -63,7 +63,7 @@ export class SubstationEditor extends LitElement {
   renderIedContainer(): TemplateResult {
     const ieds = this.getAttachedIeds?.(this.element) ?? [];
     return ieds?.length
-      ? html`<div id="iedcontainer" slot="container">
+      ? html`<div id="iedcontainer">
           ${ieds.map(ied => html`<ied-editor .element=${ied}></ied-editor>`)}
         </div>`
       : html``;
@@ -110,7 +110,6 @@ export class SubstationEditor extends LitElement {
         ).map(
           voltageLevel =>
             html`<voltage-level-editor
-              slot="container"
               .element=${voltageLevel}
               .getAttachedIeds=${this.getAttachedIeds}
               ?readonly=${this.readonly}
diff --git a/src/zeroline/voltage-level-editor.ts b/src/zeroline/voltage-level-editor.ts
index cf57963573..091bf73e51 100644
--- a/src/zeroline/voltage-level-editor.ts
+++ b/src/zeroline/voltage-level-editor.ts
@@ -79,7 +79,7 @@ export class VoltageLevelEditor extends LitElement {
   renderIedContainer(): TemplateResult {
     const ieds = this.getAttachedIeds?.(this.element) ?? [];
     return ieds?.length
-      ? html`<div id="iedcontainer" slot="container">
+      ? html`<div id="iedcontainer">
           ${ieds.map(ied => html`<ied-editor .element=${ied}></ied-editor>`)}
         </div>`
       : html``;
@@ -121,7 +121,7 @@ export class VoltageLevelEditor extends LitElement {
         ></mwc-icon-button>
       </abbr>
       ${this.renderIedContainer()}
-      <div id="bayContainer" slot="container">
+      <div id="bayContainer">
         ${Array.from(this.element?.querySelectorAll(selectors.Bay) ?? []).map(
           bay => html`<bay-editor
             .element=${bay}
diff --git a/test/unit/editor-container.test.ts b/test/unit/editor-container.test.ts
index 7f72731b8b..5d878c37bb 100644
--- a/test/unit/editor-container.test.ts
+++ b/test/unit/editor-container.test.ts
@@ -184,7 +184,7 @@ describe('editor-container', () => {
     );
     beforeEach(async () => {
       parent = await fixture(
-        `<editor-container header="parent header"><bay-editor .element=${bay} slot="container"></bay-editor></editor-container>`
+        `<editor-container header="parent header"><bay-editor .element=${bay}></bay-editor></editor-container>`
       );
 
       element = parent
@@ -217,7 +217,7 @@ describe('editor-container', () => {
 
     it('negated the set contrasted property of the parent', async () => {
       parent = await fixture(
-        `<editor-container contrasted header="parent header"><bay-editor .element=${bay} slot="container"></bay-editor></editor-container>`
+        `<editor-container contrasted header="parent header"><bay-editor .element=${bay}></bay-editor></editor-container>`
       );
 
       element = parent
@@ -230,7 +230,7 @@ describe('editor-container', () => {
 
     it('makes sure maximum level is 6', async () => {
       parent = await fixture(
-        `<editor-container level="6" header="parent header"><bay-editor .element=${bay} slot="container"></bay-editor></editor-container>`
+        `<editor-container level="6" header="parent header"><bay-editor .element=${bay}></bay-editor></editor-container>`
       );
 
       element = parent

From 8f940af97f3c6c5d3aa7b87e59f9c2b7c7233b9a Mon Sep 17 00:00:00 2001
From: Jakob Vogelsang <jakob.vogelsang@omicronenergy.com>
Date: Fri, 5 Nov 2021 17:58:12 +0100
Subject: [PATCH 3/4] fix(editor-container): make sure focus is triggered for
 slotted elements

---
 __snapshots__/zeroline-pane.md |  6 +++---
 src/editor-container.ts        | 31 ++++++++++++++-----------------
 src/zeroline-pane.ts           |  2 +-
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/__snapshots__/zeroline-pane.md b/__snapshots__/zeroline-pane.md
index 70407a3c77..ac4841d37a 100644
--- a/__snapshots__/zeroline-pane.md
+++ b/__snapshots__/zeroline-pane.md
@@ -35,7 +35,7 @@
     </abbr>
   </nav>
 </h1>
-<section tabindex="0">
+<section>
   <substation-editor>
   </substation-editor>
   <substation-editor>
@@ -79,7 +79,7 @@
     </abbr>
   </nav>
 </h1>
-<section tabindex="0">
+<section>
   <substation-editor readonly="">
   </substation-editor>
   <substation-editor readonly="">
@@ -123,7 +123,7 @@
     </abbr>
   </nav>
 </h1>
-<section tabindex="0">
+<section>
   <substation-editor>
   </substation-editor>
   <substation-editor>
diff --git a/src/editor-container.ts b/src/editor-container.ts
index 24697f472e..a15aac31ae 100644
--- a/src/editor-container.ts
+++ b/src/editor-container.ts
@@ -89,6 +89,8 @@ export class EditorContainer extends LitElement {
     );
 
     this.contrasted = !parentEditorContainer.contrasted;
+
+    this.tabIndex = 0;
   }
 
   private renderAddButtons(): TemplateResult[] {
@@ -178,7 +180,6 @@ export class EditorContainer extends LitElement {
         contrasted: this.contrasted,
         nomargin: this.nomargin,
       })}"
-      tabindex="0"
     >
       ${this.renderHeader()}
       <slot></slot>
@@ -186,7 +187,7 @@ export class EditorContainer extends LitElement {
   }
 
   static styles = css`
-    :host(.moving) section {
+    :host(.moving) .container {
       opacity: 0.3;
     }
 
@@ -218,32 +219,28 @@ export class EditorContainer extends LitElement {
       overflow: visible;
     }
 
-    .container:focus {
-      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-        0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+    :host {
+      outline: none;
     }
 
-    .container:focus-within {
+    :host(:focus-within) .container {
+      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
       outline-width: 2px;
       transition: all 250ms linear;
     }
 
-    .container:focus-within h1,
-    .container:focus-within h2,
-    .container:focus-within h3 {
+    :host(:focus-within) h1,
+    :host(:focus-within) h2,
+    :host(:focus-within) h3 {
       color: var(--mdc-theme-surface);
       transition: background-color 200ms linear;
-    }
-
-    .container:focus-within h1,
-    .container:focus-within h2,
-    .container:focus-within h3 {
       background-color: var(--mdc-theme-primary);
     }
 
-    .container.secondary:focus-within h1,
-    .container.secondary:focus-within h2,
-    .container.secondary:focus-within h3 {
+    :host(:focus-within) .container.secondary h1,
+    :host(:focus-within) .container.secondary h2,
+    :host(:focus-within) .container.secondary h3 {
       background-color: var(--mdc-theme-secondary);
     }
 
diff --git a/src/zeroline-pane.ts b/src/zeroline-pane.ts
index 36bf777c21..75abf52ded 100644
--- a/src/zeroline-pane.ts
+++ b/src/zeroline-pane.ts
@@ -121,7 +121,7 @@ export class ZerolinePane extends LitElement {
       </h1>
       ${this.renderIedContainer()}
       ${this.doc?.querySelector(':root > Substation')
-        ? html`<section tabindex="0">
+        ? html`<section>
             ${Array.from(this.doc.querySelectorAll('Substation') ?? [])
               .filter(isPublic)
               .map(

From 05aadfaf2317032ed964ac28914651c9fa3aedca Mon Sep 17 00:00:00 2001
From: Jakob Vogelsang <jakob.vogelsang@omicronenergy.com>
Date: Fri, 5 Nov 2021 18:16:13 +0100
Subject: [PATCH 4/4] fix(editor-container): make sure menu is in the right
 upper corner

---
 src/editor-container.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/editor-container.ts b/src/editor-container.ts
index a15aac31ae..40f96ea24c 100644
--- a/src/editor-container.ts
+++ b/src/editor-container.ts
@@ -76,7 +76,9 @@ export class EditorContainer extends LitElement {
 
   async firstUpdated(): Promise<void> {
     await super.updateComplete;
+
     if (this.addMenu) this.addMenu.anchor = this.headerContainer;
+
     const parentEditorContainer =
       <EditorContainer>(
         (<ShadowRoot>this.parentNode).host?.closest('editor-container')
@@ -124,6 +126,7 @@ export class EditorContainer extends LitElement {
               id="menu"
               corner="TOP_RIGHT"
               menuCorner="END"
+              .anchor=${this.headerContainer}
               @selected=${(e: Event) => {
                 const tagName = (<ListItem>(<Menu>e.target).selected).value;
                 this.openCreateWizard(tagName);