@symbiote-native/angular 0.6.2 → 0.7.0

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

@@ -1,13 +1,29 @@
-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,12 +48,12 @@ 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);
@@ -51,11 +67,36 @@ export class Switch extends SwitchBase {
     }),
   };
 
+  // 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,29 @@
-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,12 +48,12 @@ 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);
@@ -50,11 +66,36 @@ export class Switch extends SwitchBase {
     }),
   };
 
+  // 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/shared.ts

@@ -1,4 +1,14 @@
-import { Directive, EventEmitter, Output } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Directive,
+  EventEmitter,
+  Output,
+  computed,
+  inject,
+  signal,
+  type OnChanges,
+} from '@angular/core';
+import type { ControlValueAccessor } from '@angular/forms';
 import { renderSwitch, resolveAccessibilityProps } from '@symbiote-native/components';
 import type {
   ISwitchPlatform,
@@ -78,7 +88,7 @@ function isSwitchEvent(event: unknown): event is ISymbioteEvent {
 // concrete subclasses are real @Components — ngc's AOT build (NG2007) requires it the moment the
 // base itself carries decorated members (@Output() here), mirroring ScrollViewBase.
 @Directive()
-export abstract class SwitchBase implements ISwitchInputs {
+export abstract class SwitchBase implements ISwitchInputs, ControlValueAccessor, OnChanges {
   // The value/change lifecycle as real Angular events: `(valueChange)="onToggle($event)"`, not
   // `[onValueChange]="onToggle"` — mirrors Pressable's press/hover @Output() conversion. Unlike
   // Pressable's createPressHandlers, handleChange() below calls `.emit()` unconditionally: it needs
@@ -105,9 +115,46 @@ export abstract class SwitchBase implements ISwitchInputs {
   'aria-checked': boolean | 'mixed' | undefined;
 
   protected abstract readonly platform: ISwitchHostPlatform;
+  // NOT a hostProps dependency - only snapBackIfNeeded reads it, and the bag's `value` comes from
+  // the @Input, not from this reducer state. So it stays a plain field; if a future change makes
+  // the bag read it, it must become a signal first (see inputsRevision's note).
   private switchState: ISwitchState = createInitialSwitchState();
+  // Only setDisabledState()/writeValue() need this: @angular/forms mutates `value`/`disabled` from
+  // OUTSIDE Angular's own binding path, which doesn't itself schedule a tick under zoneless CD.
+  private readonly changeDetector = inject(ChangeDetectorRef);
+
+  // Bridges the non-reactive @Input fields into the reactive graph so hostProps below can be a
+  // memoized computed(). Signal inputs would make this unnecessary, but `input()` is visible only
+  // to the AOT compiler and this package's unit suite runs on JIT - see the
+  // `angular-adapter-change-detection` skill, §6. `signal()`/`computed()` are plain runtime APIs
+  // and need no compiler support, which is what makes this bridge possible at all.
+  //
+  // Bumped from ngOnChanges (covers every @Input) AND from the two ControlValueAccessor writers
+  // below, which assign `value`/`disabled` from OUTSIDE Angular's binding path and so never reach
+  // ngOnChanges. ONLY a genuine dependency of the bag may bump it - widening it to "bump on
+  // everything" silently un-memoizes the bag and defeats the point. State that is not an @Input
+  // and is not one of those two writers needs its OWN signal instead (the platform components'
+  // anchor style is exactly that case).
+  private readonly inputsRevision = signal(0);
+
+  ngOnChanges(): void {
+    this.inputsRevision.update(revision => revision + 1);
+  }
 
-  get hostProps(): IHostProps {
+  // MEASURED 2026-08-16: as a getter this rebuilt the bag on every refresh of this view, so
+  // `[symbioteHostProps]`'s reference check failed every time and every key was re-pushed through
+  // Renderer2 -> routeProp - pure waste when nothing changed. computed() returns the SAME object
+  // until a tracked dependency actually changes, and the input setter then skips the whole spread.
+  //
+  // A computed FIELD cannot be overridden by a subclass accessor the way a getter can, so the
+  // platform components override buildHostProps() below and this stays the single memoization
+  // point for every platform.
+  readonly hostProps = computed<IHostProps>(() => {
+    this.inputsRevision();
+    return this.buildHostProps();
+  });
+
+  protected buildHostProps(): IHostProps {
     const props = resolveAccessibilityProps(this.inputProps());
     const {
       value,
@@ -168,6 +215,35 @@ export abstract class SwitchBase implements ISwitchInputs {
     });
   }
 
+  // ControlValueAccessor — `value` is a plain field feeding `hostProps` on every CD check, no
+  // ngOnChanges/stale-safe commit dance to guard (unlike TextInput, a boolean toggle has no
+  // keystroke to race), so writeValue()/setDisabledState() can set it straight.
+  writeValue(value: boolean | null): void {
+    this.value = value ?? false;
+    // `value` feeds hostProps but this write bypasses Angular's binding path, so ngOnChanges never
+    // fires for it - without the bump the memoized bag would keep reporting the old value and the
+    // switch would stop reflecting a form-driven change.
+    this.inputsRevision.update(revision => revision + 1);
+    this.changeDetector.markForCheck();
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.valueChange.subscribe(fn);
+  }
+
+  registerOnTouched(fn: () => void): void {
+    // Switch has no blur concept (it's a discrete toggle, not a text field) — `change` is the
+    // closest touched signal, same convention Angular's own checkbox CVAs use.
+    this.change.subscribe(() => fn());
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    // Same reason as writeValue: an @angular/forms write that never reaches ngOnChanges.
+    this.inputsRevision.update(revision => revision + 1);
+    this.changeDetector.markForCheck();
+  }
+
   private inputProps(): Partial<ISwitchProps> {
     const props: Partial<ISwitchProps> = {
       value: this.value,

package/src/components/text-input.ts

@@ -28,9 +28,11 @@
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
+  forwardRef,
   inject,
   Input,
   Output,
@@ -40,6 +42,7 @@ import {
   type OnDestroy,
   type SimpleChanges,
 } from '@angular/core';
+import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
 import {
   foldText,
   eventCountFromChange,
@@ -79,6 +82,7 @@ import {
   anchorHostStyle,
   MultilineTextInputHost,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
   TextInputHost,
 } from '../primitives';
 
@@ -154,9 +158,13 @@ export type IAngularTextInputInputs = Omit<
 @Component({
   selector: 'TextInput',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, TextInputHost, MultilineTextInputHost],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextInput), multi: true },
+  ],
   template: `
     @if (isMultiline) {
       <symbiote-text-input-multiline
@@ -196,7 +204,13 @@ export type IAngularTextInputInputs = Omit<
   `,
 })
 export class TextInput
-  implements IAngularTextInputInputs, ITextInputHandle, OnChanges, AfterViewInit, OnDestroy
+  implements
+    IAngularTextInputInputs,
+    ITextInputHandle,
+    OnChanges,
+    AfterViewInit,
+    OnDestroy,
+    ControlValueAccessor
 {
   @Input() value?: string;
   @Input() defaultValue?: string;
@@ -291,6 +305,9 @@ export class TextInput
   // onto (see anchorHostStyle's doc comment) — NOT `hostRef` above, which targets the real inner
   // symbiote-text-input(-multiline) one level down.
   private readonly elementRef = inject(ElementRef);
+  // Only setDisabledState() needs this: it mutates `editable` from OUTSIDE Angular's own binding
+  // path (@angular/forms calling in directly), which doesn't itself schedule a tick under zoneless CD.
+  private readonly changeDetector = inject(ChangeDetectorRef);
 
   // The count native last acknowledged; the controlled write / clear / setSelection echo it so
   // native's eventLag lands on 0 and the write applies. A plain field (read live by the imperative
@@ -304,6 +321,9 @@ export class TextInput
   // synchronous focus getter (RN's TextInputState holds the same).
   private focused = false;
   private cancelAutoFocus?: () => void;
+  // Mirrors SimpleChange.firstChange for the writeValue() path below (@angular/forms' own initial
+  // write, distinct from ngOnChanges' firstChange, which never fires for a forms-driven write).
+  private isFirstFormWrite = true;
 
   get isMultiline(): boolean {
     return this.multiline === true;
@@ -323,14 +343,44 @@ export class TextInput
   ngOnChanges(changes: SimpleChanges): void {
     const valueChange = changes['value'];
     if (valueChange === undefined) return;
-    // The first value is the seed, not a divergence: record it and do not command.
     if (valueChange.firstChange) {
+      // The initial value already reached native via createNode's hostProps — seed
+      // lastNativeText instead of re-commanding it (see commitControlledValue's own comment on
+      // why a redundant re-push isn't just wasteful — it can race a keystroke).
       this.lastNativeText = foldText(this.value, this.defaultValue);
       return;
     }
     this.commitControlledValue();
   }
 
+  // ControlValueAccessor — @angular/forms calls these straight into this component, bypassing
+  // template bindings/ngOnChanges entirely. `isFirstFormWrite` mirrors SimpleChange.firstChange:
+  // the initial value already reached native via createNode's hostProps, so it must seed
+  // lastNativeText, not re-command (see commitControlledValue's own comment on why a redundant
+  // re-push isn't just wasteful — it can race a keystroke).
+  writeValue(value: string | null): void {
+    this.value = value ?? undefined;
+    if (this.isFirstFormWrite) {
+      this.isFirstFormWrite = false;
+      this.lastNativeText = foldText(this.value, this.defaultValue);
+      return;
+    }
+    this.commitControlledValue();
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.valueChange.subscribe(fn);
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.blurEvent.subscribe(() => fn());
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.editable = !isDisabled;
+    this.changeDetector.markForCheck();
+  }
+
   // autoFocus is driven in JS, not as a native prop: once the node is committed, command `focus`
   // down once (RN does the same via TextInputState.focusInput). Under Angular's async-batched
   // commit the node has no Fabric tag at ngAfterViewInit, so whenCommitted defers the command to

package/src/components/touchable/index.ts

@@ -26,11 +26,15 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
+  computed,
+  type DoCheck,
   ElementRef,
   EventEmitter,
   inject,
   Input,
+  type OnChanges,
   Output,
+  signal,
 } from '@angular/core';
 import {
   createTouchableFeedbackHandlers,
@@ -53,7 +57,7 @@ import {
   type ITouchableFeedbackHandlers,
 } from '@symbiote-native/components';
 import { type ISymbioteEvent, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
-import { anchorHostStyle, anchorStyleProp } from '../../primitives';
+import { anchorHostStyle, anchorStyleProp, SymbioteStyleInputDirective } from '../../primitives';
 import { Pressable, type IAngularPressableInputs } from '../pressable';
 import { Animated, AnimatedView } from '../../modules/animated';
 
@@ -88,6 +92,7 @@ function scheduleTimeout(callback: () => void, ms: number): () => void {
 @Component({
   selector: 'TouchableOpacity',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [Pressable, AnimatedView],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -163,7 +168,7 @@ function scheduleTimeout(callback: () => void, ms: number): () => void {
     </Pressable>
   `,
 })
-export class TouchableOpacity implements IAngularTouchableOpacityProps {
+export class TouchableOpacity implements IAngularTouchableOpacityProps, DoCheck {
   @Output() readonly press = new EventEmitter<ISymbioteEvent>();
   @Output() readonly pressIn = new EventEmitter<ISymbioteEvent>();
   @Output() readonly pressOut = new EventEmitter<ISymbioteEvent>();
@@ -249,7 +254,21 @@ export class TouchableOpacity implements IAngularTouchableOpacityProps {
   // the commit layer flattens). `unknown` because the array mixes a plain style with an
   // AnimatedNode, exactly the bag AnimatedView's `style` input accepts.
   get animatedStyle(): unknown {
-    return [anchorHostStyle(this.elementRef), this.style, { opacity: this.opacity }];
+    return [this.anchorStyle(), this.style, { opacity: this.opacity }];
+  }
+
+  // The anchor's class-derived style is written by the renderer's addClass/removeClass at the USE
+  // SITE - it never appears in SimpleChanges, and nothing about it dirties THIS component's view.
+  // A `class=` present at creation therefore worked, while one toggled later did not: the parent
+  // refreshed, the class landed on the anchor, and this component's own view was never refreshed,
+  // so whatever merged the anchor style in was never re-evaluated. Polling it into a signal from
+  // ngDoCheck fixes both halves: ngDoCheck runs during the PARENT's refresh even when this view is
+  // skipped, and the signal write is what then marks this view for refresh. `signal.set`'s own
+  // Object.is makes an unchanged poll a no-op, so there is no loop.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
   }
 
   private setOpacityTo(toValue: number, duration: number): void {
@@ -304,11 +323,12 @@ export class TouchableOpacity implements IAngularTouchableOpacityProps {
 @Component({
   selector: 'TouchableHighlight',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   imports: [Pressable],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <Pressable
-      [style]="pressedStyle"
+      [style]="pressedStyle()"
       (press)="press.emit($event)"
       (pressIn)="pressIn.emit($event)"
       (pressOut)="pressOut.emit($event)"
@@ -377,7 +397,7 @@ export class TouchableOpacity implements IAngularTouchableOpacityProps {
     </Pressable>
   `,
 })
-export class TouchableHighlight implements IAngularTouchableHighlightProps {
+export class TouchableHighlight implements IAngularTouchableHighlightProps, OnChanges, DoCheck {
   @Output() readonly press = new EventEmitter<ISymbioteEvent>();
   @Output() readonly pressIn = new EventEmitter<ISymbioteEvent>();
   @Output() readonly pressOut = new EventEmitter<ISymbioteEvent>();
@@ -458,20 +478,46 @@ export class TouchableHighlight implements IAngularTouchableHighlightProps {
   // [style] still beats the ambient class. When pressed, paint the underlay color + lower the
   // child opacity (RN drives this with setState, not Animated, so we mirror that faithfully
   // through Pressable's pressed flag, no tween) — the overlay always goes last so it wins.
-  pressedStyle = (state: IPressState): IStyleProp<IViewStyle> => {
-    const base: IStyleProp<IViewStyle> = [anchorStyleProp<IViewStyle>(this.elementRef), this.style];
-    return highlightPressedStyle(
-      state.pressed,
-      base,
-      this.underlayColor ?? DEFAULT_UNDERLAY_COLOR,
-      this.activeOpacity ?? DEFAULT_HIGHLIGHT_CHILD_OPACITY,
-    );
-  };
+  // A computed that RETURNS A NEW ARROW when its dependencies move, not one stable arrow forever.
+  // The stable-arrow form was silently frozen: Pressable's `style` @Input never reported a change,
+  // so Pressable's view never refreshed and never re-invoked the arrow - a class or [style]
+  // toggled after mount never reached the committed view. Reading the anchor signal from inside
+  // the arrow body instead would have worked by accident, by registering THIS component's signal
+  // on Pressable's consumer; returning a new reference keeps the dependency where it belongs, in
+  // an ordinary input change.
+  readonly pressedStyle = computed<(state: IPressState) => IStyleProp<IViewStyle>>(() => {
+    this.inputsRevision();
+    const base: IStyleProp<IViewStyle> = [this.anchorStyle(), this.style];
+    const underlayColor = this.underlayColor ?? DEFAULT_UNDERLAY_COLOR;
+    const childOpacity = this.activeOpacity ?? DEFAULT_HIGHLIGHT_CHILD_OPACITY;
+    return (state: IPressState): IStyleProp<IViewStyle> =>
+      highlightPressedStyle(state.pressed, base, underlayColor, childOpacity);
+  });
+
+  // `style`, `underlayColor` and `activeOpacity` are read untracked inside that computed, so the
+  // bump is what tells it they moved. See the ngDoCheck note below for the anchor half, which
+  // ngOnChanges cannot cover.
+  private readonly inputsRevision = signal(0);
+  private readonly anchorStyle = signal<IStyleProp<IViewStyle> | undefined>(undefined);
+
+  ngOnChanges(): void {
+    this.inputsRevision.update(revision => revision + 1);
+  }
+
+  // The anchor's class-derived style is written by the renderer's addClass/removeClass at the USE
+  // SITE - it never appears in SimpleChanges, and nothing about it dirties THIS component's view.
+  // ngDoCheck runs during the PARENT's refresh even when this view is skipped, and the signal
+  // write is what then marks this view for refresh. `signal.set`'s own Object.is makes an
+  // unchanged poll a no-op, so there is no loop.
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorStyleProp<IViewStyle>(this.elementRef));
+  }
 }
 
 @Component({
   selector: 'TouchableWithoutFeedback',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   imports: [Pressable],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
@@ -545,7 +591,7 @@ export class TouchableHighlight implements IAngularTouchableHighlightProps {
     </Pressable>
   `,
 })
-export class TouchableWithoutFeedback implements IAngularTouchableWithoutFeedbackProps {
+export class TouchableWithoutFeedback implements DoCheck, IAngularTouchableWithoutFeedbackProps {
   // delayPressIn/delayPressOut/minPressDuration ride the prop type for surface parity with the
   // other two, but TouchableWithoutFeedback has no visual feedback, so nothing schedules off them
   // (RN's TouchableWithoutFeedback is the same pure passthrough).
@@ -624,6 +670,20 @@ export class TouchableWithoutFeedback implements IAngularTouchableWithoutFeedbac
   // The anchor's class-derived style goes first, then the explicit style, so an explicit [style]
   // still beats the ambient class.
   get mergedStyle(): IStyleProp<IViewStyle> {
-    return [anchorStyleProp<IViewStyle>(this.elementRef), this.style];
+    return [this.anchorStyle(), this.style];
+  }
+
+  // The anchor's class-derived style is written by the renderer's addClass/removeClass at the USE
+  // SITE - it never appears in SimpleChanges, and nothing about it dirties THIS component's view.
+  // A `class=` present at creation therefore worked, while one toggled later did not: the parent
+  // refreshed, the class landed on the anchor, and this component's own view was never refreshed,
+  // so whatever merged the anchor style in was never re-evaluated. Polling it into a signal from
+  // ngDoCheck fixes both halves: ngDoCheck runs during the PARENT's refresh even when this view is
+  // skipped, and the signal write is what then marks this view for refresh. `signal.set`'s own
+  // Object.is makes an unchanged poll a no-op, so there is no loop.
+  private readonly anchorStyle = signal<IStyleProp<IViewStyle> | undefined>(undefined);
+
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorStyleProp<IViewStyle>(this.elementRef));
   }
 }