feat(web_components): implement basic web components and catalog adapters

renderers/lit/CHANGELOG.md

@@ -1,5 +1,8 @@
 ## Unreleased
 
+- (v0_9) Add portable Web Components for Select, Switch, Dialog, and Toast.
+
+
 ## 0.10.2
 
 - (v0_9) Normalize Safari placeholder text color for `DateTimeInput` by updating CSS selectors for `.a2ui-date-time-input`.

renderers/lit/src/v0_9/catalogs/basic/components/Button.ts

@@ -118,7 +118,12 @@ export class A2uiBasicButtonElement extends BasicCatalogA2uiLitElement<typeof Bu
   }
 }
 
+@customElement('a2ui-button')
+export class A2uiButtonElement extends A2uiBasicButtonElement {}
+
 export const A2uiButton = {
   ...ButtonApi,
-  tagName: 'a2ui-basic-button',
+  tagName: 'a2ui-button',
 };
+
+

renderers/lit/src/v0_9/catalogs/basic/components/Dialog.ts

@@ -0,0 +1,114 @@
+/*
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {html, nothing, css, PropertyValues} from 'lit';
+import {customElement, query} from 'lit/decorators.js';
+import {DialogApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '../../../a2ui-controller.js';
+
+@customElement('a2ui-dialog')
+export class A2uiDialogElement extends BasicCatalogA2uiLitElement<typeof DialogApi> {
+  @query('dialog') accessor dialogElement!: HTMLDialogElement;
+  static override styles = css`
+    :host {
+      display: block;
+    }
+    dialog {
+      border: var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc);
+      border-radius: var(--a2ui-border-radius, 12px);
+      padding: var(--a2ui-spacing-l, 24px);
+      background-color: var(--a2ui-color-surface, #fff);
+      color: var(--a2ui-color-on-surface, #333);
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+      max-width: 500px;
+      width: 90%;
+    }
+    dialog::backdrop {
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(2px);
+    }
+    .dialog-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--a2ui-spacing-m, 16px);
+    }
+    .dialog-title {
+      font-size: var(--a2ui-font-size-l, 1.25rem);
+      font-weight: 600;
+      margin: 0;
+    }
+    .close-btn {
+      background: none;
+      border: none;
+      font-size: 1.25rem;
+      cursor: pointer;
+      color: var(--a2ui-color-on-surface, #666);
+    }
+  `;
+
+  protected createController() {
+    return new A2uiController(this, DialogApi);
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    const isOpen = Boolean(this.controller.props?.open);
+    if (this.dialogElement) {
+      if (isOpen && !this.dialogElement.open) {
+        this.dialogElement.showModal();
+      } else if (!isOpen && this.dialogElement.open) {
+        this.dialogElement.close();
+      }
+    }
+  }
+
+  private handleNativeClose() {
+    this.closeDialog();
+  }
+
+  private closeDialog() {
+    this.dispatchEvent(
+      new CustomEvent('a2uiclose', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  override render() {
+    const props = this.controller.props;
+    if (!props) return nothing;
+
+    return html`
+      <dialog @close=${this.handleNativeClose}>
+        <div class="dialog-header">
+          ${props.title ? html`<h3 class="dialog-title">${props.title}</h3>` : nothing}
+          <button class="close-btn" @click=${this.closeDialog}>&times;</button>
+        </div>
+        <div class="dialog-body">
+          ${props.child ? html`${this.renderNode(props.child)}` : nothing}
+        </div>
+      </dialog>
+    `;
+  }
+}
+
+export const A2uiDialog = {
+  ...DialogApi,
+  tagName: 'a2ui-dialog',
+};

renderers/lit/src/v0_9/catalogs/basic/components/Select.ts

@@ -0,0 +1,99 @@
+/*
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {SelectApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '../../../a2ui-controller.js';
+
+@customElement('a2ui-select')
+export class A2uiSelectElement extends BasicCatalogA2uiLitElement<typeof SelectApi> {
+  static override styles = css`
+    :host {
+      display: block;
+      margin: var(--a2ui-select-margin, var(--a2ui-spacing-m, 8px));
+      font-family: inherit;
+    }
+    .a2ui-select-container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--a2ui-spacing-xs, 4px);
+    }
+    label {
+      font-size: var(--a2ui-font-size-s, 0.875rem);
+      color: var(--a2ui-color-on-surface, #333);
+      font-weight: 500;
+    }
+    select {
+      padding: var(--a2ui-select-padding, 8px 12px);
+      border: var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc);
+      border-radius: var(--a2ui-border-radius, 6px);
+      background-color: var(--a2ui-color-surface, #fff);
+      color: var(--a2ui-color-on-surface, #333);
+      font-size: var(--a2ui-font-size-m, 1rem);
+      cursor: pointer;
+    }
+    select:focus {
+      outline: 2px solid var(--a2ui-color-primary, #17e);
+    }
+  `;
+
+  protected createController() {
+    return new A2uiController(this, SelectApi);
+  }
+
+  private onChange(e: Event) {
+    const target = e.target as HTMLSelectElement;
+    const props = this.controller.props;
+    if (props) {
+      props.setValue?.(target.value);
+    }
+    // Dispatch custom event for binding update
+    this.dispatchEvent(
+      new CustomEvent('a2uichange', {
+        detail: {value: target.value},
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  override render() {
+    const props = this.controller.props;
+    if (!props) return nothing;
+
+    const options = props.options || [];
+
+    return html`
+      <div class="a2ui-select-container">
+        ${props.label ? html`<label>${props.label}</label>` : nothing}
+        <select .value=${props.value || ''} @change=${this.onChange}>
+          ${options.map(
+            (opt) => html`<option value=${opt.value} ?selected=${opt.value === props.value}>
+              ${opt.label}
+            </option>`,
+          )}
+        </select>
+      </div>
+    `;
+  }
+}
+
+export const A2uiSelect = {
+  ...SelectApi,
+  tagName: 'a2ui-select',
+};

renderers/lit/src/v0_9/catalogs/basic/components/Switch.ts

@@ -0,0 +1,124 @@
+/*
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {SwitchApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '../../../a2ui-controller.js';
+
+@customElement('a2ui-switch')
+export class A2uiSwitchElement extends BasicCatalogA2uiLitElement<typeof SwitchApi> {
+  static override styles = css`
+    :host {
+      display: inline-block;
+      margin: var(--a2ui-switch-margin, var(--a2ui-spacing-m, 8px));
+      font-family: inherit;
+    }
+    .a2ui-switch-wrapper {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--a2ui-spacing-s, 8px);
+      cursor: pointer;
+    }
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 44px;
+      height: 24px;
+    }
+    .switch input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--a2ui-switch-off-bg, #ccc);
+      transition: 0.3s;
+      border-radius: 24px;
+    }
+    .slider:before {
+      position: absolute;
+      content: '';
+      height: 18px;
+      width: 18px;
+      left: 3px;
+      bottom: 3px;
+      background-color: white;
+      transition: 0.3s;
+      border-radius: 50%;
+    }
+    input:checked + .slider {
+      background-color: var(--a2ui-color-primary, #17e);
+    }
+    input:checked + .slider:before {
+      transform: translateX(20px);
+    }
+    .label-text {
+      font-size: var(--a2ui-font-size-m, 1rem);
+      color: var(--a2ui-color-on-surface, #333);
+    }
+  `;
+
+  protected createController() {
+    return new A2uiController(this, SwitchApi);
+  }
+
+  private onChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const props = this.controller.props;
+    if (props) {
+      props.setValue?.(target.checked);
+    }
+    this.dispatchEvent(
+      new CustomEvent('a2uichange', {
+        detail: {value: target.checked},
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  override render() {
+    const props = this.controller.props;
+    if (!props) return nothing;
+
+    return html`
+      <label class="a2ui-switch-wrapper">
+        <span class="switch">
+          <input
+            type="checkbox"
+            .checked=${Boolean(props.value)}
+            @change=${this.onChange}
+          />
+          <span class="slider"></span>
+        </span>
+        ${props.label ? html`<span class="label-text">${props.label}</span>` : nothing}
+      </label>
+    `;
+  }
+}
+
+export const A2uiSwitch = {
+  ...SwitchApi,
+  tagName: 'a2ui-switch',
+};