ngwr 13.0.1 → 14.0.1

package/types/ngwr-utils.d.ts

@@ -465,6 +465,38 @@ declare function hasModifier(event: KeyboardEvent): boolean;
  * keys like `Backspace` or `Tab`.
  */
 declare function isPrintableKey(event: KeyboardEvent): boolean;
+/**
+ * True while an input method is composing — the key belongs to the IME, not to
+ * your handler. **Return early on it in every `keydown` handler that reads
+ * Enter, Escape or an arrow on, or above, a field that accepts typed text.**
+ *
+ * A Japanese or Chinese user reaches every character through a conversion. From
+ * `compositionstart` until `compositionend` a candidate window is open, and
+ * those keys are how it is driven: Enter accepts the candidate, Escape cancels
+ * the conversion back to kana, the arrows walk the candidate list. A component
+ * that acts on them anyway takes the key away from the IME mid-word — the
+ * overlay closes instead of the candidate window, and the half-composed reading
+ * the user was still choosing between is gone with it.
+ *
+ * Both halves of the test are needed. `isComposing` is the standard flag, but
+ * Safari fires `compositionend` *before* the `keydown` of the Enter that commits
+ * a candidate, so that one arrives with `isComposing === false` and only the
+ * legacy `keyCode` of `229` — the sentinel every engine sets on a key it handed
+ * to the input method — to say where it came from.
+ *
+ * `keydown` is the whole scope. It does NOT answer "is a composition in
+ * progress" for an `input` or `blur` handler: on the committing keystroke the
+ * two disagree by design. A component that needs the state *between* events
+ * tracks it with the `compositionstart` / `compositionend` pair instead.
+ *
+ * ```ts
+ * protected onKeydown(event: KeyboardEvent): void {
+ *   if (isComposing(event)) return;
+ *   // …
+ * }
+ * ```
+ */
+declare function isComposing(event: KeyboardEvent): boolean;
 
 /**
  * @license
@@ -492,5 +524,5 @@ declare function isPrintableKey(event: KeyboardEvent): boolean;
  */
 declare function badgeLog(badgeText: string, color: string, message: unknown): void;
 
-export { KEYS, badgeLog, clamp, debounce, getFocusableElements, getRootFontSize, hasModifier, isDefined, isNonEmptyArray, isObservable, isPrintableKey, isSafeCssValue, noop, numAttr, randomId, resolveCssSize, round, throttle, trapFocus };
+export { KEYS, badgeLog, clamp, debounce, getFocusableElements, getRootFontSize, hasModifier, isComposing, isDefined, isNonEmptyArray, isObservable, isPrintableKey, isSafeCssValue, noop, numAttr, randomId, resolveCssSize, round, throttle, trapFocus };
 export type { Maybe, ResolveCssSizeOptions, ResolvedCssSize, SafeAny, WrDebouncedFn, WrKey, WrThrottledFn };

package/types/ngwr-version.d.ts

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.
  */
-declare const NGWR_VERSION = "13.0.1";
+declare const NGWR_VERSION = "14.0.1";
 
 /**
  * @license

package/types/ngwr-window-testing.d.ts

@@ -1,5 +1,5 @@
 import { BaseHarnessFilters, ContentContainerComponentHarness, HarnessPredicate, ComponentHarness } from '@angular/cdk/testing';
-import { WrWindowState } from 'ngwr/window';
+import { WrWindowState, WrWindowChromeSize } from 'ngwr/window';
 
 /**
  * @license
@@ -101,8 +101,16 @@ declare class WrWindowHarness extends ContentContainerComponentHarness {
      * invariant — see {@link hasMinimizeButton}.
      */
     getOs(): Promise<string>;
-    /** The title-bar density — `normal` or `compact`. */
-    getChromeSize(): Promise<string>;
+    /**
+     * The title-bar density — `sm` or `md`.
+     *
+     * Typed as the union rather than `string`, so a value added to
+     * `WrWindowChromeSize` fails this method's compile instead of quietly
+     * answering `md` for it. Only `sm` carries a modifier class: `md` is the
+     * default and paints from the base block, so its answer is the absence of
+     * the other one.
+     */
+    getChromeSize(): Promise<WrWindowChromeSize>;
     /**
      * Where the window is and how big, in CSS pixels.
      *

package/types/ngwr-window.d.ts

@@ -14,11 +14,18 @@ import * as ngwr_i18n from 'ngwr/i18n';
 /**
  * Chrome bar density.
  *
- * - `normal` (default) — 2.25rem bar, regular title font.
- * - `compact` — 1.625rem bar, smaller title + tighter action dots; useful
- *   for utility / docked panels where vertical space is precious.
+ * - `md` (default) — 2.25rem bar, regular title font.
+ * - `sm` — 1.625rem bar, smaller title + tighter action dots; useful for
+ *   utility / docked panels where vertical space is precious.
+ *
+ * Spelled `sm` / `md` rather than `compact` / `normal` because this is a
+ * density, and v8 renamed every density value in the library to the `sm` /
+ * `md` / `lg` scale. This union was missed by that migration and kept the
+ * retired vocabulary for three majors; `migration-v14` finishes the job.
+ * `WrWindowState`'s own `'normal'` is NOT this word — a window state is not a
+ * size — and stays as it is.
  */
-type WrWindowChromeSize = 'compact' | 'normal';
+type WrWindowChromeSize = 'sm' | 'md';
 
 /**
  * @license

package/waves/styles/_dark.scss

@@ -0,0 +1,19 @@
+// Dark theme.
+//
+// Keyed on `theme.dark-selector()`, never on a literal `[data-theme='dark']`.
+// The attribute is renameable — `@use 'ngwr' with ($theme-attribute: '…')`
+// alongside `provideWrTheme({ attribute: '…' })` — and a hand-written literal
+// misses the rename in both directions: this block stops firing under the
+// configured name, and it keeps firing under `data-theme`, which is the
+// attribute a foreign design system owns and the rename exists to escape.
+//
+// It lives outside the `styleUrl` closure for the same reason. A component
+// stylesheet is compiled when the LIBRARY is built, where `$theme-attribute` can
+// only ever be the default, and Angular appends that copy after the app's linked
+// sheet — so an inlined literal would not merely be dead, it would outrank the
+// correctly-named rule beside it.
+@use '../../theme/styles' as theme;
+
+#{theme.dark-selector()} .wr-waves {
+  --wr-waves-line-color: rgb(255 255 255 / 14%);
+}

package/waves/styles/_index.scss

@@ -11,5 +11,10 @@
 // box-sizing reset into the compiled component styles, which ng-packagr then
 // embeds in the FESM bundle as a string. `waves.scss` forwards `_rules`
 // instead, so it carries this component's own CSS and nothing else.
+//
+// `_dark` is loaded from HERE for a second reason: its selector is built out of
+// `$theme-attribute`, which only a stylesheet compiled by the consuming app can
+// configure, so a copy inside the bundle could only ever carry the default name.
 @use '../../theme/styles';
 @forward 'rules';
+@forward 'dark';

package/waves/styles/_rules.scss

@@ -40,6 +40,3 @@
   }
 }
 
-[data-theme='dark'] .wr-waves {
-  --wr-waves-line-color: rgb(255 255 255 / 14%);
-}

package/window/styles/_index.scss

@@ -69,7 +69,7 @@
 
   // Compact title bar — useful for utility / docked panels where every
   // pixel of vertical space matters.
-  &--chrome-compact {
+  &--chrome-sm {
     --wr-window-chrome-height: 1.625rem;
     --wr-window-title-size: var(--wr-text-xs);
     --wr-window-action-size: 1.125rem;