@signality/cdk-interop 0.0.1-alpha.2

package/README.md

@@ -0,0 +1,40 @@
+# @signality/cdk-interop
+
+Signal-based utilities for Angular CDK. Reactive wrappers around CDK's accessibility features.
+
+## Installation
+
+```bash
+npm install @signality/cdk-interop @angular/cdk
+```
+
+## Features
+
+- **`focusMonitor()`** — Reactive focus tracking with origin detection (keyboard, mouse, touch, program)
+- **`inputModality()`** — Reactive input method detection (keyboard, mouse, touch)
+- **`liveAnnouncer()`** — Reactive screen reader announcements with message tracking
+
+## Usage
+
+```typescript
+import { focusMonitor, inputModality, liveAnnouncer } from '@signality/cdk-interop';
+
+// Focus monitoring with origin
+const btn = viewChild<ElementRef<HTMLButtonElement>>('btn');
+const focus = focusMonitor(btn);
+// In template: Focused: {{ focus.isFocused() }}, Origin: {{ focus.origin() }}
+
+// Input modality detection
+const modality = inputModality();
+// In template: Current input: {{ modality() ?? 'none' }}
+
+// Screen reader announcements
+const announcer = liveAnnouncer();
+announcer.announce('Item added to cart');
+// In template: Last: {{ announcer.lastMessage() }}
+```
+
+## Documentation
+
+Full documentation available at [signality.dev/cdk-interop](https://signality.dev/cdk-interop/focus-monitor)
+

package/fesm2022/signality-cdk-interop-focus-monitor.mjs

@@ -0,0 +1,92 @@
+import { inject, signal, afterRenderEffect } from '@angular/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { onDisconnect } from '@signality/core';
+import { setupContext, NOOP_FN, constSignal, toElement } from '@signality/core/internal';
+
+/**
+ * Signal-based wrapper around the [Angular CDK](https://material.angular.io/cdk/a11y/overview) FocusMonitor.
+ *
+ * @param target - Target element to monitor
+ * @param options - Optional configuration
+ * @returns A FocusMonitorRef with focus state signals and control methods
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <button #btn [class.focused]="focus.isFocused()">
+ *       Click me
+ *       @if (focus.origin(); as origin) {
+ *         <span>({{ origin }})</span>
+ *       }
+ *     </button>
+ *     <button (click)="focus.focusVia('program')">Focus programmatically</button>
+ *   `
+ * })
+ * class FocusComponent {
+ *   readonly btn = viewChild<ElementRef>('btn');
+ *   readonly focus = focusMonitor(this.btn);
+ * }
+ * ```
+ */
+function focusMonitor(target, options) {
+    const { runInContext } = setupContext(options?.injector, focusMonitor);
+    return runInContext(({ isServer, onCleanup }) => {
+        if (isServer) {
+            return {
+                origin: constSignal(null),
+                isFocused: constSignal(false),
+                focusVia: NOOP_FN,
+            };
+        }
+        const cdkMonitor = inject(FocusMonitor);
+        const origin = signal(null, ...(ngDevMode ? [{ debugName: "origin" }] : []));
+        const isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+        let subscription;
+        const startMonitoring = (el) => {
+            subscription?.unsubscribe();
+            subscription = cdkMonitor.monitor(el, options?.checkChildren).subscribe(focusOrigin => {
+                origin.set(focusOrigin);
+                isFocused.set(focusOrigin !== null);
+            });
+        };
+        const stopMonitoring = (el) => {
+            origin.set(null);
+            isFocused.set(false);
+            subscription?.unsubscribe();
+            cdkMonitor.stopMonitoring(el);
+        };
+        const focusVia = (origin, options) => {
+            const el = toElement(target);
+            if (!el) {
+                if (ngDevMode) {
+                    console.warn('[focusMonitor] Cannot focus: element is not available');
+                }
+                return;
+            }
+            cdkMonitor.focusVia(el, origin, options);
+        };
+        const setupMonitoring = (onCleanup) => {
+            const el = toElement(target);
+            if (el) {
+                startMonitoring(el);
+                onCleanup(() => stopMonitoring(el));
+            }
+        };
+        onCleanup(() => subscription?.unsubscribe());
+        afterRenderEffect({ read: setupMonitoring });
+        onDisconnect(target, stopMonitoring);
+        return {
+            origin: origin.asReadonly(),
+            isFocused: isFocused.asReadonly(),
+            focusVia,
+        };
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { focusMonitor };
+//# sourceMappingURL=signality-cdk-interop-focus-monitor.mjs.map

package/fesm2022/signality-cdk-interop-focus-monitor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-cdk-interop-focus-monitor.mjs","sources":["../../../projects/cdk-interop/focus-monitor/index.ts","../../../projects/cdk-interop/focus-monitor/signality-cdk-interop-focus-monitor.ts"],"sourcesContent":["import {\n  afterRenderEffect,\n  type EffectCleanupRegisterFn,\n  inject,\n  type Signal,\n  signal,\n} from '@angular/core';\nimport { FocusMonitor, type FocusOrigin } from '@angular/cdk/a11y';\nimport type { Subscription } from 'rxjs';\nimport { MaybeElementSignal, onDisconnect, WithInjector } from '@signality/core';\nimport { constSignal, NOOP_FN, setupContext, toElement } from '@signality/core/internal';\n\nexport interface FocusMonitorOptions extends WithInjector {\n  /**\n   * Also monitor focus within children.\n   * @default false\n   */\n  readonly checkChildren?: boolean;\n}\n\nexport interface FocusMonitorRef {\n  /** Whether element is focused */\n  readonly isFocused: Signal<boolean>;\n\n  /** Focus origin: 'keyboard', 'mouse', 'touch', 'program', or null */\n  readonly origin: Signal<FocusOrigin>;\n\n  /** Focus element with specific origin */\n  readonly focusVia: (origin: FocusOrigin, options?: FocusOptions) => void;\n}\n\n/**\n * Signal-based wrapper around the [Angular CDK](https://material.angular.io/cdk/a11y/overview) FocusMonitor.\n *\n * @param target - Target element to monitor\n * @param options - Optional configuration\n * @returns A FocusMonitorRef with focus state signals and control methods\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <button #btn [class.focused]=\"focus.isFocused()\">\n *       Click me\n *       @if (focus.origin(); as origin) {\n *         <span>({{ origin }})</span>\n *       }\n *     </button>\n *     <button (click)=\"focus.focusVia('program')\">Focus programmatically</button>\n *   `\n * })\n * class FocusComponent {\n *   readonly btn = viewChild<ElementRef>('btn');\n *   readonly focus = focusMonitor(this.btn);\n * }\n * ```\n */\nexport function focusMonitor(\n  target: MaybeElementSignal<HTMLElement>,\n  options?: FocusMonitorOptions\n): FocusMonitorRef {\n  const { runInContext } = setupContext(options?.injector, focusMonitor);\n\n  return runInContext(({ isServer, onCleanup }) => {\n    if (isServer) {\n      return {\n        origin: constSignal(null),\n        isFocused: constSignal(false),\n        focusVia: NOOP_FN,\n      };\n    }\n\n    const cdkMonitor = inject(FocusMonitor);\n\n    const origin = signal<FocusOrigin>(null);\n    const isFocused = signal(false);\n\n    let subscription: Subscription | undefined;\n\n    const startMonitoring = (el: HTMLElement) => {\n      subscription?.unsubscribe();\n\n      subscription = cdkMonitor.monitor(el, options?.checkChildren).subscribe(focusOrigin => {\n        origin.set(focusOrigin);\n        isFocused.set(focusOrigin !== null);\n      });\n    };\n\n    const stopMonitoring = (el: HTMLElement) => {\n      origin.set(null);\n      isFocused.set(false);\n      subscription?.unsubscribe();\n      cdkMonitor.stopMonitoring(el);\n    };\n\n    const focusVia = (origin: FocusOrigin, options?: FocusOptions) => {\n      const el = toElement(target);\n\n      if (!el) {\n        if (ngDevMode) {\n          console.warn('[focusMonitor] Cannot focus: element is not available');\n        }\n        return;\n      }\n\n      cdkMonitor.focusVia(el, origin, options);\n    };\n\n    const setupMonitoring = (onCleanup: EffectCleanupRegisterFn) => {\n      const el = toElement(target);\n\n      if (el) {\n        startMonitoring(el);\n        onCleanup(() => stopMonitoring(el));\n      }\n    };\n\n    onCleanup(() => subscription?.unsubscribe());\n\n    afterRenderEffect({ read: setupMonitoring });\n\n    onDisconnect(target, stopMonitoring);\n\n    return {\n      origin: origin.asReadonly(),\n      isFocused: isFocused.asReadonly(),\n      focusVia,\n    };\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACG,SAAU,YAAY,CAC1B,MAAuC,EACvC,OAA6B,EAAA;AAE7B,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,YAAY,CAAC;IAEtE,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAI;QAC9C,IAAI,QAAQ,EAAE;YACZ,OAAO;AACL,gBAAA,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC;AACzB,gBAAA,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC;AAC7B,gBAAA,QAAQ,EAAE,OAAO;aAClB;QACH;AAEA,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC;AAEvC,QAAA,MAAM,MAAM,GAAG,MAAM,CAAc,IAAI,kDAAC;AACxC,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,qDAAC;AAE/B,QAAA,IAAI,YAAsC;AAE1C,QAAA,MAAM,eAAe,GAAG,CAAC,EAAe,KAAI;YAC1C,YAAY,EAAE,WAAW,EAAE;AAE3B,YAAA,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,EAAE,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,SAAS,CAAC,WAAW,IAAG;AACpF,gBAAA,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC;AACvB,gBAAA,SAAS,CAAC,GAAG,CAAC,WAAW,KAAK,IAAI,CAAC;AACrC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AAED,QAAA,MAAM,cAAc,GAAG,CAAC,EAAe,KAAI;AACzC,YAAA,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AAChB,YAAA,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;YACpB,YAAY,EAAE,WAAW,EAAE;AAC3B,YAAA,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC;AAC/B,QAAA,CAAC;AAED,QAAA,MAAM,QAAQ,GAAG,CAAC,MAAmB,EAAE,OAAsB,KAAI;AAC/D,YAAA,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC;YAE5B,IAAI,CAAC,EAAE,EAAE;gBACP,IAAI,SAAS,EAAE;AACb,oBAAA,OAAO,CAAC,IAAI,CAAC,uDAAuD,CAAC;gBACvE;gBACA;YACF;YAEA,UAAU,CAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC;AAC1C,QAAA,CAAC;AAED,QAAA,MAAM,eAAe,GAAG,CAAC,SAAkC,KAAI;AAC7D,YAAA,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC;YAE5B,IAAI,EAAE,EAAE;gBACN,eAAe,CAAC,EAAE,CAAC;gBACnB,SAAS,CAAC,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;YACrC;AACF,QAAA,CAAC;QAED,SAAS,CAAC,MAAM,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5C,QAAA,iBAAiB,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;AAE5C,QAAA,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC;QAEpC,OAAO;AACL,YAAA,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE;AAC3B,YAAA,SAAS,EAAE,SAAS,CAAC,UAAU,EAAE;YACjC,QAAQ;SACT;AACH,IAAA,CAAC,CAAC;AACJ;;ACjIA;;AAEG;;;;"}

package/fesm2022/signality-cdk-interop-input-modality.mjs

@@ -0,0 +1,47 @@
+import { inject, signal } from '@angular/core';
+import { InputModalityDetector } from '@angular/cdk/a11y';
+import { setupContext, constSignal } from '@signality/core/internal';
+
+/**
+ * Signal-based wrapper around the [Angular CDK](https://material.angular.io/cdk/a11y/overview) InputModalityDetector.
+ *
+ * @param options - Optional configuration including signal options and injector
+ * @returns A signal containing the current input modality: `'keyboard'`, `'mouse'`, `'touch'`, or `null`
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div [class.keyboard]="modality() === 'keyboard'">
+ *       <p>Current input: {{ modality() ?? 'none' }}</p>
+ *       <button>Button with conditional focus ring</button>
+ *     </div>
+ *   `
+ * })
+ * class ModalityComponent {
+ *   readonly modality = inputModality();
+ * }
+ * ```
+ */
+function inputModality(options) {
+    const { runInContext } = setupContext(options?.injector, inputModality);
+    return runInContext(({ isServer, onCleanup }) => {
+        if (isServer) {
+            return constSignal(null);
+        }
+        const cdkDetector = inject(InputModalityDetector);
+        const current = signal(cdkDetector.mostRecentModality, options);
+        const subscription = cdkDetector.modalityChanged.subscribe(modality => {
+            current.set(modality);
+        });
+        onCleanup(subscription.unsubscribe.bind(subscription));
+        return current.asReadonly();
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { inputModality };
+//# sourceMappingURL=signality-cdk-interop-input-modality.mjs.map

package/fesm2022/signality-cdk-interop-input-modality.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-cdk-interop-input-modality.mjs","sources":["../../../projects/cdk-interop/input-modality/index.ts","../../../projects/cdk-interop/input-modality/signality-cdk-interop-input-modality.ts"],"sourcesContent":["import { type CreateSignalOptions, inject, type Signal, signal } from '@angular/core';\nimport { type InputModality, InputModalityDetector } from '@angular/cdk/a11y';\nimport { WithInjector } from '@signality/core';\nimport { constSignal, setupContext } from '@signality/core/internal';\n\nexport type InputModalityOptions = CreateSignalOptions<InputModality> & WithInjector;\n\n/**\n * Signal-based wrapper around the [Angular CDK](https://material.angular.io/cdk/a11y/overview) InputModalityDetector.\n *\n * @param options - Optional configuration including signal options and injector\n * @returns A signal containing the current input modality: `'keyboard'`, `'mouse'`, `'touch'`, or `null`\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div [class.keyboard]=\"modality() === 'keyboard'\">\n *       <p>Current input: {{ modality() ?? 'none' }}</p>\n *       <button>Button with conditional focus ring</button>\n *     </div>\n *   `\n * })\n * class ModalityComponent {\n *   readonly modality = inputModality();\n * }\n * ```\n */\nexport function inputModality(options?: InputModalityOptions): Signal<InputModality> {\n  const { runInContext } = setupContext(options?.injector, inputModality);\n\n  return runInContext(({ isServer, onCleanup }) => {\n    if (isServer) {\n      return constSignal(null);\n    }\n\n    const cdkDetector = inject(InputModalityDetector);\n\n    const current = signal<InputModality>(cdkDetector.mostRecentModality, options);\n\n    const subscription = cdkDetector.modalityChanged.subscribe(modality => {\n      current.set(modality);\n    });\n\n    onCleanup(subscription.unsubscribe.bind(subscription));\n\n    return current.asReadonly();\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAOA;;;;;;;;;;;;;;;;;;;;AAoBG;AACG,SAAU,aAAa,CAAC,OAA8B,EAAA;AAC1D,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC;IAEvE,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAI;QAC9C,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,WAAW,CAAC,IAAI,CAAC;QAC1B;AAEA,QAAA,MAAM,WAAW,GAAG,MAAM,CAAC,qBAAqB,CAAC;QAEjD,MAAM,OAAO,GAAG,MAAM,CAAgB,WAAW,CAAC,kBAAkB,EAAE,OAAO,CAAC;QAE9E,MAAM,YAAY,GAAG,WAAW,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ,IAAG;AACpE,YAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;AACvB,QAAA,CAAC,CAAC;QAEF,SAAS,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;AAEtD,QAAA,OAAO,OAAO,CAAC,UAAU,EAAE;AAC7B,IAAA,CAAC,CAAC;AACJ;;AChDA;;AAEG;;;;"}

package/fesm2022/signality-cdk-interop-live-announcer.mjs

@@ -0,0 +1,72 @@
+import { inject, signal } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { setupContext, NOOP_FN, constSignal } from '@signality/core/internal';
+
+/**
+ * Signal-based wrapper around the [Angular CDK](https://material.angular.io/cdk/a11y/overview) LiveAnnouncer.
+ *
+ * @param options - Optional configuration
+ * @returns A LiveAnnouncerRef with announcement methods and last message signal
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div>
+ *       <button (click)="addToCart()">Add to cart</button>
+ *       <button (click)="announcer.clear()">Clear Announcements</button>
+ *       @if (announcer.lastMessage(); as message) {
+ *         <p>Last: {{ message }}</p>
+ *       }
+ *     </div>
+ *   `
+ * })
+ * class ShoppingComponent {
+ *   readonly announcer = liveAnnouncer();
+ *
+ *   addToCart() {
+ *     this.announcer.announce('Item added to cart', 'polite');
+ *   }
+ * }
+ * ```
+ */
+function liveAnnouncer(options) {
+    const { runInContext } = setupContext(options?.injector, liveAnnouncer);
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return {
+                lastMessage: constSignal(null),
+                announce: NOOP_FN,
+                clear: NOOP_FN,
+            };
+        }
+        const cdkLiveAnnouncer = inject(LiveAnnouncer);
+        const defaultPoliteness = options?.defaultPoliteness ?? 'polite';
+        const lastMessage = signal(null, ...(ngDevMode ? [{ debugName: "lastMessage" }] : []));
+        const announce = (message, politeness) => {
+            const politenessLevel = politeness ?? defaultPoliteness;
+            if (politenessLevel === 'off') {
+                return;
+            }
+            cdkLiveAnnouncer.announce(message, politenessLevel).then(() => {
+                lastMessage.set(message);
+            });
+        };
+        const clear = () => {
+            cdkLiveAnnouncer.clear();
+            lastMessage.set(null);
+        };
+        return {
+            lastMessage: lastMessage.asReadonly(),
+            announce,
+            clear,
+        };
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { liveAnnouncer };
+//# sourceMappingURL=signality-cdk-interop-live-announcer.mjs.map

package/fesm2022/signality-cdk-interop-live-announcer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-cdk-interop-live-announcer.mjs","sources":["../../../projects/cdk-interop/live-announcer/index.ts","../../../projects/cdk-interop/live-announcer/signality-cdk-interop-live-announcer.ts"],"sourcesContent":["import { inject, signal, type Signal } from '@angular/core';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { WithInjector } from '@signality/core';\nimport { constSignal, NOOP_FN, setupContext } from '@signality/core/internal';\n\nexport type AriaLivePoliteness = 'polite' | 'assertive' | 'off';\n\nexport interface LiveAnnouncerOptions extends WithInjector {\n  /**\n   * Default politeness level for announcements.\n   * @default 'polite'\n   */\n  readonly defaultPoliteness?: AriaLivePoliteness;\n}\n\nexport interface LiveAnnouncerRef {\n  /** Last announced message */\n  readonly lastMessage: Signal<string | null>;\n\n  /** Announce a message to screen readers */\n  readonly announce: (message: string, politeness?: AriaLivePoliteness) => void;\n\n  /** Clear all announcements */\n  readonly clear: () => void;\n}\n\n/**\n * Signal-based wrapper around the [Angular CDK](https://material.angular.io/cdk/a11y/overview) LiveAnnouncer.\n *\n * @param options - Optional configuration\n * @returns A LiveAnnouncerRef with announcement methods and last message signal\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div>\n *       <button (click)=\"addToCart()\">Add to cart</button>\n *       <button (click)=\"announcer.clear()\">Clear Announcements</button>\n *       @if (announcer.lastMessage(); as message) {\n *         <p>Last: {{ message }}</p>\n *       }\n *     </div>\n *   `\n * })\n * class ShoppingComponent {\n *   readonly announcer = liveAnnouncer();\n *\n *   addToCart() {\n *     this.announcer.announce('Item added to cart', 'polite');\n *   }\n * }\n * ```\n */\nexport function liveAnnouncer(options?: LiveAnnouncerOptions): LiveAnnouncerRef {\n  const { runInContext } = setupContext(options?.injector, liveAnnouncer);\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return {\n        lastMessage: constSignal(null),\n        announce: NOOP_FN,\n        clear: NOOP_FN,\n      };\n    }\n\n    const cdkLiveAnnouncer = inject(LiveAnnouncer);\n    const defaultPoliteness = options?.defaultPoliteness ?? 'polite';\n\n    const lastMessage = signal<string | null>(null);\n\n    const announce = (message: string, politeness?: AriaLivePoliteness) => {\n      const politenessLevel = politeness ?? defaultPoliteness;\n\n      if (politenessLevel === 'off') {\n        return;\n      }\n\n      cdkLiveAnnouncer.announce(message, politenessLevel as 'polite' | 'assertive').then(() => {\n        lastMessage.set(message);\n      });\n    };\n\n    const clear = () => {\n      cdkLiveAnnouncer.clear();\n      lastMessage.set(null);\n    };\n\n    return {\n      lastMessage: lastMessage.asReadonly(),\n      announce,\n      clear,\n    };\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AACG,SAAU,aAAa,CAAC,OAA8B,EAAA;AAC1D,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC;AAEvE,IAAA,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAI;QACnC,IAAI,QAAQ,EAAE;YACZ,OAAO;AACL,gBAAA,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC;AAC9B,gBAAA,QAAQ,EAAE,OAAO;AACjB,gBAAA,KAAK,EAAE,OAAO;aACf;QACH;AAEA,QAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC;AAC9C,QAAA,MAAM,iBAAiB,GAAG,OAAO,EAAE,iBAAiB,IAAI,QAAQ;AAEhE,QAAA,MAAM,WAAW,GAAG,MAAM,CAAgB,IAAI,uDAAC;AAE/C,QAAA,MAAM,QAAQ,GAAG,CAAC,OAAe,EAAE,UAA+B,KAAI;AACpE,YAAA,MAAM,eAAe,GAAG,UAAU,IAAI,iBAAiB;AAEvD,YAAA,IAAI,eAAe,KAAK,KAAK,EAAE;gBAC7B;YACF;YAEA,gBAAgB,CAAC,QAAQ,CAAC,OAAO,EAAE,eAAyC,CAAC,CAAC,IAAI,CAAC,MAAK;AACtF,gBAAA,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC;AAC1B,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;QAED,MAAM,KAAK,GAAG,MAAK;YACjB,gBAAgB,CAAC,KAAK,EAAE;AACxB,YAAA,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;AACvB,QAAA,CAAC;QAED,OAAO;AACL,YAAA,WAAW,EAAE,WAAW,CAAC,UAAU,EAAE;YACrC,QAAQ;YACR,KAAK;SACN;AACH,IAAA,CAAC,CAAC;AACJ;;AC9FA;;AAEG;;;;"}

package/fesm2022/signality-cdk-interop.mjs

@@ -0,0 +1,8 @@
+export * from '@signality/cdk-interop/focus-monitor';
+export * from '@signality/cdk-interop/input-modality';
+export * from '@signality/cdk-interop/live-announcer';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=signality-cdk-interop.mjs.map

package/fesm2022/signality-cdk-interop.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-cdk-interop.mjs","sources":["../../../projects/cdk-interop/signality-cdk-interop.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;AAEG"}

package/focus-monitor/index.d.ts

@@ -0,0 +1,45 @@
+import { type Signal } from '@angular/core';
+import { type FocusOrigin } from '@angular/cdk/a11y';
+import { MaybeElementSignal, WithInjector } from '@signality/core';
+export interface FocusMonitorOptions extends WithInjector {
+    /**
+     * Also monitor focus within children.
+     * @default false
+     */
+    readonly checkChildren?: boolean;
+}
+export interface FocusMonitorRef {
+    /** Whether element is focused */
+    readonly isFocused: Signal<boolean>;
+    /** Focus origin: 'keyboard', 'mouse', 'touch', 'program', or null */
+    readonly origin: Signal<FocusOrigin>;
+    /** Focus element with specific origin */
+    readonly focusVia: (origin: FocusOrigin, options?: FocusOptions) => void;
+}
+/**
+ * Signal-based wrapper around the [Angular CDK](https://material.angular.io/cdk/a11y/overview) FocusMonitor.
+ *
+ * @param target - Target element to monitor
+ * @param options - Optional configuration
+ * @returns A FocusMonitorRef with focus state signals and control methods
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <button #btn [class.focused]="focus.isFocused()">
+ *       Click me
+ *       @if (focus.origin(); as origin) {
+ *         <span>({{ origin }})</span>
+ *       }
+ *     </button>
+ *     <button (click)="focus.focusVia('program')">Focus programmatically</button>
+ *   `
+ * })
+ * class FocusComponent {
+ *   readonly btn = viewChild<ElementRef>('btn');
+ *   readonly focus = focusMonitor(this.btn);
+ * }
+ * ```
+ */
+export declare function focusMonitor(target: MaybeElementSignal<HTMLElement>, options?: FocusMonitorOptions): FocusMonitorRef;

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@signality/cdk-interop/focus-monitor';
+export * from '@signality/cdk-interop/input-modality';
+export * from '@signality/cdk-interop/live-announcer';

package/input-modality/index.d.ts

@@ -0,0 +1,26 @@
+import { type CreateSignalOptions, type Signal } from '@angular/core';
+import { type InputModality } from '@angular/cdk/a11y';
+import { WithInjector } from '@signality/core';
+export type InputModalityOptions = CreateSignalOptions<InputModality> & WithInjector;
+/**
+ * Signal-based wrapper around the [Angular CDK](https://material.angular.io/cdk/a11y/overview) InputModalityDetector.
+ *
+ * @param options - Optional configuration including signal options and injector
+ * @returns A signal containing the current input modality: `'keyboard'`, `'mouse'`, `'touch'`, or `null`
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div [class.keyboard]="modality() === 'keyboard'">
+ *       <p>Current input: {{ modality() ?? 'none' }}</p>
+ *       <button>Button with conditional focus ring</button>
+ *     </div>
+ *   `
+ * })
+ * class ModalityComponent {
+ *   readonly modality = inputModality();
+ * }
+ * ```
+ */
+export declare function inputModality(options?: InputModalityOptions): Signal<InputModality>;

package/live-announcer/index.d.ts

@@ -0,0 +1,47 @@
+import { type Signal } from '@angular/core';
+import { WithInjector } from '@signality/core';
+export type AriaLivePoliteness = 'polite' | 'assertive' | 'off';
+export interface LiveAnnouncerOptions extends WithInjector {
+    /**
+     * Default politeness level for announcements.
+     * @default 'polite'
+     */
+    readonly defaultPoliteness?: AriaLivePoliteness;
+}
+export interface LiveAnnouncerRef {
+    /** Last announced message */
+    readonly lastMessage: Signal<string | null>;
+    /** Announce a message to screen readers */
+    readonly announce: (message: string, politeness?: AriaLivePoliteness) => void;
+    /** Clear all announcements */
+    readonly clear: () => void;
+}
+/**
+ * Signal-based wrapper around the [Angular CDK](https://material.angular.io/cdk/a11y/overview) LiveAnnouncer.
+ *
+ * @param options - Optional configuration
+ * @returns A LiveAnnouncerRef with announcement methods and last message signal
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div>
+ *       <button (click)="addToCart()">Add to cart</button>
+ *       <button (click)="announcer.clear()">Clear Announcements</button>
+ *       @if (announcer.lastMessage(); as message) {
+ *         <p>Last: {{ message }}</p>
+ *       }
+ *     </div>
+ *   `
+ * })
+ * class ShoppingComponent {
+ *   readonly announcer = liveAnnouncer();
+ *
+ *   addToCart() {
+ *     this.announcer.announce('Item added to cart', 'polite');
+ *   }
+ * }
+ * ```
+ */
+export declare function liveAnnouncer(options?: LiveAnnouncerOptions): LiveAnnouncerRef;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@signality/cdk-interop",
+  "version": "0.0.1-alpha.2",
+  "license": "MIT",
+  "author": "Vyacheslav Borodin <https://github.com/vs-borodin>",
+  "description": "Signal-based utilities for Angular CDK",
+  "keywords": [
+    "signality",
+    "angular",
+    "cdk",
+    "signals",
+    "reactive",
+    "accessibility",
+    "a11y"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/signalityjs/signality"
+  },
+  "bugs": "https://github.com/signalityjs/signality/issues",
+  "homepage": "https://signality.dev",
+  "sideEffects": false,
+  "peerDependencies": {
+    "@angular/core": ">=19.2.0",
+    "@angular/cdk": ">=19.2.0",
+    "@signality/core": ">=0.0.1-alpha.1",
+    "rxjs": ">=7.8.1"
+  },
+  "module": "fesm2022/signality-cdk-interop.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/signality-cdk-interop.mjs"
+    },
+    "./focus-monitor": {
+      "types": "./focus-monitor/index.d.ts",
+      "default": "./fesm2022/signality-cdk-interop-focus-monitor.mjs"
+    },
+    "./input-modality": {
+      "types": "./input-modality/index.d.ts",
+      "default": "./fesm2022/signality-cdk-interop-input-modality.mjs"
+    },
+    "./live-announcer": {
+      "types": "./live-announcer/index.d.ts",
+      "default": "./fesm2022/signality-cdk-interop-live-announcer.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}