@symbiote-native/angular 0.6.2 → 0.8.0

package/build/angular/services/color-scheme.service.js

@@ -21,10 +21,10 @@ export class ColorSchemeService {
             subscription.remove();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorSchemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorSchemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ColorSchemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ColorSchemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorSchemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ColorSchemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });

package/build/angular/services/color-scheme.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-scheme.service.js","sourceRoot":"","sources":["../../../src/services/color-scheme.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,UAAU,EAAyB,MAAM,yBAAyB,CAAC;;AAE5E;;;;;;;GAOG;AAEH,MAAM,OAAO,kBAAkB;IACpB,WAAW,GAAG,MAAM,CAA0B,UAAU,CAAC,cAAc,EAAE;oFAAC,CAAC;IAEpF;QACE,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAEtC,MAAM,YAAY,GAAG,UAAU,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE;YAC9D,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;QAEH,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE;YACxB,YAAY,CAAC,MAAM,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC;uGAbU,kBAAkB;2GAAlB,kBAAkB,cADL,MAAM;;2FACnB,kBAAkB;kBAD9B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE"}
+{"version":3,"file":"color-scheme.service.js","sourceRoot":"","sources":["../../../src/services/color-scheme.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,UAAU,EAAyB,MAAM,yBAAyB,CAAC;;AAE5E;;;;;;;GAOG;AAEH,MAAM,OAAO,kBAAkB;IACpB,WAAW,GAAG,MAAM,CAC3B,UAAU,CAAC,cAAc,EAAE;oFAC5B,CAAC;IAEF;QACE,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAEtC,MAAM,YAAY,GAAG,UAAU,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE;YAC9D,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;QAEH,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE;YACxB,YAAY,CAAC,MAAM,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC;uGAfU,kBAAkB;2GAAlB,kBAAkB,cADL,MAAM;;2FACnB,kBAAkB;kBAD9B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE"}

package/build/angular/services/window-dimensions.service.js

@@ -1,5 +1,5 @@
 import { DestroyRef, inject, Injectable, signal } from '@angular/core';
-import { Dimensions } from '@symbiote-native/engine';
+import { Dimensions, } from '@symbiote-native/engine';
 import * as i0 from "@angular/core";
 /**
  * Angular twin of React's `useWindowDimensions` and Vue's `useWindowDimensions` composable. The
@@ -32,10 +32,10 @@ export class WindowDimensionsService {
             subscription.remove();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WindowDimensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WindowDimensionsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WindowDimensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WindowDimensionsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WindowDimensionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WindowDimensionsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });

package/build/angular/services/window-dimensions.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"window-dimensions.service.js","sourceRoot":"","sources":["../../../src/services/window-dimensions.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,UAAU,EAA6C,MAAM,yBAAyB,CAAC;;AAEhG;;;;;;;GAOG;AAEH,MAAM,OAAO,uBAAuB;IACzB,UAAU,GAAG,MAAM,CAAkB,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC;mFAAC,CAAC;IAExE;QACE,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAEtC,MAAM,YAAY,GAAG,CAAC,MAAuB,EAAQ,EAAE;YACrD,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAClC,IACE,OAAO,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;gBAC9B,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;gBAChC,OAAO,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;gBAC9B,OAAO,CAAC,SAAS,KAAK,MAAM,CAAC,SAAS,EACtC,CAAC;gBACD,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,GAAmB,EAAE,EAAE;YACjF,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;QACH,0FAA0F;QAC1F,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEvC,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE;YACxB,YAAY,CAAC,MAAM,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC;uGA3BU,uBAAuB;2GAAvB,uBAAuB,cADV,MAAM;;2FACnB,uBAAuB;kBADnC,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE"}
+{"version":3,"file":"window-dimensions.service.js","sourceRoot":"","sources":["../../../src/services/window-dimensions.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EACL,UAAU,GAGX,MAAM,yBAAyB,CAAC;;AAEjC;;;;;;;GAOG;AAEH,MAAM,OAAO,uBAAuB;IACzB,UAAU,GAAG,MAAM,CAAkB,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC;mFAAC,CAAC;IAExE;QACE,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAEtC,MAAM,YAAY,GAAG,CAAC,MAAuB,EAAQ,EAAE;YACrD,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAClC,IACE,OAAO,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;gBAC9B,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;gBAChC,OAAO,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;gBAC9B,OAAO,CAAC,SAAS,KAAK,MAAM,CAAC,SAAS,EACtC,CAAC;gBACD,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAC9C,QAAQ,EACR,CAAC,GAAmB,EAAE,EAAE;YACtB,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC3B,CAAC,CACF,CAAC;QACF,0FAA0F;QAC1F,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEvC,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE;YACxB,YAAY,CAAC,MAAM,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC;uGA9BU,uBAAuB;2GAAvB,uBAAuB,cADV,MAAM;;2FACnB,uBAAuB;kBADnC,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/angular",
-  "version": "0.6.2",
+  "version": "0.8.0",
   "description": "SymbioteNative's Angular adapter — a Renderer2/RendererFactory2 with DOM-less bootstrap driving real native iOS/Android views through the same engine as the other adapters.",
   "license": "MIT",
   "repository": {
@@ -54,25 +54,27 @@
     "access": "public"
   },
   "dependencies": {
-    "@angular/compiler-cli": "^22",
+    "@angular/compiler-cli": "~22.0.8",
     "@react-native/typescript-config": "0.86.0",
-    "@symbiote-native/components": "0.3.0",
-    "@symbiote-native/css-parser": "0.2.3"
+    "@symbiote-native/components": "0.5.0",
+    "@symbiote-native/css-parser": "0.4.0"
   },
   "peerDependencies": {
     "@angular/core": ">=20",
+    "@angular/forms": ">=20",
     "@symbiote-native/engine": ">=0.1.7",
     "react-native": ">=0.86"
   },
   "devDependencies": {
-    "@angular/compiler": "^22",
-    "@angular/core": "^22",
+    "@angular/compiler": "~22.0.8",
+    "@angular/core": "~22.0.8",
+    "@angular/forms": "~22.0.8",
     "@babel/core": "^7.25.2",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^26.0.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/engine": "0.1.7",
-    "@symbiote-native/test-utils": "0.1.6"
+    "@symbiote-native/engine": "0.3.0",
+    "@symbiote-native/test-utils": "0.2.0"
   },
   "scripts": {
     "clean": "rm -rf build",

package/src/anchor-host-registry.ts

@@ -11,11 +11,11 @@
 // Housing the registry here rather than inline in `renderer/index.ts` keeps it out of the require
 // cycle (cheap insurance against a load-order strand). The bug that actually surfaced this,
 // though, was STALE BUILD ARTIFACTS, not the cycle: `ngc -p` never deletes orphaned outputs, so
-// after the renderer moved `renderer.ts` → `renderer/index.ts` the orphaned `build/angular/
+// after the renderer moved `renderer.ts` -> `renderer/index.ts` the orphaned `build/angular/
 // renderer.js` lingered and SHADOWED `build/angular/renderer/index.js` (a file beats a folder in
 // Node/Metro resolution), giving the bundle a second, stale registry Set — fixed by cleaning
 // `build/` before every ngc build (see each Angular package's `clean` script). Full record:
-// angular-adapter §11c, symbiote-dev-examples §5e.
+// angular-adapter §11c.
 
 // Lowercased at construction — isAnchorHostComponent and registerComposedComponent both normalize
 // to lowercase (Angular lowercases a dynamically-mounted component's selector at runtime, see

package/src/bootstrap.ts

@@ -5,7 +5,10 @@
 
 import { AppRegistry as RNAppRegistry } from 'react-native';
 import type { Type } from '@angular/core';
-import { bootstrapHost, type IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
+import {
+  bootstrapHost,
+  type IBootstrapHostOptions,
+} from '@symbiote-native/components/bootstrap';
 import { AppRegistry, setHostRegistrar } from './modules/app-registry';
 
 export type { IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';

package/src/components/activity-indicator/index.android.ts

@@ -1,16 +1,23 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DescriptorOutlet } from '../../descriptor-to-angular';
 import { ActivityIndicatorBase } from './shared';
+import { SymbioteStyleInputDirective } from '../../primitives';
 export type { IActivityIndicatorProps } from './shared';
 
 @Component({
   selector: 'ActivityIndicator',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   imports: [DescriptorOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
 })
 export class ActivityIndicator extends ActivityIndicatorBase {
   protected readonly defaultColor = null;
-  protected override readonly nativeExtras = { styleAttr: 'Normal', indeterminate: true };
+  protected override readonly nativeExtras = {
+    styleAttr: 'Normal',
+    indeterminate: true,
+  };
 }

package/src/components/activity-indicator/index.ios.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DescriptorOutlet } from '../../descriptor-to-angular';
 import { ActivityIndicatorBase } from './shared';
+import { SymbioteStyleInputDirective } from '../../primitives';
 export type { IActivityIndicatorProps } from './shared';
 
 const IOS_DEFAULT_COLOR = '#999999';
@@ -8,6 +9,9 @@ const IOS_DEFAULT_COLOR = '#999999';
 @Component({
   selector: 'ActivityIndicator',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   imports: [DescriptorOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<symbiote-descriptor-outlet [node]="descriptor" />`,

package/src/components/activity-indicator/shared.ts

@@ -1,4 +1,11 @@
-import { Directive, ElementRef, EventEmitter, inject, Input, Output } from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core';
 import {
   renderActivityIndicator,
   resolveAccessibilityProps,
@@ -13,7 +20,10 @@ import type { ISymbioteEvent } from '@symbiote-native/engine';
 import type { IDescriptor } from '@symbiote-native/components';
 import { anchorHostStyle } from '../../primitives';
 
-export type { IActivityIndicatorProps, IActivityIndicatorSize } from '@symbiote-native/components';
+export type {
+  IActivityIndicatorProps,
+  IActivityIndicatorSize,
+} from '@symbiote-native/components';
 
 // Narrows anchorHostStyle's `unknown` (it reads an opaque engine prop bag) to the shape
 // IActivityIndicatorProps['style'] actually declares, the same runtime guard image/shared.ts's
@@ -61,8 +71,10 @@ export abstract class ActivityIndicatorBase implements IActivityIndicatorInputs
   @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;
@@ -107,14 +119,18 @@ export abstract class ActivityIndicatorBase implements IActivityIndicatorInputs
   // closure even when nothing changed — every CD pass would read as "props changed" and force a
   // real Fabric re-clone cascading up every ancestor to the root (the same hazard
   // AnimatedComponentBase.reconcile() and ScrollViewStickyHeader's onHostLayout guard against).
-  private readonly onLayoutHandler = (event: ISymbioteEvent): void => this.layout.emit(event);
-  private readonly onAccessibilityActionHandler = (event: ISymbioteEvent): void =>
-    this.accessibilityAction.emit(event);
+  private readonly onLayoutHandler = (event: ISymbioteEvent): void =>
+    this.layout.emit(event);
+  private readonly onAccessibilityActionHandler = (
+    event: ISymbioteEvent,
+  ): void => this.accessibilityAction.emit(event);
   private readonly onAccessibilityTapHandler = (event: ISymbioteEvent): void =>
     this.accessibilityTap.emit(event);
-  private readonly onMagicTapHandler = (event: ISymbioteEvent): void => this.magicTap.emit(event);
-  private readonly onAccessibilityEscapeHandler = (event: ISymbioteEvent): void =>
-    this.accessibilityEscape.emit(event);
+  private readonly onMagicTapHandler = (event: ISymbioteEvent): void =>
+    this.magicTap.emit(event);
+  private readonly onAccessibilityEscapeHandler = (
+    event: ISymbioteEvent,
+  ): void => this.accessibilityEscape.emit(event);
 
   get descriptor(): IDescriptor {
     const props = resolveAccessibilityProps<IActivityIndicatorProps>({
@@ -141,8 +157,10 @@ export abstract class ActivityIndicatorBase implements IActivityIndicatorInputs
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       onAccessibilityAction: this.emitterHandler(
         this.accessibilityAction,
@@ -174,7 +192,8 @@ export abstract class ActivityIndicatorBase implements IActivityIndicatorInputs
       'aria-valuetext': this.ariaValueText,
     });
 
-    const { animating, color, hidesWhenStopped, size, style, ...passthrough } = props;
+    const { animating, color, hidesWhenStopped, size, style, ...passthrough } =
+      props;
     return renderActivityIndicator(
       {
         animating: animating !== false,

package/src/components/button.ts

@@ -1,19 +1,17 @@
 // Button for Angular. The minimal cross-platform button in RN's iOS shape (Button.js): a
 // TouchableOpacity wrapping a Text. The base text style, the role constant, and the color fold are
-// shared in @symbiote-native/components/view; here Angular only composes its TouchableOpacity + a
-// symbiote-text child and re-maps the few Button-owned props. The Angular twin of the React/Vue
-// adapter's Button. No JS-side platform branch, so this stays a flat single file.
+// shared in @symbiote-native/components/view; Angular only composes its TouchableOpacity + a
+// symbiote-text child and re-maps the few Button-owned props. No JS-side platform branch, so this
+// stays a flat single file.
 //
-// RN's Button fixes accessibilityRole="button", marks the root accessible, and propagates `disabled`
-// into the accessibility state; those three win over any caller value. `title` becomes the Text
-// child; disabled forwards straight; touchSoundDisabled maps to the pressable's android_disableSound.
-// Every OTHER field of the shared IButtonProps (title, color, disabled, touchSoundDisabled, testID,
-// TV-focus, accessibility state) is agnostic and stays RE-EXPORTED from @symbiote-native/components
-// verbatim. onPress and the four accessibility callbacks are the
+// RN's Button fixes accessibilityRole="button", marks the root accessible, and propagates
+// `disabled` into the accessibility state; those three win over any caller value. `title` becomes
+// the Text child; disabled forwards straight; touchSoundDisabled maps to the pressable's
+// android_disableSound. Every other field of the shared IButtonProps stays RE-EXPORTED from
+// @symbiote-native/components verbatim. onPress and the four accessibility callbacks are the
 // exceptions: each is a real @Output() here (`press`, `accessibilityAction`, `accessibilityTap`,
-// `magicTap`, `accessibilityEscape`), mirroring the Vue adapter's Button, which forks the SAME onPress
-// field the same way (`Omit<ICoreButtonProps, 'onPress'>` + a `press` emit) — not a new precedent, the
-// existing one extended to accessibility.
+// `magicTap`, `accessibilityEscape`), mirroring the Vue adapter's Button, which forks the same
+// onPress field the same way — not a new precedent, the existing one extended to accessibility.
 
 import {
   CUSTOM_ELEMENTS_SCHEMA,
@@ -24,6 +22,8 @@ import {
   inject,
   Input,
   Output,
+  signal,
+  type DoCheck,
 } from '@angular/core';
 import {
   BUTTON_ACCESSIBILITY_ROLE,
@@ -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)"
@@ -108,7 +117,7 @@ export type IButtonProps = Omit<
     </TouchableOpacity>
   `,
 })
-export class Button implements IButtonProps {
+export class Button implements IButtonProps, DoCheck {
   // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment in primitives/shared.ts) — NOT the inner
   // TouchableOpacity/Pressable one level down. RN's real Button takes no `style` prop, so this
@@ -149,8 +158,10 @@ export class Button implements IButtonProps {
   @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;
@@ -187,7 +198,23 @@ export class Button implements IButtonProps {
     return resolveButtonTextStyle(this.color, this.disabled);
   }
 
+  // Polled, not read live: a class toggled after mount reaches the anchor through
+  // addClass/removeClass, which dirties nothing, so a plain getter froze at its creation value.
+  // Button cannot use SymbioteStyleInputDirective instead - RN's Button has no `style` prop, so
+  // there is no `style` @Input for it to hang off.
+  //
+  // 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);
+
+  ngDoCheck(): void {
+    this.anchorStyleValue.set(anchorStyleProp<IViewStyle>(this.elementRef));
+  }
+
   get anchorStyle(): IStyleProp<IViewStyle> | undefined {
-    return anchorStyleProp<IViewStyle>(this.elementRef);
+    return this.anchorStyleValue();
   }
 }