@juspay/svelte-ui-components 4.27.5 → 4.28.0

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

@@ -0,0 +1,395 @@
+import { existsSync, readFileSync, readdirSync, statSync, writeFileSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+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";
+/**
+ * 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
+ * this package installed -- never a repo clone. `npm run migrate` (see
+ * scripts/migrate/cli.ts) is not itself shippable: it reads this library's
+ * OWN `src/wc/components` and git history, neither of which exist in
+ * node_modules. This file reuses its detectors (`analyzeSvelte`/
+ * `analyzeStylesheet`) unmodified and replaces only the one input that
+ * required repo-only sources -- `AnalyzeContext.wcComponents` -- with a
+ * reader for `wc-display.json`, a plain data file `generate-migration-assets.ts`
+ * derives during `build:codemod` and ships inside `dist-codemod`. See that
+ * file for what it writes and why: `wc-display.json`, `legacy-display.css`,
+ * `legacy-palette.css`.
+ *
+ * Deliberately narrower than `npm run migrate`: it does not reproduce that
+ * script's package.json/svelte-peer version bump (`analyzeManifest`) --
+ * that is a different, repo-version-coupled feature (pin/bump this
+ * library's own dependency range), not one of the seven breaking changes
+ * this migration guide documents. What ships here is the audit for those
+ * seven, which is the part a consumer with only the published package can
+ * 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.
+ * 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
+ * has no other way to find build output that was never produced, and
+ * `loadWcDisplay` below turns that into an honest "missing" result rather
+ * than a guess.
+ */
+function defaultAssetsDir() {
+    return join(dirname(fileURLToPath(import.meta.url)), MIGRATION_ASSETS_DIRNAME);
+}
+/** Same no-assertion narrowing `analyze.ts`'s own `asRecord` uses: copies known-present keys onto a fresh object rather than casting. */
+function asRecord(value) {
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+        return null;
+    }
+    const record = {};
+    for (const key of Object.keys(value)) {
+        Object.defineProperty(record, key, {
+            value: Reflect.get(value, key),
+            enumerable: true,
+            writable: true,
+            configurable: true
+        });
+    }
+    return record;
+}
+/**
+ * `null`, never a boolean, on anything that fails to match -- the fail-closed
+ * rule `host-display-compat.ts`'s own `parseHostDisplay` documents: a shim
+ * silently missing an entry looks exactly as complete as one that isn't, and
+ * the same is true of a context built from a partially-invalid file. One bad
+ * entry invalidates the whole read; see `loadWcDisplay`.
+ */
+function asWcDisplayEntry(value) {
+    const record = asRecord(value);
+    if (record === null) {
+        return null;
+    }
+    const { tag, property } = record;
+    const wcDefault = record.default;
+    if (typeof tag !== 'string' || tag.length === 0) {
+        return null;
+    }
+    if (typeof property !== 'string' || property.length === 0) {
+        return null;
+    }
+    if (wcDefault !== 'block' && wcDefault !== 'inline-block') {
+        return null;
+    }
+    return { tag, property, default: wcDefault };
+}
+/**
+ * Reads and validates `wc-display.json`, distinguishing "the file is absent"
+ * from "the file is present but unreadable" from "ok" -- collapsing either
+ * failure to an empty component list would make `host-display-inline` and
+ * `chart-min-width` report zero findings exactly as a genuinely clean project
+ * would, which is the one thing this audit must not do silently.
+ */
+export function loadWcDisplay(path) {
+    if (!existsSync(path)) {
+        return { status: 'missing', path };
+    }
+    let parsed;
+    try {
+        parsed = JSON.parse(readFileSync(path, 'utf8'));
+    }
+    catch (error) {
+        return {
+            status: 'invalid',
+            path,
+            reason: `not valid JSON (${error instanceof Error ? error.message : String(error)})`
+        };
+    }
+    if (!Array.isArray(parsed)) {
+        return { status: 'invalid', path, reason: 'expected a JSON array at the top level' };
+    }
+    const entries = [];
+    for (const [index, item] of parsed.entries()) {
+        const entry = asWcDisplayEntry(item);
+        if (entry === null) {
+            return {
+                status: 'invalid',
+                path,
+                reason: `entry ${index} is missing a valid tag/property/default`
+            };
+        }
+        entries.push(entry);
+    }
+    // An empty array is not a valid manifest, it is a broken build that parsed.
+    // Accepting it made the audit print `wc-display.json: ok (0 component(s))`
+    // and then silently run with `host-display-inline` and `chart-min-width`
+    // disabled -- a clean report that had checked two fewer things than it
+    // claimed, which is indistinguishable from a project that has neither
+    // problem. `collectWcDisplayEntries` already refuses to WRITE an empty
+    // manifest for the same reason; this is the reading half of that rule.
+    if (entries.length === 0) {
+        return {
+            status: 'invalid',
+            path,
+            reason: 'contains no components — the build that produced it was broken'
+        };
+    }
+    return { status: 'ok', path, entries };
+}
+/**
+ * Recovers each entry's `component` (the wrapped Svelte component's PascalCase
+ * name -- `chart-min-width`'s "*Chart" filter and `inputbutton-mandatory`'s
+ * "InputButton" spelling both key off it, see `analyzeSvelte`) from `tag`
+ * alone, since `wc-display.json` does not carry it (see `WcDisplayEntry`
+ * above). This is the one place this file re-derives something `readWcComponents`
+ * also derives, rather than only relaying data across the wc-display.json
+ * boundary -- justified because the boundary's schema does not (yet) carry the
+ * field, and bounded because it is checked against real output below rather
+ * than trusted blind: every `sui-*` wrapper in this checkout follows
+ * `sui-<kebab-case>` <-> `<PascalCase>`, EXCEPT one (`sui-hitl` -> `HITL`,
+ * which this produces as `Hitl`) -- and that exception is neither a `*Chart`
+ * name nor `InputButton`, so it cannot affect either detector that reads
+ * `component`. A future acronym-named Chart component or a renamed
+ * InputButton would need this fixed at the source instead: threading
+ * `component` through `HostDisplayEntry` (derivable there from `file`'s own
+ * basename, exactly as `readWcComponents` derives it) and into
+ * `WcDisplayAsset`/`wc-display.json` itself, which this file cannot do --
+ * `generate-migration-assets.ts` and `host-display-compat.ts` are not its own.
+ */
+function pascalCaseFromTag(tag) {
+    return tag
+        .replace(/^sui-/, '')
+        .split('-')
+        .filter((segment) => segment.length > 0)
+        .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+        .join('');
+}
+export function wcComponentsFrom(entries) {
+    return entries.map((entry) => ({
+        component: pascalCaseFromTag(entry.tag),
+        tag: entry.tag,
+        display: entry.default
+    }));
+}
+function shimStatus(assetsDir, filename) {
+    const path = join(assetsDir, filename);
+    return { filename, present: existsSync(path), path };
+}
+/**
+ * `.svelte` and `.css` files under `root`, skipping the same directories the
+ * prop-rename transform skips (`SKIPPED_DIRECTORIES`, imported from `cli.ts`
+ * rather than redeclared, so the two commands can never drift apart on what
+ * "skip node_modules et al." means). Not `scripts/migrate/cli.ts`'s own
+ * `projectFiles` -- that function is module-private there and reading a
+ * consumer's files is a three-line walk, not detection logic, so writing it
+ * here is not the kind of duplication the analyzers themselves must avoid.
+ */
+function consumerFiles(root) {
+    const svelte = [];
+    const css = [];
+    const visit = (dir) => {
+        for (const entry of readdirSync(dir, { withFileTypes: true })) {
+            if (entry.isDirectory()) {
+                if (!SKIPPED_DIRECTORIES.has(entry.name)) {
+                    visit(join(dir, entry.name));
+                }
+                continue;
+            }
+            if (entry.name.endsWith('.svelte')) {
+                svelte.push(join(dir, entry.name));
+            }
+            else if (entry.name.endsWith('.css')) {
+                css.push(join(dir, entry.name));
+            }
+        }
+    };
+    visit(root);
+    return { svelte, css };
+}
+const MIGRATE_USAGE = [
+    'Usage: sui-codemod migrate [--dry-run] <consumer path>',
+    '       (inside this repository: node scripts/codemod/cli.ts migrate ...)',
+    '',
+    `Audits a consumer project against the seven breaking changes in ${LIBRARY} 4.28.0:`,
+    "InputButton's mandatory prop now also setting native required; a sui-*",
+    "custom element used where the browser's old implicit inline mattered; a",
+    'chart rendered into a parent narrower than its new 160px floor; the',
+    'renamed chart tooltip slot selector; and sui-chat-composer’s recording',
+    "attribute, which no longer reflects. See scripts/migrate/README.md's",
+    'reason table -- the same detectors run here as in `npm run migrate`.',
+    '',
+    'The chart tooltip selector rewrite is mechanical, so it is also applied',
+    'directly (like the default prop-rename command): every other finding is',
+    'reported for review, never rewritten automatically.',
+    '',
+    '  --dry-run   print the tooltip selector rewrite as a diff without writing it',
+    '  --help      show this help',
+    '',
+    'Also reports whether this install shipped the two compatibility',
+    `stylesheets the migration guide describes -- ${LEGACY_DISPLAY_CSS_FILENAME} and`,
+    `${LEGACY_PALETTE_CSS_FILENAME} -- by name, so a consumer knows to look for them`,
+    'instead of generating either by hand.'
+].join('\n');
+function emptySummary(exitCode, wcDisplay) {
+    return {
+        exitCode,
+        filesScanned: 0,
+        cssFilesScanned: 0,
+        findings: [],
+        wcDisplay,
+        rewrites: [],
+        applied: false
+    };
+}
+const UNRESOLVED_WC_DISPLAY = { status: 'missing', path: '' };
+function printLineDiff(file, before, after, log) {
+    const oldLines = before.split('\n');
+    const newLines = after.split('\n');
+    log(`--- ${file}`);
+    if (oldLines.length !== newLines.length) {
+        log('  (line counts differ; showing full replacement)');
+        for (const line of oldLines) {
+            log(`- ${line}`);
+        }
+        for (const line of newLines) {
+            log(`+ ${line}`);
+        }
+        return;
+    }
+    oldLines.forEach((oldLine, index) => {
+        const newLine = newLines.at(index) ?? '';
+        if (oldLine !== newLine) {
+            log(`@@ ${file}:${index + 1}`);
+            log(`- ${oldLine}`);
+            log(`+ ${newLine}`);
+        }
+    });
+}
+export function runMigrateAudit(argv, log, options = {}) {
+    let parsed;
+    try {
+        parsed = parseArgs({
+            args: [...argv],
+            options: {
+                'dry-run': { type: 'boolean' },
+                help: { type: 'boolean' }
+            },
+            allowPositionals: true,
+            strict: true
+        });
+    }
+    catch (error) {
+        log(error instanceof Error ? error.message : String(error));
+        log(MIGRATE_USAGE);
+        return emptySummary(2, UNRESOLVED_WC_DISPLAY);
+    }
+    if (parsed.values.help === true) {
+        log(MIGRATE_USAGE);
+        return emptySummary(0, UNRESOLVED_WC_DISPLAY);
+    }
+    if (parsed.positionals.length !== 1) {
+        log(MIGRATE_USAGE);
+        return emptySummary(2, UNRESOLVED_WC_DISPLAY);
+    }
+    const root = resolve(parsed.positionals[0]);
+    if (!existsSync(root) || !statSync(root).isDirectory()) {
+        log(`error: ${root} is not a directory`);
+        return emptySummary(2, UNRESOLVED_WC_DISPLAY);
+    }
+    const assetsDir = options.assetsDir ?? defaultAssetsDir();
+    const wcDisplay = loadWcDisplay(join(assetsDir, WC_DISPLAY_FILENAME));
+    log(`sui-codemod migrate: auditing ${root} against ${LIBRARY} 4.28.0`);
+    log('');
+    let context;
+    if (wcDisplay.status === 'ok') {
+        context = { wcComponents: wcComponentsFrom(wcDisplay.entries) };
+        log(`wc-display.json: ok (${wcDisplay.entries.length} component(s) at ${wcDisplay.path})`);
+    }
+    else if (wcDisplay.status === 'missing') {
+        context = { wcComponents: [] };
+        log(`wc-display.json: NOT FOUND at ${wcDisplay.path}`);
+        log('  host-display-inline and chart-min-width could not be audited -- a clean result below');
+        log('  does not mean this project is clear of them, only that this run could not look. This');
+        log('  file ships inside dist-codemod; reinstall the package if it is missing.');
+    }
+    else {
+        context = { wcComponents: [] };
+        log(`wc-display.json: INVALID at ${wcDisplay.path} -- ${wcDisplay.reason}`);
+        log('  host-display-inline and chart-min-width could not be audited -- a clean result below');
+        log('  does not mean this project is clear of them, only that this run could not look.');
+    }
+    log('');
+    const files = consumerFiles(root);
+    const svelteFindings = files.svelte.flatMap((file) => analyzeSvelte(readFileSync(file, 'utf8'), relative(root, file), context));
+    const cssFindings = files.css.flatMap((file) => analyzeStylesheet(readFileSync(file, 'utf8'), relative(root, file)));
+    const findings = [...svelteFindings, ...cssFindings];
+    for (const finding of findings) {
+        log(`${finding.reason}  ${finding.file}:${finding.line}`);
+        log(`         ${finding.detail}`);
+    }
+    if (findings.length === 0) {
+        log(`No findings across ${files.svelte.length} .svelte and ${files.css.length} .css file(s).`);
+    }
+    log('');
+    // The one finding above that is mechanically fixable: applied directly
+    // under sui-codemod's own --dry-run flag, the same way the default
+    // prop-rename command applies its rewrite -- never chart-tooltip-selector.ts's
+    // own --apply, which this command does not expose.
+    const dryRun = parsed.values['dry-run'] === true;
+    const rewrites = planSelectorRewrites(root);
+    for (const rewrite of rewrites) {
+        const parts = [
+            rewrite.selectorCount > 0 ? `${rewrite.selectorCount} selector(s)` : '',
+            rewrite.scriptCount > 0 ? `${rewrite.scriptCount} querySelector string(s)` : ''
+        ].filter((part) => part.length > 0);
+        const relativeFile = relative(root, rewrite.file);
+        if (dryRun) {
+            const before = readFileSync(rewrite.file, 'utf8');
+            log(`[dry run] would rewrite ${relativeFile}: ${parts.join(', ')}`);
+            printLineDiff(relativeFile, before, rewrite.code, log);
+        }
+        else {
+            writeFileSync(rewrite.file, rewrite.code);
+            log(`rewrote ${relativeFile}: ${parts.join(', ')}`);
+        }
+    }
+    if (rewrites.length === 0) {
+        log('No .chart-tooltip-slot selector found to rewrite.');
+    }
+    log('');
+    const legacyDisplay = shimStatus(assetsDir, LEGACY_DISPLAY_CSS_FILENAME);
+    const legacyPalette = shimStatus(assetsDir, LEGACY_PALETTE_CSS_FILENAME);
+    log('Compatibility shims shipped with this install:');
+    log(`  ${legacyDisplay.filename}: ${legacyDisplay.present ? `present at ${legacyDisplay.path}` : 'NOT FOUND'} -- restores the old implicit "inline" default host-display-inline findings above describe`);
+    log(`  ${legacyPalette.filename}: ${legacyPalette.present ? `present at ${legacyPalette.path}` : 'NOT FOUND'} -- restores pre-contrast-pass colors; this audit has no detector for that change, review docs/MIGRATION_4.28.md`);
+    log('');
+    // Findings are computed before the rewrite runs, so on a non-dry run the
+    // tooltip selectors this command just FIXED are still sitting in that list.
+    // Reporting them as "needing review" sends a consumer to look at something
+    // that is already correct on disk, and — worse — makes a second run look
+    // like it changed nothing when it had nothing left to change. What remains
+    // is what the consumer still has to do by hand.
+    const rewrittenFiles = new Set(rewrites.map((rewrite) => relative(root, rewrite.file)));
+    const remaining = dryRun || rewrites.length === 0
+        ? findings
+        : findings.filter((finding) => finding.reason !== 'chart-tooltip-slot-selector' || !rewrittenFiles.has(finding.file));
+    const fixedCount = findings.length - remaining.length;
+    log(`scanned ${files.svelte.length} .svelte and ${files.css.length} .css file(s), ` +
+        `${remaining.length} finding(s) needing review` +
+        (fixedCount > 0 ? `, ${fixedCount} already fixed by this run` : '') +
+        `, ${rewrites.length} file(s) with an auto-fixable tooltip selector`);
+    return {
+        exitCode: 0,
+        filesScanned: files.svelte.length,
+        cssFilesScanned: files.css.length,
+        findings: remaining,
+        wcDisplay,
+        rewrites,
+        applied: !dryRun && rewrites.length > 0
+    };
+}

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

