@yahoo/uds 3.156.2 → 3.157.0

package/dist/automated-config/dist/utils/resolvePropertyStates.js

@@ -0,0 +1,130 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { comparePriority, isInteractiveAtomic, isModifierAtomic } from "../types/StateAxis.js";
+import { canonicalizeStateKey } from "./canonicalizeStateKey.js";
+//#region ../automated-config/dist/utils/resolvePropertyStates.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/**
+* Yields every modifier subset of size 1..maxSize, preserving input order
+* within each subset. Used by both the resolver and the docs-class
+* enumeration so the depth they support stays in lock-step.
+*
+* Generic over the element type so callers passing `ModifierAtomic[]` get
+* `Generator<readonly ModifierAtomic[]>` back — keeps the inferred type chain
+* tight enough for downstream consumers to avoid widening to `string`.
+*/
+function* modifierSubsets(modifiers, maxSize) {
+	const indices = [];
+	function* recurse(start) {
+		if (indices.length > 0) yield indices.map((i) => modifiers[i]);
+		if (indices.length === maxSize) return;
+		for (let i = start; i < modifiers.length; i++) {
+			indices.push(i);
+			yield* recurse(i + 1);
+			indices.pop();
+		}
+	}
+	yield* recurse(0);
+}
+/**
+* Yields the interactive subsets that can be simultaneously active on one
+* element, in `modifierSubsets` order. `hover` and `pressed` are mutually
+* exclusive — the `hover` selector carries `:where(:not(:active …))`, so a
+* `hover&pressed` rule could never match — so any subset containing BOTH is
+* dropped. Every other subset is kept (notably `focus-within`/`focus-visible`
+* CAN coexist with a pointer state: you can hover or press a focused element).
+*
+* `interactives` MUST already be sorted by `comparePriority`.
+*/
+function* coOccurringInteractiveSubsets(interactives) {
+	for (const subset of modifierSubsets(interactives, interactives.length)) {
+		if (subset.includes("hover") && subset.includes("pressed")) continue;
+		yield subset;
+	}
+}
+/**
+* Yields a property's atomic + compound state keys in cascade order from a
+* priority-sorted atomic set:
+*
+*   atoms (in the given order)
+*   → for each modifier subset: the pure-modifier compound (size ≥ 2) then each
+*     modifier-subset × SINGLE-interactive compound
+*   → each pure interactive-pair compound (size ≥ 2, co-occurring)
+*   → each modifier-subset × interactive-PAIR compound
+*
+* The interactive-pair compounds are APPENDED after the original keys so every
+* pre-existing key keeps its rank — `resolveSlotByCascade`'s tie-break and
+* Figma's published values for already-declared states are therefore unchanged;
+* only genuinely new co-occurring combinations (e.g. `focus-within&hover`) gain
+* a key. Each is a real declared state with its own rule, so a property whose
+* `focus-within` and `hover` resolve to different values renders the
+* per-property-correct blend at `(0, 1+atomCount, 0)` specificity in BOTH emit
+* modes — closing the only exhaustive/selective divergence (two interactives
+* co-occurring with no compound to arbitrate them). `hover&pressed` pairs are
+* never generated (they can't co-occur; see `coOccurringInteractiveSubsets`).
+*
+* `'rest'` is NOT included — callers prepend it (and decide whether to, e.g.
+* `skipRestState`). `atomics` MUST already be sorted by `comparePriority`
+* (weakest first) so the strongest atom emits last and wins on intra-rank
+* source-order ties.
+*
+* Shared by `resolvePropertyStates` (the CSS-emission source of truth) and
+* `resolveSlotByCascade`'s cascade-rank computation, so the emission order —
+* and therefore the cascade tie-break it implies — stays identical across both.
+* Change emission order here, not in either caller.
+*/
+function* atomicAndCompoundStateKeys(atomics) {
+	for (const atom of atomics) yield atom;
+	const modifiers = atomics.filter(isModifierAtomic);
+	const interactives = atomics.filter(isInteractiveAtomic);
+	for (const subset of modifierSubsets(modifiers, 3)) {
+		if (subset.length >= 2) yield canonicalizeStateKey(subset);
+		for (const interactive of interactives) yield canonicalizeStateKey([...subset, interactive]);
+	}
+	const interactivePairs = [...coOccurringInteractiveSubsets(interactives)].filter((subset) => subset.length >= 2);
+	for (const interactiveSubset of interactivePairs) yield canonicalizeStateKey(interactiveSubset);
+	for (const subset of modifierSubsets(modifiers, 3)) for (const interactiveSubset of interactivePairs) yield canonicalizeStateKey([...subset, ...interactiveSubset]);
+}
+/**
+* Returns all canonical state keys a property reacts to, in cascade order:
+*
+*   rest → atomics (sorted by global `STATE_PRIORITY`, weakest first)
+*   → 2-atom compounds → 3-atom compounds → ...
+*
+* Cross-rank ordering (atom < 2-atom compound < 3-atom compound < ...) is
+* enforced by CSS class-count specificity. Each atom selector contributes
+* (0,1,0), so a 2-atom compound at (0,3,0) strictly beats a 1-atom rule at
+* (0,2,0) — the cascade-cancellation feature is encoded in the selector
+* itself rather than rule source order.
+*
+* Intra-rank ties (which atom wins among the priority-sorted set, or which
+* 2-atom compound wins among siblings of the same size) fall through to
+* source order at the same specificity. Emission order follows the global
+* `STATE_PRIORITY` array — to change which atom wins between any two
+* simultaneously-matching atoms, reorder that array.
+*
+* Resolution sources, in order of precedence:
+*
+*   1. The new system: `layer.atomicStates` declares the atoms this layer can
+*      compose; `property.excludeAtomics` opts the property out of selected
+*      atoms. Compounds are auto-generated from the resulting set via
+*      modifier × interactive expansion.
+*   2. The legacy system: `property.pseudoStates` (no compound generation; the
+*      array is used verbatim). Used when `layer.atomicStates` is absent so
+*      unmigrated component configs continue to behave exactly as before.
+*
+* `'rest'` is always included unless the property has `skipRestState: true`.
+*/
+function resolvePropertyStates(layer, property) {
+	const states = [];
+	if (!(property.skipRestState === true)) states.push("rest");
+	if (layer.atomicStates && layer.atomicStates.length > 0) {
+		const exclude = new Set(property.excludeAtomics ?? []);
+		const atomics = [...layer.atomicStates].filter((atom) => !exclude.has(atom)).sort(comparePriority);
+		for (const stateKey of atomicAndCompoundStateKeys(atomics)) states.push(stateKey);
+		return states;
+	}
+	if (property.pseudoStates) for (const s of property.pseudoStates) states.push(s);
+	return states;
+}
+//#endregion
+export { atomicAndCompoundStateKeys, resolvePropertyStates };

