@juspay/svelte-ui-components 4.51.0 → 4.52.0

package/dist/_chart/tooltipPosition.js

@@ -9,6 +9,34 @@ export function computeTooltipPosition(opts) {
     const { tooltip, container } = opts;
     const maxLeft = container.width - tooltip.width;
     const maxTop = container.height - tooltip.height;
+    const finish = (left, top) => {
+        const preferred = { left: clamp(left, maxLeft), top: clamp(top, maxTop) };
+        const labels = opts.avoidRects ?? [];
+        const clear = (p) => labels.every((r) => p.left + tooltip.width <= r.left ||
+            p.left >= r.left + r.width ||
+            p.top + tooltip.height <= r.top ||
+            p.top >= r.top + r.height);
+        if (clear(preferred)) {
+            return preferred;
+        }
+        // Keep labels visible when the usual point/cursor offset intersects them.
+        // Try the nearby edges first, including combinations for crowded plots.
+        const candidates = [];
+        for (const r of labels) {
+            const xs = [preferred.left, r.left - tooltip.width - offset, r.left + r.width + offset];
+            const ys = [preferred.top, r.top - tooltip.height - offset, r.top + r.height + offset];
+            for (const x of xs) {
+                for (const y of ys) {
+                    if (x >= 0 && y >= 0 && x <= maxLeft && y <= maxTop) {
+                        candidates.push({ left: x, top: y });
+                    }
+                }
+            }
+        }
+        const distance = (p) => (p.left - preferred.left) ** 2 + (p.top - preferred.top) ** 2;
+        candidates.sort((a, b) => distance(a) - distance(b));
+        return candidates.find(clear) ?? preferred;
+    };
     const a = opts.anchor ?? null;
     if (a !== null) {
         let left;
@@ -33,7 +61,7 @@ export function computeTooltipPosition(opts) {
                 left = a.x + offset;
             }
         }
-        return { left: clamp(left, maxLeft), top: clamp(top, maxTop) };
+        return finish(left, top);
     }
     const mouseX = opts.mouseX ?? 0;
     const mouseY = opts.mouseY ?? 0;
@@ -45,5 +73,5 @@ export function computeTooltipPosition(opts) {
     if (top + tooltip.height > container.height) {
         top = mouseY - tooltip.height - offset;
     }
-    return { left: clamp(left, maxLeft), top: clamp(top, maxTop) };
+    return finish(left, top);
 }

package/dist/_chart/types.d.ts

