chore: Apply transformations to make code compatible with 1P

renderers/lit/src/v0_9/a2ui-lit-element.ts

@@ -18,7 +18,7 @@ import {LitElement, nothing} from 'lit';
 import {property} from 'lit/decorators.js';
 import {ComponentContext, ComponentApi, type ComponentId} from '@a2ui/web_core/v0_9';
 import {renderA2uiNode} from './surface/render-a2ui-node.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from './a2ui-controller.js';
 
 /**
  * A reference to a child component to render. Either a string ID, or an object
@@ -100,7 +100,7 @@ export abstract class A2uiLitElement<Api extends ComponentApi> extends LitElemen
    * cleans up any existing controller and invokes `createController()` to bind to
    * the new context.
    */
-  willUpdate(changedProperties: Map<string, any>) {
+  override willUpdate(changedProperties: Map<string, any>) {
     super.willUpdate(changedProperties);
     if (changedProperties.has('context') && this.context) {
       if (this.controller) {

renderers/lit/src/v0_9/catalogs/basic/basic-catalog-a2ui-lit-element.ts

@@ -37,12 +37,12 @@ export type ResolvedChildList = ResolvedChildRef[];
 export abstract class BasicCatalogA2uiLitElement<
   Api extends ComponentApi,
 > extends A2uiLitElement<Api> {
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
     injectBasicCatalogStyles();
   }
 
-  willUpdate(changedProperties: Map<string, any>) {
+  override willUpdate(changedProperties: Map<string, any>) {
     super.willUpdate(changedProperties);
 
     const props = this.controller?.props as any;

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

@@ -18,11 +18,11 @@ import {html, nothing, css} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {AudioPlayerApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 @customElement('a2ui-audioplayer')
 export class A2uiAudioPlayerElement extends BasicCatalogA2uiLitElement<typeof AudioPlayerApi> {
-  static styles = css`
+  static override styles = css`
     :host {
       display: flex;
       flex-direction: column;
@@ -37,7 +37,7 @@ export class A2uiAudioPlayerElement extends BasicCatalogA2uiLitElement<typeof Au
     return new A2uiController(this, AudioPlayerApi);
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
 

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

@@ -19,7 +19,7 @@ import {customElement} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {ButtonApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 /**
  * A button component that can be used to trigger an action.
@@ -41,7 +41,7 @@ export class A2uiBasicButtonElement extends BasicCatalogA2uiLitElement<typeof Bu
    * - `--a2ui-button-padding`: The padding of the button. Defaults to `--a2ui-spacing-m`.
    * - `--a2ui-button-margin`: The outer margin of the button. Defaults to `--a2ui-spacing-m`.
    */
-  static styles = css`
+  static override styles = css`
     :host {
       display: inline-block;
       margin: var(--a2ui-button-margin, var(--a2ui-spacing-m));
@@ -95,7 +95,7 @@ export class A2uiBasicButtonElement extends BasicCatalogA2uiLitElement<typeof Bu
     return new A2uiController(this, ButtonApi);
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
 

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

@@ -18,7 +18,7 @@ import {html, nothing, css} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {CardApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 @customElement('a2ui-card')
 export class A2uiCardElement extends BasicCatalogA2uiLitElement<typeof CardApi> {
@@ -32,7 +32,7 @@ export class A2uiCardElement extends BasicCatalogA2uiLitElement<typeof CardApi>
    * - `--a2ui-card-box-shadow`: The box shadow of the card. Defaults to `0 2px 4px rgba(0,0,0,0.1)`.
    * - `--a2ui-card-margin`: The outer margin of the card. Defaults to `--a2ui-spacing-m`.
    */
-  static styles = css`
+  static override styles = css`
     :host {
       display: block;
       border: var(
@@ -52,7 +52,7 @@ export class A2uiCardElement extends BasicCatalogA2uiLitElement<typeof CardApi>
     return new A2uiController(this, CardApi);
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
 

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

@@ -19,7 +19,7 @@ import {customElement} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {CheckBoxApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 @customElement('a2ui-checkbox')
 export class A2uiCheckBoxElement extends BasicCatalogA2uiLitElement<typeof CheckBoxApi> {
@@ -35,7 +35,7 @@ export class A2uiCheckBoxElement extends BasicCatalogA2uiLitElement<typeof Check
    * - `--a2ui-checkbox-label-font-size`: Font size of the label. Defaults to `--a2ui-label-font-size` then `--a2ui-font-size-s`.
    * - `--a2ui-checkbox-label-font-weight`: Font weight of the label. Defaults to `--a2ui-label-font-weight` then `bold`.
    */
-  static styles = css`
+  static override styles = css`
     :host {
       display: block;
     }
@@ -79,7 +79,7 @@ export class A2uiCheckBoxElement extends BasicCatalogA2uiLitElement<typeof Check
     return new A2uiController(this, CheckBoxApi);
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
 

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

@@ -19,7 +19,7 @@ import {customElement, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {ChoicePickerApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 @customElement('a2ui-choicepicker')
 export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<typeof ChoicePickerApi> {
@@ -35,7 +35,7 @@ export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<typeof C
    * - `--a2ui-choicepicker-chip-padding`: Padding for chips. Defaults to `--a2ui-spacing-s` and `--a2ui-spacing-m` (4px 8px).
    * - `--a2ui-choicepicker-chip-border-radius`: Border radius for chips. Defaults to `999px`.
    */
-  static styles = css`
+  static override styles = css`
     :host {
       display: flex;
       flex-direction: column;
@@ -105,7 +105,7 @@ export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<typeof C
     return new A2uiController(this, ChoicePickerApi);
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
 

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

@@ -22,7 +22,7 @@ import {
   BasicCatalogA2uiLitElement,
   type ResolvedChildList,
 } from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 const JUSTIFY_MAP: Record<string, string> = {
   start: 'flex-start',
@@ -49,7 +49,7 @@ export class A2uiBasicColumnElement extends BasicCatalogA2uiLitElement<typeof Co
    *
    * - `--a2ui-column-gap`: The gap between items in the column. Defaults to `--a2ui-spacing-m`.
    */
-  static styles = css`
+  static override styles = css`
     :host {
       display: flex;
       flex-direction: column;
@@ -61,7 +61,7 @@ export class A2uiBasicColumnElement extends BasicCatalogA2uiLitElement<typeof Co
     return new A2uiController(this, ColumnApi);
   }
 
-  updated(changedProperties: PropertyValues) {
+  override updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     const props = this.controller.props;
     if (props) {
@@ -70,7 +70,7 @@ export class A2uiBasicColumnElement extends BasicCatalogA2uiLitElement<typeof Co
     }
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
 

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

@@ -18,7 +18,7 @@ import {html, nothing, css} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {DateTimeInputApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 /**
  * Normalizes an incoming ISO or partial date/time value into a format accepted by HTML5 inputs.
@@ -60,7 +60,7 @@ export class A2uiDateTimeInputElement extends BasicCatalogA2uiLitElement<typeof
    * - `--a2ui-datetimeinput-label-font-size`: Font size of the label. Defaults to `--a2ui-label-font-size` then `--a2ui-font-size-s`.
    * - `--a2ui-datetimeinput-label-font-weight`: Font weight of the label. Defaults to `--a2ui-label-font-weight` then `bold`.
    */
-  static styles = css`
+  static override styles = css`
     :host {
       display: flex;
       flex-direction: column;
@@ -86,7 +86,7 @@ export class A2uiDateTimeInputElement extends BasicCatalogA2uiLitElement<typeof
     return new A2uiController(this, DateTimeInputApi);
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
     // If neither date or time are enabled, render nothing.

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

@@ -18,7 +18,7 @@ import {html, nothing, css} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {DividerApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
 
 @customElement('a2ui-divider')
@@ -30,7 +30,7 @@ export class A2uiDividerElement extends BasicCatalogA2uiLitElement<typeof Divide
    * - `--a2ui-divider-border`: The styling for the divider border. Defaults to `--a2ui-border-width` solid `--a2ui-color-border`.
    * - `--a2ui-divider-spacing`: The spacing around the divider. Defaults to `--a2ui-spacing-m`.
    */
-  static styles = css`
+  static override styles = css`
     :host {
       display: block;
       align-self: stretch;
@@ -60,7 +60,7 @@ export class A2uiDividerElement extends BasicCatalogA2uiLitElement<typeof Divide
     return new A2uiController(this, DividerApi);
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
 

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

@@ -18,7 +18,7 @@ import {html, nothing, css} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {IconApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 const ICON_NAME_OVERRIDES: Record<string, string> = {
   play: 'play_arrow',
@@ -42,7 +42,7 @@ export class A2uiIconElement extends BasicCatalogA2uiLitElement<typeof IconApi>
    * - `--a2ui-icon-font-family`: Override the font family for icons. Defaults to Material Symbols Outlined.
    * - `--a2ui-icon-font-variation-settings`: Complete override for font-variation-settings.
    */
-  static styles = css`
+  static override styles = css`
     :where(:host) {
       --_icon-size: var(--a2ui-icon-size, var(--a2ui-font-size-xl, 24px));
     }
@@ -73,7 +73,7 @@ export class A2uiIconElement extends BasicCatalogA2uiLitElement<typeof IconApi>
     return new A2uiController(this, IconApi);
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
 

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

@@ -20,7 +20,7 @@ import {classMap} from 'lit/directives/class-map.js';
 import {styleMap} from 'lit/directives/style-map.js';
 import {ImageApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 @customElement('a2ui-image')
 export class A2uiImageElement extends BasicCatalogA2uiLitElement<typeof ImageApi> {
@@ -35,7 +35,7 @@ export class A2uiImageElement extends BasicCatalogA2uiLitElement<typeof ImageApi
    * - `--a2ui-image-large-feature-size`: Controls the max-height of the `largeFeature` variant. Defaults to `400px`.
    * - `--a2ui-image-header-size`: Controls the height of the `header` variant. Defaults to `200px`.
    */
-  static styles = css`
+  static override styles = css`
     img {
       display: block;
       width: 100%;
@@ -71,7 +71,7 @@ export class A2uiImageElement extends BasicCatalogA2uiLitElement<typeof ImageApi
     return new A2uiController(this, ImageApi);
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
 

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

@@ -22,11 +22,11 @@ import {
   BasicCatalogA2uiLitElement,
   type ResolvedChildList,
 } from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 @customElement('a2ui-list')
 export class A2uiListElement extends BasicCatalogA2uiLitElement<typeof ListApi> {
-  static styles = css`
+  static override styles = css`
     :host {
       display: flex;
       overflow: auto;
@@ -39,15 +39,15 @@ export class A2uiListElement extends BasicCatalogA2uiLitElement<typeof ListApi>
     return new A2uiController(this, ListApi);
   }
 
-  updated(changedProperties: PropertyValues) {
+  override updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     const props = this.controller.props;
     if (props) {
       this.style.flexDirection = props.direction === 'horizontal' ? 'row' : 'column';
     }
   }
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;
 

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

@@ -18,7 +18,7 @@ import {html, nothing, css} from 'lit';
 import {customElement, query} from 'lit/decorators.js';
 import {ModalApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
-import {A2uiController} from '@a2ui/lit/v0_9';
+import {A2uiController} from '../../../a2ui-controller.js';
 
 @customElement('a2ui-modal')
 export class A2uiLitModal extends BasicCatalogA2uiLitElement<typeof ModalApi> {
@@ -30,7 +30,7 @@ export class A2uiLitModal extends BasicCatalogA2uiLitElement<typeof ModalApi> {
    * - `--a2ui-modal-padding`: Padding inside the dialog content area. Defaults to `24px`.
    * - `--a2ui-modal-border-radius`: Border radius of the dialog. Defaults to `8px`.
    */
-  static styles = css`
+  static override styles = css`
     :host {
       display: inline-block;
     }
@@ -51,7 +51,7 @@ export class A2uiLitModal extends BasicCatalogA2uiLitElement<typeof ModalApi> {
   }
   @query('dialog') accessor dialog!: HTMLDialogElement;
 
-  render() {
+  override render() {
     const props = this.controller.props;
     if (!props) return nothing;