chore: Apply transformations to make code compatible with 1P (#1655)

This PR applies safe, style-only, or best-practice transformations to the codebase, reducing the number of transformations needed when importing to 1P. It covers adding the override keyword, replacing external imports with relative ones, and explicitly typing TextField. The transformation related to stripping the accessor keyword was skipped as it is not an inherently backwards-compatible/style change.

Next, I'll add enforcing lint enforcing so that we don't regress on this #1667

Author: josemontespg

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;