@ethlete/core 5.0.0-next.27 → 5.0.0-next.29

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @ethlete/core
 
+## 5.0.0-next.29
+
+### Minor Changes
+
+- [`2fca323`](https://github.com/ethlete-io/ethdk/commit/2fca323a6beac0299b8e0ec6724fffd4149ad7cd) Thanks [@TomTomB](https://github.com/TomTomB)! - `injectAnimatedBlockSize` can now animate the inline axis too via the new `axes` option (`['block' | 'inline']`, static or signal-based; default `['block']` as before). Used by the cascader panel to grow/shrink its width as columns drill in and out.
+
+- [`4b7cf51`](https://github.com/ethlete-io/ethdk/commit/4b7cf51a6f68cdaf364169945586fedc5621cad6) Thanks [@TomTomB](https://github.com/TomTomB)! - Theme generators: pick the default theme at generation time — `--defaultTheme=<name>` on `tailwind-4-color-theme` and `--defaultLightTheme=<name>` / `--defaultDarkTheme=<name>` on `tailwind-4-surface-theme` override any `isDefault` flags in the definitions, so apps sharing one theme definition set (e.g. in a monorepo) can each generate a different default.
+
+### Patch Changes
+
+- [`ddb3413`](https://github.com/ethlete-io/ethdk/commit/ddb3413c2673a4f2f513598a208f376b36b7535b) Thanks [@TomTomB](https://github.com/TomTomB)! - Grid items can now be moved with touch: `[etDragHandle]` sets `touch-action: none` on its host while enabled (the browser was claiming touch pointermoves for scrolling and cancelling the gesture), and read-only grids keep normal touch scrolling.
+
+- [`06377b6`](https://github.com/ethlete-io/ethdk/commit/06377b6312fd32c7d1f497816fa91a655bf72d19) Thanks [@TomTomB](https://github.com/TomTomB)! - Overlay: a color theme provided on the app root component (e.g. `ProvideColorDirective` via `hostDirectives` plus `forceColor()`) now propagates into overlays even when they are opened without a `viewContainerRef`, and updates reactively while the overlay is open.
+
+## 5.0.0-next.28
+
+### Minor Changes
+
+- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`9431073`](https://github.com/ethlete-io/ethdk/commit/9431073bb693aa10bbb84d5196597cb2c4b7463f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Overlays and menus now open on insecure origins (plain-HTTP pages on a LAN IP, not just `localhost`/HTTPS). Id generation used `crypto.randomUUID()`, which is `undefined` outside a secure context, so opening any dialog, sheet, anchored overlay or menu threw and only the backdrop appeared. A new `randomId()` helper in `@ethlete/core` uses `crypto.randomUUID()` when available and falls back to `getRandomValues` otherwise.
+
+- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`9431073`](https://github.com/ethlete-io/ethdk/commit/9431073bb693aa10bbb84d5196597cb2c4b7463f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Rich text editor: the link flow is now a responsive popover (arrow-anchored on wider screens, a keyboard-pinned top sheet on touch) to edit a link's text and URL, with an open-in-new-tab toggle — replacing the browser `prompt()`. New-tab links persist through the Markdown value as raw HTML (`<a target="_blank" rel="noopener noreferrer">`); ordinary links stay `[text](url)`. `htmlToMarkdown` / `markdownToHtml` in `@ethlete/core` now round-trip `target="_blank"` anchors (sanitized href + forced `rel`). After applying a link the caret moves just past it, with a trailing space added when the link ends the line.
+
+### Patch Changes
+
+- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`49591f4`](https://github.com/ethlete-io/ethdk/commit/49591f4e529552fde07ef88b9754bf7c0cd91a3b) Thanks [@github-actions](https://github.com/apps/github-actions)! - `injectAnimatedBlockSize`: growing panels (menu, select) no longer flash at their final size for one frame before the resize animation plays — the animation now starts inside the `ResizeObserver` callback, before the browser paints the new layout.
+
+- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`d262f59`](https://github.com/ethlete-io/ethdk/commit/d262f596a4f0e3dda315447d0173cba301237c01) Thanks [@github-actions](https://github.com/apps/github-actions)! - `htmlToMarkdown`: boundary whitespace inside bold/italic/strikethrough now serializes outside the delimiters (`<strong> x</strong>` → ` **x**` instead of the invalid `** x**`).
+
+- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`00b7c33`](https://github.com/ethlete-io/ethdk/commit/00b7c337e5ae0ac1bfc7186237b1ac2879eb018d) Thanks [@github-actions](https://github.com/apps/github-actions)! - Theming: overlay panes (menu, select) now resolve their color context through passive providers and apply it before the first painted frame.
+  - `ProvideColorDirective` gains `resolvedColor` — the color that actually applies at the provider's location, falling through passive providers like the CSS cascade does. `syncWithProvider` uses it, so a passive in-between provider (e.g. a form field's) no longer erases the theme inside a detached overlay pane.
+  - The menu and select panels install the context sync during construction instead of in an effect, eliminating a wrong-theme flash during the enter animation.
+
 ## 5.0.0-next.27
 
 ### Minor Changes

package/fesm2022/ethlete-core.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, RendererFactory2, RendererStyleFlags2, isSignal, DOCUMENT, signal, linkedSignal, isDevMode, computed, afterNextRender, effect, NgZone, untracked, EnvironmentInjector, runInInjectionContext, Injector, booleanAttribute, numberAttribute, PLATFORM_ID, ApplicationRef, createComponent, model, ViewContainerRef, input, output, Pipe, ViewEncapsulation, Component } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
-import { Subject, BehaviorSubject, debounceTime, combineLatest, map, merge, fromEvent, filter, tap, switchMap, startWith, of, timer, takeUntil, pairwise, distinctUntilChanged, take, Observable, concatMap, EMPTY, concat, defer, exhaustMap, share } from 'rxjs';
+import { Subject, BehaviorSubject, debounceTime, combineLatest, map, merge, fromEvent, filter, tap, switchMap, startWith, of, defer, from, catchError, timer, takeUntil, pairwise, distinctUntilChanged, take, Observable, concatMap, EMPTY, concat, exhaustMap, share } from 'rxjs';
 import { FormGroup, FormArray, FormControl } from '@angular/forms';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import { coerceElement } from '@angular/cdk/coercion';
@@ -132,6 +132,29 @@ const createComponentId = (prefix) => {
     componentIds.set(prefix, id + 1);
     return `${prefix}-${id}`;
 };
+let randomIdFallbackCounter = 0;
+/**
+ * A unique id string. Uses `crypto.randomUUID()` when available, but falls back gracefully when it is
+ * not — crucially in **insecure contexts** (a plain-HTTP page served from a LAN IP, not `localhost`),
+ * where `crypto.randomUUID` is `undefined`. Calling it there throws, so anything using it during e.g.
+ * an overlay/menu open would break on such hosts. Prefer this over `crypto.randomUUID()` directly.
+ */
+const randomId = () => {
+    const cryptoObj = typeof globalThis !== 'undefined' ? globalThis.crypto : undefined;
+    if (typeof cryptoObj?.randomUUID === 'function') {
+        return cryptoObj.randomUUID();
+    }
+    // `getRandomValues` is available even in insecure contexts — build an RFC-4122-ish v4 id from it.
+    if (typeof cryptoObj?.getRandomValues === 'function') {
+        const bytes = Array.from(cryptoObj.getRandomValues(new Uint8Array(16)));
+        bytes[6] = ((bytes[6] ?? 0) & 0x0f) | 0x40;
+        bytes[8] = ((bytes[8] ?? 0) & 0x3f) | 0x80;
+        const hex = bytes.map((byte) => (byte ?? 0).toString(16).padStart(2, '0'));
+        return `${hex.slice(0, 4).join('')}-${hex.slice(4, 6).join('')}-${hex.slice(6, 8).join('')}-${hex.slice(8, 10).join('')}-${hex.slice(10, 16).join('')}`;
+    }
+    // last resort: no Web Crypto at all — a session-unique (not cryptographic) id is enough for DOM ids
+    return `et-id-${(randomIdFallbackCounter++).toString(36)}-${Date.now().toString(36)}`;
+};
 
 const createDestroy = () => {
     assertInInjectionContext(createDestroy);
@@ -360,32 +383,23 @@ const Validators = {
     ValidateAtLeastOneRequired,
 };
 
-const copyToClipboard = async (text) => {
+const copyToClipboard = (text) => defer(() => {
     if (typeof navigator === 'undefined' || typeof document === 'undefined') {
-        return false;
+        return of(false);
     }
     if (navigator.clipboard) {
-        try {
-            await navigator.clipboard.writeText(text);
-            return true;
-        }
-        catch {
-            // The async Clipboard API can be blocked (missing permission, insecure context) — try the legacy path.
-        }
+        return from(navigator.clipboard.writeText(text)).pipe(map(() => true), 
+        // The async Clipboard API can be blocked (missing permission, insecure context) — try the legacy path.
+        catchError(() => of(copyToClipboardViaExecCommand(text))));
     }
-    return copyToClipboardViaExecCommand(text);
-};
-const readFromClipboard = async () => {
+    return of(copyToClipboardViaExecCommand(text));
+});
+const readFromClipboard = () => defer(() => {
     if (typeof navigator === 'undefined' || !navigator.clipboard) {
-        return null;
-    }
-    try {
-        return await navigator.clipboard.readText();
+        return of(null);
     }
-    catch {
-        return null;
-    }
-};
+    return from(navigator.clipboard.readText()).pipe(catchError(() => of(null)));
+});
 const copyToClipboardViaExecCommand = (text) => {
     const previouslyFocusedElement = document.activeElement;
     const textarea = document.createElement('textarea');
@@ -1318,14 +1332,21 @@ const injectScrollbarDimensions = memoizeSignal(() => {
 });
 
 /**
- * Smoothly animates an element's `block-size` when its content changes size (e.g. a list filtering,
- * a loading state resolving). Set up once in an injection context; it observes the given content
- * element(s) and animates the host from its previous height to its new natural height.
+ * Smoothly animates an element's `block-size` (and optionally `inline-size`, via `axes`) when its
+ * content changes size (e.g. a list filtering, a loading state resolving, a column being added).
+ * Set up once in an injection context; it observes the given content element(s) and animates the
+ * host from its previous size to its new natural size.
  *
- * Robustness notes: the baseline height is captured on the first render (via `afterNextRender`) and
- * the effect only animates after that, so the initial layout settling never plays as a grow-from-0.
- * A change that interrupts an in-flight animation continues from the current animated height, and
+ * Robustness notes: the baseline size is captured on the first render (via `afterNextRender`) and
+ * only later changes animate, so the initial layout settling never plays as a grow-from-0.
+ * A change that interrupts an in-flight animation continues from the current animated size, and
  * zero/pre-layout measurements are ignored. Respects `prefers-reduced-motion`.
+ *
+ * The animation starts synchronously inside the `ResizeObserver` callback — it runs after layout
+ * but **before paint**, so the host never paints a frame at its new natural size. Routing the
+ * resize through a signal + effect instead would apply the animation one change-detection cycle
+ * (= one painted frame) late: a growing panel would flash at its final size, snap back, and only
+ * then animate.
  */
 const injectAnimatedBlockSize = (config) => {
     const hostBinding = config.host ?? inject(ElementRef);
@@ -1334,10 +1355,12 @@ const injectAnimatedBlockSize = (config) => {
     const destroyRef = inject(DestroyRef);
     const hostSignal = firstElementSignal(buildElementSignal(hostBinding));
     const observeTargets = Array.isArray(config.observe) ? config.observe : [config.observe];
-    const dimensionSignals = observeTargets.map((target) => signalElementDimensions(target));
+    const observedElements = observeTargets.map((target) => firstElementSignal(buildElementSignal(target)));
     const duration = config.duration ?? 160;
     const easing = config.easing ?? 'ease';
+    const axes = () => (isSignal(config.axes) ? untracked(config.axes) : (config.axes ?? ['block']));
     let lastBlockSize = null;
+    let lastInlineSize = null;
     let animation = null;
     let ready = false;
     const hostElement = () => hostSignal().currentElement;
@@ -1345,22 +1368,44 @@ const injectAnimatedBlockSize = (config) => {
         const host = hostElement();
         if (!host)
             return;
-        // continue from the current animated height when interrupting a running animation
-        const from = animation?.playState === 'running' ? host.getBoundingClientRect().height : lastBlockSize;
+        // continue from the current animated size when interrupting a running animation
+        const currentRect = animation?.playState === 'running' ? host.getBoundingClientRect() : null;
+        const fromBlock = currentRect ? currentRect.height : lastBlockSize;
+        const fromInline = currentRect ? currentRect.width : lastInlineSize;
         animation?.cancel();
         animation = null;
-        const to = host.getBoundingClientRect().height;
-        // never record or animate a zero / pre-layout height
-        if (to === 0)
+        const targetRect = host.getBoundingClientRect();
+        const toBlock = targetRect.height;
+        const toInline = targetRect.width;
+        // never record or animate a zero / pre-layout size
+        if (toBlock === 0 || toInline === 0)
+            return;
+        lastBlockSize = toBlock;
+        lastInlineSize = toInline;
+        if (prefersReducedMotion()) {
             return;
-        lastBlockSize = to;
-        if (from === null || from < 1 || Math.abs(from - to) < 1 || prefersReducedMotion()) {
+        }
+        const activeAxes = axes();
+        const animatesAxis = (from, to) => from !== null && from >= 1 && Math.abs(from - to) >= 1;
+        const animateBlock = activeAxes.includes('block') && animatesAxis(fromBlock, toBlock);
+        const animateInline = activeAxes.includes('inline') && animatesAxis(fromInline, toInline);
+        if (!animateBlock && !animateInline) {
             return;
         }
         if (config.resizingClass && renderer) {
             renderer.addClass(host, config.resizingClass);
         }
-        const nextAnimation = host.animate([{ blockSize: `${from}px` }, { blockSize: `${to}px` }], { duration, easing });
+        const fromFrame = {};
+        const toFrame = {};
+        if (animateBlock) {
+            fromFrame['blockSize'] = `${fromBlock}px`;
+            toFrame['blockSize'] = `${toBlock}px`;
+        }
+        if (animateInline) {
+            fromFrame['inlineSize'] = `${fromInline}px`;
+            toFrame['inlineSize'] = `${toInline}px`;
+        }
+        const nextAnimation = host.animate([fromFrame, toFrame], { duration, easing });
         const cleanup = () => {
             if (config.resizingClass && renderer) {
                 renderer.removeClass(host, config.resizingClass);
@@ -1372,20 +1417,35 @@ const injectAnimatedBlockSize = (config) => {
         nextAnimation.finished.then(cleanup).catch(cleanup);
         animation = nextAnimation;
     };
-    // Capture the settled height of the first render as the baseline, then only animate later changes.
+    // no zone/signal indirection — see the pre-paint timing note in the doc comment above
+    const observer = new ResizeObserver(() => {
+        if (!ready)
+            return;
+        run();
+    });
+    effect(() => {
+        const elements = observedElements.map((element) => element().currentElement);
+        untracked(() => {
+            observer.disconnect();
+            for (const element of elements) {
+                if (element) {
+                    observer.observe(element);
+                }
+            }
+        });
+    });
+    // Capture the settled size of the first render as the baseline, then only animate later changes.
     afterNextRender(() => {
         const host = hostElement();
-        lastBlockSize = host ? host.getBoundingClientRect().height || null : null;
+        const rect = host ? host.getBoundingClientRect() : null;
+        lastBlockSize = rect ? rect.height || null : null;
+        lastInlineSize = rect ? rect.width || null : null;
         ready = true;
     });
-    effect(() => {
-        // track every observed element's size
-        dimensionSignals.forEach((dimensions) => dimensions());
-        if (!ready)
-            return;
-        untracked(() => run());
+    destroyRef.onDestroy(() => {
+        observer.disconnect();
+        animation?.cancel();
     });
-    destroyRef.onDestroy(() => animation?.cancel());
 };
 
 /**
@@ -2986,6 +3046,16 @@ const parseSeparatorAligns = (line) => parseTableRow(line).map((cell) => {
 /** The GFM separator token for a column alignment. */
 const separatorFor = (align) => align === 'center' ? ':---:' : align === 'right' ? '---:' : align === 'left' ? ':---' : '---';
 const alignStyle = (align) => (align ? ` style="text-align: ${align}"` : '');
+/** Wraps `content` in an emphasis `marker`, hoisting boundary whitespace outside the delimiters —
+ *  CommonMark emphasis must not face whitespace on the inside (`** fett**` doesn't parse), and
+ *  `&nbsp;` counts as whitespace there too. Whitespace-only content stays unwrapped. */
+const emphasize = (marker, content) => {
+    const lead = /^(?:\s|&nbsp;)+/i.exec(content)?.[0] ?? '';
+    const rest = content.slice(lead.length);
+    const trail = /(?:\s|&nbsp;)+$/i.exec(rest)?.[0] ?? '';
+    const core = rest.slice(0, rest.length - trail.length);
+    return core ? `${lead}${marker}${core}${marker}${trail}` : content;
+};
 const makePlaceholder = (kind, idx) => `\u{E000}${kind}${idx}\u{E001}`;
 const placeholderRe = (kind) => new RegExp(`\u{E000}${kind}(\\d+)\u{E001}`, 'gu');
 const isPlaceholder = (kind, str) => new RegExp(`^\u{E000}${kind}\\d+\u{E001}$`, 'u').test(str);
@@ -3015,6 +3085,19 @@ const processInline = (text) => {
         const idx = inlineCodes.push(`<code>${escapeHtml(code)}</code>`) - 1;
         return makePlaceholder('IC', idx);
     });
+    // "Open in new tab" links round-trip as raw HTML because Markdown has no `target` syntax. Extract
+    // them before the raw-HTML escape below, keeping only a safe href, `target="_blank"` and a forced
+    // `rel="noopener noreferrer"` (any other attribute — including event handlers — is dropped); their
+    // inner markup is processed recursively. Anything else that looks like raw HTML is still escaped.
+    const newTabLinks = [];
+    text = text.replace(/<a\b([^>]*)>([\s\S]*?)<\/a>/gi, (full, attrs, inner) => {
+        const href = /\bhref\s*=\s*"([^"]*)"/i.exec(attrs)?.[1];
+        const newTab = /\btarget\s*=\s*"_blank"/i.test(attrs);
+        if (!newTab || !href || !isSafeUrl(href))
+            return full;
+        const anchor = `<a href="${href}" target="_blank" rel="noopener noreferrer">${processInline(inner)}</a>`;
+        return makePlaceholder('NTLINK', newTabLinks.push(anchor) - 1);
+    });
     // Raw HTML in Markdown text is escaped, not rendered — the editor writes this HTML straight
     // into the DOM via innerHTML, so anything else would let a crafted value inject markup. `<u>`
     // is the one deliberate exception: underline has no Markdown form and round-trips as raw <u>.
@@ -3031,7 +3114,9 @@ const processInline = (text) => {
     // Images before links (order matters); URLs with script-running schemes stay literal text
     text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => isSafeUrl(src) ? `<img src="${src}" alt="${alt}">` : match);
     text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, label, href) => isSafeUrl(href) ? `<a href="${href}">${label}</a>` : match);
-    return text.replace(placeholderRe('IC'), (_, i) => inlineCodes[+i] ?? '');
+    return text
+        .replace(placeholderRe('IC'), (_, i) => inlineCodes[+i] ?? '')
+        .replace(placeholderRe('NTLINK'), (_, i) => newTabLinks[+i] ?? '');
 };
 // --- Nested list helpers (regex can't match balanced nesting, so these scan by tag depth) ---
 /** The first top-level `<ul>`/`<ol>` in `html`, matched with balanced nesting. */
@@ -3239,16 +3324,27 @@ const htmlToMarkdown = (html) => {
     for (let i = 6; i >= 1; i--) {
         md = md.replace(new RegExp(`<h${i}[^>]*>([\\s\\S]*?)<\\/h${i}>`, 'gi'), (_, content) => `\n${'#'.repeat(i)} ${content.trim()}\n`);
     }
-    // Bold + italic (combined before individual)
-    md = md.replace(/<strong[^>]*><em[^>]*>([\s\S]*?)<\/em><\/strong>/gi, '***$1***');
-    md = md.replace(/<em[^>]*><strong[^>]*>([\s\S]*?)<\/strong><\/em>/gi, '***$1***');
-    md = md.replace(/<(strong|b)[^>]*>([\s\S]*?)<\/\1>/gi, '**$2**');
-    md = md.replace(/<(em|i)[^>]*>([\s\S]*?)<\/\1>/gi, '*$2*');
-    md = md.replace(/<(del|s|strike)[^>]*>([\s\S]*?)<\/\1>/gi, '~~$2~~');
+    // Bold + italic (combined before individual). Boundary whitespace is hoisted out of the
+    // delimiters (emphasize) — `<strong> x</strong>` must become ` **x**`, not the invalid `** x**`.
+    md = md.replace(/<strong[^>]*><em[^>]*>([\s\S]*?)<\/em><\/strong>/gi, (_, c) => emphasize('***', c));
+    md = md.replace(/<em[^>]*><strong[^>]*>([\s\S]*?)<\/strong><\/em>/gi, (_, c) => emphasize('***', c));
+    md = md.replace(/<(strong|b)[^>]*>([\s\S]*?)<\/\1>/gi, (_, _tag, c) => emphasize('**', c));
+    md = md.replace(/<(em|i)[^>]*>([\s\S]*?)<\/\1>/gi, (_, _tag, c) => emphasize('*', c));
+    md = md.replace(/<(del|s|strike)[^>]*>([\s\S]*?)<\/\1>/gi, (_, _tag, c) => emphasize('~~', c));
     // Inline code
     md = md.replace(/<code[^>]*>([\s\S]*?)<\/code>/gi, (_, code) => `\`${unescapeHtml(code)}\``);
-    // Links and images
-    md = md.replace(/<a[^>]+href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi, '[$2]($1)');
+    // Links and images. A link with `target="_blank"` has no Markdown form, so it round-trips as raw
+    // HTML (keeping only href + target + rel) via a placeholder — like underline below; ordinary links
+    // become `[text](url)`.
+    const newTabLinks = [];
+    md = md.replace(/<a\b([^>]*)>([\s\S]*?)<\/a>/gi, (_, attrs, inner) => {
+        const href = /\bhref\s*=\s*"([^"]*)"/i.exec(attrs)?.[1] ?? '';
+        if (/\btarget\s*=\s*"_blank"/i.test(attrs) && href) {
+            const anchor = `<a href="${href}" target="_blank" rel="noopener noreferrer">${inner}</a>`;
+            return makePlaceholder('NTLINK', newTabLinks.push(anchor) - 1);
+        }
+        return href ? `[${inner}](${href})` : inner;
+    });
     md = md.replace(/<img[^>]+src="([^"]*)"[^>]*alt="([^"]*)"[^>]*\/?>/gi, '![$2]($1)');
     md = md.replace(/<img[^>]+alt="([^"]*)"[^>]*src="([^"]*)"[^>]*\/?>/gi, '![$1]($2)');
     md = md.replace(/<img[^>]+src="([^"]*)"[^>]*\/?>/gi, '![]($1)');
@@ -3302,6 +3398,8 @@ const htmlToMarkdown = (html) => {
     md = md.replace(/<br\s*\/?>/gi, '\n');
     md = md.replace(/<hr\s*\/?>/gi, '\n---\n');
     md = unescapeHtml(stripTags(md)).replace(placeholderRe('U'), (_, i) => `<u>${underlines[+i] ?? ''}</u>`);
+    // new-tab links survive the tag-strip as raw HTML (restored after it, like underline)
+    md = md.replace(placeholderRe('NTLINK'), (_, i) => newTabLinks[+i] ?? '');
     // aligned blocks are block-level, so pad with blank lines before collapsing so they survive as
     // their own Markdown block
     md = md.replace(placeholderRe('ALIGN'), (_, i) => `\n\n${alignedBlocks[+i] ?? ''}\n\n`);
@@ -4692,12 +4790,18 @@ class DragHandleDirective {
         this.gestureStart$.next(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: DragHandleDirective, isStandalone: true, selector: "[etDragHandle]", inputs: { commitThreshold: { classPropertyName: "commitThreshold", publicName: "commitThreshold", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragTapped: "dragTapped", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: DragHandleDirective, isStandalone: true, selector: "[etDragHandle]", inputs: { commitThreshold: { classPropertyName: "commitThreshold", publicName: "commitThreshold", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragTapped: "dragTapped", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded" }, host: { properties: { "style.touch-action": "disabled() ? null : 'none'" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etDragHandle]',
+                    host: {
+                        // Without this the browser claims touch pointermoves for scrolling and fires pointercancel,
+                        // so a touch drag never gets past the commit threshold. Scrolling stays available while the
+                        // handle is disabled.
+                        '[style.touch-action]': "disabled() ? null : 'none'",
+                    },
                 }]
         }], ctorParameters: () => [], propDecorators: { commitThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitThreshold", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dragTapped: [{ type: i0.Output, args: ["dragTapped"] }], dragStarted: [{ type: i0.Output, args: ["dragStarted"] }], dragMoved: [{ type: i0.Output, args: ["dragMoved"] }], dragEnded: [{ type: i0.Output, args: ["dragEnded"] }] } });
 
@@ -7694,12 +7798,31 @@ const provideColorThemes = (themes) => {
 };
 
 const COLOR_PROVIDER = new InjectionToken('ColorProvider');
+/**
+ * The color provider attached to a bootstrapped root component (e.g. `ProvideColorDirective` in
+ * the app component's `hostDirectives`), if any. Detached DOM such as overlay panes can't reach
+ * it through element DI, so overlay containers fall back to this when resolving the provider to
+ * `syncWithProvider()` — resolve at sync time, not at injection time, since root components only
+ * register with `ApplicationRef` once bootstrap completes.
+ *
+ * @internal
+ */
+const resolveAppRootColorProvider = (appRef) => {
+    for (const componentRef of appRef.components) {
+        const provider = componentRef.injector.get(COLOR_PROVIDER, null);
+        if (provider) {
+            return provider;
+        }
+    }
+    return null;
+};
 const FORCED_COLOR_UNSET = Symbol('FORCED_COLOR_UNSET');
 class ProvideColorDirective {
     constructor() {
         this.themes = injectColorThemes({ optional: true });
         this.prefix = injectColorThemesPrefix({ optional: true });
         this.injector = inject(Injector);
+        this.parentProvider = inject(COLOR_PROVIDER, { optional: true, skipSelf: true });
         this.currentProviderSync = null;
         this.forcedColor = signal(FORCED_COLOR_UNSET, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "forcedColor" }] : /* istanbul ignore next */ []));
@@ -7712,6 +7835,22 @@ class ProvideColorDirective {
             return this.color();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
+        /**
+         * The color that actually applies at this provider's location: its own effective color, or —
+         * when this provider is passive (no input, nothing forced) — the nearest ancestor provider's.
+         * Mirrors the CSS cascade, which falls through a provider's `-color--inherited` scope class;
+         * consumers that re-apply context across detached DOM (overlay panes) must use this instead
+         * of `effectiveColor` or a passive in-between provider (e.g. a form field's) erases the theme.
+         */
+        this.resolvedColor = computed(() => {
+            const own = this.effectiveColor();
+            const ownName = typeof own === 'object' && own !== null ? own.name : own;
+            if (ownName) {
+                return own;
+            }
+            return this.parentProvider?.resolvedColor();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
         this.colorName = computed(() => {
             const raw = this.effectiveColor();
             const value = typeof raw === 'object' && raw !== null ? raw.name : raw;
@@ -7736,7 +7875,7 @@ class ProvideColorDirective {
         this.currentProviderSync?.destroy();
         runInInjectionContext(this.injector, () => {
             this.currentProviderSync = effect(() => {
-                const provideColor = provider.effectiveColor();
+                const provideColor = provider.resolvedColor();
                 untracked(() => {
                     if (provideColor === undefined) {
                         this.clearForcedColor();
@@ -7847,5 +7986,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, ANIMATION_DEBUG_STORAGE_KEY, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, AutoSurfaceDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PROVIDER, ClickOutsideDirective, ColorInteractiveContainerDirective, ColorInteractiveDirective, ColorInteractiveExcludeDirective, ColorInteractiveHasFocusDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_VIEWPORT_CONFIG, DISABLE_LOGGER_PARAM, DragHandleDirective, ET_DISABLE_SCROLL_TOP, ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE, ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE, ET_PROPERTY_REMOVED, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, InitialsPipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MarkdownToHtmlPipe, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RuntimeError, SEO_DIRECTIVE_TOKEN, SURFACE_PROVIDER, SURFACE_TYPE, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SeoDirective, SlugifyPipe, StructuredDataComponent, SurfaceInteractiveDirective, ToArrayPipe, TypedQueryList, ValidateAtLeastOneRequired, Validators, animationDebugLog, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyCenteredPosition, applyDescriptionBinding, applyGlobalPosition, applyHeadBinding, applyHeadTitleBinding, applyHostListener, applyHostListeners, applyInitialFocus, applyKeywordsBinding, applyLinkBinding, applyMetaBinding, applyNextBinding, applyOgBinding, applyOpenGraphBindings, applyPrevBinding, applyResourceHintsBindings, applyRobotsBinding, applySocialMediaBindings, applyStructuredDataBinding, applyTwitterCardBindings, areScrollStatesEqual, bindProps, boolBreakpointTransform, booleanBreakpointAttribute, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, canUseSessionMemory, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, copyToClipboard, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createOverlayRuntimeRef, createPropHandlers, createPropertyBinding, createProps, createProvider, createRootProvider, createRootThemeCss, createRoute, createRouterState, createRxHostListener, createSessionMemory, createSetup, createStaticProvider, createStaticRootProvider, createSwatchCss, createSwipeTracker, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUserConsentProvider, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, focusElement, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFocusableElements, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getHeadingElement, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, htmlToMarkdown, inferMimeType, initials, injectAngularRootElement, injectAnimatedBlockSize, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDeviceInputType, injectDisplayOrientation, injectErrorTheme, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectObserveBreakpoint, injectObserveMediaQuery, injectOverlayRuntime, injectPathParam, injectPathParamChanges, injectPathParams, injectPrefersReducedMotion, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isAnimationDebugEnabled, isArray, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isKnockoutMatch, isObject, markdownToHtml, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorThemes, provideColorThemesWithTailwind4, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideViewportConfig, readFromClipboard, resetPositioningStyles, resolveSurfaceByElevation, round, routerDisableScrollTop, scrollToElement, setBackdropStyles, setBaseElementStyles, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, slugify, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toStringBinding, transformOrReturn, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
+export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, ANIMATION_DEBUG_STORAGE_KEY, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, AutoSurfaceDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PROVIDER, ClickOutsideDirective, ColorInteractiveContainerDirective, ColorInteractiveDirective, ColorInteractiveExcludeDirective, ColorInteractiveHasFocusDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_VIEWPORT_CONFIG, DISABLE_LOGGER_PARAM, DragHandleDirective, ET_DISABLE_SCROLL_TOP, ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE, ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE, ET_PROPERTY_REMOVED, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, InitialsPipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MarkdownToHtmlPipe, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RuntimeError, SEO_DIRECTIVE_TOKEN, SURFACE_PROVIDER, SURFACE_TYPE, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SeoDirective, SlugifyPipe, StructuredDataComponent, SurfaceInteractiveDirective, ToArrayPipe, TypedQueryList, ValidateAtLeastOneRequired, Validators, animationDebugLog, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyCenteredPosition, applyDescriptionBinding, applyGlobalPosition, applyHeadBinding, applyHeadTitleBinding, applyHostListener, applyHostListeners, applyInitialFocus, applyKeywordsBinding, applyLinkBinding, applyMetaBinding, applyNextBinding, applyOgBinding, applyOpenGraphBindings, applyPrevBinding, applyResourceHintsBindings, applyRobotsBinding, applySocialMediaBindings, applyStructuredDataBinding, applyTwitterCardBindings, areScrollStatesEqual, bindProps, boolBreakpointTransform, booleanBreakpointAttribute, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, canUseSessionMemory, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, copyToClipboard, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createOverlayRuntimeRef, createPropHandlers, createPropertyBinding, createProps, createProvider, createRootProvider, createRootThemeCss, createRoute, createRouterState, createRxHostListener, createSessionMemory, createSetup, createStaticProvider, createStaticRootProvider, createSwatchCss, createSwipeTracker, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUserConsentProvider, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, focusElement, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFocusableElements, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getHeadingElement, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, htmlToMarkdown, inferMimeType, initials, injectAngularRootElement, injectAnimatedBlockSize, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDeviceInputType, injectDisplayOrientation, injectErrorTheme, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectObserveBreakpoint, injectObserveMediaQuery, injectOverlayRuntime, injectPathParam, injectPathParamChanges, injectPathParams, injectPrefersReducedMotion, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isAnimationDebugEnabled, isArray, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isKnockoutMatch, isObject, markdownToHtml, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorThemes, provideColorThemesWithTailwind4, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideViewportConfig, randomId, readFromClipboard, resetPositioningStyles, resolveAppRootColorProvider, resolveSurfaceByElevation, round, routerDisableScrollTop, scrollToElement, setBackdropStyles, setBaseElementStyles, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, slugify, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toStringBinding, transformOrReturn, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
 //# sourceMappingURL=ethlete-core.mjs.map