@@ -0,0 +1,120 @@
+/**
+ * COMPATIBILITY SHIM -- generated by scripts/migrate/host-display-compat.ts
+ * Regenerate: node scripts/migrate/host-display-compat.ts --out <path>
+ *
+ * Before this version, none of these custom elements declared a :host display rule, so an
+ * unknown element's browser default -- display: inline -- applied. This version gives each one
+ * an explicit ":host { display: var(--sui-<name>-display, <default>) }", which is a real layout
+ * change at an unchanged call site for any consumer who laid out around the old implicit inline.
+ *
+ * Each rule below pins that element's display custom property back to inline, restoring the
+ * exact pre-upgrade layout: drop this file in, confirm nothing moved, then delete rules
+ * one at a time as each call site is verified against the new default.
+ *
+ * DO NOT KEEP THIS FILE. Restoring the old implicit inline forever reintroduces the bug the
+ * :host rule fixed: a percentage-width child of an implicitly-inline host has no width to
+ * resolve against, so "width: 100%" inside one of these elements silently collapses. This
+ * stylesheet is a crutch for the migration window, not a permanent override.
+ */
+
+/* components whose new default is `block` (87) */
+sui-accordion { --sui-accordion-display: inline; }
+sui-area-chart { --sui-area-chart-display: inline; }
+sui-aspect-ratio { --sui-aspect-ratio-display: inline; }
+sui-attachment-chip-row { --sui-attachment-chip-row-display: inline; }
+sui-badge { --sui-badge-display: inline; }
+sui-banner { --sui-banner-display: inline; }
+sui-bar-chart { --sui-bar-chart-display: inline; }
+sui-book { --sui-book-display: inline; }
+sui-brand-loader { --sui-brand-loader-display: inline; }
+sui-breadcrumb { --sui-breadcrumb-display: inline; }
+sui-browser { --sui-browser-display: inline; }
+sui-button { --sui-button-display: inline; }
+sui-calendar { --sui-calendar-display: inline; }
+sui-card { --sui-card-display: inline; }
+sui-carousel { --sui-carousel-display: inline; }
+sui-chat { --sui-chat-display: inline; }
+sui-chat-bubble { --sui-chat-bubble-display: inline; }
+sui-chat-composer { --sui-chat-composer-display: inline; }
+sui-chat-header { --sui-chat-header-display: inline; }
+sui-chat-message { --sui-chat-message-display: inline; }
+sui-chat-message-list { --sui-chat-message-list-display: inline; }
+sui-chat-tool-status { --sui-chat-tool-status-display: inline; }
+sui-check-list-item { --sui-check-list-item-display: inline; }
+sui-chip-input { --sui-chip-input-display: inline; }
+sui-choicebox { --sui-choicebox-display: inline; }
+sui-color-picker { --sui-color-picker-display: inline; }
+sui-combobox { --sui-combobox-display: inline; }
+sui-command-menu { --sui-command-menu-display: inline; }
+sui-context-menu { --sui-context-menu-display: inline; }
+sui-draggable { --sui-draggable-display: inline; }
+sui-dual-axis-bar-chart { --sui-dual-axis-bar-chart-display: inline; }
+sui-empty-state { --sui-empty-state-display: inline; }
+sui-file-dropzone-trigger { --sui-file-dropzone-trigger-display: inline; }
+sui-file-input { --sui-file-input-display: inline; }
+sui-funnel-chart { --sui-funnel-chart-display: inline; }
+sui-gallery { --sui-gallery-display: inline; }
+sui-gauge { --sui-gauge-display: inline; }
+sui-grid-item { --sui-grid-item-display: inline; }
+sui-hitl { --sui-hitl-display: inline; }
+sui-icon { --sui-icon-display: inline; }
+sui-icon-stack { --sui-icon-stack-display: inline; }
+sui-iframe-viewer { --sui-iframe-viewer-display: inline; }
+sui-input { --sui-input-display: inline; }
+sui-input-button { --sui-input-button-display: inline; }
+sui-key-value { --sui-key-value-display: inline; }
+sui-line-chart { --sui-line-chart-display: inline; }
+sui-list-item { --sui-list-item-display: inline; }
+sui-loader { --sui-loader-display: inline; }
+sui-lottie-player { --sui-lottie-player-display: inline; }
+sui-markdown-text { --sui-markdown-text-display: inline; }
+sui-media-player { --sui-media-player-display: inline; }
+sui-media-upload { --sui-media-upload-display: inline; }
+sui-menu { --sui-menu-display: inline; }
+sui-modal { --sui-modal-display: inline; }
+sui-pagination { --sui-pagination-display: inline; }
+sui-phone { --sui-phone-display: inline; }
+sui-pie-chart { --sui-pie-chart-display: inline; }
+sui-pill { --sui-pill-display: inline; }
+sui-progress { --sui-progress-display: inline; }
+sui-proportion-bar { --sui-proportion-bar-display: inline; }
+sui-rating-group { --sui-rating-group-display: inline; }
+sui-relative-time { --sui-relative-time-display: inline; }
+sui-resizable { --sui-resizable-display: inline; }
+sui-sankey-chart { --sui-sankey-chart-display: inline; }
+sui-scroller { --sui-scroller-display: inline; }
+sui-select { --sui-select-display: inline; }
+sui-separator { --sui-separator-display: inline; }
+sui-sheet { --sui-sheet-display: inline; }
+sui-shimmer { --sui-shimmer-display: inline; }
+sui-slider { --sui-slider-display: inline; }
+sui-snippet { --sui-snippet-display: inline; }
+sui-split-button { --sui-split-button-display: inline; }
+sui-split-input { --sui-split-input-display: inline; }
+sui-stat-card { --sui-stat-card-display: inline; }
+sui-status { --sui-status-display: inline; }
+sui-stepper { --sui-stepper-display: inline; }
+sui-table { --sui-table-display: inline; }
+sui-tabs { --sui-tabs-display: inline; }
+sui-task-list { --sui-task-list-display: inline; }
+sui-thinking-indicator { --sui-thinking-indicator-display: inline; }
+sui-toast { --sui-toast-display: inline; }
+sui-toggle { --sui-toggle-display: inline; }
+sui-tool-call-log { --sui-tool-call-log-display: inline; }
+sui-toolbar { --sui-toolbar-display: inline; }
+sui-tooltip { --sui-tooltip-display: inline; }
+sui-typewriter-text { --sui-typewriter-text-display: inline; }
+sui-voice-orb { --sui-voice-orb-display: inline; }
+
+/* components whose new default is `inline-block` (11) */
+sui-avatar { --sui-avatar-display: inline; }
+sui-chat-suggestions { --sui-chat-suggestions-display: inline; }
+sui-checkbox { --sui-checkbox-display: inline; }
+sui-date-range-picker { --sui-date-range-picker-display: inline; }
+sui-delta-indicator { --sui-delta-indicator-display: inline; }
+sui-img { --sui-img-display: inline; }
+sui-keyboard-input { --sui-keyboard-input-display: inline; }
+sui-label { --sui-label-display: inline; }
+sui-loading-dots { --sui-loading-dots-display: inline; }
+sui-radio { --sui-radio-display: inline; }
+sui-theme-switcher { --sui-theme-switcher-display: inline; }

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

