feat(sidebar): rename demoGroup to demoGroups, add multi-group support, search by group name, and context menu group navigation

test/elements/index.ts

@@ -5,7 +5,7 @@ export * from './test-withwrapper.js';
 export * from './test-edgecases.js';
 export * from './test-nested.js';
 
-// Grouped elements to demo the demoGroup feature
+// Grouped elements to demo the demoGroups feature
 export * from './test-button-primary.js';
 export * from './test-button-secondary.js';
 export * from './test-button-danger.js';

test/elements/test-button-danger.ts

@@ -9,7 +9,7 @@ import {
 @customElement('test-button-danger')
 export class TestButtonDanger extends DeesElement {
   // Same group as other buttons
-  public static demoGroup = 'Buttons';
+  public static demoGroups = 'Buttons';
 
   public static demo = () => html`
     <test-button-danger>Delete</test-button-danger>

test/elements/test-button-primary.ts

@@ -9,7 +9,7 @@ import {
 @customElement('test-button-primary')
 export class TestButtonPrimary extends DeesElement {
   // This groups the element with other "Buttons" in the sidebar
-  public static demoGroup = 'Buttons';
+  public static demoGroups = 'Buttons';
 
   public static demo = () => html`
     <test-button-primary>Click Me</test-button-primary>

test/elements/test-button-secondary.ts

@@ -9,7 +9,7 @@ import {
 @customElement('test-button-secondary')
 export class TestButtonSecondary extends DeesElement {
   // Same group as test-button-primary - they'll appear together
-  public static demoGroup = 'Buttons';
+  public static demoGroups = 'Buttons';
 
   public static demo = () => html`
     <test-button-secondary>Secondary Action</test-button-secondary>

test/elements/test-input-checkbox.ts

@@ -9,7 +9,7 @@ import {
 @customElement('test-input-checkbox')
 export class TestInputCheckbox extends DeesElement {
   // Same group as test-input-text
-  public static demoGroup = 'Inputs';
+  public static demoGroups = ['Inputs', 'A Second Group'];
 
   public static demo = () => html`
     <test-input-checkbox label="Accept terms and conditions"></test-input-checkbox>

test/elements/test-input-text.ts

@@ -9,7 +9,7 @@ import {
 @customElement('test-input-text')
 export class TestInputText extends DeesElement {
   // Different group - "Inputs"
-  public static demoGroup = 'Inputs';
+  public static demoGroups = 'Inputs';
 
   public static demo = () => html`
     <test-input-text placeholder="Enter text..."></test-input-text>