package/dist/automated-config/dist/utils/resolveSlotByCascade.cjs

@@ -0,0 +1,118 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_StateAxis = require("../types/StateAxis.cjs");
+const require_resolvePropertyStates = require("./resolvePropertyStates.cjs");
+//#region ../automated-config/dist/utils/resolveSlotByCascade.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/**
+* Mirrors `resolvePropertyStates`'s emission order using only the atoms that
+* appear in the property's actual state map, so consumers that need a cascade
+* tie-break can compare these indices (later = stronger). The atom + compound
+* ordering comes from the shared `atomicAndCompoundStateKeys` generator, which
+* keeps this rank identical to the CSS the generator emits.
+*/
+function computeCascadeOrder(propertyStates) {
+	const presentAtoms = /* @__PURE__ */ new Set();
+	for (const stateName of Object.keys(propertyStates)) {
+		if (stateName === "rest" || propertyStates[stateName] == null) continue;
+		for (const atom of stateName.split("&")) presentAtoms.add(atom);
+	}
+	const atomics = [...presentAtoms].filter(require_StateAxis.isAtomicState).sort(require_StateAxis.comparePriority);
+	const order = ["rest"];
+	for (const stateKey of require_resolvePropertyStates.atomicAndCompoundStateKeys(atomics)) order.push(stateKey);
+	return order;
+}
+/**
+* Resolves a state slot following CSS-cascade semantics: a `rest` slot or a
+* non-rest slot with `isEnabled === true` resolves to itself; an unflagged
+* non-rest slot resolves to the most-specific enabled state whose atoms are a
+* subset of the requested state's atoms. A present-but-disabled single MODIFIER
+* atom is the exception: it participates at the `rest` value (never its own
+* stored value), so a dropped higher-priority modifier (e.g. `invalid`, left
+* flag-less because it equals `rest`) suppresses a lower-priority enabled atom
+* inside a compound rather than letting it brighten through — an invalid field
+* shouldn't get the hover color when `invalid` resets to `rest`. A disabled
+* INTERACTIVE atom does NOT participate: it contributes no rule of its own, so
+* an enabled lower-priority interactive survives (e.g. `focus-within` styling
+* persists while `hover`/`pressed`, left at `rest`, is active). Disabled
+* COMPOUNDS and absent atoms do not participate either.
+*
+* Same-size candidates are tie-broken by the cascade emission order from
+* `resolvePropertyStates` — i.e. the rule that the browser would have applied
+* last under equal specificity. The single rule is: later in emission order =
+* stronger. At the 1-atom level that makes the higher-`STATE_PRIORITY` atom
+* win, so modifiers (`invalid`, `readonly`) beat interactives (`hover`,
+* `pressed`) because they sit later in `STATE_PRIORITY`. At the 2-atom level a
+* pure-modifier compound from subset `[m1, m2]` beats any modifier+interactive
+* compound built from an *earlier* single-modifier subset (e.g.
+* `invalid&readonly` beats `invalid&hover`), since `modifierSubsets` emits the
+* size-2 subset after the size-1 subsets that precede it; compounds from a
+* *later* single-modifier subset (e.g. `readonly&hover`) still emit afterward
+* and win. Falls back to `rest` when no enabled subset exists.
+*
+* Two consumers rely on this:
+*   - `generateDeclaration` (exhaustive emission for `atomicStates` layers) resolves
+*     the value for every declared state — including the many compounds the
+*     sparse stored config never persists — so each emitted rule carries the
+*     value the cascade would have produced, with no gap a nested foreign theme
+*     could fill.
+*   - The Figma plugin emits a single library variable value per (component,
+*     layer, property, state) matching that same CSS, so disabled slots don't
+*     show up as orphaned customizations in the Figma library.
+*/
+function resolveSlotByCascade(stateName, propertyStates) {
+	const direct = propertyStates[stateName];
+	if (stateName === "rest") return direct;
+	if (direct?.isEnabled === true) return direct;
+	const cascadeOrder = computeCascadeOrder(propertyStates);
+	const rankOf = /* @__PURE__ */ new Map();
+	cascadeOrder.forEach((s, i) => rankOf.set(s, i));
+	const targetAtoms = new Set(stateName.split("&"));
+	let best = null;
+	const restSlot = propertyStates.rest;
+	for (const [candidateKey, slot] of Object.entries(propertyStates)) {
+		if (!slot) continue;
+		if (candidateKey === stateName) continue;
+		const atoms = candidateKey === "rest" ? [] : candidateKey.split("&");
+		if (!atoms.every((a) => targetAtoms.has(a))) continue;
+		const enabled = candidateKey === "rest" || slot.isEnabled === true;
+		let effectiveSlot;
+		if (enabled) effectiveSlot = slot;
+		else if (atoms.length === 1 && require_StateAxis.isModifierAtomic(atoms[0])) effectiveSlot = restSlot;
+		else continue;
+		if (!effectiveSlot) continue;
+		const rank = rankOf.get(candidateKey) ?? -1;
+		const size = atoms.length;
+		if (!best || size > best.size || size === best.size && rank > best.rank) best = {
+			rank,
+			size,
+			slot: effectiveSlot
+		};
+	}
+	return best?.slot ?? propertyStates.rest;
+}
+/**
+* Whether a property's state map is on the new per-state `isEnabled` system.
+*
+* The schema build only writes an `isEnabled` flag for the new `atomicStates`
+* path (and for `skipRestState` properties, where it's always `true`); legacy
+* per-property `pseudoStates` slots never carry one. So the presence of
+* `isEnabled` on any slot reliably distinguishes a migrated/new-system property
+* from a legacy one.
+*
+* Callers that only have the flattened config data — notably the Figma plugin,
+* which can't see the source `ComponentConfig`'s `atomicStates` — use this to
+* decide whether to cascade-resolve a state (new system) or read its slot
+* directly (legacy). Cascade resolution treats an unflagged non-rest slot as
+* disabled and falls back to `rest`, which would wipe a legacy component's real
+* hover/pressed customizations; legacy maps must therefore be read directly.
+*/
+function propertyUsesPerStateEnabled(propertyStates) {
+	for (const key of Object.keys(propertyStates)) {
+		const slot = propertyStates[key];
+		if (slot && "isEnabled" in slot) return true;
+	}
+	return false;
+}
+//#endregion
+exports.propertyUsesPerStateEnabled = propertyUsesPerStateEnabled;
+exports.resolveSlotByCascade = resolveSlotByCascade;

