@cdevhub/ngx-tw 0.2.0 → 0.3.0

package/fesm2022/cdevhub-ngx-tw.mjs

@@ -19,6 +19,7 @@ export * from '@cdevhub/ngx-tw/popover';
 export * from '@cdevhub/ngx-tw/dialog';
 export * from '@cdevhub/ngx-tw/command-palette';
 export * from '@cdevhub/ngx-tw/toast';
+export * from '@cdevhub/ngx-tw/transfer';
 export * from '@cdevhub/ngx-tw/form-field';
 export * from '@cdevhub/ngx-tw/switch';
 export * from '@cdevhub/ngx-tw/checkbox';
@@ -26,6 +27,9 @@ export * from '@cdevhub/ngx-tw/radio';
 export * from '@cdevhub/ngx-tw/select';
 export * from '@cdevhub/ngx-tw/input';
 export * from '@cdevhub/ngx-tw/textarea';
+export * from '@cdevhub/ngx-tw/file-upload';
+export * from '@cdevhub/ngx-tw/number-input';
+export * from '@cdevhub/ngx-tw/tags-input';
 export * from '@cdevhub/ngx-tw/spinner';
 export * from '@cdevhub/ngx-tw/progress-bar';
 export * from '@cdevhub/ngx-tw/skeleton';
@@ -47,6 +51,9 @@ export * from '@cdevhub/ngx-tw/stat';
 export * from '@cdevhub/ngx-tw/combobox';
 export * from '@cdevhub/ngx-tw/empty-state';
 export * from '@cdevhub/ngx-tw/sheet';
