@ethlete/core 5.0.0-next.23 → 5.0.0-next.25

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @ethlete/core
 
+## 5.0.0-next.25
+
+### Patch Changes
+
+- [#3017](https://github.com/ethlete-io/ethdk/pull/3017) [`83853d6`](https://github.com/ethlete-io/ethdk/commit/83853d6138bc7d0a481b5b982c2a7137b9cc65e6) Thanks [@github-actions](https://github.com/apps/github-actions)! - Overlay: anchored overlays with `autoCloseIfReferenceHidden` now close instantly when their anchor is removed, instead of jumping to the viewport corner and animating out from there.
+
+## 5.0.0-next.24
+
+### Minor Changes
+
+- [#3016](https://github.com/ethlete-io/ethdk/pull/3016) [`2f18e43`](https://github.com/ethlete-io/ethdk/commit/2f18e4344759dbbcd17ba0dbeca138f1f7043cdf) Thanks [@github-actions](https://github.com/apps/github-actions)! - Anchored overlays: the `shift` option now also accepts `{ crossAxis?: boolean }` in addition to a boolean. With `crossAxis: true`, an overlay that fits on neither side of its reference is shifted along the placement's cross axis to stay inside the viewport (it may then overlap the reference) instead of overflowing off-screen.
+
+  Menus enable this by default: a nested submenu near the viewport edge first flips to the other side and, when neither side fits, slides over its parent menu — matching native OS menu behavior — instead of being cut off by the viewport.
+
+  The `size` middleware (`autoResize`) now runs after `shift` instead of before it, so `--et-overlay-max-width` / `--et-overlay-max-height` are measured from the pane's shifted position. Previously a cross-axis-shifted pane had its max size capped to the unshifted leftover space, squeezing e.g. a submenu to a sliver instead of letting it keep its width while overlapping its parent.
+
+### Patch Changes
+
+- [#3016](https://github.com/ethlete-io/ethdk/pull/3016) [`2f18e43`](https://github.com/ethlete-io/ethdk/commit/2f18e4344759dbbcd17ba0dbeca138f1f7043cdf) Thanks [@github-actions](https://github.com/apps/github-actions)! - Animations: fix overlays getting stuck in the DOM in an invisible but click-blocking state when their leave transition never reported completion.
+
+  When several anchored overlays close at once (e.g. clicking an item inside a nested menu closes the whole menu tree), destroying an ancestor pane shifts the anchored position of a still-leaving descendant. The browser then cancels and restarts the running transition, so its end event arrives either flagged as cancelled or under a stale transition id — and the animated lifecycle waited forever for an event that could no longer arrive, leaving the pane orphaned at `opacity: 0` while still intercepting pointer events. The lifecycle now treats the transition as settled once no animation is running anymore, matching the fallback the interrupted-transition path already had, so the overlay is torn down reliably.
+
+- [#3016](https://github.com/ethlete-io/ethdk/pull/3016) [`3b359e5`](https://github.com/ethlete-io/ethdk/commit/3b359e52c5efa1cd9b0e79216fc578525aafa8e8) Thanks [@github-actions](https://github.com/apps/github-actions)! - Tailwind surface & color theme generators: fix the dynamic `--color-*-surface-*` /
+  `--color-*-theme-*` variables not resolving per scope. They were emitted only inside
+  `@theme`, which lands on `:root`, so `rgb(var(--<runtime>-surface-background))` resolved
+  once against the root surface and inherited that concrete color into descendants. As a
+  result `bg-<prefix>-surface-*` / `bg-<prefix>-theme-*` utilities ignored nested
+  `.<runtime>-surface--*` / `.<runtime>-color--*` scopes (e.g. an elevated surface would
+  still paint the root background). The dynamic colors are now also re-declared on each
+  surface/color selector in the alias block, so the utilities resolve against the nearest
+  scope while still being generated from `@theme`.
+
 ## 5.0.0-next.23
 
 ### Major Changes

package/README.md

@@ -1,7 +1,33 @@
-# core
+# @ethlete/core
 
-This library was generated with [Nx](https://nx.dev).
+Angular framework primitives for the Ethlete SDK — signal-based DOM observation, the surface/color theming systems, the animation and overlay engines, and a toolbox of directives, pipes and utilities. Component-less; every other `@ethlete/*` UI library builds on it.
 
-## Running unit tests
+## Installation
 
-Run `nx test core` to execute the unit tests.
+```bash
+yarn add @ethlete/core
+```
+
+## Usage
+
+```ts
+import { injectCurrentBreakpoint, signalHostElementDimensions } from '@ethlete/core';
+
+@Component({
+  /* … */
+})
+export class ExampleComponent {
+  breakpoint = injectCurrentBreakpoint();
+  dimensions = signalHostElementDimensions();
+}
+```
+
+## Documentation
+
+Full guides on the docs site:
+
+- [Overview](https://ethlete-sdk-docs.web.app/core/)
+- [Element signals](https://ethlete-sdk-docs.web.app/core/element-signals) & [signal utilities](https://ethlete-sdk-docs.web.app/core/signal-utils)
+- [Theming](https://ethlete-sdk-docs.web.app/core/theming)
+- [Animations](https://ethlete-sdk-docs.web.app/core/animations) & [overlay runtime](https://ethlete-sdk-docs.web.app/core/overlay-runtime)
+- [Providers](https://ethlete-sdk-docs.web.app/core/providers), [SEO](https://ethlete-sdk-docs.web.app/core/seo) & [utilities](https://ethlete-sdk-docs.web.app/core/utilities)

package/fesm2022/ethlete-core.mjs

@@ -3634,7 +3634,21 @@ class AnimatedLifecycleDirective {
                 this.removeClass(fromClass);
                 this.addClass(toClass);
             }
-        }), switchMap(() => this.animatable.animationEnd$), filter((e) => this.state$.value === expectedState && !e.cancelled && e.transitionId === transitionId), tap(onComplete), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
+        }), switchMap(() => this.animatable.animationEnd$), filter(() => this.state$.value === expectedState), switchMap((e) => {
+            if (!e.cancelled && e.transitionId === transitionId) {
+                return of(true);
+            }
+            // The batch ended cancelled or under a different id — e.g. the browser cancelled and
+            // restarted a running transition mid-flight (an anchored overlay whose ancestor pane got
+            // destroyed) or a foreign transition on the same element finished. If nothing is
+            // animating anymore the expected end event can never arrive, so treat the transition as
+            // settled instead of waiting forever (mirrors the fallback in handleInterruptedTransition).
+            return this.animatable.isAnimating$.pipe(take(1), tap((stillAnimating) => {
+                if (!stillAnimating) {
+                    this.debugLog(`${transitionId}: completes via fallback (batch id "${e.transitionId ?? 'none'}", cancelled ${e.cancelled})`);
+                }
+            }), map((stillAnimating) => !stillAnimating));
+        }), filter((settled) => settled && this.state$.value === expectedState), tap(onComplete), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
     handleInterruptedTransition(config) {
@@ -4583,6 +4597,15 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
             fallbackPlacements: strategy.fallbackPlacements ?? undefined,
             fallbackAxisSideDirection: 'start',
         }));
+        if (strategy.shift !== false) {
+            middleware.push(shift({
+                crossAxis: typeof strategy.shift === 'object' ? (strategy.shift.crossAxis ?? false) : false,
+                limiter: limitShift(),
+                padding: strategy.viewportPadding ?? 8,
+            }));
+        }
+        // size must run AFTER shift so the available space is measured from the shifted position —
+        // otherwise a cross-axis-shifted pane gets its max size capped to the unshifted leftover space
         if (strategy.autoResize) {
             middleware.push(size({
                 padding: strategy.viewportPadding ?? 8,
@@ -4594,12 +4617,6 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
                 },
             }));
         }
-        if (strategy.shift !== false) {
-            middleware.push(shift({
-                limiter: limitShift(),
-                padding: strategy.viewportPadding ?? 8,
-            }));
-        }
         if (arrowElement) {
             middleware.push(arrow({
                 element: arrowElement,
@@ -4616,9 +4633,24 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
             strategy: 'absolute',
             middleware,
         }).then(({ x, y, placement, middlewareData }) => {
+            // A detached reference reports a zeroed rect, so floating-ui positions the pane at the
+            // viewport's top-left. Tear the overlay down (without animating from that bogus position)
+            // before applying the transform when auto-close is on, and otherwise leave the pane where it
+            // last was rather than snapping it to the corner.
+            if (middlewareData.hide?.referenceHidden) {
+                if (strategy.autoCloseIfReferenceHidden) {
+                    overlayRef.close(undefined, 'reference-detached');
+                    return;
+                }
+                if (strategy.autoHide) {
+                    renderer.setStyle(paneElement, { visibility: 'hidden' });
+                }
+                return;
+            }
             renderer.setStyle(paneElement, {
                 transform: `translate3d(${x}px, ${y}px, 0)`,
                 width: mirrorWidthElement ? `${mirrorWidthElement.offsetWidth}px` : null,
+                visibility: null,
             });
             // exposed so animations can compose their transforms with the anchored position
             renderer.setCssProperties(paneElement, {
@@ -4629,19 +4661,6 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
             if (arrowElement && middlewareData.arrow) {
                 renderer.setCssProperty(arrowElement, '--et-floating-arrow-translate', `translate3d(${middlewareData.arrow.x ?? 0}px, ${middlewareData.arrow.y ?? 0}px, 0)`);
             }
-            if (middlewareData.hide?.referenceHidden) {
-                if (strategy.autoCloseIfReferenceHidden) {
-                    overlayRef.close(undefined, 'api');
-                    return;
-                }
-                renderer.setStyle(paneElement, {
-                    visibility: strategy.autoHide ? 'hidden' : null,
-                });
-                return;
-            }
-            renderer.setStyle(paneElement, {
-                visibility: null,
-            });
         });
     });
     return () => {
@@ -4896,7 +4915,9 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
             }
             const lifecycle = getAnimatedLifecycle(componentRef);
             animationDebugLog(`runtime ${config.id}`, `close requested (source "${closeEvent.source}", lifecycle state "${lifecycle?.state$.value ?? 'none'}", delegate ${config.animationDelegate?.leave ? 'yes' : 'no'})`);
-            if (!lifecycle) {
+            // The reference element is gone — there is nothing left to animate away from, so tear the
+            // overlay down synchronously instead of playing a leave transition from a stale position.
+            if (!lifecycle || closeEvent.source === 'reference-detached') {
                 destroyMountedOverlay(closeEvent);
                 return;
             }