package/dist/automated-config/dist/utils/resolveSlotByCascade.d.cts

@@ -0,0 +1,68 @@
+
+//#region ../automated-config/dist/utils/resolveSlotByCascade.d.ts
+//#region src/utils/resolveSlotByCascade.d.ts
+type StateSlot = {
+  value: unknown;
+  isEnabled?: boolean;
+  type?: string;
+  valueType?: string;
+};
+type PropertyStates = Record<string, StateSlot | undefined>;
+/**
+ * Resolves a state slot following CSS-cascade semantics: a `rest` slot or a
+ * non-rest slot with `isEnabled === true` resolves to itself; an unflagged
+ * non-rest slot resolves to the most-specific enabled state whose atoms are a
+ * subset of the requested state's atoms. A present-but-disabled single MODIFIER
+ * atom is the exception: it participates at the `rest` value (never its own
+ * stored value), so a dropped higher-priority modifier (e.g. `invalid`, left
+ * flag-less because it equals `rest`) suppresses a lower-priority enabled atom
+ * inside a compound rather than letting it brighten through — an invalid field
+ * shouldn't get the hover color when `invalid` resets to `rest`. A disabled
+ * INTERACTIVE atom does NOT participate: it contributes no rule of its own, so
+ * an enabled lower-priority interactive survives (e.g. `focus-within` styling
+ * persists while `hover`/`pressed`, left at `rest`, is active). Disabled
+ * COMPOUNDS and absent atoms do not participate either.
+ *
+ * Same-size candidates are tie-broken by the cascade emission order from
+ * `resolvePropertyStates` — i.e. the rule that the browser would have applied
+ * last under equal specificity. The single rule is: later in emission order =
+ * stronger. At the 1-atom level that makes the higher-`STATE_PRIORITY` atom
+ * win, so modifiers (`invalid`, `readonly`) beat interactives (`hover`,
+ * `pressed`) because they sit later in `STATE_PRIORITY`. At the 2-atom level a
+ * pure-modifier compound from subset `[m1, m2]` beats any modifier+interactive
+ * compound built from an *earlier* single-modifier subset (e.g.
+ * `invalid&readonly` beats `invalid&hover`), since `modifierSubsets` emits the
+ * size-2 subset after the size-1 subsets that precede it; compounds from a
+ * *later* single-modifier subset (e.g. `readonly&hover`) still emit afterward
+ * and win. Falls back to `rest` when no enabled subset exists.
+ *
+ * Two consumers rely on this:
+ *   - `generateDeclaration` (exhaustive emission for `atomicStates` layers) resolves
+ *     the value for every declared state — including the many compounds the
+ *     sparse stored config never persists — so each emitted rule carries the
+ *     value the cascade would have produced, with no gap a nested foreign theme
+ *     could fill.
+ *   - The Figma plugin emits a single library variable value per (component,
+ *     layer, property, state) matching that same CSS, so disabled slots don't
+ *     show up as orphaned customizations in the Figma library.
+ */
+declare function resolveSlotByCascade(stateName: string, propertyStates: PropertyStates): StateSlot | undefined;
+/**
+ * Whether a property's state map is on the new per-state `isEnabled` system.
+ *
+ * The schema build only writes an `isEnabled` flag for the new `atomicStates`
+ * path (and for `skipRestState` properties, where it's always `true`); legacy
+ * per-property `pseudoStates` slots never carry one. So the presence of
+ * `isEnabled` on any slot reliably distinguishes a migrated/new-system property
+ * from a legacy one.
+ *
+ * Callers that only have the flattened config data — notably the Figma plugin,
+ * which can't see the source `ComponentConfig`'s `atomicStates` — use this to
+ * decide whether to cascade-resolve a state (new system) or read its slot
+ * directly (legacy). Cascade resolution treats an unflagged non-rest slot as
+ * disabled and falls back to `rest`, which would wipe a legacy component's real
+ * hover/pressed customizations; legacy maps must therefore be read directly.
+ */
+declare function propertyUsesPerStateEnabled(propertyStates: PropertyStates): boolean; //#endregion
+//#endregion
+export { type PropertyStates, type StateSlot, propertyUsesPerStateEnabled, resolveSlotByCascade };