@@ -149,6 +149,28 @@ export type ChartContainerProperties = {
     maxHeight?: number;
     testId?: string;
     classes?: string;
+    /**
+     * Accessible name of the chart drawing (`aria-label` on the `<svg>`). Without
+     * one the drawing is exposed with no name at all, which axe reports as
+     * `svg-img-alt` and which leaves a screen-reader user unable to tell which
+     * chart a data point belongs to.
+     */
+    ariaLabel?: string;
+    /**
+     * Optional longer description of the chart. Rendered as an SVG `<desc>` whose
+     * instance-scoped id is referenced by `aria-describedby`, so it is announced
+     * after the name wherever `aria-describedby` is honoured.
+     */
+    ariaDescription?: string;
+    /**
+     * True when the drawing contains focusable or clickable marks (bars, points,
+     * slices). An interactive drawing is exposed as `role="group"`, not
+     * `role="img"`: ARIA makes an image's children presentational, so marks left
+     * under an image either vanish from assistive technology or are announced
+     * inconsistently between browsers. A static drawing stays a named image.
+     * Defaults to false, which keeps every existing caller's `role="img"`.
+     */
+    interactive?: boolean;
     children: Snippet;
 };
 export type AxisProperties = {

package/dist/_interaction/focusable.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Finds interactive elements the way a keyboard user meets them: through `<slot>`
+ * projection and into open shadow roots.
+ *
+ * `querySelector` cannot do either. Inside a `sui-*` element the content a consumer
+ * slotted in lives in the light DOM, so a query rooted in the shadow tree never sees
+ * it; and a control rendered by a nested `sui-*` element sits one shadow root further
+ * down. Menu needs this to return focus to a slotted trigger, and Scroller needs it to
+ * decide whether its content already offers a Tab stop. Both answered "none" through the
+ * custom-element build while answering correctly in the Svelte one.
+ *
+ * Pure DOM reads with no Svelte dependency, so it stays unit-testable under jsdom --
+ * which is also why visibility uses `checkVisibility` only when the engine has it
+ * rather than layout measurements jsdom cannot provide.
+ */
+export type FindInteractiveOptions = {
+    /** Also test `root` itself, not only what it contains. */
+    readonly includeRoot?: boolean;
+    /**
+     * Only elements a Tab press reaches. Off by default so a control carrying
+     * `tabindex="-1"` still counts as somewhere focus can be put programmatically.
+     */
+    readonly tabbableOnly?: boolean;
+    /**
+     * Also yield elements that are not rendered right now (`display: none`, `hidden`, inert).
+     * For a caller that wants to be told when one of them is shown or hidden again.
+     */
+    readonly includeHidden?: boolean;
+};
+/** Inert applies through shadow hosts and slot projection, beyond `closest()`'s tree. */
+export declare function composedParent(el: Element): Element | null;
+/**
+ * Every interactive element at or below `root`, in tree order. When `root` is itself a
+ * host, that includes the controls its own shadow tree renders -- the case of a
+ * `<sui-button>` handed over as a trigger.
+ */
+export declare function interactiveElements(root: Element | ShadowRoot | DocumentFragment, options?: FindInteractiveOptions): Generator<HTMLElement>;
+/** The first interactive element at or below `root` in tree order, or `null`. */
+export declare function findInteractive(root: Element | ShadowRoot | DocumentFragment, options?: FindInteractiveOptions): HTMLElement | null;
+/** Whether anything beneath `root` is reachable with Tab. */
+export declare function hasTabbableContent(root: Element | ShadowRoot | DocumentFragment): boolean;
+/**
+ * The direct content of `root` as the layout sees it: a `<slot>` stands in for the
+ * elements assigned to it. These are the nodes whose size and attributes decide whether
+ * `root`'s scrollable area, or its Tab order, changes.
+ */
+export declare function contentElements(root: Element): Element[];

package/dist/_interaction/focusable.js

@@ -0,0 +1,139 @@
+/**
+ * Finds interactive elements the way a keyboard user meets them: through `<slot>`
+ * projection and into open shadow roots.
+ *
+ * `querySelector` cannot do either. Inside a `sui-*` element the content a consumer
+ * slotted in lives in the light DOM, so a query rooted in the shadow tree never sees
+ * it; and a control rendered by a nested `sui-*` element sits one shadow root further
+ * down. Menu needs this to return focus to a slotted trigger, and Scroller needs it to
+ * decide whether its content already offers a Tab stop. Both answered "none" through the
+ * custom-element build while answering correctly in the Svelte one.
+ *
+ * Pure DOM reads with no Svelte dependency, so it stays unit-testable under jsdom --
+ * which is also why visibility uses `checkVisibility` only when the engine has it
+ * rather than layout measurements jsdom cannot provide.
+ */
+const NATIVE_CONTROL_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'summary',
+    'audio[controls]',
+    'video[controls]',
+    'iframe',
+    '[contenteditable=""]',
+    '[contenteditable="true"]'
+].join(', ');
+/** Inert applies through shadow hosts and slot projection, beyond `closest()`'s tree. */
+export function composedParent(el) {
+    const slot = el instanceof HTMLElement || el instanceof SVGElement ? el.assignedSlot : null;
+    if (slot !== null) {
+        return slot;
+    }
+    const root = el.getRootNode();
+    return el.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+}
+function isRendered(el) {
+    if (el.hasAttribute('hidden')) {
+        return false;
+    }
+    for (let ancestor = el; ancestor !== null; ancestor = composedParent(ancestor)) {
+        if (ancestor.hasAttribute('inert')) {
+            return false;
+        }
+    }
+    return typeof el.checkVisibility === 'function'
+        ? el.checkVisibility({ visibilityProperty: true })
+        : true;
+}
+function interactiveElement(el, tabbableOnly, includeHidden) {
+    if (!(el instanceof HTMLElement)) {
+        return null;
+    }
+    // Native disabledness includes a disabled fieldset, except its first legend.
+    // Neither the own `disabled` property nor authored tabindex describes that
+    // inherited state. The browser's predicate also handles the legend exception.
+    if (el.matches(':disabled')) {
+        return null;
+    }
+    const tabbable = el.tabIndex >= 0;
+    // A native control keeps `tabindex="-1"` focusable from script. A bare `[tabindex]`
+    // is only a control because of that attribute, so a negative value takes it out.
+    const interactive = el.matches(NATIVE_CONTROL_SELECTOR)
+        ? !tabbableOnly || tabbable
+        : el.hasAttribute('tabindex') && tabbable;
+    return interactive && (includeHidden || isRendered(el)) ? el : null;
+}
+function* childrenOf(node) {
+    if (node instanceof HTMLSlotElement) {
+        const assigned = node.assignedElements({ flatten: true });
+        // An unassigned slot renders its fallback content, which is its own children.
+        yield* assigned.length > 0 ? assigned : Array.from(node.children);
+        return;
+    }
+    yield* Array.from(node.children);
+}
+/**
+ * What an element renders inside itself: its shadow tree when it hosts one, otherwise
+ * its own children. A host's light children are not rendered directly -- they appear
+ * wherever the shadow tree's `<slot>`s place them, which `childrenOf` resolves -- so
+ * walking the shadow tree alone visits each of them once and in the order they render.
+ */
+function renderedTreeOf(node) {
+    return node instanceof Element && node.shadowRoot !== null ? node.shadowRoot : node;
+}
+function* walk(node) {
+    for (const child of childrenOf(node)) {
+        yield child;
+        yield* walk(renderedTreeOf(child));
+    }
+}
+/**
+ * Every interactive element at or below `root`, in tree order. When `root` is itself a
+ * host, that includes the controls its own shadow tree renders -- the case of a
+ * `<sui-button>` handed over as a trigger.
+ */
+export function* interactiveElements(root, options = {}) {
+    const tabbableOnly = options.tabbableOnly === true;
+    const includeHidden = options.includeHidden === true;
+    if (options.includeRoot === true && root instanceof Element) {
+        const self = interactiveElement(root, tabbableOnly, includeHidden);
+        if (self !== null) {
+            yield self;
+        }
+    }
+    for (const el of walk(renderedTreeOf(root))) {
+        const found = interactiveElement(el, tabbableOnly, includeHidden);
+        if (found !== null) {
+            yield found;
+        }
+    }
+}
+/** The first interactive element at or below `root` in tree order, or `null`. */
+export function findInteractive(root, options = {}) {
+    const first = interactiveElements(root, options).next();
+    return first.done === true ? null : first.value;
+}
+/** Whether anything beneath `root` is reachable with Tab. */
+export function hasTabbableContent(root) {
+    return findInteractive(root, { tabbableOnly: true }) !== null;
+}
+/**
+ * The direct content of `root` as the layout sees it: a `<slot>` stands in for the
+ * elements assigned to it. These are the nodes whose size and attributes decide whether
+ * `root`'s scrollable area, or its Tab order, changes.
+ */
+export function contentElements(root) {
+    const out = [];
+    for (const child of Array.from(root.children)) {
+        if (child instanceof HTMLSlotElement) {
+            out.push(...childrenOf(child));
+        }
+        else {
+            out.push(child);
+        }
+    }
+    return out;
+}

