nudge-ui 0.2.1 → 0.2.3

package/dist/inspector/styleEditors/BorderEditor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { IconBorderBottom, IconBorderLeft, IconBorderRight, IconBorderSides, IconBorderStyle2, IconBorderTop, IconCheck, IconMinus, IconPlus, } from "@tabler/icons-react";
+import { IconBorderSides, IconBorderStyle2, IconCheck, IconMinus, IconPlus, } from "@tabler/icons-react";
 import { findTokenRow } from "./rowLookup.js";
 import { TokenField } from "../tokens/TokenField.js";
 import { setStyle, setStyles } from "../tokens/editActions.js";
@@ -13,8 +13,11 @@ import { getStateStyleValue } from "../shell/stateValue.js";
 import { PopoverListbox } from "../ui/PopoverListbox.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
-import { hasAuthoredProperty, hasAuthoredStyle, isZeroCssValue } from "./stylePresence.js";
+import { isZeroCssValue } from "./stylePresence.js";
 import { useFieldVisibility } from "./useFieldVisibility.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { inlineStyleWarningContent } from "../ui/InlineStyleWarning.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 const BORDER_STYLES = ["none", "hidden", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"];
 const INVISIBLE_BORDER_STYLES = new Set(["none", "hidden"]);
 const BORDER_SIDES = SIDE_NAMES.map((side) => `border-${side}`);
@@ -96,67 +99,15 @@ function valuesAreLinked(el, rows, shorthand, sideProperties) {
     const signatures = sideProperties.map((property) => sideComponentSignature(el, rows, property));
     return new Set(signatures).size === 1;
 }
-function isBorderFaceProperty(property) {
-    const p = property.toLowerCase();
-    return p === "border"
-        || p === "border-width"
-        || p === "border-style"
-        || p === "border-color"
-        || /^border-(top|right|bottom|left)(?:-(?:width|style|color))?$/.test(p);
-}
-function isZeroWidthValue(value) {
-    const trimmed = value.trim().toLowerCase();
-    if (isZeroCssValue(trimmed))
-        return true;
-    // Structured/preflight authored forms like `0 solid` / `0px solid currentcolor`.
-    const first = trimmed.split(/\s+/)[0] ?? "";
-    return isZeroCssValue(first);
-}
-/** True when a face paints: drawn style and non-zero width. */
-function sidePaints(el, rows, side) {
-    const style = borderStyleValue(el, rows, `border-${side}-style`);
-    if (INVISIBLE_BORDER_STYLES.has(style))
-        return false;
-    return !isZeroWidthValue(borderWidthValue(el, rows, `border-${side}-width`));
-}
-/**
- * Show border controls for intentional / painted borders only.
- *
- * Tailwind preflight authors `border: 0 solid` on `*`. That is cascade
- * evidence but not a visible border — hide controls and show + instead.
- *
- * Counts as presence:
- * - any painted face (drawn style + non-zero width)
- * - a direct width or disabling style, including zero
- */
-function hasBorderPresence(el, rows) {
-    if (SIDE_NAMES.some((side) => sidePaints(el, rows, side)))
-        return true;
-    for (const row of rows) {
-        if (!isBorderFaceProperty(row.property) && !row.structure)
-            continue;
-        if (!hasAuthoredStyle(row))
-            continue;
-        const property = row.property.toLowerCase();
-        const authored = (row.authored ?? row.declaredValue ?? "").trim().toLowerCase();
-        const structuredStyle = row.structure?.style?.trim().toLowerCase() ?? "";
-        const structuredWidth = row.structure?.width?.trim() ?? "";
-        if (INVISIBLE_BORDER_STYLES.has(structuredStyle) || INVISIBLE_BORDER_STYLES.has(authored)) {
-            return true;
-        }
-        if (structuredWidth)
-            return true;
-        if ((property === "border-width" || property.endsWith("-width")) && authored) {
-            return true;
-        }
-    }
-    // Computed non-zero width without cascade rows (inline / inaccessible sheets).
-    if (!isZeroWidthValue(borderWidthValue(el, rows, "border-width")))
-        return true;
-    if (SIDE_NAMES.some((side) => !isZeroWidthValue(borderWidthValue(el, rows, `border-${side}-width`)))) {
-        return true;
-    }
-    return false;
+/** Initial visibility follows the effective border, including stylesheet resets. */
+function hasBorderPresence(el) {
+    return SIDE_NAMES.some((side) => {
+        const style = getStateStyleValue(el, `border-${side}-style`, "none").toLowerCase();
+        if (INVISIBLE_BORDER_STYLES.has(style))
+            return false;
+        const width = getStateStyleValue(el, `border-${side}-width`, "0px");
+        return !isZeroCssValue(width);
+    });
 }
 /**
  * Linked presentation from cascade data + optional user toggle.
@@ -192,12 +143,14 @@ function useBorderLinkedState(dataLinked, resetKey) {
 export function BorderEditor(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
     const el = element.domElement;
+    const selectedElements = selection?.domElements ?? [el];
     const editTarget = selection?.target ?? el;
     const isGroup = Boolean(selection && selection.elements.length > 1);
     const allEntries = entries ?? getNudgeUiTokenEntries();
     const borderWidthProperties = BORDER_SIDES.map((side) => `${side}-width`);
     const borderStyleProperties = BORDER_SIDES.map((side) => `${side}-style`);
     const borderColorProperties = BORDER_SIDES.map((side) => `${side}-color`);
+    const borderBlockedBy = inlineBlockedBy(selectedElements, "border", "border-width", "border-style", "border-color");
     const borderWidthDataLinked = valuesAreLinked(el, tokenRows, "border-width", borderWidthProperties);
     const borderStyleDataLinked = valuesAreLinked(el, tokenRows, "border-style", borderStyleProperties);
     const borderColorDataLinked = valuesAreLinked(el, tokenRows, "border-color", borderColorProperties);
@@ -208,18 +161,19 @@ export function BorderEditor(props) {
     const rawBorderFallback = !isGroup && Boolean(borderRow && !borderRow.structure && !hasStructuredBorderRows);
     const linkedBorderStyle = borderStyleValue(el, tokenRows, "border-style");
     const showWidthAndColor = !(borderLinked && INVISIBLE_BORDER_STYLES.has(linkedBorderStyle));
-    const hasBorder = isGroup
-        ? (selection?.domElements.some((candidate) => hasBorderPresence(candidate, [])) ?? false)
-            || borderWidthProperties.some((property) => hasAuthoredProperty(selection, property))
-        : hasBorderPresence(el, tokenRows);
-    const visibility = useFieldVisibility(selection?.domElements ?? [el], "border", hasBorder || rawBorderFallback);
+    const hasBorder = selectedElements.some(hasBorderPresence);
+    const visibility = useFieldVisibility(selectedElements, "border", hasBorder);
     const showBorderControls = visibility.visible;
     function handleAddBorder() {
+        if (borderBlockedBy)
+            return;
         setStyle(editTarget, "border", "1px solid");
         visibility.show();
         onAfterEdit?.();
     }
     function handleRemoveBorder() {
+        if (borderBlockedBy)
+            return;
         setStyle(editTarget, "border", "0 solid");
         visibility.hide();
         onAfterEdit?.();
@@ -228,6 +182,8 @@ export function BorderEditor(props) {
         setBorderLinked(false);
     }
     function handleCollapse() {
+        if (borderBlockedBy)
+            return;
         setBorderLinked(true);
         const declarations = [
             borderLinkDeclaration(el, tokenRows, "border-style", borderStyleProperties),
@@ -245,29 +201,42 @@ export function BorderEditor(props) {
         width: (_jsx(ControlSurface, { children: _jsx(TokenField, { property: borderWidthProperties[index], selection: selection, tokenRow: findTokenRow(tokenRows, borderWidthProperties[index]), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) })),
         style: (_jsx(BorderStyleSettingsMenu, { property: borderStyleProperties[index], tokenRow: findTokenRow(tokenRows, borderStyleProperties[index]), domElement: el, editTarget: editTarget, selection: selection, dataTest: `border-style-${side}`, onAfterEdit: onAfterEdit })),
     }));
-    return (_jsxs("div", { className: `editor`, "data-test": "border-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Border" }), showBorderControls ? (_jsx(IconButton, { variant: "quiet", label: "Remove Border", "data-test": "remove-border", className: "border__remove", onClick: handleRemoveBorder, children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) })) : (_jsx(IconButton, { variant: "quiet", label: "Add Border", "data-test": "add-border", className: "border__add", onClick: handleAddBorder, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] }), showBorderControls && (_jsx("div", { className: "border", "data-expanded": borderLinked ? "false" : "true", children: rawBorderFallback ? (_jsx(FieldRow, { label: "Border", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border", selection: selection, tokenRow: borderRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) })) : borderLinked ? (_jsxs("div", { className: "border__linked-row", children: [showWidthAndColor ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border__linked-control border__linked-control--color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-color", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-color", borderColorProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }), _jsx("div", { className: "border__linked-control border__linked-control--width", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-width", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-width", borderWidthProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) }) })] })) : null, _jsx(BorderStyleSettingsMenu, { property: "border-style", tokenRow: linkedTokenRow(tokenRows, "border-style", borderStyleProperties), domElement: el, editTarget: editTarget, selection: selection, onAfterEdit: onAfterEdit }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-expand", label: "Edit Individual Border Sides", title: "Edit Individual Border Sides", pressed: !borderLinked, onPressedChange: (pressed) => {
+    return (_jsxs("div", { className: `editor`, "data-test": "border-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Border" }), showBorderControls ? (_jsx(Tooltip, { content: inlineStyleWarningContent(borderBlockedBy), children: _jsx(IconButton, { variant: "quiet", label: "Remove Border", "data-test": "remove-border", className: "border__remove", disabled: borderBlockedBy !== null, onClick: handleRemoveBorder, children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) }) })) : (_jsx(IconButton, { variant: "quiet", label: "Add Border", "data-test": "add-border", className: "border__add", disabled: borderBlockedBy !== null, onClick: handleAddBorder, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] }), showBorderControls && (_jsx("div", { className: "border", "data-expanded": borderLinked ? "false" : "true", children: rawBorderFallback ? (_jsx(FieldRow, { label: "Border", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border", selection: selection, tokenRow: borderRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) })) : borderLinked ? (_jsxs("div", { className: "border__linked-row", children: [showWidthAndColor ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border__linked-control border__linked-control--color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-color", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-color", borderColorProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }), _jsx("div", { className: "border__linked-control border__linked-control--width", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-width", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-width", borderWidthProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) }) })] })) : null, _jsx(BorderStyleSettingsMenu, { property: "border-style", tokenRow: linkedTokenRow(tokenRows, "border-style", borderStyleProperties), domElement: el, editTarget: editTarget, selection: selection, onAfterEdit: onAfterEdit }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-expand", label: "Edit Individual Border Sides", pressed: !borderLinked, onPressedChange: (pressed) => {
                                 if (pressed)
                                     handleExpand();
-                            }, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] })) : (_jsxs("div", { className: "border__expanded", children: [_jsxs("div", { className: "border__expanded-header", children: [_jsx("span", { className: "side-values__label", children: formatInspectorLabel("Individual Sides") }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-collapse", label: "Link All Border Sides", title: "Link All Border Sides", pressed: !borderLinked, onPressedChange: (pressed) => {
+                            }, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] })) : (_jsxs("div", { className: "border__expanded", children: [_jsxs("div", { className: "border__expanded-header", children: [_jsx("span", { className: "side-values__label", children: formatInspectorLabel("Individual Sides") }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-collapse", label: "Link All Border Sides", pressed: !borderLinked, disabled: borderBlockedBy !== null, onPressedChange: (pressed) => {
                                         if (!pressed)
                                             handleCollapse();
                                     }, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] }), showWidthAndColor ? (_jsx("div", { className: "border__side-rows", "data-test": "border-side-rows", children: sideRows.map(({ side, color, width, style }) => (_jsxs("div", { className: "border__side-row", "data-side": side, "aria-label": `Border ${formatInspectorLabel(side)}`, children: [_jsx(BorderSideIndicator, { side: side }), _jsx("div", { className: "border__side-control border__side-control--color", children: color }), _jsx("div", { className: "border__side-control border__side-control--width", children: width }), style] }, side))) })) : null] })) }))] }));
 }
-const BORDER_SIDE_ICONS = {
-    top: IconBorderTop,
-    right: IconBorderRight,
-    bottom: IconBorderBottom,
-    left: IconBorderLeft,
+const BORDER_SIDE_ICON_PATHS = {
+    left: {
+        outline: "M20 3H4v18h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z",
+        emphasis: { x1: "3.5", y1: "3.5", x2: "3.5", y2: "20.5" },
+    },
+    right: {
+        outline: "M4 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16V3H4Z",
+        emphasis: { x1: "20.5", y1: "3.5", x2: "20.5", y2: "20.5" },
+    },
+    top: {
+        outline: "M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4h18v16Z",
+        emphasis: { x1: "3.5", y1: "3.5", x2: "20.5", y2: "3.5" },
+    },
+    bottom: {
+        outline: "M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17H3V4Z",
+        emphasis: { x1: "3.5", y1: "20.5", x2: "20.5", y2: "20.5" },
+    },
 };
 function BorderSideIndicator({ side }) {
-    const Icon = BORDER_SIDE_ICONS[side];
-    return _jsx(Icon, { className: "side-values__icon side-values__side-icon", size: 16, "aria-hidden": "true" });
+    const { outline, emphasis } = BORDER_SIDE_ICON_PATHS[side];
+    return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: outline, stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "square", strokeOpacity: "0.2" }), _jsx("line", { ...emphasis, stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
 }
 function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarget, selection, dataTest = "border-style-settings", onAfterEdit }) {
     const structured = tokenRow?.structure?.style?.trim().toLowerCase() ?? "";
     const selectedValue = selection?.getProperty(property)?.value;
     const mixed = selectedValue?.kind === "mixed";
     const commonValue = selectedValue?.kind === "common" ? selectedValue.value : "";
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], property);
     const initial = mixed ? "Mixed" : commonValue || structured || getStateStyleValue(el, property, "none") || "none";
     const [value, setValue] = useState(initial);
     const [open, setOpen] = useState(false);
@@ -275,6 +244,8 @@ function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarge
         setValue(mixed ? "Mixed" : commonValue || structured || getStateStyleValue(el, property, "none") || "none");
     }, [commonValue, el, mixed, property, structured]);
     function handleChange(next) {
+        if (blockedBy)
+            return;
         if (!BORDER_STYLES.includes(next))
             return;
         setValue(next);
@@ -282,7 +253,7 @@ function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarge
         setOpen(false);
         onAfterEdit?.();
     }
-    return (_jsx(PopoverListbox, { query: "", value: null, open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: `Border style: ${formatInspectorLabel(value)}`, "data-test": dataTest, "data-current-style": value, children: _jsx(IconBorderStyle2, { size: 16, "aria-hidden": "true" }) })), triggerDataTest: dataTest, triggerAriaLabel: "Border style settings", items: BORDER_STYLES.map((style) => ({
+    return (_jsx(PopoverListbox, { query: "", value: null, open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: `Border style: ${formatInspectorLabel(value)}`, "data-test": dataTest, "data-current-style": value, children: _jsx(IconBorderStyle2, { size: 16, "aria-hidden": "true" }) })), triggerDataTest: dataTest, triggerAriaLabel: "Border style settings", triggerTooltip: inlineStyleWarningContent(blockedBy), disabled: blockedBy !== null, items: BORDER_STYLES.map((style) => ({
             value: style,
             label: formatInspectorLabel(style),
             leading: style === value ? _jsx(IconCheck, { size: 14, stroke: 2, "aria-hidden": "true" }) : undefined,

package/dist/inspector/styleEditors/BorderRadiusEditor.js

@@ -10,6 +10,7 @@ import { ControlSurface } from "../ui/ControlSurface.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
 import { completeCssValue } from "./completeCssValue.js";
 import { valuePolicyFor } from "./valuePolicy.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 const BORDER_RADIUS_CORNERS = [
     "border-top-left-radius",
     "border-top-right-radius",
@@ -52,6 +53,7 @@ export function BorderRadiusEditor(props) {
     const isGroup = Boolean(selection && selection.elements.length > 1);
     const allEntries = entries ?? getNudgeUiTokenEntries();
     const dataLinked = !isGroup && cornersAreLinked(tokenRows);
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], "border-radius");
     const [userUnlinked, setUserUnlinked] = useState(false);
     const [userLinked, setUserLinked] = useState(false);
     useEffect(() => {
@@ -70,6 +72,8 @@ export function BorderRadiusEditor(props) {
         setUserLinked(false);
     }
     function handleCollapse() {
+        if (blockedBy)
+            return;
         setUserLinked(true);
         setUserUnlinked(false);
         linkAllCorners(editTarget, tokenRows, selection, onAfterEdit);
@@ -94,7 +98,8 @@ export function BorderRadiusEditor(props) {
     const groupedControl = (_jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-radius", selection: selection, tokenRow: mixed ? null : borderRadiusRow, initialValue: mixed ? "Mix" : undefined, displayValue: mixed ? "Mix" : undefined, domElement: el, editTarget: editTarget, entries: allEntries, editMetadata: metadataFor(borderRadiusRow), mixed: mixed, formatRawValue: (value) => mixed && value.trim().toLowerCase() === "mix"
                 ? ""
                 : completeCssValue(value.trim(), valuePolicyFor("border-radius")), onAfterEdit: onAfterEdit, chipVariant: "small", leading: _jsx(IconBorderCorners, { className: "side-values__icon side-values__side-icon", size: 16, "aria-hidden": "true" }) }) }));
-    const toggleButton = (_jsx(ToggleButton, { className: embedded ? "border-radius-editor__toggle" : undefined, variant: "quiet", size: "default", "data-test": isLinked ? "border-radius-expand" : "border-radius-collapse", label: isLinked ? "Edit Individual Corners" : "Link All Corners", title: isLinked ? "Edit Individual Corners" : "Link All Corners", pressed: !isLinked, onPressedChange: (pressed) => {
+    const toggleBlocked = !isLinked && blockedBy !== null;
+    const toggleButton = (_jsx(ToggleButton, { className: embedded ? "border-radius-editor__toggle" : undefined, variant: "quiet", size: "default", "data-test": isLinked ? "border-radius-expand" : "border-radius-collapse", label: isLinked ? "Edit Individual Corners" : "Link All Corners", pressed: !isLinked, disabled: toggleBlocked, onPressedChange: (pressed) => {
             if (pressed)
                 handleExpand();
             else

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

@@ -1,6 +1,5 @@
 import type { ReactElement } from "react";
-import type { TokenEntry } from "../../css/model/index.js";
-import type { ResolvedProperty } from "../../css/model/index.js";
+import type { TokenEntry, ResolvedProperty } from "../../css/model/index.js";
 import type { SelectedElement } from "../selection/selectionStore.js";
 import type { StyleSelection } from "../selection/styleSelection.js";
 export interface BoxShadowEditorProps {

package/dist/inspector/styleEditors/BoxShadowEditor.js

@@ -1,13 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPlus } from "@tabler/icons-react";
-import { TokenField } from "../tokens/TokenField.js";
-import { FieldRow } from "../ui/FieldRow.js";
+import { useEffect, useState } from "react";
+import { IconBoxMargin, IconLetterX, IconLetterY, IconMinus, IconPlus } from "@tabler/icons-react";
+import { splitTopLevel, splitTopLevelWhitespace } from "../../css/value-semantics/cssSyntax.js";
+import { interpretTokenValue } from "../../css/value-semantics/tokenInterpretation.js";
+import { applyColorOpacity, replaceColorPreservingOpacity, withColorOpacity } from "../../css/value-semantics/colorSemantics.js";
+import { colorValueToHex, TokenField, TokenValueField } from "../tokens/TokenField.js";
+import { setStyle } from "../tokens/editActions.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
 import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { hasAuthoredProperty } from "./stylePresence.js";
 import { useFieldVisibility } from "./useFieldVisibility.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
+import { metadataFor } from "./rowLookup.js";
+import { completeCssValue } from "./completeCssValue.js";
+import { valuePolicyFor } from "./valuePolicy.js";
+const LENGTH = /^(?:[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:[a-z]+)?|(?:calc|min|max|clamp)\(.+\))$/i;
+const DIMENSIONS = [
+    { label: "X Offset", description: "X offset", Icon: IconLetterX },
+    { label: "Y Offset", description: "Y offset", Icon: IconLetterY },
+    { label: "Blur", description: "Blur", Icon: ShadowBlurIcon },
+    { label: "Spread", description: "Spread", Icon: IconBoxMargin },
+];
+function ShadowBlurIcon({ size = 16 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", "aria-hidden": "true", children: [_jsx("circle", { opacity: "0.5", cx: "7.55555", cy: "3.11111", r: "1.11111" }), _jsx("circle", { cx: "7.55555", cy: "7.55555", r: "1.11111" }), _jsx("circle", { cx: "7.55555", cy: "12", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "7.55555", cy: "16.4444", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "7.55555", cy: "20.8889", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "12", cy: "3.11111", r: "1.11111" }), _jsx("circle", { cx: "12", cy: "7.55555", r: "1.11111" }), _jsx("circle", { cx: "12", cy: "12", r: "1.11111" }), _jsx("circle", { cx: "12", cy: "16.4444", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "12", cy: "20.8889", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "16.4444", cy: "3.11111", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "16.4444", cy: "7.55555", r: "1.11111" }), _jsx("circle", { cx: "16.4444", cy: "12", r: "1.11111" }), _jsx("circle", { cx: "16.4444", cy: "16.4444", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "16.4444", cy: "20.8889", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "20.8889", cy: "3.11111", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "20.8889", cy: "7.55555", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "20.8889", cy: "12", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "20.8889", cy: "16.4444", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "20.8889", cy: "20.8889", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "3.11111", cy: "3.11111", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "3.11111", cy: "7.55555", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "3.11111", cy: "12", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "3.11111", cy: "16.4444", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "3.11111", cy: "20.8889", r: "1.11111" })] }));
+}
+function defaultShadow() {
+    return { lengths: ["0", "2px", "3px", "0"], color: "rgb(0 0 0 / 20%)", inset: false };
+}
+function parseShadows(value, entries) {
+    if (!value || value === "none")
+        return [];
+    const result = [];
+    for (const layer of splitTopLevel(value, ",")) {
+        const parts = splitTopLevelWhitespace(layer.trim());
+        const isLength = (part) => LENGTH.test(resolveToken(part, entries));
+        const lengths = parts.filter(isLength);
+        const colors = parts.filter((part) => part !== "inset" && !isLength(part));
+        if (lengths.length < 2 || lengths.length > 4 || colors.length > 1)
+            return null;
+        result.push({
+            lengths: [lengths[0], lengths[1], lengths[2] ?? "0", lengths[3] ?? "0"],
+            color: colors[0] ?? "currentColor",
+            inset: parts.includes("inset"),
+        });
+    }
+    return result.length ? result : null;
+}
+function tokenName(value) {
+    return /^var\((--[\w-]+)\)$/.exec(value)?.[1] ?? null;
+}
+function resolveToken(value, entries) {
+    const name = tokenName(value);
+    return entries.find((entry) => entry.name === name)?.value ?? value;
+}
+function serializeShadows(layers) {
+    if (layers.length === 0)
+        return "none";
+    return layers.map((layer) => `${layer.inset ? "inset " : ""}${layer.lengths.join(" ")} ${layer.color}`).join(", ");
+}
 export function BoxShadowEditor(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
     const el = element.domElement;
@@ -15,10 +68,85 @@ export function BoxShadowEditor(props) {
     const allEntries = entries ?? getNudgeUiTokenEntries();
     const tokenRow = tokenRows.find((row) => row.property === "box-shadow") ?? null;
     const elements = selection?.domElements ?? [el];
+    const colorContext = { tokenTable: Object.fromEntries(allEntries.map((entry) => [entry.name, entry])) };
+    const computed = getStateStyleValue(el, "box-shadow");
+    const source = tokenRow?.authored ?? tokenRow?.declaredValue ?? computed;
+    const [draft, setDraft] = useState(null);
+    useEffect(() => setDraft(null), [el, source]);
+    const activeDraft = draft?.element === el && draft.source === source ? draft : null;
+    const value = activeDraft?.value ?? source;
+    // A row can reference a color or length token without the entire shadow being token-backed.
+    const wholeShadowToken = tokenRow?.tokenName
+        && value.trim().startsWith("var(")
+        && splitTopLevelWhitespace(value.trim()).length === 1;
+    const selectedProperty = selection && selection.elements.length > 1 ? selection.getProperty("box-shadow") : null;
+    const mixed = selectedProperty?.value.kind === "mixed";
+    const layers = mixed ? null : parseShadows(value, allEntries)
+        ?? parseShadows(tokenRow?.resolvedValue ?? computed, allEntries);
+    const blockedBy = inlineBlockedBy(elements, "box-shadow");
     const hasShadow = hasAuthoredProperty(selection, "box-shadow", tokenRow) || elements.some((element) => {
         const value = getStateStyleValue(element, "box-shadow");
         return value !== "" && value !== "none";
     });
     const visibility = useFieldVisibility(elements, "box-shadow", hasShadow);
-    return (_jsxs("div", { className: "editor", "data-test": "box-shadow-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Box Shadow" }), !visibility.visible ? (_jsx(IconButton, { variant: "quiet", label: "Add Box Shadow", "data-test": "add-shadow", onClick: visibility.show, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) })) : null] }), visibility.visible ? _jsx("div", { className: "property", children: _jsx(FieldRow, { label: "Box Shadow", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "box-shadow", selection: selection, tokenRow: tokenRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }) }) : null] }));
+    function commitLayers(nextLayers) {
+        if (blockedBy)
+            return false;
+        const nextValue = serializeShadows(nextLayers);
+        if (!setStyle(editTarget, "box-shadow", nextValue, selection && selection.elements.length > 1 ? undefined : metadataFor(tokenRow)))
+            return false;
+        setDraft({ element: el, source, value: nextValue });
+        onAfterEdit?.();
+        return true;
+    }
+    function commitLayer(index, next) {
+        if (!layers)
+            return;
+        commitLayers(layers.map((layer, layerIndex) => layerIndex === index ? next : layer));
+    }
+    function addShadow() {
+        if (!layers)
+            return;
+        if (commitLayers([...layers, defaultShadow()]))
+            visibility.show();
+    }
+    function removeShadow(index) {
+        if (!layers)
+            return;
+        const remaining = layers.filter((_, layerIndex) => layerIndex !== index);
+        if (commitLayers(remaining) && remaining.length === 0)
+            visibility.hide();
+    }
+    function commitColor(index, layer, color) {
+        const result = replaceColorPreservingOpacity(layer.color, color, colorContext);
+        if (result.ok)
+            commitLayer(index, { ...layer, color: result.value });
+    }
+    return (_jsxs("div", { className: "editor box-shadow-editor", "data-test": "box-shadow-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Box Shadow" }), _jsx(IconButton, { variant: "quiet", label: "Add Box Shadow", "data-test": "add-shadow", disabled: blockedBy !== null || layers === null, onClick: addShadow, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) })] }), visibility.visible ? _jsxs("div", { className: "box-shadow-editor__layers", children: [!layers || (wholeShadowToken && !activeDraft) ? _jsx(ControlSurface, { children: _jsx(TokenField, { property: "box-shadow", selection: selection, tokenRow: tokenRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, editMetadata: metadataFor(tokenRow) }) }) : null, layers?.map((layer, index) => {
+                        const color = interpretTokenValue(layer.color, { table: colorContext.tokenTable });
+                        const hex = color.tokenName && color.opacity ? colorValueToHex(color.resolvedValue) : null;
+                        const previewResult = hex && color.opacity ? withColorOpacity(hex, color.opacity.value) : null;
+                        const preview = previewResult?.ok ? previewResult.value : color.resolvedValue;
+                        return (_jsxs("div", { className: "box-shadow-editor__layer", role: "group", "aria-label": `Shadow ${index + 1}`, children: [_jsx("div", { className: "box-shadow-editor__dimensions", children: DIMENSIONS.map(({ label, description, Icon }, dimension) => (_jsx(Tooltip, { content: description, disableFocus: true, children: _jsx(ControlSurface, { children: _jsx(TokenValueField, { property: "box-shadow", semanticSlot: "length", nudgeProperty: dimension === 2 ? "padding-top" : "margin-left", domElement: el, committedValue: layer.lengths[dimension].replace(/px$/i, ""), activeTokenName: tokenName(layer.lengths[dimension]), resolvedValue: resolveToken(layer.lengths[dimension], allEntries), entries: allEntries, blockedBy: blockedBy, label: label, inputDataTest: `shadow-${index}-${dimension}`, chipVariant: "small", leading: _jsx(Icon, { size: 16, stroke: 1.8, "aria-hidden": "true" }), formatRawValue: (raw) => completeCssValue(raw, valuePolicyFor("border-width")), onCommitRaw: (input) => {
+                                                    const raw = completeCssValue(input, valuePolicyFor("border-width"));
+                                                    if (!LENGTH.test(raw) || (dimension === 2 && /^-/.test(raw)))
+                                                        return;
+                                                    const lengths = [...layer.lengths];
+                                                    lengths[dimension] = raw;
+                                                    commitLayer(index, { ...layer, lengths });
+                                                }, onSelectToken: (token) => {
+                                                    const lengths = [...layer.lengths];
+                                                    lengths[dimension] = `var(${token.name})`;
+                                                    commitLayer(index, { ...layer, lengths });
+                                                }, onUnlink: (raw) => {
+                                                    const lengths = [...layer.lengths];
+                                                    lengths[dimension] = raw;
+                                                    commitLayer(index, { ...layer, lengths });
+                                                } }) }) }, label))) }), _jsx(IconButton, { variant: "quiet", className: "box-shadow-editor__remove", label: `Remove Shadow ${index + 1}`, "data-test": `remove-shadow-${index}`, disabled: blockedBy !== null, onClick: () => removeShadow(index), children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) }), _jsx(Tooltip, { content: "Color and opacity", disableFocus: true, children: _jsx(ControlSurface, { className: "box-shadow-editor__color", children: _jsx(TokenValueField, { property: "box-shadow", semanticSlot: "color", domElement: el, isColor: true, committedValue: tokenName(layer.color) || layer.color === "currentColor" ? layer.color : colorValueToHex(layer.color) ?? layer.color, activeTokenName: color.tokenName, resolvedValue: preview, entries: allEntries, blockedBy: blockedBy, label: "Shadow Color", inputDataTest: `shadow-${index}-color`, opacity: color.opacity, onCommitRaw: (color) => commitColor(index, layer, color), onSelectToken: (token) => commitColor(index, layer, `var(${token.name})`), onUnlink: (color) => commitLayer(index, { ...layer, color }), onCommitOpacity: (opacity) => {
+                                                const result = applyColorOpacity(layer.color, opacity);
+                                                if (!result.ok)
+                                                    return false;
+                                                commitLayer(index, { ...layer, color: result.value });
+                                            } }) }) })] }, index));
+                    })] }) : null] }));
 }

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

@@ -1,10 +1,14 @@
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import type { TokenEntry } from "../../css/model/index.js";
 import type { SelectedElement } from "../selection/selectionStore.js";
 import type { ResolvedProperty } from "../../css/model/index.js";
 import type { StyleSelection } from "../selection/styleSelection.js";
 export interface ColorPickerProps {
     element: SelectedElement;
+    title?: string;
+    toolbar?: ReactNode;
+    /** Overrides initial presence for sections that use computed paint. */
+    present?: boolean;
     selection?: StyleSelection | null;
     property?: string;
     entries?: TokenEntry[];

package/dist/inspector/styleEditors/ColorPicker.js

@@ -5,10 +5,13 @@ import { TokenField } from "../tokens/TokenField.js";
 import { formatInspectorLabel } from "../ui/labels.js";
 import { IconButton } from "../ui/IconButton.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
+import { Tooltip } from "../ui/Tooltip.js";
 import { setStyle } from "../tokens/editActions.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
 import { hasAuthoredProperty, isZeroCssValue } from "./stylePresence.js";
 import { useFieldVisibility } from "./useFieldVisibility.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
+import { inlineStyleWarningContent } from "../ui/InlineStyleWarning.js";
 function colorSectionTitle(property) {
     if (property === "background-color")
         return "Background Color";
@@ -30,19 +33,22 @@ export function isEmptyColorValue(value) {
         && isZeroCssValue(components[3]);
 }
 export function ColorPicker(props) {
-    const { element, selection, property = "color", entries, tokenRow, onAfterEdit } = props;
+    const { element, selection, property = "color", entries, tokenRow, onAfterEdit, title, toolbar, present } = props;
     const el = element.domElement;
     const selectedElements = selection?.domElements ?? [el];
     const target = selection?.target ?? el;
+    const blockedBy = inlineBlockedBy(selectedElements, property);
     const allEntries = entries ?? getNudgeUiTokenEntries();
-    const hasColor = hasAuthoredProperty(selection, property, tokenRow)
-        || selectedElements.some((selected) => !isEmptyColorValue(getStateStyleValue(selected, property)));
+    const hasColor = present ?? (hasAuthoredProperty(selection, property, tokenRow)
+        || selectedElements.some((selected) => !isEmptyColorValue(getStateStyleValue(selected, property))));
     const visibility = useFieldVisibility(selectedElements, property, hasColor);
     const showTokenField = visibility.visible;
     function handleRemoveColor() {
+        if (blockedBy)
+            return;
         setStyle(target, property, "transparent");
         visibility.hide();
         onAfterEdit?.();
     }
-    return (_jsxs("div", { className: `editor`, "data-test": "color-picker", "data-property": property, children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: colorSectionTitle(property) }), showTokenField ? (_jsx(IconButton, { variant: "quiet", label: `Remove ${colorSectionTitle(property)}`, "data-test": "remove-color", className: "color__remove", onClick: handleRemoveColor, children: _jsx(IconMinus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })) : (_jsx(IconButton, { variant: "quiet", label: `Add ${colorSectionTitle(property)}`, "data-test": "add-color", className: "color__add", onClick: visibility.show, children: _jsx(IconPlus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }))] }), showTokenField && (_jsx("div", { className: "color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: property, tokenRow: tokenRow, selection: selection, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: onAfterEdit }) }) }))] }));
+    return (_jsxs("div", { className: `editor`, "data-test": "color-picker", "data-property": property, children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: title ?? colorSectionTitle(property) }), showTokenField ? (_jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), children: _jsx(IconButton, { variant: "quiet", label: `Remove ${colorSectionTitle(property)}`, "data-test": "remove-color", className: "color__remove", disabled: blockedBy !== null, onClick: handleRemoveColor, children: _jsx(IconMinus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }) })) : (_jsx(IconButton, { variant: "quiet", label: `Add ${colorSectionTitle(property)}`, "data-test": "add-color", className: "color__add", onClick: visibility.show, children: _jsx(IconPlus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }))] }), showTokenField && toolbar, showTokenField && (_jsx("div", { className: "color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: property, tokenRow: tokenRow, selection: selection, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: onAfterEdit }) }) }))] }));
 }

package/dist/inspector/styleEditors/GapField.js

@@ -1,12 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TokenField } from "../tokens/TokenField.js";
 import { formatInspectorLabel } from "../ui/labels.js";
-import { inlineAuthoredValue, meaningfulLayoutValue } from "./layoutValue.js";
-import { LayoutBlockedIndicator } from "./LayoutBlockedIndicator.js";
+import { meaningfulLayoutValue } from "./layoutValue.js";
 export const GAP_PRESETS = ["0", "0.25rem", "0.5rem", "0.75rem", "1rem", "1.5rem", "2rem", "3rem"];
 /** Renders a gap value with a token chip or the legacy raw-value fallback. */
 export function GapField({ property, domElement: el, editTarget, selection, entries, tokenRows, leading, onAfterEdit, }) {
     const tokenRow = tokenRows.find((row) => row.property === property) ?? null;
-    const blockedBy = inlineAuthoredValue(el, property);
-    return (_jsxs("span", { className: `layout-combo${blockedBy ? " layout-combo--blocked" : ""}`, "data-test": "layout-combo", "data-property": property, children: [_jsx(TokenField, { property: property, selection: selection, tokenRow: tokenRow, initialValue: meaningfulLayoutValue(el, property), domElement: el, editTarget: editTarget, entries: entries, suggestions: GAP_PRESETS, leading: leading, inputDataTest: `layout-combo-input-${property}`, label: formatInspectorLabel(property), chipVariant: "small", disabled: blockedBy !== null, onAfterEdit: onAfterEdit }), blockedBy ? _jsx(LayoutBlockedIndicator, { blockedBy: blockedBy }) : null] }));
+    return (_jsx("span", { className: "layout-combo", "data-test": "layout-combo", "data-property": property, children: _jsx(TokenField, { property: property, selection: selection, tokenRow: tokenRow, initialValue: meaningfulLayoutValue(el, property), domElement: el, editTarget: editTarget, entries: entries, suggestions: GAP_PRESETS, leading: leading, inputDataTest: `layout-combo-input-${property}`, label: formatInspectorLabel(property), chipVariant: "small", inlineWarningDataTest: "layout-combo-blocked", inlineWarningTooltipDataTest: "layout-combo-blocked-tooltip", onAfterEdit: onAfterEdit }) }));
 }

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

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import type { EditTarget } from "../selection/editTarget.js";
+import { type EditTarget } from "../selection/editTarget.js";
 export interface GridChildSectionProps {
     domElement: HTMLElement;
     editTarget?: EditTarget;

package/dist/inspector/styleEditors/GridChildSection.js

@@ -5,11 +5,15 @@ import { ControlSurface } from "../ui/ControlSurface.js";
 import { FieldRow } from "../ui/FieldRow.js";
 import { SegmentedControl } from "../ui/SegmentedControl.js";
 import { TextInput } from "../ui/TextInput.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
 import { commitGridAxisPlacement, commitGridChildAlignment, readGridAxisPlacement, readGridChildAlignment, } from "./gridChildModel.js";
+import { targetElements } from "../selection/editTarget.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 function readAxis(el, axis) {
     return { placement: readGridAxisPlacement(el, axis) };
 }
-function AxisPlacementRow({ axis, label, state, onStart }) {
+function AxisPlacementRow({ axis, label, state, elements, onStart }) {
+    const blockedBy = inlineBlockedBy(elements, `grid-${axis}-start`, `grid-${axis}-end`);
     const [draft, setDraft] = useState(state.placement.start);
     const draftRef = useRef(draft);
     useEffect(() => {
@@ -21,13 +25,15 @@ function AxisPlacementRow({ axis, label, state, onStart }) {
         setDraft(next);
     }
     function commit() {
+        if (blockedBy)
+            return;
         const next = draftRef.current.trim() || "auto";
         updateDraft(next);
         if (next !== state.placement.start)
             onStart(next);
     }
     const AxisIcon = axis === "column" ? IconColumns2 : IconLayoutRows;
-    return (_jsx(FieldRow, { label: label, className: `field-row--stacked layout__grid-child-placement layout__grid-child-placement--${axis}`, "data-test": `layout-grid-child-${axis}`, children: _jsxs(ControlSurface, { children: [_jsx(AxisIcon, { className: "layout__grid-child-placement-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsx(TextInput, { appearance: "embedded", value: draft, "data-test": `layout-grid-child-${axis}-start`, "aria-label": label, onChange: (event) => updateDraft(event.target.value), onBlur: commit, onKeyDown: (event) => {
+    return (_jsx(FieldRow, { label: label, className: `field-row--stacked layout__grid-child-placement layout__grid-child-placement--${axis}`, "data-test": `layout-grid-child-${axis}`, children: _jsxs(ControlSurface, { children: [_jsx(AxisIcon, { className: "layout__grid-child-placement-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsx(TextInput, { appearance: "embedded", value: draft, "data-test": `layout-grid-child-${axis}-start`, "aria-label": label, disabled: blockedBy !== null, onChange: (event) => updateDraft(event.target.value), onBlur: commit, onKeyDown: (event) => {
                         if (event.key === "Escape") {
                             event.preventDefault();
                             updateDraft(state.placement.start);
@@ -37,10 +43,12 @@ function AxisPlacementRow({ axis, label, state, onStart }) {
                             event.preventDefault();
                             event.currentTarget.blur();
                         }
-                    } })] }) }));
+                    } }), _jsx(InlineStyleWarning, { blockedBy: blockedBy })] }) }));
 }
-function AlignmentControl({ axis, value, onChange }) {
+function AlignmentControl({ axis, value, elements, onChange }) {
     const horizontal = axis === "h";
+    const property = horizontal ? "justify-self" : "align-self";
+    const blockedBy = inlineBlockedBy(elements, property);
     const options = horizontal
         ? [
             { value: "start", label: "Align left", icon: _jsx(IconAlignBoxLeftMiddle, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
@@ -54,10 +62,10 @@ function AlignmentControl({ axis, value, onChange }) {
             { value: "end", label: "Align bottom", icon: _jsx(IconAlignBoxCenterBottom, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
             { value: "stretch", label: "Stretch vertically", icon: _jsx(IconAlignBoxCenterStretch, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
         ];
-    return (_jsx(FieldRow, { label: horizontal ? "Horizontal alignment" : "Vertical alignment", hideLabel: true, className: `field-row--stacked layout__grid-child-alignment layout__grid-child-alignment--${axis}`, "data-test": `layout-grid-child-align-${axis}`, children: _jsx(SegmentedControl, { value: value === "auto" ? null : value, "aria-label": horizontal ? "Horizontal alignment" : "Vertical alignment", "data-test": `layout-grid-child-select-${horizontal ? "justify-self" : "align-self"}`, className: "layout__grid-child-alignment-control", options: options.map((option) => ({
-                ...option,
-                testId: `layout-grid-child-align-${axis}-${option.value}`,
-            })), onChange: onChange, allowDeselect: true, onDeselect: () => onChange("auto") }) }));
+    return (_jsxs(FieldRow, { label: horizontal ? "Horizontal alignment" : "Vertical alignment", hideLabel: true, className: `field-row--stacked layout__grid-child-alignment layout__grid-child-alignment--${axis}`, "data-test": `layout-grid-child-align-${axis}`, children: [_jsx(SegmentedControl, { value: value === "auto" ? null : value, "aria-label": horizontal ? "Horizontal alignment" : "Vertical alignment", "data-test": `layout-grid-child-select-${property}`, className: "layout__grid-child-alignment-control", disabled: blockedBy !== null, options: options.map((option) => ({
+                    ...option,
+                    testId: `layout-grid-child-align-${axis}-${option.value}`,
+                })), onChange: onChange, allowDeselect: true, onDeselect: () => onChange("auto") }), _jsx(InlineStyleWarning, { blockedBy: blockedBy })] }));
 }
 /**
  * Grid child controls expose only placement starts and per-axis alignment.
@@ -66,6 +74,7 @@ function AlignmentControl({ axis, value, onChange }) {
  */
 export function GridChildSection({ domElement: el, editTarget, revision = 0, onAfterEdit, }) {
     const target = editTarget ?? el;
+    const elements = targetElements(target);
     const [column, setColumn] = useState(() => readAxis(el, "column"));
     const [row, setRow] = useState(() => readAxis(el, "row"));
     const [alignH, setAlignH] = useState(() => readGridChildAlignment(el, "h"));
@@ -87,5 +96,5 @@ export function GridChildSection({ domElement: el, editTarget, revision = 0, onA
         if (commitGridChildAlignment(target, axis, value).length > 0)
             handleAfterEdit();
     }
-    return (_jsxs("div", { className: "layout__group layout__grid-child", "data-test": "layout-grid-child", children: [_jsx("div", { className: "editor__title", children: "Grid Child" }), _jsxs("div", { className: "layout__grid-child-fields", "data-test": "layout-grid-child-fields", children: [_jsx(AxisPlacementRow, { axis: "column", label: "Column", state: column, onStart: (start) => handleStart("column", start) }), _jsx(AxisPlacementRow, { axis: "row", label: "Row", state: row, onStart: (start) => handleStart("row", start) }), _jsx(AlignmentControl, { axis: "v", value: alignV, onChange: (value) => handleAlignment("v", value) }), _jsx(AlignmentControl, { axis: "h", value: alignH, onChange: (value) => handleAlignment("h", value) })] })] }));
+    return (_jsxs("div", { className: "layout__group layout__grid-child", "data-test": "layout-grid-child", children: [_jsx("div", { className: "editor__title", children: "Grid Child" }), _jsxs("div", { className: "layout__grid-child-fields", "data-test": "layout-grid-child-fields", children: [_jsx(AxisPlacementRow, { axis: "column", label: "Column", state: column, elements: elements, onStart: (start) => handleStart("column", start) }), _jsx(AxisPlacementRow, { axis: "row", label: "Row", state: row, elements: elements, onStart: (start) => handleStart("row", start) }), _jsx(AlignmentControl, { axis: "v", value: alignV, elements: elements, onChange: (value) => handleAlignment("v", value) }), _jsx(AlignmentControl, { axis: "h", value: alignH, elements: elements, onChange: (value) => handleAlignment("h", value) })] })] }));
 }