@symbiote-native/angular 0.7.0 → 0.8.0

package/src/components/button.ts

@@ -33,7 +33,12 @@ import {
   type IAriaProps,
   type IButtonProps as ICoreButtonProps,
 } from '@symbiote-native/components';
-import type { ISymbioteEvent, ITextStyle, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type {
+  ISymbioteEvent,
+  ITextStyle,
+  IStyleProp,
+  IViewStyle,
+} from '@symbiote-native/engine';
 import { anchorStyleProp, TextHost } from '../primitives';
 import { TouchableOpacity } from './touchable';
 
@@ -81,8 +86,12 @@ export type IButtonProps = Omit<
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityAction.emit($event)"
       (accessibilityTap)="accessibilityTap.emit($event)"
@@ -149,8 +158,10 @@ export class Button implements IButtonProps, DoCheck {
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -195,7 +206,9 @@ export class Button implements IButtonProps, DoCheck {
   // ngDoCheck runs during the PARENT's refresh even when this view is skipped; the signal write is
   // what marks this view. The anchor returns the same props.style reference until a commit changes
   // it, so Object.is makes an unchanged poll free.
-  private readonly anchorStyleValue = signal<IStyleProp<IViewStyle> | undefined>(undefined);
+  private readonly anchorStyleValue = signal<
+    IStyleProp<IViewStyle> | undefined
+  >(undefined);
 
   ngDoCheck(): void {
     this.anchorStyleValue.set(anchorStyleProp<IViewStyle>(this.elementRef));

package/src/components/flat-list/index.ts

@@ -80,14 +80,20 @@ import {
   type IVListSeparatorContext,
 } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
-import { stableAnchorStyle, SymbioteStyleInputDirective, ViewHost } from '../../primitives';
+import {
+  stableAnchorStyle,
+  SymbioteStyleInputDirective,
+  ViewHost,
+} from '../../primitives';
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null;
 }
 function isRow<ItemT>(value: unknown): value is IRow<ItemT> {
   return (
-    isRecord(value) && Array.isArray(value['items']) && typeof value['startIndex'] === 'number'
+    isRecord(value) &&
+    Array.isArray(value['items']) &&
+    typeof value['startIndex'] === 'number'
   );
 }
 function isSeparators(value: unknown): value is ISeparators {
@@ -129,7 +135,10 @@ export {
   VListItemDirective,
   VListSeparatorDirective,
 } from '../virtualized-list';
-export type { IVListItemContext, IVListSeparatorContext } from '../virtualized-list';
+export type {
+  IVListItemContext,
+  IVListSeparatorContext,
+} from '../virtualized-list';
 
 // FlatList's imperative handle is exactly VirtualizedList's.
 export type IFlatListHandle = IVirtualizedListHandle;
@@ -164,7 +173,9 @@ export type IFlatListInputs<ItemT> = Omit<
 @Component({
   selector: 'FlatList',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     VirtualizedList,
@@ -254,7 +265,9 @@ export type IFlatListInputs<ItemT> = Omit<
           >
             <ng-container
               [vListOutlet]="separatorDir.templateRef"
-              [vListOutletContext]="rowSeparatorContext(highlighted, leadingItem, trailingItem)"
+              [vListOutletContext]="
+                rowSeparatorContext(highlighted, leadingItem, trailingItem)
+              "
             ></ng-container>
           </ng-template>
         }
@@ -299,7 +312,12 @@ export type IFlatListInputs<ItemT> = Omit<
         [style]="resolvedStyle"
         [contentContainerStyle]="contentContainerStyle"
       >
-        <ng-template vListItem let-item let-index="index" let-separators="separators">
+        <ng-template
+          vListItem
+          let-item
+          let-index="index"
+          let-separators="separators"
+        >
           <ng-container
             [vListOutlet]="itemDir?.templateRef"
             [vListOutletContext]="{ $implicit: item, index, separators }"
@@ -329,7 +347,9 @@ export type IFlatListInputs<ItemT> = Omit<
           >
             <ng-container
               [vListOutlet]="separatorDir.templateRef"
-              [vListOutletContext]="itemSeparatorContext(highlighted, leadingItem, trailingItem)"
+              [vListOutletContext]="
+                itemSeparatorContext(highlighted, leadingItem, trailingItem)
+              "
             ></ng-container>
           </ng-template>
         }
@@ -343,10 +363,16 @@ export class FlatList<ItemT = unknown>
   // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
   // `[onEndReached]="…"` — re-emitted straight from the inner VirtualizedList's own @Output()s (see
   // the template's `(endReached)="endReached.emit($event)"` style forwarding above).
-  @Output() readonly endReached = new EventEmitter<{ distanceFromEnd: number }>();
-  @Output() readonly startReached = new EventEmitter<{ distanceFromStart: number }>();
+  @Output() readonly endReached = new EventEmitter<{
+    distanceFromEnd: number;
+  }>();
+  @Output() readonly startReached = new EventEmitter<{
+    distanceFromStart: number;
+  }>();
   @Output() readonly refresh = new EventEmitter<void>();
-  @Output() readonly viewableItemsChanged = new EventEmitter<IViewableItemsChangedInfo<ItemT>>();
+  @Output() readonly viewableItemsChanged = new EventEmitter<
+    IViewableItemsChangedInfo<ItemT>
+  >();
   @Output() readonly scrollToIndexFailed = new EventEmitter<{
     index: number;
     highestMeasuredFrameIndex: number;
@@ -367,8 +393,10 @@ export class FlatList<ItemT = unknown>
   @Input() onStartReachedThreshold?: number;
   @Input() refreshing?: boolean | null;
   @Input() progressViewOffset?: number;
-  @Input() viewabilityConfig?: IVirtualizedListProps<ItemT>['viewabilityConfig'];
-  @Input() viewabilityConfigCallbackPairs?: IViewabilityConfigCallbackPair<ItemT>[];
+  @Input()
+  viewabilityConfig?: IVirtualizedListProps<ItemT>['viewabilityConfig'];
+  @Input()
+  viewabilityConfigCallbackPairs?: IViewabilityConfigCallbackPair<ItemT>[];
   @Input() initialNumToRender?: number;
   @Input() initialScrollIndex?: number;
   @Input() maxToRenderPerBatch?: number;
@@ -380,10 +408,13 @@ export class FlatList<ItemT = unknown>
     autoscrollToTopThreshold?: number;
   };
   @Input() onScroll?: IVirtualizedListProps<ItemT>['onScroll'];
-  @Input() onScrollBeginDrag?: IVirtualizedListProps<ItemT>['onScrollBeginDrag'];
+  @Input()
+  onScrollBeginDrag?: IVirtualizedListProps<ItemT>['onScrollBeginDrag'];
   @Input() onScrollEndDrag?: IVirtualizedListProps<ItemT>['onScrollEndDrag'];
-  @Input() onMomentumScrollBegin?: IVirtualizedListProps<ItemT>['onMomentumScrollBegin'];
-  @Input() onMomentumScrollEnd?: IVirtualizedListProps<ItemT>['onMomentumScrollEnd'];
+  @Input()
+  onMomentumScrollBegin?: IVirtualizedListProps<ItemT>['onMomentumScrollBegin'];
+  @Input()
+  onMomentumScrollEnd?: IVirtualizedListProps<ItemT>['onMomentumScrollEnd'];
   @Input() scrollEventThrottle?: number;
   @Input() keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
   @Input() keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
@@ -397,7 +428,8 @@ export class FlatList<ItemT = unknown>
   @ContentChild(VListHeaderDirective) headerDir?: VListHeaderDirective;
   @ContentChild(VListFooterDirective) footerDir?: VListFooterDirective;
   @ContentChild(VListEmptyDirective) emptyDir?: VListEmptyDirective;
-  @ContentChild(VListSeparatorDirective) separatorDir?: VListSeparatorDirective<ItemT>;
+  @ContentChild(VListSeparatorDirective)
+  separatorDir?: VListSeparatorDirective<ItemT>;
 
   // The composed inner list (whichever numColumns branch rendered). Its instance IS the
   // IVirtualizedListHandle, so FlatList's handle delegates straight to it.
@@ -433,7 +465,11 @@ export class FlatList<ItemT = unknown>
   // across ticks that changed nothing - a fresh object every tick defeats VirtualizedList's own
   // dedup gate and free-runs CD (see stableAnchorStyle's doc comment).
   ngDoCheck(): void {
-    this.resolvedStyle = stableAnchorStyle(this.elementRef, this.style, this.resolvedStyle);
+    this.resolvedStyle = stableAnchorStyle(
+      this.elementRef,
+      this.style,
+      this.resolvedStyle,
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -444,11 +480,18 @@ export class FlatList<ItemT = unknown>
         typeof this.columnWrapperStyle === 'string'
           ? resolveClassName(this.columnWrapperStyle)
           : this.columnWrapperStyle;
-      this.rowStyle = flattenStyle([{ flexDirection: 'row' }, resolvedColumnWrapperStyle]);
+      this.rowStyle = flattenStyle([
+        { flexDirection: 'row' },
+        resolvedColumnWrapperStyle,
+      ]);
     }
     if (changes['data'] !== undefined || changes['numColumns'] !== undefined) {
-      this.rows = this.isMultiColumn ? chunkIntoRows(this.data, this.columns) : [];
-      dlog(`Angular FlatList over ${this.data?.length ?? 0} items, ${this.columns} column(s)`);
+      this.rows = this.isMultiColumn
+        ? chunkIntoRows(this.data, this.columns)
+        : [];
+      dlog(
+        `Angular FlatList over ${this.data?.length ?? 0} items, ${this.columns} column(s)`,
+      );
     }
     if (
       changes['viewabilityConfigCallbackPairs'] !== undefined ||
@@ -469,15 +512,24 @@ export class FlatList<ItemT = unknown>
 
   // Viewability over rows expands back to per-item tokens, so the caller sees item-level
   // visibility, not row-level (shared expandRowViewability), matching Vue.
-  rowViewableItemsChanged = (info: IViewableItemsChangedInfo<IRow<ItemT>>): void => {
-    this.viewableItemsChanged.emit(expandRowViewability(info, this.keyExtractor));
+  rowViewableItemsChanged = (
+    info: IViewableItemsChangedInfo<IRow<ItemT>>,
+  ): void => {
+    this.viewableItemsChanged.emit(
+      expandRowViewability(info, this.keyExtractor),
+    );
   };
 
-  private buildRowViewabilityPairs(): IViewabilityConfigCallbackPair<IRow<ItemT>>[] | undefined {
+  private buildRowViewabilityPairs():
+    IViewabilityConfigCallbackPair<IRow<ItemT>>[] | undefined {
     return this.viewabilityConfigCallbackPairs?.map(pair => ({
       viewabilityConfig: pair.viewabilityConfig,
-      onViewableItemsChanged: (rowInfo: IViewableItemsChangedInfo<IRow<ItemT>>): void => {
-        pair.onViewableItemsChanged?.(expandRowViewability(rowInfo, this.keyExtractor));
+      onViewableItemsChanged: (
+        rowInfo: IViewableItemsChangedInfo<IRow<ItemT>>,
+      ): void => {
+        pair.onViewableItemsChanged?.(
+          expandRowViewability(rowInfo, this.keyExtractor),
+        );
       },
     }));
   }
@@ -494,7 +546,9 @@ export class FlatList<ItemT = unknown>
     const handle = isSeparators(separators) ? separators : NOOP_SEPARATORS;
     return row.items.map((item, column) => {
       const index = row.startIndex + column;
-      const key = this.keyExtractor ? this.keyExtractor(item, index) : String(index);
+      const key = this.keyExtractor
+        ? this.keyExtractor(item, index)
+        : String(index);
       return { key, context: { $implicit: item, index, separators: handle } };
     });
   }
@@ -511,8 +565,12 @@ export class FlatList<ItemT = unknown>
     return {
       $implicit: isHighlighted,
       highlighted: isHighlighted,
-      leadingItem: isRow<ItemT>(leadingRow) ? lastItemOfRow(leadingRow) : undefined,
-      trailingItem: isRow<ItemT>(trailingRow) ? firstItemOfRow(trailingRow) : undefined,
+      leadingItem: isRow<ItemT>(leadingRow)
+        ? lastItemOfRow(leadingRow)
+        : undefined,
+      trailingItem: isRow<ItemT>(trailingRow)
+        ? firstItemOfRow(trailingRow)
+        : undefined,
     };
   }
 
@@ -545,7 +603,11 @@ export class FlatList<ItemT = unknown>
   }): void {
     this.listRef?.scrollToIndex(params);
   }
-  scrollToItem(params: { item: unknown; animated?: boolean; viewPosition?: number }): void {
+  scrollToItem(params: {
+    item: unknown;
+    animated?: boolean;
+    viewPosition?: number;
+  }): void {
     this.listRef?.scrollToItem(params);
   }
   scrollToEnd(params?: { animated?: boolean }): void {

package/src/components/image/index.android.ts

@@ -13,7 +13,12 @@ import {
   SymbioteHostPropsDirective,
   SymbioteStyleInputDirective,
 } from '../../primitives';
-import { IMAGE_INPUTS, IMAGE_OUTPUTS, ImageBase, resolveImageProps } from './shared';
+import {
+  IMAGE_INPUTS,
+  IMAGE_OUTPUTS,
+  ImageBase,
+  resolveImageProps,
+} from './shared';
 export { setImageSourceResolver } from './shared';
 export type {
   IImageProps,
@@ -27,7 +32,9 @@ export type {
 @Component({
   selector: 'Image',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ImageHost, SymbioteHostPropsDirective],
   inputs: IMAGE_INPUTS,

package/src/components/image/index.ios.ts

@@ -13,7 +13,12 @@ import {
   SymbioteHostPropsDirective,
   SymbioteStyleInputDirective,
 } from '../../primitives';
-import { IMAGE_INPUTS, IMAGE_OUTPUTS, ImageBase, resolveImageProps } from './shared';
+import {
+  IMAGE_INPUTS,
+  IMAGE_OUTPUTS,
+  ImageBase,
+  resolveImageProps,
+} from './shared';
 export { setImageSourceResolver } from './shared';
 export type {
   IImageProps,
@@ -27,7 +32,9 @@ export type {
 @Component({
   selector: 'Image',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ImageHost, SymbioteHostPropsDirective],
   inputs: IMAGE_INPUTS,

package/src/components/image/shared.ts

@@ -150,15 +150,21 @@ function asNumber(value: unknown): number | undefined {
   return typeof value === 'number' ? value : undefined;
 }
 
-function asCrossOrigin(value: unknown): 'anonymous' | 'use-credentials' | undefined {
-  return value === 'anonymous' || value === 'use-credentials' ? value : undefined;
+function asCrossOrigin(
+  value: unknown,
+): 'anonymous' | 'use-credentials' | undefined {
+  return value === 'anonymous' || value === 'use-credentials'
+    ? value
+    : undefined;
 }
 
 function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
   return typeof value === 'object' && value !== null ? value : undefined;
 }
 
-export function resolveImageProps(input: Record<string, unknown>): Record<string, unknown> {
+export function resolveImageProps(
+  input: Record<string, unknown>,
+): Record<string, unknown> {
   const passthrough: IImagePassthroughProps = {
     resizeMethod: input['resizeMethod'] as IImageProps['resizeMethod'],
     blurRadius: asNumber(input['blurRadius']),
@@ -170,12 +176,21 @@ export function resolveImageProps(input: Record<string, unknown>): Record<string
         : undefined,
     testID: asString(input['testID']),
     nativeID: asString(input['nativeID']),
-    accessible: typeof input['accessible'] === 'boolean' ? input['accessible'] : undefined,
+    accessible:
+      typeof input['accessible'] === 'boolean'
+        ? input['accessible']
+        : undefined,
     accessibilityLabel: asString(input['accessibilityLabel']),
     accessibilityHint: asString(input['accessibilityHint']),
-    accessibilityRole: input['accessibilityRole'] as IAccessibilityProps['accessibilityRole'],
-    accessibilityState: input['accessibilityState'] as IAccessibilityProps['accessibilityState'],
-    accessibilityValue: input['accessibilityValue'] as IAccessibilityProps['accessibilityValue'],
+    accessibilityRole: input[
+      'accessibilityRole'
+    ] as IAccessibilityProps['accessibilityRole'],
+    accessibilityState: input[
+      'accessibilityState'
+    ] as IAccessibilityProps['accessibilityState'],
+    accessibilityValue: input[
+      'accessibilityValue'
+    ] as IAccessibilityProps['accessibilityValue'],
     accessibilityActions: input[
       'accessibilityActions'
     ] as IAccessibilityProps['accessibilityActions'],
@@ -213,26 +228,48 @@ export function resolveImageProps(input: Record<string, unknown>): Record<string
       typeof input['accessibilityShowsLargeContentViewer'] === 'boolean'
         ? input['accessibilityShowsLargeContentViewer']
         : undefined,
-    accessibilityLargeContentTitle: asString(input['accessibilityLargeContentTitle']),
+    accessibilityLargeContentTitle: asString(
+      input['accessibilityLargeContentTitle'],
+    ),
     role: input['role'] as IAriaProps['role'],
     'aria-label': asString(input['ariaLabel'] ?? input['aria-label']),
-    'aria-labelledby': asString(input['ariaLabelledBy'] ?? input['aria-labelledby']),
+    'aria-labelledby': asString(
+      input['ariaLabelledBy'] ?? input['aria-labelledby'],
+    ),
     'aria-live': input['ariaLive'] as IAriaProps['aria-live'],
-    'aria-hidden': typeof input['ariaHidden'] === 'boolean' ? input['ariaHidden'] : undefined,
-    'aria-busy': typeof input['ariaBusy'] === 'boolean' ? input['ariaBusy'] : undefined,
+    'aria-hidden':
+      typeof input['ariaHidden'] === 'boolean'
+        ? input['ariaHidden']
+        : undefined,
+    'aria-busy':
+      typeof input['ariaBusy'] === 'boolean' ? input['ariaBusy'] : undefined,
     'aria-checked': input['ariaChecked'] as IAriaProps['aria-checked'],
-    'aria-disabled': typeof input['ariaDisabled'] === 'boolean' ? input['ariaDisabled'] : undefined,
-    'aria-expanded': typeof input['ariaExpanded'] === 'boolean' ? input['ariaExpanded'] : undefined,
-    'aria-selected': typeof input['ariaSelected'] === 'boolean' ? input['ariaSelected'] : undefined,
-    'aria-modal': typeof input['ariaModal'] === 'boolean' ? input['ariaModal'] : undefined,
+    'aria-disabled':
+      typeof input['ariaDisabled'] === 'boolean'
+        ? input['ariaDisabled']
+        : undefined,
+    'aria-expanded':
+      typeof input['ariaExpanded'] === 'boolean'
+        ? input['ariaExpanded']
+        : undefined,
+    'aria-selected':
+      typeof input['ariaSelected'] === 'boolean'
+        ? input['ariaSelected']
+        : undefined,
+    'aria-modal':
+      typeof input['ariaModal'] === 'boolean' ? input['ariaModal'] : undefined,
     'aria-valuemax': asNumber(input['ariaValueMax']),
     'aria-valuemin': asNumber(input['ariaValueMin']),
     'aria-valuenow': asNumber(input['ariaValueNow']),
     'aria-valuetext': asString(input['ariaValueText']),
-    onAccessibilityAction: input['onAccessibilityAction'] as IImageProps['onLoad'],
+    onAccessibilityAction: input[
+      'onAccessibilityAction'
+    ] as IImageProps['onLoad'],
     onAccessibilityTap: input['onAccessibilityTap'] as IImageProps['onLoad'],
     onMagicTap: input['onMagicTap'] as IImageProps['onLoad'],
-    onAccessibilityEscape: input['onAccessibilityEscape'] as IImageProps['onLoad'],
+    onAccessibilityEscape: input[
+      'onAccessibilityEscape'
+    ] as IImageProps['onLoad'],
     onLoadStart: input['onLoadStart'] as IImageProps['onLoadStart'],
     onLoad: input['onLoad'] as IImageProps['onLoad'],
     onLoadEnd: input['onLoadEnd'] as IImageProps['onLoadEnd'],
@@ -442,8 +479,10 @@ export abstract class ImageBase {
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       role: this.role,
       ariaLabel: this.ariaLabel,

package/src/components/image-background.ts

@@ -37,12 +37,19 @@ import {
   type IViewStyle,
 } from '@symbiote-native/engine';
 import { Image } from './image';
-import { anchorHostStyle, SymbioteStyleInputDirective, ViewHost } from '../primitives';
+import {
+  anchorHostStyle,
+  SymbioteStyleInputDirective,
+  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'> {
+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;
@@ -68,7 +75,9 @@ export type IAngularImageBackgroundInputs = Omit<
 @Component({
   selector: 'ImageBackground',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [Image, ViewHost],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -108,10 +117,16 @@ export type IAngularImageBackgroundInputs = Omit<
         [screenReaderFocusable]="folded.screenReaderFocusable"
         [accessibilityViewIsModal]="folded.accessibilityViewIsModal"
         [accessibilityElementsHidden]="folded.accessibilityElementsHidden"
-        [accessibilityIgnoresInvertColors]="folded.accessibilityIgnoresInvertColors"
+        [accessibilityIgnoresInvertColors]="
+          folded.accessibilityIgnoresInvertColors
+        "
         [accessibilityLanguage]="folded.accessibilityLanguage"
-        [accessibilityRespondsToUserInteraction]="folded.accessibilityRespondsToUserInteraction"
-        [accessibilityShowsLargeContentViewer]="folded.accessibilityShowsLargeContentViewer"
+        [accessibilityRespondsToUserInteraction]="
+          folded.accessibilityRespondsToUserInteraction
+        "
+        [accessibilityShowsLargeContentViewer]="
+          folded.accessibilityShowsLargeContentViewer
+        "
         [accessibilityLargeContentTitle]="folded.accessibilityLargeContentTitle"
         (loadStart)="loadStart.emit($event)"
         (load)="load.emit($event)"
@@ -170,8 +185,10 @@ export class ImageBackground implements IAngularImageBackgroundInputs {
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -248,8 +265,10 @@ export class ImageBackground implements IAngularImageBackgroundInputs {
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       role: this.role,
       'aria-label': this.ariaLabel,

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

@@ -43,7 +43,8 @@ import {
 
 // 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 {
+export interface IAngularInputAccessoryViewProps
+  extends IAccessibilityProps, IAriaProps {
   // The id a TextInput's inputAccessoryViewID points at to dock above its keyboard.
   nativeID?: string;
   backgroundColor?: string;
@@ -55,13 +56,18 @@ export interface IAngularInputAccessoryViewProps extends IAccessibilityProps, IA
 // mirroring Pressable's IAngularPressableInputs split.
 export type IAngularInputAccessoryViewInputs = Omit<
   IAngularInputAccessoryViewProps,
-  'onAccessibilityAction' | 'onAccessibilityTap' | 'onMagicTap' | 'onAccessibilityEscape'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
 >;
 
 @Component({
   selector: 'InputAccessoryView',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [InputAccessoryViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -77,7 +83,9 @@ export type IAngularInputAccessoryViewInputs = Omit<
     </symbiote-input-accessory-view>
   `,
 })
-export class InputAccessoryView implements IAngularInputAccessoryViewInputs, OnChanges, DoCheck {
+export class InputAccessoryView
+  implements IAngularInputAccessoryViewInputs, OnChanges, DoCheck
+{
   @Input() nativeID?: string;
   @Input() backgroundColor?: string;
   @Input() style?: IStyleProp<IViewStyle>;
@@ -94,8 +102,10 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs, OnC
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -177,12 +187,17 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs, OnC
   readonly hostProps = computed<Record<string, unknown>>(() => {
     this.hostPropsRevision();
     const descriptorProps = this.descriptor.props;
-    return { ...descriptorProps, style: [anchorHostStyle(this.elementRef), descriptorProps.style] };
+    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> {
+  private accessibilityInputs(): IAccessibilityProps &
+    IAriaProps &
+    Record<string, unknown> {
     return {
       testID: this.testID,
       accessible: this.accessible,
@@ -200,8 +215,10 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs, OnC
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       role: this.role,
       'aria-label': this.ariaLabel,