package/dist/assets/captions-on.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM11.121 9.879A3 3 0 1 0 11.121 14.121L9.99 12.99A1.4 1.4 0 1 1 9.99 11.01zM17.121 9.879A3 3 0 1 0 17.121 14.121L15.99 12.99A1.4 1.4 0 1 1 15.99 11.01z" />
+</svg>

package/dist/assets/captions.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="5" width="18" height="14" rx="2" />
+  <path d="M10.5 10.5a2 2 0 1 0 0 3" />
+  <path d="M16.5 10.5a2 2 0 1 0 0 3" />
+</svg>

package/dist/index.d.ts

@@ -228,7 +228,7 @@ export type * from './MediaPlayer/properties';
 export type * from './MediaUpload/properties';
 export type * from './Gallery/properties';
 export { createSoundKit } from './SoundKit/SoundKit';
-export { validateInput, lockBodyScroll, unlockBodyScroll, prefersReducedMotion } from './utils';
+export { validateInput, lockBodyScroll, unlockBodyScroll, acquireScrollLock, prefersReducedMotion } from './utils';
 export { reducedMotion } from './reduced-motion.svelte';
 export type { ReducedMotionPreference } from './reduced-motion.svelte';
 export { TEL_PRESETS, TEL_PRESET_IN_MOBILE } from './utils';