package/dist/automated-config/dist/utils/resolveSlotByCascade.d.ts

@@ -0,0 +1,68 @@
+
+//#region ../automated-config/dist/utils/resolveSlotByCascade.d.ts
+//#region src/utils/resolveSlotByCascade.d.ts
+type StateSlot = {
+  value: unknown;
+  isEnabled?: boolean;
+  type?: string;
+  valueType?: string;
+};
+type PropertyStates = Record<string, StateSlot | undefined>;
+/**
+ * Resolves a state slot following CSS-cascade semantics: a `rest` slot or a
+ * non-rest slot with `isEnabled === true` resolves to itself; an unflagged
+ * non-rest slot resolves to the most-specific enabled state whose atoms are a
+ * subset of the requested state's atoms. A present-but-disabled single MODIFIER
+ * atom is the exception: it participates at the `rest` value (never its own
+ * stored value), so a dropped higher-priority modifier (e.g. `invalid`, left
+ * flag-less because it equals `rest`) suppresses a lower-priority enabled atom
+ * inside a compound rather than letting it brighten through — an invalid field
+ * shouldn't get the hover color when `invalid` resets to `rest`. A disabled
+ * INTERACTIVE atom does NOT participate: it contributes no rule of its own, so
+ * an enabled lower-priority interactive survives (e.g. `focus-within` styling
+ * persists while `hover`/`pressed`, left at `rest`, is active). Disabled
+ * COMPOUNDS and absent atoms do not participate either.
+ *
+ * Same-size candidates are tie-broken by the cascade emission order from
+ * `resolvePropertyStates` — i.e. the rule that the browser would have applied
+ * last under equal specificity. The single rule is: later in emission order =
+ * stronger. At the 1-atom level that makes the higher-`STATE_PRIORITY` atom
+ * win, so modifiers (`invalid`, `readonly`) beat interactives (`hover`,
+ * `pressed`) because they sit later in `STATE_PRIORITY`. At the 2-atom level a
+ * pure-modifier compound from subset `[m1, m2]` beats any modifier+interactive
+ * compound built from an *earlier* single-modifier subset (e.g.
+ * `invalid&readonly` beats `invalid&hover`), since `modifierSubsets` emits the
+ * size-2 subset after the size-1 subsets that precede it; compounds from a
+ * *later* single-modifier subset (e.g. `readonly&hover`) still emit afterward
+ * and win. Falls back to `rest` when no enabled subset exists.
+ *
+ * Two consumers rely on this:
+ *   - `generateDeclaration` (exhaustive emission for `atomicStates` layers) resolves
+ *     the value for every declared state — including the many compounds the
+ *     sparse stored config never persists — so each emitted rule carries the
+ *     value the cascade would have produced, with no gap a nested foreign theme
+ *     could fill.
+ *   - The Figma plugin emits a single library variable value per (component,
+ *     layer, property, state) matching that same CSS, so disabled slots don't
+ *     show up as orphaned customizations in the Figma library.
+ */
+declare function resolveSlotByCascade(stateName: string, propertyStates: PropertyStates): StateSlot | undefined;
+/**
+ * Whether a property's state map is on the new per-state `isEnabled` system.
+ *
+ * The schema build only writes an `isEnabled` flag for the new `atomicStates`
+ * path (and for `skipRestState` properties, where it's always `true`); legacy
+ * per-property `pseudoStates` slots never carry one. So the presence of
+ * `isEnabled` on any slot reliably distinguishes a migrated/new-system property
+ * from a legacy one.
+ *
+ * Callers that only have the flattened config data — notably the Figma plugin,
+ * which can't see the source `ComponentConfig`'s `atomicStates` — use this to
+ * decide whether to cascade-resolve a state (new system) or read its slot
+ * directly (legacy). Cascade resolution treats an unflagged non-rest slot as
+ * disabled and falls back to `rest`, which would wipe a legacy component's real
+ * hover/pressed customizations; legacy maps must therefore be read directly.
+ */
+declare function propertyUsesPerStateEnabled(propertyStates: PropertyStates): boolean; //#endregion
+//#endregion
+export { type PropertyStates, type StateSlot, propertyUsesPerStateEnabled, resolveSlotByCascade };

