@symbiote-native/angular 0.0.0-canary-20260724081123

package/src/components/refresh-control/index.ts

@@ -0,0 +1,284 @@
+// RefreshControl, the Angular lifecycle half. On iOS this is the PullToRefreshView Fabric node that
+// lives INSIDE a ScrollView (a childless sibling before the content container); on Android it is
+// AndroidSwipeRefreshLayout and WRAPS the scroll view, receiving it through <ng-content>.
+// The Angular twin of the React/Vue RefreshControl. There is no JS-side platform renaming and no
+// shared render fn — every prop forwards straight to the native node, which reads the ones it
+// understands and ignores the rest, so the Android-only and iOS-only families ride down harmlessly
+// on both. So this folds aria/role through the shared resolveAccessibilityProps and maps the native
+// props + a11y + onRefresh straight onto the symbiote-refresh-control host, children via <ng-content>.
+// No platform branch (one composed component both platforms), so this stays a flat single file.
+//
+// `refreshing` is a controlled prop: the parent owns it and pushes it down each commit; native
+// reports the gesture via the direct `topRefresh` event, which the engine routes to the host's
+// `refresh` listener (Angular blocks [onX] property bindings; events flow through (event) only).
+
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  ViewChild,
+  type AfterViewInit,
+  type OnChanges,
+  type OnInit,
+  type SimpleChanges,
+} from '@angular/core';
+import {
+  resolveAccessibilityProps,
+  type IAccessibilityProps,
+  type IAccessibilityStateValue,
+  type IAriaProps,
+} from '@symbiote-native/components';
+import {
+  dispatchViewCommand,
+  dlog,
+  isSymbioteEvent,
+  isSymbioteNode,
+  type IStyleProp,
+  type ISymbioteEvent,
+  type IViewStyle,
+} from '@symbiote-native/engine';
+import { anchorHostStyle, RefreshControlHost, SymbioteHostPropsDirective } from '../../primitives';
+
+// Record<string, unknown> already tolerates `style` holding the [anchorHostStyle, this.style]
+// array anchorHostStyle's merge produces (see hostProps below) — no widening needed.
+type IHostProps = Record<string, unknown>;
+
+// Mirrors React's IRefreshControlProps minus children (Angular takes the Android-wrapped scroll view
+// via <ng-content>), declared per-adapter over the shared accessibility base since the framework-specific
+// children slot keeps it from being fully shared across adapters. Read the React reference for the
+// native prop names.
+export interface IAngularRefreshControlProps extends IAccessibilityProps, IAriaProps {
+  refreshing: boolean;
+  // RN's onRefresh is `() => void | Promise<void>`, the handler may be async; the promise is
+  // fire-and-forget (native already starts refreshing on the gesture).
+  onRefresh?: () => void | Promise<void>;
+  tintColor?: string;
+  title?: string;
+  titleColor?: string;
+  progressViewOffset?: number;
+  // Android-only spinner styling (RN RefreshControlPropsAndroid): `colors` are the indicator's
+  // animated stroke colors, `progressBackgroundColor` the disc behind it, `size` the diameter preset.
+  // AndroidSwipeRefreshLayout reads them; PullToRefreshView on iOS ignores unknown props.
+  colors?: readonly string[];
+  progressBackgroundColor?: string;
+  size?: 'default' | 'large';
+  // Android-only native prop forwarded to AndroidSwipeRefreshLayout; iOS native never reads it.
+  enabled?: boolean;
+  // The Android scroll-view wrap injects the layout half of the style onto this host; iOS leaves it
+  // unset (the RefreshControl is a childless sibling). Harmless to forward on both.
+  style?: IStyleProp<IViewStyle>;
+}
+
+// What the RefreshControl component itself takes as plain @Input()s: the full surface minus the
+// refresh/accessibility events, which it exposes as real @Output() EventEmitters instead (mirrors
+// Pressable's IAngularPressableInputs in pressable/index.ts).
+export type IAngularRefreshControlInputs = Omit<
+  IAngularRefreshControlProps,
+  | 'onRefresh'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
+>;
+
+@Component({
+  selector: 'RefreshControl',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [RefreshControlHost, SymbioteHostPropsDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <symbiote-refresh-control
+      #host
+      [symbioteHostProps]="hostProps"
+      (refresh)="handleRefresh()"
+      (accessibilityAction)="emit(accessibilityAction, $event)"
+      (accessibilityTap)="emit(accessibilityTap, $event)"
+      (magicTap)="emit(magicTap, $event)"
+      (accessibilityEscape)="emit(accessibilityEscape, $event)"
+    >
+      <ng-content></ng-content>
+    </symbiote-refresh-control>
+  `,
+})
+export class RefreshControl
+  implements IAngularRefreshControlInputs, OnInit, OnChanges, AfterViewInit
+{
+  // Controlled prop the parent owns; required to match the React reference surface.
+  @Input({ required: true }) refreshing!: boolean;
+  // RN's onRefresh is `() => void | Promise<void>`, so the callback shape allows an async handler;
+  // the @Output() itself only signals the gesture (fire-and-forget, native already starts refreshing).
+  @Output() readonly refresh = new EventEmitter<void>();
+  @Input() tintColor?: string;
+  @Input() title?: string;
+  @Input() titleColor?: string;
+  @Input() progressViewOffset?: number;
+  @Input() colors?: readonly string[];
+  @Input() progressBackgroundColor?: string;
+  @Input() size?: 'default' | 'large';
+  @Input() enabled?: boolean;
+  @Input() style?: IStyleProp<IViewStyle>;
+  @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;
+  @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() 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;
+
+  // The inner symbiote-refresh-control primitive — NOT this component's own anchor host. Used for
+  // the imperative dispatchViewCommand calls below.
+  @ViewChild('host') private host?: RefreshControlHost;
+
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) — distinct from `host` above, which targets the real
+  // inner `symbiote-refresh-control` primitive one level down.
+  private readonly elementRef = inject(ElementRef);
+
+  private lastNativeRefreshing = false;
+  private refreshNativeNode: unknown;
+
+  ngOnInit(): void {
+    dlog('RefreshControl -> PullToRefreshView');
+    dlog(`RefreshControl refreshing=${String(this.refreshing)}`);
+    if (this.enabled !== undefined)
+      dlog(`RefreshControl enabled=${String(this.enabled)} (Android-only)`);
+    if (this.refresh.observed) dlog('RefreshControl refresh listener wired');
+  }
+
+  ngAfterViewInit(): void {
+    this.lastNativeRefreshing = this.refreshing;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const refreshing = changes.refreshing;
+    if (refreshing === undefined) return;
+    if (refreshing.firstChange) {
+      this.lastNativeRefreshing = this.refreshing;
+      return;
+    }
+    this.syncNativeRefreshing(this.refreshNativeNode ?? this.host?.nativeElement);
+  }
+
+  // Native starts the spinner before JS runs. Mirror RN's RefreshControl controlled-component
+  // handshake: remember that native is refreshing, call the user's callback, then after Angular has
+  // had a chance to propagate `[refreshing]`, force native back to the JS value if it stayed false.
+  handleRefresh(nativeNode: unknown = this.host?.nativeElement): void {
+    this.refreshNativeNode = nativeNode;
+    this.lastNativeRefreshing = true;
+    this.refresh.emit();
+    queueMicrotask(() => this.syncNativeRefreshing(nativeNode));
+  }
+
+  private syncNativeRefreshing(nativeNode: unknown): void {
+    if (this.refreshing === this.lastNativeRefreshing) return;
+    if (!isSymbioteNode(nativeNode)) return;
+    dispatchViewCommand(nativeNode, 'setNativeRefreshing', [this.refreshing]);
+    this.lastNativeRefreshing = this.refreshing;
+  }
+
+  // Forward an engine event to the matching @Output(), narrowing the template's untyped $event
+  // first. The accessibility* events arrive on the engine's structural event channel.
+  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+    if (isSymbioteEvent(event)) emitter.emit(event);
+  }
+
+  // The full native + a11y prop bag applied onto the host in one shot via
+  // [symbioteHostProps], instead of enumerating each key as its own template binding. The
+  // anchor's class-derived style goes FIRST, this component's own explicit `style` @Input SECOND
+  // — flattenStyle's later-wins collapse keeps an explicit [style] winning over its ambient class.
+  get hostProps(): IHostProps {
+    return {
+      refreshing: this.refreshing,
+      tintColor: this.tintColor,
+      title: this.title,
+      titleColor: this.titleColor,
+      progressViewOffset: this.progressViewOffset,
+      colors: this.colors,
+      progressBackgroundColor: this.progressBackgroundColor,
+      size: this.size,
+      enabled: this.enabled,
+      style: [anchorHostStyle(this.elementRef), this.style],
+      testID: this.testID,
+      nativeID: this.nativeID,
+      accessible: this.accessible,
+      ...this.folded,
+    };
+  }
+
+  // Fold the web aria-*/role aliases into the canonical accessibility* props once per render, so the
+  // host node never sees an aria-* key (native ignores them) — the shared transform every adapter runs.
+  get folded(): Partial<IAngularRefreshControlProps> {
+    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/refresh-control/refresh-control.test.ts

@@ -0,0 +1,41 @@
+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 { RefreshControl } from './index';
+
+const ROOT_TAG = 914;
+const fabric = installFabric();
+
+@Component({
+  selector: 'symbiote-refresh-control-host',
+  standalone: true,
+  imports: [RefreshControl],
+  template: `
+    <RefreshControl [refreshing]="false" [testID]="'refresh'" class="spinner"></RefreshControl>
+  `,
+})
+class RefreshControlHostFixture {}
+
+beforeEach(() => {
+  fabric.reset();
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+describe('RefreshControl', () => {
+  it('resolves a class= on the RefreshControl use site onto the real committed view, not the anchor', async () => {
+    registerStyles({ spinner: { backgroundColor: 'green' } });
+
+    mount(ROOT_TAG, RefreshControlHostFixture);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'refresh');
+    expect(node?.props.backgroundColor).toBe('green');
+  });
+});

package/src/components/safe-area-view/index.ts

@@ -0,0 +1,177 @@
+// SafeAreaView, the Angular lifecycle half. A plain view whose native side insets its
+// children to the safe area (notch, rounded corners, system bars). There is no JS-side
+// translation — RN renders the native RCTSafeAreaView and lets the host do the inset math —
+// so this folds aria/role through the shared resolveAccessibilityProps and maps style +
+// a11y + onLayout straight onto the symbiote-safe-area-view host, children via <ng-content>.
+// The Angular twin of the React/Vue SafeAreaView. No platform branch (one Fabric name both
+// platforms), so this stays a flat single file.
+
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core';
+import {
+  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, SafeAreaViewHost, SymbioteHostPropsDirective } from '../../primitives';
+
+// Mirrors React's ISafeAreaViewProps minus children (Angular takes children via <ng-content>),
+// declared per-adapter over the shared accessibility base since the framework-specific children
+// slot keeps it from being fully shared across adapters.
+export interface IAngularSafeAreaViewProps extends IAccessibilityProps, IAriaProps {
+  style?: IStyleProp<IViewStyle>;
+  onLayout?: (event: ISymbioteEvent) => void;
+}
+
+// What the component itself takes as plain @Input()s: the full surface minus onLayout and the
+// accessibility callbacks, which it exposes as real @Output() EventEmitters instead (see the
+// class below), mirroring Pressable's IAngularPressableInputs split.
+export type IAngularSafeAreaViewInputs = Omit<
+  IAngularSafeAreaViewProps,
+  | 'onLayout'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
+>;
+
+@Component({
+  selector: 'SafeAreaView',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [SafeAreaViewHost, SymbioteHostPropsDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <symbiote-safe-area-view
+      [symbioteHostProps]="hostProps"
+      (accessibilityAction)="emit(accessibilityAction, $event)"
+      (accessibilityTap)="emit(accessibilityTap, $event)"
+      (magicTap)="emit(magicTap, $event)"
+      (accessibilityEscape)="emit(accessibilityEscape, $event)"
+      (layout)="emit(layout, $event)"
+    >
+      <ng-content></ng-content>
+    </symbiote-safe-area-view>
+  `,
+})
+export class SafeAreaView implements IAngularSafeAreaViewInputs {
+  @Input() style?: IStyleProp<IViewStyle>;
+  // Real @Output()s, not `[onX]="…"` callbacks. Safe to name `layout` the same as the native
+  // `layout` event fired inside this component's own template — the engine's bubble() treats
+  // ANCHOR_HOST_COMPONENTS as transparent to listener lookup, so there is no double-fire.
+  @Output() readonly layout = new EventEmitter<ISymbioteEvent>();
+  @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() 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). SafeAreaView 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 first. layout / accessibility* arrive on the engine's structural event channel
+  // (Angular blocks [onX] property bindings; events flow through (event) only).
+  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+    if (isSymbioteEvent(event)) emitter.emit(event);
+  }
+
+  // Folds style/testID/nativeID/accessible alongside the accessibility*/aria-*/role surface into
+  // one bag for [symbioteHostProps] — resolveAccessibilityProps takes the whole props object (not
+  // just the accessibility slice) and returns it with aria-*/role folded into accessibility*, so
+  // the host node never sees an aria-* key (native ignores them), same transform React's
+  // SafeAreaView runs over its whole `rawProps`. The anchor's class-derived style goes FIRST, this
+  // component's own explicit `style` @Input SECOND — flattenStyle's later-wins collapse keeps an
+  // explicit [style] winning over its ambient class.
+  get hostProps(): Record<string, unknown> {
+    return resolveAccessibilityProps({
+      style: [anchorHostStyle(this.elementRef), this.style],
+      testID: this.testID,
+      nativeID: this.nativeID,
+      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/safe-area-view/safe-area-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 { SafeAreaView } from './index';
+
+const ROOT_TAG = 910;
+const fabric = installFabric();
+
+@Component({
+  selector: 'symbiote-safe-area-view-host',
+  standalone: true,
+  imports: [SafeAreaView],
+  template: `
+    <SafeAreaView [testID]="'safe-area'" class="screen">
+      <symbiote-text>Hello</symbiote-text>
+    </SafeAreaView>
+  `,
+})
+class SafeAreaViewHostFixture {}
+
+beforeEach(() => {
+  fabric.reset();
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+describe('SafeAreaView', () => {
+  it('resolves a class= on the SafeAreaView use site onto the real committed view, not the anchor', async () => {
+    registerStyles({ screen: { backgroundColor: 'navy' } });
+
+    mount(ROOT_TAG, SafeAreaViewHostFixture);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'safe-area');
+    expect(node?.props.backgroundColor).toBe('navy');
+  });
+});

package/src/components/scroll-view/android-scroll-view-axis-projection.test.ts

@@ -0,0 +1,123 @@
+// Regression test for an Android content-projection bug:
+// ScrollView on Android picks a different native content view per axis (RCTView vs
+// AndroidHorizontalScrollContentView), which used to require a separate <ng-content> per
+// axis x refresh-control combination — and Angular only reliably projects into a component's
+// LAST-declared <ng-content> when 2+ distinct declarations exist. Fixed by routing all four
+// branches through a single shared <ng-template>/<ng-content> via a local template-outlet
+// directive (see index.android.ts). Covers all four static combinations plus a runtime axis
+// flip, which the projection.ts records/reconcile path must survive without dropping children.
+import '@angular/compiler';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { installFabric } from '@symbiote-native/test-utils';
+import { mount, unmount } from '../../render';
+import { RefreshControl } from '../refresh-control';
+import { ScrollView } from './index.android';
+
+const ROOT_TAG = 919;
+const fabric = installFabric();
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+function expectCellsProjected(): void {
+  expect(fabric.find(node => node.props.testID === 'a')).toBeDefined();
+  expect(fabric.find(node => node.props.testID === 'b')).toBeDefined();
+}
+
+class HorizontalNoRefreshApp {}
+Component({
+  selector: 'axis-projection-horizontal-no-refresh',
+  standalone: true,
+  imports: [ScrollView],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <ScrollView [horizontal]="true">
+      <symbiote-view testID="a"></symbiote-view>
+      <symbiote-view testID="b"></symbiote-view>
+    </ScrollView>
+  `,
+})(HorizontalNoRefreshApp);
+
+class HorizontalRefreshApp {
+  refresh = (): void => {};
+}
+Component({
+  selector: 'axis-projection-horizontal-refresh',
+  standalone: true,
+  imports: [ScrollView, RefreshControl],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <ScrollView [horizontal]="true">
+      <RefreshControl [refreshing]="true" (refresh)="refresh()" />
+      <symbiote-view testID="a"></symbiote-view>
+      <symbiote-view testID="b"></symbiote-view>
+    </ScrollView>
+  `,
+})(HorizontalRefreshApp);
+
+class VerticalNoRefreshApp {}
+Component({
+  selector: 'axis-projection-vertical-no-refresh',
+  standalone: true,
+  imports: [ScrollView],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <ScrollView>
+      <symbiote-view testID="a"></symbiote-view>
+      <symbiote-view testID="b"></symbiote-view>
+    </ScrollView>
+  `,
+})(VerticalNoRefreshApp);
+
+class AxisSwitchApp {
+  static readonly horizontal = signal(false);
+  get isHorizontal(): boolean {
+    return AxisSwitchApp.horizontal();
+  }
+}
+Component({
+  selector: 'axis-projection-axis-switch',
+  standalone: true,
+  imports: [ScrollView],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <ScrollView [horizontal]="isHorizontal">
+      <symbiote-view testID="a"></symbiote-view>
+      <symbiote-view testID="b"></symbiote-view>
+    </ScrollView>
+  `,
+})(AxisSwitchApp);
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+describe('Android ScrollView projects content across every axis x refresh combination', () => {
+  it('horizontal, no refresh control', async () => {
+    mount(ROOT_TAG, HorizontalNoRefreshApp);
+    await tick();
+    expectCellsProjected();
+  });
+
+  it('horizontal, with a projected refresh control', async () => {
+    mount(ROOT_TAG, HorizontalRefreshApp);
+    await tick();
+    expectCellsProjected();
+  });
+
+  it('vertical, no refresh control', async () => {
+    mount(ROOT_TAG, VerticalNoRefreshApp);
+    await tick();
+    expectCellsProjected();
+  });
+
+  it('survives a runtime vertical -> horizontal axis switch', async () => {
+    AxisSwitchApp.horizontal.set(false);
+    mount(ROOT_TAG, AxisSwitchApp);
+    await tick();
+    expectCellsProjected();
+
+    AxisSwitchApp.horizontal.set(true);
+    await tick();
+    await tick();
+    expectCellsProjected();
+  });
+});