@yahoo/uds 3.156.1 → 3.157.0

package/dist/css/dist/commands/css.cjs

@@ -26,6 +26,7 @@ const showHelp = () => {
 	require_print.print(`  ${require_colors.cyan("--silent, -s")}      Suppress output logging`);
 	require_print.print(`  ${require_colors.cyan("--verbose, -v")}     List every scanned file used for purging`);
 	require_print.print(`  ${require_colors.cyan("--workers <n>")}     Number of parallel workers (default: auto = CPU count - 1)`);
+	require_print.print(`  ${require_colors.cyan("--emit <mode>")}     Emission mode: exhaustive (default) | selective`);
 	require_print.print(`  ${require_colors.cyan("--force")}           Overwrite existing uds.theme.ts (for init)`);
 	require_print.print(`  ${require_colors.cyan("--help, -h")}        Show this help message`);
 	require_print.print("");

package/dist/css/dist/commands/css.helpers.cjs

@@ -21,6 +21,11 @@ const getCssInitOptions = (options) => ({
 	entry: entryOption(options.entry),
 	outputPath: stringOption(options.outFile)
 });
+const parseEmitOption = (value) => {
+	if (value === void 0 || value === null) return;
+	if (value === "exhaustive" || value === "selective") return value;
+	throw new Error(`Invalid --emit "${String(value)}". Expected 'exhaustive' or 'selective'.`);
+};
 const getCssRunOptions = (workspaceDir, options) => {
 	return {
 		workspaceDir,
@@ -29,6 +34,7 @@ const getCssRunOptions = (workspaceDir, options) => {
 		scope: stringOption(options.scope),
 		entryOption: entryOption(options.entry),
 		configOption: stringOption(options.config),
+		emit: parseEmitOption(options.emit),
 		watch: isTruthyFlag(options.watch) || isTruthyFlag(options.w),
 		silent: isTruthyFlag(options.silent) || isTruthyFlag(options.s),
 		verbose: isTruthyFlag(options.verbose) || isTruthyFlag(options.v),

package/dist/css/dist/commands/css.helpers.js

@@ -21,6 +21,11 @@ const getCssInitOptions = (options) => ({
 	entry: entryOption(options.entry),
 	outputPath: stringOption(options.outFile)
 });
+const parseEmitOption = (value) => {
+	if (value === void 0 || value === null) return;
+	if (value === "exhaustive" || value === "selective") return value;
+	throw new Error(`Invalid --emit "${String(value)}". Expected 'exhaustive' or 'selective'.`);
+};
 const getCssRunOptions = (workspaceDir, options) => {
 	return {
 		workspaceDir,
@@ -29,6 +34,7 @@ const getCssRunOptions = (workspaceDir, options) => {
 		scope: stringOption(options.scope),
 		entryOption: entryOption(options.entry),
 		configOption: stringOption(options.config),
+		emit: parseEmitOption(options.emit),
 		watch: isTruthyFlag(options.watch) || isTruthyFlag(options.w),
 		silent: isTruthyFlag(options.silent) || isTruthyFlag(options.s),
 		verbose: isTruthyFlag(options.verbose) || isTruthyFlag(options.v),

package/dist/css/dist/commands/css.js

@@ -26,6 +26,7 @@ const showHelp = () => {
 	print(`  ${cyan("--silent, -s")}      Suppress output logging`);
 	print(`  ${cyan("--verbose, -v")}     List every scanned file used for purging`);
 	print(`  ${cyan("--workers <n>")}     Number of parallel workers (default: auto = CPU count - 1)`);
+	print(`  ${cyan("--emit <mode>")}     Emission mode: exhaustive (default) | selective`);
 	print(`  ${cyan("--force")}           Overwrite existing uds.theme.ts (for init)`);
 	print(`  ${cyan("--help, -h")}        Show this help message`);
 	print("");

package/dist/css/dist/css/generate.cjs

@@ -47,11 +47,13 @@ const generateCSS = async (safelist, config, options) => {
 			safelist,
 			config,
 			enablePreflight: cssFlags.enablePreflight,
-			enableFontFaceDeclarations: cssFlags.enableFontFaceDeclarations
+			enableFontFaceDeclarations: cssFlags.enableFontFaceDeclarations,
+			emit: options?.cssOptions?.emit
 		}),
 		shouldPruneVars: cssFlags.shouldPruneVars,
 		safeVarPrefixes: options?.safeVarPrefixes ?? [],
-		scopeClass
+		scopeClass,
+		otherBoundaryScopes: options?.otherBoundaryScopes ?? []
 	});
 	const result = await require_perf.measureAsync("gen:postcss", () => (0, postcss.default)(plugins).process(sourceCSS, { from: void 0 }));
 	let css = await require_perf.measureAsync("gen:scoped-color-fix", () => require_generate_helpers.applyScopedColorModeFix(result.css, scopeClass));

package/dist/css/dist/css/generate.d.cts

@@ -1,4 +1,5 @@
 
+import { EmitMode } from "../packages/automated-config/dist/utils/index.cjs";
 import { TailwindSafelistConfig } from "./generate.helpers.cjs";
 import { UDSCSSOptimizationOptions } from "./theme.cjs";
 
@@ -19,6 +20,33 @@ interface UDSCSSOptions {
   fontFaceDeclarations?: boolean;
   /** Debounce delay (ms) for watch mode regenerations */
   watchDebounce?: number;
+  /**
+   * Emission mode. `exhaustive` (default) emits a rule for every state — safe to
+   * coexist with other themes with no extra config. `selective` emits only
+   * rest + customized states (smaller) and relies on declared boundaries
+   * (`scoped` / `excludeBoundaries`) + the isolation fence for coexistence safety.
+   */
+  emit?: EmitMode;
+  /**
+   * Additional selectors whose subtrees this theme's bundles must not match.
+   * Every emitted bundle (main and each `scoped:` entry) gets a
+   * `:not(:where(:is(<boundaries>) *))` suffix on each theme-driven
+   * (token-referencing) rule that targets a NON-REST state (`:hover`,
+   * `:focus-within`, `:has(…)`, etc.), so its themed state styles never cross
+   * into one of these subtrees. Rest-state token rules resolve their tokens to
+   * the nested scope's own values (value-safe), so they're left untouched — as
+   * are Tailwind utilities, resets, and other non-token rules. Entries listed
+   * here are exclusion-only — they do not produce their own CSS file.
+   *
+   * Scope classes from `scoped:` entries are already added automatically;
+   * this field is the place to declare *non-bundled* boundaries (preview
+   * surfaces, opt-out subtrees, etc.) on top of those.
+   *
+   * Accepts any complete selector (`.class`, `#id`, `[attr]`, `:pseudo`).
+   * Bare identifiers are normalized to classes for backward compat with
+   * the automatic `scoped:`-derived boundary classes.
+   */
+  excludeBoundaries?: string[];
 }
 /**
  * Options for generateCSS function

package/dist/css/dist/css/generate.d.ts

@@ -1,4 +1,5 @@
 
+import { EmitMode } from "../packages/automated-config/dist/utils/index.js";
 import { TailwindSafelistConfig } from "./generate.helpers.js";
 import { UDSCSSOptimizationOptions } from "./theme.js";
 
@@ -19,6 +20,33 @@ interface UDSCSSOptions {
   fontFaceDeclarations?: boolean;
   /** Debounce delay (ms) for watch mode regenerations */
   watchDebounce?: number;
+  /**
+   * Emission mode. `exhaustive` (default) emits a rule for every state — safe to
+   * coexist with other themes with no extra config. `selective` emits only
+   * rest + customized states (smaller) and relies on declared boundaries
+   * (`scoped` / `excludeBoundaries`) + the isolation fence for coexistence safety.
+   */
+  emit?: EmitMode;
+  /**
+   * Additional selectors whose subtrees this theme's bundles must not match.
+   * Every emitted bundle (main and each `scoped:` entry) gets a
+   * `:not(:where(:is(<boundaries>) *))` suffix on each theme-driven
+   * (token-referencing) rule that targets a NON-REST state (`:hover`,
+   * `:focus-within`, `:has(…)`, etc.), so its themed state styles never cross
+   * into one of these subtrees. Rest-state token rules resolve their tokens to
+   * the nested scope's own values (value-safe), so they're left untouched — as
+   * are Tailwind utilities, resets, and other non-token rules. Entries listed
+   * here are exclusion-only — they do not produce their own CSS file.
+   *
+   * Scope classes from `scoped:` entries are already added automatically;
+   * this field is the place to declare *non-bundled* boundaries (preview
+   * surfaces, opt-out subtrees, etc.) on top of those.
+   *
+   * Accepts any complete selector (`.class`, `#id`, `[attr]`, `:pseudo`).
+   * Bare identifiers are normalized to classes for backward compat with
+   * the automatic `scoped:`-derived boundary classes.
+   */
+  excludeBoundaries?: string[];
 }
 /**
  * Options for generateCSS function

package/dist/css/dist/css/generate.helpers.cjs

@@ -81,7 +81,8 @@ const createTailwindPlugin = async (options) => {
 		plugins: [require_tailwindPlugin.tailwindPlugin({
 			config: options.config,
 			disableFontFaceDeclarations: !options.enableFontFaceDeclarations,
-			ignorePluginSafelists: true
+			ignorePluginSafelists: true,
+			emit: options.emit
 		})]
 	});
 };
@@ -97,6 +98,8 @@ const buildPostcssPlugins = (options) => {
 	const plugins = [options.tailwindPlugin, (0, autoprefixer.default)()];
 	if (options.shouldPruneVars) plugins.push(...getPruneVarPlugins(options.safeVarPrefixes));
 	if (options.scopeClass) plugins.push((0, postcss_scope.default)(options.scopeClass));
+	const otherBoundaryScopes = options.otherBoundaryScopes ?? [];
+	if (otherBoundaryScopes.length > 0) plugins.push(require_postcss.appendIsolationExclusionPlugin(otherBoundaryScopes));
 	return plugins;
 };
 const applyScopedColorModeFix = async (css, scopeClass) => {
@@ -109,6 +112,7 @@ const optimizeGeneratedCss = async (options) => {
 		removeUnusedFonts: options.optimizationConfig?.removeUnusedFonts,
 		removeEmptyRules: options.optimizationConfig?.removeEmptyRules,
 		aggregateDuplicateSelectors: options.optimizationConfig?.aggregateDuplicateSelectors,
+		mergeIdenticalDeclarations: options.optimizationConfig?.mergeIdenticalDeclarations,
 		referenceCss: options.referenceCss,
 		scopeClass: options.scopeClass
 	};

package/dist/css/dist/css/generate.helpers.js

@@ -8,7 +8,7 @@ import { formatCssDuration } from "./runner.helpers.js";
 import { formatBytes } from "./utils.js";
 import { iconPruneVarsSafelist } from "../packages/icons/src/safelist.js";
 import { optimizeCSS } from "../utils/optimizeCSS.js";
-import { fixScopedColorModeSelectorsPlugin, fixScopedSelfOrParentSelectorsPlugin } from "./postcss.js";
+import { appendIsolationExclusionPlugin, fixScopedColorModeSelectorsPlugin, fixScopedSelfOrParentSelectorsPlugin } from "./postcss.js";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import fs from "node:fs";
@@ -74,7 +74,8 @@ const createTailwindPlugin = async (options) => {
 		plugins: [tailwindPlugin({
 			config: options.config,
 			disableFontFaceDeclarations: !options.enableFontFaceDeclarations,
-			ignorePluginSafelists: true
+			ignorePluginSafelists: true,
+			emit: options.emit
 		})]
 	});
 };
@@ -90,6 +91,8 @@ const buildPostcssPlugins = (options) => {
 	const plugins = [options.tailwindPlugin, autoprefixer()];
 	if (options.shouldPruneVars) plugins.push(...getPruneVarPlugins(options.safeVarPrefixes));
 	if (options.scopeClass) plugins.push(postcssScope(options.scopeClass));
+	const otherBoundaryScopes = options.otherBoundaryScopes ?? [];
+	if (otherBoundaryScopes.length > 0) plugins.push(appendIsolationExclusionPlugin(otherBoundaryScopes));
 	return plugins;
 };
 const applyScopedColorModeFix = async (css, scopeClass) => {
@@ -102,6 +105,7 @@ const optimizeGeneratedCss = async (options) => {
 		removeUnusedFonts: options.optimizationConfig?.removeUnusedFonts,
 		removeEmptyRules: options.optimizationConfig?.removeEmptyRules,
 		aggregateDuplicateSelectors: options.optimizationConfig?.aggregateDuplicateSelectors,
+		mergeIdenticalDeclarations: options.optimizationConfig?.mergeIdenticalDeclarations,
 		referenceCss: options.referenceCss,
 		scopeClass: options.scopeClass
 	};

package/dist/css/dist/css/generate.js

@@ -43,11 +43,13 @@ const generateCSS = async (safelist, config, options) => {
 			safelist,
 			config,
 			enablePreflight: cssFlags.enablePreflight,
-			enableFontFaceDeclarations: cssFlags.enableFontFaceDeclarations
+			enableFontFaceDeclarations: cssFlags.enableFontFaceDeclarations,
+			emit: options?.cssOptions?.emit
 		}),
 		shouldPruneVars: cssFlags.shouldPruneVars,
 		safeVarPrefixes: options?.safeVarPrefixes ?? [],
-		scopeClass
+		scopeClass,
+		otherBoundaryScopes: options?.otherBoundaryScopes ?? []
 	});
 	const result = await measureAsync("gen:postcss", () => postcss(plugins).process(sourceCSS, { from: void 0 }));
 	let css = await measureAsync("gen:scoped-color-fix", () => applyScopedColorModeFix(result.css, scopeClass));

package/dist/css/dist/css/postcss.cjs

@@ -49,6 +49,87 @@ const fixScopedColorModeSelectorsPlugin = (scopeClass) => {
 		}
 	};
 };
+/**
+* True when any declaration in the rule references a UDS token variable
+* (`var(--uds-…)`) — i.e. the rule is theme-driven. See
+* {@link appendIsolationExclusionPlugin} for why only those rules are isolated.
+*/
+const ruleReferencesUdsToken = (rule) => {
+	let found = false;
+	rule.walkDecls((decl) => {
+		if (decl.value.includes("var(--uds-")) {
+			found = true;
+			return false;
+		}
+	});
+	return found;
+};
+/**
+* PostCSS plugin to enforce per-bundle style isolation by appending an
+* exclusion suffix to *theme-driven* rules' selectors.
+*
+* Each qualifying rule's deepest simple selector gets augmented with
+*   `:not(:where(:is(.A, .B, …) *))`
+*
+* where `.A`, `.B`, … are the scope classes of OTHER scoped bundles loaded
+* alongside this one (i.e. every `scoped:` entry in `uds.theme.ts` except
+* this bundle's own scope) plus any non-bundled selectors declared via
+* `css.excludeBoundaries`. This prevents this bundle's rules from matching
+* elements that live inside another scoped library's subtree, so each
+* scoped package gets a clean cascade inside its own scope-class wrapper
+* without bleed-through from neighboring bundles.
+*
+* **Why "theme-driven" only:** rules that reference a UDS token variable
+* (`var(--uds-…)` in any declaration value) carry committed-theme values
+* that would wrongly leak into a preview cell when the draft theme leaves
+* a property undefined (cascade order can't undo a value that isn't being
+* overridden). Rules that do NOT reference a token — Tailwind utilities,
+* structural resets, `display: flex` on a layout class, padding helpers,
+* etc. — are theme-independent: blocking them inside a preview boundary
+* is collateral damage that strips needed structural/utility behavior from
+* the rendered content. The plugin therefore leaves non-token-referencing
+* rules untouched (see {@link ruleReferencesUdsToken}).
+*
+* **Why non-rest only:** among token-referencing rules, only non-rest
+* STATE rules (`:hover`, `:focus-within`, `:has(…)`, etc.) need the fence.
+* A rest theme rule that leaks into a nested foreign scope resolves its
+* `var(--uds-*)` to that scope's own tokens (postcss-scope rewrites
+* `:root`→scope), so it is value-safe and fencing it would only add bytes
+* to the wire. The harmful leak is a non-rest state rule whose higher
+* specificity wins over the nested scope's own state rule, overriding a
+* value the nested scope explicitly set. Only those selectors are augmented
+* (see {@link isNonRestStateSelector}).
+*
+* Bundles whose neighbor list is empty (no other scoped libraries and no
+* `excludeBoundaries` entries are configured) get the selector unchanged —
+* the plugin is a no-op there and the bundle is byte-identical to its
+* pre-isolation output.
+*
+* `:where()` contributes (0, 0, 0) specificity, so the augmented selector
+* preserves the original's specificity exactly.
+*
+* NOTE: A single CSS `@scope (.<scope>) to (.A, .B, …)` declaration at the
+* top of the bundle would be the cleaner expression of this isolation — one
+* declaration instead of N selector tweaks — but `@scope` lacked sufficient
+* browser support when this was implemented (May 2026 — requires Chrome
+* 118+, Safari 17.4+, Firefox 128+). When the support floor moves up, this
+* plugin can be replaced with an `@scope` wrapper around the bundle,
+* dropping the per-rule suffix.
+*/
+const appendIsolationExclusionPlugin = (otherBoundaryScopes) => {
+	return {
+		postcssPlugin: "append-isolation-exclusion",
+		Once(root) {
+			if (otherBoundaryScopes.length === 0) return;
+			root.walkRules((rule) => {
+				if (!ruleReferencesUdsToken(rule)) return;
+				const nextSelectors = rule.selectors.map((selector) => require_postcss_helpers.isNonRestStateSelector(selector) ? require_postcss_helpers.injectIsolationExclusion(selector, otherBoundaryScopes) : selector);
+				if (nextSelectors.some((selector, idx) => selector !== rule.selectors[idx])) rule.selectors = nextSelectors;
+			});
+		}
+	};
+};
 //#endregion
+exports.appendIsolationExclusionPlugin = appendIsolationExclusionPlugin;
 exports.fixScopedColorModeSelectorsPlugin = fixScopedColorModeSelectorsPlugin;
 exports.fixScopedSelfOrParentSelectorsPlugin = fixScopedSelfOrParentSelectorsPlugin;

package/dist/css/dist/css/postcss.helpers.cjs

@@ -33,6 +33,66 @@ const getScopedSelfOrParentAlternativeSelector = (selector, scopeClass) => {
 	if (/^\.uds-color-mode-(?:dark|light)(?:$|[.#[:])/.test(scopedTarget)) return null;
 	return `${scopeClass}${scopedTarget}${targetMatch[2]}`;
 };
+/**
+* Insert the isolation-exclusion suffix
+* `:not(:where(:is(.A, .B, …) *))` into a single selector. The list is the
+* set of scope classes belonging to OTHER scoped bundles loaded on the page;
+* the suffix causes this bundle's rule to skip elements whose ancestor chain
+* contains any of those scope classes, preventing rule bleed-through into
+* another scoped library's subtree.
+*
+* For selectors ending in a pseudo-element (`.x::placeholder`, `.x::before`,
+* etc.), the suffix is inserted *before* the pseudo-element marker, since
+* pseudo-elements must remain at the very end of a selector and the
+* exclusion semantically applies to the host element.
+*
+* PRECONDITION: a pseudo-element, when present, is the trailing token of the
+* selector — true for every UDS/Tailwind-generated rule this plugin runs on.
+* Detection is a simple `lastIndexOf('::')`, so a pseudo-element in a non-final
+* compound (`.x::before .y`) or a literal `::` inside an attribute value would
+* be mis-handled; neither shape occurs in the generated CSS this processes.
+*
+* Returns the selector unchanged when `otherBoundaryScopes` is empty —
+* there's nothing to exclude.
+*/
+const injectIsolationExclusion = (selector, otherBoundaryScopes) => {
+	if (otherBoundaryScopes.length === 0) return selector;
+	const suffix = `:not(:where(:is(${otherBoundaryScopes.map((scope) => {
+		const trimmed = scope.trim();
+		return /^[.#[:]/.test(trimmed) ? trimmed : `.${trimmed}`;
+	}).join(", ")}) *))`;
+	const pseudoElementIdx = selector.lastIndexOf("::");
+	if (pseudoElementIdx === -1) return `${selector}${suffix}`;
+	return `${selector.slice(0, pseudoElementIdx)}${suffix}${selector.slice(pseudoElementIdx)}`;
+};
+/**
+* State pseudo-classes UDS emits for non-rest states: interactive
+* (`:hover`, `:active`, `:focus`, `:focus-within`, `:focus-visible`,
+* `:visited`, legacy `:disabled`) and `:has(…)` — which UDS uses only for the
+* `invalid`/`readonly`/`placeholder-shown`/`autofill`/`disabled` atoms. The
+* rest baseline carries none of these. Pseudo-ELEMENTS (`::placeholder`,
+* `::before`) use `::` so the single-colon matcher skips them; the structural
+* `:where()`/`:is()`/`:not()` (hover blockers and the isolation suffix itself)
+* are not states.
+*
+* MAINTENANCE: `readonly`/`placeholder-shown`/`autofill` (and `invalid`/
+* `disabled`) are intentionally absent as direct terms — UDS emits them wrapped
+* in `:has(…)`, so the `:has\(` branch already catches them. If a component ever
+* emits one of those atoms as a DIRECT pseudo-class (e.g. `:read-only`), add it
+* here: a missed state selector is a false negative (state bleed — the leak this
+* fence prevents), whereas an over-match would only fence a value-safe rest rule.
+*/
+const STATE_PSEUDO_RE = /:(?:hover|active|visited|disabled|focus(?:-within|-visible)?)\b|:has\(/;
+/**
+* True when a selector targets a non-rest (state) rule. Only non-rest theme
+* rules need the isolation fence: a rest theme rule leaking into a nested
+* foreign scope resolves its `var(--uds-*)` to that scope's own tokens
+* (postcss-scope rewrites `:root`→scope), so it is value-safe and fencing it
+* would only add bytes to the wire.
+*/
+const isNonRestStateSelector = (selector) => STATE_PSEUDO_RE.test(selector);
 //#endregion
 exports.buildScopedColorModeSelectorList = buildScopedColorModeSelectorList;
 exports.getScopedSelfOrParentAlternativeSelector = getScopedSelfOrParentAlternativeSelector;
+exports.injectIsolationExclusion = injectIsolationExclusion;
+exports.isNonRestStateSelector = isNonRestStateSelector;

package/dist/css/dist/css/postcss.helpers.js

@@ -33,5 +33,63 @@ const getScopedSelfOrParentAlternativeSelector = (selector, scopeClass) => {
 	if (/^\.uds-color-mode-(?:dark|light)(?:$|[.#[:])/.test(scopedTarget)) return null;
 	return `${scopeClass}${scopedTarget}${targetMatch[2]}`;
 };
+/**
+* Insert the isolation-exclusion suffix
+* `:not(:where(:is(.A, .B, …) *))` into a single selector. The list is the
+* set of scope classes belonging to OTHER scoped bundles loaded on the page;
+* the suffix causes this bundle's rule to skip elements whose ancestor chain
+* contains any of those scope classes, preventing rule bleed-through into
+* another scoped library's subtree.
+*
+* For selectors ending in a pseudo-element (`.x::placeholder`, `.x::before`,
+* etc.), the suffix is inserted *before* the pseudo-element marker, since
+* pseudo-elements must remain at the very end of a selector and the
+* exclusion semantically applies to the host element.
+*
+* PRECONDITION: a pseudo-element, when present, is the trailing token of the
+* selector — true for every UDS/Tailwind-generated rule this plugin runs on.
+* Detection is a simple `lastIndexOf('::')`, so a pseudo-element in a non-final
+* compound (`.x::before .y`) or a literal `::` inside an attribute value would
+* be mis-handled; neither shape occurs in the generated CSS this processes.
+*
+* Returns the selector unchanged when `otherBoundaryScopes` is empty —
+* there's nothing to exclude.
+*/
+const injectIsolationExclusion = (selector, otherBoundaryScopes) => {
+	if (otherBoundaryScopes.length === 0) return selector;
+	const suffix = `:not(:where(:is(${otherBoundaryScopes.map((scope) => {
+		const trimmed = scope.trim();
+		return /^[.#[:]/.test(trimmed) ? trimmed : `.${trimmed}`;
+	}).join(", ")}) *))`;
+	const pseudoElementIdx = selector.lastIndexOf("::");
+	if (pseudoElementIdx === -1) return `${selector}${suffix}`;
+	return `${selector.slice(0, pseudoElementIdx)}${suffix}${selector.slice(pseudoElementIdx)}`;
+};
+/**
+* State pseudo-classes UDS emits for non-rest states: interactive
+* (`:hover`, `:active`, `:focus`, `:focus-within`, `:focus-visible`,
+* `:visited`, legacy `:disabled`) and `:has(…)` — which UDS uses only for the
+* `invalid`/`readonly`/`placeholder-shown`/`autofill`/`disabled` atoms. The
+* rest baseline carries none of these. Pseudo-ELEMENTS (`::placeholder`,
+* `::before`) use `::` so the single-colon matcher skips them; the structural
+* `:where()`/`:is()`/`:not()` (hover blockers and the isolation suffix itself)
+* are not states.
+*
+* MAINTENANCE: `readonly`/`placeholder-shown`/`autofill` (and `invalid`/
+* `disabled`) are intentionally absent as direct terms — UDS emits them wrapped
+* in `:has(…)`, so the `:has\(` branch already catches them. If a component ever
+* emits one of those atoms as a DIRECT pseudo-class (e.g. `:read-only`), add it
+* here: a missed state selector is a false negative (state bleed — the leak this
+* fence prevents), whereas an over-match would only fence a value-safe rest rule.
+*/
+const STATE_PSEUDO_RE = /:(?:hover|active|visited|disabled|focus(?:-within|-visible)?)\b|:has\(/;
+/**
+* True when a selector targets a non-rest (state) rule. Only non-rest theme
+* rules need the isolation fence: a rest theme rule leaking into a nested
+* foreign scope resolves its `var(--uds-*)` to that scope's own tokens
+* (postcss-scope rewrites `:root`→scope), so it is value-safe and fencing it
+* would only add bytes to the wire.
+*/
+const isNonRestStateSelector = (selector) => STATE_PSEUDO_RE.test(selector);
 //#endregion
-export { buildScopedColorModeSelectorList, getScopedSelfOrParentAlternativeSelector };
+export { buildScopedColorModeSelectorList, getScopedSelfOrParentAlternativeSelector, injectIsolationExclusion, isNonRestStateSelector };

package/dist/css/dist/css/postcss.js

@@ -1,5 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { buildScopedColorModeSelectorList, getScopedSelfOrParentAlternativeSelector } from "./postcss.helpers.js";
+import { buildScopedColorModeSelectorList, getScopedSelfOrParentAlternativeSelector, injectIsolationExclusion, isNonRestStateSelector } from "./postcss.helpers.js";
 //#region ../css/dist/css/postcss.mjs
 /*! © 2026 Yahoo, Inc. UDS CSS v0.0.0-development */
 const fixScopedSelfOrParentSelectorsPlugin = (scopeClass) => {
@@ -49,5 +49,85 @@ const fixScopedColorModeSelectorsPlugin = (scopeClass) => {
 		}
 	};
 };
+/**
+* True when any declaration in the rule references a UDS token variable
+* (`var(--uds-…)`) — i.e. the rule is theme-driven. See
+* {@link appendIsolationExclusionPlugin} for why only those rules are isolated.
+*/
+const ruleReferencesUdsToken = (rule) => {
+	let found = false;
+	rule.walkDecls((decl) => {
+		if (decl.value.includes("var(--uds-")) {
+			found = true;
+			return false;
+		}
+	});
+	return found;
+};
+/**
+* PostCSS plugin to enforce per-bundle style isolation by appending an
+* exclusion suffix to *theme-driven* rules' selectors.
+*
+* Each qualifying rule's deepest simple selector gets augmented with
+*   `:not(:where(:is(.A, .B, …) *))`
+*
+* where `.A`, `.B`, … are the scope classes of OTHER scoped bundles loaded
+* alongside this one (i.e. every `scoped:` entry in `uds.theme.ts` except
+* this bundle's own scope) plus any non-bundled selectors declared via
+* `css.excludeBoundaries`. This prevents this bundle's rules from matching
+* elements that live inside another scoped library's subtree, so each
+* scoped package gets a clean cascade inside its own scope-class wrapper
+* without bleed-through from neighboring bundles.
+*
+* **Why "theme-driven" only:** rules that reference a UDS token variable
+* (`var(--uds-…)` in any declaration value) carry committed-theme values
+* that would wrongly leak into a preview cell when the draft theme leaves
+* a property undefined (cascade order can't undo a value that isn't being
+* overridden). Rules that do NOT reference a token — Tailwind utilities,
+* structural resets, `display: flex` on a layout class, padding helpers,
+* etc. — are theme-independent: blocking them inside a preview boundary
+* is collateral damage that strips needed structural/utility behavior from
+* the rendered content. The plugin therefore leaves non-token-referencing
+* rules untouched (see {@link ruleReferencesUdsToken}).
+*
+* **Why non-rest only:** among token-referencing rules, only non-rest
+* STATE rules (`:hover`, `:focus-within`, `:has(…)`, etc.) need the fence.
+* A rest theme rule that leaks into a nested foreign scope resolves its
+* `var(--uds-*)` to that scope's own tokens (postcss-scope rewrites
+* `:root`→scope), so it is value-safe and fencing it would only add bytes
+* to the wire. The harmful leak is a non-rest state rule whose higher
+* specificity wins over the nested scope's own state rule, overriding a
+* value the nested scope explicitly set. Only those selectors are augmented
+* (see {@link isNonRestStateSelector}).
+*
+* Bundles whose neighbor list is empty (no other scoped libraries and no
+* `excludeBoundaries` entries are configured) get the selector unchanged —
+* the plugin is a no-op there and the bundle is byte-identical to its
+* pre-isolation output.
+*
+* `:where()` contributes (0, 0, 0) specificity, so the augmented selector
+* preserves the original's specificity exactly.
+*
+* NOTE: A single CSS `@scope (.<scope>) to (.A, .B, …)` declaration at the
+* top of the bundle would be the cleaner expression of this isolation — one
+* declaration instead of N selector tweaks — but `@scope` lacked sufficient
+* browser support when this was implemented (May 2026 — requires Chrome
+* 118+, Safari 17.4+, Firefox 128+). When the support floor moves up, this
+* plugin can be replaced with an `@scope` wrapper around the bundle,
+* dropping the per-rule suffix.
+*/
+const appendIsolationExclusionPlugin = (otherBoundaryScopes) => {
+	return {
+		postcssPlugin: "append-isolation-exclusion",
+		Once(root) {
+			if (otherBoundaryScopes.length === 0) return;
+			root.walkRules((rule) => {
+				if (!ruleReferencesUdsToken(rule)) return;
+				const nextSelectors = rule.selectors.map((selector) => isNonRestStateSelector(selector) ? injectIsolationExclusion(selector, otherBoundaryScopes) : selector);
+				if (nextSelectors.some((selector, idx) => selector !== rule.selectors[idx])) rule.selectors = nextSelectors;
+			});
+		}
+	};
+};
 //#endregion
-export { fixScopedColorModeSelectorsPlugin, fixScopedSelfOrParentSelectorsPlugin };
+export { appendIsolationExclusionPlugin, fixScopedColorModeSelectorsPlugin, fixScopedSelfOrParentSelectorsPlugin };

package/dist/css/dist/css/runner.cjs

@@ -340,11 +340,17 @@ const runThemeMode = async (options, context) => {
 					...require_safelist.getInternalSafelistClasses()
 				]);
 				const allMotionComponents = [...inheritedComponents];
+				const emit = options.emit ?? themeConfig.css?.emit ?? "exhaustive";
+				const allBoundarySelectors = [...emit === "selective" ? scopedPackageTargets.map((target) => target.scopeClass) : [], ...themeConfig.css?.excludeBoundaries ?? []];
 				require_perf.captureMemory("before-gen");
 				const mainCssResult = await require_perf.measureAsync("gen", () => require_generate.generateCSS([...themeConfig.css?.safelist ?? [], ...mainSafelist], appConfig, {
 					scope: options.scope,
 					contentDir: entryDirs,
-					cssOptions: themeConfig.css,
+					cssOptions: {
+						...themeConfig.css,
+						emit
+					},
+					otherBoundaryScopes: allBoundarySelectors,
 					safeVarPrefixes: [
 						...require_utils.getMotionVarPrefixes(context.componentData, allMotionComponents),
 						...require_utils.getConfigurableCssVariables(),
@@ -375,7 +381,11 @@ const runThemeMode = async (options, context) => {
 					const scopedCssResult = await require_generate.generateCSS([...themeConfig.css?.safelist ?? [], ...packageSafelist], packageConfig, {
 						scope: scopedPackageTarget.scopeClass,
 						contentDir: scopedPackageTarget.entryDirs,
-						cssOptions: themeConfig.css,
+						cssOptions: {
+							...themeConfig.css,
+							emit
+						},
+						otherBoundaryScopes: allBoundarySelectors.filter((selector) => selector !== scopedPackageTarget.scopeClass),
 						referenceCss: themeConfig.css?.optimization?.deduplicateScopedCss === false ? void 0 : mainCssResult.css,
 						safeVarPrefixes: [
 							...require_utils.getMotionVarPrefixes(context.componentData, [...packageScanResult.components]),

package/dist/css/dist/css/runner.js

@@ -338,11 +338,17 @@ const runThemeMode = async (options, context) => {
 					...getInternalSafelistClasses()
 				]);
 				const allMotionComponents = [...inheritedComponents];
+				const emit = options.emit ?? themeConfig.css?.emit ?? "exhaustive";
+				const allBoundarySelectors = [...emit === "selective" ? scopedPackageTargets.map((target) => target.scopeClass) : [], ...themeConfig.css?.excludeBoundaries ?? []];
 				captureMemory("before-gen");
 				const mainCssResult = await measureAsync("gen", () => generateCSS([...themeConfig.css?.safelist ?? [], ...mainSafelist], appConfig, {
 					scope: options.scope,
 					contentDir: entryDirs,
-					cssOptions: themeConfig.css,
+					cssOptions: {
+						...themeConfig.css,
+						emit
+					},
+					otherBoundaryScopes: allBoundarySelectors,
 					safeVarPrefixes: [
 						...getMotionVarPrefixes(context.componentData, allMotionComponents),
 						...getConfigurableCssVariables(),
@@ -373,7 +379,11 @@ const runThemeMode = async (options, context) => {
 					const scopedCssResult = await generateCSS([...themeConfig.css?.safelist ?? [], ...packageSafelist], packageConfig, {
 						scope: scopedPackageTarget.scopeClass,
 						contentDir: scopedPackageTarget.entryDirs,
-						cssOptions: themeConfig.css,
+						cssOptions: {
+							...themeConfig.css,
+							emit
+						},
+						otherBoundaryScopes: allBoundarySelectors.filter((selector) => selector !== scopedPackageTarget.scopeClass),
 						referenceCss: themeConfig.css?.optimization?.deduplicateScopedCss === false ? void 0 : mainCssResult.css,
 						safeVarPrefixes: [
 							...getMotionVarPrefixes(context.componentData, [...packageScanResult.components]),

package/dist/css/dist/css/theme.d.cts

@@ -29,6 +29,12 @@ interface UDSCSSOptimizationOptions {
   removeEmptyRules?: boolean;
   /** Aggregate duplicate selectors (default: true) */
   aggregateDuplicateSelectors?: boolean;
+  /**
+   * Merge adjacent rules sharing an identical declaration block into a single
+   * comma-separated selector group (default: true). Cascade-safe: only
+   * consecutive sibling rules are merged.
+   */
+  mergeIdenticalDeclarations?: boolean;
   /**
    * Remove duplicate content from scoped CSS that already exists in main CSS (default: true)
    * Currently deduplicates @font-face declarations. Reduces bundle size when scoped packages

package/dist/css/dist/css/theme.d.ts

@@ -29,6 +29,12 @@ interface UDSCSSOptimizationOptions {
   removeEmptyRules?: boolean;
   /** Aggregate duplicate selectors (default: true) */
   aggregateDuplicateSelectors?: boolean;
+  /**
+   * Merge adjacent rules sharing an identical declaration block into a single
+   * comma-separated selector group (default: true). Cascade-safe: only
+   * consecutive sibling rules are merged.
+   */
+  mergeIdenticalDeclarations?: boolean;
   /**
    * Remove duplicate content from scoped CSS that already exists in main CSS (default: true)
    * Currently deduplicates @font-face declarations. Reduces bundle size when scoped packages

package/dist/css/dist/packages/automated-config/dist/properties.cjs

@@ -8,7 +8,7 @@ const require_index$1 = require("../../motion-tokens/dist/index.cjs");
 /*! © 2026 Yahoo, Inc. UDS CSS v0.0.0-development */
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
 const isInputWrapperCtx = (context) => {
-	return context.componentName === "input" && context.layer === "inputWrapper";
+	return context.componentName === "input" && (context.layer === "inputWrapper" || context.layer === "inputWrapperDynamic");
 };
 const hexToRgb = (hex) => {
 	hex = hex.replace("#", "");