package/dist/index.js

@@ -123,7 +123,7 @@ export { createSoundKit } from './SoundKit/SoundKit';
 // applies just as much across the boundary. A consumer driving motion from JavaScript
 // -- a canvas, a chart, an imperative animation -- cannot reach the preference through
 // a stylesheet, so leaving this unexported made every such consumer write it again.
-export { validateInput, lockBodyScroll, unlockBodyScroll, prefersReducedMotion } from './utils';
+export { validateInput, lockBodyScroll, unlockBodyScroll, acquireScrollLock, prefersReducedMotion } from './utils';
 // The reactive counterpart to `prefersReducedMotion()` above: a consumer
 // building their own component with runes needs a value that stays current
 // inside a `$derived`, which a plain function call cannot give them, for the

package/dist/styles/theme-dark.css

@@ -201,8 +201,11 @@
   --hitl-halted-color: #fbbf24;
   --hitl-countdown-filter: brightness(1.6);
 
-  /* ThinkingIndicator */
+  /* ThinkingIndicator. The shimmer gradient is built from the label colour plus this
+     highlight, so both stops of the sweep stay readable on the dark grounds
+     (#9ca3af / #e5e7eb are 5.1-7.5:1 and 10.5-15.4:1 on #0f0f17..#2f2f45). */
   --thinking-indicator-label-color: #9ca3af;
+  --thinking-indicator-shimmer-highlight: #e5e7eb;
   --thinking-indicator-detail-color: #9ca3af;
   --thinking-indicator-arrow-color: #9ca3af;
   --thinking-indicator-border-bottom: 1px solid #2a2a3c;
@@ -212,6 +215,7 @@
   --thinking-indicator-chip-background: #1e1e2e;
   --thinking-indicator-chip-border: 1px solid #2a2a3c;
   --thinking-indicator-chip-color: #9ca3af;
+  --thinking-indicator-chip-shimmer-highlight: #f3f4f6;
   --thinking-indicator-chip-box-shadow: 0 6px 20px rgb(0 0 0 / 40%);
 
   /* AttachmentChipRow */
@@ -710,6 +714,7 @@
   --sankey-label-color: #d1d5db;
 
   /* Scroller */
+  --scroller-focus-outline: 2px solid #818cf8;
   --scroller-arrow-background: #1e1e2e;
   --scroller-arrow-color: #d1d5db;
   --scroller-arrow-hover-background: #252535;

package/dist/types.d.ts

@@ -19,6 +19,8 @@ import type { HTMLAttributes } from 'svelte/elements';
  */
 export type InputDataType = 'text' | 'tel' | 'password' | 'email' | 'number' | 'time' | 'date' | 'search' | 'url';
 export type ModalTransition = 'IN' | 'ALL';
