@gsa-tts/graymatter-ui 0.2.7 → 0.3.0

package/README.md

@@ -0,0 +1,81 @@
+# GrayMatter UI Package
+
+## ProfileMenu Component - Event-Driven Architecture
+
+The ProfileMenu component uses a custom event system to handle menu item actions, avoiding issues with function serialization in Astro apps.
+
+### Usage
+
+#### 1. Define Menu Items with Action Strings
+
+```typescript
+const profileMenuData = {
+  userMeta: {
+    initials: 'ZW',
+  },
+  menuItems: [
+    {
+      label: 'Settings',
+      icon: '/path/to/icon.svg',
+      action: 'settings', // String identifier
+    },
+    {
+      label: 'Log out',
+      icon: '/path/to/icon.svg',
+      action: 'logout', // String identifier
+    },
+  ],
+};
+```
+
+#### 2. Listen for Profile Menu Actions
+
+```typescript
+// In your app's main layout or component
+window.addEventListener('profileMenuAction', (event) => {
+  const { action, userMeta, timestamp } = event.detail;
+  
+  switch (action) {
+    case 'settings':
+      // Handle settings action
+      console.log('Settings clicked for user:', userMeta);
+      break;
+    case 'logout':
+      // Handle logout action
+      console.log('Logout clicked for user:', userMeta);
+      break;
+    default:
+      console.warn('Unknown profile menu action:', action);
+  }
+});
+```
+
+### Event Details
+
+The `profileMenuAction` event includes:
+
+- **action**: String identifier for the menu item action
+- **userMeta**: User metadata object
+- **timestamp**: When the action was triggered
+
+### Benefits
+
+- ✅ **No serialization issues** - Works with both Astro and Svelte apps
+- ✅ **Type safe** - No runtime function evaluation
+- ✅ **Secure** - No `new Function()` usage
+- ✅ **Debuggable** - Clear event flow
+- ✅ **Flexible** - Each app can handle actions differently
+- ✅ **Shadow DOM compatible** - Events bubble through web component boundaries
+
+### Shadow DOM & Web Component Support
+
+The ProfileMenu component is designed to work in both regular DOM and Shadow DOM contexts:
+
+- **Regular DOM**: Events bubble up to `window` as expected
+- **Shadow DOM**: Events are configured with `bubbles: true` and `composed: true` to cross Shadow DOM boundaries
+- **Web Components**: Events are dispatched from the component element to ensure proper bubbling
+
+This makes the component compatible with:
+- Astro apps using the component directly
+- Svelte apps using the web component version
+- Any other framework using the web component

package/assets/images/favicon-dark.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0948 18.1253C18.0948 16.6694 16.8854 15.4856 15.3983 15.4856H12.6294C12.152 15.4856 11.7628 15.107 11.7628 14.6406C11.7628 14.1742 12.1511 13.7956 12.6294 13.7956H17.6731V12H12.217C10.7308 12 9.52148 13.1846 9.52148 14.6406C9.52148 16.0966 10.7308 17.2812 12.217 17.2812H14.9859C15.4634 17.2812 15.8525 17.6598 15.8525 18.1262C15.8525 18.5926 15.4643 18.9712 14.9859 18.9712H9.75091V20.7659H15.3983C16.8854 20.7659 18.0948 19.5813 18.0948 18.1262V18.1253Z" fill="white"/>
+<path d="M25.8147 19.4146L25.8278 19.4305L26.295 20.7659H28.5001L25.4283 12H21.4798L18.4081 20.765H20.6132L21.086 19.4146H25.8147ZM21.7417 17.5445L23.0551 13.7956H23.8521L23.8577 13.8106L25.1766 17.5738H21.7315L21.7417 17.5445Z" fill="white"/>
+<path d="M8.5473 12H6.46203V16.7447C6.46203 18.4303 5.33068 19.0306 4.27272 19.0306C2.84043 19.0306 2.08342 18.2397 2.08342 16.7447V12H0V17.1021C0 18.2096 0.459782 19.216 1.29389 19.936C2.08899 20.6223 3.14695 21 4.27365 21C6.39794 21 8.5473 19.6611 8.5473 17.1012V12Z" fill="white"/>
+<path d="M31.9635 14.9368H29.4993V20.7659H31.9635V14.9368Z" fill="white"/>
+<path d="M31.9997 12H29.4993V13.7947H31.9997V12Z" fill="white"/>
+</svg>

