From 5138a5c2796cdb673d236c2899398aa8d86ee12c Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Thu, 6 Feb 2025 22:26:55 +0100
Subject: [PATCH] Add the menu divider

---
 package.json             |  2 +-
 tp-popup-menu-divider.js | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 tp-popup-menu-divider.js

diff --git a/package.json b/package.json
index f621e31..3b965b1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-popup",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "",
   "main": "tp-popup.js",
   "scripts": {
diff --git a/tp-popup-menu-divider.js b/tp-popup-menu-divider.js
new file mode 100644
index 0000000..4965ffb
--- /dev/null
+++ b/tp-popup-menu-divider.js
@@ -0,0 +1,38 @@
+/**
+@license
+Copyright (c) 2025 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import '@tp/tp-icon/tp-icon.js';
+import { LitElement, html, css } from 'lit';
+
+class TpPopupMenuDivider extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          --tp-popup-menu-divider-spacing: 5px;
+        }
+
+        .divider {
+          margin-top: var(--tp-popup-menu-divider-spacing-top, var(--tp-popup-menu-divider-spacing));
+          margin-bottom: var(--tp-popup-menu-divider-spacing-bottom, var(--tp-popup-menu-divider-spacing));
+          height: var(--tp-popup-menu-divider-width, 2px);
+          background: var(--tp-popup-menu-divider-color, #000);
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { icon } = this;
+
+    return html`
+      <div class="divider"></div>
+    `;
+  }
+}
+
+window.customElements.define('tp-popup-menu-divider', TpPopupMenuDivider);