Create new 0.8.2 version of the spec to support filtering and types for dropdown

Author: dmandar

renderers/lit/src/0.8/ui/icon.ts

@@ -43,7 +43,7 @@ export class Icon extends Root {
       }
 
       .g-icon {
-        font-family: 'Material Icons';
+        font-family: 'Material Symbols Outlined';
         font-weight: normal;
         font-style: normal;
         font-size: 24px;

renderers/lit/src/0.8/ui/multiple-choice.ts

@@ -35,9 +35,18 @@ export class MultipleChoice extends Root {
   @property()
   accessor selections: Primitives.StringValue | string[] = [];
 
+  @property()
+  accessor type: "checkbox" | "chips" = "checkbox";
+
+  @property({ type: Boolean })
+  accessor filterable = false;
+
   @state()
   accessor isOpen = false;
 
+  @state()
+  accessor filterText = "";
+
   static styles = [
     structuralStyles,
     css`
@@ -95,25 +104,57 @@ export class MultipleChoice extends Root {
         transform: rotate(180deg);
       }
 
-      /* Dropdown List */
-      .options-list {
+      /* Dropdown Wrapper */
+      .dropdown-wrapper {
         background: var(--md-sys-color-surface);
         border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 8px; /* Consistent rounding */
-        box-shadow: none; /* Remove shadow for inline feel, or keep subtle */
-        overflow-y: auto;
+        border-radius: 8px;
+        box-shadow: var(--md-sys-elevation-level2);
         padding: 0;
         display: none;
         flex-direction: column;
-        margin-top: 4px; /* Small gap */
-        max-height: 0; /* Animate height? */
-        transition: max-height 0.2s ease-out;
+        margin-top: 4px;
+        max-height: 300px;
+        transition: opacity 0.2s ease-out;
+        overflow: hidden; /* contain children */
       }
 
-      .options-list.open {
+      .dropdown-wrapper.open {
         display: flex;
-        max-height: 300px; /* Limit height but allow scrolling */
-        border: 1px solid var(--md-sys-color-outline-variant); /* efficient border */
+        border: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      /* Scrollable Area for Options */
+      .options-scroll-container {
+        overflow-y: auto;
+        flex: 1; /* take remaining height */
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* Filter Input */
+      .filter-container {
+        padding: 8px;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        background: var(--md-sys-color-surface);
+        z-index: 1; /* ensure top of stack */
+        flex-shrink: 0; /* don't shrink */
+      }
+
+      .filter-input {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 4px;
+        font-family: inherit;
+        font-size: 0.9rem;
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .filter-input:focus {
+        outline: none;
+        border-color: var(--md-sys-color-primary);
       }
 
       /* Option Item (Checkbox style) */
@@ -164,6 +205,54 @@ export class MultipleChoice extends Root {
         transform: scale(1);
       }
 
+      /* Chips Layout */
+      .chips-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        padding: 4px 0;
+      }
+
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 16px;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 16px;
+        cursor: pointer;
+        user-select: none;
+        background: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        transition: all 0.2s ease;
+        font-size: 0.9rem;
+      }
+
+      .chip:hover {
+        background: var(--md-sys-color-surface-container-high);
+      }
+
+      .chip.selected {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        border-color: var(--md-sys-color-secondary-container);
+      }
+      
+      .chip.selected:hover {
+         background: var(--md-sys-color-secondary-container-high, #e8def8); 
+      }
+
+      .chip-icon {
+        display: none;
+        width: 18px;
+        height: 18px;
+      }
+      
+      .chip.selected .chip-icon {
+        display: block;
+        fill: currentColor;
+      }
+
       @keyframes fadeIn {
         from { opacity: 0; transform: translateY(-8px); }
         to { opacity: 1; transform: translateY(0); }
@@ -217,8 +306,78 @@ export class MultipleChoice extends Root {
     this.requestUpdate();
   }
 
+  #renderFilter() {
+    return html`
+      <div class="filter-container">
+        <input 
+          type="text" 
+          class="filter-input" 
+          placeholder="Filter options..." 
+          .value=${this.filterText}
+          @input=${(e: Event) => {
+        const target = e.target as HTMLInputElement;
+        this.filterText = target.value;
+      }}
+          @click=${(e: Event) => e.stopPropagation()}
+        />
+      </div>
+    `;
+  }
+
   render() {
     const currentSelections = this.getCurrentSelections();
+
+    // Filter options
+    const filteredOptions = this.options.filter(option => {
+      if (!this.filterText) return true;
+      const label = extractStringValue(
+        option.label,
+        this.component,
+        this.processor,
+        this.surfaceId
+      );
+      return label.toLowerCase().includes(this.filterText.toLowerCase());
+    });
+
+    // Chips Layout
+    if (this.type === "chips") {
+      return html`
+          <div class="container">
+            ${this.description ? html`<div class="header-text" style="margin-bottom: 8px;">${this.description}</div>` : nothing}
+            ${this.filterable ? this.#renderFilter() : nothing}
+            <div class="chips-container">
+              ${filteredOptions.map((option) => {
+        const label = extractStringValue(
+          option.label,
+          this.component,
+          this.processor,
+          this.surfaceId
+        );
+        const isSelected = currentSelections.includes(option.value);
+        return html`
+                  <div 
+                    class="chip ${isSelected ? "selected" : ""}"
+                    @click=${(e: Event) => {
+            e.stopPropagation();
+            this.toggleSelection(option.value);
+          }}
+                  >
+                    ${isSelected ? html`
+                      <svg class="chip-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                        <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
+                      </svg>
+                    ` : nothing}
+                    <span>${label}</span>
+                  </div>
+                `;
+      })}
+            </div>
+             ${filteredOptions.length === 0 ? html`<div style="padding: 8px; font-style: italic; color: var(--md-sys-color-outline);">No options found</div>` : nothing}
+          </div>
+        `;
+    }
+
+    // Default Checkbox Dropdown Layout
     const count = currentSelections.length;
     const headerText = count > 0 ? `${count} Selected` : (this.description ?? "Select items");
 
@@ -236,31 +395,35 @@ export class MultipleChoice extends Root {
           </span>
         </div>
 
-        <div class="options-list ${this.isOpen ? "open" : ""}">
-          ${this.options.map((option) => {
-            const label = extractStringValue(
-              option.label,
-              this.component,
-              this.processor,
-              this.surfaceId
-            );
-            const isSelected = currentSelections.includes(option.value);
-
-            return html`
-              <div 
-                class="option-item ${isSelected ? "selected" : ""}"
-                @click=${(e: Event) => {
-                e.stopPropagation();
-                this.toggleSelection(option.value);
-              }}
-              >
-                <div class="checkbox">
-                  <span class="checkbox-icon">✓</span>
+        <div class="dropdown-wrapper ${this.isOpen ? "open" : ""}">
+          ${this.filterable ? this.#renderFilter() : nothing}
+          <div class="options-scroll-container">
+            ${filteredOptions.map((option) => {
+              const label = extractStringValue(
+                option.label,
+                this.component,
+                this.processor,
+                this.surfaceId
+              );
+              const isSelected = currentSelections.includes(option.value);
+
+              return html`
+                <div 
+                  class="option-item ${isSelected ? "selected" : ""}"
+                  @click=${(e: Event) => {
+                  e.stopPropagation();
+                  this.toggleSelection(option.value);
+                }}
+                >
+                  <div class="checkbox">
+                    <span class="checkbox-icon">✓</span>
+                  </div>
+                  <span>${label}</span>
                 </div>
-                <span>${label}</span>
-              </div>
-            `;
-          })}
+              `;
+            })}
+             ${filteredOptions.length === 0 ? html`<div style="padding: 16px; text-align: center; color: var(--md-sys-color-outline);">No options found</div>` : nothing}
+          </div>
         </div>
       </div>
     `;

renderers/lit/src/0.8/ui/root.ts

@@ -385,6 +385,8 @@ export class Root extends SignalWatcher(LitElement) {
             .options=${node.properties.options}
             .maxAllowedSelections=${node.properties.maxAllowedSelections}
             .selections=${node.properties.selections}
+            .type=${node.properties.type}
+            .filterable=${node.properties.filterable}
             .enableCustomElements=${this.enableCustomElements}
           ></a2ui-multiplechoice>`;
         }

renderers/web_core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2ui/web_core",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "A2UI Core Library",
   "main": "./dist/src/v0_8/index.js",
   "types": "./dist/src/v0_8/index.d.ts",

renderers/web_core/src/v0_8/types/components.ts

@@ -196,6 +196,8 @@ export interface MultipleChoice {
     value: string;
   }[];
   maxAllowedSelections?: number;
+  type?: "checkbox" | "chips";
+  filterable?: boolean;
 }
 
 export interface Slider {

samples/agent/adk/component_gallery/gallery_examples.py

@@ -21,7 +21,9 @@ def get_gallery_json() -> str:
             { "key": "date", "valueString": "2025-10-26" },
             { "key": "favorites", "valueMap": [
                  { "key": "0", "valueString": "A" }
-            ]}
+            ]},
+            { "key": "favoritesChips", "valueMap": [] },
+            { "key": "favoritesFilter", "valueMap": [] }
         ]
     }
 
@@ -79,7 +81,7 @@ def add_demo_surface(surface_id, component_def):
         }
     })
 
-    # 5. MultipleChoice
+    # 5. MultipleChoice (Default)
     add_demo_surface("demo-multichoice", {
         "MultipleChoice": {
             "selections": { "path": "galleryData/favorites" },
@@ -91,6 +93,39 @@ def add_demo_surface(surface_id, component_def):
         }
     })
 
+    # 5b. MultipleChoice (Chips)
+    add_demo_surface("demo-multichoice-chips", {
+        "MultipleChoice": {
+            "selections": { "path": "galleryData/favoritesChips" },
+            "description": "Select tags (Chips)",
+            "type": "chips",
+            "options": [
+                { "label": { "literalString": "Work" }, "value": "work" },
+                { "label": { "literalString": "Home" }, "value": "home" },
+                { "label": { "literalString": "Urgent" }, "value": "urgent" },
+                { "label": { "literalString": "Later" }, "value": "later" }
+            ]
+        }
+    })
+
+    # 5c. MultipleChoice (Filterable)
+    add_demo_surface("demo-multichoice-filter", {
+        "MultipleChoice": {
+            "selections": { "path": "galleryData/favoritesFilter" },
+            "description": "Select countries (Filterable)",
+            "filterable": True,
+            "options": [
+                { "label": { "literalString": "United States" }, "value": "US" },
+                { "label": { "literalString": "Canada" }, "value": "CA" },
+                { "label": { "literalString": "United Kingdom" }, "value": "UK" },
+                { "label": { "literalString": "Australia" }, "value": "AU" },
+                { "label": { "literalString": "Germany" }, "value": "DE" },
+                { "label": { "literalString": "France" }, "value": "FR" },
+                { "label": { "literalString": "Japan" }, "value": "JP" }
+            ]
+        }
+    })
+
     # 6. Image
     add_demo_surface("demo-image", {
         "Image": {
@@ -319,7 +354,7 @@ def add_demo_surface(surface_id, component_def):
                 {
                         "id": "response-text",
                         "component": {
-                            "Text": { "text": { "literalString": "Interact with the gallery to see responses." } }
+                            "Text": { "text": { "literalString": "Interact with the gallery to see responses. This view is updated by the agent by relaying the raw action commands it received from the client" } }
                         }
                 }
             ]