@symbiote-native/angular 0.7.0 → 1.0.0

package/src/components/modal/index.ts

@@ -101,7 +101,9 @@ export type IAngularModalInputs = Omit<
 @Component({
   selector: 'Modal',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ModalHost, ViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -113,10 +115,6 @@ export type IAngularModalInputs = Omit<
         (dismiss)="dismiss.emit()"
         (requestClose)="requestClose.emit()"
         (orientationChange)="emit(orientationChange, $event)"
-        (accessibilityAction)="emit(accessibilityAction, $event)"
-        (accessibilityTap)="emit(accessibilityTap, $event)"
-        (magicTap)="emit(magicTap, $event)"
-        (accessibilityEscape)="emit(accessibilityEscape, $event)"
       >
         <symbiote-view [style]="containerStyle" [collapsable]="false">
           <ng-content></ng-content>
@@ -154,8 +152,10 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -216,7 +216,10 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
     // Queue on a microtask so the reducer runs AFTER this CD pass renders with the OLD state —
     // the keep-alive frame. A synchronous dispatch here would unmount in the same pass.
     queueMicrotask(() => {
-      this.state = modalReducer(this.state, isVisible ? { type: 'show' } : { type: 'hide' });
+      this.state = modalReducer(
+        this.state,
+        isVisible ? { type: 'show' } : { type: 'hide' },
+      );
       this.changeDetector.markForCheck();
     });
   }
@@ -269,7 +272,14 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
   readonly hostProps = computed<Record<string, unknown>>(() => {
     this.hostPropsRevision();
     const descriptorProps = this.descriptor.props;
-    return { ...descriptorProps, style: [anchorHostStyle(this.elementRef), descriptorProps.style] };
+    return {
+      ...descriptorProps,
+      style: [anchorHostStyle(this.elementRef), descriptorProps.style],
+      onAccessibilityAction: this.eventEmitterHandler(this.accessibilityAction),
+      onAccessibilityTap: this.eventEmitterHandler(this.accessibilityTap),
+      onMagicTap: this.eventEmitterHandler(this.magicTap),
+      onAccessibilityEscape: this.eventEmitterHandler(this.accessibilityEscape),
+    };
   });
 
   get containerStyle(): unknown {
@@ -277,13 +287,28 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
     return typeof container === 'string' ? undefined : container.props.style;
   }
 
+  // NOT private: `(orientationChange)="emit(...)"` in the template above calls it, and a template
+  // can only reach public members. `tsc` does not typecheck Angular templates, so `private` here
+  // compiles clean and fails only under `ngc --compilationMode partial`.
   emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
     if (isSymbioteEvent(event)) emitter.emit(event);
   }
 
+  // The four accessibility events are boolean-GATED Fabric events
+  // (`.claude/rules/fabric-boolean-event-gates.md`) — `show`/`dismiss`/`requestClose`/
+  // `orientationChange` are NOT (Modal's own MODAL_EVENTS), so those stay unconditional template
+  // bindings above. `.observed`-gated, mirroring Pressable's.
+  private eventEmitterHandler(
+    emitter: EventEmitter<ISymbioteEvent>,
+  ): ((event: unknown) => void) | undefined {
+    return emitter.observed ? event => this.emit(emitter, event) : undefined;
+  }
+
   // Typed as the a11y intersection WITH the string index (the bag renderModal spreads into the
   // host props), so resolveAccessibilityProps's result stays assignable to passthrough.
