Add the menu divider

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-popup",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "",
   "main": "tp-popup.js",
   "scripts": {

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);

tp-popup-menu-item.js

@@ -40,7 +40,7 @@ class TpPopupMenuItem extends LitElement {
     return html`
       <div class="wrap" ?noicon=${!icon}>
         ${icon ? html`
-        <tp-icon .icon=${icon}></tp-icon>
+        <tp-icon part="icon" .icon=${icon}></tp-icon>
         ` : null}
         <div class="label">
           <slot></slot>