package/assets/images/favicon-light.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0948 18.1253C18.0948 16.6694 16.8854 15.4856 15.3984 15.4856H12.6294C12.152 15.4856 11.7628 15.107 11.7628 14.6406C11.7628 14.1742 12.1511 13.7956 12.6294 13.7956H17.6731V12H12.217C10.7309 12 9.52151 13.1846 9.52151 14.6406C9.52151 16.0966 10.7309 17.2812 12.217 17.2812H14.9859C15.4634 17.2812 15.8526 17.6598 15.8526 18.1262C15.8526 18.5926 15.4643 18.9712 14.9859 18.9712H9.75093V20.7659H15.3984C16.8854 20.7659 18.0948 19.5804 18.0948 18.1253Z" fill="black"/>
+<path d="M25.8148 19.4146L25.8278 19.4305L26.295 20.7659H28.5001L25.4284 12H21.4798L18.4081 20.765H20.6132L21.086 19.4146H25.8148ZM21.7417 17.5445L23.0551 13.7956H23.8521L23.8577 13.8106L25.1766 17.5738H21.7315L21.7417 17.5445Z" fill="black"/>
+<path d="M8.5473 12H6.46203V16.7447C6.46203 18.4303 5.33068 19.0306 4.27272 19.0306C2.84043 19.0306 2.08342 18.2397 2.08342 16.7447V12H0V17.1021C0 18.2096 0.459782 19.216 1.29389 19.936C2.08899 20.6223 3.14695 21 4.27365 21C6.39794 21 8.5473 19.6611 8.5473 17.1012V12Z" fill="black"/>
+<path d="M31.9635 14.9368H29.4992V20.7659H31.9635V14.9368Z" fill="black"/>
+<path d="M31.9997 12H29.4992V13.7947H31.9997V12Z" fill="black"/>
+</svg>

package/assets/images/favicon.svg

@@ -1,8 +1,7 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="32" height="32" rx="4" fill="white"/>
-<path d="M17.8273 17.3354C17.8273 15.9765 16.7497 14.8716 15.4246 14.8716H12.9574C12.5321 14.8716 12.1853 14.5182 12.1853 14.0828C12.1853 13.6475 12.5312 13.2941 12.9574 13.2941H17.4514V11.6181H12.59C11.2658 11.6181 10.1882 12.7239 10.1882 14.0828C10.1882 15.4418 11.2658 16.5475 12.59 16.5475H15.0572C15.4825 16.5475 15.8293 16.9009 15.8293 17.3363C15.8293 17.7716 15.4834 18.125 15.0572 18.125H10.3926V19.8001H15.4246C16.7497 19.8001 17.8273 18.6936 17.8273 17.3354Z" fill="black"/>
-<path d="M24.7066 18.5388L24.7182 18.5537L25.1345 19.8001H27.0993L24.3622 11.6181H20.844L18.107 19.7993H20.0718L20.4931 18.5388H24.7066ZM21.0774 16.7933L22.2476 13.2941H22.9577L22.9627 13.3082L24.138 16.8206H21.0683L21.0774 16.7933Z" fill="black"/>
-<path d="M9.31987 11.6181H7.46183V16.0468C7.46183 17.6202 6.45378 18.1805 5.5111 18.1805C4.23488 18.1805 3.56036 17.4422 3.56036 16.0468V11.6181H1.70398V16.3804C1.70398 17.4141 2.11366 18.3534 2.85687 19.0255C3.56533 19.6661 4.508 20.0186 5.51193 20.0186C7.40472 20.0186 9.31987 18.7689 9.31987 16.3795V11.6181Z" fill="black"/>
-<path d="M30.1838 14.3592H27.9881V19.8001H30.1838V14.3592Z" fill="black"/>
-<path d="M30.2161 11.6181H27.9881V13.2933H30.2161V11.6181Z" fill="black"/>
+<path d="M18.0948 18.1253C18.0948 16.6694 16.8854 15.4856 15.3984 15.4856H12.6294C12.152 15.4856 11.7628 15.107 11.7628 14.6406C11.7628 14.1742 12.1511 13.7956 12.6294 13.7956H17.6731V12H12.217C10.7309 12 9.52151 13.1846 9.52151 14.6406C9.52151 16.0966 10.7309 17.2812 12.217 17.2812H14.9859C15.4634 17.2812 15.8526 17.6598 15.8526 18.1262C15.8526 18.5926 15.4643 18.9712 14.9859 18.9712H9.75093V20.7659H15.3984C16.8854 20.7659 18.0948 19.5804 18.0948 18.1253Z" fill="black"/>
+<path d="M25.8148 19.4146L25.8278 19.4305L26.295 20.7659H28.5001L25.4284 12H21.4798L18.4081 20.765H20.6132L21.086 19.4146H25.8148ZM21.7417 17.5445L23.0551 13.7956H23.8521L23.8577 13.8106L25.1766 17.5738H21.7315L21.7417 17.5445Z" fill="black"/>
+<path d="M8.5473 12H6.46203V16.7447C6.46203 18.4303 5.33068 19.0306 4.27272 19.0306C2.84043 19.0306 2.08342 18.2397 2.08342 16.7447V12H0V17.1021C0 18.2096 0.459782 19.216 1.29389 19.936C2.08899 20.6223 3.14695 21 4.27365 21C6.39794 21 8.5473 19.6611 8.5473 17.1012V12Z" fill="black"/>
+<path d="M31.9635 14.9368H29.4992V20.7659H31.9635V14.9368Z" fill="black"/>
+<path d="M31.9997 12H29.4992V13.7947H31.9997V12Z" fill="black"/>
 </svg>