@symbiote-native/angular 0.6.2 → 0.8.0

package/src/components/scroll-view/sticky-header.ts

@@ -1,20 +1,15 @@
-// Sticky headers: the Angular twin of adapters/{react,vue}/src/components/scroll-view/
-// sticky-header.{tsx,ts}, the JS layer RN implements in ScrollView.js / ScrollViewStickyHeader.js.
-//
-// Source-based: RN does stickiness PURELY IN JS. A single `_scrollAnimatedValue` an Animated.event
-// drives from `onScroll` feeds each flagged header's translateY through an interpolation that pins
-// it to the top (or bottom, inverted) until the next header collides with it. The native Fabric
-// scroll view does NOT honor `stickyHeaderIndices` on its own. The load-bearing top/inverted
-// interpolation math (computeStickyInterpolation) lives framework-agnostic in @symbiote-native/components
-// this file holds the Angular component shell, the layout state, and the interpolation
-// build, sharing the math verbatim with React/Vue. Angular supplies only the lifecycle (inputs +
-// manual change detection instead of useState/useEffect or refs/watch).
+// Sticky headers: RN does stickiness PURELY IN JS (ScrollView.js / ScrollViewStickyHeader.js).
+// A single `_scrollAnimatedValue` an Animated.event drives from `onScroll` feeds each flagged
+// header's translateY through an interpolation that pins it to the top (or bottom, inverted)
+// until the next header collides with it — the native Fabric scroll view does NOT honor
+// `stickyHeaderIndices` on its own. The interpolation math (computeStickyInterpolation) lives
+// framework-agnostic in @symbiote-native/components, shared verbatim with React/Vue; this file
+// holds the Angular component shell, layout state, and interpolation build.
 //
 // This is the public sticky-header WRAPPER for explicit composition. ScrollView also auto-wraps