+export * from '@cdevhub/ngx-tw/aspect-ratio';
+export * from '@cdevhub/ngx-tw/tree';
+export * from '@cdevhub/ngx-tw/theme';
 
 /*
  * Public API Surface of ngx-tw

package/fesm2022/cdevhub-ngx-tw.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cdevhub-ngx-tw.mjs","sources":["../../../projects/ngx-tw/src/public-api.ts","../../../projects/ngx-tw/src/cdevhub-ngx-tw.ts"],"sourcesContent":["/*\n * Public API Surface of ngx-tw\n *\n * Consumers should use direct imports for tree-shaking:\n *   import { ButtonDirective } from '@cdevhub/ngx-tw/button';\n */\n\nexport * from '@cdevhub/ngx-tw/core';\nexport * from '@cdevhub/ngx-tw/badge';\nexport * from '@cdevhub/ngx-tw/button';\nexport * from '@cdevhub/ngx-tw/card';\nexport * from '@cdevhub/ngx-tw/flip-card';\nexport * from '@cdevhub/ngx-tw/alert';\nexport * from '@cdevhub/ngx-tw/tabs';\nexport * from '@cdevhub/ngx-tw/tab-nav';\nexport * from '@cdevhub/ngx-tw/separator';\nexport * from '@cdevhub/ngx-tw/tooltip';\nexport * from '@cdevhub/ngx-tw/code-block';\nexport * from '@cdevhub/ngx-tw/segmented-control';\nexport * from '@cdevhub/ngx-tw/avatar';\nexport * from '@cdevhub/ngx-tw/menu';\nexport * from '@cdevhub/ngx-tw/icon';\nexport * from '@cdevhub/ngx-tw/collapsible';\nexport * from '@cdevhub/ngx-tw/accordion';\nexport * from '@cdevhub/ngx-tw/popover';\nexport * from '@cdevhub/ngx-tw/dialog';\nexport * from '@cdevhub/ngx-tw/command-palette';\nexport * from '@cdevhub/ngx-tw/toast';\nexport * from '@cdevhub/ngx-tw/form-field';\nexport * from '@cdevhub/ngx-tw/switch';\nexport * from '@cdevhub/ngx-tw/checkbox';\nexport * from '@cdevhub/ngx-tw/radio';\nexport * from '@cdevhub/ngx-tw/select';\nexport * from '@cdevhub/ngx-tw/input';\nexport * from '@cdevhub/ngx-tw/textarea';\nexport * from '@cdevhub/ngx-tw/spinner';\nexport * from '@cdevhub/ngx-tw/progress-bar';\nexport * from '@cdevhub/ngx-tw/skeleton';\nexport * from '@cdevhub/ngx-tw/calendar';\nexport * from '@cdevhub/ngx-tw/date-picker';\nexport * from '@cdevhub/ngx-tw/date-range-picker';\nexport * from '@cdevhub/ngx-tw/time-picker';\nexport * from '@cdevhub/ngx-tw/slider';\nexport * from '@cdevhub/ngx-tw/stepper';\nexport * from '@cdevhub/ngx-tw/paginator';\nexport * from '@cdevhub/ngx-tw/sort';\nexport * from '@cdevhub/ngx-tw/split';\nexport * from '@cdevhub/ngx-tw/table';\nexport * from '@cdevhub/ngx-tw/item';\nexport * from '@cdevhub/ngx-tw/breadcrumbs';\nexport * from '@cdevhub/ngx-tw/timeline';\nexport * from '@cdevhub/ngx-tw/carousel';\nexport * from '@cdevhub/ngx-tw/stat';\nexport * from '@cdevhub/ngx-tw/combobox';\nexport * from '@cdevhub/ngx-tw/empty-state';\nexport * from '@cdevhub/ngx-tw/sheet';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;AAKG;;ACLH;;AAEG"}
+{"version":3,"file":"cdevhub-ngx-tw.mjs","sources":["../../../projects/ngx-tw/src/public-api.ts","../../../projects/ngx-tw/src/cdevhub-ngx-tw.ts"],"sourcesContent":["/*\n * Public API Surface of ngx-tw\n *\n * Consumers should use direct imports for tree-shaking:\n *   import { ButtonDirective } from '@cdevhub/ngx-tw/button';\n */\n\nexport * from '@cdevhub/ngx-tw/core';\nexport * from '@cdevhub/ngx-tw/badge';\nexport * from '@cdevhub/ngx-tw/button';\nexport * from '@cdevhub/ngx-tw/card';\nexport * from '@cdevhub/ngx-tw/flip-card';\nexport * from '@cdevhub/ngx-tw/alert';\nexport * from '@cdevhub/ngx-tw/tabs';\nexport * from '@cdevhub/ngx-tw/tab-nav';\nexport * from '@cdevhub/ngx-tw/separator';\nexport * from '@cdevhub/ngx-tw/tooltip';\nexport * from '@cdevhub/ngx-tw/code-block';\nexport * from '@cdevhub/ngx-tw/segmented-control';\nexport * from '@cdevhub/ngx-tw/avatar';\nexport * from '@cdevhub/ngx-tw/menu';\nexport * from '@cdevhub/ngx-tw/icon';\nexport * from '@cdevhub/ngx-tw/collapsible';\nexport * from '@cdevhub/ngx-tw/accordion';\nexport * from '@cdevhub/ngx-tw/popover';\nexport * from '@cdevhub/ngx-tw/dialog';\nexport * from '@cdevhub/ngx-tw/command-palette';\nexport * from '@cdevhub/ngx-tw/toast';\nexport * from '@cdevhub/ngx-tw/transfer';\nexport * from '@cdevhub/ngx-tw/form-field';\nexport * from '@cdevhub/ngx-tw/switch';\nexport * from '@cdevhub/ngx-tw/checkbox';\nexport * from '@cdevhub/ngx-tw/radio';\nexport * from '@cdevhub/ngx-tw/select';\nexport * from '@cdevhub/ngx-tw/input';\nexport * from '@cdevhub/ngx-tw/textarea';\nexport * from '@cdevhub/ngx-tw/file-upload';\nexport * from '@cdevhub/ngx-tw/number-input';\nexport * from '@cdevhub/ngx-tw/tags-input';\nexport * from '@cdevhub/ngx-tw/spinner';\nexport * from '@cdevhub/ngx-tw/progress-bar';\nexport * from '@cdevhub/ngx-tw/skeleton';\nexport * from '@cdevhub/ngx-tw/calendar';\nexport * from '@cdevhub/ngx-tw/date-picker';\nexport * from '@cdevhub/ngx-tw/date-range-picker';\nexport * from '@cdevhub/ngx-tw/time-picker';\nexport * from '@cdevhub/ngx-tw/slider';\nexport * from '@cdevhub/ngx-tw/stepper';\nexport * from '@cdevhub/ngx-tw/paginator';\nexport * from '@cdevhub/ngx-tw/sort';\nexport * from '@cdevhub/ngx-tw/split';\nexport * from '@cdevhub/ngx-tw/table';\nexport * from '@cdevhub/ngx-tw/item';\nexport * from '@cdevhub/ngx-tw/breadcrumbs';\nexport * from '@cdevhub/ngx-tw/timeline';\nexport * from '@cdevhub/ngx-tw/carousel';\nexport * from '@cdevhub/ngx-tw/stat';\nexport * from '@cdevhub/ngx-tw/combobox';\nexport * from '@cdevhub/ngx-tw/empty-state';\nexport * from '@cdevhub/ngx-tw/sheet';\nexport * from '@cdevhub/ngx-tw/aspect-ratio';\nexport * from '@cdevhub/ngx-tw/tree';\nexport * from '@cdevhub/ngx-tw/theme';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;AAKG;;ACLH;;AAEG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdevhub/ngx-tw",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Angular component library for Tailwind CSS v4 — accessible, signal-based, built on Angular CDK.",
   "keywords": [
     "angular",
@@ -24,23 +24,8 @@
   "bugs": {
     "url": "https://github.com/avs2001/ngx-tw/issues"
   },
-  "peerDependencies": {
-    "@angular/common": "^21.2.0",
-    "@angular/core": "^21.2.0",
-    "@angular/cdk": "^21.0.0",
-    "tailwindcss": "^4.0.0",
-    "tailwind-variants": "^0.3.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "module": "fesm2022/cdevhub-ngx-tw.mjs",
-  "typings": "types/cdevhub-ngx-tw.d.ts",
   "exports": {
+    "./theme/*.css": "./theme/*.css",
     "./package.json": {
       "default": "./package.json"
     },
@@ -56,6 +41,10 @@
       "types": "./types/cdevhub-ngx-tw-alert.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-alert.mjs"
     },
+    "./aspect-ratio": {
+      "types": "./types/cdevhub-ngx-tw-aspect-ratio.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-aspect-ratio.mjs"
+    },
     "./avatar": {
       "types": "./types/cdevhub-ngx-tw-avatar.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-avatar.mjs"
@@ -132,6 +121,10 @@
       "types": "./types/cdevhub-ngx-tw-empty-state.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-empty-state.mjs"
     },
+    "./file-upload": {
+      "types": "./types/cdevhub-ngx-tw-file-upload.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-file-upload.mjs"
+    },
     "./flip-card": {
       "types": "./types/cdevhub-ngx-tw-flip-card.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-flip-card.mjs"
@@ -160,6 +153,10 @@
       "types": "./types/cdevhub-ngx-tw-menu.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-menu.mjs"
     },
+    "./number-input": {
+      "types": "./types/cdevhub-ngx-tw-number-input.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-number-input.mjs"
+    },
     "./paginator": {
       "types": "./types/cdevhub-ngx-tw-paginator.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-paginator.mjs"
@@ -236,6 +233,10 @@
       "types": "./types/cdevhub-ngx-tw-tabs.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-tabs.mjs"
     },
+    "./tags-input": {
+      "types": "./types/cdevhub-ngx-tw-tags-input.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-tags-input.mjs"
+    },
     "./textarea": {
       "types": "./types/cdevhub-ngx-tw-textarea.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-textarea.mjs"
@@ -259,7 +260,34 @@
     "./tooltip": {
       "types": "./types/cdevhub-ngx-tw-tooltip.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-tooltip.mjs"
+    },
+    "./transfer": {
+      "types": "./types/cdevhub-ngx-tw-transfer.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-transfer.mjs"
+    },
+    "./tree": {
+      "types": "./types/cdevhub-ngx-tw-tree.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-tree.mjs"
     }
   },
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/cdk": "^22.0.0",
+    "tailwindcss": "^4.0.0",
+    "tailwind-variants": "^0.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "engines": {
+    "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/cdevhub-ngx-tw.mjs",
+  "typings": "types/cdevhub-ngx-tw.d.ts",
   "type": "module"
 }

package/theme/_dark.css

@@ -156,8 +156,10 @@
   --color-primary-soft-hover: var(--color-blue-900);
   --color-primary-soft-fg: var(--color-blue-100);
   --color-primary-soft-fg-muted: var(--color-blue-300);
-  --color-primary-solid: var(--color-blue-500);
-  --color-primary-solid-hover: var(--color-blue-400);
+  /* `-400` not `-500` — blue-500/#2b7fff on blue-950/#162456 only hits
+     3.92:1 (AA fail). blue-400 lifts that to ~7.8:1 with the same fg. */
+  --color-primary-solid: var(--color-blue-400);
+  --color-primary-solid-hover: var(--color-blue-300);
   --color-primary-solid-fg: var(--color-blue-950);
   --color-primary-border: var(--color-blue-800);
   --color-primary-border-strong: var(--color-blue-500);
@@ -182,8 +184,9 @@
   --color-accent-soft-hover: var(--color-violet-900);
   --color-accent-soft-fg: var(--color-violet-100);
   --color-accent-soft-fg-muted: var(--color-violet-300);
-  --color-accent-solid: var(--color-violet-500);
-  --color-accent-solid-hover: var(--color-violet-400);
+  /* violet-500/violet-950 = 3.46:1 (AA fail); -400 lifts to ~5.4:1. */
+  --color-accent-solid: var(--color-violet-400);
+  --color-accent-solid-hover: var(--color-violet-300);
   --color-accent-solid-fg: var(--color-violet-950);
   --color-accent-border: var(--color-violet-800);
   --color-accent-border-strong: var(--color-violet-500);
@@ -247,8 +250,9 @@
   --color-error-soft-hover: var(--color-red-900);
   --color-error-soft-fg: var(--color-red-100);
   --color-error-soft-fg-muted: var(--color-red-300);
-  --color-error-solid: var(--color-red-500);
-  --color-error-solid-hover: var(--color-red-400);
+  /* red-500/red-950 = 4.14:1 (just AA fail). red-400 lifts to ~5.8:1. */
+  --color-error-solid: var(--color-red-400);
+  --color-error-solid-hover: var(--color-red-300);
   --color-error-solid-fg: var(--color-red-950);
   --color-error-border: var(--color-red-800);
   --color-error-border-strong: var(--color-red-500);
@@ -398,8 +402,8 @@
     --color-primary-soft-hover: var(--color-blue-900);
     --color-primary-soft-fg: var(--color-blue-100);
     --color-primary-soft-fg-muted: var(--color-blue-300);
-    --color-primary-solid: var(--color-blue-500);
-    --color-primary-solid-hover: var(--color-blue-400);
+    --color-primary-solid: var(--color-blue-400);
+    --color-primary-solid-hover: var(--color-blue-300);
     --color-primary-solid-fg: var(--color-blue-950);
     --color-primary-border: var(--color-blue-800);
     --color-primary-border-strong: var(--color-blue-500);
@@ -424,8 +428,8 @@
     --color-accent-soft-hover: var(--color-violet-900);
     --color-accent-soft-fg: var(--color-violet-100);
     --color-accent-soft-fg-muted: var(--color-violet-300);
-    --color-accent-solid: var(--color-violet-500);
-    --color-accent-solid-hover: var(--color-violet-400);
+    --color-accent-solid: var(--color-violet-400);
+    --color-accent-solid-hover: var(--color-violet-300);
     --color-accent-solid-fg: var(--color-violet-950);
     --color-accent-border: var(--color-violet-800);
     --color-accent-border-strong: var(--color-violet-500);
@@ -489,8 +493,8 @@
     --color-error-soft-hover: var(--color-red-900);
     --color-error-soft-fg: var(--color-red-100);
     --color-error-soft-fg-muted: var(--color-red-300);
-    --color-error-solid: var(--color-red-500);
-    --color-error-solid-hover: var(--color-red-400);
+    --color-error-solid: var(--color-red-400);
+    --color-error-solid-hover: var(--color-red-300);
     --color-error-solid-fg: var(--color-red-950);
     --color-error-border: var(--color-red-800);
     --color-error-border-strong: var(--color-red-500);

package/theme/_semantic.css

@@ -250,8 +250,9 @@
   --color-info-soft-hover: var(--color-info-100);
   --color-info-soft-fg: var(--color-info-900);
   --color-info-soft-fg-muted: var(--color-info-800);
-  --color-info-solid: var(--color-info-600);
-  --color-info-solid-hover: var(--color-info-700);
+  /* Solid uses -700 not -600: sky-600/white is 3.85:1 (AA fail). -700/white is 5.6:1. */
+  --color-info-solid: var(--color-info-700);
+  --color-info-solid-hover: var(--color-info-800);
   --color-info-solid-fg: var(--color-white);
   --color-info-border: var(--color-info-300);
   --color-info-border-strong: var(--color-info-500);

package/theme/index.css

@@ -25,8 +25,16 @@
   }
 }
 
-/* Scan library source for Tailwind class usage */
-@source "../src/**/*.ts";
+/* ===== Library class scanning =====
+   Paths here resolve relative to THIS file's location in the *published*
+   package (`node_modules/@cdevhub/ngx-tw/theme/`), because that is the only
+   copy a consumer ever imports. The published tarball ships compiled bundles
+   (`fesm2022/*.mjs`) and no `.ts` source, and Tailwind v4 never auto-scans
+   `node_modules` — so without this line a consumer's build emits the semantic
+   tokens and base layer but *zero* component utilities, silently. Tailwind
+   does not error on a glob that matches nothing, so a wrong path here fails
+   invisibly — `npm run verify:package` is what guards it. */
+@source "../fesm2022/**/*.mjs";
 
 /* ===== Slot-token utility safelist =====
    Components consume role slot utilities (`bg-info-soft`, `text-info-fg`, …)

package/types/cdevhub-ngx-tw-aspect-ratio.d.ts

@@ -0,0 +1,40 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Sets the native CSS `aspect-ratio` property on its host element, standardizing
+ * the `aspect-[16/9]` pattern consumers otherwise hand-roll across cards,
+ * thumbnails, video, and image grids.
+ *
+ * The directive sets **only** `aspect-ratio` — it does not set `width`,
+ * `display`, or any other layout property (matching Tailwind's `aspect-*`
+ * utility). Block-level hosts already fill their container width; for replaced
+ * elements (`<img>`, `<video>`) pair it with `w-full` / `object-cover` so the
+ * box has a definite cross-axis size.
+ *
+ * Purely presentational: it adds no `role` or `aria-*` and leaves the host
+ * media's own accessibility (`alt`, `aria-*`, `title`) untouched.
+ *
+ * @example
+ * ```html
+ * <div twAspectRatio class="w-full bg-surface-muted"></div>
+ * <img twAspectRatio="16/9" class="w-full object-cover rounded-lg" [src]="thumb" alt="Preview" />
+ * <div [twAspectRatio]="4 / 3" class="w-full"></div>
+ * <video twAspectRatio="21:9" class="w-full" [src]="clip"></video>
+ * ```
+ */
+declare class AspectRatioDirective {
+    /**
+     * Sets the host's aspect ratio. Accepts a unitless number (e.g. `1.7777`) or a
+     * ratio string using `/` or `:` (e.g. `'16/9'` or `'16:9'`). The value is
+     * normalized to CSS `'<w> / <h>'` form (a bare number `n` becomes `'n / 1'`).
+     * Invalid or non-positive values fall back to the default. Defaults to a
+     * square (`1 / 1`).
+     */
+    readonly twAspectRatio: _angular_core.InputSignal<string | number>;
+    /** The coerced, CSS-valid `aspect-ratio` value applied to the host. */
+    readonly ratio: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AspectRatioDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AspectRatioDirective, "[twAspectRatio]", ["twAspectRatio"], { "twAspectRatio": { "alias": "twAspectRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { AspectRatioDirective };

package/types/cdevhub-ngx-tw-calendar.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Provider, InjectionToken, Type, OnInit, ModelSignal, InputSignal, TemplateRef, OutputEmitterRef, Signal, WritableSignal, EnvironmentProviders } from '@angular/core';
+import { Provider, InjectionToken, Type, OnInit, InputSignal, WritableSignal, TemplateRef, OutputEmitterRef, Signal, ModelSignal, EnvironmentProviders } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 import { RangeBehaviorConfig } from '@cdevhub/ngx-tw/core';
 import { FormValueControl, ValidationError, WithOptionalFieldTree, DisabledReason } from '@angular/forms/signals';
@@ -523,12 +523,14 @@ declare class CalendarComponent<M extends CalendarMode = 'single', D = Date, TOu
      */
     private readonly localStrategies;
     /** Selection mode (§5). Changing this at runtime clears the value and emits `modeChange`. */
-    readonly mode: ModelSignal<CalendarMode>;
+    readonly modeInput: InputSignal<CalendarMode>;
+    readonly mode: WritableSignal<CalendarMode>;
     /**
      * Consumer-bound value. Shape narrows by `M`: `D | null` for single,
      * `D[]` for multiple, `{ start; end }` for range.
      */
-    readonly value: ModelSignal<CalendarValue<M, D>>;
+    readonly valueInput: InputSignal<CalendarValue<M, D>>;
+    readonly value: WritableSignal<CalendarValue<M, D>>;
     /** Anchor date for the displayed view. Defaults to today on mount. */
     readonly startAt: InputSignal<D | null>;
     /** Minimum selectable date. */
@@ -826,14 +828,43 @@ declare class CalendarComponent<M extends CalendarMode = 'single', D = Date, TOu
     clearSelection(): void;
     /** Resets to initial state — value + view + active date per `resetBehavior`. Phase 3 extends this with form-reset integration. */
     reset(): void;
-    /** Revalidates constraints + cell filters (Phase 4 wires it). */
+    /**
+     * Re-runs validation against the current constraints and cell filters.
+     *
+     * Call this after mutating a constraint imperatively (rather than through an
+     * input binding), so the bound control's errors reflect the new rules.
+     */
     revalidate(): void;
-    /** Opens the overlay. Phase 10 wires the CDK overlay; inline mode is a no-op. */
+    /**
+     * Opens the overlay.
+     *
+     * @deprecated Not implemented. `tw-calendar` is inline-only today; the overlay
+     * is part of the phased v1 cutover. Use `tw-date-picker` or
+     * `tw-date-range-picker` for an overlay-mounted calendar. Throws in dev mode.
+     */
     open(): void;
-    /** Closes the overlay. */
+    /**
+     * Closes the overlay.
+     *
+     * @deprecated Not implemented — see {@link open}. Throws in dev mode.
+     */
     close(): void;
-    /** Toggles the overlay. */
+    /**
+     * Toggles the overlay.
+     *
+     * @deprecated Not implemented — see {@link open}. Throws in dev mode.
+     */
     toggle(): void;
+    /**
+     * Fails loudly in development for the unimplemented overlay API.
+     *
+     * These three shipped as silent no-ops with JSDoc that described them as
+     * working ("Closes the overlay."), which Compodoc rendered straight into the
+     * published API table. A consumer calling `calendar.open()` got no overlay, no
+     * error, and no clue. Dev-mode throw turns that into an immediate, explainable
+     * failure while leaving production builds untouched.
+     */
+    private warnOverlayUnsupported;
     /** Imperatively focuses the currently active cell. */
     focusActiveCell(): void;
     /** @internal */
@@ -917,7 +948,7 @@ declare class CalendarComponent<M extends CalendarMode = 'single', D = Date, TOu
     /** Locale-aware long-form date format used in announcements (e.g. "Wednesday, April 15, 2026"). */
     private formatDate;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent<any, any, any>, "tw-calendar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "disabledDaysOfWeek": { "alias": "disabledDaysOfWeek"; "required": false; "isSignal": true; }; "constraints": { "alias": "constraints"; "required": false; "isSignal": true; }; "minRangeLength": { "alias": "minRangeLength"; "required": false; "isSignal": true; }; "maxRangeLength": { "alias": "maxRangeLength"; "required": false; "isSignal": true; }; "maxSelections": { "alias": "maxSelections"; "required": false; "isSignal": true; }; "maxSelectionBehavior": { "alias": "maxSelectionBehavior"; "required": false; "isSignal": true; }; "errorAriaDescribedBy": { "alias": "errorAriaDescribedBy"; "required": false; "isSignal": true; }; "rangeClickBehavior": { "alias": "rangeClickBehavior"; "required": false; "isSignal": true; }; "rangeBehavior": { "alias": "rangeBehavior"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "monthColumns": { "alias": "monthColumns"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "resetBehavior": { "alias": "resetBehavior"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "intl": { "alias": "intl"; "required": false; "isSignal": true; }; }, { "mode": "modeChange"; "value": "valueChange"; "valueChange": "valueChange"; "selectionStart": "selectionStart"; "rangePreview": "rangePreview"; "selectionComplete": "selectionComplete"; "selectionRestart": "selectionRestart"; "selectionCleared": "selectionCleared"; "selectionLimitReached": "selectionLimitReached"; "presetChange": "presetChange"; "viewChange": "viewChange"; "activeDateChange": "activeDateChange"; "monthChange": "monthChange"; "yearChange": "yearChange"; "cellClick": "cellClick"; "cellHover": "cellHover"; "modeChange": "modeChange"; }, never, ["[twCalendarPresets]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent<any, any, any>, "tw-calendar", never, { "modeInput": { "alias": "mode"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "disabledDaysOfWeek": { "alias": "disabledDaysOfWeek"; "required": false; "isSignal": true; }; "constraints": { "alias": "constraints"; "required": false; "isSignal": true; }; "minRangeLength": { "alias": "minRangeLength"; "required": false; "isSignal": true; }; "maxRangeLength": { "alias": "maxRangeLength"; "required": false; "isSignal": true; }; "maxSelections": { "alias": "maxSelections"; "required": false; "isSignal": true; }; "maxSelectionBehavior": { "alias": "maxSelectionBehavior"; "required": false; "isSignal": true; }; "errorAriaDescribedBy": { "alias": "errorAriaDescribedBy"; "required": false; "isSignal": true; }; "rangeClickBehavior": { "alias": "rangeClickBehavior"; "required": false; "isSignal": true; }; "rangeBehavior": { "alias": "rangeBehavior"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "monthColumns": { "alias": "monthColumns"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "resetBehavior": { "alias": "resetBehavior"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "intl": { "alias": "intl"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "selectionStart": "selectionStart"; "rangePreview": "rangePreview"; "selectionComplete": "selectionComplete"; "selectionRestart": "selectionRestart"; "selectionCleared": "selectionCleared"; "selectionLimitReached": "selectionLimitReached"; "presetChange": "presetChange"; "viewChange": "viewChange"; "activeDateChange": "activeDateChange"; "monthChange": "monthChange"; "yearChange": "yearChange"; "cellClick": "cellClick"; "cellHover": "cellHover"; "modeChange": "modeChange"; }, never, ["[twCalendarPresets]"], true, never>;
 }
 
 /**

package/types/cdevhub-ngx-tw-code-block.d.ts

@@ -37,13 +37,14 @@ declare class CodeBlockHeaderDirective {
  * projection slot for filename / extra actions.
  *
  * @remarks
- * **`role="region"` ownership.** The outer host is a presentational container —
- * the inner `<pre tabindex="0" role="region" aria-label="...">` owns the
- * scrollable-content region semantics that screen readers and AXE care about.
- * Promoting the host to `role="region"` as well would double-announce the
- * landmark; the `<pre>` is the focusable, keyboard-reachable target, so the
- * region role belongs there. This matches APG guidance for scroll-region
- * widgets and Material's `pre`-as-region pattern.
+ * **Accessibility.** The inner `<pre tabindex="0" aria-label="...">` is the
+ * focusable, keyboard-reachable scroll surface; the host is presentational.
+ * The `<pre>` carries `aria-label` for SR users but no landmark role — a
+ * documentation page can mount many code blocks at once and ARIA's
+ * `landmark-unique` rule (axe best-practice) flags duplicate
+ * `region "<lang> code"` names. Consumers who want this block to act as a
+ * page landmark can wrap it in `<section aria-label="…">` with a unique
+ * name.
  */
 declare class CodeBlockComponent {
     /** The code string to display and copy to clipboard. */

package/types/cdevhub-ngx-tw-command-palette.d.ts

@@ -205,6 +205,13 @@ declare class CommandPaletteComponent {
     private setupFocusTrap;
     private destroyFocusTrap;
     private disposeOverlay;
+    /**
+     * Aborts an in-flight close, leaving the palette open.
+     *
+     * The overlay is still attached (only the detach is deferred), so this
+     * restores the focus trap that `closePalette` tore down up front.
+     */
+    private cancelPendingClose;
     private clearCloseTimer;
     private clearAnnounceTimer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandPaletteComponent, never>;

package/types/cdevhub-ngx-tw-date-picker.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, TemplateRef, Signal } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { TwSize, TwColor, TimePickerFormat, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
 export { TimePickerFormat } from '@cdevhub/ngx-tw/core';
 import { FormFieldControl } from '@cdevhub/ngx-tw/form-field';
@@ -72,14 +72,14 @@ interface DatePickerTimeConfig<D = Date> {
  * All date operations go through the injected `DateAdapter<D>`; call
  * `provideNativeDateAdapter()` in your app providers to bootstrap the default.
  */
-declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implements ControlValueAccessor, OnInit {
+declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implements ControlValueAccessor, Validator, OnInit {
     /** Id on the date-picker's input element. Auto-generated when not provided. Used by the form-field's `<label for>` attribute. */
     readonly idInput: _angular_core.InputSignal<string | undefined>;
-    /** Minimum selectable date. Typed input earlier than this sets `errorState` and the calendar disables the cell. Defaults to `null`. */
+    /** Minimum selectable date. Typed input earlier than this commits the value and marks the bound control invalid with `calendarMinDate`; the calendar disables the cell. Defaults to `null`. */
     readonly minDate: _angular_core.InputSignal<D | null>;
-    /** Maximum selectable date. Typed input later than this sets `errorState` and the calendar disables the cell. Defaults to `null`. */
+    /** Maximum selectable date. Typed input later than this commits the value and marks the bound control invalid with `calendarMaxDate`; the calendar disables the cell. Defaults to `null`. */
     readonly maxDate: _angular_core.InputSignal<D | null>;
-    /** Per-date predicate — return `false` to disable. Applied in both the calendar and the text-parse path. */
+    /** Per-date predicate — return `false` to disable. Applied in the calendar, the text-parse path, and the `calendarDisabledDate` validation error. */
     readonly dateFilter: _angular_core.InputSignal<DateFilterFn<D> | null>;
     /** Which calendar view opens first — `'day'`, `'month'`, or `'year'`. Defaults to `'day'`. */
     readonly startView: _angular_core.InputSignal<CalendarViewState>;
@@ -173,7 +173,7 @@ declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implemen
     private readonly injector;
     private readonly destroyRef;
     private readonly formField;
-    private readonly ngControl;
+    private ngControl;
     private readonly parentForm;
     private readonly parentFormGroup;
     private readonly defaultMatcher;
@@ -190,10 +190,31 @@ declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implemen
     readonly internalValue: _angular_core.WritableSignal<D | null>;
     /** @internal */
     readonly rawInputText: _angular_core.WritableSignal<string>;
-    /** @internal */
-    readonly parseError: _angular_core.WritableSignal<boolean>;
-    /** @internal */
-    readonly rangeError: _angular_core.WritableSignal<boolean>;
+    /**
+     * @internal The text the user typed that could not be parsed into a date,
+     * or `null` when the current entry parsed cleanly.
+     *
+     * This is the single source of truth for "the typed text is bad". It drives
+     * both the visual error state (via `parseError` below) and the form error
+     * (via `validate()`, which feeds it to `calendarValidator` as
+     * `lastInvalidFormValue`). Keeping one field instead of a boolean flag plus a
+     * separate string is what stops the two from disagreeing.
+     */
+    private readonly unparseableText;
+    /** @internal Whether the current input text failed to parse. */
+    readonly parseError: Signal<boolean>;
+    /**
+     * @internal Whether the committed value violates `minDate` / `maxDate` /
+     * `dateFilter`.
+     *
+     * Derived, not a flag. An out-of-range entry is committed to the form (so the
+     * control holds what the user typed and is *invalid*, rather than silently
+     * keeping an older value), which means the value-sync effect below runs and
+     * would immediately clear any manually-set flag. Deriving it also keeps the
+     * error correct when the consumer moves a constraint after the fact, which a
+     * flag set once at commit time cannot do.
+     */
+    readonly rangeError: Signal<boolean>;
     /** @internal */
     readonly focusedSignal: _angular_core.WritableSignal<boolean>;
     private readonly cvaDisabled;
@@ -305,6 +326,11 @@ declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implemen
     registerOnChange(fn: (value: D | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    private validatorOnChange;
+    /** @internal */
+    validate(control: AbstractControl): ValidationErrors | null;
+    /** @internal */
+    registerOnValidatorChange(fn: () => void): void;
     /** @internal */
     setDescribedByIds(ids: string[]): void;
     /** @internal */