Thinking through styles.

Author: Templarian

src/pg/menu/README.md

@@ -1,15 +1,30 @@
 # `<pg-menu>`
 
-The `pg-menu` component renders a menu list.
+The `pg-menu` component renders a menu list. Menus can be used inline, but are usually created by a parent component. For example:
+
+- `button-menu` - Button Menu
+- `button-icon-menu` - Button Icon Menu
+- `PgMenuOverlay` Utility overlay for menus.
 
 ```typescript
 import '@pictogrammers/components/pgMenu.js';
 ```
 
 ```html
-<pg-menu></pg-menu>
+<pg-menu part="menu"></pg-menu>
 ```
 
 | Attributes | Tested   | Description |
 | ---------- | -------- | ----------- |
-| `items`    |          | Set items list. |
+| `items`    |          | Set items list. |
+
+```typescript
+@Part() $menu: PgMenu;
+
+connectedCallback() {
+  this.$menu.items = [{
+    label: 'Item 1',
+    value: 'item1'
+  }];
+}
+```

src/pg/menu/menu.css

@@ -2,7 +2,19 @@
   display: contents;
 }
 
-[part="items"] {
+[part=items] {
   display: flex;
   flex-direction: column;
+  padding: var(--pg-menu-padding, 0);
+  border-width: var(--pg-menu-border-width, 0);
+  border-style: solid;
+  border-radius: 0.25rem;
+}
+
+[part=items] > *:first-child {
+  --pg-menu-item-border-radius-top: var(--pg-menu-border-radius, 0.25rem);
+}
+
+[part=items] > *:last-child {
+  --pg-menu-item-border-radius-bottom: var(--pg-menu-border-radius, 0.25rem);
 }

src/pg/menu/menu.ts

@@ -22,13 +22,13 @@ export default class PgMenu extends HTMLElement {
       container: this.$items,
       items: this.items,
       type: (item) => {
-        return PgMenuItem;
+        return item.type ?? PgMenuItem;
       },
-      create: ($item) => {
+      create: ($item, item) => {
         $item.addEventListener('select', (e: any) => {
           const { index } = e.detail;
           this.dispatchEvent(new CustomEvent('select', {
-            detail: { index }
+            detail: { index, item }
           }))
         });
       }

src/pg/menuItem/README.md

@@ -1,15 +1,15 @@
 # `<pg-menu>`
 
-The `pg-menu` component renders a menu list.
+The `pg-menu-item` is usually rendered as a child of the `pg-menu`.
 
 ```typescript
-import '@pictogrammers/components/pgMenu.js';
+import '@pictogrammers/components/pgMenuItem.js';
 ```
 
 ```html
-<pg-menu></pg-menu>
+<pg-menu-item></pg-menu-item>
 ```
 
 | Attributes | Tested   | Description |
 | ---------- | -------- | ----------- |
-| `items`    |          | Set items list. |
+| `label`    |          | Item label. |

src/pg/menuItem/menuItem.css

@@ -3,5 +3,14 @@
 }
 
 [part=label] {
-  text-align: left;
+  text-align: var(--pg-menu-item-text-align, left);
+  background: var(--pg-menu-item-background, #FFFFFF);
+  padding: var(--pg-menu-padding, 0.25rem 0.5rem);
+  border-color: #453C4F;
+  border-width: 1px;
+  border-style: solid;
+  border-top-left-radius: var(--pg-menu-item-border-radius-top, 0);
+  border-top-right-radius: var(--pg-menu-item-border-radius-top, 0);
+  border-bottom-left-radius: var(--pg-menu-item-border-radius-bottom, 0);
+  border-bottom-right-radius: var(--pg-menu-item-border-radius-bottom, 0);
 }

src/pg/overlayMenu/README.md

@@ -3,6 +3,8 @@
 The `PgOverlayMenu` creates a menu.
 
 ```typescript
+if (this.#isOpen) { return; }
+this.#isOpen = true;
 const result = await PgOverlayMenu.open({
   source: this.$element,
   items: [{
@@ -13,4 +15,5 @@ const result = await PgOverlayMenu.open({
     value: 'item2'
   }]
 });
+console.log(result);
 ```

src/pg/overlayMenu/__examples__/basic/basic.html

@@ -1,3 +1,4 @@
 <div class="example">
   <button part="button">Create Menu Overlay</button>
+  <p>Result: <code part="result"></code></p></p>
 </div>

src/pg/overlayMenu/__examples__/basic/basic.ts

@@ -11,6 +11,7 @@ import style from './basic.css';
 })
 export default class XPgOverlayMenuBasic extends HTMLElement {
   @Part() $button: HTMLButtonElement;
+  @Part() $result: HTMLSpanElement;
 
   connectedCallback() {
     this.$button.addEventListener('click', this.#handleClick.bind(this));
@@ -31,7 +32,7 @@ export default class XPgOverlayMenuBasic extends HTMLElement {
         value: 'item2'
       }]
     });
-    console.log(result);
+    this.$result.textContent = result;
     this.#menuOpen = false;
   }
 }

src/pg/overlayMenu/overlayMenu.css

@@ -8,4 +8,5 @@
   min-width: anchor-size();
   padding: 0;
   border: 0;
+  position-try-fallbacks: flip-block;
 }