+/** An overlay's owned scroll element. A null value/getter result disables locking. */
+export type ScrollContainer = HTMLElement | (() => HTMLElement | null) | null;
 /**
  * @name CustomValidator
  * @description Function type for taking input parameter and returning a boolean denoting if the value is valid or not

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { CustomValidator, Hsv, Hsl, InputDataType, Rgb, ValidationState } from './types';
+import type { CustomValidator, Hsv, Hsl, InputDataType, Rgb, ValidationState, ScrollContainer } from './types';
 /**
  * A phone-number shape a consumer opts into, as the pair of patterns the
  * in-progress/committed distinction needs.
@@ -93,9 +93,25 @@ export declare function prefersReducedMotion(): boolean;
  * dismissal must be acted on at once, and the repeats it guards against are the
  * ones to discard.
  *
+ * `delay` may be a function, read on every call, for a caller whose delay can
+ * change after the debouncer exists. The window is then measured against the
+ * delay in force now, while `lastCallTime` stays the one debouncer's own: a
+ * caller rebuilding the debouncer to pick up a new delay would also forget when
+ * it last fired, and let through the very repeat it exists to drop.
+ *
  * Not exported from the package; renaming it is a free change whenever the
  * mismatch stops being worth the note.
  */
-export declare function createDebouncer(delay: number): <T extends unknown[]>(callback: (...args: T) => void, ...args: T) => void;
+export declare function createDebouncer(delay: number | (() => number)): <T extends unknown[]>(callback: (...args: T) => void, ...args: T) => void;
+/**
+ * Acquire one hold and return its idempotent release function. Only overflow
+ * declarations are touched; their original values, priorities and order are
+ * restored after the final hold. Scroll position and unrelated styles stay intact.
+ * A null container is a no-op, including during SSR.
+ */
+export declare function acquireScrollLock(container?: HTMLElement | null): () => void;
+/** Explicit ownership never falls back to body, even if the getter returns null. */
+export declare function resolveScrollContainer(node: HTMLElement | null, container?: ScrollContainer): HTMLElement | null;
+/** Backwards-compatible body helpers; every acquired hold needs one unlock. */
 export declare function lockBodyScroll(): void;
 export declare function unlockBodyScroll(): void;

package/dist/utils.js