@@ -0,0 +1,106 @@
+/*
+ * Legacy palette -- pins this library to its pre-AA contrast fallbacks.
+ *
+ * PR 598 ran a WCAG-AA contrast pass over src/lib that darkened the
+ * literal fallback of the custom properties below. A consumer who never
+ * overrode one of these tokens rendered the OLD colour at an unchanged
+ * call site, and this stylesheet restores exactly that -- nothing more.
+ *
+ * Several of the values restored here FAIL WCAG AA; that is why the pass
+ * changed them. Adopting the new defaults -- i.e. NOT loading this file --
+ * is the intended end state. This exists to make that change reviewable
+ * one property at a time, not to be a permanent fixture in a consumer
+ * build.
+ *
+ * 51 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 { --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 */
+:root { --card-description-opacity: 0.6; }   /* was the 4.27.x default */
+:root { --chat-composer-placeholder-color: #a1a1aa; }   /* was the 4.27.x default */
+:root { --chat-message-link-color: #6d28d9; }   /* was the 4.27.x default */
+: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-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 */
+:root { --file-dropzone-trigger-caption-color: #64748b; }   /* was the 4.27.x default */
+:root { --hitl-approved-color: #16a34a; }   /* was the 4.27.x default */
+:root { --hitl-badge-color: #858585; }   /* was the 4.27.x default */
+:root { --hitl-description-color: #858585; }   /* was the 4.27.x default */
+:root { --hitl-param-label-color: #858585; }   /* was the 4.27.x default */
+:root { --input-char-count-color: #98a2b3; }   /* was the 4.27.x default */
+:root { --loader-text-color: white; }   /* was the 4.27.x default */
+:root { --media-upload-add-color: #6b7280; }   /* was the 4.27.x default */
+:root { --media-upload-add-hint-color: #9aa0a8; }   /* was the 4.27.x default */
+:root { --media-upload-counter-color: #8a8f98; }   /* was the 4.27.x default */
+: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 { --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 */
+:root { --statcard-delta-positive-color: #16a34a; }   /* was the 4.27.x default */
+:root { --statcard-row-additional-color: #9ca3af; }   /* was the 4.27.x default */
+:root { --statcard-subtitle-color: #9ca3af; }   /* was the 4.27.x default */
+:root { --statcard-value-warning-color: #f59e0b; }   /* was the 4.27.x default */
+:root { --step-index-container-background-color: #798fa5cc; }   /* was the 4.27.x default */
+:root { --step-index-container-completed-background-color: #24aa5a; }   /* was the 4.27.x default */
+:root { --step-text-color: #798fa5cc; }   /* was the 4.27.x default */
+:root { --step-text-completed-color: #24aa5a; }   /* was the 4.27.x default */
+:root { --stepper-separator-background-image-completed-color: #24aa5a; }   /* was the 4.27.x default */
+:root { --table-cell-thumb-placeholder-color: #6b7280; }   /* was the 4.27.x default */
+:root { --table-search-placeholder-color: #9ca3af; }   /* was the 4.27.x default */
+:root { --table-title-color: #111827; }   /* was the 4.27.x default */
+:root { --table-trend-up-color: #16a34a; }   /* was the 4.27.x default */
+:root { --tabs-active-color: #1a73e8; }   /* was the 4.27.x default */
+:root { --task-list-pending-opacity: 0.55; }   /* was the 4.27.x default */
+: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-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 */
+:root { --tool-call-log-removed-color: #c93f38; }   /* was the 4.27.x default */
+
+/*
+ * Not literal pins -- these properties did not exist on the selectors
+ * below at all before this change, so each one rendered whatever value
+ * its ANCESTOR supplied, not a value from this library. There is no old
+ * literal to restore, only inheritance to put back, which is why the
+ * rule shape differs from the pins above.
+ *
+ * `--name: inherit;` would NOT do this: at :root there is no parent, so
+ * an unregistered custom property's `inherit` resolves to its own
+ * initial value -- the guaranteed-invalid value -- exactly as if it were
+ * never declared. An EMPTY value is what actually works: var(--name,
+ * <fallback>) uses <fallback> only while --name is unset; once --name
+ * has ANY value, even an empty one, that value is substituted instead,
+ * which here leaves the declaration with no value at all -- invalid at
+ * computed-value time, which for an inherited property computes to
+ * exactly the old behaviour: inherit from the ancestor.
+ */
+:root { --loader-sub-text-color: ; }   /* color on .sub-text (src/lib/BrandLoader/BrandLoader.svelte:87) was inherited, never declared */
+:root { --phone-screen-color: ; }   /* color on .phone-screen (src/lib/Phone/Phone.svelte:104) was inherited, never declared */
+
+
+/*
+ * Not pinned above -- each of these already had more than one literal
+ * fallback across src/lib before this change, so no single :root rule
+ * could restore "the previous default" without being wrong at some call
+ * site. Review the sites below by hand if your snapshots depend on them.
+ */
+/* --chart-empty-color: light-dark(#9ca3af, #6b7280) (src/lib/AreaChart/AreaChart.svelte:600), #9ca3af (src/lib/PieChart/PieChart.svelte:505) */
+/* --status-description-font-color: #2f3841 (src/lib/Status/Status.svelte:95), #436484cc (src/lib/Status/Status.svelte:100) */
+/* --step-text-failure-color: #e53935 (src/lib/Stepper/Step.svelte:159), #ef5350 (src/lib/Stepper/Stepper.svelte:182) */
+/* --step-text-in-progress-color: #f59e0b (src/lib/Stepper/Step.svelte:168), #fbbf24 (src/lib/Stepper/Stepper.svelte:194) */
+/* --stepper-separator-background-image-failure-color: #e53935 (src/lib/Stepper/Stepper.svelte:127), #ef5350 (src/lib/Stepper/Stepper.svelte:183) */
+/* --stepper-separator-background-image-in-progress-color: #f59e0b (src/lib/Stepper/Stepper.svelte:141), #fbbf24 (src/lib/Stepper/Stepper.svelte:195) */
+/* --stepper-status-failure-color: #e53935 (src/lib/Stepper/Step.svelte:162), #ef5350 (src/lib/Stepper/Stepper.svelte:189) */
+/* --stepper-status-in-progress-color: #f59e0b (src/lib/Stepper/Step.svelte:171), #fbbf24 (src/lib/Stepper/Stepper.svelte:201) */
+/* --tabs-item-color: #666666 (src/lib/Tabs/Tabs.svelte:407), #999999 (src/lib/Tabs/Tabs.svelte:611) */