@symbiote-native/angular 0.0.0-canary-20260724081123

package/src/components/image-background-style-class.test.ts

@@ -0,0 +1,79 @@
+// Regression guard: imageStyle previously accepted ONLY a JS style object/array. It now also
+// resolves a class-name string through the shared style registry, same as the `class` prop fix on
+// the WRAPPER view (see image-background-class-style.test.ts) — and must land on the INNER image,
+// never the wrapper, exactly like that prior fix. Mirrors the Vue twin
+// (image-background-style-class.test.ts).
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../render';
+import { ImageBackground } from './image-background';
+
+const ROOT_TAG = 917;
+const fabric = installFabric();
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+function committedImage(): IFakeNode {
+  const node = fabric.find(n => n.viewName === 'RCTImageView');
+  expect(node, 'the inner image was committed').toBeDefined();
+  if (node === undefined) throw new Error('unreachable: image missing');
+  return node;
+}
+
+function committedWrapper(): IFakeNode {
+  const node = fabric.find(n => n.viewName === 'RCTView');
+  expect(node, 'the wrapper view was committed').toBeDefined();
+  if (node === undefined) throw new Error('unreachable: wrapper missing');
+  return node;
+}
+
+@Component({
+  selector: 'symbiote-image-background-style-class-host',
+  standalone: true,
+  imports: [ImageBackground],
+  template: `<ImageBackground
+    [source]="{ uri: 'https://example.com/a.png' }"
+    [imageStyle]="'tinted'"
+  />`,
+})
+class ImageBackgroundStyleClassHost {}
+
+@Component({
+  selector: 'symbiote-image-background-style-object-host',
+  standalone: true,
+  imports: [ImageBackground],
+  template: `<ImageBackground
+    [source]="{ uri: 'https://example.com/a.png' }"
+    [imageStyle]="{ opacity: 0.25 }"
+  />`,
+})
+class ImageBackgroundStyleObjectHost {}
+
+beforeEach(() => {
+  fabric.reset();
+  registerStyles({ tinted: { opacity: 0.5 } });
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+describe('ImageBackground imageStyle class-name support', () => {
+  it('resolves a class-name string onto the inner image, not the wrapper', async () => {
+    mount(ROOT_TAG, ImageBackgroundStyleClassHost);
+    await tick();
+
+    expect(committedImage().props.opacity).toBe(0.5);
+    expect(committedWrapper().props.opacity).toBeUndefined();
+  });
+
+  it('still accepts an ordinary style object unchanged', async () => {
+    mount(ROOT_TAG, ImageBackgroundStyleObjectHost);
+    await tick();
+
+    expect(committedImage().props.opacity).toBe(0.25);
+  });
+});

package/src/components/image-background.ts

@@ -0,0 +1,270 @@
+// ImageBackground: the Angular lifecycle half. ImageBackground has NO native host of its own —
+// it composes an outer View, an absolute-fill Image behind the user children, and the children
+// on top. The composition math (the absolute-fill, the wrapper-dimension proxy onto the inner
+// image, the imageStyle merge) lives framework-agnostic in @symbiote-native/components/renderImageBackground
+// and is shared verbatim with React/Vue. React/Vue bridge the Descriptor it returns; Angular has
+// no hyperscript bridge, so it composes with a TEMPLATE instead and reuses renderImageBackground
+// ONLY to compute the inner image's merged style (read off the tree it returns) — the math stays
+// shared, never reimplemented. The inner <Image> is the adapter's own Image component, which owns
+// source resolution / a11y folding / event emission; ImageBackground forwards every Image prop onto
+// it. `style` is the WRAPPER View style; `imageStyle` targets the inner image. Children paint AFTER
+// the image (on top) via <ng-content>. The Angular twin of the React/Vue ImageBackground.
+
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core';
+import {
+  renderImageBackground,
+  resolveAccessibilityProps,
+  type IAccessibilityProps,
+  type IAccessibilityStateValue,
+  type IAriaProps,
+  type IImageProps,
+  type IImageSourceProp,
+  type IResizeMode,
+} from '@symbiote-native/components';
+import {
+  resolveClassName,
+  type IStyleProp,
+  type ISymbioteEvent,
+  type IViewStyle,
+} from '@symbiote-native/engine';
+import { Image } from './image';
+import { anchorHostStyle, ViewHost } from '../primitives';
+
+// Mirrors React's IImageBackgroundProps minus children (Angular takes children via <ng-content>):
+// every forwarding Image prop flows onto the inner image; `style` is the WRAPPER View style and
+// `imageStyle` the inner image's.
+export interface IAngularImageBackgroundProps extends Omit<IImageProps, 'style'> {
+  style?: IStyleProp<IViewStyle>;
+  // A bare string resolves through the shared style registry, like `class` on the wrapper.
+  imageStyle?: IStyleProp<IViewStyle> | string;
+}
+
+// What the ImageBackground component itself takes as plain @Input()s: the full surface minus the
+// inner Image's callback-shaped events, which it exposes as real @Output() EventEmitters instead
+// (re-emitting the inner <Image>'s own already-converted outputs — see the template below).
+export type IAngularImageBackgroundInputs = Omit<
+  IAngularImageBackgroundProps,
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
+  | 'onLoadStart'
+  | 'onLoad'
+  | 'onLoadEnd'
+  | 'onError'
+  | 'onProgress'
+  | 'onPartialLoad'
+>;
+
+@Component({
+  selector: 'ImageBackground',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [Image, ViewHost],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <symbiote-view [style]="wrapperStyle">
+      <Image
+        [source]="source"
+        [defaultSource]="defaultSource"
+        [loadingIndicatorSource]="loadingIndicatorSource"
+        [style]="imageStyle"
+        [resizeMode]="resizeMode"
+        [resizeMethod]="resizeMethod"
+        [tintColor]="tintColor"
+        [blurRadius]="blurRadius"
+        [capInsets]="capInsets"
+        [fadeDuration]="fadeDuration"
+        [progressiveRenderingEnabled]="progressiveRenderingEnabled"
+        [src]="src"
+        [srcSet]="srcSet"
+        [alt]="alt"
+        [width]="width"
+        [height]="height"
+        [crossOrigin]="crossOrigin"
+        [referrerPolicy]="referrerPolicy"
+        [testID]="testID"
+        [nativeID]="nativeID"
+        [accessible]="accessible"
+        [accessibilityLabel]="folded.accessibilityLabel"
+        [accessibilityHint]="folded.accessibilityHint"
+        [accessibilityRole]="folded.accessibilityRole"
+        [accessibilityState]="folded.accessibilityState"
+        [accessibilityValue]="folded.accessibilityValue"
+        [accessibilityActions]="folded.accessibilityActions"
+        [accessibilityLabelledBy]="folded.accessibilityLabelledBy"
+        [importantForAccessibility]="folded.importantForAccessibility"
+        [accessibilityLiveRegion]="folded.accessibilityLiveRegion"
+        [screenReaderFocusable]="folded.screenReaderFocusable"
+        [accessibilityViewIsModal]="folded.accessibilityViewIsModal"
+        [accessibilityElementsHidden]="folded.accessibilityElementsHidden"
+        [accessibilityIgnoresInvertColors]="folded.accessibilityIgnoresInvertColors"
+        [accessibilityLanguage]="folded.accessibilityLanguage"
+        [accessibilityRespondsToUserInteraction]="folded.accessibilityRespondsToUserInteraction"
+        [accessibilityShowsLargeContentViewer]="folded.accessibilityShowsLargeContentViewer"
+        [accessibilityLargeContentTitle]="folded.accessibilityLargeContentTitle"
+        (loadStart)="loadStart.emit($event)"
+        (load)="load.emit($event)"
+        (loadEnd)="loadEnd.emit($event)"
+        (error)="error.emit($event)"
+        (progress)="progress.emit($event)"
+        (partialLoad)="partialLoad.emit($event)"
+        (accessibilityAction)="accessibilityAction.emit($event)"
+        (accessibilityTap)="accessibilityTap.emit($event)"
+        (magicTap)="magicTap.emit($event)"
+        (accessibilityEscape)="accessibilityEscape.emit($event)"
+      />
+      <ng-content></ng-content>
+    </symbiote-view>
+  `,
+})
+export class ImageBackground implements IAngularImageBackgroundInputs {
+  // The inner <Image>'s events as real Angular events, re-emitted verbatim through
+  // ImageBackground's own outputs: `(load)="load.emit($event)"`, not `[onLoad]="onLoad"`.
+  @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly loadStart = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly load = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly loadEnd = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly error = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly progress = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly partialLoad = new EventEmitter<ISymbioteEvent>();
+  @Input() source?: IImageSourceProp;
+  @Input() defaultSource?: IImageSourceProp;
+  @Input() loadingIndicatorSource?: IImageSourceProp;
+  @Input() style?: IStyleProp<IViewStyle>;
+  @Input('imageStyle') imageStyleValue?: IStyleProp<IViewStyle> | string;
+  @Input() resizeMode?: IResizeMode;
+  @Input() resizeMethod?: IImageProps['resizeMethod'];
+  @Input() tintColor?: string;
+  @Input() blurRadius?: number;
+  @Input() capInsets?: IImageProps['capInsets'];
+  @Input() fadeDuration?: number;
+  @Input() progressiveRenderingEnabled?: boolean;
+  @Input() src?: string;
+  @Input() srcSet?: string;
+  @Input() alt?: string;
+  @Input() width?: number;
+  @Input() height?: number;
+  @Input() crossOrigin?: 'anonymous' | 'use-credentials';
+  @Input() referrerPolicy?: string;
+  @Input() testID?: string;
+  @Input() nativeID?: string;
+  @Input() accessible?: boolean;
+  @Input() accessibilityLabel?: string;
+  @Input() accessibilityHint?: string;
+  @Input() accessibilityRole?: IAccessibilityProps['accessibilityRole'];
+  @Input() accessibilityState?: IAccessibilityStateValue;
+  @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
+  @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
+  @Input() accessibilityLabelledBy?: string | string[];
+  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input() screenReaderFocusable?: boolean;
+  @Input() accessibilityViewIsModal?: boolean;
+  @Input() accessibilityElementsHidden?: boolean;
+  @Input() accessibilityIgnoresInvertColors?: boolean;
+  @Input() accessibilityLanguage?: string;
+  @Input() accessibilityRespondsToUserInteraction?: boolean;
+  @Input() accessibilityShowsLargeContentViewer?: boolean;
+  @Input() accessibilityLargeContentTitle?: string;
+  @Input() role?: IAriaProps['role'];
+  @Input('aria-label') ariaLabel?: string;
+  @Input('aria-labelledby') ariaLabelledBy?: string;
+  @Input('aria-live') ariaLive?: IAriaProps['aria-live'];
+  @Input('aria-hidden') ariaHidden?: boolean;
+  @Input('aria-busy') ariaBusy?: boolean;
+  @Input('aria-checked') ariaChecked?: boolean | 'mixed';
+  @Input('aria-disabled') ariaDisabled?: boolean;
+  @Input('aria-expanded') ariaExpanded?: boolean;
+  @Input('aria-selected') ariaSelected?: boolean;
+  @Input('aria-modal') ariaModal?: boolean;
+  @Input('aria-valuemax') ariaValueMax?: number;
+  @Input('aria-valuemin') ariaValueMin?: number;
+  @Input('aria-valuenow') ariaValueNow?: number;
+  @Input('aria-valuetext') ariaValueText?: string;
+
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) — NOT the inner `symbiote-view [style]="wrapperStyle"`
+  // one level down. Merged FIRST so the explicit `style` @Input still wins (flattenStyle's
+  // later-wins collapse), mirroring every other composed component's anchor merge. `imageStyle`
+  // below stays untouched per the ImageBackground-specific nuance: it targets the inner image, not
+  // this component's own root.
+  private readonly elementRef = inject(ElementRef);
+
+  get wrapperStyle(): unknown {
+    return [anchorHostStyle(this.elementRef), this.style];
+  }
+
+  // renderImageBackground owns the absolute-fill + wrapper-dimension-proxy + imageStyle merge
+  // (shared verbatim with React/Vue); read the inner image Descriptor's style off the tree it
+  // returns rather than reimplementing it. Only style/imageStyle drive that merge, so the image
+  // bag is empty here — the inner <Image> below resolves source / a11y / events on its own.
+  get imageStyle(): IStyleProp<IViewStyle> | undefined {
+    // imageStyle targets the INNER image (renderImageBackground's own field); resolve a
+    // class-name string here, before it flows into the merge.
+    const resolvedImageStyleValue =
+      typeof this.imageStyleValue === 'string'
+        ? resolveClassName(this.imageStyleValue)
+        : this.imageStyleValue;
+    const inner = renderImageBackground({
+      style: this.style,
+      imageStyle: resolvedImageStyleValue,
+      image: { passthrough: {} },
+    }).children[0];
+    return typeof inner === 'string'
+      ? undefined
+      : (inner.props.style as IStyleProp<IViewStyle> | undefined);
+  }
+
+  // Fold the web aria-*/role aliases into the canonical accessibility* props once per render, so the
+  // inner image never sees an aria-* key (native ignores them) — the shared transform every adapter
+  // runs. The inner <Image> re-runs the same fold idempotently over the already-folded props.
+  get folded(): Partial<IAngularImageBackgroundProps> {
+    return resolveAccessibilityProps({
+      accessibilityLabel: this.accessibilityLabel,
+      accessibilityHint: this.accessibilityHint,
+      accessibilityRole: this.accessibilityRole,
+      accessibilityState: this.accessibilityState,
+      accessibilityValue: this.accessibilityValue,
+      accessibilityActions: this.accessibilityActions,
+      accessibilityLabelledBy: this.accessibilityLabelledBy,
+      importantForAccessibility: this.importantForAccessibility,
+      accessibilityLiveRegion: this.accessibilityLiveRegion,
+      screenReaderFocusable: this.screenReaderFocusable,
+      accessibilityViewIsModal: this.accessibilityViewIsModal,
+      accessibilityElementsHidden: this.accessibilityElementsHidden,
+      accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
+      accessibilityLanguage: this.accessibilityLanguage,
+      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
+      role: this.role,
+      'aria-label': this.ariaLabel,
+      'aria-labelledby': this.ariaLabelledBy,
+      'aria-live': this.ariaLive,
+      'aria-hidden': this.ariaHidden,
+      'aria-busy': this.ariaBusy,
+      'aria-checked': this.ariaChecked,
+      'aria-disabled': this.ariaDisabled,
+      'aria-expanded': this.ariaExpanded,
+      'aria-selected': this.ariaSelected,
+      'aria-modal': this.ariaModal,
+      'aria-valuemax': this.ariaValueMax,
+      'aria-valuemin': this.ariaValueMin,
+      'aria-valuenow': this.ariaValueNow,
+      'aria-valuetext': this.ariaValueText,
+    });
+  }
+}

package/src/components/input-accessory-view/index.ts

@@ -0,0 +1,185 @@
+// InputAccessoryView, the Angular lifecycle half (iOS). RCTInputAccessoryView is a real Fabric
+// host node that docks its content above the keyboard; a TextInput points at it by nativeID through
+// its inputAccessoryViewID. The host-node assembly (nativeID / backgroundColor / style /
+// accessibility forwarding) lives framework-agnostic in
+// @symbiote-native/components/renderInputAccessoryView and is shared verbatim with React/Vue; here
+// Angular supplies only the lifecycle — it folds aria/role, reads the resolved props off the
+// Descriptor, and nests the user children under the host via <ng-content>. The Angular twin of the
+// React/Vue InputAccessoryView. No platform branch, so this stays flat.
+
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core';
+import {
+  renderInputAccessoryView,
+  resolveAccessibilityProps,
+  type IAccessibilityProps,
+  type IAccessibilityStateValue,
+  type IAriaProps,
+} from '@symbiote-native/components';
+import {
+  isSymbioteEvent,
+  type IStyleProp,
+  type ISymbioteEvent,
+  type IViewStyle,
+} from '@symbiote-native/engine';
+import {
+  anchorHostStyle,
+  InputAccessoryViewHost,
+  SymbioteHostPropsDirective,
+} from '../../primitives';
+
+// Mirrors React's IInputAccessoryViewProps minus children (Angular takes children via
+// <ng-content>), declared per-adapter over the shared a11y base.
+export interface IAngularInputAccessoryViewProps extends IAccessibilityProps, IAriaProps {
+  // The id a TextInput's inputAccessoryViewID points at to dock above its keyboard.
+  nativeID?: string;
+  backgroundColor?: string;
+  style?: IStyleProp<IViewStyle>;
+}
+
+// What the component itself takes as plain @Input()s: the full surface minus the accessibility
+// callbacks, which it exposes as real @Output() EventEmitters instead (see the class below),
+// mirroring Pressable's IAngularPressableInputs split.
+export type IAngularInputAccessoryViewInputs = Omit<
+  IAngularInputAccessoryViewProps,
+  'onAccessibilityAction' | 'onAccessibilityTap' | 'onMagicTap' | 'onAccessibilityEscape'
+>;
+
+@Component({
+  selector: 'InputAccessoryView',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [InputAccessoryViewHost, SymbioteHostPropsDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <symbiote-input-accessory-view
+      [symbioteHostProps]="hostProps"
+      (accessibilityAction)="emit(accessibilityAction, $event)"
+      (accessibilityTap)="emit(accessibilityTap, $event)"
+      (magicTap)="emit(magicTap, $event)"
+      (accessibilityEscape)="emit(accessibilityEscape, $event)"
+    >
+      <ng-content></ng-content>
+    </symbiote-input-accessory-view>
+  `,
+})
+export class InputAccessoryView implements IAngularInputAccessoryViewInputs {
+  @Input() nativeID?: string;
+  @Input() backgroundColor?: string;
+  @Input() style?: IStyleProp<IViewStyle>;
+  @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
+  @Input() testID?: string;
+  @Input() accessible?: boolean;
+  @Input() accessibilityLabel?: string;
+  @Input() accessibilityHint?: string;
+  @Input() accessibilityRole?: IAccessibilityProps['accessibilityRole'];
+  @Input() accessibilityState?: IAccessibilityStateValue;
+  @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
+  @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
+  @Input() accessibilityLabelledBy?: string | string[];
+  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input() screenReaderFocusable?: boolean;
+  @Input() accessibilityViewIsModal?: boolean;
+  @Input() accessibilityElementsHidden?: boolean;
+  @Input() accessibilityIgnoresInvertColors?: boolean;
+  @Input() accessibilityLanguage?: string;
+  @Input() accessibilityRespondsToUserInteraction?: boolean;
+  @Input() accessibilityShowsLargeContentViewer?: boolean;
+  @Input() accessibilityLargeContentTitle?: string;
+  @Input() role?: IAriaProps['role'];
+  @Input('aria-label') ariaLabel?: string;
+  @Input('aria-labelledby') ariaLabelledBy?: string;
+  @Input('aria-live') ariaLive?: IAriaProps['aria-live'];
+  @Input('aria-hidden') ariaHidden?: boolean;
+  @Input('aria-busy') ariaBusy?: boolean;
+  @Input('aria-checked') ariaChecked?: boolean | 'mixed';
+  @Input('aria-disabled') ariaDisabled?: boolean;
+  @Input('aria-expanded') ariaExpanded?: boolean;
+  @Input('aria-selected') ariaSelected?: boolean;
+  @Input('aria-modal') ariaModal?: boolean;
+  @Input('aria-valuemax') ariaValueMax?: number;
+  @Input('aria-valuemin') ariaValueMin?: number;
+  @Input('aria-valuenow') ariaValueNow?: number;
+  @Input('aria-valuetext') ariaValueText?: string;
+
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment). InputAccessoryView has no inner ViewChild, so this
+  // is the only ElementRef in the class.
+  private readonly elementRef = inject(ElementRef);
+
+  // Forward an engine event to the matching @Output(), narrowing the template's untyped $event.
+  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+    if (isSymbioteEvent(event)) emitter.emit(event);
+  }
+
+  // renderInputAccessoryView owns the host-node assembly (shared with React/Vue); the adapter reads
+  // the resolved host props off the Descriptor it returns.
+  private get descriptor() {
+    return renderInputAccessoryView({
+      nativeID: this.nativeID,
+      backgroundColor: this.backgroundColor,
+      style: this.style,
+      passthrough: resolveAccessibilityProps(this.accessibilityInputs()),
+    });
+  }
+
+  // The anchor's class-derived style goes FIRST, the Descriptor's resolved style SECOND —
+  // flattenStyle's later-wins collapse keeps an explicit [style] winning over its ambient class.
+  get hostProps(): Record<string, unknown> {
+    const descriptorProps = this.descriptor.props;
+    return { ...descriptorProps, style: [anchorHostStyle(this.elementRef), descriptorProps.style] };
+  }
+
+  // Typed as the a11y intersection WITH the string index (the bag renderInputAccessoryView spreads
+  // into the host props), so resolveAccessibilityProps's result stays assignable to passthrough.
+  private accessibilityInputs(): IAccessibilityProps & IAriaProps & Record<string, unknown> {
+    return {
+      testID: this.testID,
+      accessible: this.accessible,
+      accessibilityLabel: this.accessibilityLabel,
+      accessibilityHint: this.accessibilityHint,
+      accessibilityRole: this.accessibilityRole,
+      accessibilityState: this.accessibilityState,
+      accessibilityValue: this.accessibilityValue,
+      accessibilityActions: this.accessibilityActions,
+      accessibilityLabelledBy: this.accessibilityLabelledBy,
+      importantForAccessibility: this.importantForAccessibility,
+      accessibilityLiveRegion: this.accessibilityLiveRegion,
+      screenReaderFocusable: this.screenReaderFocusable,
+      accessibilityViewIsModal: this.accessibilityViewIsModal,
+      accessibilityElementsHidden: this.accessibilityElementsHidden,
+      accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
+      accessibilityLanguage: this.accessibilityLanguage,
+      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
+      role: this.role,
+      'aria-label': this.ariaLabel,
+      'aria-labelledby': this.ariaLabelledBy,
+      'aria-live': this.ariaLive,
+      'aria-hidden': this.ariaHidden,
+      'aria-busy': this.ariaBusy,
+      'aria-checked': this.ariaChecked,
+      'aria-disabled': this.ariaDisabled,
+      'aria-expanded': this.ariaExpanded,
+      'aria-selected': this.ariaSelected,
+      'aria-modal': this.ariaModal,
+      'aria-valuemax': this.ariaValueMax,
+      'aria-valuemin': this.ariaValueMin,
+      'aria-valuenow': this.ariaValueNow,
+      'aria-valuetext': this.ariaValueText,
+    };
+  }
+}

package/src/components/input-accessory-view/input-accessory-view.test.ts

@@ -0,0 +1,43 @@
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { InputAccessoryView } from './index';
+
+const ROOT_TAG = 913;
+const fabric = installFabric();
+
+@Component({
+  selector: 'symbiote-iav-host',
+  standalone: true,
+  imports: [InputAccessoryView],
+  template: `
+    <InputAccessoryView [testID]="'iav'" class="toolbar">
+      <symbiote-text>Hello</symbiote-text>
+    </InputAccessoryView>
+  `,
+})
+class InputAccessoryViewHostFixture {}
+
+beforeEach(() => {
+  fabric.reset();
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+describe('InputAccessoryView', () => {
+  it('resolves a class= on the InputAccessoryView use site onto the real committed view, not the anchor', async () => {
+    registerStyles({ toolbar: { backgroundColor: 'orange' } });
+
+    mount(ROOT_TAG, InputAccessoryViewHostFixture);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'iav');
+    expect(node?.props.backgroundColor).toBe('orange');
+  });
+});