package/dist/automated-config/dist/utils/resolveSlotByCascade.js

@@ -0,0 +1,117 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { comparePriority, isAtomicState, isModifierAtomic } from "../types/StateAxis.js";
+import { atomicAndCompoundStateKeys } from "./resolvePropertyStates.js";
+//#region ../automated-config/dist/utils/resolveSlotByCascade.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/**
+* Mirrors `resolvePropertyStates`'s emission order using only the atoms that
+* appear in the property's actual state map, so consumers that need a cascade
+* tie-break can compare these indices (later = stronger). The atom + compound
+* ordering comes from the shared `atomicAndCompoundStateKeys` generator, which
+* keeps this rank identical to the CSS the generator emits.
+*/
+function computeCascadeOrder(propertyStates) {
+	const presentAtoms = /* @__PURE__ */ new Set();
+	for (const stateName of Object.keys(propertyStates)) {
+		if (stateName === "rest" || propertyStates[stateName] == null) continue;
+		for (const atom of stateName.split("&")) presentAtoms.add(atom);
+	}
+	const atomics = [...presentAtoms].filter(isAtomicState).sort(comparePriority);
+	const order = ["rest"];
+	for (const stateKey of atomicAndCompoundStateKeys(atomics)) order.push(stateKey);
+	return order;
+}
+/**
+* Resolves a state slot following CSS-cascade semantics: a `rest` slot or a
+* non-rest slot with `isEnabled === true` resolves to itself; an unflagged
+* non-rest slot resolves to the most-specific enabled state whose atoms are a
+* subset of the requested state's atoms. A present-but-disabled single MODIFIER
+* atom is the exception: it participates at the `rest` value (never its own
+* stored value), so a dropped higher-priority modifier (e.g. `invalid`, left
+* flag-less because it equals `rest`) suppresses a lower-priority enabled atom
+* inside a compound rather than letting it brighten through — an invalid field
+* shouldn't get the hover color when `invalid` resets to `rest`. A disabled
+* INTERACTIVE atom does NOT participate: it contributes no rule of its own, so
+* an enabled lower-priority interactive survives (e.g. `focus-within` styling
+* persists while `hover`/`pressed`, left at `rest`, is active). Disabled
+* COMPOUNDS and absent atoms do not participate either.
+*
+* Same-size candidates are tie-broken by the cascade emission order from
+* `resolvePropertyStates` — i.e. the rule that the browser would have applied
+* last under equal specificity. The single rule is: later in emission order =
+* stronger. At the 1-atom level that makes the higher-`STATE_PRIORITY` atom
+* win, so modifiers (`invalid`, `readonly`) beat interactives (`hover`,
+* `pressed`) because they sit later in `STATE_PRIORITY`. At the 2-atom level a
+* pure-modifier compound from subset `[m1, m2]` beats any modifier+interactive
+* compound built from an *earlier* single-modifier subset (e.g.
+* `invalid&readonly` beats `invalid&hover`), since `modifierSubsets` emits the
+* size-2 subset after the size-1 subsets that precede it; compounds from a
+* *later* single-modifier subset (e.g. `readonly&hover`) still emit afterward
+* and win. Falls back to `rest` when no enabled subset exists.
+*
+* Two consumers rely on this:
+*   - `generateDeclaration` (exhaustive emission for `atomicStates` layers) resolves
+*     the value for every declared state — including the many compounds the
+*     sparse stored config never persists — so each emitted rule carries the
+*     value the cascade would have produced, with no gap a nested foreign theme
+*     could fill.
+*   - The Figma plugin emits a single library variable value per (component,
+*     layer, property, state) matching that same CSS, so disabled slots don't
+*     show up as orphaned customizations in the Figma library.
+*/
+function resolveSlotByCascade(stateName, propertyStates) {
+	const direct = propertyStates[stateName];
+	if (stateName === "rest") return direct;
+	if (direct?.isEnabled === true) return direct;
+	const cascadeOrder = computeCascadeOrder(propertyStates);
+	const rankOf = /* @__PURE__ */ new Map();
+	cascadeOrder.forEach((s, i) => rankOf.set(s, i));
+	const targetAtoms = new Set(stateName.split("&"));
+	let best = null;
+	const restSlot = propertyStates.rest;
+	for (const [candidateKey, slot] of Object.entries(propertyStates)) {
+		if (!slot) continue;
+		if (candidateKey === stateName) continue;
+		const atoms = candidateKey === "rest" ? [] : candidateKey.split("&");
+		if (!atoms.every((a) => targetAtoms.has(a))) continue;
+		const enabled = candidateKey === "rest" || slot.isEnabled === true;
+		let effectiveSlot;
+		if (enabled) effectiveSlot = slot;
+		else if (atoms.length === 1 && isModifierAtomic(atoms[0])) effectiveSlot = restSlot;
+		else continue;
+		if (!effectiveSlot) continue;
+		const rank = rankOf.get(candidateKey) ?? -1;
+		const size = atoms.length;
+		if (!best || size > best.size || size === best.size && rank > best.rank) best = {
+			rank,
+			size,
+			slot: effectiveSlot
+		};
+	}
+	return best?.slot ?? propertyStates.rest;
+}
+/**
+* Whether a property's state map is on the new per-state `isEnabled` system.
+*
+* The schema build only writes an `isEnabled` flag for the new `atomicStates`
+* path (and for `skipRestState` properties, where it's always `true`); legacy
+* per-property `pseudoStates` slots never carry one. So the presence of
+* `isEnabled` on any slot reliably distinguishes a migrated/new-system property
+* from a legacy one.
+*
+* Callers that only have the flattened config data — notably the Figma plugin,
+* which can't see the source `ComponentConfig`'s `atomicStates` — use this to
+* decide whether to cascade-resolve a state (new system) or read its slot
+* directly (legacy). Cascade resolution treats an unflagged non-rest slot as
+* disabled and falls back to `rest`, which would wipe a legacy component's real
+* hover/pressed customizations; legacy maps must therefore be read directly.
+*/
+function propertyUsesPerStateEnabled(propertyStates) {
+	for (const key of Object.keys(propertyStates)) {
+		const slot = propertyStates[key];
+		if (slot && "isEnabled" in slot) return true;
+	}
+	return false;
+}
+//#endregion
+export { propertyUsesPerStateEnabled, resolveSlotByCascade };

