@ethlete/core 5.0.0-next.14 → 5.0.0-next.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/core",
-  "version": "5.0.0-next.14",
+  "version": "5.0.0-next.15",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {

package/types/ethlete-core.d.ts

@@ -9,7 +9,8 @@ import { Placement, OffsetOptions, Padding } from '@floating-ui/dom';
 import { MatchListView, ParticipantViewUnion, MatchRankingView, StageType } from '@ethlete/types';
 import * as _angular_platform_browser from '@angular/platform-browser';
 import { FormGroup, AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
-import { Data, Params, Event as Event$1 } from '@angular/router';
+import * as _angular_router from '@angular/router';
+import { Data, Params } from '@angular/router';
 
 declare const ANIMATABLE_TOKEN: InjectionToken<AnimatableDirective>;
 type AnimationEndEvent = {
@@ -81,6 +82,17 @@ declare class AnimatedLifecycleDirective implements AfterViewInit {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AnimatedLifecycleDirective, "[etAnimatedLifecycle]", ["etAnimatedLifecycle"], { "skipNextEnter": { "alias": "skipNextEnter"; "required": false; "isSignal": true; }; }, { "stateChange": "stateChange"; "skipNextEnter": "skipNextEnterChange"; }, never, never, true, [{ directive: typeof AnimatableDirective; inputs: {}; outputs: {}; }]>;
 }
 
+/**
+ * Cascades hover/active-driven color DOWN to descendants explicitly marked with
+ * `ColorInteractiveDirective` — this element does not color itself. Use it when a wrapper should
+ * expand a nested control's hit/visual area (e.g. clicking a checkbox's label should light up the
+ * checkbox itself), never to give a wrapper its own interactive coloring — that's
+ * `ColorInteractiveDirective`.
+ *
+ * Does nothing unless at least one descendant carries `ColorInteractiveDirective` — check for
+ * that before adding this. It was mistakenly added to a component with no such descendant once
+ * already, where it did nothing but was confusing to read.
+ */
 declare class ColorInteractiveContainerDirective {
     private styleManager;
     constructor();
@@ -88,11 +100,38 @@ declare class ColorInteractiveContainerDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ColorInteractiveContainerDirective, "[etColorInteractiveContainer]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Marks a descendant as NOT counting toward an ancestor's `ColorInteractiveDirective`
+ * `:hover`/`:active` reaction (via the `:has()` guard in color-interactive-styles.component.css).
+ * Use it for content that's incidentally inside an interactive ancestor but isn't part of what
+ * makes that ancestor interactive — e.g. a hint/error block sitting inside a form field's frame.
+ *
+ * This only suppresses the ancestor's OWN reaction to hovering/pressing the excluded element — it
+ * has no effect on custom-property inheritance into descendants past the excluded element. If
+ * what you actually need is "stop my own cosmetic styling from reacting to a parent's unrelated
+ * interaction," this is the wrong tool; that's the class of bug `ColorInteractiveHasFocusDirective`
+ * used to have (see its own comment).
+ */
 declare class ColorInteractiveExcludeDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorInteractiveExcludeDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ColorInteractiveExcludeDirective, "[etColorInteractiveExclude]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Tints `--et-theme-color-primary-*` etc. only when a descendant genuinely has `:focus-visible`
+ * (`:has(:focus-visible)`) — never on mouse `:hover`/`:active`. Use this for a wrapper (like a
+ * form field's frame) that should show the theme color while its control is focused, but must
+ * NOT react to incidental mouse interaction with unrelated nested widgets (a toolbar button, a
+ * rendered link) that happen to live inside the same wrapper.
+ *
+ * Deliberately does NOT also carry `ColorInteractiveDirective`'s `et-color-interactive` class:
+ * that class's plain `:hover`/`:active` rules locally override the same (inheriting)
+ * `--et-theme-color-primary-rgb`, so anything bubbling up from ANYWHERE in the subtree would
+ * leak the transient hover/press color into every descendant reading it for unrelated cosmetics —
+ * exactly the bug this directive's only consumer (form-field) shipped once, before the two
+ * behaviors were split apart. If you need the plain hover/active reaction too, add
+ * `ColorInteractiveDirective` explicitly and make sure you actually want both.
+ */
 declare class ColorInteractiveHasFocusDirective {
     private styleManager;
     constructor();
@@ -100,6 +139,19 @@ declare class ColorInteractiveHasFocusDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ColorInteractiveHasFocusDirective, "[etColorInteractiveHasFocus]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Makes an element react to ITS OWN `:hover`/`:active`/`:focus-visible`/`[disabled]` by tinting
+ * `--et-theme-color-primary-*`/`-on-primary-*`/`-ink-*` with the current color theme. Use this on
+ * a single, self-contained interactive element — a button, a checkbox, a segmented button.
+ *
+ * Do NOT apply this to a wrapper that also contains OTHER, independently-interactive elements
+ * (e.g. a toolbar with its own buttons, or a form-field's control slot). These are ordinary
+ * inheriting CSS custom properties, so a descendant reading them for its own cosmetics (a caret
+ * color, a link color) gets swept along whenever ANYTHING inside the wrapper is hovered or
+ * clicked — not just when the wrapper itself is the thing being interacted with. That exact bug
+ * shipped once already; see ColorInteractiveContainerDirective/ColorInteractiveHasFocusDirective
+ * for the shapes that avoid it.
+ */
 declare class ColorInteractiveDirective {
     private styleManager;
     constructor();
@@ -311,6 +363,17 @@ declare const injectSurfaceContextTracker: {
     (options: _angular_core.InjectOptions): SurfaceContextTracker | null;
 };
 
+/**
+ * Same shape as `ColorInteractiveDirective` — reacts to its own `:hover`/`:focus-visible`/
+ * `:active`/`[disabled]` — but drives `--et-surface-interaction-*`, a neutral/muted tint, instead
+ * of the ambient color theme. Use it for chrome-level interaction feedback that shouldn't borrow
+ * the page's brand color (a tab trigger's hover state, a toggle button that should look neutral
+ * until it's actually active — see `ButtonDirective`'s `mutedUntilPressed`).
+ *
+ * Has no container/exclude/has-focus variants: it has no descendant-cascading CSS at all, so
+ * applying it to a wrapper with independently-interactive children is safe by construction —
+ * unlike `ColorInteractiveDirective`, there's no bubbling-leak failure mode to worry about here.
+ */
 declare class SurfaceInteractiveDirective {
     private styleManager;
     constructor();
@@ -2042,7 +2105,7 @@ type InjectUtilTransformConfig<In, Out> = {
 };
 declare const transformOrReturn: <In, Out>(src: Signal<In>, config?: InjectUtilTransformConfig<In, Out>) => Signal<Out>;
 /** Inject the current router event */
-declare const injectRouterEvent: () => Signal<Event$1>;
+declare const injectRouterEvent: () => Signal<_angular_router.Event>;
 /**
  * Signal that indicates whether the router has been initialized.
  * The router is considered initialized once the first NavigationEnd event with an id different than -1 has been emitted.