@@ -352,6 +352,12 @@ export function prefersReducedMotion() {
  * dismissal must be acted on at once, and the repeats it guards against are the
  * ones to discard.
  *
+ * `delay` may be a function, read on every call, for a caller whose delay can
+ * change after the debouncer exists. The window is then measured against the
+ * delay in force now, while `lastCallTime` stays the one debouncer's own: a
+ * caller rebuilding the debouncer to pick up a new delay would also forget when
+ * it last fired, and let through the very repeat it exists to drop.
+ *
  * Not exported from the package; renaming it is a free change whenever the
  * mismatch stops being worth the note.
  */
@@ -359,44 +365,83 @@ export function createDebouncer(delay) {
     let lastCallTime = 0;
     return function (callback, ...args) {
         const now = Date.now();
-        if (now - lastCallTime > delay) {
+        const currentDelay = typeof delay === 'function' ? delay() : delay;
+        if (now - lastCallTime > currentDelay) {
             lastCallTime = now;
             callback(...args);
         }
     };
 }
+/** Per-container locks shared by overlays and the legacy body helpers. */
+const scrollLocks = new WeakMap();
+const bodyScrollReleases = [];
 /**
- * Body scroll lock, reference counted.
- *
- * Modal, Sheet and CommandMenu each hide body overflow while they are open. Doing
- * that with a bare assignment means the FIRST of them to unmount restores
- * scrolling for all of them, so closing a confirmation dialog inside a still-open
- * modal silently lets the page behind it scroll again. Counting the holders keeps
- * the lock until the last one releases it.
- *
- * Callers must pair every lock with exactly one unlock.
+ * Acquire one hold and return its idempotent release function. Only overflow
+ * declarations are touched; their original values, priorities and order are
+ * restored after the final hold. Scroll position and unrelated styles stay intact.
+ * A null container is a no-op, including during SSR.
  */
-let bodyScrollLockCount = 0;
-// Whatever inline overflow the host page had set before the first lock, so the last unlock
-// hands it back instead of clearing it: a host running `overflow: clip` on its body keeps it.
-let bodyScrollPreviousOverflow = '';
-export function lockBodyScroll() {
-    if (typeof document === 'undefined') {
-        return;
+export function acquireScrollLock(container = typeof document === 'undefined' ? null : document.body) {
+    if (container === null) {
+        return () => { };
     }
-    if (bodyScrollLockCount === 0) {
-        bodyScrollPreviousOverflow = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
+    let lock = scrollLocks.get(container);
+    if (!lock) {
+        const overflow = [];
+        for (let index = 0; index < container.style.length; index += 1) {
+            const name = container.style.item(index);
+            if (name === 'overflow' || name === 'overflow-x' || name === 'overflow-y') {
+                overflow.push([
+                    name,
+                    container.style.getPropertyValue(name),
+                    container.style.getPropertyPriority(name)
+                ]);
+            }
+        }
+        lock = { count: 0, overflow };
+        scrollLocks.set(container, lock);
+        container.style.setProperty('overflow', 'hidden', 'important');
     }
-    bodyScrollLockCount += 1;
+    lock.count += 1;
+    const heldLock = lock;
+    let released = false;
+    return () => {
+        if (released) {
+            return;
+        }
+        released = true;
+        heldLock.count -= 1;
+        if (heldLock.count === 0) {
+            container.style.removeProperty('overflow');
+            container.style.removeProperty('overflow-x');
+            container.style.removeProperty('overflow-y');
+            for (const [name, value, priority] of heldLock.overflow) {
+                container.style.setProperty(name, value, priority);
+            }
+            scrollLocks.delete(container);
+        }
+    };
 }
-export function unlockBodyScroll() {
-    if (typeof document === 'undefined') {
-        return;
+/** Explicit ownership never falls back to body, even if the getter returns null. */
+export function resolveScrollContainer(node, container) {
+    const resolved = typeof container === 'function' ? container() : container;
+    if (typeof resolved === 'object') {
+        return resolved !== null && resolved.nodeType === 1 && typeof resolved.style === 'object'
+            ? resolved
+            : null;
     }
-    bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
-    if (bodyScrollLockCount === 0) {
-        document.body.style.overflow = bodyScrollPreviousOverflow;
-        bodyScrollPreviousOverflow = '';
+    // Invalid JavaScript/custom-element values are never permission to lock body.
+    if (typeof container !== 'undefined') {
+        return null;
     }
+    return node?.ownerDocument.body ?? (typeof document === 'undefined' ? null : document.body);
+}
+/** Backwards-compatible body helpers; every acquired hold needs one unlock. */
+export function lockBodyScroll() {
+    if (typeof document !== 'undefined') {
+        bodyScrollReleases.push(acquireScrollLock(document.body));
+    }
+}
+export function unlockBodyScroll() {
+    bodyScrollReleases.pop()?.();
 }

package/dist-codemod/codemod/migrate-audit.js

@@ -5,6 +5,8 @@ import { parseArgs } from 'node:util';
 import { analyzeStylesheet, analyzeSvelte, LIBRARY } from "../migrate/analyze.js";
 import { planSelectorRewrites } from "../migrate/chart-tooltip-selector.js";
 import { SKIPPED_DIRECTORIES } from "./cli.js";
+import { LEGACY_DISPLAY_CSS_FILENAME, LEGACY_PALETTE_CSS_FILENAME, WC_DISPLAY_FILENAME, migrationAssetsDirBeside } from "./migration-assets-layout.js";
+export { LEGACY_DISPLAY_CSS_FILENAME, LEGACY_PALETTE_CSS_FILENAME };
 /**
  * Runs the 4.28.0 breaking-change audit `npm run migrate` runs, from the
  * PUBLISHED `sui-codemod` binary against a consumer project that only has
@@ -28,15 +30,15 @@ import { SKIPPED_DIRECTORIES } from "./cli.js";
  * never otherwise reach.
  */
 // ------------------------------------------------------------- wc-display.json
-const MIGRATION_ASSETS_DIRNAME = 'migration-assets';
-const WC_DISPLAY_FILENAME = 'wc-display.json';
-export const LEGACY_DISPLAY_CSS_FILENAME = 'legacy-display.css';
-export const LEGACY_PALETTE_CSS_FILENAME = 'legacy-palette.css';
 /**
  * The directory `generate-migration-assets.ts` writes into, resolved off
  * THIS module's own compiled location rather than `process.cwd()` -- so it
- * still finds `dist-codemod/migration-assets` when this module has been
- * compiled to `dist-codemod/migrate-audit.js` and invoked from anywhere.
+ * still finds `dist-codemod/codemod/migration-assets` when this module has
+ * been compiled to `dist-codemod/codemod/migrate-audit.js` and invoked from
+ * anywhere. The directory name and the "beside the compiled module" rule come
+ * from `migration-assets-layout.ts`, the one place the generator, this lookup
+ * and the real-artifact tests all read it from.
+ *
  * Run against the uncompiled `.ts` source (as the tests below do without an
  * explicit `assetsDir` override) it resolves to a sibling directory that
  * does not exist -- which is the correct answer, not a bug: this module
@@ -45,7 +47,7 @@ export const LEGACY_PALETTE_CSS_FILENAME = 'legacy-palette.css';
  * than a guess.
  */
 function defaultAssetsDir() {
-    return join(dirname(fileURLToPath(import.meta.url)), MIGRATION_ASSETS_DIRNAME);
+    return migrationAssetsDirBeside(dirname(fileURLToPath(import.meta.url)));
 }
 /** Same no-assertion narrowing `analyze.ts`'s own `asRecord` uses: copies known-present keys onto a fresh object rather than casting. */
 function asRecord(value) {

package/dist-codemod/codemod/migration-assets/legacy-palette.css

@@ -12,11 +12,12 @@
  * one property at a time, not to be a permanent fixture in a consumer
  * build.
  *
- * 54 properties pinned below. 9 more could not be -- see the note at the end.
+ * 62 properties pinned below. 9 more could not be -- see the note at the end.
  *
  * Generated by scripts/migrate/legacy-palette.ts -- do not hand edit.
  */
 :root { --banner-link-color: #0099ff; }   /* was the 4.27.x default */
+:root { --button-width: fit-content; }   /* was the 4.27.x default */
 :root { --calendar-day-name-color: #999999; }   /* was the 4.27.x default */
 :root { --calendar-disabled-color: #cccccc; }   /* was the 4.27.x default */
 :root { --calendar-outside-month-color: #cccccc; }   /* was the 4.27.x default */
@@ -26,6 +27,7 @@
 :root { --delta-indicator-negative-color: #e5484d; }   /* was the 4.27.x default */
 :root { --delta-indicator-neutral-color: #8a8a8a; }   /* was the 4.27.x default */
 :root { --delta-indicator-positive-color: #1a9d6f; }   /* was the 4.27.x default */
+:root { --drp-apply-background: currentColor; }   /* was the 4.27.x default */
 :root { --drp-panel-background: inherit; }   /* was the 4.27.x default */
 :root { --empty-state-description-opacity: 0.6; }   /* was the 4.27.x default */
 :root { --field-group-label-color: #9ca3af; }   /* was the 4.27.x default */
@@ -45,6 +47,8 @@
 :root { --pagination-button-color: #3a4550; }   /* was the 4.27.x default */
 :root { --pagination-load-more-color: #3a4550; }   /* was the 4.27.x default */
 :root { --pill-tone-muted-color: #6b7280; }   /* was the 4.27.x default */
+:root { --sankey-col-label-color: #666; }   /* was the 4.27.x default */
+:root { --sankey-label-color: #333; }   /* was the 4.27.x default */
 :root { --select-placeholder-color: #999999; }   /* was the 4.27.x default */
 :root { --separator-margin: 0px 12px 0px 12px; }   /* was the 4.27.x default */
 :root { --statcard-breakdown-label-color: #9ca3af; }   /* was the 4.27.x default */
@@ -66,6 +70,10 @@
 :root { --task-list-secondary-color: #9a9a9a; }   /* was the 4.27.x default */
 :root { --thinking-indicator-detail-color: #bebebe; }   /* was the 4.27.x default */
 :root { --thinking-indicator-elapsed-color: #9a9a9a; }   /* was the 4.27.x default */
+:root { --thinking-indicator-label-color: #858585; }   /* was the 4.27.x default */
+:root { --thinking-indicator-trace-added-color: #1f7a5f; }   /* was the 4.27.x default */
+:root { --thinking-indicator-trace-more-color: #9a9a9a; }   /* was the 4.27.x default */
+:root { --thinking-indicator-trace-removed-color: #c93f38; }   /* was the 4.27.x default */
 :root { --thinking-indicator-trace-secondary-color: #9a9a9a; }   /* was the 4.27.x default */
 :root { --tool-call-log-error-color: #c93f38; }   /* was the 4.27.x default */
 :root { --tool-call-log-meta-color: #9a9a9a; }   /* was the 4.27.x default */

package/dist-codemod/codemod/migration-assets-layout.js

@@ -0,0 +1,61 @@
+import { join } from 'node:path';
+/**
+ * Where the migration assets live in the BUILT package, in one place.
+ *
+ * Three different pieces of code have to agree on this directory and, before
+ * this module, each spelled it out on its own: the generator that writes it
+ * (`generate-migration-assets.ts`), the compiled reader that finds it
+ * (`migrate-audit.ts`) and the unit tests that check the real artifact. When
+ * `tsconfig.build.json` gained a second source tree the compiled layout moved
+ * from `dist-codemod/migration-assets` to `dist-codemod/codemod/migration-assets`;
+ * the generator and the reader were updated and the test's hand-written copy of
+ * the old path was not, so its "run build:codemod first" skip kept firing after
+ * a complete build and the real-artifact checks silently stopped running.
+ *
+ * The assets sit BESIDE the compiled `migrate-audit.js` and are resolved off
+ * its own `import.meta.url`, so the layout is "a `migration-assets` directory
+ * next to the compiled module", not an absolute location:
+ *
+ *   dist-codemod/                     <- tsconfig.build.json `outDir`
+ *     codemod/                        <- `scripts/codemod`, relative to its `rootDir` (`scripts`)
+ *       bin.js  migrate-audit.js  ...
+ *       migration-assets/             <- written by generate-migration-assets.ts
+ *         wc-display.json  legacy-display.css  legacy-palette.css
+ *
+ * `migration-assets-layout.test.ts` pins these constants to `tsconfig.build.json`
+ * (`outDir`, `rootDir`) and to package.json (`bin`, `files`) so a change to any
+ * of them fails there instead of being discovered as a skipped test.
+ *
+ * Compiled into `dist-codemod` (it is imported by `migrate-audit.ts`) and also
+ * imported by the build-only generator, which node runs with
+ * `--experimental-strip-types`: keep it to erasable TypeScript.
+ */
+/** Package-root directory `build:codemod` emits into; `tsconfig.build.json` `outDir`. */
+export const DIST_CODEMOD_DIRNAME = 'dist-codemod';
+/** `scripts/codemod` as it appears under `DIST_CODEMOD_DIRNAME`, because `rootDir` is `scripts`. */
+export const COMPILED_CODEMOD_DIRNAME = 'codemod';
+export const MIGRATION_ASSETS_DIRNAME = 'migration-assets';
+export const WC_DISPLAY_FILENAME = 'wc-display.json';
+export const LEGACY_DISPLAY_CSS_FILENAME = 'legacy-display.css';
+export const LEGACY_PALETTE_CSS_FILENAME = 'legacy-palette.css';
+/** Everything the generator writes into the assets directory. */
+export const MIGRATION_ASSET_FILENAMES = [
+    WC_DISPLAY_FILENAME,
+    LEGACY_DISPLAY_CSS_FILENAME,
+    LEGACY_PALETTE_CSS_FILENAME
+];
+/**
+ * The assets directory that sits beside a compiled module. The runtime lookup:
+ * `migrate-audit.ts` passes its own directory.
+ */
+export function migrationAssetsDirBeside(compiledModuleDir) {
+    return join(compiledModuleDir, MIGRATION_ASSETS_DIRNAME);
+}
+/**
+ * The assets directory a build of the package rooted at `packageRoot` produces
+ * and the published tarball ships. The generator's default `--out`, and what
+ * the real-artifact tests read.
+ */
+export function builtMigrationAssetsDir(packageRoot) {
+    return migrationAssetsDirBeside(join(packageRoot, DIST_CODEMOD_DIRNAME, COMPILED_CODEMOD_DIRNAME));
+}