nudge-ui 0.2.2 → 0.2.4

package/dist/inspector/styleEditors/backgroundLayers.js

@@ -0,0 +1,51 @@
+import { splitTopLevel } from "../../css/value-semantics/cssSyntax.js";
+import { isEmptyColorValue } from "./ColorPicker.js";
+export const BACKGROUND_BLEND_MODES = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]
+    .map((value) => ({ value, label: value.replace(/-/g, " ").replace(/^./, (letter) => letter.toUpperCase()) }));
+export function backgroundMode(value) {
+    if (!value || value === "none")
+        return "solid";
+    return /(?:repeating-)?(?:linear|radial|conic)-gradient\(/.test(value) ? "gradient" : "image";
+}
+export function newBackgroundLayer() {
+    return { mode: "solid", baseColor: true, value: "#ffffff", blend: "normal", size: "auto", repeat: "repeat", position: "0% 0%" };
+}
+/** CSS repeats shorter background property lists to match the image count. */
+export function readBackgroundLayers(read) {
+    const image = read("background-image", "none");
+    const images = image === "none" ? [] : splitTopLevel(image, ",").map((value) => value.trim());
+    const listValue = (property, fallback, index) => {
+        const values = splitTopLevel(read(property, fallback), ",");
+        return values[index % values.length]?.trim() || fallback;
+    };
+    const layers = images.map((value, index) => {
+        const flat = /^linear-gradient\((.*)\)$/s.exec(value);
+        const colors = flat ? splitTopLevel(flat[1], ",").map((color) => color.trim()) : [];
+        const solid = colors.length === 2 && colors[0] === colors[1];
+        return {
+            mode: solid ? "solid" : backgroundMode(value),
+            baseColor: false,
+            value: solid ? colors[0] : value,
+            blend: listValue("background-blend-mode", "normal", index),
+            size: listValue("background-size", "auto", index),
+            repeat: listValue("background-repeat", "repeat", index),
+            position: listValue("background-position", "0% 0%", index),
+        };
+    });
+    const color = read("background-color", "transparent");
+    if (!isEmptyColorValue(color))
+        layers.push({ ...newBackgroundLayer(), value: color });
+    return layers;
+}
+export function backgroundDeclarations(layers) {
+    const base = layers.at(-1)?.mode === "solid" && layers.at(-1)?.baseColor ? layers.at(-1) : undefined;
+    const images = base ? layers.slice(0, -1) : layers;
+    return [
+        { property: "background-color", value: base?.value ?? "transparent" },
+        { property: "background-image", value: images.map((layer) => layer.mode === "solid" ? `linear-gradient(${layer.value}, ${layer.value})` : layer.value).join(", ") || "none" },
+        ...["blend", "size", "repeat", "position"].map((field) => ({
+            property: field === "blend" ? "background-blend-mode" : `background-${field}`,
+            value: images.map((layer) => layer[field]).join(", ") || newBackgroundLayer()[field],
+        })),
+    ];
+}

package/dist/inspector/styleEditors/gradientValue.d.ts

@@ -0,0 +1,17 @@
+export type GradientType = "linear" | "radial" | "conic";
+export interface GradientStop {
+    color: string;
+    position: number;
+}
+export interface GradientValue {
+    type: GradientType;
+    repeating: boolean;
+    angle: number;
+    /** Preserve the computed shape, origin, and interpolation method. */
+    prelude: string;
+    stops: GradientStop[];
+}
+export declare function defaultGradient(): GradientValue;
+/** Parse editable computed gradients. Leave unsupported syntax in the CSS field. */
+export declare function parseGradient(value: string): GradientValue | null;
+export declare function serializeGradient(gradient: GradientValue): string;

package/dist/inspector/styleEditors/gradientValue.js

@@ -0,0 +1,114 @@
+import { splitTopLevel, splitTopLevelWhitespace } from "../../css/value-semantics/cssSyntax.js";
+export function defaultGradient() {
+    return { type: "linear", repeating: false, angle: 90, prelude: "", stops: [
+            { color: "#dddddd", position: 0 }, { color: "#a4a4a4", position: 100 },
+        ] };
+}
+function angleDegrees(value) {
+    const match = /^([+-]?(?:\d*\.)?\d+)(deg|grad|rad|turn)$/.exec(value);
+    if (!match)
+        return null;
+    const number = Number(match[1]);
+    switch (match[2]) {
+        case "grad": return number * 0.9;
+        case "rad": return number * 180 / Math.PI;
+        case "turn": return number * 360;
+        default: return number;
+    }
+}
+/** Parse editable computed gradients. Leave unsupported syntax in the CSS field. */
+export function parseGradient(value) {
+    if (splitTopLevel(value, ",").length !== 1)
+        return null;
+    const match = /^(repeating-)?(linear|radial|conic)-gradient\((.*)\)$/s.exec(value.trim());
+    if (!match)
+        return null;
+    const type = match[2];
+    const parts = splitTopLevel(match[3], ",").map((part) => part.trim());
+    let prelude = "";
+    let angle = type === "linear" ? 180 : 0;
+    const first = parts[0] ?? "";
+    if (/^(?:to\s|[+-]?(?:\d*\.)?\d+(?:deg|grad|rad|turn)\b|circle\b|ellipse\b|closest-|farthest-|at\s|from\s|in\s)/.test(first)
+        || (type === "radial" && /\b(?:px|%)\b/.test(first))) {
+        prelude = parts.shift();
+        if (type === "linear") {
+            const direction = /^(to\s+(?:(?:left|right|top|bottom)(?:\s+|$)){1,2})/.exec(prelude)?.[0]?.trim();
+            if (direction) {
+                const directions = { top: 0, "top right": 45, "right top": 45, right: 90, "bottom right": 135, "right bottom": 135, bottom: 180, "bottom left": 225, "left bottom": 225, left: 270, "top left": 315, "left top": 315 };
+                // Corner directions depend on the element's aspect ratio. Keep them as CSS.
+                if (direction.slice(3).includes(" "))
+                    return null;
+                angle = directions[direction.slice(3)] ?? 180;
+                prelude = prelude.slice(direction.length).trim();
+            }
+            else if (!prelude.startsWith("in ")) {
+                const rawAngle = splitTopLevelWhitespace(prelude)[0];
+                const parsed = angleDegrees(rawAngle);
+                if (parsed === null)
+                    return null;
+                angle = parsed;
+                prelude = prelude.slice(rawAngle.length).trim();
+            }
+        }
+        else if (type === "conic" && prelude.startsWith("from ")) {
+            const rawAngle = splitTopLevelWhitespace(prelude)[1];
+            const parsed = angleDegrees(rawAngle);
+            if (parsed === null)
+                return null;
+            angle = parsed;
+            prelude = prelude.slice(5 + rawAngle.length).trim();
+        }
+    }
+    const stops = [];
+    for (const part of parts) {
+        const words = splitTopLevelWhitespace(part);
+        const positions = [];
+        while (words.length > 1) {
+            const last = words[words.length - 1];
+            const percent = /^([+-]?(?:\d*\.)?\d+)%$/.exec(last);
+            const degrees = type === "conic" ? angleDegrees(last) : null;
+            if (!percent && degrees === null && last !== "0")
+                break;
+            positions.unshift(percent ? Number(percent[1]) : degrees !== null ? degrees / 3.6 : 0);
+            words.pop();
+        }
+        const color = words.join(" ");
+        // Length stops and color hints cannot be represented by a percentage slider.
+        if (!color || words.length !== 1 || /^([+-]?\d|calc\(|var\()/i.test(color) || positions.length > 2)
+            return null;
+        if (positions.length)
+            positions.forEach((position) => stops.push({ color, position }));
+        else
+            stops.push({ color, position: null });
+    }
+    if (stops.length < 2)
+        return null;
+    stops[0].position ??= 0;
+    stops[stops.length - 1].position ??= 100;
+    let previous = stops[0].position;
+    for (const stop of stops) {
+        if (stop.position !== null) {
+            stop.position = Math.max(previous, stop.position);
+            previous = stop.position;
+        }
+    }
+    let start = 0;
+    while (start < stops.length - 1) {
+        let end = start + 1;
+        while (stops[end].position === null)
+            end++;
+        for (let index = start + 1; index < end; index++) {
+            stops[index].position = stops[start].position + (stops[end].position - stops[start].position) * (index - start) / (end - start);
+        }
+        start = end;
+    }
+    return { type, repeating: Boolean(match[1]), angle, prelude, stops: stops };
+}
+export function serializeGradient(gradient) {
+    const prefix = gradient.type === "linear" ? `${gradient.angle}deg`
+        : gradient.type === "conic" ? `from ${gradient.angle}deg` : "";
+    const prelude = [prefix, gradient.prelude].filter(Boolean).join(" ");
+    const stops = [...gradient.stops].sort((a, b) => a.position - b.position)
+        .map((stop) => `${stop.color} ${Number(stop.position.toFixed(3))}%`).join(", ");
+    return `${gradient.repeating ? "repeating-" : ""}${gradient.type}-gradient(${prelude ? `${prelude}, ` : ""}${stops})`;
+}

package/dist/inspector/styleEditors/inlineAuthored.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the inline-authored source when `el` carries the property — or a
+ * shorthand that sets it — in its `style` attribute. Managed previews can
+ * never beat inline styles in the cascade, so a non-null result means the
+ * field must present as blocked instead of accepting edits that silently
+ * revert (see `verifyPreview`'s "inline-style" conflict).
+ */
+export declare function inlineAuthoredValue(el: HTMLElement, property: string): string | null;
+/** First inline-authored source that blocks any of `properties` on any of `elements`. */
+export declare function inlineBlockedBy(elements: readonly HTMLElement[], ...properties: readonly string[]): string | null;

package/dist/inspector/styleEditors/inlineAuthored.js

@@ -0,0 +1,114 @@
+import { isLayoutPreview } from "./layoutPreviewState.js";
+/**
+ * Shorthands that also author the keyed longhand when present in a `style`
+ * attribute. Managed-stylesheet previews lose the cascade to any of these,
+ * so fields must treat the longhand as inline-blocked either way.
+ */
+const SHORTHAND_SOURCES = {
+    "font-family": ["font"],
+    "font-style": ["font"],
+    "font-weight": ["font"],
+    "font-size": ["font"],
+    "line-height": ["font"],
+    "background-color": ["background"],
+    "background-image": ["background"],
+    "row-gap": ["gap"],
+    "column-gap": ["gap"],
+    "flex-grow": ["flex"],
+    "flex-shrink": ["flex"],
+    "flex-basis": ["flex"],
+    "flex-direction": ["flex-flow"],
+    "flex-wrap": ["flex-flow"],
+    "align-content": ["place-content"],
+    "justify-content": ["place-content"],
+    "align-items": ["place-items"],
+    "justify-items": ["place-items"],
+    "align-self": ["place-self"],
+    "justify-self": ["place-self"],
+    "border-width": ["border"],
+    "border-style": ["border"],
+    "border-color": ["border"],
+    "border-top-left-radius": ["border-radius"],
+    "border-top-right-radius": ["border-radius"],
+    "border-bottom-right-radius": ["border-radius"],
+    "border-bottom-left-radius": ["border-radius"],
+    "border-top-width": ["border-top", "border-width", "border"],
+    "border-right-width": ["border-right", "border-width", "border"],
+    "border-bottom-width": ["border-bottom", "border-width", "border"],
+    "border-left-width": ["border-left", "border-width", "border"],
+    "border-top-style": ["border-top", "border-style", "border"],
+    "border-right-style": ["border-right", "border-style", "border"],
+    "border-bottom-style": ["border-bottom", "border-style", "border"],
+    "border-left-style": ["border-left", "border-style", "border"],
+    "border-top-color": ["border-top", "border-color", "border"],
+    "border-right-color": ["border-right", "border-color", "border"],
+    "border-bottom-color": ["border-bottom", "border-color", "border"],
+    "border-left-color": ["border-left", "border-color", "border"],
+    "margin-top": ["margin", "margin-block", "margin-block-start", "margin-block-end"],
+    "margin-right": ["margin", "margin-inline", "margin-inline-start", "margin-inline-end"],
+    "margin-bottom": ["margin", "margin-block", "margin-block-start", "margin-block-end"],
+    "margin-left": ["margin", "margin-inline", "margin-inline-start", "margin-inline-end"],
+    "padding-top": ["padding", "padding-block", "padding-block-start", "padding-block-end"],
+    "padding-right": ["padding", "padding-inline", "padding-inline-start", "padding-inline-end"],
+    "padding-bottom": ["padding", "padding-block", "padding-block-start", "padding-block-end"],
+    "padding-left": ["padding", "padding-inline", "padding-inline-start", "padding-inline-end"],
+    top: ["inset", "inset-block", "inset-block-start", "inset-block-end"],
+    right: ["inset", "inset-inline", "inset-inline-start", "inset-inline-end"],
+    bottom: ["inset", "inset-block", "inset-block-start", "inset-block-end"],
+    left: ["inset", "inset-inline", "inset-inline-start", "inset-inline-end"],
+    "grid-template-columns": ["grid-template", "grid"],
+    "grid-template-rows": ["grid-template", "grid"],
+    "grid-template-areas": ["grid-template", "grid"],
+    "grid-auto-columns": ["grid-auto", "grid"],
+    "grid-auto-rows": ["grid-auto", "grid"],
+    "grid-auto-flow": ["grid-auto", "grid"],
+    "grid-row": ["grid-area", "grid"],
+    "grid-column": ["grid-area", "grid"],
+    "grid-row-start": ["grid-row", "grid-area", "grid"],
+    "grid-row-end": ["grid-row", "grid-area", "grid"],
+    "grid-column-start": ["grid-column", "grid-area", "grid"],
+    "grid-column-end": ["grid-column", "grid-area", "grid"],
+};
+/**
+ * Longhands edited together by one linked field. The field is blocked when
+ * any of them is inline-authored, even if the shorthand itself is not.
+ */
+const LINKED_LONGHANDS = {
+    "border-width": ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"],
+    "border-style": ["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"],
+    "border-color": ["border-top-color", "border-right-color", "border-bottom-color", "border-left-color"],
+    "border-radius": ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius"],
+};
+/**
+ * Returns the inline-authored source when `el` carries the property — or a
+ * shorthand that sets it — in its `style` attribute. Managed previews can
+ * never beat inline styles in the cascade, so a non-null result means the
+ * field must present as blocked instead of accepting edits that silently
+ * revert (see `verifyPreview`'s "inline-style" conflict).
+ */
+export function inlineAuthoredValue(el, property) {
+    if (isLayoutPreview(el, property))
+        return null;
+    for (const source of [property, ...(SHORTHAND_SOURCES[property] ?? [])]) {
+        const value = el.style.getPropertyValue(source).trim();
+        if (value)
+            return `${source}: ${value}`;
+    }
+    for (const longhand of LINKED_LONGHANDS[property] ?? []) {
+        const value = inlineAuthoredValue(el, longhand);
+        if (value)
+            return value;
+    }
+    return null;
+}
+/** First inline-authored source that blocks any of `properties` on any of `elements`. */
+export function inlineBlockedBy(elements, ...properties) {
+    for (const property of properties) {
+        for (const el of elements) {
+            const value = inlineAuthoredValue(el, property);
+            if (value)
+                return value;
+        }
+    }
+    return null;
+}

package/dist/inspector/styleEditors/layoutValue.d.ts

@@ -4,14 +4,6 @@
  */
 export declare function meaningfulLayoutValue(el: HTMLElement, property: string): string;
 export declare function readAuthoredStyleValue(el: HTMLElement, property: string): string | null;
-/**
- * Returns the inline-authored source when `el` carries the property — or a
- * shorthand that sets it — in its `style` attribute. Managed previews can
- * never beat inline styles in the cascade, so a non-null result means the
- * field must present as blocked instead of accepting edits that silently
- * revert (see `verifyPreview`'s "inline-style" conflict).
- */
-export declare function inlineAuthoredValue(el: HTMLElement, property: string): string | null;
 export interface LayoutValue {
     property: string;
     authored: string | null;

package/dist/inspector/styleEditors/layoutValue.js

@@ -2,7 +2,6 @@ import { getActiveStyleState } from "../shell/styleState.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
 import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
-import { isLayoutPreview } from "./layoutPreviewState.js";
 const DEFAULT_LAYOUT_VALUES = {
     width: "auto",
     height: "auto",
@@ -48,47 +47,6 @@ export function readAuthoredStyleValue(el, property) {
     const inline = el.style.getPropertyValue(property).trim();
     return inline || null;
 }
-/**
- * Shorthands that also author the keyed longhand when present in a `style`
- * attribute. Managed-stylesheet previews lose the cascade to any of these,
- * so fields must treat the longhand as inline-blocked either way.
- */
-const INLINE_SHORTHAND_SOURCES = {
-    "row-gap": ["gap"],
-    "column-gap": ["gap"],
-    "margin-top": ["margin"],
-    "margin-right": ["margin"],
-    "margin-bottom": ["margin"],
-    "margin-left": ["margin"],
-    "padding-top": ["padding"],
-    "padding-right": ["padding"],
-    "padding-bottom": ["padding"],
-    "padding-left": ["padding"],
-    top: ["inset"],
-    right: ["inset"],
-    bottom: ["inset"],
-    left: ["inset"],
-};
-/**
- * Returns the inline-authored source when `el` carries the property — or a
- * shorthand that sets it — in its `style` attribute. Managed previews can
- * never beat inline styles in the cascade, so a non-null result means the
- * field must present as blocked instead of accepting edits that silently
- * revert (see `verifyPreview`'s "inline-style" conflict).
- */
-export function inlineAuthoredValue(el, property) {
-    if (isLayoutPreview(el, property))
-        return null;
-    const direct = el.style.getPropertyValue(property).trim();
-    if (direct)
-        return `${property}: ${direct}`;
-    for (const shorthand of INLINE_SHORTHAND_SOURCES[property] ?? []) {
-        const value = el.style.getPropertyValue(shorthand).trim();
-        if (value)
-            return `${shorthand}: ${value}`;
-    }
-    return null;
-}
 /**
  * Reads both representations needed by a layout editor. Authored CSS is the
  * editable source of truth; computed CSS is only the browser preview/fallback.

package/dist/inspector/styleEditors/nudgeValue.d.ts

@@ -7,8 +7,8 @@ export declare function nudgeCssValue(property: string, rawValue: string, direct
 /** Returns whether a style field exposes the horizontal drag nudge affordance. */
 export declare function supportsDragNudge(property: string): boolean;
 /**
- * Applies one regular nudge per four horizontal pointer pixels and one large
- * nudge per two horizontal pointer pixels. When a large drag starts from an
+ * Applies one regular nudge per sixteen horizontal pointer pixels and one large
+ * nudge per eight horizontal pointer pixels. When a large drag starts from an
  * off-grid value, the first step snaps to the next large-step boundary in the
  * drag direction.
  */

package/dist/inspector/styleEditors/nudgeValue.js

@@ -2,14 +2,16 @@ import { completeCssValue, CSS_NUMBER_SOURCE } from "./completeCssValue.js";
 import { valuePolicyFor } from "./valuePolicy.js";
 const CSS_NUMBER = new RegExp(`^(?:${CSS_NUMBER_SOURCE})$`, "i");
 const CSS_NUMERIC_LITERAL = new RegExp(`^(${CSS_NUMBER_SOURCE})(px|rem|em|%)?$`, "i");
-const DRAG_PIXELS_PER_STEP = 4;
-const LARGE_DRAG_PIXELS_PER_STEP = 2;
-const DRAG_NUDGE_PROPERTY = /^(?:(?:padding|margin)-(?:top|right|bottom|left|horizontal|vertical)|(?:top|right|bottom|left|inset|inset-(?:horizontal|vertical))|(?:row|column)-gap|border-radius|border-(?:top-left|top-right|bottom-right|bottom-left)-radius)$/;
+const DRAG_PIXELS_PER_STEP = 16;
+const LARGE_DRAG_PIXELS_PER_STEP = 8;
+const DRAG_NUDGE_PROPERTY = /^(?:(?:padding|margin)-(?:top|right|bottom|left|horizontal|vertical)|(?:top|right|bottom|left|inset|inset-(?:horizontal|vertical))|(?:row|column)-gap|(?:font-size|letter-spacing|line-height|opacity)|border-radius|border-(?:top-left|top-right|bottom-right|bottom-left)-radius)$/;
 /**
  * Returns a nudged CSS numeric literal, or null when the value is not a
  * standalone number that the inspector can safely edit.
  */
 export function nudgeCssValue(property, rawValue, direction, large = false) {
+    if (property === "opacity")
+        return nudgeOpacityValue(rawValue, direction, large);
     const normalised = normaliseForNudge(property, rawValue);
     const parsed = parseNumericLiteral(normalised);
     if (!parsed)
@@ -25,8 +27,8 @@ export function supportsDragNudge(property) {
     return DRAG_NUDGE_PROPERTY.test(property);
 }
 /**
- * Applies one regular nudge per four horizontal pointer pixels and one large
- * nudge per two horizontal pointer pixels. When a large drag starts from an
+ * Applies one regular nudge per sixteen horizontal pointer pixels and one large
+ * nudge per eight horizontal pointer pixels. When a large drag starts from an
  * off-grid value, the first step snaps to the next large-step boundary in the
  * drag direction.
  */
@@ -59,11 +61,11 @@ export function canNudgeCssValueByDrag(property, rawValue) {
 }
 /** Returns a clamped opacity percentage nudged by 1%, or 10% with Shift. */
 export function nudgeOpacityValue(rawValue, direction, large = false) {
-    const parsed = parseNumericLiteral(rawValue);
-    if (!parsed || parsed.unit !== "%")
+    const percent = parseOpacityPercent(rawValue);
+    if (percent === null)
         return null;
     const step = large ? 10 : 1;
-    const next = Math.min(100, Math.max(0, parsed.number + direction * step));
+    const next = Math.min(100, Math.max(0, percent + direction * step));
     return `${formatNumber(next)}%`;
 }
 function normaliseForNudge(property, rawValue) {
@@ -118,6 +120,8 @@ function snapCssValueToLargeStep(property, rawValue, direction) {
     return snappedParts.join(", ");
 }
 function snapNumericValueToLargeStep(property, rawValue, direction) {
+    if (property === "opacity")
+        return snapOpacityValueToLargeStep(rawValue, direction);
     const normalised = normaliseForNudge(property, rawValue);
     const parsed = parseNumericLiteral(normalised);
     if (!parsed)
@@ -134,6 +138,30 @@ function snapNumericValueToLargeStep(property, rawValue, direction) {
     next = clampNudgeNumber(property, next);
     return `${formatNumber(next)}${parsed.unit}`;
 }
+function snapOpacityValueToLargeStep(rawValue, direction) {
+    const percent = parseOpacityPercent(rawValue);
+    if (percent === null)
+        return null;
+    const step = 10;
+    let next = direction > 0
+        ? Math.ceil(percent / step) * step
+        : Math.floor(percent / step) * step;
+    if ((direction > 0 && next <= percent) || (direction < 0 && next >= percent)) {
+        next += direction * step;
+    }
+    next = Math.min(100, Math.max(0, next));
+    return `${formatNumber(next)}%`;
+}
+function parseOpacityPercent(rawValue) {
+    const parsed = parseNumericLiteral(rawValue);
+    if (!parsed)
+        return null;
+    if (parsed.unit === "%")
+        return parsed.number;
+    if (parsed.unit === "" && parsed.number >= 0 && parsed.number <= 1)
+        return parsed.number * 100;
+    return null;
+}
 function isLineHeight(property) {
     return property === "line-height" || property.includes("line-height");
 }

package/dist/inspector/tokens/TokenField.d.ts

@@ -7,6 +7,8 @@ import { type EditTarget } from "../selection/editTarget.js";
 import type { StyleSelection } from "../selection/styleSelection.js";
 export interface TokenValueFieldProps {
     property: string;
+    /** Numeric editing policy for a scalar slot inside a composite property. */
+    nudgeProperty?: string;
     domElement?: HTMLElement;
     semanticSlot?: TokenSemanticSlot;
     committedValue: string;
@@ -34,6 +36,9 @@ export interface TokenValueFieldProps {
     onCommitOpacity?(value: string): boolean | void;
     atRules?: readonly AtRuleContext[];
     chipVariant?: "default" | "small";
+    blockedBy?: string | null;
+    inlineWarningDataTest?: string;
+    inlineWarningTooltipDataTest?: string;
 }
 export interface TokenFieldProps {
     property: string;
@@ -62,6 +67,8 @@ export interface TokenFieldProps {
     mixed?: boolean;
     /** Referenced tokens used for raw color-field behavior; not rendered inline. */
     attributionTokens?: string[];
+    inlineWarningDataTest?: string;
+    inlineWarningTooltipDataTest?: string;
 }
 export declare function colorValueToHex(value: string): string | null;
 export declare function TokenValueField(props: TokenValueFieldProps): ReactElement;