package/dist/automated-config/dist/utils/variantConfigGuards.d.cts

@@ -0,0 +1,13 @@
+
+import { VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.cjs";
+
+//#region ../automated-config/dist/utils/variantConfigGuards.d.ts
+//#region src/utils/variantConfigGuards.d.ts
+declare const isVariantConfigWithProperties: (v: VariantConfig) => v is VariantConfigWithProperties & {
+  layers: NonNullable<VariantConfigWithProperties["layers"]>;
+};
+declare const isVariantConfigWithComponentStates: (v: VariantConfig) => v is VariantConfigWithComponentStates & {
+  componentStates: NonNullable<VariantConfigWithComponentStates["componentStates"]>;
+}; //#endregion
+//#endregion
+export { isVariantConfigWithComponentStates, isVariantConfigWithProperties };

package/dist/automated-config/dist/utils/variantConfigGuards.d.ts

@@ -0,0 +1,13 @@
+
+import { VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.js";
+
+//#region ../automated-config/dist/utils/variantConfigGuards.d.ts
+//#region src/utils/variantConfigGuards.d.ts
+declare const isVariantConfigWithProperties: (v: VariantConfig) => v is VariantConfigWithProperties & {
+  layers: NonNullable<VariantConfigWithProperties["layers"]>;
+};
+declare const isVariantConfigWithComponentStates: (v: VariantConfig) => v is VariantConfigWithComponentStates & {
+  componentStates: NonNullable<VariantConfigWithComponentStates["componentStates"]>;
+}; //#endregion
+//#endregion
+export { isVariantConfigWithComponentStates, isVariantConfigWithProperties };

package/dist/components/client/Input/Input.cjs

@@ -15,6 +15,10 @@ let lodash_isFunction_js = require("lodash/isFunction.js");
 lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
 let motion_react = require("motion/react");
 //#region src/components/client/Input/Input.tsx
+function setNativeInputValue(input, next) {
+	(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
 const HelpTextContent = (0, react.memo)(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
 	if (!helpText) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
@@ -82,7 +86,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
 **/
-const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, style, className, ...otherProps }, forwardedRef) {
+const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const helpTextId = `uds-input-${uid}-help-text`;
@@ -98,7 +102,36 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 	const handleChange = (0, react.useCallback)((e) => {
 		if (!isControlled) setValue(e.target.value);
 		onChange?.(e);
-	}, [isControlled, onChange]);
+		slotProps?.input?.onChange?.(e);
+	}, [
+		isControlled,
+		onChange,
+		slotProps
+	]);
+	const handleBlur = (0, react.useCallback)((e) => {
+		if (formatOnBlur && ref.current) {
+			const next = formatOnBlur(e.target.value);
+			if (next !== e.target.value) setNativeInputValue(ref.current, next);
+		}
+		onBlur?.(e);
+		slotProps?.input?.onBlur?.(e);
+	}, [
+		formatOnBlur,
+		onBlur,
+		slotProps
+	]);
+	const handleFocus = (0, react.useCallback)((e) => {
+		if (parseOnFocus && ref.current) {
+			const next = parseOnFocus(e.target.value);
+			if (next !== e.target.value) setNativeInputValue(ref.current, next);
+		}
+		onFocus?.(e);
+		slotProps?.input?.onFocus?.(e);
+	}, [
+		parseOnFocus,
+		onFocus,
+		slotProps
+	]);
 	const layoutVariant = (0, motion_react.useReducedMotion)() ? "smooth" : "bouncy";
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const isInteractive = !readOnly && !disabled;
@@ -110,7 +143,8 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 			className: require_styles_styler.cx([className, disabled ? "opacity-50" : ""])
 		}),
 		inputWrapper: require_styles_styler.cx(require_styles_styler.getStyles({
-			inputSizeInputWrapper: size,
+			inputSizeInputWrapperStatic: size,
+			inputSizeInputWrapperDynamic: size,
 			inputVariantInputWrapper: "default",
 			inputVariantValueInputWrapper: !value ? "empty" : "filled"
 		}), "min-w-[200px]", inputWrapperClassName),