-  private accessibilityInputs(): IAccessibilityProps & IAriaProps & Record<string, unknown> {
+  private accessibilityInputs(): IAccessibilityProps &
+    IAriaProps &
+    Record<string, unknown> {
     return {
       testID: this.testID,
       accessible: this.accessible,
@@ -301,8 +326,10 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       role: this.role,
       'aria-label': this.ariaLabel,

package/src/components/pressable/index.ts

@@ -13,11 +13,14 @@ import {
   ViewChild,
   type DoCheck,
   type OnChanges,
+  type OnDestroy,
 } from '@angular/core';
 import {
   createPressHandlers,
   createPressRuntime,
+  disposePressRuntime,
   DEFAULT_DELAY_LONG_PRESS_MS,
+  DEFAULT_MIN_PRESS_DURATION_MS,
   isTerminationAllowed,
   resolveAccessibilityProps,
   resolveDisabledAccessibilityState,
@@ -50,14 +53,23 @@ import {
   SymbioteStyleInputDirective,
   ViewHost,
 } from '../../primitives';
+import {
+  gateWanted,
+  injectGateDemand,
+  type IGatedAccessibilityEvent,
+} from '../../gate-demand';
 
-export type { IPressState, IPressableAndroidRippleConfig } from '@symbiote-native/components';
+export type {
+  IPressState,
+  IPressableAndroidRippleConfig,
+} from '@symbiote-native/components';
 
 // The full logical Pressable surface, callback-shaped press/hover events included. Touchable* and
 // TouchableNativeFeedback still take their OWN onPress/onPressIn/... as @Input() callbacks (that is
 // a separate, not-yet-converted decision) and derive their public prop types from this - so it keeps
 // the callback fields even though the Pressable component below no longer implements them directly.
-export interface IAngularPressableProps extends IAccessibilityProps, IAriaProps {
+export interface IAngularPressableProps
+  extends IAccessibilityProps, IAriaProps {
   onPress?: IPressHandler;
   onPressIn?: IPressHandler;
   onPressOut?: IPressHandler;
@@ -83,7 +95,8 @@ export interface IAngularPressableProps extends IAccessibilityProps, IAriaProps
   nextFocusLeft?: number;
   nextFocusRight?: number;
   nextFocusUp?: number;
-  style?: IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
+  style?:
+    IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
 }
 
 // What the Pressable component itself takes as plain @Input()s: the full surface minus the press/
@@ -105,7 +118,9 @@ export type IAngularPressableInputs = Omit<
   | 'onAccessibilityEscape'
 >;
 
-function isStyleFn(value: unknown): value is (state: IPressState) => IStyleProp<IViewStyle> {
+function isStyleFn(
+  value: unknown,
+): value is (state: IPressState) => IStyleProp<IViewStyle> {
   return typeof value === 'function';
 }
 
@@ -116,19 +131,28 @@ function asSymbioteEvent(event: unknown): ISymbioteEvent | undefined {
 }
 
 @Component({
-  selector: 'Pressable, symbiote-pressable',
+  // Single-name selector, matching TextInput's own ('TextInput', text-input.ts) rather than
+  // View/Text's dual one. The alternate `symbiote-pressable` spelling was vestigial — nothing in
+  // this component's own template ever renders that tag (it renders `symbiote-view`, below), and
+  // no app or example code invokes the composed component by that literal tag (verified by grep,
+  // 2026-08-31). Its only effect was to force `symbiote-pressable` into
+  // `ANCHOR_HOST_COMPONENTS` unconditionally, which collided with the tag's OTHER, load-bearing
+  // meaning — the host-behavior registry key (`PRESSABLE_TAG`,
+  // core/components/src/behaviors/pressable.ts) a lowered `<Pressable>` must carry to get the
+  // press machine. That collision is exactly why `DIAGNOSTIC_LOWERED_PRESSABLE_TAG` existed
+  // (renderer/index.ts) — dropping the vestigial spelling here removes the collision at its
+  // source, so the escape hatch is retired rather than worked around.
+  selector: 'Pressable',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ViewHost, SymbioteHostPropsDirective],
   template: `
     <symbiote-view
       #host
       [symbioteHostProps]="hostProps()"
-      (accessibilityAction)="emit(accessibilityAction, $event)"
-      (accessibilityTap)="emit(accessibilityTap, $event)"
-      (magicTap)="emit(magicTap, $event)"
-      (accessibilityEscape)="emit(accessibilityEscape, $event)"
       (press)="handlePress($event)"
       (pressIn)="handlePressIn($event)"
       (pressOut)="handlePressOut($event)"
@@ -141,7 +165,9 @@ function asSymbioteEvent(event: unknown): ISymbioteEvent | undefined {
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
+export class Pressable
+  implements IAngularPressableInputs, OnChanges, OnDestroy, DoCheck
+{
   // The press/hover lifecycle as real Angular events: `(press)="onTap($event)"`, not
   // `[onPress]="onTap"`. createPressHandlers still wants plain IPressHandler callbacks, so
   // emitterHandler() below adapts each EventEmitter into one - only while something is actually
@@ -154,9 +180,15 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   @Output() readonly longPress = new EventEmitter<ISymbioteEvent>();
   @Output() readonly hoverIn = new EventEmitter<ISymbioteEvent>();
   @Output() readonly hoverOut = new EventEmitter<ISymbioteEvent>();
-  // The four accessibility callbacks as real Angular events too, same tradeoff as press/hover
-  // above: `(accessibilityAction)="emit(accessibilityAction, $event)"`, not
-  // `[onAccessibilityAction]="onAccessibilityAction"`.
+  // The four accessibility callbacks as real Angular events, app-facing. UNLIKE press/hover above,
+  // these are NOT bound in the template at all — `accessibilityAction`/`accessibilityTap`/
+  // `magicTap`/`accessibilityEscape` are `onX`-gated Fabric events
+  // (`.claude/rules/fabric-boolean-event-gates.md`): the engine only emits them when the committed
+  // payload carries a FUNCTION at that key, so a `(accessibilityAction)="..."` template binding —
+  // always present once written — would light the gate on every instance regardless of whether the
+  // app ever subscribes. Routed through `hostProps()` instead (`accessibilityEmitterHandler`
+  // below), the same `.observed`-conditional shape `emitterHandler` already uses for press/hover,
+  // so the gate lights only when something is actually listening.
   @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
   @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
@@ -167,6 +199,8 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   @Input() hitSlop?: IRectOffset;
   @Input() pressRetentionOffset?: IRectOffset;
   @Input() unstable_pressDelay?: number;
+  /** @internal Touchable* mirrors RN's Pressability minPressDuration: 0 override. */
+  @Input() __minPressDuration = DEFAULT_MIN_PRESS_DURATION_MS;
   @Input() android_ripple?: IPressableAndroidRippleConfig;
   @Input() android_disableSound?: boolean;
   @Input() delayHoverIn?: number;
@@ -186,10 +220,13 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   @Input() accessibilityRole?: IAngularPressableProps['accessibilityRole'];
   @Input() accessibilityState?: IAccessibilityStateValue;
   @Input() accessibilityValue?: IAngularPressableProps['accessibilityValue'];
-  @Input() accessibilityActions?: IAngularPressableProps['accessibilityActions'];
+  @Input()
+  accessibilityActions?: IAngularPressableProps['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;
@@ -215,7 +252,8 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   @Input() id?: string;
   @Input() role?: IAngularPressableProps['role'];
 
-  @ViewChild('host', { read: ElementRef }) private hostElement?: ElementRef<unknown>;
+  @ViewChild('host', { read: ElementRef })
+  private hostElement?: ElementRef<unknown>;
 
   // INTERNAL mutable state, driven by the press machine rather than by an @Input, so ngOnChanges
   // can never cover it - it carries its OWN signal, which is what lets the memoized bag below stay
@@ -242,9 +280,14 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       const id = setTimeout(callback, ms);
       return () => clearTimeout(id);
     },
+    now: Date.now,
   };
 
   private readonly changeDetector = inject(ChangeDetectorRef);
+  // Null unless an adapter wrapper renders this Pressable in its own template. See
+  // `gate-demand.ts`; an app's own `<Pressable>` — including one projected INTO a wrapper — gets
+  // null and falls back to its own `.observed`.
+  private readonly gateDemand = injectGateDemand();
   // This component's OWN host - the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment) - NOT `hostElement` above, which targets the real
   // inner `symbiote-view` one level down.
@@ -276,6 +319,10 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
     this.anchorStyle.set(anchorHostStyle(this.elementRef));
   }
 
+  ngOnDestroy(): void {
+    disposePressRuntime(this.runtime);
+  }
+
   ngOnChanges(): void {
     // Tells the computed bag below that an @Input moved - plain class fields are not reactive on
     // their own. Must stay in ngOnChanges: that is the single moment Angular has finished writing
@@ -293,7 +340,10 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       accessibilityLabel: this.accessibilityLabel,
       accessibilityHint: this.accessibilityHint,
       accessibilityRole: this.accessibilityRole,
-      accessibilityState: resolveDisabledAccessibilityState(this.accessibilityState, this.disabled),
+      accessibilityState: resolveDisabledAccessibilityState(
+        this.accessibilityState,
+        this.disabled,
+      ),
       accessibilityValue: this.accessibilityValue,
       accessibilityActions: this.accessibilityActions,
       accessibilityLabelledBy: this.accessibilityLabelledBy,
@@ -304,8 +354,10 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       'aria-label': this.ariaLabel,
       'aria-busy': this.ariaBusy,
@@ -327,7 +379,9 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   }
 
   get resolvedRippleProps(): Record<string, unknown> | undefined {
-    return this.android_ripple === undefined ? undefined : rippleProps(this.android_ripple);
+    return this.android_ripple === undefined
+      ? undefined
+      : rippleProps(this.android_ripple);
   }
 
   // Flat bag for `[symbioteHostProps]` (Renderer2.setProperty per key) - see primitives/shared.ts.
@@ -351,33 +405,47 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       style: [this.anchorStyle(), this.resolvedStyle],
       accessible: this.accessible,
       ...this.foldedAccessibility,
+      onAccessibilityAction: this.accessibilityEmitterHandler(
+        'accessibilityAction',
+      ),
+      onAccessibilityTap: this.accessibilityEmitterHandler('accessibilityTap'),
+      onMagicTap: this.accessibilityEmitterHandler('magicTap'),
+      onAccessibilityEscape: this.accessibilityEmitterHandler(
+        'accessibilityEscape',
+      ),
       android_disableSound: this.android_disableSound,
-      nativeBackgroundAndroid: this.resolvedRippleProps?.nativeBackgroundAndroid,
-      nativeForegroundAndroid: this.resolvedRippleProps?.nativeForegroundAndroid,
+      nativeBackgroundAndroid:
+        this.resolvedRippleProps?.nativeBackgroundAndroid,
+      nativeForegroundAndroid:
+        this.resolvedRippleProps?.nativeForegroundAndroid,
     };
   });
 
   handlePressIn(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined)
+      return;
     this.handlers.handlePressIn(symbioteEvent);
   }
 
   handlePressOut(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined)
+      return;
     this.handlers.handlePressOut(symbioteEvent);
   }
 
   handlePress(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined)
+      return;
     this.handlers.handlePress(symbioteEvent);
   }
 
   handleResponderMove(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined)
+      return;
     this.handlers.handleResponderMove(symbioteEvent);
   }
 
@@ -389,7 +457,7 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
     return isTerminationAllowed(this.cancelable);
   }
 
-  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+  private emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
     if (symbioteEvent !== undefined) emitter.emit(symbioteEvent);
   }
@@ -398,17 +466,38 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   // is listening anyway, mirroring core's noteHoverNoop but off `.observed` instead of an @Input.
   private noteHoverNoop(): void {
     if (this.hoverIn.observed || this.hoverOut.observed) {
-      dlog('Pressable hover is a no-op on this host (no pointer-enter/leave event)');
+      dlog(
+        'Pressable hover is a no-op on this host (no pointer-enter/leave event)',
+      );
     }
   }
 
   // Wraps an @Output() as an IPressHandler only while it has a subscriber, so an unbound
   // (longPress) still skips arming the timer, matching createPressHandlers' "undefined means
   // nobody cares" contract.
-  private emitterHandler(emitter: EventEmitter<ISymbioteEvent>): IPressHandler | undefined {
+  private emitterHandler(
+    emitter: EventEmitter<ISymbioteEvent>,
+  ): IPressHandler | undefined {
     return emitter.observed ? event => emitter.emit(event) : undefined;
   }
 
+  // The accessibility twin of emitterHandler, feeding hostProps()'s flat bag instead of
+  // createPressHandlers' config — see the accessibilityAction @Output()'s own comment for why
+  // these four specifically cannot be plain template `(x)="..."` bindings. `undefined` here means
+  // `setEventListener` never sees a function, so the gated prop's flag never lights
+  // (`fabric-boolean-event-gates.md`, "The flag follows the VALUE, not the key").
+  private accessibilityEmitterHandler(
+    name: IGatedAccessibilityEvent,
+  ): ((event: unknown) => void) | undefined {
+    const emitter = this[name];
+    // A WRAPPER's binding is not a subscriber, and `.observed` cannot tell the two apart. When a
+    // demand is supplied from above it decides instead — see `gate-demand.ts` for why the channel
+    // is DI rather than an `@Input`.
+    return gateWanted(this.gateDemand, name, emitter)
+      ? event => this.emit(emitter, event)
+      : undefined;
+  }
+
   private get handlers() {
     this.noteHoverNoop();
     const config: IPressMachineConfig = {
@@ -419,6 +508,7 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       onLongPress: this.emitterHandler(this.longPress),
       delayLongPress: this.delayLongPress ?? DEFAULT_DELAY_LONG_PRESS_MS,
       unstable_pressDelay: this.unstable_pressDelay ?? 0,
+      minPressDuration: this.__minPressDuration,
       hitSlop: this.hitSlop,
       pressRetentionOffset: this.pressRetentionOffset,
     };

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

@@ -60,7 +60,8 @@ type IHostProps = Record<string, unknown>;
 // 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 {
+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).
@@ -97,7 +98,9 @@ export type IAngularRefreshControlInputs = Omit<
 @Component({
   selector: 'RefreshControl',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [RefreshControlHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -106,17 +109,18 @@ export type IAngularRefreshControlInputs = Omit<
       #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, DoCheck, AfterViewInit
+  implements
+    IAngularRefreshControlInputs,
+    OnInit,
+    OnChanges,
+    DoCheck,
+    AfterViewInit
 {
   // Controlled prop the parent owns; required to match the React reference surface.
   @Input({ required: true }) refreshing!: boolean;
@@ -142,8 +146,10 @@ export class RefreshControl
   @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;
@@ -218,7 +224,9 @@ export class RefreshControl
       this.lastNativeRefreshing = this.refreshing;
       return;
     }
-    this.syncNativeRefreshing(this.refreshNativeNode ?? this.host?.nativeElement);
+    this.syncNativeRefreshing(
+      this.refreshNativeNode ?? this.host?.nativeElement,
+    );
   }
 
   // Native starts the spinner before JS runs. Mirror RN's RefreshControl controlled-component
@@ -240,10 +248,19 @@ export class RefreshControl
 
   // 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 {
+  private emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
     if (isSymbioteEvent(event)) emitter.emit(event);
   }
 
+  // The four accessibility events are boolean-GATED Fabric events
+  // (`.claude/rules/fabric-boolean-event-gates.md`): a template binding here lit the gate on every
+  // instance whether or not an app ever subscribed. `.observed`-gated, mirroring Pressable's.
+  private eventEmitterHandler(
+    emitter: EventEmitter<ISymbioteEvent>,
+  ): ((event: unknown) => void) | undefined {
+    return emitter.observed ? event => this.emit(emitter, event) : undefined;
+  }
+
   // The anchor's class-derived style is NOT an @Input: `class="..."`/`[ngClass]` at the use site
   // resolves through the renderer's addClass onto this component's anchor host (see
   // anchorHostStyle's doc comment), so it never shows up in SimpleChanges and ngOnChanges alone
@@ -282,6 +299,10 @@ export class RefreshControl
       nativeID: this.nativeID,
       accessible: this.accessible,
       ...this.folded,
+      onAccessibilityAction: this.eventEmitterHandler(this.accessibilityAction),
+      onAccessibilityTap: this.eventEmitterHandler(this.accessibilityTap),
+      onMagicTap: this.eventEmitterHandler(this.magicTap),
+      onAccessibilityEscape: this.eventEmitterHandler(this.accessibilityEscape),
     };
   });
 
@@ -303,8 +324,10 @@ export class RefreshControl
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       role: this.role,
       'aria-label': this.ariaLabel,