@yahoo/uds 3.156.2 → 3.157.1

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

@@ -0,0 +1,49 @@
+
+import { ConfigurablePropertiesName, SelectedConfigurableProperty } from "../properties.js";
+import { LayerConfig, PossibleStatesWithRest } from "../types/ComponentConfig.js";
+
+//#region ../automated-config/dist/utils/resolvePropertyStates.d.ts
+//#region src/utils/resolvePropertyStates.d.ts
+type AnyProperty = SelectedConfigurableProperty<ConfigurablePropertiesName, string>;
+/**
+ * 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`.
+ */
+/**
+ * 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`.
+ */
+declare function resolvePropertyStates(layer: LayerConfig, property: AnyProperty): PossibleStatesWithRest[]; //#endregion
+//#endregion
+export { resolvePropertyStates };

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/Button.cjs

@@ -146,7 +146,7 @@ const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon,
 			className: require_styles_styler.cx([
 				"uds-ring",
 				"uds-hit-target",
-				"inline-flex overflow-hidden justify-center items-center whitespace-nowrap select-none",
+				"inline-flex max-w-full overflow-hidden justify-center items-center whitespace-nowrap select-none",
 				"[transform-origin:center]",
 				"[backface-visibility:hidden]",
 				"[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]",
@@ -161,14 +161,14 @@ const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon,
 				className
 			])
 		}),
-		iconContainer: "flex overflow-clip uds-button-icon-container",
+		iconContainer: "flex shrink-0 overflow-clip uds-button-icon-container",
 		icon: require_styles_styler.getStyles({ className: require_styles_styler.cx([iconSizeClass, iconVariantClass]) }),
 		loadingIcon: require_styles_styler.getStyles({ className: require_styles_styler.cx([
 			"animate-spin",
 			iconSizeClass,
 			iconVariantClass
 		]) }),
-		content: require_styles_styler.cx(["truncate"])
+		content: require_styles_styler.cx(["min-w-0 truncate"])
 	}), [
 		className,
 		disableEffects,

package/dist/components/client/Button.js

@@ -143,7 +143,7 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 			className: cx([
 				"uds-ring",
 				"uds-hit-target",
-				"inline-flex overflow-hidden justify-center items-center whitespace-nowrap select-none",
+				"inline-flex max-w-full overflow-hidden justify-center items-center whitespace-nowrap select-none",
 				"[transform-origin:center]",
 				"[backface-visibility:hidden]",
 				"[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]",
@@ -158,14 +158,14 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 				className
 			])
 		}),
-		iconContainer: "flex overflow-clip uds-button-icon-container",
+		iconContainer: "flex shrink-0 overflow-clip uds-button-icon-container",
 		icon: getStyles({ className: cx([iconSizeClass, iconVariantClass]) }),
 		loadingIcon: getStyles({ className: cx([
 			"animate-spin",
 			iconSizeClass,
 			iconVariantClass
 		]) }),
-		content: cx(["truncate"])
+		content: cx(["min-w-0 truncate"])
 	}), [
 		className,
 		disableEffects,