@@ -120,7 +154,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 			inputVariantValueInput: !value ? "empty" : "filled",
 			inputVariantInputPlaceholder: "default",
 			inputVariantValueInputPlaceholder: !value ? "empty" : "filled",
-			className: require_styles_styler.cx("grow", "uds-hit-target", "bg-clip-text", "focus:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
+			className: require_styles_styler.cx("grow", "uds-hit-target", "bg-transparent", "bg-clip-text", "focus-visible:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
 		}),
 		label: require_styles_styler.cx(require_styles_styler.getStyles({
 			inputSizeLabel: size,
@@ -182,10 +216,12 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 						disabled,
 						"aria-describedby": helpTextId,
 						"aria-invalid": hasError,
-						onChange: handleChange,
 						className: classNames.input,
 						...otherProps,
-						...inputProps
+						...inputProps,
+						onChange: handleChange,
+						onBlur: handleBlur,
+						onFocus: handleFocus
 					}),
 					endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
 						alignItems: "center",

package/dist/components/client/Input/Input.d.cts

@@ -27,6 +27,19 @@ interface InputProps extends NativeInputProps, UniversalInputProps {
     helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
     helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
   };
+  /** Called on user-initiated blur. Return the formatted display value.
+   * The result flows through `onChange`. Programmatic value changes (autofill,
+   * password managers, parent state updates) do NOT trigger this.
+   *
+   * In controlled mode (`value` prop supplied) the formatted value is surfaced
+   * only through `onChange` — the parent MUST fold it back into `value`, or it
+   * reverts on the next render. Uncontrolled usage handles this internally. */
+  formatOnBlur?: (value: string) => string;
+  /** Called on focus. Return the value to display while editing (typically the
+   * raw, unformatted form). Omit to leave the value as-is on focus.
+   * The result flows through `onChange` (same controlled-mode caveat as
+   * `formatOnBlur`: the parent must propagate the value when `value` is set). */
+  parseOnFocus?: (value: string) => string;
 }
 /**
  * **📦 An input that allows users to enter text and collect data.**