-// projected direct children named by stickyHeaderIndices through its projection bridge (see
-// projection.ts), because Angular templates cannot map <ng-content> children directly; that auto
-// path intentionally uses this built-in wrapper rather than dynamically instantiating arbitrary
-// custom component classes.
+// projected children named by stickyHeaderIndices through its projection bridge (projection.ts),
+// because Angular templates cannot map <ng-content> children directly; that auto path
+// intentionally reuses this built-in wrapper rather than instantiating arbitrary component types.
 
 import {
   ChangeDetectionStrategy,
@@ -101,7 +96,9 @@ export class ScrollViewStickyHeader
   // The animated node driving the transform (RN's animatedTranslateY), replaced by the
   // rebuild-interpolation effect. When the scroll value is native, this interpolation runs on the UI
   // thread: the smooth pin.
-  private animatedTranslateY: AnimatedInterpolation = new AnimatedValue(0).interpolate({
+  private animatedTranslateY: AnimatedInterpolation = new AnimatedValue(
+    0,
+  ).interpolate({
     inputRange: [-1, 0],
     outputRange: [0, 0],
   });
@@ -140,13 +137,17 @@ export class ScrollViewStickyHeader
     // anchor style first so the fixed transform/zIndex below still wins on conflict.
     return [
       anchorHostStyle(this.elementRef),
-      { transform: [{ translateY: this.animatedTranslateY }], zIndex: STICKY_HEADER_Z_INDEX },
+      {
+        transform: [{ translateY: this.animatedTranslateY }],
+        zIndex: STICKY_HEADER_Z_INDEX,
+      },
     ];
   }
 
   // Stable reference (bound once) so AnimatedView's directive does not re-wire the layout listener
   // every change-detection pass.
-  private readonly onHostLayout = (event: ISymbioteEvent): void => this.handleLayout(event);
+  private readonly onHostLayout = (event: ISymbioteEvent): void =>
+    this.handleLayout(event);
 
   // Also a stable reference, not a getter: jsonEqual (commit.ts) can't structurally compare the
   // embedded onLayout function, so a fresh object here would read as "props changed" on every
@@ -161,7 +162,9 @@ export class ScrollViewStickyHeader
 
   // The EXPLICIT debounced translateY overrides the committed transform for hit-testing while
   // animatedTranslateY does the smooth (native-driven) pin (RN ScrollViewStickyHeader.js).
-  get passthrough(): { style: { transform: Array<{ translateY: number }> } } | null {
+  get passthrough(): {
+    style: { transform: Array<{ translateY: number }> };
+  } | null {
     return this.state.translateY !== null
       ? { style: { transform: [{ translateY: this.state.translateY }] } }
       : null;
@@ -186,7 +189,10 @@ export class ScrollViewStickyHeader
         case 'rebuild-interpolation': {
           // Detach the old listener, build a fresh interpolation onto the shared scroll value, and
           // wire the settled-value listener (symbiote is always Fabric; RN attaches it only there).
-          if (this.interpolation !== undefined && this.listenerId !== undefined) {
+          if (
+            this.interpolation !== undefined &&
+            this.listenerId !== undefined
+          ) {
             this.interpolation.removeListener(this.listenerId);
             this.listenerId = undefined;
           }
@@ -198,14 +204,15 @@ export class ScrollViewStickyHeader
           this.interpolation = next;
           this.animatedTranslateY = next;
           dlog(
-            `Angular ScrollViewStickyHeader interpolation measured=${this.state.measured} y=${this.state.layoutY}`,
+            `STICKY[header] interpolation measured=${this.state.measured} y=${this.state.layoutY}`,
           );
           break;
         }
         case 'schedule-debounce':
           // The animated value updates several times per frame; debounce the settled value into the
           // committed transform so hit detection stays current (a Fabric issue, worse on Android).
-          if (this.debounceTimer !== undefined) clearTimeout(this.debounceTimer);
+          if (this.debounceTimer !== undefined)
+            clearTimeout(this.debounceTimer);
           this.debounceTimer = setTimeout(() => {
             this.debounceTimer = undefined;
             this.dispatch({ kind: 'debounce-fired', value: effect.value });
@@ -238,8 +245,13 @@ export class ScrollViewStickyHeader
     this.changeDetector.markForCheck();
   }
 
-  private readonly animatedValueListener = ({ value }: { value: number | string }): void => {
-    if (typeof value === 'number') this.dispatch({ kind: 'animated-tick', value });
+  private readonly animatedValueListener = ({
+    value,
+  }: {
+    value: number | string;
+  }): void => {
+    if (typeof value === 'number')
+      this.dispatch({ kind: 'animated-tick', value });
   };
 
   private teardown(): void {

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

@@ -1,33 +1,27 @@
 // SectionList, the Angular public list-of-sections component. A thin convenience surface over
 // VirtualizedSectionList, mirroring RN's layering (SectionList -> VirtualizedSectionList ->
 // VirtualizedList). All section-flattening / windowing / sticky-header / imperative-scroll logic
-// lives below; this layer re-exposes the same surface under the SectionList name and re-exposes the
-// handle (delegating to the inner VirtualizedSectionList). The Angular twin of
-// adapters/vue/src/components/section-list/index.ts.
+// lives below; this layer re-exposes the same surface under the SectionList name and delegates
+// the handle to the inner VirtualizedSectionList.
 //
-// As in the Vue twin, SectionList is a PURE FORWARDER: its public prop surface IS
-// VirtualizedSectionList's (RN layers them one-for-one), and the SectionList-flavour defaults
-// (stickySectionHeadersEnabled per Platform.OS, the section entry keyExtractor) already live INSIDE
-// VirtualizedSectionList — it applies `stickySectionHeadersEnabled ?? (Platform.OS === 'ios')` in
-// its ngDoCheck and routes keyExtractor through the shared sectionEntryKey. So SectionList forwards
-// each prop unchanged (undefined included) and the default lands one layer down; double-applying
-// here would fight VSL. Vue spreads $attrs to do this in one line — Angular has no attrs-spread, so
-// every prop is forwarded as an explicit @Input binding, except the seven list-lifecycle events
+// SectionList is a PURE FORWARDER: its public prop surface IS VirtualizedSectionList's (RN layers
+// them one-for-one), and the SectionList-flavour defaults (stickySectionHeadersEnabled per
+// Platform.OS, the section entry keyExtractor) already live INSIDE VirtualizedSectionList — double-
+// applying them here would fight it. Angular has no attrs-spread (unlike Vue's $attrs), so every
+// prop is forwarded as an explicit @Input binding, except the seven list-lifecycle events
 // (endReached/startReached/refresh/accessibilityAction/accessibilityTap/magicTap/
 // accessibilityEscape), which are real @Output() EventEmitters re-emitted via a listener binding.
 //
-// TEMPLATE FORWARDING — RE-STAMP, the same pattern FlatList's single-column branch was fixed to use
-// (see flat-list/index.ts). A bare `<ng-content></ng-content>` passthrough does NOT let
-// VirtualizedSectionList's own @ContentChild resolve directives across the SECOND projection hop
-// (SectionList's own `<ng-content>` re-projecting content that was actually authored on `<SectionList>`
-// by the app, one level further out) — Angular's content queries resolve against what was projected
-// directly onto the querying component's OWN tag, not transitively through a nested `<ng-content>`
-// relay. So SectionList captures the app's `<ng-template vSectionItem>` / vSectionHeader /
-// vSectionFooter / vSectionSeparator / vListHeader / vListFooter / vListEmpty / vListSeparator with
-// its OWN @ContentChild (a single, direct projection hop — this always resolves) and re-authors
-// equivalent `<ng-template>`s on `<VirtualizedSectionList>`, each forwarding the captured
-// templateRef + context through VListOutletDirective, exactly mirroring how VirtualizedSectionList
-// itself re-stamps its own captured directives onto its inner VirtualizedList.
+// TEMPLATE FORWARDING — RE-STAMP, the same pattern FlatList's single-column branch uses (see
+// flat-list/index.ts). A bare `<ng-content></ng-content>` passthrough does NOT let
+// VirtualizedSectionList's own @ContentChild resolve directives across a SECOND projection hop —
+// Angular's content queries resolve only against what was projected directly onto the querying
+// component's OWN tag. So SectionList captures the app's `<ng-template vSectionItem>` /
+// vSectionHeader / vSectionFooter / vSectionSeparator / vListHeader / vListFooter / vListEmpty /
+// vListSeparator with its OWN @ContentChild (a single, direct hop — always resolves) and
+// re-authors equivalent `<ng-template>`s on `<VirtualizedSectionList>`, forwarding the captured
+// templateRef + context through VListOutletDirective — mirroring how VirtualizedSectionList itself
+// re-stamps its own captured directives onto its inner VirtualizedList.
 
 import {
   ChangeDetectionStrategy,
@@ -62,7 +56,10 @@ import {
   type IVListSeparatorContext,
 } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
-import { stableAnchorStyle } from '../../primitives';
+import {
+  stableAnchorStyle,
+  SymbioteStyleInputDirective,
+} from '../../primitives';
 import {
   VSectionFooterDirective,
   VSectionHeaderDirective,
@@ -126,6 +123,9 @@ export type ISectionListInputs<ItemT> = Omit<
 @Component({
   selector: 'SectionList',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   imports: [
     VirtualizedSectionList,
     VSectionItemDirective,
@@ -143,6 +143,7 @@ export type ISectionListInputs<ItemT> = Omit<
     <VirtualizedSectionList
       [sections]="sections"
       [keyExtractor]="keyExtractor"
+      [getItemLayout]="getItemLayout"
       [stickySectionHeadersEnabled]="stickySectionHeadersEnabled"
       [extraData]="extraData"
       (endReached)="endReached.emit($event)"
@@ -187,8 +188,12 @@ export type ISectionListInputs<ItemT> = 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)"
@@ -219,7 +224,13 @@ export type ISectionListInputs<ItemT> = Omit<
       >
         <ng-container
           [vListOutlet]="sectionItemDir?.templateRef"
-          [vListOutletContext]="{ $implicit: item, item, index, section, separators }"
+          [vListOutletContext]="{
+            $implicit: item,
+            item,
+            index,
+            section,
+            separators,
+          }"
         ></ng-container>
       </ng-template>
       @if (sectionHeaderDir !== undefined) {
@@ -240,17 +251,23 @@ export type ISectionListInputs<ItemT> = Omit<
       }
       @if (sectionSeparatorDir !== undefined) {
         <ng-template vSectionSeparator>
-          <ng-container [vListOutlet]="sectionSeparatorDir.templateRef"></ng-container>
+          <ng-container
+            [vListOutlet]="sectionSeparatorDir.templateRef"
+          ></ng-container>
         </ng-template>
       }
       @if (listHeaderDir !== undefined) {
         <ng-template vListHeader>
-          <ng-container [vListOutlet]="listHeaderDir.templateRef"></ng-container>
+          <ng-container
+            [vListOutlet]="listHeaderDir.templateRef"
+          ></ng-container>
         </ng-template>
       }
       @if (listFooterDir !== undefined) {
         <ng-template vListFooter>
-          <ng-container [vListOutlet]="listFooterDir.templateRef"></ng-container>
+          <ng-container
+            [vListOutlet]="listFooterDir.templateRef"
+          ></ng-container>
         </ng-template>
       }
       @if (listEmptyDir !== undefined) {
@@ -267,7 +284,9 @@ export type ISectionListInputs<ItemT> = Omit<
         >
           <ng-container
             [vListOutlet]="itemSeparatorDir.templateRef"
-            [vListOutletContext]="itemSeparatorContext(highlighted, leadingItem, trailingItem)"
+            [vListOutletContext]="
+              itemSeparatorContext(highlighted, leadingItem, trailingItem)
+            "
           ></ng-container>
         </ng-template>
       }
@@ -279,11 +298,21 @@ export class SectionList<ItemT = unknown>
 {
   @Input({ required: true }) sections!: ReadonlyArray<ISection<ItemT>>;
   @Input() keyExtractor?: (item: ItemT, index: number) => string;
+  // Passed through FLAT (sections array + flat entry index); VirtualizedSectionList owns the
+  // sections-vs-entries wrapper - see its entryItemLayout getter.
+  @Input() getItemLayout?: (
+    data: ReadonlyArray<ISection<ItemT>> | null,
+    index: number,
+  ) => { length: number; offset: number; index: number };
   @Input() stickySectionHeadersEnabled?: boolean;
   @Input() extraData?: unknown;
-  @Output() readonly endReached = new EventEmitter<{ distanceFromEnd: number }>();
+  @Output() readonly endReached = new EventEmitter<{
+    distanceFromEnd: number;
+  }>();
   @Input() onEndReachedThreshold?: number;
-  @Output() readonly startReached = new EventEmitter<{ distanceFromStart: number }>();
+  @Output() readonly startReached = new EventEmitter<{
+    distanceFromStart: number;
+  }>();
   @Input() onStartReachedThreshold?: number;
   @Output() readonly refresh = new EventEmitter<void>();
   @Input() refreshing?: boolean | null;
@@ -311,18 +340,14 @@ export class SectionList<ItemT = unknown>
   @Input() testID?: string;
   @Input() nativeID?: string;
 
-  // Bound to the template's `[style]="resolvedStyle"`, which Angular compiles to the built-in
-  // ɵɵstyleMap instruction — it only understands a flat object, never an array (RN's own
-  // `style={[a, b]}` composition idiom crashes deep inside Angular's styling engine), so this
-  // flattens `style` via the engine's own flattenStyle before it ever reaches that binding.
-  // anchorHostStyle merges in this component's OWN anchor's class-derived style (see its doc
-  // comment) — `elementRef` below is SectionList's OWN host, not `list`'s inner VirtualizedSectionList.
-  // A plain `flattenStyle([...])` here would allocate a FRESH object on every getter read (every CD
-  // check), which — bound onto the nested VirtualizedSectionList/VirtualizedList's own `@Input()
-  // style` — defeats VirtualizedList's `ngDoCheck` dedup gate and free-runs change detection
-  // forever (the exact bug `stableAnchorStyle` exists to prevent, see its doc comment and the
-  // `flat-list-array-style.test.ts` regression it fixes). `cachedResolvedStyle` is the getter's own
-  // persisted "previous" value across reads, since a getter has no natural field to compare against.
+  // Bound to `[style]="resolvedStyle"`, which Angular compiles to ɵɵstyleMap — it only
+  // understands a flat object, never an array (RN's `style={[a, b]}` idiom crashes deep inside
+  // Angular's styling engine), so this flattens `style` first, merging in this component's OWN
+  // anchor's class-derived style via anchorHostStyle (`elementRef` here is SectionList's own
+  // host, not `list`'s inner VirtualizedSectionList). A plain `flattenStyle([...])` would
+  // allocate a fresh object on every CD check, defeating VirtualizedList's `ngDoCheck` dedup gate
+  // and free-running change detection forever — the bug `stableAnchorStyle` exists to prevent
+  // (see its doc comment). `cachedResolvedStyle` is the getter's own persisted "previous" value.
   private cachedResolvedStyle: Record<string, unknown> | undefined;
   get resolvedStyle(): IViewStyle {
     this.cachedResolvedStyle = stableAnchorStyle(
@@ -340,8 +365,10 @@ export class SectionList<ItemT = unknown>
   @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;
@@ -372,18 +399,24 @@ export class SectionList<ItemT = unknown>
 
   // The app's section/list authoring templates, captured from the app's DIRECT projected content
   // (single hop — always resolves) and re-stamped onto the inner VirtualizedSectionList above.
-  @ContentChild(VSectionItemDirective) sectionItemDir?: VSectionItemDirective<ItemT>;
-  @ContentChild(VSectionHeaderDirective) sectionHeaderDir?: VSectionHeaderDirective<ItemT>;
-  @ContentChild(VSectionFooterDirective) sectionFooterDir?: VSectionFooterDirective<ItemT>;
-  @ContentChild(VSectionSeparatorDirective) sectionSeparatorDir?: VSectionSeparatorDirective;
+  @ContentChild(VSectionItemDirective)
+  sectionItemDir?: VSectionItemDirective<ItemT>;
+  @ContentChild(VSectionHeaderDirective)
+  sectionHeaderDir?: VSectionHeaderDirective<ItemT>;
+  @ContentChild(VSectionFooterDirective)
+  sectionFooterDir?: VSectionFooterDirective<ItemT>;
+  @ContentChild(VSectionSeparatorDirective)
+  sectionSeparatorDir?: VSectionSeparatorDirective;
   @ContentChild(VListHeaderDirective) listHeaderDir?: VListHeaderDirective;
   @ContentChild(VListFooterDirective) listFooterDir?: VListFooterDirective;
   @ContentChild(VListEmptyDirective) listEmptyDir?: VListEmptyDirective;
-  @ContentChild(VListSeparatorDirective) itemSeparatorDir?: VListSeparatorDirective<ItemT>;
+  @ContentChild(VListSeparatorDirective)
+  itemSeparatorDir?: VListSeparatorDirective<ItemT>;
 
   // The composed inner VirtualizedSectionList. Its instance IS an IVirtualizedSectionListHandle, so
   // SectionList's handle delegates straight to it. Available from ngAfterViewInit; reads lazily.
-  @ViewChild(VirtualizedSectionList) private list?: VirtualizedSectionList<ItemT>;
+  @ViewChild(VirtualizedSectionList)
+  private list?: VirtualizedSectionList<ItemT>;
 
   // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment) — NOT `list` above, which targets the real inner

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

@@ -1,13 +1,37 @@
-import { CUSTOM_ELEMENTS_SCHEMA, Component, ElementRef, inject } from '@angular/core';
-import { anchorHostStyle, SwitchHost, SymbioteHostPropsDirective } from '../../primitives';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  Component,
+  ElementRef,
+  forwardRef,
+  inject,
+  signal,
+  type DoCheck,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  anchorHostStyle,
+  SwitchHost,
+  SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+} from '../../primitives';
 import { SwitchBase } from './shared';
 export type { ISwitchProps, ISwitchTrackColor } from './shared';
 
 @Component({
   selector: 'Switch',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SwitchHost, SymbioteHostPropsDirective],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Switch),
+      multi: true,
+    },
+  ],
   inputs: [
     'value',
     'disabled',
@@ -32,30 +56,58 @@ export type { ISwitchProps, ISwitchTrackColor } from './shared';
   template: `
     <symbiote-switch
       #nativeSwitch="symbioteHost"
-      [symbioteHostProps]="hostProps"
+      [symbioteHostProps]="hostProps()"
       (change)="handleChange($event, nativeSwitch)"
     />
   `,
 })
-export class Switch extends SwitchBase {
+export class Switch extends SwitchBase implements DoCheck {
   // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment) — NOT the <symbiote-switch> leaf one level down.
   private readonly elementRef = inject(ElementRef);
 
   protected readonly platform = {
     snapBackCommand: 'setNativeValue',
-    trackColorProps: (value: boolean, trackColor?: { false?: string; true?: string }) => ({
+    trackColorProps: (
+      value: boolean,
+      trackColor?: { false?: string; true?: string },
+    ) => ({
       trackColorForFalse: trackColor?.false,
       trackColorForTrue: trackColor?.true,
       trackTintColor: value ? trackColor?.true : trackColor?.false,
     }),
   };
 
+  // The anchor's class-derived style is written by the renderer's addClass/removeClass and never
+  // reaches Angular's input pipeline (a bare `class="x"` never appears in SimpleChanges — see
+  // anchorHostStyle's doc comment), so SwitchBase's inputsRevision cannot see it. Hence its own
+  // signal: a plain field read inside a computed() would be untracked and the bag would go stale
+  // the moment a `[class.x]`/`[ngClass]` toggled.
+  //
+  // ngDoCheck is the right cadence: render3's callHooks flushes a node's pre-order hooks at the
+  // next `ɵɵadvance` past it (or in refreshView's post-template flush), i.e. AFTER the declaring
+  // template's ɵɵclassProp wrote the class onto this element and BEFORE this component's own view
+  // refreshes — the exact window a class poll needs. callHooks also runs under
+  // setActiveConsumer(null), so the write registers no dependency on the caller's view (no NG0600).
+  // commitClassStyle allocates a fresh style array only when a token actually moved, so signal.set's
+  // own Object.is check makes an unchanged poll a no-op that dirties nothing.
+  //
+  // Known gap, shared with every other component polling this way (Pressable, SafeAreaView,
+  // TouchableNativeFeedback): `[ngClass]` applies its tokens from NgClass's OWN ngDoCheck, and a
+  // node's hooks flush in registration order with the component's first, so an [ngClass] flip lands
+  // one pass after this poll reads it. `class=` and `[class.x]` are written by the declaring
+  // template's styling instructions and so are always current here.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
   // The anchor's class-derived style goes first, then whatever SwitchBase already resolved
   // (its own explicit `style` @Input plus the ios_backgroundColor fold), so an explicit [style]
   // still beats the ambient class.
-  override get hostProps(): Record<string, unknown> {
-    const props = super.hostProps;
-    return { ...props, style: [anchorHostStyle(this.elementRef), props['style']] };
+  protected override buildHostProps(): Record<string, unknown> {
+    const props = super.buildHostProps();
+    return { ...props, style: [this.anchorStyle(), props['style']] };
   }
 }

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

@@ -1,13 +1,37 @@
-import { CUSTOM_ELEMENTS_SCHEMA, Component, ElementRef, inject } from '@angular/core';
-import { anchorHostStyle, SwitchHost, SymbioteHostPropsDirective } from '../../primitives';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  Component,
+  ElementRef,
+  forwardRef,
+  inject,
+  signal,
+  type DoCheck,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  anchorHostStyle,
+  SwitchHost,
+  SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+} from '../../primitives';
 import { SwitchBase } from './shared';
 export type { ISwitchProps, ISwitchTrackColor } from './shared';
 
 @Component({
   selector: 'Switch',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SwitchHost, SymbioteHostPropsDirective],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Switch),
+      multi: true,
+    },
+  ],
   inputs: [
     'value',
     'disabled',
@@ -32,29 +56,57 @@ export type { ISwitchProps, ISwitchTrackColor } from './shared';
   template: `
     <symbiote-switch
       #nativeSwitch="symbioteHost"
-      [symbioteHostProps]="hostProps"
+      [symbioteHostProps]="hostProps()"
       (change)="handleChange($event, nativeSwitch)"
     />
   `,
 })
-export class Switch extends SwitchBase {
+export class Switch extends SwitchBase implements DoCheck {
   // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment) — NOT the <symbiote-switch> leaf one level down.
   private readonly elementRef = inject(ElementRef);
 
   protected readonly platform = {
     snapBackCommand: 'setValue',
-    trackColorProps: (_value: boolean, trackColor?: { false?: string; true?: string }) => ({
+    trackColorProps: (
+      _value: boolean,
+      trackColor?: { false?: string; true?: string },
+    ) => ({
       onTintColor: trackColor?.true,
       tintColor: trackColor?.false,
     }),
   };
 
+  // The anchor's class-derived style is written by the renderer's addClass/removeClass and never
+  // reaches Angular's input pipeline (a bare `class="x"` never appears in SimpleChanges — see
+  // anchorHostStyle's doc comment), so SwitchBase's inputsRevision cannot see it. Hence its own
+  // signal: a plain field read inside a computed() would be untracked and the bag would go stale
+  // the moment a `[class.x]`/`[ngClass]` toggled.
+  //
+  // ngDoCheck is the right cadence: render3's callHooks flushes a node's pre-order hooks at the
+  // next `ɵɵadvance` past it (or in refreshView's post-template flush), i.e. AFTER the declaring
+  // template's ɵɵclassProp wrote the class onto this element and BEFORE this component's own view
+  // refreshes — the exact window a class poll needs. callHooks also runs under
+  // setActiveConsumer(null), so the write registers no dependency on the caller's view (no NG0600).
+  // commitClassStyle allocates a fresh style array only when a token actually moved, so signal.set's
+  // own Object.is check makes an unchanged poll a no-op that dirties nothing.
+  //
+  // Known gap, shared with every other component polling this way (Pressable, SafeAreaView,
+  // TouchableNativeFeedback): `[ngClass]` applies its tokens from NgClass's OWN ngDoCheck, and a
+  // node's hooks flush in registration order with the component's first, so an [ngClass] flip lands
+  // one pass after this poll reads it. `class=` and `[class.x]` are written by the declaring
+  // template's styling instructions and so are always current here.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
   // The anchor's class-derived style goes first, then whatever SwitchBase already resolved
   // (its own explicit `style` @Input plus the ios_backgroundColor fold), so an explicit [style]
   // still beats the ambient class.
-  override get hostProps(): Record<string, unknown> {
-    const props = super.hostProps;
-    return { ...props, style: [anchorHostStyle(this.elementRef), props['style']] };
+  protected override buildHostProps(): Record<string, unknown> {
+    const props = super.buildHostProps();
+    return { ...props, style: [this.anchorStyle(), props['style']] };
   }
 }